/* ════════════════════════════════════════════════════════════════════════
   ▓▓▓ SPX$ V9.0 — PREVIEW.HTML CYAN AEROSPACE EDITION ▓▓▓
   Color: cyan-blue-chrome | Font: Space Grotesk + Inter
   Function: UNCHANGED | Only visual replacement
   ════════════════════════════════════════════════════════════════════════ */

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

:root{
  --bg:#03050A;
  --bg-2:#050812;
  --panel:rgba(8,12,24,.72);
  --panel-2:rgba(11,16,32,.82);
  --line:rgba(0,217,255,.22);
  --line-strong:rgba(0,217,255,.48);
  --text:#EAF8FF;
  --muted:#AEB9C8;
  --muted-2:#7D8794;
  --cyan:#00D9FF;
  --blue:#2F80FF;
  --metal:#E7ECF3;
  --chrome:#B6C0CC;
  --gold:#C7A75B;
  --warning:#FFB020;
  --radius-xl:28px;
  --radius-lg:22px;
  --shadow:0 24px 80px rgba(0,157,255,.16);
  --container:1180px;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-head:'Space Grotesk','Inter',sans-serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ RESET ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}

body.body-bg,body{
  margin:0 !important;
  font-family:var(--font) !important;
  color:var(--text) !important;
  background:
    radial-gradient(circle at 76% 12%,rgba(0,217,255,.16),transparent 34%),
    radial-gradient(circle at 50% 100%,rgba(47,128,255,.25),transparent 34%),
    linear-gradient(180deg,#03050A 0%,#050812 45%,#03050A 100%) !important;
  background-attachment:fixed !important;
  overflow-x:hidden !important;
  font-size:16px;
  line-height:1.5;
  letter-spacing:0 !important;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(circle,rgba(234,248,255,.52) 1px,transparent 1.6px),
    linear-gradient(rgba(0,217,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,217,255,.035) 1px,transparent 1px);
  background-size:110px 110px,58px 58px,58px 58px;
  opacity:.46;
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.8) 42%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.8) 42%,transparent 100%);
}

body::after{
  content:'';
  position:fixed;
  left:-12vw;right:-12vw;bottom:-32vw;
  height:56vw;
  pointer-events:none;
  z-index:0;
  border-radius:50% 50% 0 0;
  background:
    radial-gradient(ellipse at top,rgba(0,217,255,.38),rgba(47,128,255,.09) 28%,transparent 54%),
    linear-gradient(180deg,rgba(234,248,255,.18),rgba(3,5,10,0) 42%);
  box-shadow:0 -20px 90px rgba(0,157,255,.24);
  opacity:.8;
}

/* HIDE ALL LEGACY DECORATIONS + DASH ARTIFACTS */
.meteor-shower,.planet-mars,.planet-saturn,.flying-rocket,.satellite,.spacex-rocket,
.orbit-ring,.grid-overlay,.trust-strip,.telemetry-panel,
.polygon-over-st1,.polygon-over-st2,.polygon-st1,.polygon-st2,.polygon-st3,
.polygon-over-right,.polygon-st4,.line-shape,.earth-horizon,
.dashborder,.section-title h2::before,.section-title h2::after,
.section-title2 h2::before,.section-title2 h2::after,
.section-title-dash::before,.section-title-dash::after,
.section-title-dash span.dashborder,
.section-title-dash span.dashborder::before,
.section-title-dash span.dashborder::after{
  display:none !important;
  content:none !important;
}

