/* ================================================================
   GAMEVAULT — style.css
   "Vault Protocol" Design System
   Deep navy · Refined teal · Amber trust gold
   Rajdhani display · Outfit body
   Built by NexKeys Agency | nexkeysagency.netlify.app
================================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:       #030B18;
  --bg-deep:  #020810;
  --surf:     #071325;
  --surf2:    #0C1C35;
  --surf3:    #102240;

  /* Brand accents */
  --teal:      #00E5C8;
  --teal-hi:   #33EDD4;
  --teal-glow: rgba(0, 229, 200, 0.35);
  --teal-lo:   rgba(0, 229, 200, 0.08);
  --teal-mid:  rgba(0, 229, 200, 0.18);

  --emerald:    #00B37D;
  --emerald-lo: rgba(0, 179, 125, 0.1);

  --gold:       #F0B429;
  --gold-lo:    rgba(240, 180, 41, 0.1);
  --gold-glow:  rgba(240, 180, 41, 0.3);

  --danger:     #EF4444;

  /* Typography */
  --tx:  #E8EDF5;
  --tx2: #7A91B0;
  --tx3: #3E5272;

  /* Borders */
  --bdr:  rgba(0, 229, 200, 0.12);
  --bdr2: rgba(255, 255, 255, 0.06);

  /* Fonts */
  --f-display: 'Rajdhani', 'Poppins', sans-serif;
  --f-body:    'Outfit', 'Poppins', sans-serif;

  /* Layout */
  --container: 1140px;
  --nav-h:     64px;
  --r:         8px;
  --r2:        14px;
  --r3:        20px;

  /* Shadows */
  --sh-sm:   0 2px 12px rgba(2, 8, 16, 0.6);
  --sh-md:   0 8px 40px rgba(2, 8, 16, 0.8);
  --sh-teal: 0 0 30px var(--teal-glow);
  --sh-gold: 0 0 24px var(--gold-glow);

  /* Motion */
  --ease: cubic-bezier(.22, .68, 0, 1.2);
  --out:  cubic-bezier(.16, 1, .3, 1);
  --dur:  .25s;
}


/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  background:  var(--bg);
  color:       var(--tx);
  line-height: 1.65;
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: var(--f-body);
  cursor: pointer;
  border: none;
  background: none;
}

img, svg { display: block; }
ul       { list-style: none; }

/* Scrollbar */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 99px; }


/* ── PRELOADER ────────────────────────────────────────────────── */
/*
  ⚠️  FUNCTIONAL HOOKS:
  #preloader      — script.js adds .fade-out on window load
  .loader         — original spinner (kept exact animation name "spin")
  .loading-text   — original text element
*/
#preloader {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      var(--bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      opacity .6s ease, visibility .6s ease;
}

#preloader.fade-out {
  opacity:    0;
  visibility: hidden;
}

.preloader-core {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
}

.preloader-icon {
  animation: preloaderBob 2s ease-in-out infinite;
}

@keyframes preloaderBob {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-8px); }
}

/* ⚠️ Original .loader — spin keyframe name preserved */
.loader {
  border:        3px solid rgba(0, 229, 200, 0.15);
  border-top:    3px solid var(--teal);
  border-radius: 50%;
  width:         44px;
  height:        44px;
  animation:     spin 1s linear infinite;
}

/* ⚠️ Original @keyframes spin — untouched */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ⚠️ Original .loading-text — styling upgraded, class preserved */
.loading-text {
  font-family: var(--f-display);
  font-size:   14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:   var(--teal);
  opacity: .8;
}


/* ── NAVIGATION ───────────────────────────────────────────────── */
.site-nav {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    800;
  height:     var(--nav-h);
  background: rgba(3, 11, 24, 0.75);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
}

.site-nav.scrolled {
  background:    rgba(3, 11, 24, 0.97);
  border-color:  var(--bdr);
  box-shadow:    var(--sh-md);
}

