img{height:auto;max-width:100%} /* RealPortal homepage v3. Light theme only (t433u). */ :root{ color-scheme:light; --bg:#faf9f6;--white:#fff;--ink:#14181c;--ink2:#4a5560;--line:#e6e3dc; --deep:#05543b;--core:#00875f;--pulse:#3DDC97;--haven:#e88a5e;--glow:#FF3D8B;--atlas:#2F5BFF;--nova:#FFD23F; --brand:#00875f;--accent:var(--core); --serif:'Fraunces',Georgia,serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --r:20px;--max:1180px;--pad:clamp(20px,5vw,48px); } *,*::before,*::after{box-sizing:border-box} html{background:var(--bg);-webkit-text-size-adjust:100%} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} body{margin:0;font:400 17px/1.55 var(--sans);color:var(--ink);background:var(--bg);overflow-x:hidden} img{max-width:100%;display:block} a{color:var(--deep)} h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.08;margin:0 0 .45em} h1{font-size:clamp(38px,6.4vw,76px)} h2{font-size:clamp(32px,4.6vw,56px)} h3{font-size:clamp(20px,2vw,24px);line-height:1.2} p{margin:0 0 .8em} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;border-radius:10px;z-index:100} .skip:focus{left:8px} :focus-visible{outline:3px solid var(--atlas);outline-offset:3px;border-radius:6px} .eyebrow{font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:14px} .sub{font-size:clamp(18px,1.7vw,21px);color:var(--ink2);max-width:34em} .lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink2);max-width:36em} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--sans);text-decoration:none;border:0;cursor:pointer} .btn-solid{background:var(--core);color:#fff;box-shadow:0 8px 24px -10px rgba(0,135,95,.6)} .btn-solid:hover{background:#007653} .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)} .link{font-weight:600;color:var(--deep);text-decoration:none;display:inline-flex;align-items:center;min-height:48px;padding:0 6px} .link:hover{text-decoration:underline} .cta-row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:26px} .small{font-size:14px;color:var(--ink2)} .ph-tag{position:absolute;right:8px;bottom:8px;font:600 10px/1 var(--sans);letter-spacing:.04em;background:rgba(255,255,255,.85);color:#4a5560;padding:4px 6px;border-radius:6px;pointer-events:none;z-index:5} .caption{font-size:12px;color:var(--ink2);max-width:22em} /* NAV */ .nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s} .nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)} .nav .wrap{display:flex;align-items:center;gap:20px;height:68px} .nav .logo img{height:30px;width:auto} .nav ul{display:flex;gap:6px;list-style:none;margin:0 0 0 auto;padding:0} .nav ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;border-radius:999px} .nav ul a:hover{background:rgba(0,135,95,.07)} .nav .btn{min-height:44px;padding:0 18px;font-size:15px} .prog{width:30px;height:30px;flex:0 0 30px} .prog circle{fill:none;stroke-width:3} .menu-btn{display:none;min-width:44px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:999px;cursor:pointer} .sheet{position:fixed;inset:0;background:#fff;z-index:60;padding:90px var(--pad) 30px;display:none;flex-direction:column;gap:6px} .sheet.open{display:flex} .sheet a{font:600 26px/1.2 var(--serif);color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)} .sheet .dots{display:flex;gap:14px;margin-top:20px} .sheet .dots a{border:0;padding:0;width:44px;height:44px;border-radius:50%} .sheet .close{position:absolute;top:14px;right:var(--pad);min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:20px;cursor:pointer} @media (max-width:899px){.nav ul{display:none}.menu-btn{display:inline-block}.nav .btn{margin-left:auto}} /* SECTION BASICS: light backgrounds only */ section{position:relative} .sec{padding:clamp(80px,11vw,140px) 0} .sec.white{background:var(--white)} .chip{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);padding:8px 12px 8px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);margin-bottom:18px} .chip i{width:14px;height:14px;border-radius:50%;background:var(--accent);display:block} .what{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);font-weight:500;border-left:3px solid var(--accent);padding-left:14px;margin:22px 0 10px;max-width:28em} .what b{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:block;color:var(--ink2);font-weight:600;margin-bottom:4px} .inside{font-size:14px;color:var(--ink2)} /* ORBIT SYSTEM (hero, system map, back) */ .system{position:relative;width:100%;aspect-ratio:1/1;max-width:640px;margin:0 auto} .system .orbits{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .system .orbits ellipse{fill:none;stroke:#cfd8d2;stroke-width:1} .sphere{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:3} .sphere img{width:100%;height:100%;animation:breathe 8s ease-in-out infinite} .sphere::after{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(61,220,151,.22),rgba(61,220,151,0) 65%);animation:glow 6s ease-in-out infinite;z-index:-1} @keyframes breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.025);filter:brightness(1.06)}} @keyframes glow{0%,100%{transform:scale(.95);opacity:.8}50%{transform:scale(1.08);opacity:1}} .planet{position:absolute;left:50%;top:50%;width:11%;aspect-ratio:1;margin:-5.5% 0 0 -5.5%;z-index:4;border:0;padding:0;background:none;border-radius:50%} .planet img{width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(20,24,28,.12))} button.planet{cursor:pointer} .planet .lbl{position:absolute;left:50%;top:104%;transform:translateX(-50%);white-space:nowrap;font:600 12px/1 var(--sans);background:#fff;border:1px solid var(--line);padding:6px 9px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;color:var(--ink)} .planet:hover .lbl,.planet:focus-visible .lbl,.system.labels .lbl{opacity:1} /* HERO */ .hero{min-height:100svh;display:flex;align-items:center;padding:100px 0 40px;background:radial-gradient(ellipse at 75% 45%,rgba(61,220,151,.10),transparent 55%),var(--bg);overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;width:100%} .hero .nadia{position:absolute;left:max(0px,calc(50% - 760px));bottom:0;width:min(250px,18vw);z-index:2} .hero .nadia .caption{position:absolute;bottom:10px;left:100%;width:180px} .hero-copy{position:relative;z-index:5} @media (max-width:899px){ .hero{padding-top:84px;align-items:flex-start} .hero .wrap{grid-template-columns:1fr;gap:6px} .hero .system{order:-1;max-width:360px;width:88%} .hero .nadia{left:auto;right:-6px;width:110px} .hero .nadia .caption{display:none} } /* SCATTER */ .scatter{height:100svh;overflow:hidden;background:var(--white)} .scatter .stage{position:absolute;inset:0} .scatter .center{position:absolute;left:50%;top:56%;width:min(26vw,220px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.35} .scatter .center img{width:100%} .obj{position:absolute;left:50%;top:56%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px -14px rgba(20,24,28,.25);display:grid;place-items:center} .obj svg{width:36px;height:36px;stroke:#4a5560;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .obj .dot{position:absolute;inset:0;border-radius:50%;opacity:0} .scatter .beats{position:absolute;left:0;right:0;top:12vh;text-align:center;z-index:4;padding:0 var(--pad)} .beat{max-width:720px;margin:0 auto} .beat2{position:absolute;left:0;right:0;top:0;opacity:0} .scatter .orbitline{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:min(80vw,760px);height:min(40vw,380px);border:1px solid #d4ddd7;border-radius:50%;opacity:0} @media (max-width:899px){.obj{width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:14px}.obj svg{width:28px;height:28px}.obj.mhide{display:none}.scatter .center{width:120px;top:62%}.scatter .orbitline{top:62%;width:86vw;height:56vw}.obj{top:62%}} /* SYSTEM SECTION */ .sys-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center} .sys-info{min-height:64px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:18px;max-width:28em} .sys-info strong{display:block;font-size:14px} .nadia-card{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)} .nadia-card img{width:100%;height:auto} .sys-nadia{max-width:340px;margin-top:20px} @media (max-width:899px){.sys-grid{grid-template-columns:1fr}.sys-nadia{display:none}} /* PLANET TOUR */ .planet-sec{min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--bg)} .planet-sec .horizon{position:absolute;inset:0;background-size:cover;background-position:right center;z-index:0} .planet-sec .tint{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 40%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%);z-index:0} .planet-sec .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;width:100%} .planet-sec .copy{max-width:560px} .transit{position:absolute;left:-10px;bottom:0;width:150px;z-index:3;pointer-events:none} .visual{position:relative;min-height:380px} @media (max-width:899px){ .planet-sec{align-items:flex-start;padding:96px 0 60px} .planet-sec .horizon{background-position:85% center;opacity:.55} .planet-sec .wrap{grid-template-columns:1fr;gap:24px} .transit{width:90px;left:auto;right:0} .visual{min-height:300px} } /* Phones (PH-01 placeholder) */ .phone{position:relative;width:260px;aspect-ratio:9/19;border-radius:38px;background:#fff;border:9px solid #e9ece8;box-shadow:0 30px 60px -28px rgba(20,24,28,.45),inset 0 0 0 1px #dfe3df;overflow:hidden} .phone .notch{position:absolute;top:8px;left:50%;width:78px;height:20px;margin-left:-39px;border-radius:12px;background:#e9ece8;z-index:3} .screen{position:absolute;inset:0;background:#f2efe9;display:flex;flex-direction:column} .wa-head{background:#fff;padding:36px 12px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #ece9e2;font-size:13px} .wa-head .av{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px} .wa-head small{display:block;color:#6b7580;font-size:11px} .wa-body{flex:1;padding:10px 9px;display:flex;flex-direction:column;gap:6px;overflow:hidden;justify-content:flex-end;font-size:12.5px;line-height:1.35} .msg{max-width:84%;padding:7px 9px;border-radius:12px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)} .msg.out{align-self:flex-end;background:#dcf7e7} .msg.in{align-self:flex-start} .msg .t{display:block;text-align:right;font-size:10px;color:#7a858f;margin-top:2px} .msg.voice{display:flex;align-items:center;gap:6px} .msg.voice .wave{flex:1;height:16px;background:repeating-linear-gradient(90deg,#9aa5ae 0 2px,transparent 2px 5px);mask:linear-gradient(90deg,#000 60%,rgba(0,0,0,.4));border-radius:3px;min-width:80px} .msg.note{align-self:center;background:#fff7d6;font-size:11px;color:#5a4a00} .typing{align-self:flex-start;background:#fff;border-radius:12px;padding:8px 10px;display:flex;gap:3px} .typing i{width:6px;height:6px;border-radius:50%;background:#9aa5ae;animation:ty 1s infinite} .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s} @keyframes ty{0%,100%{opacity:.3}50%{opacity:1}} .demo-label{display:inline-flex;align-items:center;gap:6px;font:600 12px/1.2 var(--sans);color:#5a4a00;background:#fff3c4;border:1px solid #f2dc84;padding:6px 10px;border-radius:999px} [dir=rtl] .wa-body{font-family:'IBM Plex Sans Arabic',var(--sans)} /* Lead card */ .leadcard{position:absolute;inset:auto 10px 14px 10px;background:#fff;border-radius:16px;padding:12px;box-shadow:0 14px 30px -18px rgba(20,24,28,.5);border-top:4px solid var(--pulse);font-size:12.5px;opacity:0} .leadcard .tag{display:inline-block;font-weight:700;font-size:11px;background:#ffe3d4;color:#8a3a12;border-radius:999px;padding:3px 8px;margin-bottom:6px} .leadcard dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0} .leadcard dt{color:#6b7580}.leadcard dd{margin:0;font-weight:600} /* Core laptop */ .laptop{position:relative;width:100%;max-width:520px;margin-left:auto} .laptop .scr{background:#fff;border:10px solid #e9ece8;border-bottom-width:14px;border-radius:16px 16px 6px 6px;aspect-ratio:16/10;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px;box-shadow:0 30px 60px -32px rgba(20,24,28,.45)} .laptop .base{height:14px;background:#dfe3df;border-radius:0 0 14px 14px;margin:0 -6%} .tile{border-radius:10px;background:#f6f8f6;border:1px solid #edf0ec;padding:8px;font-size:11px;color:var(--ink2);display:flex;flex-direction:column;justify-content:space-between} .tile b{font:600 clamp(16px,2vw,22px)/1 var(--serif);color:var(--ink)} .tile.on{background:#eaf7f1;border-color:#bfe6d4} .tile.wide{grid-column:span 2} .sample{position:absolute;top:-12px;left:14px;font:600 11px/1 var(--sans);background:#fff3c4;border:1px solid #f2dc84;color:#5a4a00;padding:5px 8px;border-radius:999px;z-index:2} .scene{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff} .scene img{width:100%;height:auto} .scene-sm{max-width:300px;margin-top:-40px;margin-left:8%;position:relative;z-index:3;box-shadow:0 20px 40px -26px rgba(20,24,28,.4)} /* Haven V-11 */ .building{position:absolute;left:50%;bottom:30px;width:200px;height:260px;margin-left:-100px;background:#fff;border:1px solid #f0d8cb;border-radius:12px 12px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px;box-shadow:0 20px 40px -26px rgba(232,138,94,.6)} .win{border-radius:5px;background:#f6ede7} .win.lit{background:var(--haven)} .paper{position:absolute;width:44px;height:56px;background:#fff;border:1px solid #e6d6cb;border-radius:5px;box-shadow:0 8px 16px -10px rgba(20,24,28,.4)} .paper::after{content:"";position:absolute;left:8px;right:8px;top:12px;height:3px;background:#ecdcd2;box-shadow:0 8px 0 #ecdcd2,0 16px 0 #ecdcd2,0 24px 0 #f1e6de} .cal{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;gap:6px;opacity:0} .cal span{font:600 11px/1 var(--sans);background:#fff;border:1px solid #f0d8cb;border-radius:8px;padding:6px 7px;color:#8a3a12} .mini-chat{position:absolute;right:0;top:0;width:220px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;font-size:12.5px;box-shadow:0 18px 30px -22px rgba(20,24,28,.4)} .mini-chat .msg{margin-bottom:6px} @media (max-width:899px){.mini-chat{position:relative;width:auto;margin-bottom:12px}.building{width:170px;margin-left:-85px;height:210px}} /* Atlas */ .bars{position:relative;display:flex;align-items:flex-end;gap:14px;height:240px;padding:0 10px 30px;border-bottom:1px solid #dfe3ea} .bar{flex:1;border-radius:8px 8px 0 0;background:#d9e1ff;height:var(--h,40%);transform-origin:bottom} .band{position:absolute;left:0;right:0;bottom:calc(30px + 48%);height:14%;background:rgba(47,91,255,.12);border-top:1px dashed var(--atlas);border-bottom:1px dashed var(--atlas)} .band span{position:absolute;right:6px;top:-22px;font:600 11px/1 var(--sans);color:var(--atlas)} .seller{position:absolute;left:10px;right:10px;height:3px;background:var(--glow);bottom:calc(30px + var(--s,80%) * .9)} .seller span{position:absolute;left:0;top:-22px;font:600 11px/1 var(--sans);color:#b0175a;background:#fff;padding:2px 4px;border-radius:4px} .slider{margin-top:16px} .slider label{font-weight:600;font-size:14px;display:block;margin-bottom:6px} input[type=range]{width:100%;accent-color:var(--atlas);height:44px} .illus{font-size:12px;color:var(--ink2);margin-top:6px} /* Nova */ .swatches{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px;padding:0;border:0} .swatches legend{font-weight:600;font-size:14px;margin-bottom:8px;padding:0} .swatches label{position:relative;width:44px;height:44px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--line)} .swatches input{position:absolute;opacity:0;inset:0;cursor:pointer} .swatches label:has(input:checked){box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--ink)} .namefield{display:block;font-weight:600;font-size:14px} .namefield input{display:block;width:100%;max-width:320px;margin-top:6px;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-weight:400} .minisite{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 46px -30px rgba(20,24,28,.45)} .minisite .bar-top{height:28px;background:#f3f4f2;display:flex;gap:6px;align-items:center;padding:0 10px} .minisite .bar-top i{width:9px;height:9px;border-radius:50%;background:#dadfdb} .minisite .hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #eef0ed} .minisite .mono{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px} .minisite .ttl{font:600 18px/1.1 var(--serif)} .minisite .heroblk{margin:14px 16px;height:90px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,#fff),#fff)} .minisite .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 16px 16px} .minisite .rows i{height:46px;border-radius:9px;background:#f2f4f1} .minisite .greet{margin:0 16px 16px;background:#dcf7e7;border-radius:12px;padding:9px 11px;font-size:13px} .nova-planet{position:absolute;right:-30px;top:-40px;width:120px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,color-mix(in srgb,var(--brand) 70%,#fff) 30%,var(--brand) 75%);box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 12%,transparent);z-index:3;transition:background .5s} /* BACK (section 10) */ .back{background:var(--bg);text-align:center;overflow:hidden} .back .system{max-width:520px} .closing{font:600 clamp(28px,4vw,48px)/1.1 var(--serif);margin:56px auto 0;max-width:16em} /* DEMO */ .demo-grid{display:grid;grid-template-columns:auto 1fr;gap:50px;align-items:center} .demo-phone{position:relative} .demo-phone .phone{width:300px} .controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0} .controls button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 14px/1 var(--sans);cursor:pointer;color:var(--ink)} .controls button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)} .track{position:relative;height:60px;margin:18px 0;max-width:420px} .track .ln{position:absolute;left:30px;right:30px;top:29px;height:2px;background:#dfe5e1} .track .p{position:absolute;top:10px;width:40px;height:40px;border-radius:50%} .track .p.a{left:10px;background:var(--pulse)}.track .p.b{right:10px;background:var(--core)} .track .dot{position:absolute;top:22px;left:30px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--core);transition:left .6s} .track small{position:absolute;top:54px;font-size:12px;color:var(--ink2)} .demo-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;max-width:420px;border-top:4px solid var(--pulse)} .demo-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px} .demo-card dt{color:var(--ink2)}.demo-card dd{margin:0;font-weight:600} .demo-card dd.empty{color:#b5bdc4;font-weight:400} .alert{display:flex;gap:10px;align-items:center;max-width:420px;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 14px 30px -20px rgba(20,24,28,.4);opacity:.25;transition:opacity .4s,transform .4s;transform:translateY(6px)} .alert.on{opacity:1;transform:none} .alert .ic{width:34px;height:34px;border-radius:10px;background:var(--pulse);flex:0 0 34px} @media (max-width:899px){.demo-grid{grid-template-columns:1fr;gap:20px}.demo-phone .phone{width:min(85vw,320px);margin:0 auto}} /* TRUST / PRICE / STEPS / FAQ / CONTACT */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px} .tile4{background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:16px;padding:20px} .tile4 h3{font-size:19px} .tile4 p{font-size:15px;color:var(--ink2);margin:0} .ph-box{margin-top:22px;border:1px dashed #cfd3cf;border-radius:14px;padding:14px;font-size:14px;color:var(--ink2);background:#fff} @media (max-width:960px){.tiles{grid-template-columns:1fr 1fr}} @media (max-width:560px){.tiles{grid-template-columns:1fr}} .price-card{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,48px);box-shadow:0 30px 60px -40px rgba(0,135,95,.35)} .price{font:600 clamp(44px,6vw,72px)/1 var(--serif);margin:10px 0} .price small{font:500 18px var(--sans);color:var(--ink2)} @media (max-width:760px){.price-card{grid-template-columns:1fr}} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;counter-reset:s} .step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px} .step .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;margin-bottom:12px;background:var(--c)} @media (max-width:760px){.steps{grid-template-columns:1fr}} .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px} .faq summary{cursor:pointer;min-height:56px;display:flex;align-items:center;padding:0 18px;font-weight:600;list-style:none} .faq summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--core)} .faq details[open] summary::after{content:"–"} .faq details p{padding:0 18px 16px;margin:0;color:var(--ink2)} .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start} .form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,32px);box-shadow:0 30px 60px -40px rgba(61,220,151,.6)} .field{margin-bottom:14px} .field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px} .field .req{font-weight:400;color:var(--ink2)} .field input,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid #d9dcd6;border-radius:12px;font:inherit;background:#fff} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .hint{font-size:13px;color:var(--ink2);margin-top:-4px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-msg{border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px} .form-msg.ok{background:#eaf7f1;color:#05543b}.form-msg.err{background:#fff0f3;color:#9b1240} .nadia-wave{max-width:300px;margin-top:24px} @media (max-width:899px){.contact-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}.nadia-wave{max-width:200px}} .motion-toggle{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 13px/1 var(--sans);cursor:pointer;color:var(--ink)} .proto-bar{position:fixed;left:12px;bottom:12px;z-index:40;font:600 11px/1.2 var(--sans);background:#fff3c4;border:1px solid #f2dc84;color:#5a4a00;padding:7px 10px;border-radius:999px;max-width:calc(100vw - 24px)} /* Reduced motion / still mode */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} html.still *,html.still *::before,html.still *::after{animation:none!important;transition:none!important} html.still .scatter{height:auto;min-height:100svh} /* --- prototype review fixes --- */ .nav .btn{white-space:nowrap} @media (max-width:899px){.nav .wrap{gap:10px}.nav .btn{padding:0 14px;font-size:14px}} .transit{width:120px} @media (max-width:1399px){.transit{display:none}} @media (min-width:900px){ .hero .nadia{left:auto;right:max(8px,calc(50% - 740px));width:min(200px,14vw)} .hero .nadia .caption{left:auto;right:100%;width:170px;text-align:right;margin-right:8px} } @media (max-width:899px){.hero .nadia .caption{display:block;left:auto;right:100%;bottom:6px;width:130px;font-size:11px;text-align:right;margin-right:4px}} .hero .nadia picture,.hero .nadia img{display:block;width:100%;height:auto} @media (max-width:460px){.nav .prog{display:none}.nav .logo img{width:112px;height:auto}} .sys-legend{display:none;list-style:none;padding:0;margin:16px 0 0;gap:8px} .sys-legend a{display:flex;gap:8px;align-items:center;min-height:44px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-size:15px} .sys-legend a::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c);flex:none} @media (max-width:899px){.sys-legend{display:grid}.sys-info{display:none}.map-sys.labels .lbl{opacity:0}} .alert{opacity:0;visibility:hidden}.alert.on{opacity:1;visibility:visible} /* ===== Draft 3: Nadia's day (story chapters ST-01..06) ===== */ .idle{animation:breathe 4.6s ease-in-out infinite;transform-origin:50% 100%} .idle-slow{animation:breathe2 6.4s ease-in-out infinite;transform-origin:50% 90%} @keyframes breathe{0%,100%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-.8%) rotate(-.6deg) scale(1.01)}70%{transform:translateY(-.3%) rotate(.5deg) scale(1.004)}} @keyframes breathe2{0%,100%{transform:scale(1)}50%{transform:scale(1.006) translateY(-.3%)}} @keyframes steam{0%{transform:translateY(0) scaleY(.6);opacity:0}30%{opacity:.7}100%{transform:translateY(-120%) scaleY(1.2);opacity:0}} @keyframes blink{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.7)}50%{box-shadow:0 0 0 8px rgba(61,220,151,0)}} @keyframes wig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(6deg) translateX(3px)}} .chapter{position:relative;min-height:100svh;display:flex;align-items:center;padding:84px 0 40px;background:linear-gradient(180deg,var(--tod) 0%,var(--tod) 78%,var(--tod-next) 100%);overflow:hidden} .ch-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:44px;align-items:center;width:100%} .ch-stage{position:relative;aspect-ratio:16/10;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 34px 70px -44px rgba(20,24,28,.45);filter:grayscale(.75) saturate(.6) brightness(1.02);isolation:isolate} .ly{position:absolute;inset:-6%} .ly img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ly-mid{z-index:2}.ly-mid .ma{opacity:0} .ly-nadia{position:absolute;right:3%;bottom:-3%;height:92%;z-index:3;pointer-events:none} .ly-nadia img{height:100%;width:auto;max-width:none} .ly-fg{z-index:4;pointer-events:none} .ov{position:absolute;inset:0;z-index:5} .sweep{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible} .sweep path{fill:none;stroke:var(--accent);stroke-width:.7;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.85} .st-tag{left:10px;top:10px;right:auto;bottom:auto;max-width:70%;line-height:1.3} .a-item{opacity:0;visibility:hidden} .ch-before{display:inline-block;font:500 15px/1.35 var(--sans);color:#5d6872;background:rgba(20,24,28,.05);padding:7px 11px;border-radius:9px;margin-bottom:14px} .ch-copy h2{font-size:clamp(30px,3.6vw,48px)} .bigline{font:600 clamp(20px,2vw,26px)/1.2 var(--serif);color:var(--deep);margin-top:10px} .ch-copy .demo-label{margin-top:6px} /* after state (still mode + end of scrub) */ .is-after .a-item{opacity:1;visibility:visible} .is-after .b-item{opacity:0;visibility:hidden} .is-after .ch-stage{filter:none} .is-after .ly-mid .ma{opacity:1}.is-after .ly-mid .mb{opacity:0} .is-after .sweep path{stroke-dashoffset:0} .is-after .ch-before{opacity:.9} /* small shared bits */ .chapter .sample{top:-10px;left:10px} .nphone{position:absolute;width:9%;aspect-ratio:9/18;background:#22303a;border-radius:12px;border:3px solid #eef1ee;box-shadow:0 14px 24px -12px rgba(20,24,28,.5)} .nphone>span{position:absolute;inset:8% 8%;border-radius:7px;background:linear-gradient(#f2efe9,#dcf7e7)} .nphone .sent{inset:auto;left:50%;top:38%;transform:translateX(-50%);background:var(--pulse);color:#05543b;font:700 10px/1 var(--sans);padding:4px 7px;border-radius:999px;white-space:nowrap} /* ch1 */ .stack{position:absolute;left:25%;top:44%;width:11%;aspect-ratio:3/4} .stack i{position:absolute;inset:0;background:#fff;border:1px solid #d6dbe0;border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.04);background-image:repeating-linear-gradient(180deg,transparent 0 10px,#e4e8ec 10px 12px);background-size:80% 100%;background-position:50% 30%;background-repeat:no-repeat} .stack i:nth-child(1){transform:translate(-6px,-4px) rotate(3deg)}.stack i:nth-child(2){transform:translate(-3px,-8px) rotate(1deg)}.stack i:nth-child(3){transform:translate(0px,-12px) rotate(-1deg)}.stack i:nth-child(4){transform:translate(3px,-16px) rotate(-3deg)}.stack i:nth-child(5){transform:translate(6px,-20px) rotate(4deg)}.stack i:nth-child(6){transform:translate(9px,-24px) rotate(2deg)}.stack i:nth-child(7){transform:translate(12px,-28px) rotate(0deg)} .onepaper{position:absolute;left:20%;top:40%;width:21%;background:#fff;border-radius:10px;padding:16px 12px 10px;box-shadow:0 18px 30px -16px rgba(20,24,28,.45);font-size:12px;line-height:1.35;border-top:4px solid var(--core)} .onepaper b,.hotcard b,.pcard b{display:block;font:700 14px/1.2 var(--sans);color:var(--core);margin-bottom:2px} /* ch2 */ .callpill{position:absolute;right:4%;top:5%;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 10px;font:600 12px/1 var(--sans);box-shadow:0 8px 18px -10px rgba(20,24,28,.4)} .callpill i{width:8px;height:8px;border-radius:50%;background:var(--pulse);animation:blink 1.6s infinite} .bubs{position:absolute;left:3%;top:7%;width:60%;height:72%} .bub{position:absolute;left:var(--x);top:var(--y);width:22%;height:13%;background:#fff;border-radius:12px 12px 12px 3px;box-shadow:0 8px 16px -10px rgba(20,24,28,.35);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 9%} .bub i{height:5px;border-radius:3px;background:#d4dbe0}.bub i:last-child{width:60%} .bub::after{content:"";position:absolute;right:-4px;top:-4px;width:11px;height:11px;border-radius:50%;background:#b9c1c8;border:2px solid #fff} .ldots{position:absolute;left:5%;bottom:9%;width:48%;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .ldot{width:13px;height:13px;border-radius:50%;background:var(--pulse);box-shadow:0 0 0 3px rgba(61,220,151,.18)} .ldots small{width:100%;font:600 11px/1.2 var(--sans);color:#05543b} .hotcard{position:absolute;right:21%;top:42%;width:28%;z-index:6;background:#fff;border-radius:14px;padding:16px 12px 12px;border:2px solid var(--pulse);box-shadow:0 22px 40px -18px rgba(0,135,95,.55);font-size:12px;line-height:1.35} .hotcard em{display:table;margin-top:7px;background:var(--core);color:#fff;font:700 11px/1 var(--sans);padding:5px 9px;border-radius:999px} /* ch3 */ .qbs{position:absolute;left:3%;top:3%;width:52%;height:60%} .qb{position:absolute;left:var(--x);top:var(--y);background:#fff;border-radius:14px 14px 14px 3px;padding:4px 14px 8px;font:700 20px/1 var(--sans);color:var(--atlas);box-shadow:0 8px 16px -10px rgba(20,24,28,.35)} .ph3{right:29%;top:36%} .acards{position:absolute;left:37%;top:9%;width:26%} .acard{display:block;background:#fff;border-left:4px solid var(--atlas);padding:8px 10px;border-radius:8px;font:600 12px/1.2 var(--sans);margin-bottom:7px;box-shadow:0 10px 20px -14px rgba(20,24,28,.45)} /* ch4 */ .docs{position:absolute;inset:0} .doc{position:absolute;left:var(--x);top:var(--y);width:12%;aspect-ratio:2.2/1;transform:rotate(var(--r));background:#fff;border:1px solid #e0d4c4;border-radius:5px;font:600 10px/1.1 var(--sans);color:#6b5a48;display:flex;align-items:flex-end;padding:4px 6px;box-shadow:0 6px 12px -8px rgba(20,24,28,.4)} .doc.chq{background:linear-gradient(180deg,#eef5ff,#fff);border-color:#c9d8ee} .doc.tc,.doc.ej{width:9%;aspect-ratio:.75;background:repeating-linear-gradient(180deg,#fff 0 9px,#efe7dc 9px 10px)} .flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:8;pointer-events:none} .ph4{right:28%;top:34%} .pcard{position:absolute;left:36%;top:7%;width:30%;background:#fff;border-radius:14px;padding:18px 14px 12px;border-top:4px solid var(--haven);box-shadow:0 20px 36px -20px rgba(20,24,28,.45);font-size:12px} .pcard b{color:#a3471d} .pl{display:block;margin-top:4px}.pl::before{content:"✓ ";color:var(--core);font-weight:700} /* ch5 */ .folders{position:absolute;left:32%;top:50%;width:15%} .folders i{display:block;height:24px;background:#f3d9a8;border-radius:4px 12px 4px 4px;margin-top:-10px;box-shadow:0 4px 8px -4px rgba(20,24,28,.3)} .folders i:nth-child(2){transform:rotate(-4deg);background:#eecb90}.folders i:nth-child(3){transform:rotate(3deg)} .clock{position:absolute;left:47%;top:12%;width:7%;aspect-ratio:1;border-radius:50%;border:3px solid #c6b49d;background:#fff} .clock::before,.clock::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:36%;background:#8a7760;transform-origin:50% 0;transform:rotate(180deg)} .clock::after{height:26%;transform:rotate(110deg)} .chapter .mini-chat{position:absolute;left:28%;top:9%;right:auto;width:33%} .chapter .cal{position:absolute;left:28%;bottom:10%;transform:none} /* ch6 */ .ph6{right:23%;top:40%} .ph6 .typing{position:absolute;left:12%;bottom:18%;padding:4px 5px;gap:2px}.ph6 .typing i{width:4px;height:4px} .tablephone{position:absolute;left:45%;top:18%;transform:perspective(600px) rotateX(14deg);transform-origin:50% 100%} .tablephone .phone{zoom:.44} .notif{position:absolute;left:30%;top:6%;display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:9px 13px;font-size:12px;border-left:4px solid var(--pulse);box-shadow:0 16px 30px -16px rgba(20,24,28,.5)} .notif i{width:9px;height:9px;border-radius:50%;background:var(--pulse);animation:blink 1.6s infinite} /* ch3 extra */ .ch-more{background:var(--tod,#f6f3ee);background:linear-gradient(180deg,#f6f3ee,#fbf3ea);padding:20px 0 70px} .ch-more-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center} .ch-more .visual{min-height:0} /* day tracker */ .daytrack{position:fixed;left:50%;bottom:14px;z-index:41;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:8px 14px;opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .3s,transform .3s} html.in-day .daytrack{opacity:1;pointer-events:auto;transform:translate(-50%,0)} .daytrack a{display:block;width:13px;height:13px;border-radius:50%;border:2px solid var(--c)} .daytrack a.on{background:var(--c)} .daytrack span{font:600 12px/1 var(--sans);margin-left:4px;min-width:7.5em} html.in-day .proto-bar{opacity:0} /* behind her day */ .behind-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px} .bcard{background:var(--bg);border-radius:24px;padding:28px;border-top:4px solid var(--accent)} .bcard .glow-vis{min-height:0;margin-top:8px} .bcard #makeYours{min-height:0;margin-top:8px} @media (max-width:899px){ .chapter{align-items:flex-start;padding:68px 0 24px} .ch-grid{grid-template-columns:1fr;gap:14px} .ch-stage{aspect-ratio:1/1;border-radius:22px} .ly img{object-position:16% 50%} .ly-nadia{height:74%;right:-2%} .ch-copy h2{font-size:28px} .ch-copy .lede{font-size:15.5px;margin-bottom:.4em} .ch-before{font-size:13px;margin-bottom:8px;padding:5px 9px} .ch-copy .chip{margin-bottom:10px;padding:6px 10px 6px 6px;font-size:12px} .what{margin:12px 0 4px;font-size:18px} .bigline{font-size:19px;margin-top:4px} .st-tag{font-size:8.5px} .onepaper{width:40%;left:12%}.stack{width:20%;left:18%} .bubs{width:70%}.bub{width:28%}.hotcard{width:46%;right:16%} .qb{font-size:15px}.acards{left:34%;width:40%}.acard{font-size:10.5px;padding:6px 8px}.nphone{width:15%} .doc{width:18%}.doc.tc,.doc.ej{width:13%}.pcard{left:30%;width:46%;font-size:11px} .chapter .mini-chat{left:6%;width:60%;font-size:11px}.chapter .cal{left:8%} .folders{width:26%;left:28%}.clock{width:12%} .tablephone{left:40%;top:16%}.tablephone .phone{zoom:.36}.notif{left:6%;font-size:11px} .ch-more-grid{grid-template-columns:1fr} .behind-grid{grid-template-columns:1fr} .daytrack{bottom:10px;padding:7px 12px;gap:8px} } html.still .chapter{min-height:0} .ly-nadia{z-index:4} /* Real clips (clips.js): placeholder layers off when CL/HF files exist */ .clipwrap{position:absolute;inset:0;z-index:2;background:#faf9f6} .clipwrap img,.clipwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .clipwrap video{opacity:0;transition:opacity .25s}.clipwrap.playing video,.clipwrap.ended video{opacity:1} .ch-stage.has-clip{filter:none!important} .ch-stage.has-clip>.ly,.ch-stage.has-clip>.ly-nadia,.ch-stage.has-clip>.sweep,.ch-stage.has-clip>.ph-tag{display:none} .has-clip .stack,.has-clip .docs,.has-clip .flash,.has-clip .nphone,.has-clip .folders,.has-clip .clock{display:none!important} .hero .nadia.has-loop picture{display:none}.hero .nadia .hero-loop{display:block;width:174.7%;max-width:none;height:auto;aspect-ratio:724/900;margin-left:-35.7%}/* NA-01-L frame 724x900 is padded: match the NA-01 still scale/position */ /* Responsive QA 5 Nov: bigger tap areas, readable minimum sizes */ .daytrack{gap:2px} .daytrack a{position:relative;width:29px;height:29px;border:0;background:none!important;padding:0} .daytrack a::before{content:"";position:absolute;left:8px;top:8px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;border:2px solid var(--c)} .daytrack a.on::before{background:var(--c)} .daytrack a::after{content:"";position:absolute;inset:-8px -2px} button.planet::after{content:"";position:absolute;inset:-6px;border-radius:50%} .ph-tag{font-size:10px!important} .doc,.nphone .sent,.msg .t{font-size:11px} @media (max-width:899px){.acard{font-size:11px}.hero .nadia{right:0}} /* ---------- Batch 3 clips wiring (clips.js) ---------- */ /* Safari / iOS: alpha WebM is not supported, the MP4 is on #faf9f6, multiply hides the box on light backgrounds. The blend is set on the host (it is the stacking context: z-index/transform), otherwise the video only blends with itself */ .flat-host{mix-blend-mode:multiply} /* the MP4 box is about rgb(250,248,246) (min 244, decoded a little darker): +7% lifts it to white, so multiply leaves the page colour untouched */ video.flat{filter:brightness(1.07)} /* V-01 hero sphere loop: the frame is padded (body ≈52% of 720px), 162% keeps the body the size of the PL-01 still; the clip has its own glow */ .sphere.has-loop img{display:none}.sphere.has-loop::after{display:none} .sphere .sph-loop{position:absolute;left:-31%;top:-31%;width:162%;height:162%;max-width:none;object-fit:contain;pointer-events:none} /* V-13 Nova loop: planet body ≈60% of the frame → 166.7% of the 120px planet; the CSS planet comes back once the visitor picks a colour */ .nova-planet.has-loop{background:none;box-shadow:none} .nova-planet .nova-loop{position:absolute;left:-33.3%;top:-33.3%;width:166.7%;height:166.7%;max-width:none;object-fit:contain;pointer-events:none} /* V-02 scatter → orbit canvas: fades in as the beat-2 scrub starts (--sp 0..1), HTML icons fade out */ .scatter.has-v02{background:#faf9f6} .scatter .seq-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:calc(var(--sp,0)*6);pointer-events:none} .scatter.has-v02 .obj{opacity:calc(1 - var(--sp,0)*5);z-index:2} .scatter.has-v02 .center,.scatter.has-v02 .orbitline{visibility:hidden} /* V-14 pull-back canvas replaces the HTML system (same place in the layout) */ .back .has-v14{position:relative;margin:0 auto;width:min(100%,900px);aspect-ratio:1280/800;border-radius:var(--r);overflow:hidden} .back .has-v14.sq{width:min(100%,520px);aspect-ratio:1} .back .has-v14 .back-sys{display:none} .back .has-v14 .seq-cv{position:absolute;inset:0;width:100%;height:100%} /* NA-05 waving is now 700x1351 (taller than the 700x1043 placeholder): keep the card about the same height */ .nadia-wave{max-width:240px} @media (max-width:899px){.nadia-wave{max-width:170px}} /* ===== Overlays v3 (B3 WAN compositions, 5 Nov): empty side Ch1 R, Ch2 L, Ch3 R/centre gap, Ch4 R, Ch5 L, Ch6 R. Desktop: % of the 16:10 frame. Never over a face or head. */ /* ch1: hot-lead sheet in the curtain space right of Nadia */ .onepaper{left:81%;top:12%;bottom:auto;width:14.5%;padding:12px 10px 8px;font-size:11px} .stack{left:3%;top:6%;bottom:auto;width:9%} /* ch2: hot card on the empty wall at her left, above her open palm; pill right of her head */ .bubs{left:3%;top:4%;width:24%;height:30%} .ldots{left:6%;right:auto;bottom:8%;width:24%;justify-content:flex-start} .ldots small{text-align:left} .hotcard{left:27%;right:auto;top:8%;bottom:auto;width:16%;padding:12px 10px 10px;font-size:11px} .callpill{left:65%;right:auto;top:12%} /* ch3: answers in the window gap between investor and Nadia, beside the phone she holds up */ .qbs{left:31%;right:auto;top:1%;width:14%;height:8%} .acards{left:46.5%;right:auto;top:5%;bottom:auto;width:14.5%;transform:none} .acard{padding:7px 9px;margin-bottom:6px;font-size:11.5px} .ph3{right:31%;top:38%} /* ch4: Unit card in the open kitchen space right of Nadia */ .pcard{left:65%;right:auto;top:9%;bottom:auto;width:17%;padding:12px 10px 9px;font-size:11.5px} /* ch5: chat on the window side at Nadia's left; calendar under it */ .chapter .mini-chat{position:absolute;left:1.5%;top:3%;bottom:auto;right:auto;width:21%;font-size:10.5px;padding:7px 9px} .chapter .mini-chat .msg{margin:4px 0} .chapter .cal{left:1.5%;right:auto;top:auto;bottom:3%;transform:none} /* ch6: notification right of her head, phone screen on the wall beside her */ .tablephone{left:57%;right:auto;top:30%;transform:perspective(600px) rotateX(10deg)} .tablephone .phone{zoom:.34} .notif{left:53%;right:auto;top:9%;max-width:24%} .ph6{right:auto;left:18%;top:42%} @media (max-width:899px){ /* ch1: sheet above the colleague's head, next to Nadia's shoulder */ .onepaper{width:34%;left:4%;top:5%;bottom:auto;font-size:10.5px;padding:15px 8px 7px} .stack{left:4%;top:4%;bottom:auto;width:14%} /* ch2: hot card right above her open palm; pill beside her head */ .bubs{width:30%;height:18%;left:2%;top:2%} .bub{width:32%} .hotcard{width:30%;left:3%;right:auto;top:6%;bottom:auto;font-size:10.5px;padding:15px 8px 7px} .ldots{left:3%;right:auto;bottom:3%;width:30%;justify-content:flex-start} .callpill{left:71%;right:auto;top:4%} /* ch3/4/5: photo on top (1:1), cards in a band directly below it */ #ch3 .ch-stage.has-clip,#ch4 .ch-stage.has-clip,#ch5 .ch-stage.has-clip{aspect-ratio:auto;background:#faf9f6} #ch3 .has-clip .clipwrap,#ch4 .has-clip .clipwrap,#ch5 .has-clip .clipwrap{position:relative;inset:auto;width:100%;aspect-ratio:1/1} #ch3 .has-clip .ov,#ch4 .has-clip .ov,#ch5 .has-clip .ov{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-start;padding:12px 12px 14px} #ch3 .has-clip .ov>*,#ch4 .has-clip .ov>*,#ch5 .has-clip .ov>*{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important} #ch3 .has-clip .qbs{display:none} #ch3 .has-clip .acards{width:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center} #ch3 .has-clip .acard{margin:0;font-size:11px;padding:6px 9px} #ch4 .has-clip .pcard{width:min(260px,80%);font-size:11px;padding:10px 10px 8px} #ch5 .has-clip .mini-chat{width:min(300px,100%);font-size:10.5px;padding:8px 9px} #ch5 .has-clip .cal{width:auto} /* ch6: notification and phone on the wall by her shoulder */ .tablephone{left:auto;right:3%;top:6%} .tablephone .phone{zoom:.22} #ch4 .has-clip .ov{justify-content:center} .notif{left:3%;right:auto;top:2.5%;font-size:10.5px;max-width:40%;padding-top:6px;padding-bottom:6px} } @media (min-width:600px) and (max-width:899px){ /* iPad portrait / 834: bigger frame, so cards and phone scale up a little */ .onepaper,.hotcard{width:24%;font-size:13px;padding:12px 11px 9px} .onepaper{left:4%} .tablephone{left:auto;right:3%}.tablephone .phone{zoom:.4} .notif{font-size:12.5px} #ch3 .has-clip .acard{font-size:13px;padding:8px 12px} #ch4 .has-clip .pcard{font-size:13px;width:300px} #ch5 .has-clip .mini-chat{font-size:12.5px;width:360px} } /* NA-05 contact wave: Marketing will swap the outfit later — keep the slot size-flexible (700×1351 transparent). */ .nadia-wave{max-width:240px;width:100%;height:auto} .nadia-wave img{width:100%;height:auto;display:block} @media (max-width:899px){.nadia-wave{max-width:170px}} /* fb1450: keep hero planets clear of Nadia (head/face) at every desktop/tablet width */ @media (min-width:900px){.hero .system{width:calc(100% - min(200px,14vw) - 70px);max-width:520px;margin:0 auto 0 0;justify-self:start}} @media (min-width:1300px){.hero .system{width:calc(100% - 100px)}} /* fb1621: final-section Nadia (NA-05, transparent PNG) sat in a white card. No card. */ .nadia-card.nadia-wave{background:none;border:0;border-radius:0;overflow:visible} /* fb1621: planet labels without white pills */ .planet .lbl{background:none;border:0;padding:2px 0;border-radius:0;color:var(--deep);font-weight:700;letter-spacing:.01em; text-shadow:0 0 1px var(--bg),0 0 1px var(--bg),0 0 1px var(--bg)} .planet.p-rear .lbl{top:auto;bottom:104%} /* fb1621: label of a planet passing behind the sphere sits above it, never under the sphere */ .map-sys .planet{z-index:5!important} /* fb1621: on the interactive map, planets + labels always sit over the sphere so no label is cut */ /* fb1715: the loop videos (NA-01-L, V-01, V-13) are opaque with an rgb(249,249,244)/(250,248,246) backdrop. mix-blend-mode does not apply to hardware-composited