{} *{} #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:#14082E; --ink-2:#1E0F46; --paper:#F6F2FF; --muted:#A797D6; --violet:#7B2FF7; --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(38vw 38vw at 12% 18%, rgba(123,47,247,.85), transparent 62%), radial-gradient(34vw 34vw at 82% 8%, rgba(255,45,149,.70), transparent 60%), radial-gradient(30vw 30vw at 68% 66%, rgba(0,229,208,.42), transparent 62%), radial-gradient(26vw 26vw at 22% 82%, rgba(255,107,53,.45), transparent 62%); filter:blur(50px); opacity:.55; animation:drift 26s ease-in-out infinite alternate; } @keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}} .grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.16; 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:#1A0A0A; box-shadow:0 10px 30px -10px rgba(255,45,149,.8)} .btn-ghost{background:transparent; color:var(--paper); border:1.5px solid rgba(246,242,255,.28)} .btn:hover{transform:translateY(-2px)} .btn-ghost:hover{border-color:var(--cyan); color:var(--cyan)} .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{padding:52px 0 88px} .bar{display:inline-flex; align-items:center; gap:10px; max-width:100%; background:rgba(246,242,255,.07); border:1px solid rgba(246,242,255,.14); border-radius:999px; padding:11px 18px; font-family:var(--mono); font-size:14px; overflow:hidden; opacity:0; animation:fade .6s ease .1s both} .bar svg{flex:none; opacity:.55} .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}} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .sweep{height:3px; max-width:560px; margin:10px 0 32px; border-radius:2px; overflow:hidden; background:rgba(246,242,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)}} .domain{font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,8.4vw,8.5rem); line-height:.9; letter-spacing:-.045em; margin:0 0 28px; text-transform:lowercase} .domain .word{display:block} .domain .ch{display:inline-block; color:var(--c); animation:rise .8s cubic-bezier(.16,.84,.3,1) both; animation-delay:calc(var(--i) * 28ms + 300ms); transition:transform .3s cubic-bezier(.16,.84,.3,1), filter .3s ease} .domain:hover .ch{transform:translateY(-8px); filter:brightness(1.3)} .domain:hover .ch:nth-child(even){transform:translateY(8px)} @keyframes rise{from{opacity:0; transform:translateY(.35em) rotate(-3deg)}to{opacity:1; transform:none}} .tld{color:transparent; -webkit-text-stroke:2px var(--paper); animation:fade .8s ease 1s both} .lede{font-size:clamp(1.1rem,2vw,1.45rem); max-width:660px; line-height:1.4; color:#EDE6FF; animation:fade .8s ease 1s both} .lede b{font-weight:600; color:var(--amber)} .hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:32px; animation:fade .8s ease 1.15s both} .price{font-family:var(--mono); font-size:14px; color:var(--muted)} .price b{color:var(--paper); font-weight:500} .facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(246,242,255,.14); border:1px solid rgba(246,242,255,.14); border-radius:var(--r); overflow:hidden; margin:0 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:#1A0A2E; 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(26,10,46,.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:#D9CEF5; font-size:15px; margin:0} .offer{background:var(--ink-2); border:1px solid rgba(246,242,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} .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(246,242,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:#D9CEF5; font-size:15px} .is-sent form{display:none} .is-sent .sent{display:block} footer{border-top:1px solid rgba(246,242,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} .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 66px} .bar{font-size:11.5px; padding:10px 14px} .btn{width:100%; justify-content:center} } @media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} .aurora{opacity:.45} }