/* Fonts loaded via <link> in header for better performance */

/* ── THEME VARIABLES ─────────────────────────────────── */
:root {
  --blue:    #3AB9FF;
  --blue2:   #1A9FE8;
  --blue3:   #0D7FC0;
  --fh: 'Barlow Condensed', sans-serif;
  --fb: 'Barlow', sans-serif;
}

/* Dark Mode (default) */
[data-theme="dark"] {
  --bg:      #07090F;
  --bg2:     #0C0F1A;
  --card:    #111525;
  --card2:   #161B2E;
  --border:  rgba(58,185,255,0.1);
  --border2: rgba(255,255,255,0.06);
  --white:   #F0F4FF;
  --muted:   #7A8BAA;
  --muted2:  #3A4560;
  --nav-bg:  rgba(7,9,15,0.92);
  --mobn-bg: #0C0F1A;
}

/* Light Mode */
[data-theme="light"] {
  --bg:      #F4F7FF;
  --bg2:     #EAEEF8;
  --card:    #FFFFFF;
  --card2:   #F0F4FF;
  --border:  rgba(58,185,255,0.2);
  --border2: rgba(0,0,0,0.08);
  --white:   #0D1120;
  --muted:   #4A5570;
  --muted2:  #8A96B0;
  --nav-bg:  rgba(244,247,255,0.94);
  --mobn-bg: #EAEEF8;
}

/* ── GLOBAL ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--fb);
  overflow-x: hidden;
  cursor: none;
  transition: background .35s ease, color .35s ease;
}

/* ── CURSOR ──────────────────────────────────────────── */
.cur  { width:10px; height:10px; background:#3AB9FF; border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .12s; }
.cur-r{ width:32px; height:32px; border:1.5px solid rgba(58,185,255,.4); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .22s,height .22s,border-color .2s; }
.cur.big   { transform:translate(-50%,-50%) scale(2.4); background:rgba(58,185,255,.6); }
.cur-r.big { width:50px; height:50px; border-color:rgba(58,185,255,.7); }

/* ── NAV ─────────────────────────────────────────────── */
nav.main-nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw; height:62px;
  background:var(--nav-bg); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  transition: background .35s ease, border-color .35s ease;
}
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img { height:32px; width:auto; max-width:160px; display:block; }
.logo-text { display:none; }

