/* ===== Homepage: natural, premium look. Palette from the logo. All motion is CSS/transform based and honours reduced-motion. ===== */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .rise { animation: rise .95s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes float { 50% { transform: translateY(-10px); } } @keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.btn--lg { min-height: 56px; padding: 0 var(--s6); font-size: 1.1rem; } .btn--shine { position: relative; overflow: hidden; } .btn--shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-130%); animation: shine 5.5s ease-in-out 1.5s infinite; } @keyframes shine { 0%, 60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.wave { line-height: 0; } .wave svg { display: block; width: 100%; height: clamp(34px, 6vw, 80px); }
/* ---- hero ---- */
.hero2 { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFBF6 0%, #F4F9EC 100%); padding-top: var(--s4); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; } .blob--g { width: 520px; height: 520px; background: rgba(142, 186, 63, .28); right: -140px; top: -120px; } .blob--r { width: 380px; height: 380px; background: rgba(232, 25, 63, .12); left: -120px; bottom: 40px; }
.hero2__leaf { position: absolute; width: clamp(160px, 22vw, 320px); height: auto; aspect-ratio: 1; opacity: .13; pointer-events: none; transform-origin: 50% 100%; animation: sway 9s ease-in-out infinite; } .hero2__leaf--l { left: -40px; top: 12%; } .hero2__leaf--r { right: -30px; bottom: 16%; animation-delay: -4s; }
.hero2__grid { position: relative; display: grid; gap: var(--s6); align-items: center; padding-block: var(--s6) var(--s9); } @media (min-width: 960px) { .hero2__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s5); padding-block: var(--s7) calc(var(--s9) + 20px); } }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--green); font: 700 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; box-shadow: var(--shadow-1); margin-bottom: var(--s4); } .pill svg { color: var(--green); }
.hero2 h1, .hero2__h { font-size: clamp(2.1rem, 1.1rem + 4.3vw, 4.3rem); line-height: 1.24; margin-bottom: var(--s4); letter-spacing: -.01em; }
.mark { color: var(--red-logo); background: linear-gradient(transparent 66%, rgba(142, 186, 63, .55) 66% 92%, transparent 92%); padding-inline: .08em; white-space: nowrap; }
.hero2__lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 33rem; } .hero2__tag { font: 700 var(--fs-lg)/1.4 var(--font-display-bn); color: var(--green); margin: var(--s4) 0 var(--s5); display: flex; align-items: center; gap: 12px; } .hero2__tag span { width: 38px; height: 3px; border-radius: 3px; background: var(--red-logo); flex: none; }
.hero2__cta { display: flex; flex-wrap: wrap; gap: var(--s3); } .hero2__assure { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-xs); font-weight: 600; color: var(--green-dark); } .hero2__assure li { display: inline-flex; align-items: center; gap: 8px; }
.hero2__photo { border-radius: 36px; overflow: hidden; aspect-ratio: 1 / 1.02; box-shadow: var(--shadow-3); } .hero2__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero2 .wave { position: absolute; left: 0; right: 0; bottom: -1px; }
/* hero art: echoes the logo's circular red/green arcs + leaves */
.hv { --mx: 0; --my: 0; position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.hv__arcs { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 80s linear infinite; } .arc { animation: draw 2.4s var(--ease) .5s both; } .arc--r { --len: .62; } .arc--g { --len: .58; animation-delay: .8s; } @keyframes draw { from { stroke-dasharray: 0 1; } to { stroke-dasharray: var(--len) 1; } }
.hv__disc { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #2FA05F 0%, #07663A 52%, #04472A 100%); box-shadow: inset 0 -34px 60px rgba(0,0,0,.28), 0 40px 80px -30px rgba(7, 102, 58, .6); transform: translate(calc(var(--mx) * -8px), calc(var(--my) * -8px)); transition: transform .25s ease-out; }
.hv__orbit { position: absolute; inset: 0; animation: spin 60s linear infinite; } .hv__slot { position: absolute; inset: 0; transform: rotate(var(--a)); } .hv__ing { position: absolute; left: 50%; top: 1.5%; width: 15%; margin-left: -7.5%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.28)); animation: upright 60s linear infinite; } @keyframes upright { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) * -1 - 360deg)); } }
.hv__leaf { position: absolute; transform-origin: 100% 100%; animation: sway 7s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); } .hv__leaf--a { width: 21%; left: 4%; top: 2%; } .hv__leaf--b { width: 14%; left: 20%; top: -2%; animation-delay: -3s; }
.hv__p { position: absolute; left: 50%; bottom: 10%; width: 43%; transform: translateX(-50%) translate(calc(var(--mx) * 16px), calc(var(--my) * 10px)); transition: transform .25s ease-out; } .hv__jar { width: 100%; display: block; animation: float 7s ease-in-out infinite; filter: drop-shadow(0 30px 24px rgba(0,0,0,.38)); --glass: rgba(255,255,255,.6); --glass-fill: rgba(255,255,255,.14); }
.hv__badge { position: absolute; width: 25%; left: -1%; bottom: 9%; animation: spin 24s linear infinite; filter: drop-shadow(0 10px 14px rgba(0,0,0,.18)); }
.hv__price { position: absolute; right: -1%; bottom: 17%; background: #fff; border-radius: 18px; padding: 10px 18px; box-shadow: var(--shadow-3); display: grid; text-decoration: none; color: var(--ink); animation: float 6s ease-in-out -2s infinite; } .hv__price small { color: var(--text-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } .hv__price b { color: var(--red); font-size: 1.6rem; line-height: 1.1; }
/* ---- marquee + stats ---- */
.marquee { background: var(--green); color: #fff; overflow: hidden; padding-block: 13px; border-top: 1px solid rgba(255,255,255,.12); } .marquee__track { display: flex; gap: 30px; align-items: center; width: max-content; animation: marq 46s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee span { font: 700 1.2rem/1.6 var(--font-display-bn); white-space: nowrap; } .marquee i { display: grid; opacity: .9; } .marquee i svg { width: 18px; height: 18px; } @keyframes marq { to { transform: translateX(-50%); } }
.statsband { background: var(--green); color: #fff; padding-block: var(--s5) var(--s6); } .statsband__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); text-align: center; } @media (min-width: 800px) { .statsband__row { grid-template-columns: repeat(4, 1fr); } } .statsband b { display: block; font: 800 clamp(2rem, 1.4rem + 2vw, 3rem)/1.1 var(--font-body); color: #fff; font-variant-numeric: tabular-nums; } .statsband span { font-size: var(--fs-sm); opacity: .88; }
/* ---- sections ---- */
.section-head--c { margin-inline: auto; text-align: center; justify-items: center; } .section-head h2 { position: relative; } .section-head--c h2::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 4px; margin: var(--s3) auto 0; background: linear-gradient(90deg, var(--red-logo) 0 50%, var(--green) 50%); }
.js .reveal--left { transform: translateX(-36px); } .js .reveal--right { transform: translateX(36px); } .js .reveal--zoom { transform: scale(.88); }
.cat-grid--orb { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s4); } .cat-orb { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--ink); padding: var(--s3); } .cat-orb b { font: 700 1rem/1.3 var(--font-body); margin-top: 6px; } .cat-orb small { color: var(--text-muted); font-size: var(--fs-xs); }
.cat-orb__ic { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #fff, #E6F3EB 70%); border: 3px solid #fff; box-shadow: 0 14px 28px -12px rgba(7, 102, 58, .5), 0 0 0 1px var(--line); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base), background var(--t-base); } .cat-orb__ic svg { width: 60%; height: 60%; transition: transform var(--t-slow) var(--ease); } .cat-orb:hover .cat-orb__ic { transform: translateY(-8px); background: radial-gradient(circle at 30% 25%, #fff, #EEF6DD 70%); box-shadow: 0 22px 34px -14px rgba(7, 102, 58, .55), 0 0 0 2px var(--lime); } .cat-orb:hover .cat-orb__ic svg { transform: scale(1.12) rotate(-6deg); }
.sec-feat { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, var(--bg-alt)); } .sec-leaf { position: absolute; width: 240px; aspect-ratio: 1; opacity: .09; pointer-events: none; } .sec-leaf--l { left: -50px; top: 40px; animation: sway 10s ease-in-out infinite; }
.sec-steps { background: linear-gradient(180deg, var(--bg-alt), #fff); } .steps { list-style: none; padding: var(--s5) 0 0; margin: 0; display: grid; gap: var(--s7); } @media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s7) var(--s5) var(--s5); text-align: center; box-shadow: var(--shadow-1); } .steps h3 { font-size: 1.2rem; } .steps p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.steps__n { position: absolute; top: -26px; left: 50%; translate: -50% 0; width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font: 800 1.4rem/1 var(--font-body); box-shadow: 0 0 0 7px var(--red-tint); } @media (min-width: 800px) { .steps li:not(:last-child)::after { content: ""; position: absolute; top: 0; right: calc(var(--s6) * -1); width: var(--s6); border-top: 2px dashed var(--lime); } }
.why { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base), border-color var(--t-base); } .why:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--lime); }
.why__ic { width: 64px; height: 64px; display: grid; place-items: center; background: var(--green-tint); color: var(--green); border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; margin-bottom: var(--s3); transition: border-radius .8s var(--ease), background .4s; } .why:hover .why__ic { border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%; background: var(--lime-tint); }
.sec-story { background: radial-gradient(900px 400px at 0% 50%, rgba(142, 186, 63, .18), transparent 70%); } .story2 { display: grid; gap: var(--s7); align-items: center; } @media (min-width: 900px) { .story2 { grid-template-columns: .9fr 1.1fr; } }
.story2__art { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin-inline: auto; } .story2__blob { position: absolute; inset: 4%; border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; background: linear-gradient(145deg, #E6F3EB, #CFE6B0); animation: morph 14s ease-in-out infinite; box-shadow: var(--shadow-2); } @keyframes morph { 50% { border-radius: 44% 56% 46% 54% / 56% 44% 56% 44%; } }
.story2__jar { position: absolute; left: 50%; top: 50%; width: 38%; translate: -50% -48%; filter: drop-shadow(0 26px 22px rgba(7,102,58,.35)); --glass: rgba(28,25,23,.34); --glass-fill: rgba(28,25,23,.06); } .story2__i { position: absolute; width: 17%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); animation: float 6s ease-in-out infinite; } .story2__i--a { left: 8%; top: 14%; } .story2__i--b { right: 6%; top: 22%; animation-delay: -1.5s; } .story2__i--c { left: 12%; bottom: 12%; animation-delay: -3s; } .story2__i--d { right: 10%; bottom: 10%; animation-delay: -4.5s; }
.sec-ing { padding-block: var(--s7); } .ing:hover svg { animation: float 1.6s ease-in-out infinite; }
.ctaband { position: relative; overflow: hidden; background: linear-gradient(120deg, #07663A 0%, #05522F 55%, #033D22 100%); color: #fff; padding-block: var(--s9); text-align: center; } .ctaband__in { position: relative; z-index: 1; } .ctaband h2 { font-size: var(--fs-h2); color: #fff; } .ctaband p { font: 600 var(--fs-lg)/1.5 var(--font-display-bn); color: #CDEBB0; margin-bottom: var(--s5); }
.ctaband__leaf { position: absolute; width: clamp(150px, 20vw, 280px); aspect-ratio: 1; opacity: .22; animation: sway 9s ease-in-out infinite; transform-origin: 50% 100%; } .ctaband__leaf--l { left: 2%; bottom: -30px; } .ctaband__leaf--r { right: 2%; top: -20px; animation-delay: -4s; }
.ctaband::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: 10%; bottom: -260px; background: rgba(232, 25, 63, .35); filter: blur(60px); }
.site-header { backdrop-filter: saturate(1.4) blur(12px); } .brand img { height: 58px; }
@media (max-width: 899px) { .hv { width: min(92%, 440px); } .hv__price { right: 0; padding: 8px 12px; } .hv__price b { font-size: 1.2rem; } .hero2 h1 { font-size: clamp(1.9rem, 1.2rem + 5vw, 2.6rem); } }
@media (prefers-reduced-motion: reduce) { .rise, .hv__arcs, .arc, .hv__orbit, .hv__ing, .hv__leaf, .hv__jar, .hv__badge, .hv__price, .hero2__leaf, .marquee__track, .btn--shine::after, .story2__blob, .story2__i, .sec-leaf, .ctaband__leaf { animation: none !important; } .rise { opacity: 1; transform: none; } .js .reveal--left, .js .reveal--right, .js .reveal--zoom { transform: none; } }

/* ---- polish fixes found by reviewing real screenshots ---- */
.pcard__media > svg { width: auto; height: 84%; max-width: 80%; } .pcard__media > img { width: 100%; height: 100%; object-fit: cover; } .pcard:hover .pcard__media > img { transform: scale(1.05); }
.pcard__actions .btn { padding-inline: 14px; white-space: nowrap; font-size: .95rem; }
.cat-grid--orb { grid-template-columns: repeat(2, 1fr); max-width: 940px; margin-inline: auto; } @media (min-width: 560px) { .cat-grid--orb { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .cat-grid--orb { grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4); } }
.why-grid { grid-template-columns: 1fr; } @media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .why-grid { grid-template-columns: repeat(3, 1fr); } } .why h3 { margin-bottom: 2px; } .why .why__bn { display: block; color: var(--green); font: 600 .95rem/1.5 var(--font-display-bn); margin-bottom: var(--s2); }
.story__quote { margin-block: var(--s5) var(--s5); }