:root { color-scheme: dark; --ink:#06211f; --deep:#0a302c; --paper:#edf3ee; --mist:#b6c9bf; --muted:#8da49a; --mint:#b5f3c9; --line:rgba(222,243,231,.15); font-family:"Manrope",ui-sans-serif,sans-serif; background:var(--ink); color:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--ink); } a { color:inherit; } ::selection { background:var(--mint); color:var(--ink); } :focus-visible { outline:2px solid var(--mint); outline-offset:4px; }
.site-header,.hero,footer { width:min(1320px,calc(100% - 56px)); margin:0 auto; }
.site-header { min-height:88px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--paper); font-weight:800; font-size:1.1rem; letter-spacing:-.04em; text-decoration:none; }.brand img { width:28px; height:28px; border-radius:8px; }.site-header nav { display:flex; gap:30px; margin-left:92px; }.site-header nav a, .header-link, footer a { color:var(--mist); font-size:.84rem; font-weight:700; text-decoration:none; }.site-header nav a { padding:8px 0; }.site-header nav a:hover, footer a:hover { color:var(--mint); }.header-link { color:var(--ink); background:var(--mint); padding:10px 16px; border-radius:999px; }.header-link:hover { background:var(--paper); }
.hero { min-height:738px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }.hero-copy { padding:88px 0 72px; max-width:690px; }.eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0; color:var(--mint); font-size:.68rem; font-weight:800; letter-spacing:.13em; }.eyebrow span,.screen-caption span,.deck-prompt span { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--mint); box-shadow:0 0 16px rgba(181,243,201,.75); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.035em; } h1 { max-width:700px; margin:22px 0 0; font-size:clamp(3.6rem,7vw,6.3rem); line-height:.94; font-weight:800; } em { font-family:"DM Serif Display",Georgia,serif; font-weight:400; letter-spacing:-.03em; color:var(--mint); }.hero-lead { max-width:575px; margin:28px 0 31px; color:var(--mist); font-size:1.08rem; line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:25px; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 20px; border-radius:10px; font-size:.88rem; font-weight:800; text-decoration:none; transition:transform .22s ease,background .22s ease; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--mint); color:var(--ink); box-shadow:0 16px 31px rgba(2,11,8,.25); }.text-link { color:var(--paper); font-size:.88rem; font-weight:800; text-decoration:underline; text-decoration-color:rgba(181,243,201,.55); text-underline-offset:5px; }.text-link:hover { color:var(--mint); }.hero-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:72px 0 0; padding-top:17px; border-top:1px solid var(--line); }.hero-proof div { min-width:0; }.hero-proof dt { margin-bottom:5px; color:var(--paper); font-size:.78rem; font-weight:800; }.hero-proof dd { margin:0; color:var(--muted); font-size:.72rem; line-height:1.4; }
.product-stage { position:relative; align-self:stretch; min-height:680px; display:grid; place-items:end center; overflow:clip; }.hero-wash { position:absolute; width:580px; height:580px; right:-100px; bottom:0; border-radius:50%; background:radial-gradient(circle at 45% 45%,rgba(88,196,127,.30),rgba(8,48,43,.02) 66%); }.phone-shell { width:clamp(260px,29vw,294px); position:relative; z-index:1; overflow:hidden; border:8px solid #10221d; border-bottom:0; border-radius:38px 38px 0 0; background:#e9efeb; box-shadow:0 40px 82px rgba(0,0,0,.42); transform:rotate(2.25deg); transform-origin:bottom center; }.phone-shell img { width:100%; height:auto; display:block; }.screen-caption { position:absolute; z-index:2; top:148px; right:4px; display:flex; align-items:center; gap:8px; color:var(--paper); font-size:.61rem; font-weight:800; letter-spacing:.09em; }
.statement { width:min(1080px,calc(100% - 56px)); margin:0 auto; padding:148px 0 106px; border-top:1px solid var(--line); display:grid; grid-template-columns:1.25fr .75fr; gap:76px; align-items:end; }.statement h2 { max-width:660px; margin:0; font-size:clamp(2.5rem,5vw,4.7rem); line-height:.98; }.statement p { max-width:400px; margin:0; color:var(--mist); font-size:1rem; line-height:1.65; }
.feature-rail { width:min(1180px,calc(100% - 56px)); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.feature-rail article { min-height:284px; padding:27px 26px 28px 0; display:flex; flex-direction:column; border-right:1px solid var(--line); }.feature-rail article + article { padding-left:27px; }.feature-rail article:last-child { border-right:0; }.feature-rail span { color:var(--mint); font-size:.67rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.feature-rail h3 { max-width:290px; margin:auto 0 16px; font-size:clamp(1.55rem,2.3vw,2.15rem); line-height:1.02; }.feature-rail p { max-width:315px; margin:0; color:var(--mist); font-size:.88rem; line-height:1.58; }
.orbit-showcase { width:min(1180px,calc(100% - 56px)); margin:154px auto 0; }.orbit-intro { max-width:760px; margin:0 auto; text-align:center; }.orbit-intro h2 { margin:20px 0 18px; font-size:clamp(2.8rem,5.6vw,5rem); line-height:.96; }.orbit-intro > p:last-child { max-width:560px; margin:0 auto; color:var(--mist); font-size:1rem; line-height:1.62; }.screen-deck { height:610px; margin:57px auto 0; position:relative; isolation:isolate; outline:none; perspective:1350px; }.screen-deck:focus-visible { outline:2px solid var(--mint); outline-offset:10px; border-radius:20px; }.deck-orbit { position:absolute; left:50%; top:50%; z-index:-1; border:1px solid rgba(181,243,201,.15); border-radius:50%; transform:translate(-50%,-50%) rotate(-8deg); }.deck-orbit-one { width:min(790px,84vw); height:420px; background:radial-gradient(ellipse,rgba(21,104,80,.18),transparent 67%); }.deck-orbit-two { width:min(610px,66vw); height:300px; border-color:rgba(181,243,201,.08); transform:translate(-50%,-50%) rotate(12deg); }
.screen-card { position:absolute; width:212px; margin:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s ease; will-change:transform; }.screen-card::after { content:""; position:absolute; inset:0; border:7px solid #10221d; border-radius:28px; pointer-events:none; }.screen-crop { overflow:hidden; border-radius:28px; background:var(--deep); box-shadow:0 34px 65px rgba(0,0,0,.47); }.screen-crop img { display:block; width:100%; height:auto; }.crop-welcome,.crop-confirm { height:304px; }.crop-action { height:376px; }.screen-card figcaption { padding:14px 5px 0; color:var(--mist); font-size:.72rem; line-height:1.42; }.screen-card figcaption span { display:block; margin-bottom:4px; color:var(--mint); font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.screen-card-left { left:12%; top:126px; transform:rotate(-15deg) rotateY(17deg) translateZ(-55px); animation:float-left 12s ease-in-out infinite; }.screen-card-center { left:calc(50% - 126px); top:16px; width:252px; z-index:3; transform:rotate(2.2deg) translateZ(46px); animation:float-center 10s ease-in-out infinite; }.screen-card-center::after,.screen-card-center .screen-crop { border-radius:32px; }.screen-card-right { right:12%; top:142px; transform:rotate(15deg) rotateY(-17deg) translateZ(-55px); animation:float-right 13s ease-in-out infinite; }.deck-prompt { position:absolute; bottom:0; left:50%; display:flex; align-items:center; gap:8px; transform:translateX(-50%); margin:0; color:var(--muted); font-size:.61rem; font-weight:800; letter-spacing:.12em; white-space:nowrap; }.screen-deck:hover .screen-card,.screen-deck:focus .screen-card { animation-play-state:paused; filter:brightness(1.08); }.screen-deck:hover .screen-card-left,.screen-deck:focus .screen-card-left { transform:translateX(-54px) translateY(-16px) rotate(-8deg) rotateY(5deg); }.screen-deck:hover .screen-card-center,.screen-deck:focus .screen-card-center { transform:translateY(-25px) scale(1.055); }.screen-deck:hover .screen-card-right,.screen-deck:focus .screen-card-right { transform:translateX(54px) translateY(-16px) rotate(8deg) rotateY(-5deg); }
@keyframes float-left { 0%,100% { transform:rotate(-15deg) rotateY(17deg) translateZ(-55px) translateY(0); } 50% { transform:rotate(-10deg) rotateY(11deg) translateZ(-28px) translateY(-18px); } } @keyframes float-center { 0%,100% { transform:rotate(2.2deg) translateZ(46px) translateY(0); } 50% { transform:rotate(-2deg) translateZ(58px) translateY(-22px); } } @keyframes float-right { 0%,100% { transform:rotate(15deg) rotateY(-17deg) translateZ(-55px) translateY(0); } 50% { transform:rotate(10deg) rotateY(-11deg) translateZ(-28px) translateY(-17px); } }
.vector-notes { width:min(940px,calc(100% - 56px)); margin:42px auto 155px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }.vector-notes p { margin:0; padding:10px 14px; border:1px solid rgba(181,243,201,.24); border-radius:999px; color:var(--paper); font-size:.78rem; }
.privacy-band { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:104px max(28px,calc((100% - 1180px)/2)); background:var(--mint); color:var(--ink); }.privacy-band .eyebrow { color:#1c5c42; }.privacy-band .eyebrow span { background:#1c5c42; box-shadow:none; }.privacy-band h2 { max-width:540px; margin:18px 0 0; font-size:clamp(2.55rem,5vw,4.55rem); line-height:.98; }.privacy-band em { color:#1d6649; }.privacy-copy { align-self:end; max-width:480px; }.privacy-copy p { margin:0 0 28px; color:#265c43; font-size:1rem; line-height:1.65; }.button-dark { color:var(--paper); background:var(--ink); }
footer { min-height:132px; display:flex; align-items:center; justify-content:space-between; gap:22px; } footer p { margin:0; color:var(--muted); font-size:.82rem; } footer div { display:flex; gap:20px; }
body:not(.home) main { width:min(760px,calc(100% - 48px)); margin:0 auto; padding:84px 0 100px; } body:not(.home) h1 { margin:0 0 18px; font-size:clamp(2.5rem,8vw,4.4rem); line-height:1; } body:not(.home) h2 { margin:44px 0 13px; font-size:1.3rem; } body:not(.home) p,body:not(.home) li { color:var(--mist); font-size:1rem; line-height:1.68; } body:not(.home) ul { padding-left:1.25rem; }.muted { color:var(--muted); }.notice { padding-left:14px; border-left:1px solid var(--mint); color:var(--paper); }
@media (max-width:840px) { .site-header,.hero,footer { width:min(100% - 32px,1320px); }.site-header { min-height:72px; }.site-header nav { display:none; }.hero { min-height:0; grid-template-columns:1fr; gap:0; }.hero-copy { padding:68px 0 20px; } h1 { font-size:clamp(3.35rem,13vw,5.4rem); }.hero-proof { margin-top:52px; }.product-stage { min-height:545px; }.screen-caption { top:47px; right:9%; }.hero-wash { right:calc(50% - 290px); }.statement { width:min(100% - 32px,1080px); padding:96px 0 76px; grid-template-columns:1fr; gap:26px; }.feature-rail { width:min(100% - 32px,1180px); grid-template-columns:1fr; }.feature-rail article,.feature-rail article + article { min-height:0; padding:25px 0; border-right:0; border-bottom:1px solid var(--line); }.feature-rail article:last-child { border-bottom:0; }.feature-rail h3 { margin:20px 0 11px; }.orbit-showcase { width:min(100% - 32px,1180px); margin-top:94px; }.screen-deck { height:512px; margin-top:43px; }.screen-card { width:154px; }.screen-card::after,.screen-crop { border-radius:21px; }.screen-card::after { border-width:5px; }.crop-welcome,.crop-confirm { height:217px; }.crop-action { height:275px; }.screen-card-center { left:calc(50% - 91px); width:182px; top:8px; }.screen-card-center::after,.screen-card-center .screen-crop { border-radius:25px; }.screen-card-left { left:0; top:118px; }.screen-card-right { right:0; top:126px; }.screen-card figcaption { padding-top:9px; font-size:.62rem; }.screen-card figcaption span { font-size:.54rem; }.screen-deck:hover .screen-card-left,.screen-deck:focus .screen-card-left { transform:translateX(-5px) translateY(-10px) rotate(-8deg) rotateY(5deg); }.screen-deck:hover .screen-card-right,.screen-deck:focus .screen-card-right { transform:translateX(5px) translateY(-10px) rotate(8deg) rotateY(-5deg); }.vector-notes { width:min(100% - 32px,940px); margin-bottom:96px; }.privacy-band { grid-template-columns:1fr; gap:30px; padding:80px 24px; }.privacy-copy { max-width:560px; } footer { flex-wrap:wrap; padding:28px 0; } }
@media (max-width:430px) { .hero-actions { gap:17px; }.button { padding:12px 15px; }.hero-proof { gap:12px; }.hero-proof dt { font-size:.7rem; }.hero-proof dd { font-size:.64rem; }.screen-deck { height:462px; }.screen-card { width:130px; }.screen-card-center { left:calc(50% - 78px); width:156px; }.crop-welcome,.crop-confirm { height:184px; }.crop-action { height:232px; }.screen-card-left { left:-8px; }.screen-card-right { right:-8px; }.deck-prompt { font-size:.53rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.screen-card { animation:none; transition:none; }.screen-deck:hover .screen-card-left,.screen-deck:focus .screen-card-left { transform:rotate(-15deg) rotateY(17deg) translateZ(-55px); }.screen-deck:hover .screen-card-center,.screen-deck:focus .screen-card-center { transform:rotate(2.2deg) translateZ(46px); }.screen-deck:hover .screen-card-right,.screen-deck:focus .screen-card-right { transform:rotate(15deg) rotateY(-17deg) translateZ(-55px); } }