/* ============================================================
   BitNeuro — shared design system
   Dark-mode-first, premium fintech / AI crypto intelligence
   ============================================================ */

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

:root {
  /* ---- core palette ---- */
  --bg:            #06070E;
  --bg-2:          #090B14;
  --surface:       #0E1019;
  --surface-2:     #12141F;
  --surface-3:     #171a27;
  --line:          rgba(255,255,255,0.07);
  --line-strong:   rgba(255,255,255,0.12);

  /* ---- brand ---- */
  --purple:        #9F24EC;
  --purple-bright: #BF7BFF;
  --purple-deep:   #7C1BC9;
  --cyan:          #22D3EE;
  --cyan-soft:     #67E8F9;
  --gold:          #F7AC34;      /* node accent, used sparingly */
  --grad:          linear-gradient(110deg, #9F24EC 0%, #22D3EE 100%);
  --grad-soft:     linear-gradient(110deg, rgba(159,36,236,.18), rgba(34,211,238,.18));

  /* ---- semantic (gains/losses/direction ONLY) ---- */
  --green:         #34D399;
  --green-dim:     rgba(52,211,153,.14);
  --red:           #FB5070;
  --red-dim:       rgba(251,80,112,.14);

  /* ---- text ---- */
  --tx:            #F4F5FA;
  --tx-soft:       #AEB2C4;
  --tx-mute:       #71768C;
  --tx-faint:      #565B70;

  /* ---- type ---- */
  --f-display: 'Sora', system-ui, sans-serif;
  --f-body:    'Manrope', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --radius:    20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --maxw: 1200px;
  --pad:  clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--tx);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(159,36,236,.35); color: #fff; }

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

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }

/* ---- layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(72px, 11vw, 140px); position: relative; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 20px;
}
.eyebrow::before { content:""; width: 22px; height: 1px; background: var(--cyan); opacity:.6; }

.gradtext {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-body); font-weight: 600; font-size: 15.5px;
  padding: 14px 26px; border-radius: 100px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--grad); color: #0a0612;
  box-shadow: 0 8px 30px -8px rgba(159,36,236,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(159,36,236,.75); }
.btn-ghost {
  background: rgba(255,255,255,0.04); color: var(--tx);
  border-color: var(--line-strong); backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,.22); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 16.5px; }

/* ---- glass card ---- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
}

/* ---- pills / badges ---- */
.pill {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line-strong);
  color: var(--tx-soft); display: inline-flex; align-items: center; gap: 6px;
}
.pill-purple { color: var(--purple-bright); border-color: rgba(159,36,236,.4); background: rgba(159,36,236,.1); }
.pill-cyan   { color: var(--cyan-soft);    border-color: rgba(34,211,238,.4);  background: rgba(34,211,238,.1); }
.pill-green  { color: var(--green);  border-color: rgba(52,211,153,.4);  background: var(--green-dim); }
.pill-red    { color: var(--red);    border-color: rgba(251,80,112,.4);  background: var(--red-dim); }

/* ---- glow blobs ---- */
.glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; opacity: .5; }

/* ---- divider ---- */
.hr { height: 1px; background: var(--line); border: none; }

/* ============== HEADER ============== */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,7,14,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand b { color: var(--tx); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 14.5px; color: var(--tx-soft); font-weight: 500; transition: color .15s; }
.nav a:hover { color: var(--tx); }
.head-cta { display: flex; align-items: center; gap: 16px; }
.head-status { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--tx-mute); display: flex; align-items: center; gap: 7px; }
.head-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); align-items:center; justify-content:center; cursor:pointer; }
.burger span { display:block; width: 17px; height: 1.6px; background: var(--tx); position: relative; }
.burger span::before, .burger span::after { content:""; position:absolute; left:0; width:17px; height:1.6px; background: var(--tx); }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }

@media (max-width: 880px) {
  .nav, .head-status, .head-cta .btn { display: none; }
  .burger { display: flex; }
  .mnav-open .burger span { background: transparent; }
}
/* mobile drawer */
.mnav { position: fixed; inset: 70px 0 auto 0; z-index: 99; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 18px var(--pad) 26px; display: none; flex-direction: column; gap: 4px; }
.mnav.open { display: flex; }
.mnav a { padding: 13px 4px; font-size: 16px; color: var(--tx-soft); border-bottom: 1px solid var(--line); }
.mnav .btn { margin-top: 14px; }
/* sticky mobile cta */
.mobile-cta { display: none; }
@media (max-width: 880px) {
  .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(6,7,14,0), rgba(6,7,14,.92) 30%); }
  .mobile-cta .btn { width: 100%; }
}

/* ============== FOOTER ============== */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 64px 40px; position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brandcol .brand { margin-bottom: 18px; }
.foot-desc { color: var(--tx-mute); font-size: 14px; max-width: 320px; }
.foot-col h5 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-faint); margin-bottom: 16px; }
.foot-col a { display: block; color: var(--tx-soft); font-size: 14px; padding: 6px 0; transition: color .15s; }
.foot-col a:hover { color: var(--purple-bright); }
.foot-bottom { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot-bottom small { color: var(--tx-faint); font-size: 12.5px; }
.foot-disclaim { color: var(--tx-mute); font-size: 12.5px; line-height: 1.7; max-width: 760px; margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.015); }
.foot-disclaim-label { color: var(--gold); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 760px){ .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brandcol { grid-column: 1 / -1; } }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } html { scroll-behavior:auto; } }