:root{--bg:#eaf2e5;--ink:#163f3a;--mut:#46635d;--coral:#2b7a68;--sun:#f2d38b;--lilac:#b7d8b0;--teal:#18534e;--r:22px;--bd:2.5px solid var(--ink)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:"DM Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(rgba(22,63,58,.08) 1.2px,transparent 1.2px);background-size:22px 22px}
a{color:inherit;text-decoration:none}
h1,h2,h3,.logo{font-family:Fraunces,Georgia,serif;line-height:1.1}
svg use{pointer-events:none}
svg{stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}

.progress{position:fixed;top:0;left:0;height:4px;width:100%;background:var(--coral);transform:scaleX(0);transform-origin:0 50%;z-index:50}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;padding:12px 5vw;background:rgba(234,242,229,.9);backdrop-filter:blur(10px);border-bottom:var(--bd)}
.logo{display:flex;align-items:center;gap:10px;font-size:1.45rem;font-weight:800;margin-right:auto}
.logo img{border-radius:50%;border:var(--bd);object-fit:cover;transition:transform .4s}
.logo:hover img{transform:rotate(-12deg) scale(1.08)}
.logo span{color:var(--coral);display:inline-block;animation:spin 6s linear infinite}
.nav nav{display:flex;gap:26px;font-weight:500}
.nav nav a{position:relative}
.nav nav a:after{content:"";position:absolute;left:0;bottom:-3px;height:3px;width:100%;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav nav a:hover:after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger i{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;transition:.25s}

/* buttons */
.btn{display:inline-block;padding:14px 28px;border-radius:99px;background:var(--coral);color:#fff;font-weight:700;border:var(--bd);box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease-out,box-shadow .15s}
.btn:hover{box-shadow:7px 7px 0 var(--ink)}
.btn:active{box-shadow:1px 1px 0 var(--ink)}
.btn.sm{padding:8px 20px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost.light{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--coral)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px;padding:64px 5vw 56px;min-height:82vh;max-width:1300px;margin:auto}
.tag{display:inline-flex;align-items:center;gap:9px;background:#fff;border:var(--bd);padding:6px 16px;border-radius:99px;font-size:.88rem;font-weight:700;animation:pop .6s both}
.dot{width:9px;height:9px;border-radius:50%;background:var(--teal);animation:pulse 1.6s infinite}
h1{font-size:clamp(2.6rem,6.4vw,4.9rem);font-weight:800;margin:20px 0;letter-spacing:-.02em}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .1em;position:relative}
.w>span{display:inline-block;transform:translateY(110%);animation:up .8s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(.15s + var(--i)*.08s)}
.hl{color:var(--coral);overflow:visible}
.hl svg{position:absolute;left:0;bottom:-.08em;width:100%;height:.28em;stroke:var(--sun);stroke-width:5;stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1s .95s ease forwards}
.lead{max-width:520px;color:var(--mut);font-size:1.12rem;animation:fade .8s .8s both}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px;animation:fade .8s 1s both}
.cta.center{justify-content:center;animation:none}

.orbit{--s:440px;position:relative;width:var(--s);max-width:100%;aspect-ratio:1;margin:auto;animation:pop .8s .3s both}
.blob{position:absolute;inset:8%;background:#cfe6c8;animation:morph 9s ease-in-out infinite}
.ring{position:absolute;inset:0;border:2px dashed var(--ink);border-radius:50%;opacity:.3}
.ring.r2{inset:24%}
.spinner{position:absolute;inset:0;animation:spin 48s linear infinite}
.o{position:absolute;display:grid;place-items:center;width:calc(var(--s)*.18);height:calc(var(--s)*.18);left:calc(50% - var(--s)*.09);top:calc(50% - var(--s)*.09);border-radius:50%;background:#fff;border:var(--bd);box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--a)) translateY(calc(var(--s)/-2)) rotate(calc(var(--a)*-1))}
.o svg{width:calc(var(--s)*.12);height:calc(var(--s)*.12);overflow:visible;stroke-width:3;animation:spin 48s linear infinite reverse}
.core{position:absolute;width:32%;height:32%;left:34%;top:34%;border-radius:50%;border:var(--bd);box-shadow:5px 5px 0 var(--ink);object-fit:cover;background:#eaf2e5}
.core:before{content:""}

/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:#fff;border-block:var(--bd);transform:rotate(-1deg);margin:10px -2vw 20px}
.track{display:flex;gap:28px;width:max-content;padding:15px 0;font-weight:700;font-size:1.05rem;animation:slide 28s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track i{color:var(--sun);font-style:normal}

/* sections */
.section{padding:80px 5vw;max-width:1200px;margin:auto}
h2{font-size:clamp(2rem,4.5vw,3rem);text-align:center;font-weight:800}
.sub{text-align:center;color:var(--mut);margin:10px 0 44px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.card{position:relative;display:block;padding:24px 22px 22px;border-radius:var(--r);background:var(--bg);border:var(--bd);box-shadow:6px 6px 0 var(--ink);--tr:rotate(var(--rot));transform:var(--tr);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translate(-4px,-6px) rotate(0);box-shadow:11px 12px 0 var(--ink)}
.card svg{width:76px;height:76px;margin-bottom:14px;overflow:visible}
.card:hover svg{animation:wiggle .6s}
.card h3{font-size:1.35rem;margin-bottom:6px}
.card p{color:#3b5752;font-size:.95rem}
.go{display:inline-block;margin-top:14px;font-weight:700;border-bottom:2.5px solid var(--ink);transition:letter-spacing .25s}
.card:hover .go{letter-spacing:.06em}

.band{background:var(--sun);border-block:var(--bd);padding:84px 5vw}
.inner{max-width:1100px;margin:auto}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;margin-top:44px;counter-reset:s}
.steps li{background:#fff;padding:26px 22px;border-radius:var(--r);border:var(--bd);box-shadow:5px 5px 0 var(--ink)}
.steps b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--coral);color:#fff;border:var(--bd);margin-bottom:14px;font-family:Fraunces,serif;font-size:1.2rem}
.steps h3{margin-bottom:4px}
.steps p,.why p{color:var(--mut);font-size:.95rem}
.note{text-align:center;margin-top:30px;font-weight:700;font-size:1.1rem}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:44px}
.why div{padding:6px 0 0;border-top:var(--bd)}
.why b{display:block;font:800 3.2rem Fraunces,serif;color:var(--coral);margin:10px 0 4px;-webkit-text-stroke:0}
.why h3{margin-bottom:6px}

.contact{position:relative;overflow:hidden;text-align:center;background:var(--ink);color:#fff;padding:96px 5vw}
.contact .sub{color:#cfe3d6}
.spin{position:absolute;overflow:visible;animation:spin 16s linear infinite;stroke:#fff}
.s1{width:90px;height:90px;left:8%;top:14%}
.s2{width:60px;height:60px;right:10%;bottom:16%;animation-direction:reverse}
.handle{margin-top:28px;color:var(--sun);font-weight:700;letter-spacing:.06em}
footer img{border-radius:50%;border:2px solid #a9c7bb;margin-bottom:8px}
footer{text-align:center;padding:22px 5vw;background:#0e2a27;color:#a9c7bb;font-size:.9rem}

/* sparkle trail */
.sp{position:fixed;left:0;top:0;width:14px;height:14px;pointer-events:none;z-index:60;background:var(--sun);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark .8s ease-out forwards}

/* reveal */
.rv{opacity:0;transform:translateY(34px) var(--tr,rotate(0));transition:opacity .7s var(--d,0s),transform .7s cubic-bezier(.2,.9,.3,1) var(--d,0s),box-shadow .25s}
.rv.in{opacity:1;transform:var(--tr,none)}
.card.rv.in:hover{transform:translate(-4px,-6px) rotate(0);transition-delay:0s}

@keyframes up{to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
@keyframes pop{from{opacity:0;transform:scale(.5) rotate(-12deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bob{50%{translate:0 -14px;rotate:3deg}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(24,83,78,.25)}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes wiggle{25%{transform:rotate(-10deg) scale(1.1)}50%{transform:rotate(8deg) scale(1.1)}75%{transform:rotate(-4deg)}}
@keyframes spark{to{transform:translateY(24px) scale(0) rotate(120deg);opacity:0}}
@keyframes morph{0%,100%{border-radius:60% 40% 55% 45%/50% 60% 40% 50%}50%{border-radius:40% 60% 45% 55%/60% 40% 60% 40%}}

@media(max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:36px;min-height:0;gap:10px}
  .orbit{--s:min(300px,78vw);order:-1}
  .burger{display:block}
  .nav .btn{display:none}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:var(--bd);max-height:0;overflow:hidden;transition:max-height .3s}
  .nav nav a{padding:14px 5vw}
  .nav.open nav{max-height:300px}
  .nav.open .burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav.open .burger i:nth-child(2){opacity:0}
  .nav.open .burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .section{padding:56px 5vw}.band,.contact{padding:60px 5vw}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .w>span{transform:none}.hl svg{stroke-dashoffset:0}.rv{opacity:1;transform:var(--tr,none)}.progress{display:none}
}