/* ══════════════════════════════════════════════
   Brain Power — Global Design System v2
   Theme: Bioluminescent Dark
══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; cursor: pointer }

/* ─── CSS Variables (Light theme default) ─── */
:root {
  --bg: #f5f7ff;
  --bg-2: #edf0fb;
  --bg-3: #e3e8f7;
  --surface: rgba(255,255,255,0.90);
  --surface-2: rgba(255,255,255,0.98);
  --border: rgba(0,0,0,0.07);
  --text: #0d1f3c;
  --text-2: #5a6e8c;
  --brand: #1a6fdb;
  --brand-2: #1254b8;
  --brand-dim: rgba(26,111,219,0.09);
  --brand-glow: rgba(26,111,219,0.22);
  --accent: #6366f1;
  /* Legacy aliases for privacy-policy.css */
  --muted: var(--text-2);
  --line: var(--border);
  --card: var(--surface);
  --soft: var(--bg-2);
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.07);
  --shadow: 0 12px 48px rgba(0,0,0,0.10);
  --shadow-2: 0 24px 64px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ─── Layout ─── */
.container { width: min(1140px, 100% - 32px); margin-inline: auto }
.center { text-align: center }

/* ─── Skip link ─── */
.skip-link { position:absolute;left:-999px;top:16px;background:var(--brand);color:#030a0f;padding:10px 14px;border-radius:10px;z-index:999;font-weight:700 }
.skip-link:focus { left:16px }

/* ─── Header ─── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,247,255,0.75);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(245,247,255,0.97);
  border-color: rgba(26,111,219,0.18);
}
.header-inner { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 }

.brand { display:flex;align-items:center;gap:10px }
.brand-logo { width:30px;height:30px;object-fit:contain }
.brand-name {
  font-family: "Archivo Black", Inter, system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: .3px;
  color: var(--text);
}

.site-nav { display:flex;align-items:center;gap:28px }
.nav-link {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-2); position: relative; padding: 6px 0;
  transition: color .2s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--text) }
.nav-link::after {
  content:""; position:absolute; left:0; right:100%; bottom:-1px;
  height:1px; background:var(--brand); transition:right .3s var(--ease);
  border-radius:999px;
}
.nav-link:hover::after, .nav-link.is-active::after { right:0 }

.nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface);
  transition: border-color .2s var(--ease);
}
.nav-toggle:hover { border-color:var(--brand) }
.nav-toggle-lines { display:block;width:18px;height:1.5px;background:var(--text);position:relative;border-radius:99px }
.nav-toggle-lines::before,.nav-toggle-lines::after { content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--text);border-radius:99px }
.nav-toggle-lines::before { top:-6px }
.nav-toggle-lines::after { top:6px }

/* ─── Hero ─── */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 64px);
  display: flex; align-items: center;
  padding: 80px 0 60px;
}
.hero-bg { position:absolute;inset:0;pointer-events:none;overflow:hidden }
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .55;
}
.hero-orb--1 {
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(26,111,219,.35) 0%,transparent 70%);
  top:-250px;left:-150px;
  animation: orb1 14s ease-in-out infinite;
}
.hero-orb--2 {
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(33,150,255,.3) 0%,transparent 70%);
  bottom:-80px;right:-80px;
  animation: orb2 18s ease-in-out infinite;
}
.hero-orb--3 {
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(26,111,219,.18) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation: orb3 11s ease-in-out infinite;
}
.hero-grid {
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,rgba(0,0,0,.6) 0%,transparent 100%);
}

.hero-inner { display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative }

.hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;margin-bottom:20px;
  border:1px solid rgba(26,111,219,.28);
  background:rgba(26,111,219,.07);border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);
}
.hero-badge-dot {
  width:6px;height:6px;background:var(--brand);border-radius:50%;
  animation:pulse-dot 2s ease-in-out infinite;
}

