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

:root {
  --bg:        #050508;
  --bg-subtle: #0a0a10;
  --bg-card:   rgba(14,14,22,.65);
  --bg-card-h: rgba(22,22,36,.75);
  --border:    rgba(255,140,0,.08);
  --border-h:  rgba(255,140,0,.2);
  --border-bright: rgba(255,140,0,.35);
  --text:      #eaeaef;
  --text-2:    #9898a8;
  --text-3:    #5a5a6e;
  --orange:    #ff8c00;
  --orange-l:  #ffb347;
  --orange-d:  #e67300;
  --red:       #ff4500;
  --accent:    #ff6a00;
  --orange-bg: rgba(255,140,0,.08);
  --orange-bg2:rgba(255,140,0,.15);
  --green:     #22c55e;
  --glow:      0 0 20px rgba(255,140,0,.15), 0 0 60px rgba(255,140,0,.05);
  --glow-strong: 0 0 30px rgba(255,140,0,.25), 0 0 80px rgba(255,140,0,.1), 0 0 120px rgba(255,69,0,.05);
  --r:         12px;
  --r-lg:      20px;
  --r-xl:      28px;
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Scanline overlay */
body::after {
  content:'';
  position:fixed; inset:0; z-index:9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.03) 2px,
    rgba(0,0,0,.03) 4px
  );
  pointer-events:none;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== GRADIENT TEXT ===== */
.highlight {
  background: linear-gradient(135deg, var(--orange-l), var(--orange), var(--red));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(255,140,0,.3));
}

/* ===== ANIMATED GRADIENT BORDER MIXIN ===== */
.glow-border {
  position:relative;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glow-border::before {
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit; padding:1px;
  background: conic-gradient(from var(--angle, 0deg), transparent 40%, var(--orange) 50%, transparent 60%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: rotateBorder 4s linear infinite;
  opacity:.6;
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBorder { to { --angle: 360deg; } }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:10px;
  font-size:14px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:all .3s; border:none; white-space:nowrap;
  position:relative;
}
.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--red));
  color:#fff;
  box-shadow: var(--glow-strong);
}
.btn-primary:hover {
  box-shadow: 0 0 40px rgba(255,140,0,.5), 0 0 100px rgba(255,69,0,.25), 0 0 150px rgba(255,69,0,.1);
  transform: translateY(-3px) scale(1.02);
}
.btn-primary::after {
  content:'';
  position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
  opacity:0; transition:opacity .3s;
}
.btn-primary:hover::after { opacity:1; }

.btn-outline {
  background: rgba(255,140,0,.04);
  color:var(--text); border:1px solid rgba(255,140,0,.15);
  backdrop-filter:blur(10px);
}
.btn-outline:hover {
  border-color:var(--orange); color:var(--orange);
  box-shadow: 0 0 20px rgba(255,140,0,.15);
  transform: translateY(-2px);
}
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { color:var(--orange); }
.btn-lg { padding:14px 30px; font-size:15px; border-radius:12px; }

/* ===== NAVBAR ===== */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:14px 0; transition:all .3s; background:transparent;
}
.navbar.scrolled {
  background:rgba(5,5,8,.82); backdrop-filter:blur(30px);
  border-bottom:1px solid rgba(255,140,0,.06); padding:10px 0;
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}
.nav-container { display:flex; align-items:center; justify-content:space-between; }

.logo {
  display:flex; align-items:center; gap:10px;
  font-size:20px; font-weight:700; letter-spacing:-.5px;
}
.logo span { filter: drop-shadow(0 0 8px rgba(255,140,0,.3)); }
.logo-mark { width:32px; height:32px; filter: drop-shadow(0 0 6px rgba(255,140,0,.4)); }
.logo-mark svg { width:100%; height:100%; }

.nav-links { display:flex; gap:28px; }
.nav-links a {
  font-size:13px; color:var(--text-2); transition:all .2s;
  letter-spacing:.2px; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background:var(--orange); transition:width .3s;
}
.nav-links a:hover { color:var(--orange); }
.nav-links a:hover::after { width:100%; }

