/* getaioli.ai — direction 1 "The film, scrolled" (Ace's pick, 19 Oct 2026), full page */
html{scroll-behavior:smooth}
body{background:var(--cream)}
.room{position:fixed;inset:0;background:url(/a/photo/room.jpg) 50% 50%/cover;filter:blur(26px) saturate(1.1);transform:scale(1.15);z-index:-2}
.veil{position:fixed;inset:0;background:rgba(242,238,232,.82);z-index:-1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h2{font:600 clamp(40px,5vw,84px)/1 FD;letter-spacing:-.03em}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--muted);max-width:38ch;margin-top:18px}
button.btn{font-family:inherit}

/* header */
.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gut);z-index:30;transition:background .3s,box-shadow .3s}
.top.solid{background:rgba(242,238,232,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)}
.top .wm{font-size:28px}
.top nav{display:flex;gap:24px;align-items:center;font:500 15px FS}
.top nav a{text-decoration:none;color:var(--muted)}.top nav a:hover{color:var(--ink)}
.top nav .lang{font-weight:600;color:var(--ink);border:1.5px solid rgba(28,25,22,.2);border-radius:999px;padding:6px 11px;font-size:13px}
.top nav .btn{height:42px;padding:0 18px;font-size:14px;color:#faf7f2}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;padding:110px var(--gut) 120px;max-width:1500px;margin:0 auto}
.hero h1{font:600 clamp(54px,7.6vw,128px)/.95 FD;letter-spacing:-.03em}
.hero h1 em,h2 em{font-style:normal;color:var(--olive)}
.hero p{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:31ch;margin-top:28px}
.hero .ctas,.price .ctas{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero .note{font-size:14px;color:var(--muted);margin-top:18px}
.hero .ph{justify-self:center;width:min(330px,70vw);animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both .1s}
@keyframes rise{from{transform:translateY(80px);opacity:0}to{transform:none;opacity:1}}

/* the story: one part per screen, the phone stays */
.story{position:relative;height:calc(var(--n) * 100svh)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.steps{position:absolute;top:86px;left:50%;transform:translateX(-50%);display:flex;gap:8px;list-style:none;z-index:3}
.steps li{height:34px;min-width:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;font:600 13px FS;background:rgba(251,249,246,.9);box-shadow:inset 0 0 0 1.5px rgba(28,25,22,.16);color:var(--ink);transition:background .3s,color .3s}
.steps li span{display:none;white-space:nowrap}
.steps li.on{background:var(--ink);color:#faf7f2;box-shadow:none}.steps li.on span{display:inline}
.steps li.done{background:var(--olive);color:#fff;box-shadow:none}
.lines{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);width:min(560px,40vw)}
.lines .ln{position:absolute;left:0;top:0;transform:translateY(-50%);font:600 clamp(40px,4.6vw,76px)/1 FD;letter-spacing:-.025em;opacity:0;transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.lines .ln.on{opacity:1}.lines .ln.up{opacity:0;transform:translateY(-50%) translateY(-40px)}.lines .ln.down{opacity:0;transform:translateY(-50%) translateY(40px)}
.lines .num{position:absolute;left:0;top:-128px;font:500 14px FS;color:var(--muted)}
.ph2{position:absolute;left:60%;top:52%;width:min(330px,24vw);transform:translate(-50%,-50%);transition:opacity .4s}
.ph2.back{opacity:.35}
.pop{position:absolute;left:60%;top:52%;transform:translate(-4%,-46%) scale(.6);opacity:0;transition:transform .6s cubic-bezier(.2,1.1,.3,1),opacity .35s;--cs:15.5px;pointer-events:none}
.pop.on{opacity:1;transform:translate(4%,-50%) scale(1)}
.tag-ok{position:absolute;left:60%;top:calc(52% - 330px);transform:translateX(10%);opacity:0;transition:opacity .4s}.tag-ok.on{opacity:1}
.adwipe,.stg{position:absolute;left:60%;top:52%;width:min(380px,28vw);transform:translate(-50%,-50%) scale(.9);opacity:0;transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);border-radius:30px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(40,30,20,.5)}
.adwipe{aspect-ratio:9/16}.stg{aspect-ratio:4/5;width:min(440px,32vw)}
.adwipe.on,.stg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.adwipe>*,.stg>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.adwipe .ad,.stg .aft{clip-path:inset(0 0 0 calc(var(--w,100) * 1%))}
.adwipe .ad>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rule{left:calc(var(--w,100) * 1%)!important;width:3px!important;background:var(--olive);box-shadow:0 0 12px rgba(0,0,0,.25)}
.adwipe .lab,.stg .lab{position:absolute;inset:14px auto auto 14px;width:auto;height:30px;font-size:12.5px}
.stg .ten{position:absolute;inset:14px 14px auto auto;width:auto;height:30px;font-size:12.5px;background:var(--olive);color:#fff;opacity:0;transition:opacity .4s}
.stg.done .ten{opacity:1}
.cnt{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));z-index:15;transition:opacity .4s}
.gain{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:16;opacity:0;transition:opacity .3s,transform .5s}
.gain.on{opacity:1;transform:translateX(-50%) translateY(-10px)}

/* full room */
.full{position:relative;height:100svh;overflow:hidden}
.full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.full .card{position:absolute;left:var(--gut);top:clamp(90px,14vh,150px);background:rgba(251,249,246,.94);border-radius:36px;padding:26px 40px 30px}
.full .card h2{font-size:clamp(48px,7vw,112px)}

/* what you get */
/* everything after the full room sits on solid cream, edge to edge (the background reaches past the centred column) */
section.get,section.website,section.start,section.price,section.faq{background:var(--cream);position:relative;box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax)}
.get{padding:clamp(90px,14vh,150px) var(--gut) clamp(60px,10vh,110px)}
.get .hd{max-width:1500px;margin:0 auto}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1500px;margin:46px auto 0}
.tile{background:var(--card);border-radius:24px;padding:20px 22px;display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;box-shadow:0 14px 34px -22px rgba(40,30,20,.4)}
.tile .vis{width:64px;height:64px;border-radius:18px;background:rgba(28,25,22,.06);display:grid;place-items:center;overflow:hidden}
.tile .vis svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile .vis img{width:100%;height:100%;object-fit:cover}
.tile .n{font:600 12px FS;color:var(--muted)}
.tile h3{font:600 22px/1.1 FD;letter-spacing:-.01em;margin-top:2px}
.tile p{font-size:14.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.replaces{max-width:1500px;margin:clamp(70px,11vh,120px) auto 0;display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:start}
.replaces h3{font:600 clamp(32px,3.6vw,56px)/1 FD;letter-spacing:-.025em}
.replaces ul{list-style:none}
.replaces li{position:relative;font:600 clamp(26px,2.8vw,44px)/1.25 FD;letter-spacing:-.015em;padding:6px 0;width:fit-content;transition:opacity .6s}
.replaces li::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:5px;border-radius:3px;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.2,1)}
.replaces li.x{opacity:.36}.replaces li.x::after{transform:scaleX(1)}
.replaces p{grid-column:2;margin-top:14px;color:var(--muted)}