/* Wrap all sections behind decoration layer */
main,.body-bg > *{position:relative;z-index:1}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ TYPOGRAPHY ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head) !important;
  margin:0;
  letter-spacing:-.045em !important;
  color:var(--text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  text-transform:none !important;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width:min(var(--container),calc(100% - 40px)) !important;
  margin-inline:auto !important;
  max-width:var(--container) !important;
  padding:0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ NAVBAR ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
nav#mainNav,
nav.navbar,
.navbar-default{
  position:sticky !important;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(0,217,255,.16) !important;
  background:rgba(3,5,10,.72) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  box-shadow:0 12px 50px rgba(0,0,0,.36) !important;
  padding:0 !important;
}
nav#mainNav .container,
nav#mainNav .container-fluid{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(var(--container),calc(100% - 40px)) !important;
  margin-inline:auto !important;
}
nav#mainNav .navbar-brand{padding:0 !important;margin:0 !important}
nav#mainNav .navbar-brand img{
  height:38px !important;
  width:auto !important;
  filter:drop-shadow(0 0 14px rgba(0,217,255,.4));
}
nav#mainNav .navbar-nav{
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
}
nav#mainNav .navbar-nav .nav-item{padding:0 !important;margin:0 !important}
nav#mainNav .navbar-nav .nav-link{
  font-family:var(--font) !important;
  color:var(--muted) !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  transition:color .2s ease;
}
nav#mainNav .navbar-nav .nav-link:hover{color:var(--text) !important}
nav#mainNav .navbar-nav .nav-link::before,
nav#mainNav .navbar-nav .nav-link::after{display:none !important}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ BUTTONS — PILL CYAN ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn,.btn-gradient,.btn-gradient-o,a.btn-gradient,button.btn-gradient,
a.btn-gradient-o,button.btn-gradient-o,
.btn-round,.btn-radious,
.contact-from button[type=submit]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:48px !important;
  padding:0 22px !important;
  border-radius:999px !important;
  border:1px solid rgba(234,248,255,.14) !important;
  cursor:pointer !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease !important;
  font-family:var(--font) !important;
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  text-decoration:none !important;
  position:relative;
  overflow:hidden;
}
.btn:hover,.btn-gradient:hover,.btn-gradient-o:hover{transform:translateY(-2px) !important}
.btn-gradient,a.btn-gradient,button.btn-gradient,
.contact-from button[type=submit]{
  color:#031018 !important;
  background:linear-gradient(135deg,#00D9FF 0%,#2F80FF 48%,#EAF8FF 120%) !important;
  border-color:rgba(0,217,255,.8) !important;
  box-shadow:0 14px 42px rgba(0,157,255,.35),inset 0 1px 0 rgba(255,255,255,.45) !important;
  -webkit-text-fill-color:#031018 !important;
}
.btn-gradient-o,a.btn-gradient-o,button.btn-gradient-o{
  background:rgba(255,255,255,.045) !important;
  color:var(--text) !important;
  border:1px solid rgba(234,248,255,.14) !important;
  box-shadow:none !important;
  -webkit-text-fill-color:var(--text) !important;
}
.btn-gradient-o:hover{
  border-color:rgba(0,217,255,.45) !important;
  box-shadow:0 14px 40px rgba(0,217,255,.08) !important;
}
.btn-gradient i,.btn-gradient-o i,.btn-gradient svg,.btn-gradient-o svg{
  font-size:14px !important;
  width:14px;height:14px;
}
.btn-gradient::before,.btn-gradient::after{display:none !important}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ HERO — GRID LAYOUT + COIN ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.header-content{
  padding:86px 0 64px !important;
  min-height:calc(100vh - 72px) !important;
  display:grid !important;
  align-items:center !important;
  background:transparent !important;
  position:relative;
  overflow:visible;
}
.header-content::before,
.header-content::after{display:none !important}

.header-content > .container{
  display:grid !important;
  grid-template-columns:1.02fr .98fr !important;
  gap:46px !important;
  align-items:center !important;
}
.header-content .row{
  display:contents !important;
}

/* Hero text column */
.header-content .header-text,
.header-content .col-md-7,
.header-content .col-lg-7{
  position:relative;
  z-index:2;
}
.header-content .header-text{padding:0 !important;width:100% !important;max-width:none !important}

/* Live badge */
.header-content .live-badge,
.header-content .kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  color:#DFFBFF !important;
  font-family:var(--font) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  background:rgba(0,217,255,.08) !important;
  border:1px solid rgba(0,217,255,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  margin-bottom:22px !important;
  text-shadow:none !important;
  animation:none !important;
}
.header-content .live-badge::before{
  content:'' !important;
  width:8px !important;
  height:8px !important;
  border-radius:50%;
  background:var(--cyan) !important;
  box-shadow:0 0 0 6px rgba(0,217,255,.12),0 0 22px var(--cyan) !important;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 6px rgba(0,217,255,.12),0 0 22px var(--cyan)}
  50%{box-shadow:0 0 0 8px rgba(0,217,255,.18),0 0 30px var(--cyan)}
}

