:root{
  --bg:#F3F5F0; --green:#034E35; --grey:#5B625E; --white:#fff;
  --scroll:0; --mx:0; --my:0; --p1:0; --p2:0; --p3:0; --p4:0; --intro:1;
  --v1:1; --v2:0; --v3:0; --v4:0; --x2:0; --x3:0; --z2:0;
  --header-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--grey);font:400 16px/1.5 'Manrope',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}

/* header */
.header{position:fixed;inset:0 0 auto 0;z-index:10;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,56px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:44px;width:auto}
.brand__name{font:800 18px/1 'Unbounded',sans-serif;color:var(--green)}
.btn{background:var(--green);color:var(--white);text-decoration:none;font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px;white-space:nowrap;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
button.btn{border:0;cursor:pointer;font-family:inherit}
.header.solid{background:var(--bg)}
.js .stage{--intro:0}

/* engine */
.scroll-track{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene{position:absolute;inset:0;pointer-events:none}
.scene.is-active{pointer-events:auto}
.scene.is-off{visibility:hidden}
.scene--hero{opacity:var(--v1)}
.layer{position:absolute;will-change:transform,opacity}
.layer .inner{will-change:transform,opacity}

/* dots: green panel, farthest layer */
.layer--dots{
  right:clamp(8px,2vw,32px);top:calc(var(--header-h) + 8px);bottom:clamp(8px,2vw,32px);width:52%;
  border-radius:32px;background:var(--green);overflow:hidden;
  transform:translate3d(calc(var(--mx)*40px),calc(var(--my)*30px - var(--p1)*8vh),0);
  opacity:calc(1 - var(--p1)*.9);
}
.dots{position:absolute;inset:-60px;background:url(assets/dots.webp) 0 0/520px auto repeat;
  transform:translate3d(0,calc(var(--scroll)*-120px),0)}

/* snake */
.layer--snake{z-index:2;right:5%;bottom:0;width:min(42vw,74vh * .87);aspect-ratio:956/1100;
  transform:translate3d(calc(var(--p1)*20vw),calc(var(--p1)*-60vh),0) rotate(calc(var(--p1)*14deg))}
.layer--snake .inner{
  transform:translate3d(calc(var(--mx)*-14px),calc((1 - var(--intro))*70vh + var(--my)*-8px),0) rotate(calc(var(--mx)*2.5deg));
  opacity:var(--intro)}
.layer--snake img{width:100%}

/* code: upper-left, fast exit */
.layer--code{right:31%;top:calc(var(--header-h) + 3vh);width:min(25vw,380px);z-index:1;
  transform:translate3d(calc(var(--p1)*-45vw),calc(var(--p1)*-50vh),0);opacity:calc(1 - var(--p1)*1.4)}
.layer--code .inner{transform:translate3d(calc(var(--mx)*-25px),calc(var(--my)*-20px + (1 - var(--intro))*30px),0);opacity:var(--intro)}


/* title */
.layer--title{left:clamp(16px,4vw,56px);top:50%;width:min(44%,640px);z-index:4;
  transform:translate3d(0,calc(-50% + (1 - var(--intro))*40px - var(--p1)*30vh),0);
  opacity:calc(var(--intro) * (1 - var(--p1)*1.6))}
h1{font:800 clamp(26px,min(2.9vw,6.4vh),54px)/1.15 'Unbounded',sans-serif;color:var(--green);letter-spacing:-.01em}
.accent{display:inline-block;background:var(--green);color:var(--bg);padding:.02em .3em .08em;border-radius:.3em;margin-top:.12em}
.sub{margin-top:clamp(16px,2vw,28px);font-size:clamp(16px,1.5vw,20px);font-weight:600;color:var(--grey)}

/* scroll hint */
.hint{position:absolute;left:50%;bottom:20px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  transform:translate3d(-50%,0,0);opacity:calc((1 - var(--p1)*4) * var(--intro))}
.hint i{width:1px;height:28px;background:var(--grey);transform-origin:top;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}


/* scene 2: why — empty window zooms in, lines are typed inside */
.scene--why{opacity:var(--v2)}
.why{position:absolute;z-index:1;inset:var(--header-h) 16px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.4vh,24px);
  transform:translate3d(0,calc(var(--x2)*-12vh),0);opacity:calc(1 - var(--x2))}
.why .eyebrow{opacity:var(--z2)}
.eyebrow{display:inline-block;font:600 clamp(11px,1.1vw,14px)/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);background:var(--green);padding:9px 16px;border-radius:999px}
.win{position:relative;container-type:inline-size;width:min(100%,920px,(100svh - var(--header-h) - 110px) * 1.703);
  transform:translate3d(calc(var(--mx)*-10px),calc(var(--my)*-8px),0) scale(calc(.5 + var(--z2)*.5));opacity:calc(.2 + var(--z2)*.8)}
