/* Design tokens + resets are scoped to the Buildiyo hero wrapper (.bdy-page) — NOT :root/body — so the plugin never paints the host theme's background, typography, links or custom properties on pages that don't render the Buildiyo design. */ .bdy-page{ /* Hero accent is GOLD per request (gold reads well on the dark hero — eyebrow, rotating word, the "AI precision" highlight, dots/rings). --accent-d stays deep navy for the solid buttons/tags (white text on navy). Light sections define their own --accent. */ --accent:#DCA14A; --accent-d:#1F3A5F; --accent-ink:#FFFFFF; --ink:#0E0D0A; --bg-2:#1C1A14; --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.08); --line:rgba(244,241,234,.13); --line-soft:rgba(244,241,234,.08); --text:#F4F7F5; --muted:rgba(244,241,234,.66); --faint:rgba(244,241,234,.42); --green:#7BC98C; --serif:'DM Sans',system-ui,sans-serif; --disp:'DM Sans',system-ui,sans-serif; --sans:'DM Sans',system-ui,sans-serif; --mono:'DM Sans',system-ui,sans-serif; font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } .bdy-page *{box-sizing:border-box;margin:0;padding:0} .bdy-page a{color:inherit;text-decoration:none} .bdy-page ::selection{background:var(--accent-d);color:var(--accent-ink)} /* armor: keep Buildiyo text colours even if the host theme/Elementor sets element colours. :where() = 0 specificity, so our own class rules still win; only the theme's defaults are overridden. */ .bdy-page :where(h1,h2,h3,h4,h5,h6,p,a,li,em,b,strong,small,label,blockquote){color:inherit} .bdy-page{position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--ink);color:var(--text)} /* ───────── cinematic backdrop ───────── */ .backdrop{position:absolute;inset:0;z-index:0;overflow:hidden} .backdrop video,.backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .backdrop img{filter:saturate(1.02)} .backdrop .veil{position:absolute;inset:0; background: linear-gradient(90deg, rgba(10,9,6,.93) 0%, rgba(10,9,6,.82) 34%, rgba(10,9,6,.45) 62%, rgba(10,9,6,.55) 100%), linear-gradient(180deg, rgba(10,9,6,.75) 0%, rgba(10,9,6,.18) 26%, rgba(10,9,6,.2) 62%, rgba(10,9,6,.92) 100%)} /* animated photo gallery backdrop */ .gallery{position:absolute;inset:0;display:none} body[data-scene="gallery"] .gallery{display:block} body[data-scene="gallery"] #bg-video{display:none} .gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease} .gallery img.on{opacity:1;animation:kb 9s ease-in-out both} @keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12)}} .scene-tag{position:absolute;right:clamp(20px,4vw,56px);bottom:10px;z-index:2;display:none;align-items:center;gap:9px; padding:8px 13px;border-radius:10px;background:rgba(12,11,8,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#F4F7F5} body[data-scene="gallery"] .scene-tag{display:inline-flex} .scene-tag b{color:var(--accent);font-weight:600} .scene-tag .ln{width:1px;height:13px;background:rgba(255,255,255,.22)} .backdrop .tint{position:absolute;inset:0;background:color-mix(in oklab, var(--accent) 10%, transparent);mix-blend-mode:overlay;opacity:.7} .backdrop .grid{position:absolute;inset:0; background-image:linear-gradient(var(--line-soft) 1px, transparent 1px),linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size:72px 72px;opacity:.45; -webkit-mask-image:radial-gradient(110% 80% at 30% 30%, #000 20%, transparent 80%); mask-image:radial-gradient(110% 80% at 30% 30%, #000 20%, transparent 80%)} .bdy-page>*:not(.backdrop){position:relative;z-index:1} /* ───────── entrance reveals (gated on body.boot so static captures/print show content) ───────── */ @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes lineup{from{transform:translateY(110%)}to{transform:none}} body.boot .rv{animation:rise .8s cubic-bezier(.2,.7,.25,1) both} body.boot .d1{animation-delay:.08s}body.boot .d2{animation-delay:.18s}body.boot .d3{animation-delay:.3s}body.boot .d4{animation-delay:.44s} body.boot .d5{animation-delay:.58s}body.boot .d6{animation-delay:.72s}body.boot .d7{animation-delay:.88s} .mask{display:block;overflow:hidden} body.boot .mask>span{animation:lineup .9s cubic-bezier(.2,.75,.2,1) both} .mask>span{display:block} body.boot h1 .mask:nth-child(1)>span{animation-delay:.15s} body.boot h1 .mask:nth-child(2)>span{animation-delay:.28s} body.boot h1 .mask:nth-child(3)>span{animation-delay:.41s} /* ───────── Ticker ───────── */ .ticker{border-bottom:1px solid rgba(0,0,0,.2);background:var(--accent-d);color:var(--accent-ink);overflow:hidden} .ticker__track{display:flex;width:max-content;animation:scroll-x 38s linear infinite;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;padding:8px 0} .ticker__track span{padding:0 22px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap} .ticker__track span::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5} @keyframes scroll-x{to{transform:translateX(-50%)}} /* ───────── Nav ───────── */ .bdy-page > .nav-wrap{position:relative;z-index:30} nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px clamp(20px,4vw,56px);border-bottom:1px solid var(--line-soft)} .brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em} .brand .txt{display:flex;flex-direction:column;line-height:1} .brand .mark{position:relative;width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:rgba(12,11,8,.4);transition:border-color .2s} .brand .mark .b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--accent);line-height:1;transform:translateY(-1px)} .brand .mark i{position:absolute;width:8px;height:8px;border:0 solid var(--accent)} .brand .mark i.tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px} .brand .mark i.tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px} .brand .mark i.bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px} .brand .mark i.br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px} .brand:hover .mark{border-color:var(--muted)} .brand small{font-family:var(--mono);font-weight:500;font-size:9px;color:var(--faint);letter-spacing:.22em;margin-top:4px;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500} .nav-item{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--muted);padding:8px 12px;border-radius:9px;transition:color .18s, background .18s;white-space:nowrap} .nav-item:hover{color:var(--text);background:rgba(255,255,255,.04)} .nav-item.open{color:var(--text);background:rgba(255,255,255,.05)} .nav-item .car{font-style:normal;font-size:8.5px;color:var(--faint);transition:transform .2s, color .2s} .nav-item.open .car{transform:rotate(180deg);color:var(--accent)} /* mega panels — compact anchored dropdowns */ .mega{position:absolute;top:calc(100% + 8px);left:0;overflow:hidden; background:rgba(15,14,10,.94);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%); border:1px solid var(--line);border-radius:16px;box-shadow:0 34px 70px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); animation:mega-in .22s cubic-bezier(.2,.75,.25,1)} #mega-services{width:min(660px,94vw)} #mega-ai{width:min(560px,94vw)} #mega-projects{width:min(400px,94vw)} .mega[hidden]{display:none} @keyframes mega-in{from{opacity:0;transform:translateY(-6px)}} .mega__in{padding:15px 16px 13px;display:grid;gap:6px 26px} #mega-services .mega__in{grid-template-columns:1.15fr 1fr} .mega__lab{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:8px} .m-item{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;margin:0 -10px;border-radius:10px;transition:background .18s} .m-item:hover{background:rgba(255,255,255,.045)} .m-item .mi-idx{font-family:var(--mono);font-size:9.5px;color:var(--accent);font-weight:600;letter-spacing:.1em;margin-top:4px} .m-item b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:600;letter-spacing:-.01em} .m-item .mi-d{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;text-wrap:pretty} .m-item .mi-arrow{margin-left:auto;color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity .2s, transform .2s;margin-top:4px;font-size:13px} .m-item:hover .mi-arrow{opacity:1;transform:none} .m-trust{list-style:none;border-left:1px solid var(--line-soft);padding-left:20px;align-self:center} .m-trust li{font-size:11.5px;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:9px;align-items:baseline;line-height:1.35} .m-trust li:last-child{border-bottom:0} .m-trust b{font-family:var(--disp);color:var(--accent);font-weight:700;min-width:42px;font-size:12.5px} /* services mega: left items drive right detail pane */ .m-item.is-active{background:rgba(255,255,255,.055)} .m-item.is-active .mi-arrow{opacity:1;transform:none} .m-sub{border-left:1px solid var(--line-soft);padding-left:20px;align-self:stretch} .m-pane{display:none} .m-pane.is-on{display:block;animation:pane-in .24s ease} @keyframes pane-in{from{opacity:0;transform:translateX(7px)}} .ms-row{display:flex;align-items:flex-start;gap:10px;padding:6.5px 9px;margin:0 -9px;border-radius:9px;transition:background .18s} .ms-row:hover{background:rgba(255,255,255,.05)} .ms-row i{font-style:normal;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:6.5px;flex:none} .ms-row b{display:block;font-size:12px;font-weight:600;letter-spacing:-.005em} .ms-row span span{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:1px;text-wrap:pretty} .mega__foot{border-top:1px solid var(--line-soft);background:rgba(255,255,255,.025)} .mega__foot-in{padding:10px 16px;font-size:12px;color:var(--faint);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .mega__foot-in a{color:var(--accent);font-weight:600;white-space:nowrap} .mega__foot-in a:hover{text-decoration:underline} .ai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 10px} .ai-cell{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px;transition:background .18s} .ai-cell:hover{background:rgba(255,255,255,.045)} .ai-cell b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px} .ai-cell b i{font-style:normal;width:5px;height:5px;border-radius:1.5px;background:var(--accent);flex:none} .ai-cell span{font-size:11px;color:var(--muted);line-height:1.35;padding-left:13px} .proj-grid{display:grid;grid-template-columns:1fr;gap:2px} .proj-row{display:flex;align-items:center;gap:12px;padding:7px 10px;margin:0 -10px;border-radius:10px;transition:background .18s} .proj-row:hover{background:rgba(255,255,255,.045)} .proj-row img{width:58px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:none} .proj-row b{display:block;font-family:var(--disp);font-size:13.5px;font-weight:600;letter-spacing:-.01em} .proj-row .meta{display:block;font-size:10.5px;font-family:var(--mono);color:var(--faint);margin-top:1px;letter-spacing:.03em} .proj-row .mi-arrow{margin-left:auto;color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity .2s, transform .2s;font-size:13px} .proj-row:hover .mi-arrow{opacity:1;transform:none} .nav-right{display:flex;align-items:center;gap:14px} .nav-right .btn{padding:8.5px 16px;font-size:13.5px} .pill-call{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted)} .pill-call b{color:var(--text);font-weight:500;white-space:nowrap} .mact{display:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);align-items:center;justify-content:center;flex:none} .mact svg{width:17px;height:17px} .mact--wa{display:inline-flex;color:#7BC98C;border-color:color-mix(in oklab, #7BC98C 35%, var(--line))} .mact--wa:hover{background:rgba(123,201,140,.12);border-color:#7BC98C} @media (max-width:980px){.nav-right .call-stack{display:none}.nav-right{gap:8px}} .call-stack{display:flex;flex-direction:column;gap:3px;align-items:flex-end;padding-right:14px;border-right:1px solid var(--line)} .call-stack a{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--muted);text-decoration:none;white-space:nowrap;line-height:1.2;transition:color .2s} .call-stack a:hover{color:var(--text)} .call-stack a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.85} .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px;cursor:pointer;border:1px solid transparent;-webkit-appearance:none;appearance:none;transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s;white-space:nowrap} button.btn{margin:0;line-height:1.2} .btn--primary{background:var(--accent-d);color:var(--accent-ink);box-shadow:0 8px 24px color-mix(in oklab, var(--accent) 34%, transparent)} /* Hero CTAs: primary button text pure black; "Watch a build" text turns accent on hover (smooth via the .btn color transition above). */ .bdy-page .btn--primary{color:#FFFFFF} /* #7 keep the hero "Get a Free Consultation" gold on hover (a host-theme .btn:hover was forcing black); text + transition unchanged */ .bdy-page .btn--primary:hover,.bdy-page .btn--primary:focus{background:var(--accent-d)!important;color:#FFFFFF!important} .bdy-page .js-watch:hover{color:var(--accent)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px color-mix(in oklab, var(--accent) 46%, transparent)} .btn--ghost{background:rgba(12,11,8,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);border-color:var(--line)} .btn--ghost:hover{background:rgba(12,11,8,.6);border-color:var(--muted)} .btn--primary .arrow{transition:transform .2s} .btn--primary:hover .arrow{transform:translateX(3px)} .play{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#DCA14A;color:#14130F;margin:-7px 0 -7px -8px;font-size:11px} /* Hero primary CTA ("Get a Free Consultation") — gold background, black text */ .bdy-page .cta-row .btn--primary,.bdy-page .cta-row .btn--primary:hover,.bdy-page .cta-row .btn--primary:focus{background:#DCA14A!important;color:#14130F!important} /* ───────── Hero ───────── */ .hero{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(28px,4vw,80px);align-items:center; padding:clamp(8px,1.4vw,20px) clamp(24px,4vw,64px);max-width:none;width:100%} .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 11px;border-radius:999px;border:1px solid var(--line); background:rgba(12,11,8,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:normal;margin-bottom:24px;line-height:1.5} .eyebrow .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)} .eyebrow .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);animation:ping 2.4s ease-out infinite} @keyframes ping{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.7);opacity:0}} /* hero identity badge: AI technology construction company */ .eyebrow--id{position:relative;overflow:hidden;padding:6px 16px 6px 6px;gap:11px;border:1px solid transparent; background:linear-gradient(rgba(14,13,10,.68), rgba(14,13,10,.68)) padding-box, linear-gradient(100deg, color-mix(in oklab, var(--accent) 70%, transparent) 0%, rgba(255,255,255,.16) 45%, color-mix(in oklab, var(--accent) 38%, transparent) 100%) border-box; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 10px 30px -12px rgba(0,0,0,.55), 0 0 30px -10px color-mix(in oklab, var(--accent) 42%, transparent)} .eyebrow--id::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.14) 48%, transparent 64%); transform:translateX(-130%);animation:eb-shine 5.4s ease-in-out infinite} @keyframes eb-shine{0%,58%{transform:translateX(-130%)}78%,100%{transform:translateX(130%)}} .ai-chip{position:relative;display:grid;place-items:center;width:27px;height:27px;border-radius:9px;flex:none; font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;color:#0E0D0A; background:conic-gradient(from 210deg, color-mix(in oklab, var(--accent) 78%, #fff), var(--accent) 52%, color-mix(in oklab, var(--accent) 72%, #12263D), color-mix(in oklab, var(--accent) 78%, #fff)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 12px -3px color-mix(in oklab, var(--accent) 75%, transparent)} .ai-chip i{position:absolute;inset:-4.5px;border-radius:12px;border:1px dashed color-mix(in oklab, var(--accent) 62%, transparent);animation:chip-orbit 10s linear infinite} @keyframes chip-orbit{to{transform:rotate(360deg)}} .eyebrow--id .eb-txt{color:color-mix(in oklab, var(--text) 78%, var(--muted))} .eyebrow--id .eb-txt b{font-weight:800;color:var(--accent);letter-spacing:.02em;text-shadow:0 0 18px color-mix(in oklab, var(--accent) 60%, transparent)} @media (prefers-reduced-motion: reduce){.eyebrow--id::after,.ai-chip i{animation:none}} @media (max-width:560px){.eyebrow--id{padding-right:12px}} h1{font-family:var(--disp);font-weight:700;font-size:clamp(42px,5.4vw,78px);line-height:1.02;letter-spacing:-.03em;margin-bottom:22px} body[data-display="serif"] h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.2vw,90px);letter-spacing:-.01em;line-height:.98} h1 .em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)} /* framed specimen word */ h1 .wordline{display:flex;align-items:baseline;gap:.45em} .wordframe{position:relative;display:inline-block;padding:.05em .18em .06em;margin-left:-.04em} .wordframe i{position:absolute;width:.24em;height:.24em;border:0 solid color-mix(in oklab, var(--text) 60%, transparent)} .wordframe i.tl{top:0;left:0;border-top-width:2px;border-left-width:2px} .wordframe i.tr{top:0;right:0;border-top-width:2px;border-right-width:2px} .wordframe i.bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px} .wordframe i.br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px} .word-idx{font-family:var(--mono);font-size:clamp(14px,1.25vw,18px);font-weight:600;letter-spacing:.16em;color:var(--faint);font-style:normal;white-space:nowrap} .word-idx b{color:var(--accent);font-weight:600} /* rotating word */ .rotator{display:inline-grid;text-align:left;vertical-align:bottom} .rotator>span{grid-area:1/1;opacity:0;transform:translateY(.55em);transition:opacity .45s, transform .55s cubic-bezier(.2,.75,.25,1);will-change:transform;white-space:nowrap} .rotator>span.on{opacity:1;transform:none} .rotator>span.off{opacity:0;transform:translateY(-.45em)} body[data-rotate="off"] .rotator>span{opacity:0;transform:none;transition:none} body[data-rotate="off"] .rotator>span:first-child{opacity:1} /* marker highlight */ .hl{background:var(--accent);color:var(--ink);padding:.01em .13em .04em;border-radius:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone} body.boot .hl{animation:hl-in .7s .95s cubic-bezier(.2,.75,.25,1) both} @keyframes hl-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} .lead{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.6;color:var(--muted);max-width:29em;margin-bottom:30px;text-wrap:pretty} .lead b{color:var(--text);font-weight:600} .cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px} .cta-row .or{font-size:13.5px;color:var(--faint)} .cta-row .or a{color:var(--text);font-weight:600;border-bottom:1px solid var(--line)} .trust{display:inline-flex;align-items:center;gap:15px;padding:10px 18px 10px 13px;border-radius:18px;flex-wrap:wrap; border:1px solid var(--line-soft);background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 16px 38px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05)} .avatars{display:flex} .av{position:relative;margin-left:-13px;display:block} .av:first-child{margin-left:0} .av img{display:block;width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);box-shadow:0 3px 10px -2px rgba(0,0,0,.5);background:var(--surface-2); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .av:hover,.av:focus-within{z-index:6} .av:hover img,.av:focus-within img{transform:translateY(-4px) scale(1.12);border-color:var(--accent);box-shadow:0 12px 24px -6px rgba(0,0,0,.65)} .av__tip{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%) translateY(5px); background:rgba(20,19,14,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:11px; padding:8px 12px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;box-shadow:0 18px 40px -16px rgba(0,0,0,.85);z-index:8} .av:hover .av__tip,.av:focus-within .av__tip{opacity:1;transform:translateX(-50%) translateY(0)} .av__tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(20,19,14,.97)} .av__tip b{display:block;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:-.01em;color:var(--text);white-space:nowrap} .av__tip span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--accent);margin-top:2px;white-space:nowrap} .avatars .more{width:38px;height:38px;border-radius:50%;margin-left:-13px;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--text); background:rgba(255,255,255,.1);border:2px solid var(--ink);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .trust__d{width:1px;align-self:stretch;min-height:34px;background:var(--line);flex:none} .trust__info{display:flex;flex-direction:column;gap:4px} .trust__top{display:flex;align-items:center;gap:9px} .trust__stars{color:var(--accent);letter-spacing:1.5px;font-size:13.5px;line-height:1} .trust__score{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em} .trust__score em{font-style:normal;font-family:var(--mono);font-weight:500;font-size:11.5px;color:var(--faint)} .trust__vf{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green); padding:3px 8px 3px 6px;border-radius:999px;background:color-mix(in oklab,var(--green) 14%,transparent);border:1px solid color-mix(in oklab,var(--green) 32%,transparent)} .trust__vf svg{width:11px;height:11px} .trust__sub{font-size:12.5px;color:var(--muted);line-height:1.3} .trust__sub b{color:var(--text);font-weight:700} @media (max-width:420px){.trust{gap:12px;padding:10px 14px}.trust__sub{font-size:11.5px}} /* ───────── App rail ───────── */ .rail{display:flex;flex-direction:column;gap:14px;max-width:380px;justify-self:end;width:100%} body[data-rail="off"] .rail{visibility:hidden} .rail--app{align-items:center;gap:18px;max-width:430px;justify-self:center} .phone-stage{position:relative;width:193px} .phone-glow{position:absolute;inset:-40px -60px;background:radial-gradient(50% 45% at 50% 42%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 70%);filter:blur(6px);pointer-events:none} .phone-root{position:relative;width:193px;height:420px;z-index:2} .phone-root>div{transform:scale(.48);transform-origin:top left} /* static phone (replaces the React mockup) */ .phone-root>.bdy-phone{transform:none;position:absolute;inset:0} .bdy-phone{border-radius:30px;background:#0F0E0B;border:6px solid #1b1a15;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden;font-family:var(--sans)} .bdy-phone__notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:54px;height:16px;background:#000;border-radius:0 0 12px 12px;z-index:3} .bdy-phone__screen{position:absolute;inset:6px;border-radius:24px;background:linear-gradient(180deg,#161510,#100F0B);padding:30px 12px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden} .bdy-ph__bar{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;color:var(--muted)} .bdy-ph__dots{display:flex;gap:3px} .bdy-ph__dots i{width:4px;height:4px;border-radius:50%;background:var(--muted)} .bdy-ph__hd b{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--text);display:block;line-height:1.1} .bdy-ph__hd span{font-size:9px;color:var(--accent);font-family:var(--mono)} .bdy-ph__card{background:rgba(255,255,255,.05);border:1px solid var(--line-soft);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:5px} .bdy-ph__card--accent{background:linear-gradient(140deg,color-mix(in oklab,var(--accent) 24%,transparent),rgba(255,255,255,.04));border-color:color-mix(in oklab,var(--accent) 30%,transparent)} .bdy-ph__k{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .bdy-ph__v{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--text);line-height:1} .bdy-ph__v2{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--text)} .bdy-ph__bar2{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden} .bdy-ph__bar2 i{display:block;height:100%;border-radius:3px;background:var(--accent)} .bdy-ph__row{display:flex;gap:8px} .bdy-ph__row .bdy-ph__card{flex:1} .bdy-ph__line{height:6px;border-radius:3px;background:rgba(255,255,255,.07);display:block} /* orbital feature ring */ .orbit-ring{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;z-index:1;pointer-events:none} .orbit-ring .ring-line{position:absolute;inset:0;border-radius:50%;border:1.5px dashed color-mix(in oklab, var(--text) 26%, transparent);animation:ring-spin 70s linear infinite} .orbit-ring .ring-dot{position:absolute;inset:0;animation:ring-spin 14s linear infinite} .orbit-ring .ring-dot::before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px color-mix(in oklab, var(--accent) 60%, transparent)} @keyframes ring-spin{to{transform:rotate(360deg)}} /* animated connector spokes */ .spokes{position:absolute;inset:0;width:100%;height:100%} .spoke{stroke:color-mix(in oklab, var(--text) 28%, transparent);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round; animation:dashflow 1.8s linear infinite;opacity:.45;transition:opacity .45s, stroke .45s} .spoke.on{stroke:var(--sc, var(--accent));opacity:1;stroke-width:2;animation-duration:.7s} .spoke[data-f="1"]{--sc:#7BC98C}.spoke[data-f="2"]{--sc:#D0704C}.spoke[data-f="3"]{--sc:#6E9BD8}.spoke[data-f="4"]{--sc:#A88FD8}.spoke[data-f="5"]{--sc:#5FB5B0} @keyframes dashflow{to{stroke-dashoffset:-18}} .orbit{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.5,0,.2,1)} .sat-arm{position:absolute;inset:0} .sat{position:absolute;top:0;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:auto;cursor:pointer;transition:transform 1.1s cubic-bezier(.5,0,.2,1);--c:var(--accent)} .sat[data-f="1"]{--c:#7BC98C} .sat[data-f="2"]{--c:#D0704C} .sat[data-f="3"]{--c:#6E9BD8} .sat[data-f="4"]{--c:#A88FD8} .sat[data-f="5"]{--c:#5FB5B0} .sat .orb{width:64px;height:64px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative; background:rgba(15,14,10,.88);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%); border:1px solid var(--line);box-shadow:0 14px 34px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07); transition:transform .55s cubic-bezier(.2,.75,.25,1), border-color .4s, box-shadow .4s} /* rotating dotted halo, tinted per feature */ .sat .orb::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dotted color-mix(in oklab, var(--c) 60%, transparent); animation:ring-spin 10s linear infinite;opacity:.45;transition:opacity .3s} .sat:hover .orb::before,.sat.on .orb::before{opacity:1;animation-duration:5s} .sat .orb .g{font-family:var(--mono);font-size:13.5px;font-weight:600;color:color-mix(in oklab, var(--c) 75%, #F4F7F5);letter-spacing:.02em;line-height:1;transition:color .4s} .sat .orb .l{font-family:var(--mono);font-size:7px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);line-height:1} .sat:hover .orb{border-color:color-mix(in oklab, var(--c) 60%, transparent);transform:scale(1.44)} .sat.on .orb{transform:scale(1.3);border-color:var(--c); box-shadow:0 18px 46px -14px color-mix(in oklab, var(--c) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.08)} .sat.on:hover .orb{transform:scale(1.44)} .sat.on .orb .g{color:var(--c)} .sat.on .orb::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--c);animation:ping 1.9s ease-out infinite} /* hover detail card */ .sat-tip{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(calc(-50% + var(--ts,0px)),8px);width:188px;text-align:center;padding:11px 13px;border-radius:12px; background:rgba(15,14,10,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid color-mix(in oklab, var(--c) 45%, transparent); box-shadow:0 18px 44px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:12} .sat-tip::after{content:"";position:absolute;top:100%;left:calc(50% - var(--ts,0px));margin-left:-5px;border:5px solid transparent;border-top-color:color-mix(in oklab, var(--c) 45%, transparent)} .sat-tip b{display:block;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--c)} .sat-tip span{display:block;font-size:10.5px;color:var(--muted);line-height:1.45;margin-top:3px;text-wrap:pretty} .sat:hover .sat-tip,.sat.on .sat-tip{opacity:1;transform:translate(calc(-50% + var(--ts,0px)),0)} .sat.on:not(:hover) .sat-tip{transition-delay:.95s} .orbit-ring:has(.sat:hover){z-index:6} .orb-label b{color:var(--lc, var(--text))} .rail--app .phone-stage{margin-top:36px} .orb-label{width:272px;margin-top:92px;text-align:center;padding:12px 16px;border-radius:14px; background:rgba(15,14,10,.9);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%); border:1px solid var(--line);box-shadow:0 18px 44px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06)} .orb-label .ol-in{transition:opacity .2s ease, transform .2s ease} .orb-label.sw .ol-in{opacity:0;transform:translateY(5px)} .orb-label b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.01em} .orb-label span{display:block;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:3px;text-wrap:pretty} @media (max-width:1280px){ .orbit-ring{transform:scale(.88)} } @media (max-width:1180px){ .orbit-ring{transform:scale(.8)} } /* mobile feature caption (replaces off-screen per-sat tooltips) */ .orb-cap{display:none} @media (max-width:640px){ /* keep the orbital circles on mobile, fit the whole cluster on-screen */ .rail--app{position:relative;z-index:5;margin:0;gap:0} .orbit-ring{display:block;transform:none} .rail--app .phone-stage{margin-top:-36px;margin-bottom:-44px;transform:scale(.65);transform-origin:center center} .bdy-page{overflow-x:clip} .sat-tip{width:186px;padding:11px 13px;bottom:calc(100% + 12px)} .sat-tip b{font-size:13.5px} .sat-tip span{font-size:11.5px;line-height:1.45} } @media (max-width:380px){ .rail--app .phone-stage{transform:scale(.58);margin-top:-42px;margin-bottom:-50px} } @media (max-width:344px){ .rail--app .phone-stage{transform:scale(.53);margin-top:-46px;margin-bottom:-54px} } .app-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--faint);flex-wrap:wrap;justify-content:center} .app-meta b{color:var(--text);font-weight:600} .app-meta .ln{width:1px;height:11px;background:var(--line)} .toast{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px; background:rgba(14,13,10,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden} .toast .bd{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 0 rgba(123,201,140,.55);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,201,140,.5)}70%{box-shadow:0 0 0 8px rgba(123,201,140,0)}100%{box-shadow:0 0 0 0 rgba(123,201,140,0)}} .toast .msgs{position:relative;flex:1;height:1.4em} .toast .msgs span{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .4s, transform .5s cubic-bezier(.2,.75,.25,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .toast .msgs span.on{opacity:1;transform:none} .toast .msgs b{color:var(--text);font-weight:500} .deck{position:relative;border-radius:18px;overflow:hidden; background:rgba(14,13,10,.66);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--line);box-shadow:0 30px 70px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07)} .deck__progress{display:flex;gap:5px;padding:14px 16px 0} .deck__progress i{flex:1;height:3px;border-radius:99px;background:var(--surface-2);overflow:hidden;position:relative;cursor:pointer} .deck__progress i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left} .deck__progress i.done::after{transform:scaleX(1)} .deck__progress i.run::after{animation:seg var(--seg-ms,4600ms) linear forwards} @keyframes seg{from{transform:scaleX(0)}to{transform:scaleX(1)}} .deck__viewport{position:relative;min-height:216px} .feature{position:absolute;inset:0;padding:16px 18px 18px;display:flex;flex-direction:column;opacity:0;transform:translateY(12px);transition:opacity .45s, transform .55s cubic-bezier(.2,.75,.25,1);pointer-events:none} .feature.on{opacity:1;transform:none;pointer-events:auto} .feature .f-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .feature .f-tag{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .feature .f-tag .ic{width:20px;height:20px;border-radius:6px;background:color-mix(in oklab,var(--accent) 22%,transparent);display:grid;place-items:center;color:var(--accent);font-size:10px;font-weight:700;font-family:var(--disp)} .feature .f-n{font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap} .feature h3{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em;margin-bottom:7px} .feature h3 i{font-style:normal;color:var(--accent)} .feature p{font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty;margin-bottom:12px} .feature .f-ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line-soft);padding-top:11px;font-family:var(--mono);font-size:10.5px;color:var(--faint)} .feature .f-ft>*{white-space:nowrap} .feature .f-ft b{color:var(--green);font-weight:600} .feature .f-ft .accent{color:var(--accent);font-weight:600} /* mini bar visual inside cost feature */ .mini-bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;position:relative;margin-bottom:7px} .mini-bar i{position:absolute;inset:0 32% 0 0;border-radius:99px;background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 55%,#fff))} .mini-cap{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10.5px;color:var(--faint)} .mini-cap>span{white-space:nowrap} .mini-cap b{color:var(--text);font-weight:500} .checks{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;color:var(--muted)} .checks span{display:flex;align-items:center;gap:8px} .checks .tick{width:14px;height:14px;border-radius:50%;background:color-mix(in oklab,var(--green) 22%,transparent);color:var(--green);display:grid;place-items:center;font-size:8.5px;flex:none} .deck__cta{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;color:var(--faint)} .deck__cta a{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:6px} .deck__cta a:hover{text-decoration:underline} /* ───── animated photo card ───── */ .photo-card{position:relative;height:148px;border-radius:16px;overflow:hidden;border:1px solid var(--line); box-shadow:0 22px 50px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07);background:#0c0b08} .photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease} .photo-card img.on{opacity:1;animation:kb 7s ease-in-out both} .photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(8,7,5,.78) 100%)} .photo-card .pc-cap{position:absolute;left:13px;right:13px;bottom:10px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .photo-card .pc-cap .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:rgba(244,241,234,.85);line-height:1.45} .photo-card .pc-cap .t b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:#F4F7F5} .photo-card .pc-cap .n{font-family:var(--mono);font-size:10px;color:rgba(244,241,234,.6);white-space:nowrap} .photo-card .pc-lbl{position:absolute;top:10px;left:13px;z-index:2;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap; color:var(--accent-ink);background:var(--accent);padding:3px 8px;border-radius:6px} .photo-card .pc-dots{position:absolute;top:12px;right:13px;z-index:2;display:flex;gap:5px} .photo-card .pc-dots i{width:5px;height:5px;border-radius:50%;background:rgba(244,241,234,.35);transition:background .3s, transform .3s} .photo-card .pc-dots i.on{background:var(--accent);transform:scale(1.25)} /* ───────── Stats ───────── */ .statbar{border-top:1px solid var(--line);background:rgba(10,9,6,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .statbar__in{display:grid;grid-template-columns:auto repeat(4,1fr);max-width:1480px;margin:0 auto;padding:0 clamp(20px,4vw,56px);align-items:stretch} .statbar__cap{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px clamp(18px,2.4vw,40px) 18px 0; font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);line-height:1.6} .statbar__cap b{color:var(--text);font-weight:600} .statbar__cap .sq{width:8px;height:8px;background:var(--accent)} .stat{position:relative;padding:17px 16px 15px clamp(16px,1.8vw,26px);border-left:1px solid var(--line-soft);transition:background .25s} .stat:hover{background:rgba(255,255,255,.03)} .stat .idx{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:9px} .stat .idx em{font-style:normal;color:var(--faint)} .stat .idx::after{content:"";height:1px;background:var(--line);flex:0 1 44px;transition:flex-basis .35s, background .35s} .stat:hover .idx::after{flex-basis:84px;background:var(--accent)} .stat .num{font-family:var(--disp);font-weight:700;font-size:clamp(27px,2.5vw,37px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:3px} .stat .num .suf{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.6em;color:var(--accent)} .stat .lbl{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.35;text-wrap:pretty;max-width:20em} /* ───────── AI marquee ───────── */ .ai-strip{border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:22px;padding:13px clamp(20px,4vw,56px);overflow:hidden;background:rgba(10,9,6,.6)} .ai-strip .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap;display:flex;align-items:center;gap:9px} .ai-strip .tag b{color:var(--accent);font-weight:600} .ai-mask{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ai-track{display:flex;width:max-content;gap:12px;animation:scroll-x 30s linear infinite} .ai-track .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap} .ai-track .chip i{font-style:normal;width:6px;height:6px;border-radius:2px;background:var(--accent)} /* ───────── Lightbox ───────── */ .lightbox{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:4vmin} .lightbox[hidden]{display:none} .lightbox__backdrop{position:absolute;inset:0;background:rgba(8,7,5,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .lightbox__body{position:relative;width:min(1060px,94vw);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0C0B08;box-shadow:0 60px 140px -30px rgba(0,0,0,.85);animation:lb-in .32s cubic-bezier(.2,.8,.25,1)} @keyframes lb-in{from{opacity:0;transform:translateY(18px) scale(.97)}} .lightbox__body video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000} .lightbox__body iframe,.lightbox__frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000} .lightbox__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(244,241,234,.6);border-top:1px solid rgba(255,255,255,.1)} .lightbox__bar b{color:#DCA14A;font-weight:600} .lightbox__close{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);cursor:pointer;background:rgba(12,11,8,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:14px;line-height:1;display:grid;place-items:center;transition:background .15s} .lightbox__close:hover{background:rgba(12,11,8,.85)} /* ───────── discipline strip ───────── */ .disc-strip{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap} .disc{--dc:var(--accent);display:flex;align-items:center;gap:11px;padding:10px 15px 10px 11px;border-radius:13px;border:1px solid var(--line); background:rgba(12,11,8,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;text-align:left;font-family:var(--sans); transition:border-color .3s ease, background .3s ease, transform .25s ease} .disc .di{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in oklab, var(--dc) 18%, transparent);color:var(--dc);flex:none;transition:background .3s, color .3s} .disc b{display:block;font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.1} .disc small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.3} .disc:hover{border-color:color-mix(in oklab, var(--dc) 45%, transparent)} .disc.on{border-color:color-mix(in oklab, var(--dc) 60%, transparent);background:rgba(12,11,8,.62);transform:translateY(-2px)} .disc.on .di{background:var(--dc);color:#14130E} @media (max-width:480px){.disc small{display:none}.disc{padding:9px 12px 9px 9px}} /* ───────── sticky nav ───────── */ .nav-wrap.stuck{position:fixed;top:0;left:0;right:0;z-index:60; background:rgba(13,12,9,.9);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); box-shadow:0 14px 34px -16px rgba(0,0,0,.5);animation:nav-drop .35s ease} @keyframes nav-drop{from{transform:translateY(-100%)}to{transform:none}} .nav-wrap.stuck nav{border-bottom-color:rgba(244,241,234,.08);padding-top:12px;padding-bottom:12px} /* ───────── mobile menu ───────── */ .mnav-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer; align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0} .mnav-btn i{display:block;width:18px;height:1.8px;border-radius:2px;background:var(--text);transition:transform .3s ease, opacity .3s ease} .mnav-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(6.8px) rotate(45deg)} .mnav-btn[aria-expanded="true"] i:nth-child(2){opacity:0} .mnav-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)} .bdy-page>.mnav{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:rgba(12,11,8,.97); -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%); opacity:0;pointer-events:none;transition:opacity .28s ease} .mnav.open{opacity:1;pointer-events:auto} .mnav__hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line-soft)} .mnav__hd .brand{font-size:18px} .mnav__x{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--text);font-size:20px;cursor:pointer;line-height:1} .mnav__links{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:18px 20px;gap:2px} .mnav__links a{display:flex;align-items:baseline;gap:14px;padding:13px 8px;border-bottom:1px solid var(--line-soft);color:var(--text);text-decoration:none; font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.015em; opacity:0;transform:translateY(10px);transition:opacity .35s ease, transform .35s ease} .mnav.open .mnav__links a{opacity:1;transform:none} .mnav__links a:nth-child(1){transition-delay:.05s}.mnav__links a:nth-child(2){transition-delay:.09s} .mnav__links a:nth-child(3){transition-delay:.13s}.mnav__links a:nth-child(4){transition-delay:.17s} .mnav__links a:nth-child(5){transition-delay:.21s}.mnav__links a:nth-child(6){transition-delay:.25s} .mnav__links a:nth-child(7){transition-delay:.29s} .mnav__links a em{font-style:normal;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.14em;color:var(--accent);min-width:24px} .mnav__links a small{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.06em} .mnav__ft{padding:16px 20px 22px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px} .mcall{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mcall a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border:1px solid var(--line);border-radius:12px; font-family:var(--mono);font-size:12px;color:var(--text);text-decoration:none;white-space:nowrap} .mcall a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)} .mnav__ft .btn{justify-content:center} /* mobile menu accordion (mirrors desktop mega) */ .mnav__links{gap:0;justify-content:safe center;align-items:stretch;padding-top:8px;padding-bottom:8px} .mnav__links>.macc,.mnav__links>.mnav__direct{width:100%;align-self:stretch} .macc{border-bottom:1px solid var(--line-soft)} .macc__hd{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;cursor:pointer;text-align:left; padding:13px 8px;color:var(--text);font-family:var(--disp);font-weight:600;font-size:19.5px;letter-spacing:-.015em} .macc__hd em{font-style:normal;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.14em;color:var(--accent);min-width:24px} .macc__hd .macc__car{margin-left:auto;font-style:normal;font-size:12px;color:var(--faint);transition:transform .3s ease,color .2s} .macc.open .macc__hd{color:var(--accent)} .macc.open .macc__hd .macc__car{transform:rotate(180deg);color:var(--accent)} .macc__body{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.2,.75,.25,1)} .macc__body-in{padding:0 8px 14px 46px} .macc__lab{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:13px 0 6px} .macc__body a{display:flex;align-items:baseline;gap:9px;padding:8px 0;color:var(--muted);font-family:var(--sans);font-weight:500;font-size:15px;border:0;opacity:1;transform:none;transition:color .18s,transform .18s} .macc__body a:hover{color:var(--text);transform:translateX(3px)} .macc__body a small{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint);font-weight:600;letter-spacing:.04em} .mnav__direct{display:flex;align-items:center;gap:14px;padding:13px 8px;border-bottom:1px solid var(--line-soft);color:var(--text); font-family:var(--disp);font-weight:600;font-size:19.5px;letter-spacing:-.015em} .mnav__direct em{font-style:normal;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.14em;color:var(--accent);min-width:24px} .mnav__direct .car{margin-left:auto;font-style:normal;font-size:14px;color:var(--faint)} .mnav__links>.macc,.mnav__links>.mnav__direct{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease} .mnav.open .mnav__links>.macc,.mnav.open .mnav__links>.mnav__direct{opacity:1;transform:none} .mnav__links>*:nth-child(1){transition-delay:.05s}.mnav__links>*:nth-child(2){transition-delay:.1s} .mnav__links>*:nth-child(3){transition-delay:.15s}.mnav__links>*:nth-child(4){transition-delay:.2s} @media (max-width:860px){.mnav-btn{display:inline-flex}} /* ───────── responsive ───────── */ @media (max-width:1180px){.nav-links{gap:14px;font-size:13.5px}.call-stack a{font-size:10.5px}.call-stack{padding-right:10px}} @media (max-width:1020px){ .hero{grid-template-columns:1fr;gap:34px;align-content:start} .rail{justify-self:stretch;max-width:560px} } @media (max-width:860px){ .nav-links{display:none} nav{gap:10px} .nav-right{gap:6px} .call-stack{display:none} .mact{display:inline-flex;width:34px;height:34px;border-radius:10px} .mact svg{width:16px;height:16px} .nav-right .btn{padding:7.5px 11px;font-size:12px} .mnav-btn{width:38px;height:38px;border-radius:10px} .brand{gap:8px;font-size:16.5px} .brand .mark{width:30px;height:30px} .brand .mark .b{font-size:18px} .brand small{display:none} .statbar__cap{display:none} .statbar__in{grid-template-columns:repeat(4,1fr)} .statbar__in > .stat:nth-child(2){border-left:0;padding-left:0} } @media (max-width:374px){ .nav-right .btn{padding:7px 9px;font-size:11px} .mact{width:32px;height:32px} .nav-wrap nav .brand .txt{display:none} } @media (max-width:680px){ .statbar__in{grid-template-columns:repeat(2,1fr)} .stat{padding-left:16px} .statbar__in > .stat:nth-child(even){border-left:0;padding-left:0} .statbar__in > .stat:nth-child(-n+3){border-bottom:1px solid var(--line-soft)} .ai-strip .tag span{display:none} .eyebrow{font-size:10px} h1{font-size:clamp(33px,9.4vw,42px)} body[data-display="serif"] h1{font-size:clamp(37px,10.4vw,48px)} h1 .wordline{gap:.4em} .word-idx{font-size:13px;letter-spacing:.12em} .lead{font-size:15px} .ticker__track{font-size:11px} .scene-tag{display:none!important} .stat .num{font-size:26px} .stat .lbl{font-size:11.5px} } @media (max-width:420px){ .hero{padding-left:16px;padding-right:16px} nav{padding-left:16px;padding-right:16px} .statbar__in,.ai-strip{padding-left:16px;padding-right:16px} .cta-row .or{display:none} .brand small{display:none} } @media (prefers-reduced-motion:reduce){ .bdy-page *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* perf: skip layout/paint of offscreen sections */ .sec,.foot{content-visibility:auto;contain-intrinsic-size:auto 900px} /* Hero phone — optional per-feature screen images (Hero -> Orbit satellites -> Phone screen image). Overlays the live mockup inside .bdy-phone__screen (already position:absolute). */ .phscreens{position:absolute;inset:0;z-index:5;border-radius:24px;overflow:hidden;pointer-events:none} .phscreen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .45s ease,transform .45s ease} .phscreen.on{opacity:1;transform:none} /* Hero phone — multi-screen system. Each orbit feature has its own .bdy-screen panel; they crossfade when a feature is selected (buildiyo.js · phone-screens). Optional admin images (.phscreens) layer on top. */ .bdy-phone__screen{padding:0} .bdy-screen{position:absolute;inset:0;padding:26px 12px 12px;display:flex;flex-direction:column;gap:7px;overflow:hidden; opacity:0;transform:scale(1.02);transition:opacity .45s ease, transform .45s ease;pointer-events:none} .bdy-screen.on{opacity:1;transform:none;pointer-events:auto} /* check rows (Quality / Warranty) */ .bdy-ph__chk{display:flex;align-items:center;gap:7px;font-size:9.5px;color:var(--muted);font-family:var(--sans);line-height:1.3} .bdy-ph__chk>i{width:13px;height:13px;border-radius:50%;flex:none;background:rgba(123,201,140,.22);position:relative} .bdy-ph__chk>i::after{content:"";position:absolute;left:4.5px;top:3px;width:3px;height:5.5px;border:solid #7BC98C;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)} /* payment rows */ .bdy-ph__pay{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;color:var(--muted);font-family:var(--mono);padding:2px 0} .bdy-ph__pay b{font-weight:600;font-size:8px;padding:2px 6px;border-radius:5px} .bdy-ph__pay b.ok{color:#7BC98C;background:rgba(123,201,140,.16)} .bdy-ph__pay b.due{color:var(--accent);background:color-mix(in oklab,var(--accent) 16%,transparent)} .bdy-ph__sub{font-size:8px;color:var(--faint);font-family:var(--mono);margin-top:2px} /* AR walkthrough image card */ .bdy-ph__img{position:relative;border-radius:10px;overflow:hidden;height:98px;flex:none;border:1px solid var(--line-soft)} .bdy-ph__img img{width:100%;height:100%;object-fit:cover;display:block} .bdy-ph__imgtag{position:absolute;top:7px;left:7px;font-family:var(--mono);font-size:7px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-d);padding:3px 6px;border-radius:5px} /* header row variant (avatar + bell) */ .bdy-ph__hd--row{display:flex;align-items:center;gap:8px} .bdy-ph__av{width:20px;height:20px;border-radius:6px;background:var(--accent-d);color:var(--accent-ink);font-family:var(--serif);font-style:italic;font-size:12px;display:grid;place-items:center;flex:none} .bdy-ph__hdtx{flex:1;min-width:0} .bdy-ph__hdtx b{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--text);display:block;line-height:1.1} .bdy-ph__hdtx span{font-size:8px;color:var(--accent);font-family:var(--mono)} .bdy-ph__bell{width:15px;height:15px;flex:none;color:var(--muted)} .bdy-ph__bell svg{width:100%;height:100%;display:block} /* list row */ .bdy-ph__listrow{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);border-radius:10px;padding:8px} .bdy-ph__lr-ic{width:16px;height:16px;border-radius:50%;flex:none;background:rgba(123,201,140,.22);color:#7BC98C;display:grid;place-items:center} .bdy-ph__lr-ic svg{width:9px;height:9px} .bdy-ph__lr-tx{flex:1;min-width:0} .bdy-ph__lr-tx b{display:block;font-family:var(--disp);font-weight:600;font-size:10px;color:var(--text);line-height:1.2} .bdy-ph__lr-tx span{font-size:7.5px;color:var(--faint);font-family:var(--mono)} .bdy-ph__lr-ar{margin-left:auto;color:var(--faint);font-size:13px} /* bottom tab bar */ .bdy-ph__tabs{margin-top:auto;display:flex;justify-content:space-between;padding-top:9px;border-top:1px solid var(--line-soft)} .bdy-ph__tabs span{font-family:var(--mono);font-size:7.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)} .bdy-ph__tabs span.on{color:var(--accent)} /* warranty certificate */ .bdy-ph__cert{position:relative;background:linear-gradient(140deg,color-mix(in oklab,var(--accent) 24%,transparent),rgba(255,255,255,.04));border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px} .bdy-ph__certv{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--text);line-height:1} .bdy-ph__certv em{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--accent);margin-left:3px} .bdy-ph__badge{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:7px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7BC98C;background:rgba(123,201,140,.16);border:1px solid rgba(123,201,140,.3);padding:3px 6px;border-radius:5px} /* daily thumbnails */ .bdy-ph__thumbs{display:flex;gap:6px;flex:none} .bdy-ph__thumbs img{flex:1;width:0;height:74px;object-fit:cover;border-radius:9px;border:1px solid var(--line-soft)}