:root { --navy:#071a33; --ink:#0b1d33; --lime:#beff43; --paper:#fff; --line:#d8dee3; --muted:#617084; --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } html { overflow-x:hidden; scroll-behavior:smooth; } body { margin:0; min-width:0; overflow-x:hidden; width:100%; color:var(--ink); font-family:var(--sans); background:var(--paper); } a { color:inherit; text-decoration:none; } .site-header { align-items:center; background:var(--navy); color:#fff; display:grid; grid-template-columns:1fr auto 1fr; max-width:100%; padding:27px clamp(25px,5.3vw,82px); position:relative; z-index:3; } .brand { font-size:24px; font-weight:600; letter-spacing:-1.6px; } .brand span { color:var(--lime); } nav { display:flex; gap:32px; font-size:13px; } nav a, .header-download { border-bottom:1px solid transparent; transition:border-color .2s ease; } nav a:hover, .header-download:hover { border-color:currentColor; } .header-download { justify-self:end; font-size:13px; white-space:nowrap; } .header-download span { font-size:15px; margin-left:5px; }
.hero { background:var(--navy); color:#fff; display:grid; grid-template-columns:minmax(300px,1.1fr) minmax(360px,.9fr); min-height:650px; overflow:hidden; padding:clamp(54px,9vw,140px) clamp(25px,11vw,170px) 94px; position:relative; } .hero-copy { align-self:center; position:relative; z-index:1; } h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.055em; line-height:.98; margin:0; } h1 { font-size:clamp(52px,5.1vw,80px); } h1 em,h2 em { font-weight:500; } .hero-copy > p { color:#c7d1de; font-size:18px; line-height:1.5; margin:27px 0 36px; max-width:355px; } .button { align-items:center; display:inline-flex; font-size:13px; font-weight:600; gap:23px; justify-content:space-between; padding:17px 20px; transition:transform .2s ease, background .2s ease; } .button:hover { transform:translateY(-2px); } .button-lime { background:var(--lime); color:var(--navy); min-width:208px; } .button-lime span { font-size:18px; }
.phone-scene { min-height:400px; position:relative; } .halo { background:radial-gradient(circle, rgba(190,255,67,.3) 0%, rgba(190,255,67,.08) 40%, transparent 71%); height:620px; left:50%; position:absolute; top:50%; transform:translate(-45%,-48%); width:620px; } .phone { background:#020913; border:7px solid #203148; border-radius:38px; box-shadow:25px 35px 70px rgba(0,0,0,.44), -2px 0 0 #66809e; height:478px; overflow:hidden; position:absolute; right:10%; top:50%; transform:translateY(-50%) rotate(9deg); width:237px; } .phone-speaker { background:#07101d; border-radius:8px; height:18px; left:76px; position:absolute; top:9px; width:72px; z-index:2; } .phone-screen { background:#132c3c; height:100%; overflow:hidden; padding:37px 19px 20px; position:relative; } .app-top,.app-footer { align-items:center; color:#e8f0f0; display:flex; font-family:var(--mono); font-size:8px; justify-content:space-between; letter-spacing:.1em; position:relative; z-index:1; } .app-top i { border:1px solid var(--lime); border-radius:50%; height:9px; width:9px; } .app-day { color:var(--lime); font:7px var(--mono); letter-spacing:.14em; margin-top:54px; position:relative; z-index:1; } .app-title { font-family:var(--serif); font-size:29px; letter-spacing:-.06em; line-height:.94; margin-top:14px; position:relative; z-index:1; } .app-orbit { border:1px solid rgba(190,255,67,.78); border-radius:50%; position:absolute; } .orbit-a { height:300px; left:-75px; top:172px; transform:rotate(-35deg); width:355px; } .orbit-b { border-color:rgba(255,255,255,.21); height:250px; left:-5px; top:205px; transform:rotate(48deg); width:245px; } .app-footer { bottom:19px; left:19px; position:absolute; right:19px; }
.plans { padding:clamp(78px,10vw,150px) clamp(25px,8.3vw,128px) 52px; } .section-index { color:#647488; font:10px var(--mono); letter-spacing:.12em; margin:0; } .section-heading { display:grid; grid-template-columns:1fr 1.35fr .85fr; gap:40px; } h2 { font-size:clamp(43px,4.2vw,66px); } .section-intro { color:var(--muted); font-size:16px; line-height:1.55; margin:12px 0 0; max-width:290px; } .plan-grid { border-bottom:1px solid var(--line); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); margin-top:94px; } .plan { border-right:1px solid var(--line); min-height:313px; padding:25px 25px 21px; position:relative; } .plan:first-child { border-left:1px solid var(--line); } .plan-featured { background:var(--navy); color:white; } .plan-term { font-size:15px; margin:0; } .price { font-family:var(--serif); font-size:61px; letter-spacing:-.08em; line-height:1; margin:57px 0 6px; } .price sup { font-family:var(--sans); font-size:22px; font-weight:500; letter-spacing:0; margin-right:2px; vertical-align:17px; } .price span { font-family:var(--sans); font-size:22px; font-weight:500; letter-spacing:-.05em; } .currency { color:var(--muted); font:10px var(--mono); letter-spacing:.04em; margin:0; } .plan-featured .currency { color:#b6c3d3; } .plan a { bottom:22px; font-size:12px; font-weight:600; left:25px; position:absolute; } .plan a span { color:#91b900; font-size:15px; margin-left:8px; } .plan-note { color:var(--muted); font-size:11px; margin:18px 0 0; }
.clarity { background:#edf1f2; padding:clamp(75px,9vw,133px) clamp(25px,8.3vw,128px); } .clarity-content { display:grid; gap:12%; grid-template-columns:1.35fr .65fr; margin-top:76px; } .clarity-copy { align-self:end; } .clarity-copy p { font-size:18px; line-height:1.54; margin:0 0 35px; max-width:355px; } .text-link { border-bottom:1px solid var(--ink); font-size:13px; font-weight:600; padding-bottom:6px; } .text-link span { color:#6e8f00; margin-left:12px; }
.faq { display:grid; gap:11%; grid-template-columns:.7fr 1.3fr; padding:clamp(78px,10vw,150px) clamp(25px,15vw,230px); } .faq-heading h2 { margin-top:28px; } .faq-list { border-top:1px solid var(--line); } details { border-bottom:1px solid var(--line); padding:23px 0; } summary { cursor:pointer; font-size:16px; font-weight:500; list-style:none; position:relative; } summary::-webkit-details-marker { display:none; } summary span { font-size:22px; font-weight:400; position:absolute; right:0; top:-6px; } details p { color:var(--muted); font-size:14px; line-height:1.55; margin:16px 45px 0 0; max-width:490px; }
footer { background:var(--navy); color:#fff; display:grid; grid-template-columns:1fr 1fr auto; gap:28px; padding:61px clamp(25px,8.3vw,128px) 26px; } footer > p { color:#b9c6d4; font-size:14px; margin:6px 0; } .footer-bottom { border-top:1px solid #34465d; color:#aab9ca; display:flex; font:10px var(--mono); grid-column:1/-1; justify-content:space-between; letter-spacing:.05em; margin-top:45px; padding-top:20px; } .footer-bottom a { color:#d8e2ea; }
@media (max-width:800px) { .mobile-break::before { content:"\A"; white-space:pre; } .site-header { display:flex; justify-content:space-between; padding:22px 25px; } nav, .header-download { display:none; } .hero { grid-template-columns:minmax(0,1fr); min-height:730px; padding:68px 25px 0; } .hero-copy { align-self:start; min-width:0; } h1 { font-size:50px; } .phone-scene { margin-top:-10px; min-height:360px; } .phone { height:390px; right:12%; width:194px; } .section-heading, .clarity-content, .faq { display:block; } .section-heading h2 { margin-top:34px; } .section-intro { margin-top:22px; } .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:57px; } .plan { border-bottom:1px solid var(--line); min-height:260px; min-width:0; } .plan:nth-child(3) { border-left:1px solid var(--line); } .price { font-size:50px; margin-top:39px; } .clarity-content { margin-top:43px; } .clarity-copy { margin-top:38px; } .faq { padding-left:25px; padding-right:25px; } .faq-list { margin-top:48px; } footer { grid-template-columns:1fr; } footer .button { justify-self:start; } .footer-bottom { gap:15px; margin-top:25px; } }
@media (max-width:420px) { .plan { padding-left:17px; padding-right:17px; } .plan a { left:17px; } .plan-term { font-size:14px; } .price { font-size:44px; } .price sup { font-size:17px; } .price span { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }