/* ============================================================
   SB GROUP — SHARED STYLESHEET
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── Variables ── */
:root {
  --bg:      #030712;
  --bg2:     #060d1f;
  --panel:   #080f20;
  --border:  #142444;
  --border2: #1e3a6e;
  --accent:  #00d4ff;
  --accent2: #7c3aed;
  --accent3: #10b981;
  --gold:    #f59e0b;
  --danger:  #ef4444;
  --text:    #dde6f4;
  --muted:   #4e6080;
  --muted2:  #7a95b8;
  --glow-c:  rgba(0,212,255,0.18);
  --glow-p:  rgba(124,58,237,0.18);
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px;
  overflow-x: hidden;
  cursor: none;
}

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

/* ── Custom cursor ── */
.cursor {
  width:10px; height:10px;
  background: var(--accent);
  border-radius:50%;
  position:fixed; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.12s, background 0.2s;
  box-shadow:0 0 10px var(--accent), 0 0 28px rgba(0,212,255,0.35);
}
.cursor-ring {
  width:34px; height:34px;
  border:1px solid rgba(0,212,255,0.45);
  border-radius:50%;
  position:fixed; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width 0.2s, height 0.2s;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 52px;
  background:rgba(3,7,18,0.82);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(0,212,255,0.08);
}
.nav-logo {
  font-family:'Orbitron',sans-serif;
  font-size:21px; font-weight:900;
  letter-spacing:5px; color:var(--accent);
  text-decoration:none;
  text-shadow:0 0 22px rgba(0,212,255,0.45);
}
.nav-links { display:flex; gap:38px; list-style:none; }
.nav-links a {
  color:var(--muted2); text-decoration:none;
  font-family:'Rajdhani',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:2.5px; text-transform:uppercase;
  transition:color 0.2s, text-shadow 0.2s;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.nav-links a:hover,
.nav-links a.active {
  color:var(--accent);
  text-shadow:0 0 10px rgba(0,212,255,0.4);
  border-bottom-color:rgba(0,212,255,0.4);
}

/* ── Section helpers ── */
.section-tag {
  display:block;
  font-family:'Share Tech Mono',monospace;
  font-size:12px; color:var(--accent);
  letter-spacing:3.5px; text-transform:uppercase;
  margin-bottom:14px;
}
.section-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(26px,4vw,46px);
  font-weight:700; letter-spacing:4px;
}
.section-line {
  width:60px; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  margin:18px auto 0;
}
.section-header { text-align:center; margin-bottom:72px; }

/* ── Reveal animation ── */
.reveal {
  opacity:0; transform:translateY(36px);
  transition:opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Corner decorators ── */
.c-deco {
  position:absolute; width:18px; height:18px; pointer-events:none;
}
.c-deco::before,.c-deco::after { content:''; position:absolute; }
.c-deco::before { width:100%; height:1px; top:0; }
.c-deco::after  { width:1px; height:100%; left:0; }
.c-tl { top:0; left:0; }
.c-tr { top:0; right:0; transform:scaleX(-1); }
.c-bl { bottom:0; left:0; transform:scaleY(-1); }
.c-br { bottom:0; right:0; transform:scale(-1); }
.c-cyan::before,.c-cyan::after { background:var(--accent); }
.c-purple::before,.c-purple::after { background:var(--accent2); }
.c-gold::before,.c-gold::after { background:var(--gold); }

/* ── Animated background grid ── */
.grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.035) 1px, transparent 1px);
  background-size:58px 58px;
  animation:gridPulse 9s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ── Floating orbs ── */
.orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none;
  animation:orbFloat 11s ease-in-out infinite;
}
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.06)} }

/* ── Stat card ── */
.stat-card {
  padding:28px 22px;
  border:1px solid var(--border);
  background:var(--panel);
  position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0); transition:transform .4s;
}
.stat-card:hover::before { transform:scaleX(1); }
.stat-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-3px); }
.stat-number {
  font-family:'Orbitron',sans-serif;
  font-size:40px; font-weight:900;
  color:var(--accent); line-height:1; margin-bottom:8px;
  text-shadow:0 0 20px rgba(0,212,255,0.4);
}
.stat-label {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; color:var(--muted2); letter-spacing:2px; text-transform:uppercase;
}

/* ── Footer ── */
footer {
  padding:52px 52px;
  border-top:1px solid var(--border);
  background:var(--bg);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.footer-logo {
  font-family:'Orbitron',sans-serif;
  font-size:18px; font-weight:900; letter-spacing:4px; color:var(--accent);
}
.footer-copy {
  font-family:'Share Tech Mono',monospace;
  font-size:11px; color:var(--muted); letter-spacing:2px;
}
.footer-links { display:flex; gap:28px; }
.footer-links a {
  font-family:'Share Tech Mono',monospace; font-size:11px;
  color:var(--muted); text-decoration:none; letter-spacing:2px;
  transition:color .2s;
}
.footer-links a:hover { color:var(--accent); }

/* ── Hamburger menu button ── */
.nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  z-index:1100;
}
.nav-toggle span {
  display:block;
  width:24px;
  height:1.5px;
  background:var(--accent);
  transition:transform 0.3s, opacity 0.3s;
  transform-origin:center;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── Responsive ── */
@media(max-width:768px){
  nav {
    padding:14px 22px;
    flex-wrap:wrap;
    position:fixed;
  }
  .nav-toggle { display:flex; }
  .nav-links {
    display:none;
    flex-direction:column;
    width:100%;
    gap:0;
    padding:12px 0 18px;
    border-top:1px solid rgba(0,212,255,0.1);
    margin-top:10px;
  }
  .nav-links.open { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a {
    display:block;
    padding:12px 4px;
    font-size:13px;
    letter-spacing:2px;
    border-bottom:none;
  }
  footer {
    padding:40px 22px;
    flex-direction:column;
    text-align:center;
    gap:16px;
  }
  .footer-links {
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
  }
  /* Disable custom cursor on touch devices */
  .cursor, .cursor-ring { display:none; }
  body { cursor:auto; }
}