:root {
  --ink: #f6fbff;
  --ink-soft: rgba(225, 239, 248, .7);
  --paper: #07131e;
  --white: #fff;
  --line: rgba(255, 255, 255, .14);
  --cyan: #4ad7ff;
  --aqua: #6fffd2;
  --mint: rgba(98, 255, 208, .18);
  --ice: rgba(74, 215, 255, .16);
  --lilac: rgba(161, 140, 255, .22);
  --navy: #061621;
  --display: "SF Pro Display", "Avenir Next", "Noto Sans SC", "PingFang SC", sans-serif;
  --body: "SF Pro Text", "Avenir Next", "Noto Sans SC", "PingFang SC", sans-serif;
  --shadow: 0 32px 90px rgba(0, 0, 0, .36);
  --glass: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
  --glass-border: rgba(255,255,255,.2);
}

html { background: #07131e; }
body {
  background:
    radial-gradient(circle at 78% 8%, rgba(69, 211, 255, .13), transparent 25rem),
    radial-gradient(circle at 14% 26%, rgba(102, 255, 208, .08), transparent 25rem),
    #07131e;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

.site-header { padding: .8rem 0; }
.site-header::before {
  content: "";
  position: absolute;
  inset: .5rem max(1rem, calc((100% - 1220px)/2)) 0;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
}
.site-header.is-scrolled { padding: .55rem 0; background: transparent; box-shadow: none; }
.brand-word, .site-nav a, .language-switch { color: #f7fbff; }
.brand-mark { box-shadow: 0 0 30px rgba(94, 234, 255, .26); }
.site-nav a { color: rgba(240,249,255,.7); }
.site-nav a:hover { color: #fff; }
.button { color: #04212a; background: linear-gradient(135deg, #7bffdb, #58dcff); box-shadow: 0 10px 32px rgba(76,218,255,.22); }
.button:hover { color: #03171f; background: linear-gradient(135deg, #a2ffe6, #8be9ff); }

.hero {
  min-height: 100svh;
  padding-top: 9.5rem;
  background:
    radial-gradient(circle at 77% 31%, rgba(80, 224, 255, .2), transparent 24rem),
    radial-gradient(circle at 62% 73%, rgba(107, 255, 207, .11), transparent 25rem),
    radial-gradient(circle at 94% 75%, rgba(154, 120, 255, .18), transparent 25rem),
    linear-gradient(155deg, #06111b 0%, #0a1d2c 54%, #06131d 100%);
}
.hero::before {
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
}
.hero::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  top: 12%;
  right: 2%;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(82,216,255,.5), rgba(118,255,211,.12), rgba(168,134,255,.38), rgba(82,216,255,.5));
  filter: blur(80px);
  opacity: .3;
  animation: glassDrift 12s ease-in-out infinite alternate;
}
.hero-grid { min-height: 690px; }
.hero-copy { position: relative; z-index: 4; }
.eyebrow {
  color: rgba(236,249,255,.82);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.17);
  box-shadow: inset 0 1px rgba(255,255,255,.16);
}
.eyebrow-dot { background: #76ffda; box-shadow: 0 0 0 6px rgba(118,255,218,.1), 0 0 24px #76ffda; }
h1, h2 { color: #f8fbff; letter-spacing: -.065em; }
h1 { font-weight: 650; }
h1 em, h2 em {
  color: transparent;
  background: linear-gradient(110deg, #f8ffff 0%, #71f6d2 45%, #62d9ff 78%, #c3b5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-lead { color: rgba(225,239,248,.7); }
.play-button {
  color: #05202a;
  background: linear-gradient(135deg, rgba(133,255,222,.98), rgba(81,210,255,.94));
  border-color: rgba(255,255,255,.44);
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 18px 55px rgba(63,208,255,.22);
}
.play-button:hover { color: #03171f; background: linear-gradient(135deg, #a4ffe6, #8ae8ff); }
.hero-text-link { color: rgba(231,246,255,.75); }
.hero-text-link span:last-child { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.store-badge {
  color: rgba(238,248,255,.66);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.13);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.store-badge--live { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); }
.store-badge--live:hover { background: rgba(255,255,255,.24); }
.phone {
  padding: 7px;
  background: linear-gradient(145deg, #263541, #070b0e 45%, #2d414c);
  border-color: rgba(255,255,255,.38);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 35px 100px rgba(0,0,0,.5), 0 0 70px rgba(76,218,255,.12);
}
.floating-note {
  color: #f5fbff;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 20px 60px rgba(0,0,0,.3);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.floating-note span { color: #b7ffe9; background: rgba(104,255,211,.15); }
.hero-marquee { color: rgba(223,244,255,.08); }

.section { position: relative; }
.features, .security, .faq { background: transparent; }
.section-index, .kicker { color: rgba(116,227,255,.74); }
.section-heading > p, .preview-heading > p, .process-copy > p, .security-copy > p, .faq-heading > p { color: var(--ink-soft); }
.feature-card {
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 26px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.feature-card::before { background: radial-gradient(circle, rgba(104,227,255,.28), transparent 68%); }
.feature-card--mint { background: linear-gradient(145deg, rgba(100,255,210,.15), rgba(255,255,255,.05)); }
.feature-card--dark { background: linear-gradient(145deg, rgba(114,153,255,.18), rgba(255,255,255,.045)); }
.feature-card--wallet { background: linear-gradient(145deg, rgba(175,142,255,.17), rgba(255,255,255,.05)); }
.feature-card p, .security-list p, .faq-answer { color: var(--ink-soft); }
.feature-icon, .rate-visual, .wallet-chip { color: #f6fbff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); }
.rate-visual i { color: #7bffda; }

.process { background: linear-gradient(145deg, rgba(12,35,51,.98), rgba(7,19,30,.98)); }
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 28%, rgba(102,255,210,.11), transparent 26rem), radial-gradient(circle at 90% 74%, rgba(80,216,255,.1), transparent 25rem);
}
.process-list li { border-color: rgba(255,255,255,.12); }
.step-number { color: #83e9ff; }
.step-icon { color: #04202a; background: linear-gradient(135deg, #7cffd8, #5cddff); }
.text-link { color: #8effdc; border-color: rgba(142,255,220,.5); }

.preview { background: linear-gradient(180deg, #091b29, #07131e); }
.preview-card {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 28px 70px rgba(0,0,0,.3);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.preview-card--home { background: linear-gradient(155deg, rgba(108,255,210,.2), rgba(255,255,255,.05)); }
.preview-card--sell { background: linear-gradient(155deg, rgba(82,213,255,.21), rgba(255,255,255,.05)); }
.preview-card--wallet { background: linear-gradient(155deg, rgba(174,142,255,.2), rgba(255,255,255,.05)); }

.security-ring { border-color: rgba(105,238,255,.28); box-shadow: 0 0 0 45px rgba(70,210,255,.05), 0 0 0 90px rgba(115,255,214,.025); }
.security-ring span { color: transparent; background: linear-gradient(145deg, #efffff, #61dfff 54%, #85ffdc); -webkit-background-clip: text; background-clip: text; }
.security-list li, .faq-list, .faq-item { border-color: rgba(255,255,255,.12); }
.faq-item button { color: #f4faff; }
.faq-item button i { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.faq-item button i::before, .faq-item button i::after { background: #eaf8ff; }

.waitlist-section {
  background: radial-gradient(circle at 75% 20%, rgba(104,255,211,.18), transparent 24rem), linear-gradient(145deg, #0c2938, #071722);
  border-block: 1px solid rgba(255,255,255,.1);
}
.waitlist-grid > div, .waitlist-form--footer {
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 28px 70px rgba(0,0,0,.24);
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
}
.play-button--light { color: #04212b; background: linear-gradient(135deg, #9bffe2, #7ee4ff); }
.input-shell { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.17); box-shadow: inset 0 1px rgba(255,255,255,.12); }
.input-shell input { color: #fff; }
.input-shell input::placeholder { color: rgba(224,240,248,.5); }
.input-shell button { color: #05202a; background: linear-gradient(135deg, #78ffda, #62ddff); }
.site-footer { color: rgba(224,240,248,.7); background: #050f17; }
.footer-top p, .footer-bottom { color: rgba(224,240,248,.55); }

@keyframes glassDrift { to { transform: translate3d(-8%, 7%, 0) scale(1.08); } }

@media (max-width: 860px) {
  .site-header { background: transparent; backdrop-filter: none; }
  .site-header::before { inset-inline: .65rem; border-radius: 1.3rem; }
  .nav-toggle { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
  .nav-toggle span:not(.sr-only) { background: #fff; }
  .site-nav { color: #fff; background: rgba(8,25,37,.88); border-color: rgba(255,255,255,.15); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
}

@media (max-width: 560px) {
  .hero { padding-top: 6.5rem; background: radial-gradient(circle at 50% 36%, rgba(77,219,255,.2), transparent 20rem), radial-gradient(circle at 82% 68%, rgba(151,122,255,.17), transparent 19rem), #07131e; }
  .hero::after { width: 270px; height: 270px; top: 37%; right: -35%; filter: blur(65px); }
  .hero-copy { padding: 1.1rem .15rem 0; }
  h1 { max-width: 10ch; font-size: clamp(3rem, 14vw, 4rem); }
  .hero-lead { color: rgba(228,242,250,.7); }
  .hero-visual { min-height: 530px; }
  .hero-visual .phone--front { width: min(260px, 72vw); }
  .floating-note { background: rgba(21,45,59,.62); }
  .store-row { align-items: stretch; }
  .store-badge { border-radius: 16px; }
  .section { padding: 4.5rem 0; }
  .section-heading h2, .process h2, .preview h2, .security h2, .faq h2, .waitlist-section h2 { font-size: clamp(2.65rem, 13vw, 3.8rem); }
  .feature-card { min-height: 300px; border-radius: 1.8rem; }
  .preview-card { border-radius: 2rem; }
  .waitlist-grid > div, .waitlist-form--footer { border-radius: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}