.nav-actions { display:flex; gap:8px; }

.mobile-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.mobile-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; }

/* ===== HERO ===== */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:140px 0 100px; overflow:hidden;
}
#heroCanvas { position:absolute; inset:0; z-index:0; }

.hero-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,140,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,.04) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 60% 50% at center, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at center, black, transparent);
  animation: gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse {
  0%,100% { opacity:.6; } 50% { opacity:1; }
}

.hero-glow {
  position:absolute;
  width:800px; height:800px;
  top:-250px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,106,0,.2) 0%, rgba(255,69,0,.08) 30%, transparent 60%);
  pointer-events:none;
  animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity:.7; transform:translateX(-50%) scale(1); }
  50% { opacity:1; transform:translateX(-50%) scale(1.1); }
}

.hero-content { position:relative; z-index:1; text-align:center; max-width:860px; }
.hero-fade {
  position:absolute; bottom:0; left:0; right:0; height:150px;
  background:linear-gradient(transparent, var(--bg));
  pointer-events:none; z-index:1;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 18px; border-radius:100px;
  font-size:12px; font-weight:500; letter-spacing:.5px; text-transform:uppercase;
  color:var(--orange); border:1px solid rgba(255,140,0,.15);
  background:rgba(255,140,0,.04); margin-bottom:28px;
  backdrop-filter:blur(10px);
  box-shadow: 0 0 20px rgba(255,140,0,.05);
  animation: badgeGlow 3s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%,100% { box-shadow: 0 0 20px rgba(255,140,0,.05); }
  50% { box-shadow: 0 0 30px rgba(255,140,0,.12); }
}

.badge-pulse {
  width:7px; height:7px; border-radius:50%; background:var(--orange);
  animation: pulse 2s infinite;
  box-shadow: 0 0 10px var(--orange), 0 0 20px rgba(255,140,0,.5);
}
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.8)} }

.hero h1 {
  font-size:clamp(38px,6vw,72px); font-weight:800;
  line-height:1.05; letter-spacing:-3px; margin-bottom:24px;
  text-shadow: 0 0 80px rgba(255,140,0,.08);
}
.hero-highlight {
  position:relative;
  background: linear-gradient(135deg, var(--orange-l), var(--orange), var(--red));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 30px rgba(255,140,0,.4));
}

.hero-sub {
  font-size:17px; color:var(--text-2);
  max-width:640px; margin:0 auto 40px; line-height:1.8;
  font-family:'Inter', sans-serif;
}

.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }

/* Hero Metrics */
.hero-metrics {
  display:flex; align-items:center; justify-content:center; gap:40px;
  padding:24px 40px; border-radius:16px;
  background: rgba(255,140,0,.03);
  border:1px solid rgba(255,140,0,.08);
  backdrop-filter:blur(20px);
  box-shadow: var(--glow), inset 0 0 30px rgba(255,140,0,.02);
}
.metric { text-align:center; }
.metric-value {
  font-size:34px; font-weight:800; letter-spacing:-1.5px;
  font-family:'Space Grotesk', sans-serif;
  background:linear-gradient(135deg, var(--orange-l), var(--orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 10px rgba(255,140,0,.3));
}
.metric-label { font-size:11px; color:var(--text-3); margin-top:2px; text-transform:uppercase; letter-spacing:1.5px; }
.metric-sep { width:1px; height:40px; background:rgba(255,140,0,.1); }

/* ===== MARQUEE ===== */
.marquee-bar {
  border-top:1px solid rgba(255,140,0,.06);
  border-bottom:1px solid rgba(255,140,0,.06);
  padding:14px 0; overflow:hidden;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.03), transparent);
}
.marquee-track {
  display:flex; align-items:center; gap:24px;
  animation: marquee 25s linear infinite;
  width:max-content;
}
.marquee-track span {
  font-size:12px; font-weight:600; letter-spacing:3px;
  color:var(--text-3); white-space:nowrap;
}
.marquee-dot {
  width:5px; height:5px; border-radius:50%; background:var(--orange); flex-shrink:0;
  box-shadow: 0 0 8px var(--orange);
}
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ===== SECTIONS COMMON ===== */
section { padding:100px 0; position:relative; }

