:root{--ink:#07130f;--green:#0b8a68;--mint:#79d9bd;--paper:#f7faf8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}.nav{position:fixed;z-index:100;top:0;left:0;right:0;height:70px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:rgba(247,250,248,.72);backdrop-filter:blur(20px);border-bottom:1px solid rgba(7,19,15,.06)}.brand{display:flex;align-items:center;gap:9px;font-size:18px;letter-spacing:-.03em}.brand img{width:35px;height:35px}.nav>div{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:750}.try{padding:11px 17px;border-radius:999px;background:#082019;color:#fff}
.intro,.end{height:100svh;min-height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 54%,#ddf5ec 0,#f7faf8 45%,#fff 78%)}.halo,.endhalo{position:absolute;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(12,147,107,.13),transparent 67%)}.hero-logo,.end>img{width:82px;height:82px;position:relative;filter:drop-shadow(0 18px 30px rgba(11,138,104,.18))}.cap,.end>p{font-size:11px;letter-spacing:.28em;font-weight:900;color:#52746a;margin:25px 0 18px;position:relative}.intro h1,.end h2{font-size:clamp(68px,10vw,150px);line-height:.82;letter-spacing:-.085em;margin:0;position:relative}.intro h1 em,.end h2 em{font-style:normal;color:var(--green)}.sub{font-size:20px;color:#74817c;margin:34px 0;position:relative}.scroll{position:absolute;bottom:30px;font-size:10px;letter-spacing:.15em;font-weight:850;color:#77847f}
.story{height:100svh;min-height:650px;background:#06110e;color:#fff;position:relative}.stage{height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden;isolation:isolate}.stage:before,.stage:after{content:"";position:absolute;border-radius:50%;filter:blur(100px);opacity:.35;z-index:-1}.stage:before{width:55vw;height:55vw;background:#075a43;right:-25vw;top:-18vw}.stage:after{width:45vw;height:45vw;background:#153c5b;left:-28vw;bottom:-25vw}.copy{position:absolute;left:6vw;top:50%;width:min(34vw,500px);z-index:20}.copy article{position:absolute;top:0;left:0;transform:translateY(calc(-50% + 35px));opacity:0;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}.copy article.active{opacity:1;transform:translateY(-50%)}.copy small{font-size:10px;letter-spacing:.18em;color:#75bda8;font-weight:900}.copy h2{font-size:clamp(48px,6vw,92px);line-height:.9;letter-spacing:-.07em;margin:16px 0}.copy p{font-size:17px;line-height:1.55;color:#a6b6b0;max-width:400px}
.world{position:absolute;left:43%;top:50%;width:52vw;height:82vh;transform:translateY(-50%);perspective:1400px}.phone{position:absolute;z-index:10;width:min(29vw,330px);aspect-ratio:.5;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px;border-radius:48px;background:linear-gradient(145deg,#3b3b3b,#050505 50%,#353535);box-shadow:0 55px 110px rgba(0,0,0,.55);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.screen{height:100%;border-radius:40px;background:#f4f7f5;color:#08130f;overflow:hidden;position:relative;padding:48px 13px 12px}.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:30%;height:20px;border-radius:99px;background:#050505}.screen header{display:flex;justify-content:space-between;align-items:center;font-size:8px}.screen header span{display:flex;align-items:center;gap:5px}.screen header img{width:21px;height:21px}.screen header b{font-size:8px}.screen header i{font-style:normal}.greeting{margin:15px 2px 8px}.greeting small{font-size:6px;color:#71877f;font-weight:900;letter-spacing:.08em}.greeting h3{font-size:22px;letter-spacing:-.055em;margin:1px 0}.screen nav{display:flex;gap:4px;overflow:hidden;margin-bottom:6px}.screen nav>*{padding:4px 6px;border-radius:99px;border:1px solid #dbe4e0;font-size:6px;white-space:nowrap}.screen nav b{background:#0a2a20;color:white;border-color:#0a2a20}.feed{transition:.6s}.card{display:grid;grid-template-columns:58px 1fr;gap:8px;padding:8px 3px;border-bottom:1px solid #dfe6e2;transition:opacity .5s,transform .5s,max-height .5s,padding .5s;max-height:95px;overflow:hidden}.photo{width:58px;height:49px;border-radius:7px;background:linear-gradient(135deg,#5d8190,#d4e2df)}.p2,.p4{background:linear-gradient(135deg,#758b68,#d9e3d1)}.p3{background:linear-gradient(135deg,#4b718b,#b8d7e7)}.p5{background:linear-gradient(135deg,#9a795f,#eadbcd)}.p6{background:linear-gradient(135deg,#866c87,#e1d3e2)}.card small{font-size:5.5px;color:#477c6b;font-weight:900;letter-spacing:.05em}.card h4{font-size:9px;line-height:1.25;margin:3px 0}.card p{font-size:6.5px;line-height:1.3;color:#76837e;margin:0}.summary{position:absolute;inset:43px 10px 10px;border-radius:25px;background:#fff;padding:20px;opacity:0;transform:translateY(30px) scale(.96);pointer-events:none;transition:.65s}.summary>small{font-size:7px;color:#44806c;font-weight:900}.summary h3{font-size:20px;line-height:1.05;letter-spacing:-.04em;margin:10px 0}.summary p{font-size:10px;line-height:1.5;color:#5e6c67}.summary>div{border-top:1px solid #dfe6e2;margin-top:14px;padding-top:12px}.summary>div>*{display:block;font-size:8px;margin:6px 0}.summary button{border:0;border-radius:99px;background:#08271e;color:white;padding:10px 13px;font-weight:800;font-size:9px;margin-top:12px}
.tags{position:absolute;inset:0;z-index:15;pointer-events:none}.tags i{position:absolute;font-style:normal;font-size:12px;font-weight:850;padding:10px 14px;border-radius:99px;background:#e7f6f0;color:#12654d;box-shadow:0 14px 35px rgba(0,0,0,.22);opacity:0;transform:scale(.6);transition:.6s}.tags i:nth-child(1){left:3%;top:12%}.tags i:nth-child(2){right:1%;top:19%}.tags i:nth-child(3){left:0;bottom:20%}.tags i:nth-child(4){right:4%;bottom:14%}.tags i:nth-child(5){right:0;top:49%}.exclude{position:absolute;z-index:20;right:3%;top:38%;padding:11px 14px;border-radius:99px;background:#fff1f0;color:#a83f3a;font-weight:850;font-size:12px;opacity:0;transform:translateX(20px);transition:.5s}.exclude b{margin-left:8px}.laptop,.tablet{position:absolute;opacity:0;transition:.8s cubic-bezier(.2,.8,.2,1);background:#151918;box-shadow:0 45px 100px rgba(0,0,0,.5)}.laptop{width:75%;aspect-ratio:1.55;left:5%;top:50%;transform:translate(-18%,-48%) scale(.75);padding:7px;border-radius:18px}.lapbar{height:24px;color:#777;font-size:8px;padding:5px}.lapbody{height:calc(100% - 24px);display:grid;grid-template-columns:13% 1fr;background:#f3f6f5;color:#08130f;border-radius:8px;overflow:hidden}.lapbody aside{background:#10241d;color:#fff;padding:12px;text-align:center;line-height:35px;font-size:10px}.lapbody aside img{width:24px;display:block;margin:auto}.lapbody section{padding:15px}.lapbody h3{margin:0 0 10px}.lapbody span,.tablet span{display:block;height:18%;background:#fff;border:1px solid #dde5e1;border-radius:7px;margin:7px 0}.tablet{width:31%;aspect-ratio:.72;right:1%;top:50%;transform:translate(25%,-48%) scale(.75);padding:7px;border-radius:26px}.tablet>div{height:100%;background:#f3f6f5;color:#08130f;border-radius:20px;padding:20px 12px}.tablet img{width:25px}.tablet h3{font-size:15px}
.meter{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:110px;height:2px;background:rgba(255,255,255,.15);z-index:30}.meter i{display:block;width:0;height:100%;background:#7edabd}
.end>span{font-size:17px;color:#74817c;margin:30px 0 22px;position:relative}.end>div:last-child{display:flex;gap:22px;align-items:center;position:relative;font-size:13px;font-weight:800}.endcta{padding:14px 21px;border-radius:99px;background:#07130f;color:#fff}
@media(max-width:760px){.nav{height:62px;padding:0 17px}.nav>div>a:first-child{display:none}.intro h1,.end h2{font-size:64px}.hero-logo,.end>img{width:65px;height:65px}.copy{left:20px;top:17%;width:calc(100% - 40px);text-align:center}.copy article{width:100%}.copy h2{font-size:45px;margin:8px 0}.copy p{font-size:13px;margin:auto}.world{left:0;top:57%;width:100vw;height:65vh;transform:none}.phone{width:220px}.tags i{font-size:9px;padding:7px 9px}.laptop{width:68%;left:5%}.tablet{width:28%;right:3%}.story{height:700vh}.sub{font-size:16px}.end>div:last-child{flex-direction:column;gap:15px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Native brand mark: avoids external/image decode failures in preview */
.nm-mark{display:inline-block;width:35px;height:35px;border-radius:13px 13px 13px 4px;background:linear-gradient(135deg,#087d5e,#6bd4b4);transform:rotate(-8deg);position:relative;flex:0 0 auto;box-shadow:0 8px 20px rgba(11,138,104,.16)}
.nm-mark:before{content:"";position:absolute;width:55%;height:2px;background:rgba(255,255,255,.9);left:22%;top:52%;transform:rotate(-42deg);transform-origin:center}
.nm-mark:after{content:"";position:absolute;width:40%;height:40%;right:17%;top:17%;border-top:2px solid rgba(255,255,255,.88);border-right:2px solid rgba(255,255,255,.88);border-radius:0 8px 0 0}
.hero-logo{width:82px;height:82px;border-radius:28px 28px 28px 8px;box-shadow:0 22px 50px rgba(11,138,104,.22);position:relative}
.end>.nm-mark{width:72px;height:72px;border-radius:24px 24px 24px 8px}
.screen header .nm-mark{width:21px;height:21px;border-radius:7px 7px 7px 2px;box-shadow:none}
.lapbody aside .nm-mark,.tablet .nm-mark{width:24px;height:24px;border-radius:8px 8px 8px 2px;display:block;margin:0 auto 6px;box-shadow:none}
@media(min-width:1000px){.world{left:39%;width:59vw}.phone{width:min(32vw,380px)}.copy{left:5vw;width:min(31vw,470px)}.copy h2{font-size:clamp(56px,6.4vw,98px)}.tags i{font-size:13px;padding:11px 15px}.laptop{width:72%}.tablet{width:29%}}
.playback{position:absolute;z-index:40;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px}.playback button{border:1px solid rgba(255,255,255,.18);background:rgba(7,19,15,.55);color:#dce8e3;border-radius:99px;padding:8px 11px;font:700 9px/1 inherit;letter-spacing:.04em;backdrop-filter:blur(10px);cursor:pointer}.playback>span{width:90px;height:2px;background:rgba(255,255,255,.15);overflow:hidden}.playback>span i{display:block;width:0;height:100%;background:#7edabd}.playback button:focus-visible{outline:2px solid #7edabd;outline-offset:2px}@media(max-width:760px){.story{height:100svh;min-height:650px}.playback{bottom:10px}.playback>span{width:60px}}
/* V3 contained automatic product film */
.story{height:auto!important;min-height:0!important;padding:0;background:#06110e}
.stage{position:relative!important;top:auto!important;height:min(820px,92svh)!important;min-height:620px!important;max-height:820px;margin:0;overflow:hidden}
.copy{left:5vw;top:50%;width:min(33vw,470px)}
.world{left:40%;top:50%;width:58vw;height:86%;transform:translateY(-50%)}
.phone{width:min(31vw,350px);max-height:88%;aspect-ratio:.5}
.screen{padding-top:45px}
.film-controls{position:absolute;z-index:50;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;height:34px}
.film-controls button{border:0;background:transparent;color:#9fb1aa;font:800 10px/1 inherit;min-width:34px;height:34px;padding:0 8px;cursor:pointer}
.film-controls .pause{font-size:13px;border:1px solid rgba(255,255,255,.14);border-radius:50%;padding:0}
.film-progress{width:110px;height:2px;background:rgba(255,255,255,.15);overflow:hidden}
.film-progress i{display:block;width:0;height:100%;background:#7edabd}
.film-controls .replay{opacity:0;pointer-events:none;transition:.25s}
.film-controls.finished .replay{opacity:1;pointer-events:auto}
.film-controls button:focus-visible{outline:2px solid #7edabd;outline-offset:2px}
.playback{display:none!important}
.summary{z-index:20}
.feed{transition:opacity .45s,transform .55s}
.phone.summary-mode .feed,.phone.summary-mode .greeting,.phone.summary-mode nav{opacity:0;transform:translateY(-12px);pointer-events:none}
.phone.summary-mode .summary{opacity:1!important}
.phone.multi-mode .summary{opacity:0!important}
@media(max-width:760px){
 .story{padding:0}
 .stage{height:760px!important;min-height:700px!important;max-height:none!important}
 .copy{left:18px;right:18px;top:110px;width:auto;text-align:center}
 .copy article{width:100%}
 .copy h2{font-size:42px;line-height:.9;margin:7px 0}
 .copy p{font-size:12px;line-height:1.4;max-width:320px;margin:0 auto}
 .copy small{font-size:8px}
 .world{left:0;top:245px;width:100%;height:445px;transform:none}
 .phone{width:210px;max-height:none;top:48%;left:50%;transform:translate(-50%,-50%)!important;border-radius:36px;padding:6px}
 .screen{border-radius:30px;padding:38px 9px 8px}
 .island{top:8px;height:16px}
 .greeting{margin:10px 2px 5px}.greeting h3{font-size:18px}
 .card{grid-template-columns:47px 1fr;gap:6px;padding:6px 2px;max-height:75px}
 .photo{width:47px;height:40px}.card h4{font-size:7.5px}.card p{font-size:5.5px}
 .summary{inset:34px 7px 7px;border-radius:21px;padding:15px}
 .summary h3{font-size:17px}.summary p{font-size:8.5px}.summary>div>*{font-size:7px}
 .tags i{font-size:8px;padding:6px 8px}.tags i:nth-child(1){left:7%;top:12%}.tags i:nth-child(2){right:7%;top:15%}.tags i:nth-child(3){left:6%;bottom:22%}.tags i:nth-child(4){right:6%;bottom:19%}.tags i:nth-child(5){right:3%;top:47%}
 .exclude{right:6%;top:37%;font-size:9px;padding:7px 9px}
 .laptop{width:70%;left:8%;top:50%}.tablet{width:27%;right:4%;top:50%}
 .film-controls{bottom:7px}.film-progress{width:86px}
}