/* ============================================================
   CTLFX — Trendy Dark UI Refresh
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:            #05070d;
  --bg-alt:        #090d17;
  --surface:       rgba(255,255,255,.035);
  --surface-2:     rgba(255,255,255,.06);
  --border:        rgba(255,255,255,.09);
  --border-soft:   rgba(255,255,255,.05);
  --primary:       #fca311;
  --primary-2:     #ff7a00;
  --primary-3:     #ffd166;
  --text:          #eef1f7;
  --muted:         #8b93a7;
  --radius-lg:     28px;
  --radius-md:     20px;
  --radius-sm:     14px;
  --ease:          cubic-bezier(.2,.8,.2,1);
}

html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Global ambient aurora behind everything */
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px circle at 12% 8%,  rgba(252,163,17,.10), transparent 60%),
    radial-gradient(700px circle at 88% 22%, rgba(255,122,0,.08),  transparent 60%),
    radial-gradient(800px circle at 50% 95%, rgba(90,120,255,.07), transparent 60%);
}

h1,h2,h3,h4,h5,.display-5{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-.02em;
  font-weight:700;
}

h1{ font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.05; }
h2{ font-size:clamp(1.8rem, 3.2vw, 2.75rem); line-height:1.12; }

.text-muted{ color:var(--muted) !important; }

/* ---------- Gradient text ---------- */
.text-gradient{
  background:linear-gradient(120deg, var(--primary-3) 0%, var(--primary) 45%, var(--primary-2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- Section rhythm ---------- */
.section-padding{ padding:clamp(4rem, 9vw, 8rem) 0; position:relative; z-index:1; }
.bg-dark-alt{
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)) , var(--bg-alt);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.max-w-2xl{ max-width:42rem; }

/* ============================================================
   TICKER — infinite marquee
   ============================================================ */
.ticker-wrap{
  position:relative; z-index:5;
  overflow:hidden;
  padding:.85rem 0;
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(90deg, rgba(252,163,17,.07), rgba(255,122,0,.02) 50%, rgba(252,163,17,.07));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track{
  display:flex; width:max-content;
  animation:marquee 42s linear infinite;
}
.ticker-wrap:hover .ticker-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.ticker-group{ display:flex; }

.ticker-item{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:0 1.6rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--text); white-space:nowrap;
  border-right:1px solid var(--border-soft);
}
.ticker-item span:first-of-type{ color:#fff; }
.price-up, .price-down{
  font-size:.72rem; font-weight:700; padding:.15rem .5rem;
  border-radius:999px; display:inline-flex; align-items:center; gap:.25rem;
}
.price-up{ color:#22e39a; background:rgba(34,227,154,.10); }
.price-down{ color:#ff5f7a; background:rgba(255,95,122,.10); }

/* live pulse dot */
.live-dot{
  width:7px; height:7px; border-radius:50%; background:#22e39a;
  box-shadow:0 0 0 0 rgba(34,227,154,.6);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(34,227,154,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,227,154,0); }
}

/* ============================================================
   GLASS CARDS
   ============================================================ */
.glass-card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  overflow:hidden;
}
.glass-card::after{ /* top sheen */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.10), transparent 55%);
}
.glass-card:hover{
  transform:translateY(-6px);
  border-color:rgba(252,163,17,.35);
  box-shadow:0 24px 60px -30px rgba(252,163,17,.55);
}

/* Gradient border helper */
.gradient-border::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(252,163,17,.85), rgba(255,255,255,.10) 38%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.75;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-custom{
  --bs-btn-focus-shadow-rgb: 252,163,17;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#0a0a0a !important;
  font-weight:700; font-size:.94rem;
  border:none; border-radius:999px;
  padding:.85rem 1.9rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  box-shadow:0 10px 28px -12px rgba(252,163,17,.75);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  position:relative; overflow:hidden;
}
.btn-custom::after{ /* shine sweep */
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .7s var(--ease);
}
.btn-custom:hover{ transform:translateY(-3px); filter:brightness(1.06); box-shadow:0 18px 40px -14px rgba(252,163,17,.9); }
.btn-custom:hover::after{ left:130%; }
.btn-custom:active{ transform:translateY(-1px); }

.btn-outline-custom{
  background:rgba(255,255,255,.03);
  color:var(--text) !important;
  font-weight:600; font-size:.94rem;
  border:1px solid var(--border);
  border-radius:999px; padding:.85rem 1.9rem;
  backdrop-filter:blur(10px);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  transition:all .35s var(--ease);
}
.btn-outline-custom:hover{
  border-color:rgba(252,163,17,.6);
  background:rgba(252,163,17,.08);
  transform:translateY(-3px);
  box-shadow:0 14px 34px -18px rgba(252,163,17,.7);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:1;
  padding:clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 7rem);
  overflow:hidden;
}
.hero::before{ /* grid pattern */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
}