.section-header { text-align:center; margin-bottom:64px; }
.section-tag {
  display:inline-block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:3px;
  color:var(--orange); margin-bottom:14px;
  text-shadow: 0 0 20px rgba(255,140,0,.3);
}
.section-header h2 {
  font-size:clamp(30px,4.5vw,48px); font-weight:800;
  letter-spacing:-1.5px; margin-bottom:16px;
}
.section-desc { color:var(--text-2); font-size:16px; max-width:560px; margin:0 auto; font-family:'Inter',sans-serif; }

/* ===== ABOUT GRID ===== */
.about { overflow:hidden; }
.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.about-card {
  position:relative; background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px 28px;
  transition:all .4s cubic-bezier(.4,0,.2,1); overflow:hidden;
  backdrop-filter:blur(16px);
}
.about-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity:0; transition:opacity .4s;
}
.about-card:hover {
  border-color:var(--border-h);
  transform:translateY(-6px);
  background:var(--bg-card-h);
  box-shadow: var(--glow-strong);
}
.about-card:hover::before { opacity:.6; }

.about-card-number {
  position:absolute; top:-10px; right:16px;
  font-size:80px; font-weight:900; letter-spacing:-4px;
  color:var(--orange); opacity:.04; transition:opacity .4s;
  line-height:1; pointer-events:none;
}
.about-card:hover .about-card-number { opacity:.12; }

.about-card-icon { width:48px; height:48px; margin-bottom:20px; filter: drop-shadow(0 0 8px rgba(255,140,0,.2)); }
.about-card-icon svg { width:100%; height:100%; }

.about-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; letter-spacing:-.3px; }
.about-card p { font-size:14px; color:var(--text-2); line-height:1.7; font-family:'Inter',sans-serif; }

/* ===== TECHNOLOGY ===== */
.technology {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,140,0,.04) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,140,0,.04) 0%, transparent 50%);
}
.tech-layout { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }

.tech-content h2 { font-size:clamp(28px,3.5vw,38px); font-weight:800; letter-spacing:-1px; margin-bottom:16px; }
.tech-content > p { color:var(--text-2); font-size:15px; line-height:1.8; margin-bottom:32px; font-family:'Inter',sans-serif; }

.tech-benefits { display:flex; flex-direction:column; gap:20px; }
.tech-benefit { display:flex; gap:14px; align-items:flex-start; }
.tech-benefit-icon {
  width:40px; height:40px; min-width:40px; border-radius:10px;
  background:var(--orange-bg); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,140,0,.1);
  box-shadow: 0 0 15px rgba(255,140,0,.06);
}
.tech-benefit strong { display:block; font-size:14px; font-weight:600; margin-bottom:2px; }
.tech-benefit span { font-size:13px; color:var(--text-2); line-height:1.6; font-family:'Inter',sans-serif; }

/* Blockchain Viz */
.blockchain-viz { display:flex; flex-direction:column; align-items:center; gap:0; }

.chain-block {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:18px 24px; width:100%; max-width:320px;
  position:relative; transition:all .3s;
  backdrop-filter:blur(12px);
  animation: fadeInBlock .6s ease both;
  animation-delay: var(--delay);
}
@keyframes fadeInBlock { from{opacity:0; transform:translateX(-20px)} to{opacity:1; transform:translateX(0)} }

.chain-block:hover { border-color:var(--border-h); box-shadow: var(--glow); }
.chain-block.active {
  border-color:var(--orange);
  box-shadow: var(--glow-strong);
  background: rgba(255,140,0,.04);
}