.win img{display:block;width:100%;height:auto}
.win__text{position:absolute;left:7%;right:7%;top:15%;bottom:3%;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:4.2cqi}
.win__text li{font:800 clamp(14px,4.1cqi,36px)/1.25 'Unbounded',sans-serif;color:var(--green);overflow-wrap:break-word}
.win__text .rest{visibility:hidden}
.win__text .cur{display:inline-block;width:0;height:1.05em;vertical-align:-.15em;border-left:.09em solid var(--green);margin-right:-.09em;visibility:hidden}
.win__text li.typing .cur{visibility:visible;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* scene 3: program */
.scene--prog{opacity:var(--v3)}
.prog{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3.5vh,36px);
  padding:calc(var(--header-h) + 8px) 0 clamp(24px,5vh,56px);
  transform:translate3d(0,calc(var(--x3)*-10vh),0);opacity:calc(1 - var(--x3))}
.prog__head{padding:0 clamp(16px,8vw,140px)}
h2{font:800 clamp(24px,3.2vw,50px)/1.15 'Unbounded',sans-serif;color:var(--green);letter-spacing:-.01em}
.prog__sub{margin-top:10px;font-weight:600;font-size:clamp(14px,1.4vw,19px);color:var(--grey)}
.car{overflow:hidden;touch-action:pan-y;outline-offset:-4px;user-select:none;-webkit-user-select:none}
.rail{display:flex;gap:20px;transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}
.card{flex:none;width:min(340px,78vw);background:var(--green);color:var(--white);border-radius:24px;padding:clamp(18px,2.4vh,28px);
  transform:scale(.93);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card.is-cur{transform:none}
.card__n{display:block;font:800 clamp(26px,3.6vh,38px)/1 'Unbounded',sans-serif;color:var(--bg);opacity:.55}
.card h3{margin-top:clamp(8px,1.6vh,16px);font:800 clamp(17px,2.4vh,21px)/1.2 'Unbounded',sans-serif}
.card p{margin-top:8px;font-size:clamp(13px,1.9vh,15px);line-height:1.45}
.card__r{padding-top:10px;border-top:1px solid rgba(255,255,255,.3);font-weight:600}
.todo{font-weight:400;font-size:11px;opacity:.7}
.car-ctl{display:flex;gap:12px;padding:0 clamp(16px,8vw,140px)}
.arrow{width:48px;height:48px;border-radius:50%;border:0;background:var(--green);color:var(--white);display:grid;place-items:center;cursor:pointer;transition:transform .2s}
.arrow:hover{transform:scale(1.08)}
.arrow svg{width:22px;height:22px}
.arrow--prev svg{transform:scaleX(-1)}
button:focus-visible,.car:focus-visible,input:focus-visible,.btn:focus-visible{outline:3px solid var(--grey);outline-offset:3px}

/* scene 4: result */
.scene--res{opacity:var(--v4)}
.res{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;
  grid-template-areas:"text photos" "shots photos";column-gap:clamp(24px,4vw,64px);row-gap:clamp(16px,3vh,32px);
  padding:calc(var(--header-h) + 2vh) clamp(16px,6vw,110px) 4vh;align-items:center}
.res__text{grid-area:text;align-self:end}
.res__text p{margin-top:clamp(14px,2.4vh,24px);font-size:clamp(15px,1.5vw,20px);font-weight:600;max-width:34em}
.accent--box{display:inline;font:800 clamp(24px,3vw,46px)/1.4 'Unbounded',sans-serif;padding:.05em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.3em;margin:0;color:var(--bg)}
.res__photos{grid-area:photos;position:relative;height:min(74vh,46vw);width:100%}
.ph{position:absolute;overflow:hidden;border-radius:24px;border:5px solid var(--bg);will-change:transform}
.ph img{width:100%;height:100%;object-fit:cover}
.ph1{right:0;top:0;width:min(40vw,64vh);aspect-ratio:1;
  transform:translate3d(calc(var(--mx)*-8px),calc((.5 - var(--p4))*7vh + (1 - var(--v4))*6vh),0)}
.ph2{left:0;bottom:3%;width:min(24vw,38vh);aspect-ratio:1100/825;z-index:1;
  transform:translate3d(calc(var(--mx)*10px),calc((var(--p4) - .5)*12vh + (1 - var(--v4))*10vh),0)}
.shots{grid-area:shots;align-self:start;display:flex;gap:14px}
.shot{flex:1;max-width:240px;aspect-ratio:16/10;border-radius:16px;background:var(--green) url(assets/dots.webp) 0 0/260px auto;color:var(--white);
  display:grid;place-items:center;text-align:center;padding:10px;font-size:clamp(11px,1.1vw,14px);font-weight:600}

/* regular sections */
.sec{padding:clamp(56px,9vw,112px) clamp(16px,6vw,110px);background:var(--bg);position:relative}
.js .reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1;transform:none}
.pcard{max-width:520px;margin:0 auto;background:var(--green);color:var(--white);border-radius:32px;padding:clamp(24px,4vw,44px)}
.pcard__tag{font:800 clamp(18px,2vw,24px)/1.2 'Unbounded',sans-serif}
.pcard__price{margin-top:14px;display:flex;align-items:baseline;gap:16px}
.pcard__price span{font:800 clamp(44px,6vw,68px)/1 'Unbounded',sans-serif}
.pcard__price s{font-size:clamp(18px,2vw,24px);opacity:.65}
.pcard ul{list-style:none;margin:22px 0 28px}
.pcard li{display:flex;gap:12px;align-items:center;padding:7px 0;font-weight:600}
.pcard li svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--bg);color:var(--green)}
.btn--inv{display:inline-block;background:var(--bg);color:var(--green)}
.form-wrap{max-width:520px;margin:0 auto}
.form-wrap form{margin-top:24px;display:grid;gap:16px}
label{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--grey)}
input{font:400 16px 'Manrope',sans-serif;color:var(--green);background:transparent;border:2px solid var(--green);border-radius:14px;padding:13px 16px}
input.bad{border-color:var(--grey);border-style:dashed}
.form-wrap .btn{justify-self:start;padding:14px 26px;font-size:16px}
.form-msg{min-height:1.5em;font-weight:600;color:var(--green)}
.footer{background:var(--green);color:var(--white);padding:clamp(36px,5vw,64px) clamp(16px,6vw,110px)}
.footer__in{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:center;justify-content:space-between}
.footer__brand{display:flex;align-items:center;gap:12px}
.badge{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--bg)}
.badge img{width:38px;height:auto}
.footer__name{font:800 20px/1 'Unbounded',sans-serif}
.footer__c{list-style:none;display:grid;gap:4px;font-size:15px}
.footer__copy{font-size:14px;opacity:.75;flex-basis:100%}
html{scroll-behavior:auto}