.nav-right { display:flex; align-items:center; gap:20px; }
nav.main-nav ul { list-style:none; display:flex; gap:26px; align-items:center; }
nav.main-nav ul a { font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
nav.main-nav ul a:hover, nav.main-nav ul a.active { color:var(--white); }
.nav-cta { background:var(--blue) !important; color:#07090F !important; padding:8px 18px; border-radius:4px; font-weight:700 !important; }
.nav-cta:hover { background:var(--blue2) !important; }

/* ── THEME TOGGLE ────────────────────────────────────── */
.theme-toggle {
  position:relative; width:44px; height:24px;
  border-radius:100px; border:none; cursor:pointer; flex-shrink:0; outline:none;
  transition: background .3s ease;
}
[data-theme="dark"]  .theme-toggle { background: rgba(58,185,255,.12); border:1.5px solid rgba(58,185,255,.25); }
[data-theme="light"] .theme-toggle { background: rgba(58,185,255,.15); border:1.5px solid rgba(58,185,255,.35); }

.tknob {
  position:absolute; top:3px; width:16px; height:16px;
  border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; line-height:1;
  transition: left .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
[data-theme="dark"]  .tknob { left:3px; }
[data-theme="light"] .tknob { left:23px; }

.ticon { line-height:1; font-size:.6rem; }
.ticon-moon { display:block; }
.ticon-sun  { display:none; }
[data-theme="light"] .ticon-moon { display:none; }
[data-theme="light"] .ticon-sun  { display:block; }

/* Tooltip */
.theme-toggle::after {
  content: attr(data-tip);
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--card); color:var(--muted); border:1px solid var(--border);
  font-family:var(--fb); font-size:.6rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.theme-toggle:hover::after { opacity:1; }

/* Hamburger */
.hb { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hb span { width:22px; height:1.5px; background:var(--white); display:block; transition:background .35s, transform .3s; }

/* ── MOBILE NAV ──────────────────────────────────────── */
.mobn {
  position:fixed; inset:0; background:var(--mobn-bg); z-index:800;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:28px;
  opacity:0; pointer-events:none; transition:opacity .3s, background .35s ease;
}
.mobn.open { opacity:1; pointer-events:all; }
.mobn a { font-family:var(--fh); font-size:2.8rem; font-weight:900; color:var(--white); text-decoration:none; transition:.2s; }
.mobn a:hover { color:var(--blue); }
.mobn-close { position:absolute; top:22px; right:5vw; font-size:1.6rem; color:var(--muted); cursor:pointer; background:none; border:none; }
.mobn-divider { width:40px; height:1.5px; background:var(--border); margin:4px 0; }
.mobn-toggle-row { display:flex; align-items:center; gap:12px; }
.mobn-toggle-label { font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ── SECTIONS ────────────────────────────────────────── */
section { padding:96px 5vw; }
.stag { display:inline-flex; align-items:center; gap:10px; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.stag::before { content:''; width:22px; height:1.5px; background:var(--blue); }
h2.stitle { font-family:var(--fh); font-size:clamp(2.8rem,5vw,5rem); font-weight:900; line-height:.93; letter-spacing:-.01em; margin-bottom:20px; }
.sdesc { color:var(--muted); font-size:.98rem; line-height:1.78; max-width:440px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-b {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#07090F;
  padding:13px 28px; border-radius:4px;
  font-family:var(--fh); font-size:.95rem; font-weight:800; letter-spacing:.05em;
  text-decoration:none; border:none; cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.btn-b:hover { background:var(--blue2); transform:translateY(-2px); box-shadow:0 10px 32px rgba(58,185,255,.28); }
.btn-o {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--muted);
  padding:13px 28px; border-radius:4px;
  font-family:var(--fh); font-size:.95rem; font-weight:800; letter-spacing:.05em;
  text-decoration:none; border:1.5px solid var(--border2); cursor:pointer;
  transition:border-color .2s, color .2s;
}
.btn-o:hover { border-color:rgba(58,185,255,.4); color:var(--white); }

/* ── MARQUEE ─────────────────────────────────────────── */
.mwrap { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; padding:12px 0; transition:background .35s ease; }
.mi2 { display:flex; width:max-content; animation:mq 22s linear infinite; }
.mit { display:flex; align-items:center; gap:14px; padding:0 26px; font-family:var(--fh); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); white-space:nowrap; }
.mit::after { content:'◆'; font-size:.35rem; opacity:.5; color:var(--blue); }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── REVEAL ──────────────────────────────────────────── */
.rev { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.rev.vis { opacity:1; transform:translateY(0); }

/* ── PAGE HERO ───────────────────────────────────────── */
.page-hero {
  background:var(--bg2); padding:118px 5vw 74px;
  border-bottom:1px solid var(--border); position:relative; overflow:hidden;
  transition:background .35s ease;
}
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 55% 80% at 80% 50%, rgba(58,185,255,.07), transparent 60%); pointer-events:none; }
.ph-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(58,185,255,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(58,185,255,.025) 1px, transparent 1px); background-size:80px 80px; pointer-events:none; }
.breadcrumb { font-size:.72rem; color:var(--muted2); margin-bottom:14px; }
.breadcrumb a { color:var(--muted); text-decoration:none; transition:.2s; }
.breadcrumb a:hover { color:var(--blue); }
.breadcrumb span { margin:0 8px; opacity:.4; }

/* ── FOOTER ──────────────────────────────────────────── */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:52px 5vw 26px; transition:background .35s ease; }
.ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; }
.fbrand p { font-size:.83rem; color:var(--muted); line-height:1.72; max-width:240px; margin-top:14px; }
.fcol h4 { font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); margin-bottom:16px; }
.fcol ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.fcol ul a { font-size:.83rem; color:var(--muted); text-decoration:none; transition:.2s; }
.fcol ul a:hover { color:var(--blue); }
.fbot { display:flex; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border2); flex-wrap:wrap; gap:14px; }
.fbot p { font-size:.74rem; color:var(--muted2); }
.fsocs { display:flex; gap:8px; }
.fsoc { width:32px; height:32px; border-radius:4px; border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--muted); font-size:.72rem; font-weight:700; transition:.2s; }
.fsoc:hover { border-color:var(--blue); color:var(--blue); }

/* ── LIGHT MODE OVERRIDES ────────────────────────────── */
[data-theme="light"] h1.hh .o { -webkit-text-stroke: 1.5px rgba(13,17,32,.2); }
[data-theme="light"] .sv-n,
[data-theme="light"] .svn,
[data-theme="light"] .wn,
[data-theme="light"] .abgt,
[data-theme="light"] .tbg,
[data-theme="light"] .how-num,
[data-theme="light"] .camp-rank { color: rgba(13,17,32,.06) !important; }
[data-theme="light"] .ctv-screen { background: #1a1e2e; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width:960px) {
  nav.main-nav ul { display:none; }
  .hb { display:flex; }
  .ftop { grid-template-columns:1fr 1fr; }
  .fbot { flex-direction:column; gap:12px; text-align:center; }
  section { padding:72px 5vw; }
}
@media (max-width:560px) {
  .ftop { grid-template-columns:1fr; }
}