/* Modern responsive starter (no frameworks) */

:root{
  --bg:#ffffff;
  --surface:#f3f4f6;
  --surface-2:#eef2ff;
  --text:#111827;
  --muted:#6b7280;
  --border:rgba(17,24,39,.12);
  --shadow:0 10px 20px rgba(0,0,0,.06);
  --accent:#6366f1;
  --accent-2:#a78bfa;
}

[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#121b2f;
  --surface-2:#111a33;
  --text:#e5e7eb;
  --muted:#aab3c2;
  --border:rgba(229,231,235,.14);
  --shadow:0 18px 30px rgba(0,0,0,.35);
  --accent:#8b5cf6;
  --accent-2:#60a5fa;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{ color:inherit; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
}

.nav{
  max-width:1100px;
  margin:0 auto;
  padding:0.85rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.logo{
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
}

.nav-links{
  display:flex;
  gap:1rem;
  align-items:center;
}

.nav-links a{
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  padding:.35rem .5rem;
  border-radius:.6rem;
}

.nav-links a:hover{
  color:var(--text);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:.75rem;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}

.btn-accent{
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:white;
  box-shadow:var(--shadow);
}

.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}

.btn-ghost:hover{
  background:color-mix(in srgb, var(--surface) 65%, transparent);
}

.hamburger{
  display:none;
  font-size:1.25rem;
  padding:.55rem .75rem;
  border-radius:.75rem;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
}

.hamburger:hover{ background:color-mix(in srgb, var(--surface) 65%, transparent); }

main{ display:block; }

.hero{
  padding:3.5rem 1rem 2.5rem;
  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 420px at 80% 10%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%);
}

.hero-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:2rem;
  align-items:center;
}

.badge{
  display:inline-block;
  font-weight:800;
  font-size:.85rem;
  color:color-mix(in srgb, var(--text) 85%, transparent);
  background:color-mix(in srgb, var(--surface) 65%, transparent);
  border:1px solid var(--border);
  padding:.35rem .6rem;
  border-radius:999px;
  margin:0 0 .9rem;
}

.hero h1{
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.1;
  margin:.1rem 0 .75rem;
  letter-spacing:-.02em;
}

.lede{
  margin:0 0 1.25rem;
  color:var(--muted);
  font-size:1.05rem;
  max-width:52ch;
}

.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; }

.tiny{
  margin:1.1rem 0 0;
  font-size:.9rem;
  color:var(--muted);
}

.hero-panel{
  display:flex;
  justify-content:flex-end;
}

.panel-card{
  width:min(360px, 100%);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  border:1px solid var(--border);
  border-radius:1.1rem;
  padding:1.1rem;
  box-shadow:var(--shadow);
}

.panel-title{
  font-weight:800;
  color:var(--muted);
  margin-bottom:.9rem;
}

.panel-metric{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  margin:.55rem 0;
}

.panel-number{
  font-size:1.6rem;
  font-weight:900;
}

.panel-label{
  color:var(--muted);
  font-weight:700;
}

.panel-bar{
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.7;
  margin-top:1rem;
}
.panel-bar.small{ width:75%; opacity:.55; }
.panel-bar.tiny{ width:55%; opacity:.4; }

.section{
  padding:2.5rem 1rem;
}

.section-inner{
  max-width:1100px;
  margin:0 auto;
}

.section h2{
  margin:0;
  font-size:1.8rem;
  letter-spacing:-.01em;
}

.section-sub{
  margin:.35rem 0 1.5rem;
  color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}

.grid.two{
  grid-template-columns:repeat(2, 1fr);
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:var(--shadow);
}

.card h3{ margin:.1rem 0 .5rem; }
.card p{ margin:0; color:var(--muted); }

.list{
  margin:.6rem 0 0;
  padding-left:1.1rem;
  color:var(--muted);
}

.footer{
  border-top:1px solid var(--border);
  padding:1.6rem 1rem;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}

.footer a{ text-decoration:none; font-weight:700; }
.footer a:hover{ color:var(--text); }
.dot{ opacity:.55; }

/* Responsive */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-panel{ justify-content:flex-start; }
  .grid{ grid-template-columns: 1fr; }
  .grid.two{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .hamburger{ display:inline-flex; }
  .nav{ position:relative; }

  .nav-links{
    display:none;
    position:absolute;
    top:64px;
    right:1rem;
    min-width: 220px;
    flex-direction:column;
    gap:.35rem;
    padding:.75rem;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:1rem;
    box-shadow:var(--shadow);
  }
  .nav-links.show{ display:flex; }
  .nav-links a{ padding:.6rem .75rem; }
}


/* --- Sticky/tech hero background + candlestick chart --- */
.hero{
  position: relative;
  overflow: clip;
}

/* A dedicated background layer that "sticks" (parallax-ish) */
.hero-bg{
  position:absolute;
  inset:-40vh -10vw -40vh -10vw;
  z-index:0;
  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(900px 420px at 80% 10%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 65%, transparent), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2399a3b3' stroke-opacity='0.18'%3E%3Cpath d='M0 20H120M0 60H120M0 100H120'/%3E%3Cpath d='M20 0V120M60 0V120M100 0V120'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,200px 200px;
  background-position:left top,right top,center top,0 0;
  transform: translateZ(0);
  will-change: transform;
  background-attachment: scroll, scroll, scroll, fixed;
}

.hero-inner{ position: relative; z-index:1; }

/* Reduce any previous hero overlay so the new bg reads clean */
.hero::before{ opacity: 0 !important; }

.panel-tech{
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.candle-chart{
  width:100%;
  height:auto;
  display:block;
  margin-top:.25rem;
  border-radius:.9rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border:1px solid var(--border);
}
.candle-chart .gridlines path{
  stroke: color-mix(in srgb, var(--muted) 35%, transparent);
  stroke-width:1;
}
.candle-chart .trend{
  fill:none;
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width:2.2;
  opacity:.75;
}
.candle-chart .labels text{
  fill: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.candle-chart .wick{
  stroke-width:2.2;
  stroke-linecap:round;
}
.candle-chart .body{ stroke: rgba(0,0,0,.12); stroke-width:1; }
.candle-chart .up{ stroke: color-mix(in srgb, var(--accent-2) 70%, #22c55e 30%); }
.candle-chart .down{ stroke: color-mix(in srgb, var(--accent) 55%, #ef4444 45%); }
.candle-chart rect.up{ fill: color-mix(in srgb, var(--accent-2) 55%, #22c55e 45%); }
.candle-chart rect.down{ fill: color-mix(in srgb, var(--accent) 45%, #ef4444 55%); }

.panel-meta{
  display:flex;
  gap:.45rem;
  margin-top:.85rem;
  flex-wrap:wrap;
}
.chip{
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  color: var(--muted);
}