/* mobile: title on top, art below */
@media (max-width:820px){
  :root{--header-h:64px}
  .brand img{height:38px}.brand__name{font-size:15px}.btn{padding:9px 14px;font-size:13px}
  .layer--title{top:calc(var(--header-h) + 16px);width:auto;right:16px;transform:translate3d(0,calc((1 - var(--intro))*40px - var(--p1)*30vh),0)}
  h1{font-size:clamp(22px,6.3vw,40px)}
  .layer--dots{right:8px;left:8px;width:auto;top:auto;height:56%;bottom:8px;border-radius:24px}
  .layer--snake{right:4%;width:min(62vw,46svh * .87)}
  .layer--code{right:auto;left:3%;top:auto;bottom:34%;width:46vw}
  .hint{display:none}
  .prog{padding-bottom:64px}
  .res{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"text" "photos" "shots";align-content:center;row-gap:14px;padding:calc(var(--header-h) + 4px) 16px 16px}
  .res__text{align-self:start}
  .res__text p{font-size:14px;margin-top:10px}
  .accent--box{font-size:clamp(20px,5.6vw,30px)}
  .res__photos{height:35svh}
  .ph{border-width:4px;border-radius:18px}
  .ph1{width:min(60vw,30svh)}
  .ph2{width:min(40vw,26svh);left:6vw;bottom:10%}
  .shot{max-width:none;font-size:11px;aspect-ratio:16/8}
  .btn--inv{display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  .hint i{animation:none}
  .layer--snake,.layer--code,.layer--title{transform:none}
  .layer--title{transform:translate3d(0,-50%,0)}
  .layer--snake,.layer--code,.layer--dots{opacity:calc(1 - var(--p1))}
}
@media (prefers-reduced-motion:reduce) and (max-width:820px){.layer--title{transform:none}}