.block-status {
  position:absolute; top:10px; right:12px;
  font-size:9px; font-weight:700; letter-spacing:2px;
  color:var(--orange); background:var(--orange-bg2);
  padding:2px 8px; border-radius:4px;
  animation: blink 1.5s infinite;
  box-shadow: 0 0 10px rgba(255,140,0,.2);
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.block-hash { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--orange); font-weight:500; text-shadow: 0 0 10px rgba(255,140,0,.3); }
.block-label { font-size:12px; color:var(--text-2); margin-top:4px; }
.block-txs { font-size:11px; color:var(--text-3); margin-top:2px; }

.block-progress { margin-top:8px; height:3px; background:rgba(255,140,0,.1); border-radius:3px; overflow:hidden; }
.block-progress-bar {
  height:100%; width:60%;
  background:linear-gradient(90deg, var(--orange), var(--red));
  border-radius:3px;
  animation: progressFill 3s ease infinite;
  box-shadow: 0 0 8px var(--orange);
}
@keyframes progressFill { 0%{width:0} 50%{width:80%} 100%{width:100%} }

.chain-link { display:flex; justify-content:center; padding:4px 0; }
.chain-link-line {
  width:2px; height:20px;
  background:linear-gradient(var(--orange), transparent);
  opacity:.4; box-shadow: 0 0 6px rgba(255,140,0,.2);
}

/* ===== DASHBOARD ===== */
.dashboard-section {
  background: radial-gradient(ellipse 100% 50% at 50% 50%, rgba(255,140,0,.03) 0%, transparent 60%);
}

.dashboard { display:flex; flex-direction:column; gap:16px; }
.dash-row { display:grid; gap:16px; }
.dash-row:first-child { grid-template-columns: 2fr 1fr 1fr; }
.dash-row:last-child { grid-template-columns: repeat(4,1fr); }

.dash-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:24px; transition:all .35s;
  backdrop-filter:blur(16px);
  position:relative; overflow:hidden;
}
.dash-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,140,0,.15), transparent);
}
.dash-card:hover {
  border-color:var(--border-h);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

.dash-card.big { grid-row: span 1; }

.dash-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dash-label { font-size:12px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.dash-badge {
  font-size:10px; font-weight:600; padding:3px 10px; border-radius:100px;
  letter-spacing:.5px;
}
.dash-badge.success {
  color:var(--green); background:rgba(34,197,94,.1);
  box-shadow: 0 0 10px rgba(34,197,94,.1);
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse { 0%,100%{ box-shadow: 0 0 10px rgba(34,197,94,.1); } 50%{ box-shadow: 0 0 20px rgba(34,197,94,.2); } }

.dash-trend { font-size:12px; font-weight:600; }
.dash-trend.up, .dash-trend.down { color:var(--green); }

.dash-big-value {
  font-size:58px; font-weight:900; letter-spacing:-3px;
  background:linear-gradient(135deg, var(--orange-l), var(--orange));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 20px rgba(255,140,0,.3));
}
.dash-big-value span { font-size:36px; }

.dash-value {
  font-size:32px; font-weight:800; letter-spacing:-1px; color:var(--text);
  text-shadow: 0 0 30px rgba(255,140,0,.08);
}
.dash-value span { font-size:16px; color:var(--text-2); font-weight:500; }

.dash-sub { font-size:12px; color:var(--text-3); margin-top:4px; }

.dash-chart { margin-top:12px; }
.dash-chart svg { width:100%; height:60px; }

/* ===== LIVE FEED BAR ===== */
.live-feed-bar {
  display:flex; align-items:center; gap:16px;
  padding:10px 24px; border-bottom:1px solid rgba(255,140,0,.06);
  background:rgba(255,140,0,.02); overflow:hidden;
}
.live-feed-label {
  display:flex; align-items:center; gap:8px;
  font-size:10px; font-weight:700; letter-spacing:2px;
  color:var(--orange); white-space:nowrap;
}
.live-dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 2s infinite;
}
.live-feed-track {
  display:flex; gap:16px; overflow:hidden; flex:1;
}

/* ===== DIFFERENTIALS GRID ===== */
.diff-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  margin-top:48px;
}
.diff-item {
  display:flex; gap:14px; align-items:flex-start;
  padding:20px; border-radius:var(--r);
  background:rgba(255,140,0,.02); border:1px solid rgba(255,140,0,.06);
  transition:all .3s;
}
.diff-item:hover { border-color:var(--border-h); background:rgba(255,140,0,.04); }
.diff-icon {
  width:36px; height:36px; min-width:36px; border-radius:8px;
  background:var(--orange-bg); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,140,0,.1);
}
.diff-item strong { display:block; font-size:14px; font-weight:600; margin-bottom:2px; }
.diff-item span { font-size:13px; color:var(--text-2); line-height:1.6; font-family:'Inter',sans-serif; }

