@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
  --lagoon:#0FB5A8;--deep:#0B8F86;--pale:#6CCFC5;--tang:#FF6B2C;--amber:#FF9A2E;--sun:#FFC93C;--coral:#FF4B2B;--sky:#E8F8F6;--night:#0E2F3A;
  --glide:cubic-bezier(.2,.8,.2,1);   /* brand easing: a long, soft glide, like a tern landing */
  --mx:0;--my:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Outfit,system-ui,sans-serif;color:var(--night);line-height:1.55;
  background:linear-gradient(180deg,#F6FDFC 0%,var(--sky) 55%,var(--sky) 100%);overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tag{font:500 13px 'IBM Plex Mono',monospace;color:var(--deep);letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}

/* ---------- entrance primitives ---------- */
.rise{opacity:0;transform:translateY(22px);animation:rise 1s var(--glide) var(--d,0s) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- scene (natural backdrop) ---------- */
.scene{position:absolute;top:0;left:0;right:0;height:max(100svh,720px);z-index:0;pointer-events:none;overflow:hidden}
.scene>*{position:absolute}
[data-depth]{transform:translate(calc(var(--mx)*var(--depth,0)*1px),calc(var(--my)*var(--depth,0)*.6px));transition:transform .6s var(--glide)}

.sun{right:9%;top:11%;width:clamp(120px,18vw,240px);aspect-ratio:1;animation:sunrise 2.4s var(--glide) .2s both}
.sun i{position:absolute;inset:0;border-radius:50%;background:var(--sun)}
.sun i:nth-child(2){background:var(--amber);opacity:.35;transform:translate(10px,10px) scale(1.12);animation:breathe 7s ease-in-out infinite}
.sun i:nth-child(3){background:var(--sun);opacity:.25;transform:scale(1.5);animation:breathe 7s ease-in-out 1.2s infinite}
@keyframes sunrise{from{opacity:0;transform:translateY(120px) scale(.8)}to{opacity:1;transform:none}}
@keyframes breathe{50%{transform:translate(10px,10px) scale(1.22);opacity:.18}}

.cloud{height:46px;width:190px;background:#fff;border-radius:999px;opacity:.9;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:80px;height:80px;left:30px;top:-38px}.cloud::after{width:60px;height:60px;left:100px;top:-26px}
.c1{top:16%;left:-240px;animation-duration:90s}
.c2{top:30%;left:-240px;animation-duration:130s;animation-delay:-50s;transform:scale(.7);opacity:.75}
.c3{top:8%;left:-240px;animation-duration:110s;animation-delay:-20s;transform:scale(1.2);opacity:.6}
@keyframes drift{to{translate:calc(100vw + 480px) 0}}

.route{inset:0;width:100%;height:100%}
.route .dots{fill:none;stroke:var(--tang);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 14}
.route .reveal{fill:none;stroke:#fff;stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1;animation:trace 4.2s var(--glide) .8s forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.route .stops circle{fill:#fff;stroke:var(--night);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .7s var(--glide) forwards}
.route .stops circle:nth-child(1){animation-delay:2s}.route .stops circle:nth-child(2){animation-delay:3.2s}.route .stops circle:nth-child(3){animation-delay:4.2s}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.route .flyer{opacity:.95}

.seeds{inset:0}
.seed{position:absolute;top:-30px;width:var(--s);height:calc(var(--s)*.55);border-radius:100% 0 100% 0;background:var(--c);opacity:.7;
  animation:fall var(--t) linear var(--dl) infinite}
@keyframes fall{0%{transform:translate(0,-30px) rotate(0)}50%{transform:translate(var(--x),55vh) rotate(180deg)}100%{transform:translate(calc(var(--x)*-.4),115vh) rotate(380deg)}}

.hills{left:0;bottom:0;width:100%;height:42vh;min-height:220px}
.hills path{will-change:transform}
.h1{fill:#BFECE6}.h2{fill:var(--pale);opacity:.55}.h3{fill:var(--sky)}
.hills .h1,.hills .h2{transform:translate(calc(var(--mx)*var(--depth)*1px),0);transition:transform .6s var(--glide)}
.grass{left:0;bottom:-4px;width:100%;display:flex;justify-content:space-around}
.grass svg{width:clamp(70px,9vw,120px);fill:none;stroke:var(--deep);stroke-width:3;stroke-linecap:round;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.grass svg+svg{animation-delay:-2s;margin-top:14px}
@keyframes sway{50%{transform:rotate(4deg)}}

/* ---------- header ---------- */
.top{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:6px}
.top img{height:42px;width:auto}
.pill{display:inline-flex;align-items:center;gap:10px;font:500 13px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
  background:#fff;border:2px solid var(--night);border-radius:999px;padding:7px 16px;white-space:nowrap}
.pill b{width:9px;height:9px;border-radius:50%;background:var(--coral);animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,75,43,.55)}100%{box-shadow:0 0 0 12px rgba(255,75,43,0)}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;min-height:calc(100svh - 140px);padding-top:24px;padding-bottom:140px}
h1{font-size:clamp(46px,8.2vw,104px);line-height:.98;margin:0 0 22px;font-weight:700;letter-spacing:-.02em}
h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
h1 .line>span{display:inline-block;transform:translateY(110%);animation:slide 1.1s var(--glide) var(--d) forwards}
@keyframes slide{to{transform:none}}
h1 .accent{color:var(--tang);position:relative;width:fit-content}
h1 .accent::after{content:"";position:absolute;left:0;bottom:.02em;height:.12em;width:100%;background:var(--sun);border-radius:99px;z-index:-1;
  transform:scaleX(0);transform-origin:left;animation:swoosh 1.2s var(--glide) 1.5s forwards}
@keyframes swoosh{to{transform:scaleX(1)}}
.lead{font-size:clamp(18px,2vw,22px);font-weight:300;max-width:46ch;margin:0 0 26px}
.lead strong{font-weight:600;background:linear-gradient(transparent 62%,rgba(255,201,60,.65) 62%)}

.notify{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.notify input{flex:1 1 220px;font:inherit;padding:14px 20px;border-radius:999px;border:2px solid var(--night);background:#fff;color:var(--night);outline:none;transition:box-shadow .3s}
.notify input:focus{box-shadow:0 0 0 4px rgba(15,181,168,.35)}
.notify button{font:600 16px Outfit,sans-serif;background:var(--coral);color:#fff;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;transition:transform .4s var(--glide),background .3s}
.notify button:hover{background:var(--tang);transform:translateY(-3px) rotate(-1deg)}
.msg{flex-basis:100%;margin:2px 6px 0;min-height:1.4em;font-size:14px;color:var(--deep)}

.board{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;max-width:520px;background:#fff;border:2px solid var(--night);border-radius:16px;overflow:hidden}
.board div{flex:1 1 140px;padding:10px 16px;border-right:2px dashed rgba(14,47,58,.25)}
.board div:last-child{border-right:0}
.board span{display:block;font:400 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--deep)}
.board b{font:500 14px 'IBM Plex Mono',monospace}
.blink{color:var(--coral)}.blink{animation:blink 2.4s steps(1) infinite}
@keyframes blink{50%{opacity:.35}}

.mark{position:relative;display:grid;place-items:center}
.mark .disc{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;background:#fff;opacity:.7;animation:breathe2 8s ease-in-out infinite}
.mark img{position:relative;width:100%;max-width:440px;animation:float 7s ease-in-out infinite,unveil 1.8s var(--glide) .6s backwards}
@keyframes float{50%{transform:translateY(-16px) rotate(-1.5deg)}}
@keyframes unveil{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes breathe2{50%{transform:scale(1.05)}}

/* ---------- values ---------- */
.values{padding-top:56px;padding-bottom:40px}
.values h2{font-size:clamp(28px,4vw,46px);line-height:1.1;margin:0 0 34px;max-width:22ch;letter-spacing:-.01em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border-radius:28px;padding:30px;background:#fff;border:2px solid var(--night);transition:transform .5s var(--glide),box-shadow .5s var(--glide)}
.card:nth-child(2){background:#FFF3DB}.card:nth-child(3){background:#FFE5DC}
.card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:8px 10px 0 var(--pale)}
.card svg{width:46px;height:46px;fill:none;stroke:var(--night);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.card h3{margin:0 0 8px;font-size:22px}.card p{margin:0}
.closing{text-align:center;padding-top:60px;padding-bottom:70px}
.closing h2{font-size:clamp(24px,3.2vw,38px);max-width:24ch;margin:12px auto 12px;line-height:1.15}
.closing p{max-width:48ch;margin:0 auto;font-weight:300;font-size:19px}
.closing img{animation:float 7s ease-in-out infinite}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:24px;padding-bottom:36px;font-size:14px;color:#456}
footer a{color:var(--deep);font-weight:600;text-decoration:none}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--glide),transform 1s var(--glide);transition-delay:calc(var(--i,0)*.15s)}
.reveal.in{opacity:1;transform:none}

/* Page content sits on a soft sky veil so text stays readable over the scene */
main{position:relative;z-index:2}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;padding-bottom:120px}
  .mark{order:-1;max-width:260px;margin:0 auto}
  .cards{grid-template-columns:1fr}
  .sun{top:16%}
  .top img{height:34px}.pill{font-size:11px;padding:6px 12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition:none!important}
  .rise,.reveal,h1 .line>span{opacity:1;transform:none}
  .route .reveal{stroke-dashoffset:0}.route .stops circle{opacity:1}
  .route .flyer animateMotion{display:none}
}