/* Hero headline */
.header-content .header-text h1{
  font-family:var(--font-head) !important;
  font-size:clamp(45px,7vw,82px) !important;
  font-weight:700 !important;
  line-height:.94 !important;
  letter-spacing:-.045em !important;
  color:var(--text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  margin:0 0 0 0 !important;
  max-width:760px;
  text-shadow:none !important;
  filter:none !important;
  text-transform:none !important;
}

/* Apply chrome gradient to last span/word in H1 if applicable */
.header-content .header-text h1 span:last-child,
.header-content .header-text h1 .chrome-text,
.header-content .header-text h1 strong{
  background:linear-gradient(100deg,#fff 0%,#B6C0CC 28%,#00D9FF 58%,#EAF8FF 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

.header-content .header-text p{
  font-family:var(--font) !important;
  margin:22px 0 0 !important;
  max-width:650px;
  color:#C8D4E2 !important;
  font-size:clamp(17px,1.6vw,21px) !important;
  font-weight:400 !important;
  line-height:1.62 !important;
  text-shadow:none !important;
}

/* Hero CTA group */
.header-content .header-text .d-flex,
.header-content .hero-ctas{
  margin-top:30px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
}

/* ━━━ PRESALE CARD (token-wrap) ━━━ */
.header-content .header-img,
.header-content .col-md-5,
.header-content .col-lg-5{
  position:relative;
  z-index:2;
  padding:0 !important;
}

.token-wrap{
  position:relative !important;
  z-index:3 !important;
  margin:0 0 0 auto !important;
  width:min(480px,100%) !important;
  padding:24px !important;
  border-radius:var(--radius-xl) !important;
  background:linear-gradient(180deg,rgba(11,16,32,.86),rgba(3,5,10,.82)) !important;
  border:1px solid rgba(0,217,255,.28) !important;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow:hidden !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.token-wrap::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(120deg,transparent 0 35%,rgba(0,217,255,.08),transparent 62%) !important;
  pointer-events:none !important;
  display:block !important;
  z-index:0;
}
.token-wrap > *{position:relative;z-index:1}
.token-wrap::after{display:none !important}

.token-wrap .token-title{
  font-family:var(--font-head) !important;
  font-size:29px !important;
  font-weight:700 !important;
  letter-spacing:-.035em !important;
  margin:0 0 7px !important;
  color:var(--text) !important;
  text-transform:none !important;
}
.token-wrap .token-title + p,
.token-wrap > p{
  margin:0 0 18px !important;
  color:var(--muted) !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

/* Timer countdown */
.token-wrap .countdown,
.token-wrap .progress-bar-timer,
.token-wrap [class*="counter"],
.token-wrap [class*="countdown"]{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important;
  margin:18px 0 !important;
  list-style:none !important;
  padding:0 !important;
}
.token-wrap .countdown li,
.token-wrap [class*="counter"] li,
.token-wrap [class*="countdown"] li{
  text-align:center !important;
  padding:13px 8px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(234,248,255,.1) !important;
  list-style:none !important;
}
.token-wrap .countdown li span,
.token-wrap .countdown li strong,
.token-wrap [class*="counter"] li span{
  display:block !important;
  font-family:var(--font-head) !important;
  font-size:25px !important;
  font-weight:700 !important;
  color:var(--text) !important;
}
.token-wrap .countdown li p,
.token-wrap [class*="counter"] li small{
  color:var(--muted-2) !important;
  font-size:11px !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  margin:4px 0 0 !important;
}

/* Progress bar */
.token-wrap .progress-bar-custom,
.token-wrap .progress{
  height:12px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  overflow:hidden !important;
  border:1px solid rgba(234,248,255,.1) !important;
  margin:8px 0 !important;
  position:relative;
}
.token-wrap .progress-bar-custom .progress-bar,
.token-wrap .progress .progress-bar{
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg,#00D9FF,#2F80FF,#EAF8FF) !important;
  position:relative;
  transition:width .6s ease;
}
.token-wrap .progress-bar-custom .progress-bar::after,
.token-wrap .progress .progress-bar::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shine 2.5s infinite;
}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.token-wrap .progress-bar-down,
.token-wrap .progress-bar-top{
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  color:var(--muted) !important;
  font-family:var(--font) !important;
  font-size:13px !important;
  font-weight:500 !important;
  margin-bottom:8px !important;
}
.token-wrap .progress-bar-down span,
.token-wrap .progress-bar-down strong{
  color:var(--text) !important;
  font-weight:700 !important;
}

/* Price metrics */
.token-wrap .price-grid,
.token-wrap .row.metrics{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-bottom:18px !important;
}
.token-wrap .metric{
  border-radius:16px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(234,248,255,.1) !important;
  padding:14px !important;
}
.token-wrap .metric span{
  display:block;
  color:var(--muted-2);
  font-size:12px;
  margin-bottom:5px;
}
.token-wrap .metric strong{
  font-family:var(--font-head);
  font-size:20px;
}

/* Form inputs */
.token-wrap input,
.token-wrap select,
.token-wrap .form-control{
  min-height:52px !important;
  width:100% !important;
  color:var(--text) !important;
  border-radius:16px !important;
  border:1px solid rgba(234,248,255,.12) !important;
  background:rgba(3,5,10,.64) !important;
  padding:0 14px !important;
  outline:none !important;
  font-family:var(--font) !important;
  font-size:14px !important;
  box-shadow:none !important;
}
.token-wrap input:focus,
.token-wrap select:focus,
.token-wrap .form-control:focus{
  border-color:rgba(0,217,255,.5) !important;
  box-shadow:0 0 0 4px rgba(0,217,255,.08) !important;
}
.token-wrap input::placeholder{color:var(--muted-2) !important}

.token-wrap .btn-gradient{
  width:100% !important;
  margin-top:10px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ SECTIONS ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section,.section-pad,.about-content,
#about,#token-distribution,#token,#roadmap,#team,#faq,#blog,#contact,
.run-content,.timeline,.team-section,.contact-info,
.spx-trust-section,.spx-why-section,.spx-howtobuy-section,
.spx-starship-band{
  padding:104px 0 !important;
  background:transparent !important;
  position:relative;
  z-index:1;
}
.section::before,.section-pad::before{display:none !important}

/* Hide image-background sections from V8 - we use unified gradient bg */
.spx-starship-band{display:none !important}
#about::before,#about::after,
.about-content::before,.about-content::after{display:none !important}

/* Section titles */
.section-title,.section-title2,
.spx-section-header{
  text-align:center !important;
  max-width:760px !important;
  margin:0 auto 44px !important;
  padding:0 !important;
}
.section-title h2,.section-title2 h2,
.spx-section-header h2,
.section-title-dash{
  font-family:var(--font-head) !important;
  font-size:clamp(34px,5vw,58px) !important;
  font-weight:700 !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  color:var(--text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  margin:0 0 16px !important;
  text-transform:none !important;
  text-align:center !important;
}
.section-title p,.section-title2 p,
.spx-section-header p{
  color:var(--muted) !important;
  margin:16px auto 0 !important;
  font-size:17px !important;
  line-height:1.65 !important;
  font-family:var(--font) !important;
  font-weight:400 !important;
  max-width:760px;
}

/* Eyebrow above titles via .kicker */
.spx-section-header .kicker,
.section-title-dash[data-title]::before,
.section-eyebrow{
  display:block !important;
  color:var(--cyan) !important;
  font-family:var(--font) !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  margin-bottom:12px !important;
  background:none !important;
  border:none !important;
  padding:0 !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
}
.section-title-dash[data-title]::before{content:attr(data-title) !important}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ CARDS (feature/trust/step/token) ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spx-trust-card,.spx-why-card,.spx-step-card,
.run-card,.about-graph,
.team-card,.team-member-card,
.faq-item,.contact-card,
[class*="feature-card"],[class*="token-card"]{
  border:1px solid rgba(234,248,255,.11) !important;
  background:linear-gradient(180deg,rgba(11,16,32,.72),rgba(3,5,10,.62)) !important;
  border-radius:var(--radius-lg) !important;
  padding:24px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
.spx-trust-card:hover,.spx-why-card:hover,.spx-step-card:hover,
.run-card:hover,.team-card:hover,
[class*="feature-card"]:hover,[class*="token-card"]:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(0,217,255,.32) !important;
  box-shadow:0 18px 60px rgba(0,157,255,.09) !important;
  background:linear-gradient(180deg,rgba(11,16,32,.82),rgba(3,5,10,.72)) !important;
}

/* Icons in cards */
.spx-trust-icon,.spx-why-icon,.spx-step-number,
.run-card .icon,.feature-icon,
[class*="card-icon"]{
  width:46px !important;
  height:46px !important;
  border-radius:15px !important;
  display:grid !important;
  place-items:center !important;
  margin-bottom:18px !important;
  background:rgba(0,217,255,.08) !important;
  border:1px solid rgba(0,217,255,.22) !important;
  color:var(--cyan) !important;
  font-weight:900 !important;
  font-size:22px !important;
  font-family:var(--font-head) !important;
}
.spx-trust-icon i,.spx-why-icon i,
.spx-step-number i,.run-card .icon i,
[class*="card-icon"] i{
  font-size:22px !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:var(--cyan) !important;
  -webkit-text-fill-color:var(--cyan) !important;
}

/* Card text */
.spx-trust-card h4,.spx-why-card h4,.spx-step-card h4,
.run-card h4,.team-card h4,
[class*="feature-card"] h3,[class*="feature-card"] h4{
  font-family:var(--font-head) !important;
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  margin:0 0 10px !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  background:none !important;
}
.spx-trust-card p,.spx-why-card p,.spx-step-card p,
.run-card p,.team-card p,
[class*="feature-card"] p,[class*="token-card"] p{
  font-family:var(--font) !important;
  color:var(--muted) !important;
  line-height:1.62 !important;
  margin:0 !important;
  font-size:14.5px !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* ━━━ TRUST SECTION GRID ━━━ */
.spx-trust-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
}
.spx-why-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
}
.spx-steps-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
  counter-reset:step;
}
.spx-step-card{position:relative;overflow:hidden}
.spx-step-card .spx-step-number{
  position:absolute !important;
  right:22px !important;
  top:18px !important;
  margin:0 !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  border:none !important;
  font-family:var(--font-head) !important;
  font-size:46px !important;
  font-weight:900 !important;
  color:rgba(234,248,255,.06) !important;
  -webkit-text-fill-color:rgba(234,248,255,.06) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ ABOUT — TWO COLUMN ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-content .row{
  display:grid !important;
  grid-template-columns:.92fr 1.08fr !important;
  gap:34px !important;
  align-items:center !important;
}
.about-content [class*="col-"]{
  width:100% !important;
  max-width:none !important;
  flex:none !important;
  padding:0 !important;
}
.about-graph{
  min-height:530px !important;
  border-radius:34px !important;
  border:1px solid rgba(0,217,255,.16) !important;
  background:
    radial-gradient(circle at 50% 35%,rgba(0,217,255,.15),transparent 34%),
    linear-gradient(180deg,rgba(11,16,32,.76),rgba(3,5,10,.76)) !important;
  position:relative !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
  padding:0 !important;
}
.about-graph::before{
  content:'';
  position:absolute;
  left:-20%;right:-20%;bottom:-38%;
  height:62%;
  border-radius:50% 50% 0 0;
  background:radial-gradient(ellipse at top,rgba(0,217,255,.28),transparent 62%);
  box-shadow:0 -18px 80px rgba(0,217,255,.18);
  display:block !important;
}
.about-graph::after{
  content:"SPX$";
  position:absolute;
  left:50%;top:48%;
  transform:translate(-50%,-50%);
  font-family:var(--font-head);
  font-size:86px;
  font-weight:900;
  color:rgba(234,248,255,.08);
  letter-spacing:-.08em;
  display:block !important;
}
.about-graph img{
  position:absolute !important;
  width:60% !important;
  height:auto !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  opacity:.85;
  filter:drop-shadow(0 0 30px rgba(0,217,255,.4));
}
.about-info{padding:0 !important;width:100% !important}
.about-info .definition p,
.about-info h2{
  font-family:var(--font-head) !important;
  font-size:clamp(34px,5vw,58px) !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  line-height:1.02 !important;
  color:var(--text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  margin:0 0 20px !important;
  text-shadow:none !important;
}
.about-info p{
  font-family:var(--font) !important;
  color:#C8D4E2 !important;
  font-size:17px !important;
  line-height:1.65 !important;
  font-weight:400 !important;
  margin:0 0 16px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ RUN CONTENT (stats) ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.run-content .row:last-child{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
  margin:60px 0 0 !important;
  border:none !important;
}
.run-content [class*="col-"]{
  flex:none !important;
  max-width:none !important;
  width:auto !important;
  padding:0 !important;
  border:none !important;
}
.run-card{
  text-align:left !important;
}
.run-card h4{
  font-family:var(--font-head) !important;
  font-size:35px !important;
  font-weight:700 !important;
  color:var(--cyan) !important;
  background:none !important;
  -webkit-text-fill-color:var(--cyan) !important;
  letter-spacing:-.03em !important;
  margin:0 0 5px !important;
}
.run-card p{
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ ROADMAP — VERTICAL TIMELINE ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#roadmap{background:transparent !important}
#roadmap .timeline_chart{
  max-width:920px !important;
  margin:0 auto !important;
  position:relative !important;
  padding:0 !important;
}
#roadmap .timeline_chart::before{
  content:'' !important;
  position:absolute !important;
  left:32px !important;
  top:0 !important;
  bottom:0 !important;
  width:2px !important;
  background:linear-gradient(transparent,var(--cyan),transparent) !important;
  box-shadow:0 0 18px var(--cyan) !important;
  transform:none !important;
}
#roadmap .timeline_event{
  position:relative !important;
  width:auto !important;
  max-width:none !important;
  margin:0 0 18px 76px !important;
  padding:0 !important;
  text-align:left !important;
  border:1px solid rgba(234,248,255,.11) !important;
  background:linear-gradient(180deg,rgba(11,16,32,.72),rgba(3,5,10,.62)) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
  float:none !important;
  display:block !important;
  min-height:auto !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#roadmap .timeline_event:hover{
  transform:translateY(-4px);
  border-color:rgba(0,217,255,.32) !important;
  box-shadow:0 18px 60px rgba(0,157,255,.09) !important;
}
#roadmap .timeline_event:nth-child(odd),
#roadmap .timeline_event:nth-child(even){
  margin-left:76px !important;
  text-align:left !important;
}
#roadmap .timeline_event::before{
  content:'' !important;
  position:absolute !important;
  left:-56px !important;
  right:auto !important;
  top:26px !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background:var(--cyan) !important;
  box-shadow:0 0 0 8px rgba(0,217,255,.09),0 0 28px var(--cyan) !important;
  z-index:2;
}
#roadmap .timeline_event_content{
  background:transparent !important;
  border:none !important;
  padding:24px !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#roadmap .timeline_event_content .line,
#roadmap .timeline_event_content .line-left,
#roadmap .timeline_event_content .line-top{display:none !important}

#roadmap .timeline_event_date{
  font-family:var(--font) !important;
  color:var(--cyan) !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  margin:0 0 8px !important;
  background:none !important;
}
#roadmap .timeline_event_title{margin:0 0 12px !important}
#roadmap .timeline_event_title span{
  font-family:var(--font-head) !important;
  font-size:24px !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  color:var(--text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
}
#roadmap .timeline_event_info{
  font-family:var(--font) !important;
  color:var(--muted) !important;
  line-height:1.7 !important;
  font-size:14.5px !important;
  margin:0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ TOKEN DISTRIBUTION ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#token-distribution,#token{background:transparent !important}
#token-distribution .row,
#token .row{
  display:grid !important;
  grid-template-columns:.8fr 1.2fr !important;
  gap:30px !important;
  align-items:center !important;
  margin:0 !important;
}
#token-distribution [class*="col-"],
#token [class*="col-"]{
  width:100% !important;
  max-width:none !important;
  flex:none !important;
  padding:0 !important;
}
#token-distribution canvas,
#token canvas,
#token-distribution .chart-area,
#token .chart-area{
  padding:34px !important;
  border-radius:32px !important;
  background:linear-gradient(180deg,rgba(11,16,32,.88),rgba(3,5,10,.72)) !important;
  border:1px solid rgba(0,217,255,.2) !important;
  box-shadow:var(--shadow) !important;
  max-width:100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ TEAM ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#team{background:transparent !important}