/* ===== ARCHITECTURE ===== */
.architecture {
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,140,0,.03), transparent);
}
.arch-flow {
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:wrap; margin-bottom:48px;
}
.arch-node {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px 16px; text-align:center;
}
.arch-node span {
  font-size:11px; color:var(--text-2); font-weight:600;
  letter-spacing:.5px; white-space:nowrap;
}
.arch-node-icon {
  width:56px; height:56px; border-radius:14px;
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2); transition:all .3s;
}
.arch-node-icon.active {
  border-color:var(--orange); color:var(--orange);
  background:rgba(255,140,0,.06);
  box-shadow:0 0 20px rgba(255,140,0,.15);
}
.arch-node-icon.success {
  border-color:var(--green); color:var(--green);
  background:rgba(34,197,94,.06);
  box-shadow:0 0 20px rgba(34,197,94,.15);
}
.arch-arrow {
  display:flex; align-items:center; padding:0 4px;
}
.arch-details {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.arch-detail-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:20px; transition:all .3s;
  position:relative;
}
.arch-detail-card:hover { border-color:var(--border-h); box-shadow:var(--glow); }
.arch-detail-step {
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg, var(--orange), var(--red));
  color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
  box-shadow:0 0 15px rgba(255,140,0,.2);
}
.arch-detail-card h4 { font-size:14px; font-weight:700; margin-bottom:6px; }
.arch-detail-card p { font-size:13px; color:var(--text-2); line-height:1.6; font-family:'Inter',sans-serif; }

/* ===== USE CASES ===== */
.usecases {
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,140,0,.03), transparent);
}
.usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.usecase-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:28px; transition:all .4s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(12px); position:relative; overflow:hidden;
}
.usecase-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,140,0,.06), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.usecase-card:hover {
  border-color:var(--border-bright);
  transform:translateY(-4px) scale(1.01);
  box-shadow: var(--glow-strong);
}
.usecase-card:hover::before { opacity:1; }

.usecase-icon {
  width:48px; height:48px; border-radius:12px;
  background:var(--orange-bg); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; border:1px solid rgba(255,140,0,.1);
  box-shadow: 0 0 12px rgba(255,140,0,.08);
  position:relative; z-index:1;
}

.usecase-card h3 { font-size:16px; font-weight:700; margin-bottom:8px; letter-spacing:-.2px; position:relative; z-index:1; }
.usecase-card p { font-size:13px; color:var(--text-2); line-height:1.7; font-family:'Inter',sans-serif; position:relative; z-index:1; }

/* ===== SPLIT LAYOUTS (PIX & OTC) ===== */
.pix-section {
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(255,140,0,.03), transparent),
    radial-gradient(ellipse 40% 30% at 80% 50%, rgba(255,69,0,.02), transparent);
}
.otc-section {
  background:
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255,140,0,.03), transparent),
    radial-gradient(ellipse 40% 30% at 20% 50%, rgba(255,69,0,.02), transparent);
}

.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-layout.reverse { direction:rtl; }
.split-layout.reverse > * { direction:ltr; }

