@font-face{font-family:"Fredoka";src:url(/stargarden/fonts/fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/stargarden/fonts/nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}

:root{
  --cream:#fbf6ea; --cream-2:#f4ecd9; --ink:#12343b; --ink-soft:#44646a;
  --deep:#0f3a45; --deep-2:#0b2b35; --aqua:#4cc2d4; --coral:#ef6f68; --sun:#ffd36e;
  --radius:28px; --maxw:1180px; --pad:clamp(20px,5vw,56px);
  --display:"Fredoka","Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
main{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font:400 clamp(16px,1.1vw + 11px,19px)/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;z-index:100;transition:top .2s}
.skip:focus{top:12px}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.scrolled{background:rgba(251,246,234,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(18,52,59,.08)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 22px/1 var(--display)}
.brand-mark{width:32px;height:32px}
.site-header nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px);font-weight:700;font-size:15.5px}
.site-header nav a{text-decoration:none;position:relative}
.site-header nav a:not(.pill)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-header nav a:not(.pill):hover::after,.site-header nav a:not(.pill):focus-visible::after{transform:scaleX(1)}
.pill{background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;transition:transform .2s,background .2s}
.pill:hover{background:var(--coral);transform:translateY(-1px)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 17px/1 var(--display);padding:16px 26px;border-radius:999px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary{background:var(--coral);color:#fff;box-shadow:0 10px 24px -10px rgba(239,111,104,.8)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(239,111,104,.9)}
.btn.ghost{color:var(--ink);padding-inline:8px}
.btn.ghost span{transition:transform .2s}
.btn.ghost:hover span{transform:translateX(4px)}
.btn.big{font-size:clamp(20px,3vw,30px);padding:22px 36px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(239,111,104,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(239,111,104,0)}100%{box-shadow:0 0 0 0 rgba(239,111,104,0)}}
.kicker{font:600 14px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:18px}
.kicker.light{color:var(--sun)}
.tag{font:600 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(18,52,59,.08);color:var(--ink-soft);margin-left:8px;vertical-align:middle}
.tag.live{background:rgba(76,194,212,.22);color:#0b5f6d}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.32fr);align-items:center;gap:clamp(24px,3.4vw,56px);padding:104px var(--pad) 72px;max-width:1500px;margin:0 auto}
.hero h1{font-size:clamp(36px,3.7vw,60px);font-weight:600;margin:20px 0 22px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 .line:nth-child(3)>span{animation-delay:.24s}
.accent{background:linear-gradient(100deg,var(--coral),#f5a25d);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes rise{to{transform:none}}
.lede{font-size:clamp(18px,1.5vw,22px);color:var(--ink-soft);max-width:34em;opacity:0;animation:fade .8s .5s forwards}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px;opacity:0;animation:fade .8s .65s forwards}
@keyframes fade{to{opacity:1}}
.hero-visual{margin:0;position:relative;opacity:0;animation:fade 1s .3s forwards}
.hero-visual img{width:100%;border-radius:var(--radius);box-shadow:0 40px 80px -30px rgba(15,58,69,.55),0 0 0 8px #fff;transform:translateY(var(--py,0)) scale(var(--ps,1));transition:transform .1s linear;will-change:transform}
.hero-visual::before{content:"";position:absolute;inset:6% -6% -10% 8%;background:radial-gradient(60% 60% at 60% 50%,rgba(76,194,212,.35),transparent 70%);z-index:-1;filter:blur(20px)}
.hero-visual figcaption{font-size:12.5px;color:var(--ink-soft);margin:18px 6px 0;max-width:40em}
.scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;border:2px solid rgba(18,52,59,.35);border-radius:14px;transform:translateX(-50%)}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:var(--ink);border-radius:2px;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* section heads */
.section-head{max-width:var(--maxw);margin:0 auto 56px;padding:0 var(--pad)}
.section-head h2{font-size:clamp(32px,4.4vw,62px);font-weight:600;max-width:15em}
.section-head p:not(.kicker){margin-top:20px;max-width:38em;color:var(--ink-soft);font-size:1.08em}

/* product: sticky stage */
.product{padding:clamp(72px,10vw,140px) 0 clamp(40px,6vw,80px);background:var(--cream-2);border-radius:48px 48px 0 0}
.stage-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,6vw,96px)}
.steps .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s,transform .5s;transform:translateX(-10px)}
.steps .step.is-active{opacity:1;transform:none}
.step .num{font:600 16px/1 var(--display);color:var(--coral);letter-spacing:.1em}
.step h3{font-size:clamp(34px,4.2vw,58px);font-weight:600;margin:14px 0 14px}
.step .strong{font:500 clamp(20px,2vw,26px)/1.3 var(--display);margin-bottom:14px}
.step p:last-child{color:var(--ink-soft);max-width:30em}
.stage{position:sticky;top:11vh;height:78vh;display:grid;place-items:center;align-self:start}
.phone-glow{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(76,194,212,.45),rgba(76,194,212,0) 68%);filter:blur(10px)}
.shot{position:absolute;margin:0;opacity:0;transform:translateY(40px) scale(.94) rotate(2deg);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.shot.is-active{opacity:1;transform:none}
.shot img{border-radius:34px;box-shadow:0 36px 70px -26px rgba(15,58,69,.6),0 0 0 7px #fff;max-height:70vh;width:auto}
.shot.s2 img{max-height:none;width:min(100%,520px)}
.stage-note{position:absolute;bottom:-2px;font-size:12px;color:var(--ink-soft)}

/* flow rail */
.flow{padding:clamp(72px,10vw,140px) 0;background:var(--cream-2)}
.rail{list-style:none;margin:0 auto;padding:0 var(--pad);max-width:var(--maxw);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);position:relative}
.rail::before,.rail::after{content:"";position:absolute;left:var(--pad);right:var(--pad);top:15px;height:4px;border-radius:2px}
.rail::before{background:rgba(18,52,59,.12)}
.rail::after{background:linear-gradient(90deg,var(--aqua),var(--coral));transform-origin:left;transform:scaleX(var(--rp,0));right:var(--pad);width:auto}
.rail li{position:relative;padding-top:52px;opacity:.35;transform:translateY(18px);transition:opacity .5s,transform .5s}
.rail li.on{opacity:1;transform:none}
.node{position:absolute;top:6px;left:0;width:22px;height:22px;border-radius:50%;background:var(--cream-2);border:4px solid rgba(18,52,59,.2);z-index:1;transition:all .4s}
.rail li.on .node{border-color:var(--coral);background:var(--coral);box-shadow:0 0 0 8px rgba(239,111,104,.18)}
.rail h3{font-size:clamp(24px,2.4vw,32px);font-weight:600;margin-bottom:10px}
.rail p{color:var(--ink-soft);font-size:.96em;margin-bottom:14px}
.rail .tag{margin-left:0}

/* vision */
.vision{position:relative;background:linear-gradient(180deg,var(--deep) 0%,var(--deep-2) 100%);color:#eaf7f8;padding:clamp(96px,14vw,200px) var(--pad);overflow:hidden;border-radius:48px;margin:0 clamp(0px,1.5vw,20px)}
.vision-inner{position:relative;max-width:var(--maxw);margin:0 auto;z-index:1}
.vision h2{font-size:clamp(38px,6.4vw,100px);font-weight:600;max-width:12.5em;margin-bottom:clamp(48px,7vw,100px)}
.vision h2 .w{opacity:.2;transition:opacity .25s}
.vision h2 .w.lit{opacity:1}
.beliefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(32px,6vw,96px);max-width:1000px;margin-left:auto}
.beliefs p{font-size:clamp(18px,1.6vw,23px);line-height:1.5;color:#cfe8ea;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.bubbles i{position:absolute;bottom:-60px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,255,255,.04) 60%);animation:float linear infinite}
.bubbles i:nth-child(1){left:8%;width:30px;height:30px;animation-duration:14s}
.bubbles i:nth-child(2){left:22%;width:16px;height:16px;animation-duration:10s;animation-delay:-3s}
.bubbles i:nth-child(3){left:48%;width:44px;height:44px;animation-duration:18s;animation-delay:-8s}
.bubbles i:nth-child(4){left:66%;width:20px;height:20px;animation-duration:12s;animation-delay:-5s}
.bubbles i:nth-child(5){left:82%;width:36px;height:36px;animation-duration:16s;animation-delay:-11s}
.bubbles i:nth-child(6){left:93%;width:14px;height:14px;animation-duration:9s;animation-delay:-2s}
@keyframes float{to{transform:translateY(-120vh) translateX(30px)}}

/* families */
.families{padding:clamp(72px,10vw,140px) 0}
.principles{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px)}
.principles article{padding:34px 0;border-top:2px solid var(--ink)}
.principles h3{font-size:clamp(24px,2.6vw,34px);font-weight:600;margin-bottom:12px}
.principles p{color:var(--ink-soft)}
.fine{font-size:13.5px;color:var(--ink-soft);max-width:var(--maxw);margin:36px auto 0;padding:0 var(--pad)}

/* closing */
.closing{padding:clamp(72px,10vw,150px) var(--pad);background:var(--cream-2);border-radius:48px 48px 0 0;text-align:center}
.closing-inner{max-width:760px;margin:0 auto}
.closing h2{font-size:clamp(34px,5vw,68px);font-weight:600;margin:20px 0 22px}
.closing p:not(.eyebrow){color:var(--ink-soft);margin-bottom:36px}

.site-footer{background:var(--deep-2);color:#cfe8ea;padding:48px var(--pad);display:grid;gap:14px;justify-items:center;text-align:center;font-size:15px}
.site-footer .brand{color:#fff}
.site-footer .fine{color:#8fb3b8;margin:6px 0 0;padding:0;max-width:44em}
.site-footer a{text-underline-offset:3px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:96px;min-height:auto;gap:28px}
  .hero-visual{order:2}
  .scroll-cue{display:none}
  .stage-wrap{grid-template-columns:1fr}
  .stage{order:-1;position:sticky;top:58px;height:42vh;z-index:2;background:var(--cream-2);margin:0 calc(var(--pad)*-1);padding:8px 0;box-shadow:0 14px 16px -12px rgba(18,52,59,.18)}
  .shot img{max-height:36vh;border-radius:26px}
  .shot.s2 img{width:min(86vw,380px)}
  .stage-note{display:none}
  .steps .step{min-height:62vh;justify-content:flex-start;padding-top:5vh}
  .rail{grid-template-columns:1fr;gap:28px;padding-left:calc(var(--pad) + 18px)}
  .rail::before,.rail::after{left:calc(var(--pad) + 9px);right:auto;top:6px;bottom:6px;width:4px;height:auto}
  .rail::after{transform:scaleY(var(--rp,0));transform-origin:top;background:linear-gradient(var(--aqua),var(--coral))}
  .rail li{padding:0 0 0 26px}
  .node{top:4px;left:-18px}
  .beliefs,.principles{grid-template-columns:1fr}
  .beliefs{margin-left:0}
  .vision{border-radius:32px}
}
@media (max-width:560px){.site-header nav a:not(.pill){display:none}}
@media (max-width:420px){.btn{padding:15px 22px}.brand{font-size:20px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero h1 .line>span{transform:none}
  .lede,.actions,.hero-visual{opacity:1}
  .reveal{opacity:1;transform:none}
  .vision h2 .w{opacity:1}
  .rail li{opacity:1;transform:none}
  .rail::after{transform:scaleX(1)}
  .steps .step{opacity:1;transform:none}
  .bubbles{display:none}
}