#team .team-member,
#team [class*="team-card"]{
  border:1px solid rgba(234,248,255,.11) !important;
  background:linear-gradient(180deg,rgba(11,16,32,.72),rgba(3,5,10,.62)) !important;
  border-radius:var(--radius-lg) !important;
  padding:24px !important;
  text-align:center !important;
  transition:transform .2s ease,border-color .2s ease;
}
#team .team-member:hover{
  transform:translateY(-4px);
  border-color:rgba(0,217,255,.32) !important;
}
#team .team-member img,
#team [class*="team-card"] img{
  border-radius:50% !important;
  width:120px !important;
  height:120px !important;
  object-fit:cover !important;
  margin:0 auto 18px !important;
  border:2px solid rgba(0,217,255,.3);
  filter:drop-shadow(0 0 20px rgba(0,217,255,.2));
}
#team .team-member h4,
#team .team-member .name{
  font-family:var(--font-head) !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  margin:0 0 6px !important;
}
#team .team-member p,
#team .team-member .designation{
  font-family:var(--font) !important;
  color:var(--muted) !important;
  font-size:13px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ FAQ — ACCORDION ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#faq{background:transparent !important}
#faq .accordion,
#faq .panel-group,
.faq-area .panel-group{
  max-width:900px !important;
  margin:0 auto !important;
  display:grid !important;
  gap:12px !important;
}
#faq .card,
#faq .panel,
#faq .accordion-item,
.faq-area .panel{
  border:1px solid rgba(234,248,255,.11) !important;
  background:linear-gradient(180deg,rgba(11,16,32,.72),rgba(3,5,10,.62)) !important;
  border-radius:var(--radius-lg) !important;
  overflow:hidden !important;
  box-shadow:none !important;
  margin:0 !important;
}
#faq .card-header,
#faq .panel-heading{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}
#faq .card-header a,
#faq .card-header button,
#faq .panel-heading a,
.faq-area .panel-title a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  width:100% !important;
  padding:20px 22px !important;
  font-family:var(--font-head) !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  text-align:left !important;
  background:transparent !important;
  border:none !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