.hero-title {
  margin:0 0 18px;
  font-family:"Archivo Black",Inter,system-ui,sans-serif;
  font-size:48px;line-height:1.06;letter-spacing:.2px;
  color:var(--text);
}
.gradient-text {
  background:linear-gradient(135deg,var(--brand) 0%,#93c5fd 45%,var(--accent) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradient-pan 4s linear infinite;
}
.hero-subtitle { margin:0 0 28px;color:var(--text-2);font-size:15px;max-width:50ch;line-height:1.75 }
.hero-actions { display:flex;gap:12px;flex-wrap:wrap }

.hero-visual { position:relative;display:flex;align-items:center;justify-content:center }
.hero-visual-inner {
  display:flex;align-items:center;justify-content:center;
  padding:48px 56px;
  background:#fff;
  border-radius:32px;
  box-shadow:0 24px 80px rgba(26,111,219,.12), 0 4px 20px rgba(0,0,0,.06);
  animation:float 6s ease-in-out infinite;
}
.hero-logo {
  width:min(240px,70%);
  object-fit:contain;
  display:block;
}
.hero-apps-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px }
.hero-app-item {
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.hero-app-item:nth-child(1) { animation:float 6.0s 0.0s ease-in-out infinite }
.hero-app-item:nth-child(2) { animation:float 7.0s -1.5s ease-in-out infinite }
.hero-app-item:nth-child(3) { animation:float 6.5s -3.0s ease-in-out infinite }
.hero-app-item:nth-child(4) { animation:float 7.5s -0.8s ease-in-out infinite }
.hero-app-item:hover {
  transform:translateY(-8px) scale(1.03);
  border-color:rgba(26,111,219,.4);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(26,111,219,.15);
}
.hero-app-item img { width:100%;aspect-ratio:1/1;object-fit:cover;display:block }
.hero-app-item::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(3,10,15,.55) 0%,transparent 50%);
  pointer-events:none;
}

/* ─── Focus ─── */
:focus-visible { outline:0;box-shadow:0 0 0 3px rgba(26,111,219,.35) }

/* ─── Sections ─── */
.section { padding:90px 0 }
.section-alt { background:var(--bg-2) }
.section-head { text-align:center;margin-bottom:52px }
.section-label {
  display:inline-block;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);padding:5px 14px;
  border:1px solid rgba(26,111,219,.22);background:rgba(26,111,219,.06);
  border-radius:999px;margin-bottom:14px;
}
.section-title {
  margin:0 0 12px;
  font-family:"Archivo Black",Inter,system-ui,sans-serif;
  font-size:36px;line-height:1.1;color:var(--text);
}
.section-subtitle { margin:0 auto;color:var(--text-2);max-width:60ch;font-size:14px;line-height:1.75 }

/* ─── App cards ─── */
.cards-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px }
.cards-grid--two { grid-template-columns:repeat(2,1fr);max-width:680px;margin-inline:auto }
.cards-grid--four { grid-template-columns:repeat(4,1fr);max-width:none }

.game-card {
  position:relative;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);
  backdrop-filter:blur(10px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.game-card::before {
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(26,111,219,.07) 0%,transparent 60%);
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:1;
}
.game-card:hover {
  transform:translateY(-8px);
  border-color:rgba(26,111,219,.32);
  box-shadow:0 24px 60px rgba(0,0,0,.12),0 0 0 1px rgba(26,111,219,.16),0 0 40px rgba(26,111,219,.08);
}
.game-card:hover::before { opacity:1 }

.game-image { height:172px;background-image:var(--img);background-size:cover;background-position:center;position:relative }
.game-image::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,10,15,.12) 100%) }
.game-image--icon {
  position:relative;overflow:hidden;height:auto;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--bg-3);
}
.game-image--icon::after { display:none }

.scan-line {
  position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0;pointer-events:none;
}
.game-card:hover .scan-line { opacity:1;animation:scan-sweep 1.4s var(--ease) infinite }

.game-app-icon {
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transform:scale(1);transition:transform .6s var(--ease);
}
.game-card:hover .game-app-icon { transform:scale(1.06) }

.game-body { padding:16px 18px 20px;position:relative;z-index:2 }
.game-tag {
  display:inline-flex;align-items:center;gap:4px;
  margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-dim);
  padding:3px 10px;border-radius:999px;border:1px solid rgba(26,111,219,.18);
}
.game-title { margin:0 0 8px;font-family:"Archivo Black",Inter,system-ui,sans-serif;font-size:15px;color:var(--text);line-height:1.3 }
.game-desc { margin:0 0 14px;color:var(--text-2);font-size:12px;line-height:1.65 }
.game-actions { display:flex;gap:8px;flex-wrap:wrap }
section#apps .center { margin-top:40px }

