@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; font-family: Manrope, Arial, sans-serif; background: #041b45; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: #fff; }
.site-shell { min-height: 100svh; position: relative; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.backdrop { position: absolute; inset: 0; z-index: -2; background: url('assets/background.jpg') center 44% / cover no-repeat; transform: scale(1.03); }
.backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 10, 32, .82) 0%, rgba(2, 16, 54, .52) 42%, rgba(2, 13, 45, .25) 100%), linear-gradient(0deg, rgba(1, 8, 25, .92) 0%, transparent 38%); }
.nav { width: min(1240px, calc(100% - 48px)); margin: 0 auto; height: 102px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .18em; font-size: 19px; }
.brand img { width: 46px; height: 46px; object-fit: cover; border-radius: 13px; box-shadow: 0 8px 24px #031a55; }
.x-link { color: #fff; text-decoration: none; font-size: 25px; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transition: .2s; }
.x-link:hover { background: #fff; color: #061a43; }
.hero { width: min(1240px, calc(100% - 48px)); margin: auto; padding: 52px 0 42px; }
.eyebrow { color: #86dbff; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 800; margin: 0 0 16px; }
h1 { font-size: clamp(45px, 7vw, 88px); line-height: .99; letter-spacing: -.065em; max-width: 800px; margin: 0; text-wrap: balance; }
.lead { font-size: clamp(17px, 2vw, 22px); color: rgba(255,255,255,.82); line-height: 1.5; margin: 28px 0 34px; }
.countdown-panel { width: min(715px, 100%); background: rgba(3, 20, 59, .54); border: 1px solid rgba(151, 227, 255, .29); box-shadow: 0 24px 60px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(13px); border-radius: 20px; padding: 20px 24px 17px; }
.countdown-label { margin: 0 0 12px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #8adfff; }
.countdown { display: flex; align-items: center; gap: 19px; }
.time-unit { display: grid; min-width: 92px; }
.time-unit strong { font-family: 'DM Mono', monospace; color: #fff; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.1em; line-height: 1; text-shadow: 0 0 18px #2cc7ff; }
.time-unit span { font-size: 10px; text-transform: uppercase; color: #a7c5de; margin-top: 10px; letter-spacing: .13em; }
.countdown i { display: block; width: 1px; height: 44px; background: rgba(175,235,255,.3); }
.progress-track { height: 3px; background: rgba(255,255,255,.16); margin: 21px 0 7px; overflow: hidden; border-radius: 4px; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #44d8ff, #effcff); box-shadow: 0 0 12px #35d2ff; transition: width 1s linear; }
.progress-caption { display: flex; justify-content: space-between; color: #93bbd7; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; margin: 0; }
.actions { margin-top: 28px; display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
.buy-button, .outline-button { text-decoration: none; color: #031238; background: #fff; border-radius: 999px; padding: 15px 23px; font-size: 14px; font-weight: 800; box-shadow: 0 10px 35px rgba(21,181,255,.25); transition: transform .2s, box-shadow .2s; }
.buy-button:hover, .outline-button:hover { transform: translateY(-2px); box-shadow: 0 16px 45px rgba(21,181,255,.42); }
.buy-button span { margin-left: 7px; font-size: 17px; }
.contract { min-height: 47px; padding: 6px 15px 6px 8px; display: inline-flex; align-items: center; gap: 11px; border-radius: 999px; background: rgba(3, 17, 49, .6); border: 1px solid rgba(163,228,255,.29); }
.contract span { background: #137fc7; color: #e5f8ff; font-family: 'DM Mono', monospace; font-size: 11px; padding: 7px 8px; border-radius: 50%; }
.contract code { color: #bad5e9; font-family: 'DM Mono', monospace; font-size: 12px; }
footer { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 27px; display: flex; justify-content: space-between; gap: 16px; color: rgba(210,235,255,.7); font-size: 11px; }
footer p { margin: 0; } footer a { color: #e7f9ff; text-decoration: none; font-weight: 700; }
.buy-page { min-height: 100svh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #03112e, #07559b); }
.buy-card { max-width: 580px; border: 1px solid rgba(163,228,255,.29); border-radius: 28px; background: rgba(2, 20, 56, .82); padding: clamp(30px, 6vw, 56px); box-shadow: 0 32px 80px rgba(0,0,0,.36); }
.buy-card .brand { margin-bottom: 52px; }.buy-card h1 { font-size: clamp(42px, 7vw, 66px); }.buy-card > p:not(.eyebrow) { color: #bbd7eb; line-height: 1.7; margin: 23px 0; }.wide { display: flex; border-radius: 14px; margin: 25px 0 27px; }.outline-button { display: inline-block; background: transparent; color: white; border: 1px solid rgba(255,255,255,.55); box-shadow: none; }
@media (max-width: 640px) { .nav { height: 80px; width: min(100% - 32px, 1240px); }.hero { width: min(100% - 32px, 1240px); padding: 36px 0; }.countdown-panel { padding: 18px 16px; }.countdown { gap: 8px; justify-content: space-between; }.time-unit { min-width: auto; }.time-unit strong { font-size: 31px; }.countdown i { height: 34px; }.time-unit span { font-size: 8px; }.backdrop { background-position: 59% center; }.brand { font-size: 16px; }.brand img { width: 39px; height: 39px; } footer { width: min(100% - 32px, 1240px); font-size: 9px; } }