#faq .card-header a::after,
.faq-area .panel-title a::after{
  content:'+' !important;
  font-size:22px;
  color:var(--cyan);
  transition:transform .2s ease;
}
#faq .card-header a[aria-expanded="true"]::after,
.faq-area .panel-title a:not(.collapsed)::after{
  content:'×' !important;
}
#faq .card-body,
#faq .panel-body,
.faq-area .panel-body{
  padding:0 22px 20px !important;
  background:transparent !important;
  border:none !important;
  color:var(--muted) !important;
  font-family:var(--font) !important;
  line-height:1.65 !important;
  font-size:15px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ BLOG ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#blog{background:transparent !important}
#blog .blog-card,
#blog [class*="blog-item"]{
  border:1px solid rgba(234,248,255,.11) !important;
  background:linear-gradient(180deg,rgba(11,16,32,.72),rgba(3,5,10,.62)) !important;
  border-radius:var(--radius-lg) !important;
  overflow:hidden !important;
  transition:transform .2s ease,border-color .2s ease;
}
#blog .blog-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,217,255,.32) !important;
}
#blog .blog-card img{
  width:100% !important;
  height:200px !important;
  object-fit:cover !important;
}
#blog .blog-card-content,
#blog .blog-card .content{padding:20px !important}
#blog .blog-card h4,
#blog .blog-card h3{
  font-family:var(--font-head) !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  margin:0 0 10px !important;
}
#blog .blog-card p{
  font-family:var(--font) !important;
  color:var(--muted) !important;
  font-size:14px !important;
  line-height:1.6 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ CONTACT ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#contact{background:transparent !important}