.split-content h2 { font-size:clamp(26px,3.5vw,36px); font-weight:800; letter-spacing:-1px; margin-bottom:16px; }
.split-content > p { color:var(--text-2); font-size:15px; line-height:1.8; margin-bottom:28px; font-family:'Inter',sans-serif; }

.feature-list { display:flex; flex-direction:column; gap:18px; }
.feature-item { display:flex; gap:14px; align-items:flex-start; }
.feature-icon-box {
  width:40px; height:40px; min-width:40px; border-radius:10px;
  background:var(--orange-bg); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,140,0,.1);
  box-shadow: 0 0 12px rgba(255,140,0,.06);
}
.feature-item strong { display:block; font-size:14px; font-weight:600; margin-bottom:2px; }
.feature-item span { font-size:13px; color:var(--text-2); line-height:1.5; font-family:'Inter',sans-serif; }

/* Code Window */
.code-window {
  background:rgba(8,8,16,.8); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,.5), var(--glow);
  backdrop-filter:blur(20px);
  position:relative;
}
.code-window::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 10%, var(--orange) 50%, transparent 90%);
  opacity:.3;
}
.code-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.01);
}
.code-dots { display:flex; gap:6px; }
.code-dots span { width:10px; height:10px; border-radius:50%; }
.code-dots span:nth-child(1) { background:#ff5f57; box-shadow: 0 0 6px rgba(255,95,87,.3); }
.code-dots span:nth-child(2) { background:#febc2e; box-shadow: 0 0 6px rgba(254,188,46,.3); }
.code-dots span:nth-child(3) { background:#28c840; box-shadow: 0 0 6px rgba(40,200,64,.3); }
.code-title { font-size:12px; color:var(--text-3); font-family:'JetBrains Mono',monospace; }
.code-lang {
  margin-left:auto; font-size:10px; color:var(--orange);
  background:var(--orange-bg2); padding:2px 8px; border-radius:4px;
  font-weight:600; letter-spacing:.5px;
  box-shadow: 0 0 8px rgba(255,140,0,.1);
}

.code-body {
  padding:20px; overflow-x:auto;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.9;
  color:var(--text-2);
}
.c-comment { color:#3e3e50; }
.c-cmd { color:var(--orange); text-shadow: 0 0 8px rgba(255,140,0,.2); }
.c-str { color:#22c55e; text-shadow: 0 0 8px rgba(34,197,94,.15); }
.c-num { color:#ffb347; text-shadow: 0 0 8px rgba(255,179,71,.15); }

/* ===== STEPS TIMELINE ===== */
.how-section {
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,140,0,.02), transparent);
}

.steps-timeline {
  display:flex; flex-direction:column; gap:0;
  max-width:600px; margin:0 auto 48px;
}
.step { display:flex; gap:24px; }
.step-marker { display:flex; flex-direction:column; align-items:center; }
.step-num {
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg, var(--orange), var(--red));
  color:#fff; font-size:16px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow: 0 0 30px rgba(255,140,0,.3), 0 0 60px rgba(255,69,0,.1);
}
.step-line {
  width:2px; flex:1; min-height:40px;
  background:linear-gradient(var(--orange), transparent);
  opacity:.25; margin:8px 0;
  box-shadow: 0 0 6px rgba(255,140,0,.15);
}
.step-body { padding-bottom:32px; }
.step-body h3 { font-size:17px; font-weight:700; margin-bottom:6px; }
.step-body p { font-size:14px; color:var(--text-2); line-height:1.6; font-family:'Inter',sans-serif; }

/* Docs CTA */
.docs-cta { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:700px; margin:0 auto; }

.docs-link-card {
  display:flex; align-items:center; gap:16px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:20px 24px; transition:all .35s;
  backdrop-filter:blur(12px);
}
.docs-link-card:hover {
  border-color:var(--border-bright);
  transform:translateY(-3px);
  box-shadow: var(--glow-strong);
}

.dlc-icon {
  width:44px; height:44px; min-width:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-bg); color:var(--orange);
  border:1px solid rgba(255,140,0,.1);
}

.docs-link-card strong { display:block; font-size:14px; margin-bottom:2px; }
.docs-link-card span { font-size:12px; color:var(--text-2); }
.dlc-arrow { margin-left:auto; color:var(--text-3); flex-shrink:0; transition:transform .3s; }
.docs-link-card:hover .dlc-arrow { transform:translate(3px, -3px); color:var(--orange); }

/* ===== CTA ===== */
.cta-section { padding:60px 0 100px; }

.cta-box {
  position:relative; border-radius:var(--r-xl);
  border:1px solid rgba(255,140,0,.1);
  background:var(--bg-card);
  overflow:hidden;
  backdrop-filter:blur(20px);
}
.cta-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 20%, var(--orange) 50%, transparent 80%);
  opacity:.4;
}
.cta-orb {
  position:absolute; border-radius:50%; filter:blur(120px);
  pointer-events:none;
}
.cta-orb-1 {
  width:600px; height:350px; top:-150px; left:-120px;
  background:var(--orange); opacity:.08;
  animation: orbFloat 8s ease-in-out infinite;
}
.cta-orb-2 {
  width:500px; height:300px; bottom:-120px; right:-100px;
  background:var(--red); opacity:.06;
  animation: orbFloat 8s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%,100% { transform:translate(0,0); }
  50% { transform:translate(20px, -15px); }
}