.badge-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:999px;
  backdrop-filter:blur(10px);
}

.hero .lead{
  color:var(--muted); font-size:clamp(1rem, 1.15vw + .7rem, 1.15rem);
  line-height:1.75; max-width:34rem;
}

/* Stat strip */
.stat-strip{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.stat-strip h3{
  font-size:1.9rem; margin:0;
  background:linear-gradient(120deg,#fff, #c9d2e3);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat-strip small{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.stat-divider{ width:1px; height:44px; background:linear-gradient(180deg,transparent,var(--border),transparent); }

/* Floating glow blob */
.glow-blob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, var(--primary) 0%, transparent 70%);
  filter:blur(90px); opacity:.22; z-index:0; pointer-events:none;
}

/* Hero trading card */
.trade-card{
  background:linear-gradient(165deg, rgba(20,24,36,.9), rgba(9,13,23,.92));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.6rem;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
  position:relative; z-index:3;
}
.chart-shell{
  position:relative; height:170px; border-radius:var(--radius-sm); overflow:hidden;
  background:linear-gradient(180deg, rgba(252,163,17,.10), transparent 85%);
}
.chart-svg{ width:100%; height:100%; display:block; }
.chart-line{
  stroke-dasharray:700; stroke-dashoffset:700;
  animation:draw 2.4s var(--ease) .3s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.chart-dot{
  position:absolute; right:2px; top:14%;
  width:10px; height:10px; border-radius:50%;
  background:var(--primary-3);
  box-shadow:0 0 0 4px rgba(252,163,17,.18), 0 0 18px rgba(252,163,17,.9);
  animation:pulse 2.2s infinite;
}

.trade-btn{
  border:none; border-radius:var(--radius-sm);
  padding:.8rem; font-weight:700; font-size:.85rem; letter-spacing:.06em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.trade-btn.sell{ background:linear-gradient(135deg,#ff5f7a,#e0324f); color:#fff; }
.trade-btn.buy { background:linear-gradient(135deg,#22e39a,#0fb87a); color:#04150f; }
.trade-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.trade-btn.sell:hover{ box-shadow:0 14px 30px -14px rgba(255,95,122,.9); }
.trade-btn.buy:hover { box-shadow:0 14px 30px -14px rgba(34,227,154,.9); }

/* ============================================================
   BENTO FEATURE GRID
   ============================================================ */
.bento{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1.25rem;
}
.bento-item{ grid-column:span 2; }
.bento-item.wide{ grid-column:span 4; }
.bento-item.half{ grid-column:span 3; }

.bento-visual{
  display:flex; align-items:flex-end; gap:5px; height:64px; margin-top:1.25rem;
}
.bento-visual i{
  flex:1; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, rgba(252,163,17,.85), rgba(252,163,17,.12));
  animation:bars 3.2s ease-in-out infinite;
}
.bento-visual i:nth-child(1){ height:38%; animation-delay:0s; }
.bento-visual i:nth-child(2){ height:62%; animation-delay:.15s; }
.bento-visual i:nth-child(3){ height:45%; animation-delay:.3s; }
.bento-visual i:nth-child(4){ height:82%; animation-delay:.45s; }
.bento-visual i:nth-child(5){ height:56%; animation-delay:.6s; }
.bento-visual i:nth-child(6){ height:95%; animation-delay:.75s; }
.bento-visual i:nth-child(7){ height:68%; animation-delay:.9s; }
@keyframes bars{
  0%,100%{ transform:scaleY(1); opacity:.85; }
  50%    { transform:scaleY(.72); opacity:1; }
}

.icon-box{
  width:56px; height:56px; border-radius:18px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--primary);
  background:linear-gradient(150deg, rgba(252,163,17,.18), rgba(252,163,17,.04));
  border:1px solid rgba(252,163,17,.22);
  box-shadow:0 10px 30px -16px rgba(252,163,17,.8);
  transition:transform .45s var(--ease);
}
.glass-card:hover .icon-box{ transform:translateY(-3px) rotate(-4deg) scale(1.05); }

.text-sm{ font-size:.9rem; line-height:1.7; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-table{
  border-radius:var(--radius-lg);
  padding:0; display:flex; flex-direction:column; height:100%;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pricing-table:hover{ transform:translateY(-8px); }

.pricing-header{
  padding:2rem 1.75rem 1.5rem;
  border-bottom:1px solid var(--border-soft);
  text-align:center;
}
.pricing-header h2{
  font-size:2.6rem; font-weight:700; color:#fff; letter-spacing:-.03em;
}
.pricing-features{
  list-style:none; margin:0; padding:1.5rem 1.75rem;
  flex:1;
}
.pricing-features li{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 0; color:var(--muted); font-size:.92rem;
  border-bottom:1px dashed rgba(255,255,255,.05);
}
.pricing-features li:last-child{ border-bottom:none; }
.pricing-features li i{
  width:20px; height:20px; flex:0 0 20px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.6rem; color:#04150f;
  background:linear-gradient(135deg,#22e39a,#0fb87a);
}

.pricing-popular{
  border:1px solid rgba(252,163,17,.4);
  background:linear-gradient(165deg, rgba(252,163,17,.08), rgba(255,255,255,.02) 45%, rgba(9,13,23,.9));
  box-shadow:0 40px 100px -50px rgba(252,163,17,.85);
  transform:scale(1.03);
  position:relative;
}
.pricing-popular:hover{ transform:scale(1.03) translateY(-8px); }
.popular-badge{
  position:absolute; top:16px; right:16px; z-index:2;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#0a0a0a; font-size:.68rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; padding:.35rem .8rem; border-radius:999px;
  box-shadow:0 8px 22px -10px rgba(252,163,17,.95);
}

@media (max-width:991.98px){
  .pricing-popular{ transform:none; }
  .pricing-popular:hover{ transform:translateY(-8px); }
}

/* ============================================================
   PLATFORM CARDS
   ============================================================ */
.platform-row{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.15rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.025);
  transition:all .4s var(--ease);
  text-decoration:none;
}
.platform-row:hover{
  border-color:rgba(252,163,17,.45);
  background:rgba(252,163,17,.05);
  transform:translateX(6px);
}
.platform-row i.fa-brands, .platform-row i.fas{
  font-size:1.6rem; color:var(--primary); width:34px; text-align:center;
}

.platform-shot{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95);
  background:#000;
}
.platform-shot img{ display:block; width:100%; opacity:.82; transition:opacity .5s var(--ease), transform .8s var(--ease); }
.platform-shot:hover img{ opacity:1; transform:scale(1.02); }

.signal-card{
  position:absolute; bottom:-18px; left:-18px;
  width:230px; padding:1rem 1.1rem;
  border-radius:var(--radius-md);
  background:rgba(12,16,26,.92);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);
  z-index:3;
}

/* ============================================================
   CTA
   ============================================================ */
.cta-panel{
  position:relative;
  border-radius:36px;
  padding:clamp(3rem, 6vw, 5rem) 1.5rem;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(252,163,17,.14), transparent 70%),
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
}
.cta-panel::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991.98px){
  .bento-item, .bento-item.wide, .bento-item.half{ grid-column:span 6; }
  .signal-card{ left:12px; bottom:-14px; width:200px; }
}
@media (max-width:575.98px){
  .stat-strip{ gap:1.1rem; }
  .stat-divider{ display:none; }
  .ticker-item{ padding:0 1.1rem; font-size:.76rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}