/* The product supplies the color. The surrounding metal supplies the depth. */
.landing-page { position:relative; isolation:isolate; background:#08090e; --landing-blue:#5288ff; --landing-violet:#9b7cf4; --landing-pink:#e0a0d0; }
.landing-page::before { display:none; }
.landing-page main,.landing-page .top,.landing-page .foot { position:relative; z-index:1; max-width:1280px; }
.landing-page main { padding-inline:40px; }
.landing-page section[id],.landing-page #main { scroll-margin-top:90px; }
.landing-page .top { position:sticky; top:0; z-index:20; padding:24px 40px; border-color:#ffffff12; transition:background .4s,border-color .4s; }
.page-scrolled .landing-page .top { background:#0b0e18ed; backdrop-filter:blur(20px); border-color:#c0d0f420; }
.landing-page .top nav { gap:21px; font-size:13px; }
.landing-page .brand { font-size:20px; }
.landing-page .brand img { width:34px; height:34px; }
.landing-page .pill { padding:9px 17px; border-radius:99px; }
.landing-atmosphere { position:absolute; top:0; left:0; width:100%; height:1600px; z-index:0; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse at 50% -20%,#36487570,transparent 58%),#0c101b; }
.metal-cloud { position:absolute; border-radius:50%; filter:blur(72px); opacity:.55; mix-blend-mode:screen; animation:cloud-drift 26s ease-in-out infinite alternate; }
.cloud-blue { width:74%; height:530px; top:-200px; left:-25%; background:radial-gradient(ellipse,var(--landing-blue),transparent 65%); }
.cloud-violet { width:80%; height:680px; top:20px; right:-36%; background:radial-gradient(ellipse,var(--landing-violet),transparent 65%); animation-delay:-9s; }
.cloud-pink { width:68%; height:440px; top:450px; left:18%; background:radial-gradient(ellipse,var(--landing-pink),transparent 67%); opacity:.17; animation-delay:-18s; }
.metal-ring { position:absolute; width:1400px; height:660px; left:50%; top:130px; transform:translateX(-50%) rotate(-20deg); border:1px solid #c5d2ff10; border-radius:50%; box-shadow:0 -1px 0 #ffffff10,0 -16px 90px #a9bcff08; }
.landing-atmosphere::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(106deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 5px); opacity:.5; }
.landing-atmosphere canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.75; }
.atmosphere-fade { position:absolute; inset:0; background:linear-gradient(180deg,#08090e00 0%,#08090e18 32%,#08090e9c 65%,#08090e 94%); }
@keyframes cloud-drift { to { transform:translate3d(7%,7%,0) scale(1.08); } }
.landing-page[data-material=graphite] { --landing-blue:#697c9e; --landing-violet:#9ba6c3; --landing-pink:#a7b0c2; --accent:#bdc8e0; --accent2:#d2daea; --grad:linear-gradient(115deg,#f3f5fc,#a8b7d0 45%,#d9dfea 80%,#f5f7ff); }
.landing-page[data-material=graphite] .metal-cloud { opacity:.25; }
.landing-page[data-material=graphite] .home-hero h1 span { background-image:linear-gradient(115deg,#f6f7ff,#aabbdc 35%,#e6eaf4 65%,#aebbd5); }
.landing-page[data-material=aurora] { --landing-blue:#3a98ed; --landing-violet:#a566fa; --landing-pink:#f188c3; }
.landing-page[data-material=aurora] .metal-cloud { opacity:.72; }
.landing-page[data-material=aurora] .cloud-pink { opacity:.28; }
.landing-page .home-hero { padding:70px 0 30px; position:relative; }
.hero-kicker { display:inline-flex; align-items:center; gap:10px; color:#c8cce0; font-size:12px; font-weight:550; letter-spacing:.01em; }
.live-dot { width:5px; height:5px; border-radius:50%; background:#b6f6d3; box-shadow:0 0 12px #a9e4c75c; }
.beta-chip { padding:3px 9px; font-size:10px; color:#d7d9e9; border:1px solid #ffffff24; border-radius:99px; background:#ffffff05; }
.landing-page .home-hero h1 { font-size:clamp(60px,7.8vw,102px); font-weight:600; letter-spacing:-.075em; line-height:1.02; margin:24px 0 22px; }
.landing-page .home-hero .lead { color:#c2c7d9; max-width:650px; font-size:17px; line-height:1.7; }
.landing-page .home-hero .cta { margin:27px 0 20px; gap:12px; }
.landing-page .home-hero .btn { height:49px; border-radius:99px; font-size:13px; padding:0 23px; }
.landing-page .home-hero .btn.ghost { background:#11162360; box-shadow:inset 0 0 0 1px #ffffff28; }
.hero-promises { display:flex; justify-content:center; align-items:center; gap:19px; font-size:11px; color:#a6acc1; }
.hero-promises span+span::before { content:""; display:inline-block; width:2px; height:2px; margin-right:19px; border-radius:50%; background:#959eb0; vertical-align:middle; }
.surface-controls { display:flex; align-items:center; justify-content:center; gap:18px; margin:30px auto 0; }
.palette-switch { display:flex; gap:2px; padding:4px; border:1px solid #b5c7ff21; border-radius:99px; background:#080c1645; }
.palette-switch button,.motion-switch { display:inline-flex; align-items:center; gap:7px; background:transparent; color:#aeb7cc; border:0; font:inherit; font-size:10px; cursor:pointer; }
.palette-switch button { padding:7px 11px; border-radius:99px; }
.palette-switch button[aria-pressed=true] { background:#c4d4ff14; color:#edf2ff; box-shadow:inset 0 0 0 1px #d5deff16; }
.swatch { width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1px #ffffff30; }
.swatch.metal { background:linear-gradient(135deg,#99bcff,#f1beda); }.swatch.graphite { background:linear-gradient(135deg,#cbd4e8,#5e6678); }.swatch.aurora { background:linear-gradient(135deg,#4dade7,#a676ef,#f099cf); }
.motion-switch { padding:10px 0; }
.motion-dot { width:4px; height:4px; border-radius:50%; background:#b3c5fa; box-shadow:0 0 7px #adc6ff60; }
.motion-switch[aria-pressed=false] .motion-dot { background:#777f91; box-shadow:none; }
.hero-side-note { position:absolute; right:0; top:54%; display:flex; align-items:center; gap:15px; color:#8492ac; font-size:9px; writing-mode:vertical-rl; letter-spacing:.12em; }
.fine-cross { color:#abb7cc; font:300 16px/1 monospace; }
.product-stage { padding-top:24px; margin-bottom:104px; }
.stage-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.stage-heading .eyebrow { font-size:9px; letter-spacing:.18em; margin:0 0 10px; color:#a8b8da; }
.stage-heading h2 { margin:0; text-align:left; font-size:34px; font-weight:520; letter-spacing:-.05em; }
.stage-heading>p { margin:0; color:#aeb6ca; font-size:12px; line-height:1.7; text-align:right; }
.product-shell { position:relative; border:1px solid #c4cff638; border-radius:18px; padding:6px; background:linear-gradient(130deg,#bbc9ff0e,#ffffff01 45%,#edb9e707),#12151dcc; box-shadow:inset 0 1px 0 #ffffff24,0 35px 100px #00000085,0 0 100px #8a9ef310; }
.product-shell::before,.product-shell::after { content:""; position:absolute; width:3px; height:3px; border:1px solid #c7d5ef77; border-radius:50%; top:15px; pointer-events:none; }.product-shell::before { left:15px; }.product-shell::after { right:15px; }
.product-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:56px; padding:8px 22px; }
.product-title { display:flex; align-items:center; gap:8px; font-size:11px; color:#e0e5f4; white-space:nowrap; }
.product-title>span { color:#9ea6be; }.product-title img { border-radius:5px; }
.shot-switch { display:flex; gap:3px; border:1px solid #ffffff10; padding:3px; border-radius:99px; background:#090b1240; }
.shot-switch button { padding:7px 13px; font:inherit; font-size:10px; border:0; border-radius:99px; cursor:pointer; color:#abb4c9; background:transparent; }
.shot-switch button[aria-pressed=true] { background:#b5c5f21b; color:#f0f4ff; }
.shot-indicator { font-size:8px; letter-spacing:.13em; color:#909cb8; display:flex; align-items:center; gap:7px; }
.shot-indicator i { width:3px; height:3px; background:#b8c8ee; border-radius:50%; }
.product-view { margin:0; min-width:0; animation:shot-appear .45s ease both; }
.product-view>img { display:block; width:100%; height:auto; aspect-ratio:1770/1095; object-fit:contain; border:1px solid #ffffff0d; border-radius:12px; background:#10111a; }
.product-view figcaption { color:#a0abc4; font-size:11px; text-align:center; padding:15px 16px 12px; }
@keyframes shot-appear { from { opacity:.35; transform:translateY(5px); } }
.dock-comparison { display:grid; align-content:center; gap:30px; min-height:0; aspect-ratio:1770/1095; padding:50px 30px; border-radius:12px; background:radial-gradient(ellipse at 15% 0,#4977b426,transparent 70%),radial-gradient(ellipse at 95% 100%,#b567b522,transparent 70%),#101420; }
.dock-comparison img { display:block; width:100%; height:auto; aspect-ratio:1650/450; object-fit:contain; }
.dock-label { display:block; margin:0 0 3px 10px; color:#bac8e2; font-size:10px; letter-spacing:.04em; }
.stage-caption { display:flex; justify-content:space-between; gap:16px; margin-top:17px; color:#8791a8; font-size:9px; }
.stage-caption>span { display:flex; gap:11px; align-items:center; }.stage-caption a { color:#b6c5e7; font-size:10px; }
.capability-strip { margin-top:42px; display:flex; justify-content:center; flex-wrap:wrap; gap:20px 50px; padding:22px 0; border-block:1px solid #ffffff0b; color:#a2acc2; font-size:12px; }
.capability-strip span { display:flex; gap:10px; align-items:center; }.capability-strip i { font-style:normal; color:#c4d0ea; font-size:18px; }
.shot-zoom { font:inherit; font-size:10px; padding:7px 9px; background:transparent; color:#c6d2ee; border:1px solid #ffffff1a; border-radius:7px; cursor:pointer; }
.shot-dialog { padding:12px; width:min(1500px,95vw); max-height:92vh; border:1px solid #b6c9f448; border-radius:16px; background:#0e1119; color:var(--fg); box-shadow:0 40px 120px #000; }
.shot-dialog::backdrop { background:#02040ccc; backdrop-filter:blur(9px); }.dialog-heading { display:flex; justify-content:space-between; align-items:center; padding:2px 6px 12px; font-size:13px; }
.shot-dialog .product-view>img { max-height:75vh; width:100%; object-fit:contain; }.shot-dialog .dock-comparison { aspect-ratio:auto; max-height:72vh; overflow:auto; padding:20px; }.shot-dialog .product-view figcaption { padding-bottom:0; }
body:has(.shot-dialog[open]) { overflow:hidden; }
.landing-page .home-features h2 { font-size:46px; font-weight:500; }
.landing-page .features .card { position:relative; border:1px solid #ffffff13; border-radius:16px; padding:30px 26px; background:linear-gradient(135deg,#c3ceff08,#ffffff00 65%),#101219; transition:border-color .3s,background .3s; }
.landing-page .features .card:hover { border-color:#b4c7f34d; background:linear-gradient(135deg,#c3ceff0e,#dcafdc04 70%),#121520; }
.landing-page .features .card h3 { font-size:21px; }.landing-page .features .card p { font-size:13px; line-height:1.8; }
.landing-page .feature-number { color:#9caeca; font-size:9px; }.landing-page .features .card::after { content:"+"; position:absolute; top:25px; right:25px; font:300 15px monospace; color:#8b97ac; }
.landing-page .showcase { gap:50px; margin:100px 0; }.landing-page .showcase .frow { margin-bottom:0; gap:70px; }
.landing-page .frow h2 { font-size:43px; font-weight:500; }.landing-page .frow-media img { border-color:#c3cff529; border-radius:14px; box-shadow:0 25px 80px #00000066; }.landing-page .frow-media img.stack { margin-top:24px; max-height:none; aspect-ratio:1650/450; background:transparent; }
.landing-page .restore-band { position:relative; overflow:hidden; padding:54px 12%; background:radial-gradient(ellipse at 50% 0,#748bad18,transparent 75%),#11131a; border-color:#c2cff626; }
.landing-page .restore-band::after { content:""; position:absolute; top:0; left:15%; right:15%; height:1px; background:linear-gradient(90deg,transparent,#d1dcff7d,transparent); }.landing-page .restore-band h2 { font-weight:500; }
.landing-page .step { border-left:1px solid #b2c0e42a; border-radius:0; padding:12px 28px; }.landing-page .stepn { width:30px; height:30px; font-size:12px; border-radius:50%; margin-bottom:20px; }
.landing-page .plan { transition:box-shadow .3s,background .3s; }.landing-page .plan:hover { background:linear-gradient(135deg,#afc4ff0a,#ddb3d708),#161923; }.landing-page .plan.best { background:linear-gradient(135deg,#9eafff18,#ffffff03 45%,#f4bbdf0e),#181b27; }
.landing-page .faq { margin-top:100px; }.landing-page .faq h2 { font-weight:500; font-size:34px; }
.contact-section { display:grid; grid-template-columns:1fr 1.2fr; gap:70px; margin:110px 0 60px; padding:48px 0; border-top:1px solid #ffffff14; }
.contact-intro h2 { text-align:left; font-size:38px; font-weight:500; letter-spacing:-.05em; margin:15px 0; }.contact-intro>p:not(.eyebrow) { max-width:350px; color:var(--fg2); font-size:13px; line-height:1.8; }
.contact-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.contact-direct { grid-column:1/-1; margin:0; font-size:13px; }.contact-card { display:flex; flex-direction:column; align-items:flex-start; padding:26px 22px; border:1px solid #c4d4fa22; border-radius:16px; background:linear-gradient(130deg,#b3c7ff08,#ffffff00),#11131b; transition:border-color .3s,transform .3s; }
.contact-card:hover { border-color:#bacaf459; transform:translateY(-3px); }.contact-icon { display:grid; place-items:center; width:32px; height:32px; margin-bottom:24px; background:#b6cafa12; border:1px solid #c5d4f928; border-radius:10px; color:#d6e2fa; }
.contact-card-title { font-size:16px; font-weight:550; color:#edf1fb; margin-bottom:9px; }.contact-card>span:not(.contact-card-title):not(.contact-icon):not(.contact-card-link) { color:#abb4c9; font-size:12px; line-height:1.8; }.contact-card-link { margin-top:auto; padding-top:24px; font-size:11px; color:#c9d7f3; }
.landing-page .cta-band { margin-top:70px; }.landing-page .cta-band h2 { font-size:76px; font-weight:500; }.landing-page .cta-band .btn { border-radius:99px; padding-inline:27px; }
.landing-page .foot { padding-inline:40px; }
.reveal { opacity:1; transform:none; }.reveal-ready .reveal:not(.is-visible) { opacity:0; transform:translateY(18px); }.reveal-ready .reveal { transition:opacity .8s ease,transform .8s ease; }
.motion-disabled { scroll-behavior:auto; }.motion-disabled .product-view,.motion-disabled .metal-cloud,.motion-disabled .home-hero h1 span { animation:none; }.motion-disabled .reveal { opacity:1; transform:none; transition:none; }
@media(max-width:1100px) { .hero-side-note { display:none; }.shot-indicator { display:none; }.contact-section { gap:35px; }.landing-page .top nav { gap:15px; } }
@media(max-width:900px) { .landing-page main,.landing-page .top,.landing-page .foot { padding-inline:24px; }.landing-page .top nav { background:#111624f5; max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); overflow-y:auto; }.landing-page .home-hero { padding-top:54px; }.contact-section { grid-template-columns:1fr; gap:25px; }.contact-intro>p:not(.eyebrow) { max-width:500px; }.landing-page .showcase .frow { gap:26px; }.landing-page .step { padding:16px 24px; }.metal-cloud { filter:blur(45px); } }
@media(max-width:600px) { .landing-page main,.landing-page .top,.landing-page .foot { padding-inline:18px; }.landing-page .home-hero { padding:50px 0 24px; }.landing-page .home-hero h1 { font-size:clamp(50px,12vw,70px); letter-spacing:-.065em; }.landing-page .home-hero .lead { font-size:14px; }.landing-page .home-hero .lead br { display:none; }.landing-page .home-hero .cta .btn { width:100%; }.hero-promises { gap:10px; font-size:9px; }.hero-promises span+span::before { margin-right:10px; }.surface-controls { flex-wrap:wrap; gap:3px; margin-top:22px; }.palette-switch button { font-size:10px; padding:7px 10px; }.motion-switch { font-size:9px; }.stage-heading { margin-bottom:16px; }.stage-heading h2 { font-size:28px; }.stage-heading>p { display:none; }.product-stage { padding-top:20px; margin-bottom:64px; }.product-shell { border-radius:12px; padding:3px; }.product-toolbar { padding:10px; flex-wrap:wrap; min-height:48px; }.product-title { font-size:10px; }.shot-switch button { font-size:9px; padding:7px 9px; }.product-title>span:first-of-type { display:none; }.product-title [data-shot-name] { display:none; }.product-view>img { border-radius:8px; }.product-view figcaption { font-size:9px; line-height:1.6; padding:10px 8px; }.stage-caption { flex-direction:column; gap:10px; line-height:1.6; }.capability-strip { gap:16px 25px; margin-top:28px; justify-content:flex-start; font-size:10px; }.dock-comparison { padding:14px 7px; gap:12px; }.dock-label { font-size:8px; }.landing-page .home-features h2,.landing-page .frow h2 { font-size:32px; }.landing-page .features .card { padding:24px; }.landing-page .restore-band { padding:32px 22px; }.landing-page .faq h2 { font-size:29px; }.contact-section { margin-top:65px; }.contact-intro h2 { font-size:33px; }.contact-cards { grid-template-columns:1fr; }.contact-card { padding:23px; }.contact-icon { margin-bottom:16px; }.landing-page .cta-band h2 { font-size:50px; }.product-shell::before,.product-shell::after { display:none; }.shot-zoom { font-size:9px; }.shot-dialog { padding:8px; }.shot-dialog .dock-comparison { padding:10px; } }
@media(prefers-reduced-motion:reduce) { .metal-cloud,.home-hero h1 span { animation:none; }.reveal-ready .reveal { opacity:1; transform:none; transition:none; }.landing-atmosphere canvas { display:none; } }
@media(forced-colors:active) { .landing-atmosphere { display:none; }.product-shell,.contact-card,.palette-switch { border:1px solid CanvasText; }.live-dot,.motion-dot { background:CanvasText; } }