/* ─── Buttons ─── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:14px;padding:12px 22px;border:1px solid transparent;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
}
.btn:active { transform:translateY(1px) }
.btn-primary {
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 8px 30px rgba(26,111,219,.28);
}
.btn-primary:hover { box-shadow:0 12px 40px rgba(26,111,219,.40);transform:translateY(-2px) }
.btn-ghost {
  background:var(--surface);border-color:var(--border);color:var(--text);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover {
  border-color:rgba(26,111,219,.4);color:var(--brand);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(26,111,219,.1);
}
.btn-pill {
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:999px;padding:8px 16px;font-size:11px;font-weight:700;
}
.btn-pill:hover { border-color:var(--brand);color:var(--brand);transform:translateY(-1px);background:var(--brand-dim) }
.is-disabled { opacity:.3;cursor:not-allowed;pointer-events:none }

/* ─── CTA ─── */
.section-soft {
  background:linear-gradient(135deg,rgba(26,111,219,.07) 0%,rgba(99,102,241,.05) 100%);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.cta { text-align:center;padding:40px 0 }
.cta-title { margin:0 0 12px;font-family:"Archivo Black",Inter,system-ui,sans-serif;font-size:36px;line-height:1.1;color:var(--text) }
.cta-subtitle { margin:0 auto 24px;color:var(--text-2);max-width:62ch;font-size:14px;line-height:1.75 }
.cta-actions { display:flex;justify-content:center;gap:14px;flex-wrap:wrap }

/* ─── Stats ─── */
.stats-section { padding:70px 0 90px }
.stats-panel {
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);backdrop-filter:blur(20px);padding:8px;
}
.stats-panel-inner { display:grid;grid-template-columns:repeat(4,1fr);gap:4px }
.stat-card {
  border:1px solid transparent;border-radius:20px;background:transparent;
  padding:28px 20px;text-align:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.stat-card:hover { background:var(--surface-2);border-color:rgba(26,111,219,.2);transform:translateY(-4px) }
.stat-card-icon {
  width:42px;height:42px;margin:0 auto 14px;color:var(--brand);
  background:var(--brand-dim);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .3s var(--ease);
}
.stat-card:hover .stat-card-icon { box-shadow:0 0 22px rgba(26,111,219,.35) }
.stat-card-icon svg { width:22px;height:22px }
.stat-card-value {
  font-family:"Archivo Black",Inter,system-ui,sans-serif;
  font-size:38px;letter-spacing:.2px;line-height:1;
  background:linear-gradient(135deg,var(--text) 0%,var(--brand) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-card-label { margin-top:10px;color:var(--text-2);font-size:13px;font-weight:500 }

/* ─── Contact ─── */
section#contact {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 45%, #eef2ff 100%);
  border-radius: 0;
}
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start }
.contact-items { margin-top:20px;display:grid;gap:14px }
.contact-item {
  border:1px solid rgba(0,0,0,.07);border-radius:var(--radius);
  padding:16px 18px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.contact-item:hover { border-color:rgba(26,111,219,.3);background:rgba(255,255,255,.9) }
.contact-label { font-size:10px;color:var(--brand);text-transform:uppercase;letter-spacing:.12em;font-weight:700 }
.contact-value { font-size:13px;margin-top:6px;display:inline-block;color:var(--text) }

.form {
  border:none;border-radius:28px;padding:32px;
  background:#fff;box-shadow:0 20px 80px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.06);
}
.field { display:block;margin-bottom:14px }
.field-label { display:block;font-size:10px;color:var(--text-2);margin:0 0 7px;text-transform:uppercase;letter-spacing:.1em;font-weight:600 }
.input {
  width:100%;border:1px solid rgba(0,0,0,.09);border-radius:12px;
  padding:12px 14px;font-size:13px;outline:none;
  background:#f8fafb;color:var(--text);
  font-family:inherit;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.input::placeholder { color:var(--text-2) }
.input:focus { border-color:rgba(26,111,219,.5);box-shadow:0 0 0 3px rgba(26,111,219,.1);background:#fff }
.textarea { resize:vertical;min-height:120px }
.form-note { margin:10px 0 0;color:var(--text-2);font-size:12px;min-height:18px }
.form-note-success { color:var(--brand) }
.form-note-error { color:#f87171 }

/* ─── Footer ─── */
.site-footer { background:var(--bg-2);border-top:1px solid var(--border) }
.footer-inner { display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding:48px 0 }
.footer-inner--no-social { grid-template-columns:2fr 1fr }
.footer-text { margin:14px 0 0;color:var(--text-2);font-size:12px;max-width:48ch;line-height:1.75 }
.footer-title { font-family:"Archivo Black",Inter,system-ui,sans-serif;margin-bottom:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2) }
.footer-link { display:block;color:var(--text-2);font-size:13px;margin:8px 0;transition:color .2s var(--ease) }
.footer-link:hover { color:var(--brand) }
.social { display:flex;gap:10px;align-items:center }
.social-link {
  width:36px;height:36px;border:1px solid var(--border);border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:border-color .2s var(--ease),color .2s var(--ease);
}
.social-link:hover { border-color:var(--brand);color:var(--brand) }
.social-link svg { width:16px;height:16px }
.footer-bottom {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0;border-top:1px solid var(--border);
  color:var(--text-2);font-size:12px;flex-wrap:wrap;
}
.footer-legal { display:flex;gap:18px;flex-wrap:wrap }
.footer-legal-link { color:var(--text-2);transition:color .2s var(--ease) }
.footer-legal-link:hover { color:var(--brand) }

/* ─── Reveal ─── */
[data-reveal] { opacity:0;transform:translateY(20px);filter:blur(4px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease) }
.is-revealed { opacity:1;transform:none;filter:none }

/* ─── Keyframes ─── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(70px,50px) scale(1.06)} 66%{transform:translate(-30px,70px) scale(.94)} }
@keyframes orb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-55px,-45px) scale(1.1)} }
@keyframes orb3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.4)} }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.6)} }
@keyframes gradient-pan { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes scan-sweep { 0%{top:0;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0} }

@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition:none !important;animation:none !important} }

/* ─── Light mode specific overrides ─── */
.hero-orb--1 { opacity:.35 }
.hero-orb--2 { opacity:.28 }
.hero-orb--3 { opacity:.18 }
.hero-grid {
  background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
}
.game-card { background:rgba(255,255,255,.88) }
.stat-card:hover { background:rgba(26,111,219,.04) }
.btn-ghost { background:rgba(255,255,255,.9);color:var(--text) }
.btn-pill { background:rgba(0,0,0,.05);color:var(--text) }
.site-header { background:rgba(245,247,255,.75) }
.site-header.is-scrolled { background:rgba(245,247,255,.97) }


/* ─── 980px ─── */
@media (max-width:980px) {
  .hero { min-height:auto;padding:60px 0 50px }
  .hero-inner { grid-template-columns:1fr;gap:40px }
  .hero-title { font-size:44px }
  .cards-grid { grid-template-columns:repeat(2,1fr) }
  .cards-grid--four { grid-template-columns:repeat(2,1fr) }
  .contact-grid { grid-template-columns:1fr }
  .stats-panel-inner { grid-template-columns:repeat(2,1fr) }
}

/* ─── 640px ─── */
@media (max-width:640px) {
  .site-nav {
    position:fixed;inset:66px 16px auto 16px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
    border:1px solid var(--border);border-radius:var(--radius);
    padding:14px;display:none;flex-direction:column;align-items:stretch;gap:4px;
    box-shadow:0 8px 40px rgba(0,0,0,.12);
  }
  .site-nav.is-open { display:flex }
  .nav-link { padding:10px 12px;border-radius:10px;font-size:13px }
  .nav-link::after { display:none }
  .nav-link.is-active,.nav-link:hover { background:var(--brand-dim);color:var(--brand) }
  .nav-toggle { display:inline-flex }
  .hero { padding:50px 0 40px }
  .hero-title { font-size:34px }
  .hero-apps-grid { gap:10px }
  .section { padding:64px 0 }
  .section-title { font-size:28px }
  .cta-title { font-size:28px }
  .cards-grid { grid-template-columns:1fr }
  .cards-grid--two { grid-template-columns:repeat(2,1fr);max-width:100% }
  .cards-grid--four { grid-template-columns:repeat(2,1fr) }
  .game-body { padding:12px 14px 16px }
  .game-title { font-size:13px }
  .game-desc { display:none }
  .game-actions { gap:6px }
  .game-actions .btn { font-size:10px;padding:7px 10px }
  .footer-inner { grid-template-columns:1fr }
  .stats-panel { padding:8px }
  .stats-panel-inner { grid-template-columns:repeat(2,1fr);gap:4px }
  .stat-card { padding:20px 14px }
  .stat-card-value { font-size:30px }
  .stat-card-label { font-size:12px }
}