.cta-inner {
  position:relative; z-index:1; text-align:center; padding:80px 40px;
}
.cta-inner h2 {
  font-size:clamp(28px,4vw,44px); font-weight:800;
  letter-spacing:-1.5px; margin-bottom:16px;
}
.cta-inner p {
  color:var(--text-2); font-size:16px; max-width:500px;
  margin:0 auto 32px; font-family:'Inter',sans-serif;
}
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== FOOTER ===== */
.footer { border-top:1px solid rgba(255,140,0,.06); padding:60px 0 32px; }

.footer-top { display:grid; grid-template-columns:1.5fr 2fr; gap:48px; margin-bottom:40px; }

.footer-brand p { font-size:13px; color:var(--text-2); margin-top:12px; max-width:280px; line-height:1.7; font-family:'Inter',sans-serif; }

.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.footer-col h4 {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:var(--text-3); margin-bottom:16px;
}
.footer-col a {
  display:block; font-size:14px; color:var(--text-2);
  margin-bottom:10px; transition:all .2s;
}
.footer-col a:hover { color:var(--orange); text-shadow: 0 0 10px rgba(255,140,0,.2); }

.footer-bottom {
  border-top:1px solid rgba(255,140,0,.06); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-bottom p { font-size:12px; color:var(--text-3); }
.footer-tagline { font-style:italic; }

/* ===== TESTIMONIALS ===== */
.testimonials-section {
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,140,0,.03), transparent);
}
.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.testimonial-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px;
  transition:all .4s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(12px); position:relative;
}
.testimonial-card:hover {
  border-color:var(--border-h); transform:translateY(-4px);
  box-shadow: var(--glow);
}
.testimonial-stars {
  color:var(--orange); font-size:16px; letter-spacing:2px;
  margin-bottom:14px; filter:drop-shadow(0 0 6px rgba(255,140,0,.3));
}
.testimonial-card p {
  font-size:14px; color:var(--text-2); line-height:1.7;
  font-family:'Inter',sans-serif; margin-bottom:18px; font-style:italic;
}
.testimonial-author {
  display:flex; align-items:center; gap:12px;
}
.testimonial-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange), var(--red));
  color:#fff; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 12px rgba(255,140,0,.2);
}
.testimonial-author strong { display:block; font-size:14px; font-weight:600; }
.testimonial-author span { font-size:12px; color:var(--text-3); }

/* ===== FAQ ===== */
.faq-section {
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,140,0,.02), transparent);
}
.faq-list {
  max-width:720px; margin:0 auto;
  display:flex; flex-direction:column; gap:12px;
}
.faq-item {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  transition:all .3s;
}
.faq-item:hover { border-color:var(--border-h); }
.faq-item.open { border-color:rgba(255,140,0,.25); box-shadow:var(--glow); }

