{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ --ink:#0D1030; --ink-2:#161A4A; --paper:#F2F4FF; --muted:#8E98D6; --violet:#5B4BFF; --magenta:#FF2D95; --coral:#FF6B35; --amber:#FFC53D; --cyan:#00E5D0; --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif; --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --r:14px; --wrap:1140px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden} .aurora{ position:fixed; inset:-20vh -10vw; z-index:0; pointer-events:none; background: radial-gradient(36vw 36vw at 10% 14%, rgba(91,75,255,.85), transparent 62%), radial-gradient(32vw 32vw at 86% 6%, rgba(255,45,149,.62), transparent 60%), radial-gradient(30vw 30vw at 72% 70%, rgba(0,229,208,.42), transparent 62%), radial-gradient(26vw 26vw at 20% 86%, rgba(255,107,53,.42), transparent 62%); filter:blur(52px); opacity:.5; animation:drift 28s ease-in-out infinite alternate; } @keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}} /* the lattice — a truss, because the subject is structures */ .truss{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104'%3E%3Cg stroke='%23F2F4FF' stroke-width='1' fill='none'%3E%3Cpath d='M0 0h120M0 104h120M0 0l60 104M60 104l60-104M60 0L0 104M60 0l60 104'/%3E%3C/g%3E%3C/svg%3E"); } .grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");} .page{position:relative; z-index:2} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px} .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 18px} h2{font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.02; margin:0 0 14px} p{margin:0 0 18px} a{color:inherit} :focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px} .btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:600; font-size:16px; padding:15px 26px; border-radius:999px; border:0; cursor:pointer; text-decoration:none; transition:transform .16s ease} .btn-primary{background:linear-gradient(92deg,var(--magenta),var(--coral) 55%,var(--amber)); color:#180808; box-shadow:0 10px 30px -10px rgba(255,45,149,.8)} .btn-ghost{background:transparent; color:var(--paper); border:1.5px solid rgba(242,244,255,.28)} .btn:hover{transform:translateY(-2px)} .btn-ghost:hover{border-color:var(--cyan); color:var(--cyan)} .btn:disabled{opacity:.6; cursor:default; transform:none} .top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 0; flex-wrap:wrap} .mark{font-family:var(--mono); font-size:14px} .mark span{color:var(--cyan)} .status{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} .dot{width:8px; height:8px; border-radius:50%; background:var(--cyan); animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,229,208,.6)}70%{box-shadow:0 0 0 10px rgba(0,229,208,0)}100%{box-shadow:0 0 0 0 rgba(0,229,208,0)}} /* ── hero ── */ .hero{padding:52px 0 84px} .pair{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; opacity:0; animation:fade .6s ease .1s both} .pill{display:inline-flex; align-items:center; gap:9px; background:rgba(242,244,255,.06); border:1px solid rgba(242,244,255,.16); border-radius:999px; padding:10px 17px; font-family:var(--mono); font-size:13.5px} /* the address bars + the spectrum sweep */ .bars{display:flex; flex-direction:column; gap:10px; align-items:flex-start; opacity:0; animation:fade .6s ease .1s both} .bar{display:inline-flex; align-items:center; gap:10px; max-width:100%; background:rgba(242,244,255,.07); border:1px solid rgba(242,244,255,.16); border-radius:999px; padding:12px 21px; font-family:var(--mono); font-size:14.5px; overflow:hidden} .bar svg{flex:none; opacity:.5} .bar .scheme{color:var(--muted)} .caret{display:inline-block; width:2px; height:1.05em; background:var(--cyan); animation:blink 1.1s steps(1) infinite; vertical-align:-3px} @keyframes blink{50%{opacity:0}} .sweep{height:3px; width:100%; max-width:640px; margin:16px 0 36px; border-radius:2px; overflow:hidden; background:rgba(242,244,255,.1)} .sweep i{display:block; height:100%; width:100%; transform-origin:left; background:linear-gradient(90deg,var(--violet),var(--magenta),var(--coral),var(--amber),var(--cyan)); animation:load 1.1s cubic-bezier(.2,.8,.2,1) .2s both} @keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}} .pill svg{flex:none; opacity:.5} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .brand{font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,10.4vw,9.5rem); line-height:.88; letter-spacing:-.05em; margin:0 0 26px; text-transform:lowercase} .brand .word{display:block} .brand .ch{display:inline-block; color:var(--c); animation:rise .8s cubic-bezier(.16,.84,.3,1) both; animation-delay:calc(var(--i) * 34ms + 260ms); transition:transform .3s cubic-bezier(.16,.84,.3,1), filter .3s ease} .brand:hover .ch{transform:translateY(-8px); filter:brightness(1.3)} .brand:hover .ch:nth-child(even){transform:translateY(8px)} @keyframes rise{from{opacity:0; transform:translateY(.35em) rotate(-3deg)}to{opacity:1; transform:none}} .lede{font-size:clamp(1.1rem,2vw,1.45rem); max-width:660px; line-height:1.4; color:#E4E7FF; animation:fade .8s ease .95s both} .lede b{font-weight:600; color:var(--amber)} /* ── the split selector: the signature of this page ── */ .picker{margin:40px 0 0; animation:fade .8s ease 1.1s both} .picker-label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px} .opts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:760px} .opt{ position:relative; text-align:left; cursor:pointer; font-family:var(--body); background:rgba(242,244,255,.04); color:var(--paper); border:1.5px solid rgba(242,244,255,.16); border-radius:var(--r); padding:20px 18px 18px; transition:border-color .18s ease, background .18s ease, transform .18s ease; } .opt:hover{transform:translateY(-3px); border-color:rgba(242,244,255,.4)} .opt .name{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:9px} .opt .what{font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; display:block; line-height:1.15} .opt .amt{font-family:var(--mono); font-size:14px; color:var(--muted); display:block; margin-top:10px} .opt[aria-pressed="true"]{background:rgba(0,229,208,.1); border-color:var(--cyan)} .opt[aria-pressed="true"] .amt{color:var(--cyan)} .opt .best{position:absolute; top:-9px; right:14px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; background:var(--amber); color:#180808; padding:3px 9px; border-radius:999px} .hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px} .headline-price{font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.02em} .headline-price small{font-family:var(--mono); font-weight:400; font-size:13px; color:var(--muted); letter-spacing:0; margin-left:10px} /* ── facts ── */ .facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(242,244,255,.14); border:1px solid rgba(242,244,255,.14); border-radius:var(--r); overflow:hidden; margin:96px 0 110px} .fact{background:var(--ink-2); padding:26px 24px 24px; position:relative} .fact::before{content:""; position:absolute; top:0; left:0; width:44px; height:3px; background:var(--c)} .fact dt{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px} .fact dd{margin:0; font-family:var(--display); font-weight:700; font-size:1.45rem; letter-spacing:-.02em} .section{padding:0 0 110px} .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px} .card{border-radius:var(--r); padding:30px 26px 26px; color:#141026; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .2s ease} .card:hover{transform:translateY(-5px)} .card .tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.72} .card h3{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.025em; line-height:1.05; margin:14px 0 8px} .card p{font-size:15px; margin:0; opacity:.82} .card .line{font-family:var(--mono); font-size:13px; margin-top:20px; padding-top:14px; border-top:1.5px solid rgba(20,16,38,.25)} .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px} .step{border-top:2px solid var(--c); padding-top:20px} .step .num{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--c)} .step h3{font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; margin:10px 0 8px} .step p{color:#CFD5F5; font-size:15px; margin:0} .offer{background:var(--ink-2); border:1px solid rgba(242,244,255,.14); border-radius:22px; padding:44px; display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start} .offer h2{margin-bottom:12px} .offer .note{color:var(--muted); font-size:15px; margin:0} .chosen{margin-top:22px; padding:16px 18px; border-radius:12px; background:rgba(0,229,208,.09); border:1px solid rgba(0,229,208,.35); font-family:var(--mono); font-size:13.5px; color:var(--paper)} .chosen b{color:var(--cyan); font-weight:500} .field{margin-bottom:16px} .field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px} .field input,.field textarea{width:100%; background:var(--ink); color:var(--paper); border:1.5px solid rgba(242,244,255,.18); border-radius:10px; padding:13px 15px; font-family:var(--body); font-size:16px; transition:border-color .16s ease} .field textarea{resize:vertical; min-height:92px} .field input:focus,.field textarea:focus{border-color:var(--cyan); outline:none} .row{display:grid; grid-template-columns:1fr 1fr; gap:16px} .sent{display:none; border:1.5px solid var(--cyan); border-radius:14px; padding:26px; background:rgba(0,229,208,.08)} .sent h3{font-family:var(--display); font-weight:800; font-size:1.5rem; margin:0 0 8px; color:var(--cyan)} .sent p{margin:0; color:#CFD5F5; font-size:15px} .is-sent form{display:none} .is-sent .sent{display:block} footer{border-top:1px solid rgba(242,244,255,.14); padding:30px 0 44px; margin-top:110px} .foot{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-family:var(--mono); font-size:12.5px; color:var(--muted)} .foot a{color:var(--cyan); text-decoration:none} .foot a:hover{text-decoration:underline} @media(max-width:900px){ .facts{grid-template-columns:repeat(2,1fr)} .cards,.steps{grid-template-columns:1fr} .opts{grid-template-columns:1fr} .offer{grid-template-columns:1fr; gap:32px; padding:32px 26px} } @media(max-width:560px){ body{font-size:16px} .wrap{padding:0 20px} .facts{grid-template-columns:1fr} .row{grid-template-columns:1fr} .hero{padding:34px 0 62px} .pill{font-size:11.5px; padding:9px 14px} .bar{font-size:11.5px; padding:10px 15px; gap:7px} .btn{width:100%; justify-content:center} } @media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} .aurora{opacity:.4} }