.nav-inner {
  max-width: var(--container);
  margin:    0 auto;
  padding:   0 32px;
  height:    100%;
  display:   flex;
  align-items:     center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.nav-logo {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-family: var(--f-display);
  font-size:   22px;
  font-weight: 700;
  letter-spacing: .06em;
  color:  var(--tx);
  flex-shrink: 0;
}

.nav-logo svg { color: var(--teal); }
.nav-logo span { color: var(--teal); }

/* Links */
.nav-links {
  display: flex;
  gap:     4px;
  flex:    1;
  justify-content: center;
}

.nav-links .nl {
  font-family: var(--f-body);
  font-size:   13px;
  font-weight: 500;
  padding:     6px 14px;
  border-radius: 6px;
  color:       var(--tx2);
  transition:  all var(--dur);
  position:    relative;
}

.nav-links .nl:hover,
.nav-links .nl.active {
  color:      var(--tx);
  background: var(--teal-lo);
}

.nav-links .nl.active::after {
  content:       '';
  position:      absolute;
  bottom:        2px;
  left:          50%;
  transform:     translateX(-50%);
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--teal);
}

/* Nav CTA — reuses .btn base, see button section */
.nav-cta-btn {
  flex-shrink: 0;
}

/* Burger */
.nav-burger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        6px;
  border-radius:  6px;
  flex-shrink:    0;
}

.nav-burger span {
  display:       block;
  width:         20px;
  height:        2px;
  background:    var(--tx2);
  border-radius: 99px;
  transition:    all var(--dur);
}

.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  display:        none;
  flex-direction: column;
  padding:        14px 24px 20px;
  border-top:     1px solid var(--bdr2);
  background:     rgba(3, 11, 24, 0.98);
}

.mobile-drawer.open { display: flex; }

.md-link, .md-cta {
  font-size:      14px;
  font-weight:    500;
  padding:        11px 12px;
  border-radius:  6px;
  color:          var(--tx2);
  transition:     all var(--dur);
}

.md-link:hover {
  color:      var(--tx);
  background: var(--teal-lo);
}

.md-cta {
  margin-top:  8px;
  color:       var(--teal);
  font-weight: 600;
  border:      1px solid var(--teal-mid);
  text-align:  center;
  border-radius: var(--r);
}

.md-cta:hover {
  background: var(--teal-lo);
}


/* ── BUTTONS ──────────────────────────────────────────────────── */
/*
  ⚠️  .btn — original class preserved.
  Additional modifiers (.btn-primary, .btn-ghost, .nav-cta-btn)
  extend the base without breaking any existing .btn usage.
*/
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       11px 24px;
  border-radius: var(--r);
  font-family:   var(--f-display);
  font-size:     14px;
  font-weight:   700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition:    all var(--dur) var(--ease);
  position:      relative;
  overflow:      hidden;
}

/* Primary CTA — teal fill */
.btn-primary {
  background:  var(--teal);
  color:       var(--bg);
  box-shadow:  var(--sh-teal);
}

.btn-primary:hover {
  background:  var(--teal-hi);
  transform:   translateY(-2px);
  box-shadow:  0 0 48px var(--teal-glow), 0 10px 28px rgba(0,0,0,.5);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color:      var(--tx2);
  border:     1px solid var(--bdr2);
}

.btn-ghost:hover {
  border-color: var(--teal-mid);
  color:        var(--tx);
}

/* Nav CTA — compact teal outline */
.nav-cta-btn {
  padding:    8px 18px;
  font-size:  12px;
  background: var(--teal-lo);
  color:      var(--teal);
  border:     1px solid var(--teal-mid);
}

.nav-cta-btn:hover {
  background: var(--teal);
  color:      var(--bg);
}

/* ⚠️ Original header .btn (no modifier) — fallback to styled primary */
header .btn:not(.btn-primary):not(.btn-ghost):not(.nav-cta-btn) {
  background:  var(--teal);
  color:       var(--bg);
  box-shadow:  var(--sh-teal);
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:     12px 28px;
  border-radius: 30px; /* original border-radius preserved */
}

header .btn:not(.btn-primary):not(.btn-ghost):not(.nav-cta-btn):hover {
  background: var(--teal-hi);
  transform:  scale(1.05);
  box-shadow: 0 0 20px var(--teal-glow);
}