/* the website */
.website{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(90px,14vh,150px) var(--gut);max-width:1600px;margin:0 auto}
.points{list-style:none;margin-top:30px;border-top:1px solid var(--hair)}
.points li{padding:15px 0;border-bottom:1px solid var(--hair);font-size:17px;line-height:1.45;max-width:46ch}
.price-line{margin-top:24px;font-size:17px;color:var(--muted)}.price-line b{font:600 26px FD;color:var(--ink);margin-right:6px}
.visual{position:relative;height:min(860px,92vh)}
.swap{position:absolute;left:50%;top:50%;width:min(340px,26vw);transform:translate(-50%,-50%)}
.swap .scr img{transition:none}
.swap .scr .new{clip-path:inset(0 0 0 calc(var(--w,100) * 1%))}
.swap .scr .rule{position:absolute;top:0;bottom:0;height:100%;z-index:3}
.swaplab{position:absolute;left:50%;top:calc(50% - min(370px,28vw) - 10px);transform:translateX(-50%)}
.swaplab.ok{background:var(--ok);color:#fff}
.flt{position:absolute;width:min(360px,27vw);z-index:2;border-radius:22px;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.flt.on{opacity:1;transform:none}
.flt.f1{left:-12%;top:6%}.flt.f2{right:-14%;top:38%}.flt.f3{left:-8%;bottom:2%}

/* how you start */
.start{padding:clamp(80px,12vh,130px) var(--gut);max-width:1500px;margin:0 auto}
.start ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.start li{background:var(--card);border-radius:24px;padding:26px;display:flex;gap:18px;align-items:flex-start;box-shadow:0 14px 34px -22px rgba(40,30,20,.4)}
.start li .n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#faf7f2;display:grid;place-items:center;font:600 20px FD}
.start li h3{font:600 22px/1.15 FD}.start li p{font-size:15px;color:var(--muted);margin-top:6px}
.start .live{display:inline-flex;align-items:center;gap:12px;margin-top:26px;height:54px;padding:0 24px;border-radius:999px;background:var(--ok);color:#fff;font:600 17px FS}
.start .live i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* price */
.price{padding:clamp(90px,14vh,150px) var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1500px;margin:0 auto}
.price .big{font:600 clamp(70px,9vw,150px)/1 FD;letter-spacing:-.04em}
.price .big small{font:500 22px FS;letter-spacing:0;color:var(--muted)}
.price .rows{margin-top:22px}
.price .row{border-top:1px solid var(--hair);padding:16px 0;display:flex;justify-content:space-between;gap:20px;font-size:16.5px}
.price .row span{color:var(--muted);text-align:right;flex:none;max-width:45%}

/* questions */
.faq{padding:0 var(--gut) clamp(80px,12vh,130px);max-width:1100px;margin:0 auto}
.faq h2{font-size:clamp(32px,3.6vw,56px);margin-bottom:26px}
.faq details{border-top:1px solid var(--hair);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;font:600 20px/1.3 FD;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 28px/1 FD;color:var(--muted);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--muted);max-width:70ch;line-height:1.6}

footer{background:var(--cream);position:relative;padding:28px var(--gut) 40px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
footer nav{display:flex;gap:20px}footer a{text-decoration:none}

/* the film */
dialog#film{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;overflow:hidden}
dialog#film::backdrop{background:rgba(242,238,232,.92);backdrop-filter:blur(10px)}
dialog#film video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:min(92vh,calc(92vw * 16 / 9));aspect-ratio:9/16;border-radius:22px;box-shadow:0 40px 80px -30px rgba(40,30,20,.5);background:#ddd5ca}
dialog#film .x{position:absolute;right:22px;top:18px;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:#faf7f2;font:300 30px/1 FD;cursor:pointer}

@media (max-width:860px){
  .top nav a:not(.btn):not(.lang){display:none}
  .hero{grid-template-columns:1fr;padding-top:100px}
  .hero .ph{width:62vw;margin-top:10px}
  .steps{top:74px;gap:5px}.steps li{height:28px;min-width:28px;padding:0 8px;font-size:12px}
  .lines{top:124px;transform:none;width:calc(100vw - 2*var(--gut))}
  .lines .ln{font-size:32px;transform:none}.lines .ln.up{transform:translateY(-30px)}.lines .ln.down{transform:translateY(30px)}
  .lines .num{top:-24px}
  .ph2{left:50%;top:60%;width:50vw}
  .pop{left:50%;top:62%;--cs:12.5px;transform:translate(-50%,-40%) scale(.7)}.pop.on{transform:translate(-50%,-50%) scale(1)}
  .adwipe{left:50%;top:60%;width:56vw}.stg{left:50%;top:60%;width:76vw}
  .tag-ok{left:var(--gut);top:236px;transform:none}
  .tiles{grid-template-columns:1fr}
  .replaces{grid-template-columns:1fr}.replaces p{grid-column:1}
  .website{grid-template-columns:1fr}.visual{height:620px}.swap{width:58vw}.flt{width:62vw}
  .flt.f1{left:-2%;top:2%}.flt.f2{right:-2%;top:38%}.flt.f3{left:0;bottom:0}
  .start ol{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
}