.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:18px 20px;
  background:transparent; border:none; cursor:pointer;
  color:var(--text); font-size:15px; font-weight:600;
  font-family:'Space Grotesk','Inter',sans-serif;
  text-align:left; gap:16px;
}
.faq-question:hover { color:var(--orange); }
.faq-chevron {
  flex-shrink:0; color:var(--text-3);
  transition:transform .3s ease, color .3s;
}
.faq-item.open .faq-chevron { color:var(--orange); }

.faq-answer {
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
  padding:0 20px;
}
.faq-answer p {
  font-size:14px; color:var(--text-2); line-height:1.7;
  font-family:'Inter',sans-serif;
}

/* ===== FLOATING ORBS (JS controlled) ===== */
.floating-orb {
  position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(80px);
  animation: floatOrb 20s ease-in-out infinite;
}
.floating-orb:nth-child(1) {
  width:400px; height:400px; background:rgba(255,140,0,.04);
  top:20%; left:-100px; animation-delay:0s;
}
.floating-orb:nth-child(2) {
  width:300px; height:300px; background:rgba(255,69,0,.03);
  top:60%; right:-80px; animation-delay:-7s;
}
.floating-orb:nth-child(3) {
  width:250px; height:250px; background:rgba(255,140,0,.03);
  bottom:10%; left:30%; animation-delay:-14s;
}
@keyframes floatOrb {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(30px,-40px) scale(1.1); }
  66% { transform:translate(-20px,30px) scale(.9); }
}

/* ===== CURSOR GLOW (JS controlled) ===== */
.cursor-glow {
  position:fixed; width:300px; height:300px;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(255,140,0,.06), transparent 60%);
  transform:translate(-50%,-50%);
  transition: left .3s ease, top .3s ease;
}

/* ===== ANIMATIONS ===== */
[data-animate] { opacity:0; transform:translateY(32px); transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
[data-animate].visible { opacity:1; transform:translateY(0); }

/* ===== TILT CARDS (JS class) ===== */
.tilt-card {
  transform-style:preserve-3d;
  perspective:1000px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .split-layout, .tech-layout { grid-template-columns:1fr; gap:40px; }
  .split-layout.reverse { direction:ltr; }
  .about-grid, .usecase-grid { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:repeat(2,1fr); }
  .arch-details { grid-template-columns:repeat(2,1fr); }
  .diff-grid { grid-template-columns:1fr; }
  .dash-row:first-child { grid-template-columns:1fr; }
  .dash-row:last-child { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  body::after { display:none; }
  .cursor-glow, .floating-orb { display:none; }

  .nav-links, .nav-actions { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(5,5,8,.96); backdrop-filter:blur(24px);
    padding:24px; gap:16px; border-bottom:1px solid var(--border);
  }
  .mobile-toggle { display:flex; }
  .mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .mobile-toggle.active span:nth-child(2) { opacity:0; }
  .mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  .about-grid, .usecase-grid, .testimonials-grid { grid-template-columns:1fr; }
  .arch-flow { flex-direction:column; gap:4px; }
  .arch-arrow { transform:rotate(90deg); }
  .arch-details { grid-template-columns:1fr; }
  .diff-grid { grid-template-columns:1fr; }
  .dash-row:last-child { grid-template-columns:1fr; }

  .hero-metrics { flex-direction:column; gap:20px; }
  .metric-sep { width:40px; height:1px; }

  .docs-cta { grid-template-columns:1fr; }

  .footer-top { grid-template-columns:1fr; }
  .footer-links { grid-template-columns:repeat(3,1fr); }
  .footer-bottom { flex-direction:column; gap:4px; text-align:center; }
}

@media (max-width:480px) {
  .hero h1 { letter-spacing:-1.5px; }
  .footer-links { grid-template-columns:1fr; }
  section { padding:72px 0; }
}