/* ── HERO / HEADER ────────────────────────────────────────────── */
/*
  ⚠️  .glitch — original animation hooks preserved exactly
  ⚠️  .typing-text + ::after — original blink preserved
  ⚠️  @keyframes glitchTop, glitchBottom, glow, blink — all kept
*/
header {
  position:   relative;
  overflow:   hidden;
  min-height: 100vh;
  display:    flex;
  align-items:    center;
  justify-content: center;
  padding:    calc(var(--nav-h) + 60px) 32px 80px;
  text-align: center;
  /* Original gradient direction kept, colors refined */
  background: linear-gradient(135deg, #030B18 0%, #071325 50%, #0C1C35 100%);
  border-bottom: 1px solid var(--bdr);
}

/* Decorative grid overlay */
.hero-grid {
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(rgba(0,229,200,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,200,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Ambient glow orbs */
.hero-orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(100px);
  pointer-events: none;
  animation:     orbDrift 10s ease-in-out infinite;
}

.orb-1 {
  width:      500px;
  height:     500px;
  background: rgba(0, 229, 200, 0.06);
  top:  -120px;
  left: -80px;
}

.orb-2 {
  width:      400px;
  height:     400px;
  background: rgba(240, 180, 41, 0.05);
  bottom: -80px;
  right:  -60px;
  animation-delay: -5s;
}

@keyframes orbDrift {
  0%,100% { transform: translate(0, 0); }
  50%      { transform: translate(20px, 20px); }
}

.hero-inner {
  position:       relative;
  z-index:        2;
  max-width:      720px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
}

/* Trust badge */
.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 18px;
  border-radius: 99px;
  border:        1px solid var(--teal-mid);
  background:    var(--teal-lo);
  font-family:   var(--f-body);
  font-size:     12px;
  font-weight:   600;
  letter-spacing: .06em;
  color:         var(--teal);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hb-pulse {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--teal);
  animation:     pulseRing 2s ease-in-out infinite;
}

@keyframes pulseRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,200,.6); }
  50%     { box-shadow: 0 0 0 6px rgba(0,229,200,0); }
}

/* ⚠️ Original .glitch — all properties preserved */
.glitch {
  position:    relative;
  color:       #00ffe0; /* original color */
  font-family: var(--f-display);
  font-weight: 700;
  font-size:   clamp(3rem, 8vw, 5.5rem);
  letter-spacing: -.01em;
  line-height: 1;
  margin-bottom: 16px;
  /* original text-shadow */
  text-shadow: 0 0 5px #00ffe0, 0 0 10px #00ffe0, 0 0 20px #00ffe0;
}

/* ⚠️ Original glitch pseudo — untouched */
.glitch::before,
.glitch::after {
  content:  attr(data-text);
  position: absolute;
  left:     0;
  width:    100%;
  overflow: hidden;
  background: var(--bg); /* matches body bg */
}

.glitch::before {
  top:         -2px;
  text-shadow: -2px 0 red;
  animation:   glitchTop 2s infinite linear alternate-reverse;
}

.glitch::after {
  top:         2px;
  text-shadow: -2px 0 blue;
  animation:   glitchBottom 2s infinite linear alternate-reverse;
}

/* ⚠️ Original keyframes — untouched */
@keyframes glitchTop {
  0%   { clip: rect(0, 9999px, 0, 0); }
  100% { clip: rect(0, 9999px, 100%, 0); }
}

@keyframes glitchBottom {
  0%   { clip: rect(100%, 9999px, 100%, 0); }
  100% { clip: rect(0, 9999px, 100%, 0); }
}