#contact .section-title,
#contact .section-title.text-center{
  text-align:center !important;
  max-width:760px !important;
  margin:0 auto 44px !important;
  padding:0 !important;
}
#contact .section-title h2{
  text-align:center !important;
  font-family:var(--font-head) !important;
  font-size:clamp(34px,5vw,58px) !important;
  font-weight:700 !important;
  color:var(--text) !important;
  margin:0 0 16px !important;
}
#contact .section-title p{
  text-align:center !important;
  color:var(--muted) !important;
  font-size:17px !important;
}
#contact .col-md-8.offset-md-2,
#contact .col-lg-6.offset-lg-3{
  margin:0 auto !important;
  max-width:760px !important;
  flex:none !important;
  width:100% !important;
  padding:0 !important;
}
.contact-from{
  border:1px solid rgba(0,217,255,.24) !important;
  background:
    radial-gradient(circle at 70% 30%,rgba(0,217,255,.16),transparent 38%),
    linear-gradient(135deg,rgba(11,16,32,.9),rgba(3,5,10,.88)) !important;
  border-radius:34px !important;
  padding:46px !important;
  box-shadow:var(--shadow) !important;
}
.contact-from input,
.contact-from textarea{
  min-height:52px !important;
  width:100% !important;
  color:var(--text) !important;
  border-radius:16px !important;
  border:1px solid rgba(234,248,255,.12) !important;
  background:rgba(3,5,10,.64) !important;
  padding:14px 16px !important;
  outline:none !important;
  font-family:var(--font) !important;
  font-size:14px !important;
  margin-bottom:14px !important;
  box-shadow:none !important;
}
.contact-from textarea{min-height:120px !important}
.contact-from input:focus,
.contact-from textarea:focus{
  border-color:rgba(0,217,255,.5) !important;
  box-shadow:0 0 0 4px rgba(0,217,255,.08) !important;
}
.contact-from input::placeholder,
.contact-from textarea::placeholder{color:var(--muted-2) !important;font-size:13px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ FOOTER ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer.footer-bg,
footer{
  padding:66px 0 !important;
  border-top:1px solid rgba(0,217,255,.15) !important;
  background:rgba(3,5,10,.55) !important;
  position:relative;
  z-index:1;
}
footer::before{display:none !important}
footer .container{max-width:var(--container) !important}
footer h3,footer h4{
  font-family:var(--font-head) !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  margin:0 0 14px !important;
}
footer p,footer a,footer li{
  color:var(--muted) !important;
  font-family:var(--font) !important;
  font-size:14px !important;
  line-height:1.7 !important;
}
footer a:hover{color:var(--cyan) !important}
footer ul{list-style:none !important;padding:0 !important;display:grid;gap:8px}
footer .footer-logo img{
  height:44px !important;
  width:auto !important;
  margin-bottom:16px;
  filter:drop-shadow(0 0 14px rgba(0,217,255,.3));
}

/* SPX disclaimer */
.spx-disclaimer{
  color:#9CA8B7 !important;
  font-size:12.5px !important;
  line-height:1.65 !important;
  border-top:1px solid rgba(234,248,255,.08);
  padding-top:18px;
  margin-top:24px;
  text-align:center;
}

/* Social icons */
footer .social,
footer .footer-social{
  display:flex !important;
  gap:12px !important;
  list-style:none !important;
  padding:0 !important;
  margin:16px 0 0 !important;
}
footer .social li,
footer .footer-social li{margin:0 !important}
footer .social a,
footer .footer-social a{
  display:inline-flex !important;
  width:38px;height:38px;
  align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(234,248,255,.14) !important;
  color:var(--muted) !important;
  transition:all .2s ease;
}
footer .social a:hover,
footer .footer-social a:hover{
  border-color:rgba(0,217,255,.45) !important;
  color:var(--cyan) !important;
  background:rgba(0,217,255,.08) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ DROPDOWN / LANGUAGE TOGGLE ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dropdown-menu{
  background:rgba(3,5,10,.94) !important;
  border:1px solid rgba(0,217,255,.18) !important;
  border-radius:22px !important;
  padding:8px !important;
  box-shadow:var(--shadow) !important;
}
.dropdown-item{
  color:var(--muted) !important;
  border-radius:14px !important;
  padding:10px 14px !important;
  font-family:var(--font) !important;
  font-size:14px !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background:rgba(0,217,255,.08) !important;
  color:var(--cyan) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ▓ RESPONSIVE ▓
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:1040px){
  .header-content > .container,
  .about-content .row,
  #token-distribution .row,
  #token .row{
    grid-template-columns:1fr !important;
  }
  .header-content{padding:60px 0 50px !important;min-height:auto !important}
  .token-wrap{margin:0 auto !important}
  .spx-trust-grid,.spx-steps-grid{grid-template-columns:repeat(2,1fr) !important}
  .spx-why-grid{grid-template-columns:repeat(2,1fr) !important}
  .run-content .row:last-child{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:720px){
  .section,.section-pad,
  #about,#token-distribution,#token,#roadmap,#team,#faq,#blog,#contact,
  .run-content,.spx-trust-section,.spx-why-section,.spx-howtobuy-section{
    padding:72px 0 !important;
  }
  .header-content{padding:44px 0 58px !important}
  .header-content > .container{gap:22px !important}
  .header-content .header-text h1{font-size:42px !important}
  .header-content .header-text p{font-size:16px !important}
  .token-wrap{padding:18px !important}
  .token-wrap .countdown{gap:7px !important}
  .token-wrap .countdown li{padding:10px 4px !important}
  .token-wrap .countdown li span,
  .token-wrap .countdown li strong{font-size:21px !important}
  .spx-trust-grid,.spx-why-grid,.spx-steps-grid,
  .run-content .row:last-child{grid-template-columns:1fr !important}
  #roadmap .timeline_chart::before{left:18px !important}
  #roadmap .timeline_event{margin-left:50px !important}
  #roadmap .timeline_event::before{left:-37px !important;width:14px !important;height:14px !important}
  .about-graph{min-height:360px !important}
  .contact-from{padding:28px !important}
  .section-title h2,.section-title2 h2{font-size:30px !important}
}
@media (max-width:430px){
  .header-content .header-text h1{font-size:36px !important}
  .section-title h2,.section-title2 h2{font-size:26px !important}
  nav#mainNav .navbar-brand img{height:32px !important}
}