@keyframes glow {
  0%   { text-shadow: 0 0 5px #00ffe0; }
  50%  { text-shadow: 0 0 20px #00ffe0, 0 0 30px #1de9b6; }
  100% { text-shadow: 0 0 5px #00ffe0; }
}

/* ⚠️ Original .typing-text — preserved */
.typing-text {
  font-family: var(--f-body);
  font-size:   clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 500;
  color:       #1de9b6; /* original color */
  margin-bottom: 20px;
  height:      2.2rem;
  min-height:  2.2rem;
}

/* ⚠️ Original .typing-text::after cursor blink — untouched */
.typing-text::after {
  content: "|";
  animation: blink 1s step-start infinite;
  margin-left: 4px;
  color: #00ffe0;
}

/* ⚠️ Original @keyframes blink — untouched */
@keyframes blink {
  50% { opacity: 0; }
}

/* Hero sub-tagline */
.hero-sub {
  font-size:     16px;
  color:         var(--tx2);
  line-height:   1.75;
  max-width:     540px;
  margin-bottom: 32px;
}

/* CTA row */
.hero-actions {
  display:       flex;
  gap:           12px;
  flex-wrap:     wrap;
  justify-content: center;
  margin-bottom: 44px;
}

/* Trust stat strip */
.hero-stats {
  display:     flex;
  align-items: center;
  gap:         0;
  background:  rgba(7, 19, 37, 0.8);
  border:      1px solid var(--bdr);
  border-radius: var(--r2);
  padding:     16px 28px;
  backdrop-filter: blur(8px);
}

.hs-item { text-align: center; padding: 0 24px; }

.hs-val {
  display:     block;
  font-family: var(--f-display);
  font-size:   22px;
  font-weight: 700;
  color:       var(--teal);
  line-height: 1;
}

.hs-lbl {
  font-size:      11px;
  color:          var(--tx3);
  font-weight:    500;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top:     4px;
  display:        block;
}

.hs-sep {
  width:      1px;
  height:     36px;
  background: var(--bdr);
  flex-shrink: 0;
}


/* ── SECTION SHARED STYLES ────────────────────────────────────── */
.info-section {
  padding: 96px 32px;
}

.alt-section {
  background: var(--surf);
  border-top:    1px solid var(--bdr2);
  border-bottom: 1px solid var(--bdr2);
}

.section-inner {
  max-width: var(--container);
  margin:    0 auto;
}

.section-head {
  text-align:    center;
  margin-bottom: 52px;
}

.section-eyebrow {
  display:        block;
  font-family:    var(--f-body);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--teal);
  margin-bottom:  12px;
}

.section-head h2 {
  font-family:    var(--f-display);
  font-size:      clamp(28px, 4vw, 44px);
  font-weight:    700;
  color:          var(--tx);
  letter-spacing: -.01em;
  line-height:    1.1;
  margin-bottom:  14px;
}

/* ⚠️ Original section h2 color — preserved via .accent override */
.accent { color: var(--teal); }

.section-sub {
  font-size:  16px;
  color:      var(--tx2);
  max-width:  500px;
  margin:     0 auto;
  line-height: 1.7;
}


/* ── HOW IT WORKS — STEPS LIST ────────────────────────────────── */
/*
  ⚠️ Original: section ul li with border-left + translateX hover
  Upgrade: numbered step cards — same hover transform preserved
*/
.steps-list {
  display:   flex;
  flex-direction: column;
  gap:       12px;
  max-width: 680px;
  margin:    0 auto;
}

.steps-list li {
  display:       flex;
  align-items:   center;
  gap:           20px;
  background:    var(--surf);
  border:        1px solid var(--bdr2);
  border-left:   3px solid var(--teal); /* ⚠️ original border-left preserved */
  padding:       20px 24px;
  border-radius: var(--r2);
  /* ⚠️ original transition preserved */
  transition:    transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ⚠️ Original translateX(10px) hover — preserved */
.steps-list li:hover {
  transform:    translateX(10px);
  border-color: var(--teal);
  box-shadow:   var(--sh-sm), -3px 0 0 var(--teal);
}

.step-num {
  font-family: var(--f-display);
  font-size:   28px;
  font-weight: 700;
  color:       var(--teal-mid);
  letter-spacing: -.02em;
  flex-shrink: 0;
  min-width:   42px;
  line-height: 1;
}

.step-body {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex:        1;
}

.step-icon {
  font-size:   24px;
  flex-shrink: 0;
}

.steps-list li p {
  font-size:   15px;
  color:       var(--tx2);
  line-height: 1.6;
}


/* ── WHY CHOOSE US — FEATURE GRID ────────────────────────────── */
.feature-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px;
  max-width:             860px;
  margin:                0 auto;
}

.feature-grid li {
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  background:    var(--surf2);
  border:        1px solid var(--bdr2);
  border-left:   3px solid var(--teal); /* original style */
  padding:       24px;
  border-radius: var(--r2);
  transition:    transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ⚠️ Original translateX hover — preserved */
.feature-grid li:hover {
  transform:    translateX(6px);
  box-shadow:   var(--sh-sm);
  border-color: var(--teal);
}

.feat-icon {
  font-size:   28px;
  flex-shrink: 0;
  line-height: 1;
}

.feat-body strong {
  display:     block;
  font-family: var(--f-display);
  font-size:   17px;
  font-weight: 700;
  color:       var(--tx);
  margin-bottom: 6px;
  letter-spacing: .02em;
}

.feat-body p {
  font-size:   14px;
  color:       var(--tx2);
  line-height: 1.6;
}


/* ── PAYMENT METHODS ──────────────────────────────────────────── */
.payment-list {
  display:   flex;
  flex-direction: column;
  gap:       12px;
  max-width: 600px;
  margin:    0 auto;
}

.payment-list li {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  background:      var(--surf);
  border:          1px solid var(--bdr2);
  border-left:     3px solid var(--teal); /* original style */
  padding:         18px 24px;
  border-radius:   var(--r2);
  transition:      transform 0.3s ease, border-color 0.3s ease;
}

.payment-list li:hover {
  transform:    translateX(10px); /* original hover */
  border-color: var(--teal);
}

.pay-left {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex:        1;
}

.pay-icon {
  font-size:   20px;
  flex-shrink: 0;
}

.pay-left strong {
  display:     block;
  font-family: var(--f-display);
  font-size:   16px;
  font-weight: 700;
  color:       var(--tx);
  letter-spacing: .02em;
}

.pay-sub {
  font-size: 12px;
  color:     var(--tx3);
  display:   block;
  margin-top: 2px;
}

/* Status badges */
.pay-badge {
  padding:       5px 14px;
  border-radius: 99px;
  font-family:   var(--f-body);
  font-size:     11px;
  font-weight:   700;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink:   0;
}

.live-badge {
  background: var(--emerald-lo);
  border:     1px solid rgba(0,179,125,.25);
  color:      var(--emerald);
}

.soon-badge {
  background: var(--gold-lo);
  border:     1px solid rgba(240,180,41,.2);
  color:      var(--gold);
}


/* ── CONTACT ──────────────────────────────────────────────────── */
/*
  ⚠️  class="contact" original — preserved.
  Upgraded interior, base class still maps.
*/
.contact {
  padding: 96px 32px;
}

/* ⚠️ Original .contact a color — preserved via contact-card */
.contact-cards {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
  max-width: 620px;
  margin:    0 auto;
}

.contact-card {
  flex:          1;
  min-width:     240px;
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       22px 24px;
  background:    var(--surf);
  border:        1px solid var(--bdr2);
  border-left:   3px solid var(--teal);
  border-radius: var(--r2);
  color:         var(--teal); /* ⚠️ original .contact a color */
  transition:    all 0.3s ease;
}

.contact-card:hover {
  transform:    translateX(6px); /* original hover style */
  border-color: var(--teal);
  box-shadow:   var(--sh-teal);
  text-decoration: underline; /* ⚠️ original hover */
}

.cc-icon { font-size: 26px; flex-shrink: 0; }

.cc-body {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1;
}

.cc-label {
  font-family: var(--f-display);
  font-size:   15px;
  font-weight: 700;
  color:       var(--tx);
  letter-spacing: .04em;
  display:     block;
}

.cc-val {
  font-size:  13px;
  color:      var(--teal);
  font-weight: 500;
}

.cc-arrow {
  font-size:   18px;
  color:       var(--tx3);
  transition:  transform var(--dur), color var(--dur);
  flex-shrink: 0;
}

.contact-card:hover .cc-arrow {
  transform: translateX(4px);
  color:     var(--teal);
}


/* ── TRADE REQUEST — GOOGLE FORM ──────────────────────────────── */
/*
  ⚠️  class="trade-request-section" — original CSS hook preserved
  ⚠️  iframe styling: box-shadow from original kept and enhanced
*/
.trade-request-section {
  padding:    96px 32px;
  background: var(--surf);
  border-top: 1px solid var(--bdr);
}

/* Trust chip row above form */
.form-trust {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             10px;
  margin-top:      24px;
}

.ft-chip {
  padding:        6px 16px;
  border-radius:  99px;
  background:     var(--teal-lo);
  border:         1px solid var(--teal-mid);
  font-family:    var(--f-body);
  font-size:      12px;
  font-weight:    600;
  color:          var(--teal);
  letter-spacing: .04em;
}

/* Form wrapper — provides a premium card around the iframe */
.form-wrapper {
  background:    var(--surf2);
  border:        1px solid var(--bdr);
  border-radius: var(--r3);
  overflow:      hidden;
  padding:       8px;
  margin-top:    40px;
  /* ⚠️ Original iframe box-shadow — preserved and enhanced */
  box-shadow: 0 0 20px rgba(0, 229, 200, 0.06), var(--sh-md);
}

/* ⚠️ Original iframe — border, border-radius, box-shadow preserved */
iframe {
  border:        none;
  border-radius: var(--r2);
  box-shadow:    0 0 20px #00ffe040; /* ⚠️ original value */
  width:         100%;
  display:       block;
  background:    #fff;
}


/* ── FOOTER ───────────────────────────────────────────────────── */
/*
  ⚠️  Original background, border-top, color, font-size preserved
*/
footer {
  background:  #0a0e17; /* ⚠️ original value */
  border-top:  1px solid #00ffe050; /* ⚠️ original value */
  padding:     0;
}

.footer-inner {
  max-width: var(--container);
  margin:    0 auto;
  padding:   60px 32px 40px;
  display:   grid;
  grid-template-columns: 1.4fr 1fr;
  gap:       60px;
  border-bottom: 1px solid var(--bdr2);
}

/* Footer logo */
.footer-logo {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-family: var(--f-display);
  font-size:   22px;
  font-weight: 700;
  letter-spacing: .06em;
  color:       var(--tx);
  margin-bottom: 14px;
}

.footer-logo svg  { color: var(--teal); }
.footer-logo span { color: var(--teal); }

.footer-tagline {
  font-size:   14px;
  color:       var(--tx3);
  line-height: 1.75;
}

/* Footer link columns */
.footer-links-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   28px;
}

.flg-col h4 {
  font-family:    var(--f-display);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--tx2);
  margin-bottom:  16px;
}

.flg-col ul {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.flg-col ul li a {
  font-size:  13px;
  color:      var(--tx3);
  transition: color var(--dur);
}

.flg-col ul li a:hover {
  color: var(--teal);
}

/* Footer bottom bar */
.footer-bottom {
  max-width:   var(--container);
  margin:      0 auto;
  padding:     20px 32px;
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         6px;
  /* ⚠️ Original footer text styling */
  text-align:  center;
  font-size:   0.9rem; /* ⚠️ original */
  color:       #aaa;   /* ⚠️ original */
}

.footer-legal {
  font-size: 12px;
  color:     var(--tx3);
  max-width: 640px;
}

/* NexKeys Agency credit */
.footer-nexkeys {
  font-family:    var(--f-body);
  font-size:      13px;
  color:          var(--tx3);
  padding-top:    6px;
  border-top:     1px solid var(--bdr2);
  width:          100%;
  text-align:     center;
}

.footer-nexkeys a {
  color:      var(--teal);
  font-weight: 700;
  transition: color var(--dur);
}

.footer-nexkeys a:hover {
  color: var(--teal-hi);
}


/* ── AOS OVERRIDES ────────────────────────────────────────────── */
/* ⚠️ Original AOS override block — preserved */
[data-aos] {
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos].aos-animate {
  opacity: 1;
}


/* ── RESPONSIVE — TABLET (≤ 1023px) ──────────────────────────── */
@media (max-width: 1023px) {
  .nav-links    { display: none; }
  .nav-cta-btn  { display: none; }
  .nav-burger   { display: flex; }

  header { padding: calc(var(--nav-h) + 48px) 24px 64px; }

  .hero-stats {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .hs-sep { width: 80px; height: 1px; }
  .hs-item { padding: 0; }

  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}


/* ── RESPONSIVE — MOBILE (≤ 767px) ───────────────────────────── */
@media (max-width: 767px) {
  .nav-inner { padding: 0 20px; }

  header { padding: calc(var(--nav-h) + 32px) 20px 48px; }

  .info-section,
  .contact,
  .trade-request-section { padding: 64px 20px; }

  .section-head { margin-bottom: 36px; }

  .feature-grid { grid-template-columns: 1fr; }

  .contact-cards { flex-direction: column; }

  .hero-actions { flex-direction: column; align-items: center; }

  .footer-inner  { padding: 44px 20px 32px; }
  .footer-bottom { padding: 16px 20px; }
  .footer-links-grid { grid-template-columns: 1fr; gap: 20px; }

  /* ⚠️ Original @media (max-width: 768px) rules — preserved */
  header h1  { font-size: 2.2rem; }
  .btn       { font-size: 0.9rem; padding: 0.6rem 1rem; }
}


/* ── RESPONSIVE — SMALL MOBILE (≤ 400px) ─────────────────────── */
@media (max-width: 400px) {
  .hero-stats { padding: 16px 12px; }
  .steps-list li { padding: 16px; gap: 12px; }
  .payment-list li { padding: 14px 16px; }
  .form-trust { gap: 8px; }
  .ft-chip { font-size: 11px; padding: 5px 12px; }
}