/* ═══════════════════════════════════════════════════
   T3CH D3F1L3R — Premium Cyber Aesthetic
   Palette: Deep Black · Neon Green · Electric Red · Ghost White
   Fonts: Share Tech Mono · Syne · Space Mono
═══════════════════════════════════════════════════ */

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

:root {
  --bg:       #04080a;
  --bg2:      #080e10;
  --surface:  #0d1518;
  --surface2: #111c20;
  --border:   rgba(57,255,20,.12);
  --border2:  rgba(57,255,20,.22);
  --green:    #39ff14;
  --green2:   #00e576;
  --red:      #ff3b3b;
  --red2:     #ff5f6d;
  --gold:     #fbbf24;
  --purple:   #a78bfa;
  --muted:    rgba(200,230,220,.55);
  --text:     #e0f0ea;
  --font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --font-head: 'Syne', sans-serif;
  --font-body: 'Space Mono', monospace;
  --nav-h:    64px;
  --ticker-h: 36px;
  --radius:   12px;
  --radius-lg: 20px;
  --shadow:   0 8px 40px rgba(0,0,0,.6);
  --glow:     0 0 30px rgba(57,255,20,.15);
  --glow-lg:  0 0 60px rgba(57,255,20,.2);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.loading { overflow: hidden; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(57,255,20,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ── SELECTION ── */
::selection { background: rgba(57,255,20,.25); color: var(--green); }

/* ── LOADER ── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
#loader-canvas { position: absolute; inset: 0; opacity: .3; }

.loader-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  text-align: center;
}
.loader-rings { position: relative; width: 80px; height: 80px; }
.lr {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
  animation: spin 2s linear infinite;
}
.lr1 { inset: 0; border-top-color: var(--green); animation-duration: 1.5s; }
.lr2 { inset: 10px; border-right-color: rgba(57,255,20,.5); animation-duration: 2s; animation-direction: reverse; }
.lr3 { inset: 20px; border-bottom-color: rgba(57,255,20,.3); animation-duration: 2.5s; }
.lr-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 12px var(--green);
}
@keyframes spin { to { transform: rotate(360deg); } }

.loader-brand {
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700;
  letter-spacing: .15em; color: var(--text);
}
.loader-brand span { color: var(--green); }
.loader-sub { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); letter-spacing: .08em; }

.loader-bar-wrap { width: 280px; }
.loader-bar-track { height: 3px; background: rgba(57,255,20,.1); border-radius: 2px; overflow: hidden; margin-bottom: .5rem; }
.loader-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--green2)); border-radius: 2px; transition: width .1s linear; box-shadow: 0 0 8px var(--green); }
.loader-bar-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .65rem; color: var(--muted); }

/* ── CURTAINS ── */
.curtain {
  position: fixed; left: 0; right: 0; z-index: 9998;
  background: var(--bg); height: 50vh;
  transition: transform .7s cubic-bezier(.77,0,.18,1);
}
.curtain-t { top: 0; transform: translateY(-100%); }
.curtain-b { bottom: 0; transform: translateY(100%); }
.curtain-t.active { transform: translateY(0); }
.curtain-b.active { transform: translateY(0); }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9000;
  background: var(--surface); border: 1px solid var(--green);
  color: var(--green); font-family: var(--font-mono); font-size: .82rem;
  padding: .85rem 1.5rem; border-radius: var(--radius);
  box-shadow: var(--glow); opacity: 0; transform: translateY(20px);
  transition: all .4s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── TICKER ── */
.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--ticker-h); background: rgba(4,8,10,.95);
  border-bottom: 1px solid rgba(57,255,20,.15);
  display: flex; align-items: center; overflow: hidden;
  backdrop-filter: blur(10px);
}
.ticker-badge {
  flex-shrink: 0; background: var(--red); color: #fff;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  padding: .2rem .5rem; margin: 0 .75rem; border-radius: 3px;
  letter-spacing: .1em; animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.ticker-track { flex: 1; overflow: hidden; }
.ticker-text {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
  animation: ticker-scroll 40s linear infinite;
}
@keyframes ticker-scroll { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }

/* ── NAV ── */
nav {
  position: fixed; top: var(--ticker-h); left: 0; right: 0; z-index: 100;
  height: var(--nav-h); background: rgba(4,8,10,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all .3s ease;
}
nav.scrolled { background: rgba(4,8,10,.98); border-bottom-color: var(--border2); box-shadow: 0 4px 30px rgba(0,0,0,.5); }

.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 5vw;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}

.nav-logo {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo-icon { width: 36px; height: 36px; }
.nav-logo-icon svg { width: 100%; height: 100%; }
.nav-logo-text {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
  letter-spacing: .1em; color: var(--text);
}
.nav-logo-text span { color: var(--green); }

.nav-links {
  display: flex; align-items: center; gap: .25rem;
}
.nav-link {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  padding: .4rem .7rem; border-radius: 6px; cursor: pointer;
  transition: all .2s ease; letter-spacing: .04em; white-space: nowrap;
  border: 1px solid transparent;
}
.nav-link:hover { color: var(--green); border-color: var(--border); background: rgba(57,255,20,.04); }
.nav-link.active { color: var(--green); }

.nav-cta {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: var(--bg); background: var(--green); padding: .45rem 1rem;
  border-radius: 6px; cursor: pointer; letter-spacing: .06em;
  transition: all .2s ease; white-space: nowrap; margin-left: .5rem;
  border: 1px solid var(--green);
}
.nav-cta:hover { background: transparent; color: var(--green); box-shadow: var(--glow); }

.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .5rem;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all .3s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── BACK BUTTON ── */
#back-wrap {
  position: fixed; top: calc(var(--ticker-h) + var(--nav-h) + 1rem);
  left: 1.5rem; z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
#back-wrap.visible { opacity: 1; pointer-events: all; }
#back-btn {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-family: var(--font-mono); font-size: .72rem;
  padding: .45rem .9rem; border-radius: 8px; cursor: pointer;
  transition: all .2s ease;
}
#back-btn svg { width: 14px; height: 14px; }
#back-btn:hover { color: var(--green); border-color: var(--border2); background: rgba(57,255,20,.05); }

/* ── PAGES ── */
.page { display: none; min-height: 100vh; padding-top: calc(var(--ticker-h) + var(--nav-h)); }
.page.active { display: block; }

/* ── SECTION ── */
.section {
  max-width: 1300px; margin: 0 auto; padding: 5rem 5vw;
}
.section-dark { background: var(--bg2); }
.section-dark .section { max-width: 100%; padding-left: 5vw; padding-right: 5vw; }

.section-head { margin-bottom: 3.5rem; }
.section-head h2 {
  font-family: var(--font-head); font-size: clamp(2rem,4vw,3rem);
  font-weight: 800; line-height: 1.1; margin-bottom: .75rem;
}
.section-desc { color: var(--muted); max-width: 680px; font-size: .92rem; line-height: 1.8; }

.section-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  color: var(--green); letter-spacing: .18em; text-transform: uppercase;
  background: rgba(57,255,20,.06); border: 1px solid rgba(57,255,20,.2);
  padding: .3rem .8rem; border-radius: 99px; margin-bottom: 1rem;
}

.grad {
  background: linear-gradient(135deg, var(--green), var(--green2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--green); color: var(--bg);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--radius);
  border: 2px solid var(--green); cursor: pointer;
  transition: all .25s ease; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap;
}
.btn-primary:hover {
  background: transparent; color: var(--green);
  box-shadow: var(--glow-lg); transform: translateY(-2px);
}
.btn-primary svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--text);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--radius);
  border: 2px solid var(--border2); cursor: pointer;
  transition: all .25s ease; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: rgba(57,255,20,.04); transform: translateY(-2px); }
.btn-ghost svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-sm {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--green); color: var(--bg);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  padding: .45rem 1rem; border-radius: 8px;
  border: 1px solid var(--green); cursor: pointer;
  transition: all .2s ease; letter-spacing: .04em;
}
.btn-sm:hover { background: transparent; color: var(--green); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold), #f59e0b) !important;
  border-color: var(--gold) !important; color: #000 !important;
}
.btn-gold:hover { background: transparent !important; color: var(--gold) !important; }

/* ── HERO ── */
.hero {
  position: relative; min-height: calc(100vh - var(--ticker-h) - var(--nav-h));
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  align-items: center; padding: 4rem 5vw;
  overflow: hidden;
}
#matrix-canvas { position: absolute; inset: 0; opacity: .12; pointer-events: none; }
.hero-grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(57,255,20,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .65rem; color: var(--muted);
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.eyebrow-dot {
  width: 6px; height: 6px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 8px var(--green); animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .7; } }

.hero-title {
  font-family: var(--font-head); font-size: clamp(3rem,7vw,5.5rem);
  font-weight: 800; line-height: 1; margin-bottom: 1.5rem;
  display: flex; flex-direction: column; gap: .1em;
}
.hero-t1 { color: var(--text); }
.hero-t2 { color: var(--text); }
.hero-t3 { color: var(--green); text-shadow: 0 0 40px rgba(57,255,20,.4); }

/* GLITCH */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.glitch::before {
  color: var(--red2); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-top 4s infinite linear;
}
.glitch::after {
  color: var(--green2); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-bot 4s infinite linear;
}
@keyframes glitch-top {
  0%,90%,100% { transform: translate(0); opacity: 0; }
  92% { transform: translate(-3px, -2px); opacity: .8; }
  94% { transform: translate(3px, 2px); opacity: .8; }
  96% { transform: translate(-2px, 1px); opacity: .8; }
}
@keyframes glitch-bot {
  0%,90%,100% { transform: translate(0); opacity: 0; }
  93% { transform: translate(3px, 2px); opacity: .8; }
  95% { transform: translate(-3px, -2px); opacity: .8; }
  97% { transform: translate(2px, -1px); opacity: .8; }
}

.hero-sub {
  color: var(--muted); font-size: .92rem; line-height: 1.8;
  margin-bottom: 2rem; max-width: 520px;
}

.hero-stats {
  display: flex; align-items: center; gap: 1.5rem;
  margin-bottom: 2.5rem; flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; }
.stat-n { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: var(--green); line-height: 1; }
.stat-l { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); letter-spacing: .08em; margin-top: .2rem; }
.stat-div { width: 1px; height: 36px; background: var(--border2); }

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* HERO TERMINAL */
.hero-terminal {
  position: relative; z-index: 2;
  background: rgba(8,14,16,.9); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow), var(--glow);
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.terminal-bar {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(0,0,0,.4); padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.tb-dot { width: 10px; height: 10px; border-radius: 50%; }
.tb-r { background: #ff5f57; }
.tb-y { background: #febc2e; }
.tb-g { background: #28c840; }
.tb-title { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-left: .5rem; }

.terminal-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.tl { font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; }
.tl-prompt { color: var(--green); margin-right: .4rem; }
.tl-cmd { color: var(--text); }
.tl-out { color: var(--muted); padding-left: 1.2rem; }
.tl-green { color: var(--green); padding-left: 1.2rem; }
.tl-cursor { display: flex; align-items: center; }
.cursor-blink { color: var(--green); animation: blink .8s step-end infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── SCROLL BANNER ── */
.scroll-banner {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg2); padding: 1.25rem 0;
}
.sb-fade-l, .sb-fade-r {
  position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.sb-fade-l { left: 0; background: linear-gradient(90deg, var(--bg2), transparent); }
.sb-fade-r { right: 0; background: linear-gradient(-90deg, var(--bg2), transparent); }
.sb-track { display: flex; gap: 2rem; animation: sb-scroll 30s linear infinite; width: max-content; }
@keyframes sb-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.sb-item {
  display: flex; align-items: center; gap: .75rem; flex-shrink: 0;
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  letter-spacing: .06em;
}
.sb-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; opacity: .6; filter: grayscale(.5); }

/* ── SERVICES GRID ── */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.svc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
  cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden;
}
.svc-card:hover {
  border-color: var(--border2); transform: translateY(-4px);
  box-shadow: var(--shadow), var(--glow);
}
.svc-featured {
  grid-column: span 2; background: linear-gradient(135deg, rgba(57,255,20,.07), rgba(0,229,118,.03));
  border-color: rgba(57,255,20,.25);
}
.svc-cta-card { border-color: rgba(57,255,20,.2); }
.svc-glow {
  position: absolute; top: -50%; right: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(57,255,20,.06) 0%, transparent 60%);
  pointer-events: none;
}
.svc-icon { font-size: 2rem; margin-bottom: 1rem; }
.svc-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--green); color: var(--bg);
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 99px; letter-spacing: .1em;
}
.svc-card h3 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; margin-bottom: .6rem; }
.svc-card p { color: var(--muted); font-size: .82rem; line-height: 1.7; margin-bottom: 1rem; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.svc-tags span {
  font-family: var(--font-mono); font-size: .62rem; color: var(--green);
  background: rgba(57,255,20,.07); border: 1px solid rgba(57,255,20,.2);
  padding: .2rem .6rem; border-radius: 99px;
}
.svc-arrow {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--green);
  transition: transform .2s ease;
}
.svc-card:hover .svc-arrow { transform: translateX(6px); }

/* ── WHY GRID ── */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  max-width: 1300px; margin: 0 auto; padding: 0 5vw;
}
.why-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
  position: relative; overflow: hidden;
  transition: all .3s ease;
}
.why-card:hover { border-color: var(--border2); transform: translateY(-3px); }
.why-num {
  position: absolute; top: 1rem; right: 1.25rem;
  font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700;
  color: rgba(57,255,20,.06); line-height: 1;
}
.why-icon { font-size: 1.8rem; margin-bottom: .75rem; }
.why-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.why-card p { color: var(--muted); font-size: .82rem; line-height: 1.7; }

/* ── SPOTLIGHT ── */
.spotlight {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(57,255,20,.06), rgba(0,229,118,.03));
  border: 1px solid rgba(57,255,20,.2); border-radius: var(--radius-lg);
  padding: 3rem; position: relative; overflow: hidden;
}
.spotlight::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(57,255,20,.08) 0%, transparent 70%);
  pointer-events: none;
}
.spotlight-badge {
  display: inline-block; background: var(--green); color: var(--bg);
  font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 99px; letter-spacing: .1em;
  margin-bottom: 1rem;
}
.spotlight-content h3 {
  font-family: var(--font-head); font-size: clamp(1.6rem,3vw,2.2rem);
  font-weight: 800; line-height: 1.15; margin-bottom: .75rem;
}
.spotlight-quote {
  font-family: var(--font-mono); font-size: .82rem; color: var(--green);
  font-style: italic; margin-bottom: 1rem;
}
.spotlight-content p { color: var(--muted); font-size: .88rem; line-height: 1.8; margin-bottom: 1.5rem; }
.spotlight-modules { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.sm-item {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--font-mono); font-size: .8rem; color: var(--muted);
}
.sm-week {
  background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.2);
  color: var(--green); font-size: .65rem; padding: .15rem .5rem;
  border-radius: 4px; flex-shrink: 0;
}
.spotlight-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.spotlight-tags span {
  font-family: var(--font-mono); font-size: .65rem; color: var(--green);
  background: rgba(57,255,20,.07); border: 1px solid rgba(57,255,20,.2);
  padding: .2rem .6rem; border-radius: 99px;
}
.spotlight-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* SPOTLIGHT TERMINAL */
.sv-terminal {
  background: rgba(4,8,10,.95); border: 1px solid var(--border2);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow), var(--glow);
}
.svt-bar {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(0,0,0,.5); padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
}
.svt-dot { width: 9px; height: 9px; border-radius: 50%; }
.svt-dot.r { background: #ff5f57; }
.svt-dot.y { background: #febc2e; }
.svt-dot.g { background: #28c840; }
.svt-title { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); margin-left: .4rem; }
.svt-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.svt-line { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.svt-c { color: var(--green); margin-right: .4rem; }
.svt-g { color: rgba(57,255,20,.8); }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  max-width: 1300px; margin: 0 auto; padding: 0 5vw;
}
.testi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
  transition: all .3s ease;
}
.testi-card:hover { border-color: var(--border2); transform: translateY(-3px); }
.testi-stars { color: var(--gold); font-size: 1rem; margin-bottom: .75rem; letter-spacing: .1em; }
.testi-card p { color: var(--muted); font-size: .85rem; line-height: 1.8; margin-bottom: 1.25rem; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: .75rem; }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(57,255,20,.2), rgba(0,229,118,.1));
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .72rem; color: var(--green); font-weight: 700;
  flex-shrink: 0;
}
.testi-author strong { display: block; font-family: var(--font-head); font-size: .9rem; }
.testi-author span { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); }

/* ── CTA SECTION ── */
.cta-section { background: var(--bg); }
.cta-box {
  background: linear-gradient(135deg, rgba(57,255,20,.07), rgba(0,229,118,.03));
  border: 1px solid rgba(57,255,20,.2); border-radius: var(--radius-lg);
  padding: 4rem; text-align: center; position: relative; overflow: hidden;
}
.cta-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(57,255,20,.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-tag {
  font-family: var(--font-mono); font-size: .65rem; color: rgba(57,255,20,.6);
  letter-spacing: .18em; margin-bottom: .75rem;
}
.cta-box h2 { font-family: var(--font-head); font-size: clamp(2rem,4vw,3rem); font-weight: 800; margin-bottom: 1rem; }
.cta-box p { color: var(--muted); font-size: .92rem; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-contacts { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.cta-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25D366; color: #fff;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
  padding: .75rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; transition: all .25s ease;
}
.cta-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37,211,102,.3); }
.cta-wa svg { width: 18px; height: 18px; flex-shrink: 0; }
.cta-wa2 { background: #128C7E; }
.cta-wa2:hover { box-shadow: 0 8px 25px rgba(18,140,126,.3); }

/* ── FOOTER ── */
.footer {
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 4rem 5vw 2rem;
}
.footer-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
  margin-bottom: 3rem;
}
.footer-logo {
  font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700;
  letter-spacing: .1em; margin-bottom: .75rem;
}
.footer-logo span { color: var(--green); }
.footer-brand p { color: var(--muted); font-size: .82rem; line-height: 1.7; margin-bottom: 1.25rem; }
.footer-socials { display: flex; gap: .75rem; }
.fs-link {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all .2s ease;
}
.fs-link:hover { color: var(--green); border-color: var(--border2); background: rgba(57,255,20,.05); }
.fs-link svg { width: 14px; height: 14px; }

.footer-col h5 {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: var(--text); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col a {
  display: block; color: var(--muted); font-size: .8rem;
  margin-bottom: .5rem; cursor: pointer; transition: color .2s ease;
  text-decoration: none;
}
.footer-col a:hover { color: var(--green); }

.footer-bottom {
  max-width: 1300px; margin: 0 auto;
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .75rem;
  font-family: var(--font-mono); font-size: .65rem; color: var(--muted);
}
.footer-disclaimer { color: rgba(57,255,20,.4); }

/* ── PAGE HERO ── */
.page-hero {
  position: relative; min-height: 280px;
  background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(57,255,20,.15);
  padding: 5rem 5vw 2.5rem;
  display: flex; align-items: flex-end;
}
.ph-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(4,8,10,.92), rgba(4,8,10,.75));
}
.ph-overlay::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(57,255,20,.06), transparent 60%);
}
.ph-content { position: relative; z-index: 1; max-width: 800px; }
.ph-eyebrow {
  font-family: var(--font-mono); font-size: .65rem; color: rgba(57,255,20,.6);
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: .5rem;
}
.ph-content h1 {
  font-family: var(--font-mono); font-size: clamp(2rem,5vw,3.5rem);
  font-weight: 800; color: #fff; line-height: 1.1;
  text-shadow: 0 0 40px rgba(57,255,20,.3);
}
.ph-content h1 span { color: var(--green); }
.ph-content p { color: rgba(224,240,234,.7); margin-top: .75rem; font-size: .95rem; }

/* ── FEATURED COURSE ── */
.featured-course {
  background: linear-gradient(135deg, rgba(57,255,20,.08), rgba(0,229,118,.04));
  border: 2px solid rgba(57,255,20,.25); border-radius: var(--radius-lg);
  padding: 2.5rem; margin-bottom: 3rem; position: relative; overflow: hidden;
}
.fc-badge {
  position: absolute; top: 1rem; right: 1.5rem;
  background: var(--green); color: var(--bg);
  font-family: var(--font-mono); font-size: .65rem; font-weight: 900;
  padding: .3rem .8rem; border-radius: 99px; letter-spacing: .1em;
}
.fc-body { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: start; }
.fc-eyebrow {
  font-family: var(--font-mono); font-size: .65rem; color: var(--green);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .5rem;
}
.fc-left h3 {
  font-family: var(--font-head); font-size: clamp(1.6rem,3vw,2.2rem);
  font-weight: 800; line-height: 1.15; margin-bottom: .75rem;
}
.fc-left p { color: var(--muted); font-size: .88rem; line-height: 1.8; margin-bottom: 1.25rem; }
.fc-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.fc-meta span {
  font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
  background: rgba(57,255,20,.05); border: 1px solid var(--border);
  padding: .25rem .65rem; border-radius: 6px;
}
.fc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.fc-tags span {
  font-family: var(--font-mono); font-size: .65rem; color: var(--green);
  background: rgba(57,255,20,.08); border: 1px solid rgba(57,255,20,.2);
  padding: .2rem .6rem; border-radius: 99px;
}
.fc-price-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.fc-price { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--green); text-shadow: 0 0 20px rgba(57,255,20,.4); }
.fc-price span { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); font-weight: 400; }

/* MINI TERMINAL */
.mini-terminal {
  background: rgba(4,8,10,.95); border: 1px solid var(--border2);
  border-radius: var(--radius); overflow: hidden; min-width: 260px;
  box-shadow: var(--shadow), var(--glow);
}
.mt-bar {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(0,0,0,.5); padding: .55rem .85rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .65rem; color: var(--muted);
}
.mt-dot { width: 8px; height: 8px; border-radius: 50%; }
.mt-dot.r { background: #ff5f57; }
.mt-dot.y { background: #febc2e; }
.mt-dot.g { background: #28c840; }
.mt-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; font-family: var(--font-mono); font-size: .73rem; color: var(--muted); }
.mt-g { color: rgba(57,255,20,.8); }

/* ── TALLY COURSE ── */
.tally-course {
  background: linear-gradient(135deg, rgba(251,191,36,.06), rgba(245,158,11,.03));
  border: 1px solid rgba(251,191,36,.2); border-radius: var(--radius-lg);
  padding: 2.5rem; margin-bottom: 3rem;
}
.tc-eyebrow {
  font-family: var(--font-mono); font-size: .65rem; color: rgba(251,191,36,.8);
  font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem;
}
.tc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.tc-left h3 { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin-bottom: .75rem; }
.tc-left h3 span { color: var(--gold); }
.tc-left p { color: var(--muted); font-size: .85rem; line-height: 1.8; margin-bottom: 1.2rem; }
.tc-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.tc-meta span { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); background: rgba(251,191,36,.05); border: 1px solid rgba(251,191,36,.15); padding: .25rem .65rem; border-radius: 6px; }
.tc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.tc-tags span { font-family: var(--font-mono); font-size: .65rem; color: var(--gold); background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2); padding: .2rem .6rem; border-radius: 99px; }
.tc-list { display: flex; flex-direction: column; gap: .5rem; }
.tc-item { font-family: var(--font-mono); font-size: .8rem; color: rgba(224,240,234,.7); }

/* ── COURSES GRID ── */
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; }
.course-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: all .3s ease;
}
.course-card:hover { border-color: var(--border2); transform: translateY(-4px); box-shadow: var(--shadow), var(--glow); }
.cc-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.5rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(57,255,20,.04), transparent);
}
.cc-icon { font-size: 1.8rem; flex-shrink: 0; }
.cc-name { font-family: var(--font-head); font-size: .95rem; font-weight: 700; margin-bottom: .25rem; }
.cc-price { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--green); }
.cc-price span { font-size: .75rem; color: var(--muted); text-decoration: line-through; margin-left: .4rem; }
.cc-body { padding: 1.5rem; flex: 1; }
.cc-body p { color: var(--muted); font-size: .8rem; line-height: 1.7; margin-bottom: 1rem; }
.cc-body ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.cc-body ul li { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); padding-left: 1rem; position: relative; }
.cc-body ul li::before { content: '→'; position: absolute; left: 0; color: var(--green); }
.cc-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.cc-tags span { font-family: var(--font-mono); font-size: .6rem; color: var(--green); background: rgba(57,255,20,.07); border: 1px solid rgba(57,255,20,.15); padding: .15rem .5rem; border-radius: 99px; }
.cc-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.cc-footer span { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }

.course-cta-box {
  text-align: center; background: linear-gradient(135deg, rgba(57,255,20,.07), rgba(0,229,118,.03));
  border: 1px solid rgba(57,255,20,.2); border-radius: var(--radius-lg); padding: 2.5rem;
}
.course-cta-box h3 { font-family: var(--font-head); font-size: 1.8rem; margin-bottom: .75rem; }
.course-cta-box p { color: var(--muted); margin-bottom: .5rem; font-size: .92rem; }
.disclaimer { color: rgba(57,255,20,.5) !important; font-family: var(--font-mono); font-size: .72rem !important; margin-bottom: 1.5rem !important; }
.course-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── SERVICES GRID 3 ── */
.services-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
.sg3-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  transition: all .3s ease;
}
.sg3-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); }
.sg3-icon { font-size: 1.8rem; margin-bottom: .75rem; }
.sg3-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.sg3-card p { color: var(--muted); font-size: .82rem; line-height: 1.7; }

/* ── TIPS BOX ── */
.tips-box {
  background: rgba(0,0,0,.3); border: 1px solid rgba(57,255,20,.12);
  border-radius: var(--radius-lg); padding: 2rem; margin-top: 3rem;
}
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.tip-item {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem; background: rgba(57,255,20,.03); border-radius: 8px;
}
.tip-dot {
  width: 8px; height: 8px; background: var(--red); border-radius: 50%;
  flex-shrink: 0; margin-top: .35rem; box-shadow: 0 0 6px var(--red);
}
.tip-item span { font-size: .82rem; color: var(--muted); line-height: 1.6; }

/* ── VEHICLE GRID ── */
.vehicle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
.veh-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  transition: all .3s ease;
}
.veh-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); }
.veh-icon { font-size: 1.8rem; margin-bottom: .75rem; }
.veh-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.veh-card p { color: var(--muted); font-size: .82rem; line-height: 1.7; }

.vehicle-cta {
  background: linear-gradient(135deg, rgba(57,255,20,.08), rgba(0,191,255,.04));
  border: 1px solid rgba(57,255,20,.2); border-radius: var(--radius-lg);
  padding: 2.5rem; text-align: center;
}
.vehicle-cta h3 { font-family: var(--font-head); font-size: 1.5rem; margin-bottom: .75rem; }
.vehicle-cta p { color: var(--muted); font-size: .88rem; margin-bottom: .75rem; }
.veh-badges { color: var(--green) !important; font-family: var(--font-mono); font-size: .82rem !important; margin-bottom: 1.5rem !important; }

/* ── PRICING ── */
.pricing-section { margin-bottom: 4rem; }
.pricing-section-head {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem;
}
.pricing-section-head span { font-size: 1.5rem; }
.pricing-section-head h3 {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--green);
  font-weight: 800; letter-spacing: .06em;
}
.psh-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(57,255,20,.3), transparent); }

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

.price-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.75rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: all .3s ease;
}
.price-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); }
.price-card-featured {
  background: linear-gradient(135deg, rgba(57,255,20,.08), rgba(0,229,118,.04));
  border-color: rgba(57,255,20,.3);
}
.price-card-purple { border-color: rgba(167,139,250,.2); }
.price-card-free { border-color: rgba(57,255,20,.2); }

.pc-badge {
  display: inline-block; font-family: var(--font-mono); font-size: .62rem;
  font-weight: 700; padding: .2rem .6rem; border-radius: 99px; letter-spacing: .08em;
  width: fit-content;
}
.pc-green { background: rgba(57,255,20,.1); color: var(--green); border: 1px solid rgba(57,255,20,.2); }
.pc-blue { background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
.pc-yellow { background: rgba(251,191,36,.1); color: var(--gold); border: 1px solid rgba(251,191,36,.2); }
.pc-red { background: rgba(255,59,59,.1); color: var(--red2); border: 1px solid rgba(255,59,59,.2); }
.pc-star { background: var(--green); color: var(--bg); }
.pc-gold { background: rgba(251,191,36,.1); color: var(--gold); border: 1px solid rgba(251,191,36,.2); }
.pc-crown { background: rgba(251,191,36,.15); color: var(--gold); border: 1px solid rgba(251,191,36,.3); }
.pc-purple { background: rgba(167,139,250,.1); color: var(--purple); border: 1px solid rgba(167,139,250,.2); }
.pc-free { background: rgba(57,255,20,.15); color: var(--green); border: 1px solid rgba(57,255,20,.3); }

.pc-name { font-family: var(--font-head); font-size: .95rem; font-weight: 700; }
.pc-price { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--green); }
.pc-price span { font-size: .72rem; color: var(--muted); text-decoration: line-through; margin-left: .3rem; }
.pc-gold-text { color: var(--gold) !important; }
.pc-purple-text { color: var(--purple) !important; }
.pc-free-text { color: var(--green) !important; }
.pc-mo { font-size: .72rem; color: var(--muted); }
.pc-dur { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.price-card ul li { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); padding-left: 1rem; position: relative; }
.price-card ul li::before { content: '→'; position: absolute; left: 0; color: var(--green); }

.pc-btn {
  display: block; text-align: center; text-decoration: none;
  background: rgba(57,255,20,.08); border: 1px solid rgba(57,255,20,.2);
  color: var(--green); font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  padding: .65rem 1rem; border-radius: 8px; cursor: pointer;
  transition: all .2s ease; letter-spacing: .04em;
}
.pc-btn:hover { background: var(--green); color: var(--bg); }
.pc-btn-featured { background: var(--green); color: var(--bg); }
.pc-btn-featured:hover { background: transparent; color: var(--green); }
.pc-btn-gold { background: linear-gradient(135deg, var(--gold), #f59e0b); color: #000; border-color: var(--gold); }
.pc-btn-gold:hover { background: transparent; color: var(--gold); }
.pc-btn-purple { background: linear-gradient(135deg, var(--purple), #7c3aed); color: #fff; border-color: var(--purple); }
.pc-btn-purple:hover { background: transparent; color: var(--purple); }
.pc-btn-free { background: linear-gradient(135deg, var(--green), var(--green2)); color: var(--bg); font-weight: 800; }
.pc-btn-free:hover { background: transparent; color: var(--green); }

/* BUNDLE CTA */
.bundle-cta {
  background: linear-gradient(135deg, rgba(57,255,20,.07), rgba(0,0,0,.4));
  border: 1px solid rgba(57,255,20,.2); border-radius: var(--radius-lg);
  padding: 2.5rem; text-align: center;
}
.bc-tag { font-family: var(--font-mono); font-size: .65rem; color: rgba(57,255,20,.6); letter-spacing: .15em; margin-bottom: .75rem; }
.bundle-cta h3 { font-family: var(--font-head); font-size: 1.8rem; margin-bottom: .75rem; }
.bundle-cta p { color: var(--muted); font-size: .92rem; margin-bottom: 1.5rem; }
.bc-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── BOOK PAGE ── */
.book-benefits {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem;
}
.book-benefits span {
  font-family: var(--font-mono); font-size: .72rem; color: var(--green);
  background: rgba(57,255,20,.07); border: 1px solid rgba(57,255,20,.2);
  padding: .3rem .8rem; border-radius: 99px;
}
.book-grid { max-width: 800px; }
.book-form-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.5rem;
}
.book-form-wrap h3 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; margin-bottom: 1.5rem; }
.book-wa-btns { display: flex; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.book-wa-btns .cta-wa { flex: 1; min-width: 200px; justify-content: center; }

/* ── FORMS ── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-group label { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); letter-spacing: .06em; }
.form-input {
  background: rgba(0,0,0,.3); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono); font-size: .82rem;
  padding: .75rem 1rem; border-radius: 8px;
  transition: border-color .2s ease; outline: none; width: 100%;
}
.form-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(57,255,20,.08); }
.form-input option { background: var(--surface); }
.form-textarea { min-height: 100px; resize: vertical; }
.form-note { text-align: center; color: var(--muted); font-size: .75rem; margin-top: .75rem; }

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-info h3 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; margin-bottom: .75rem; }
.contact-info p { color: var(--muted); font-size: .88rem; margin-bottom: 1.5rem; }
.contact-channels { display: flex; flex-direction: column; gap: .75rem; }
.channel {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.25rem;
  transition: all .2s ease;
}
.channel:hover { border-color: var(--border2); }
.ch-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(57,255,20,.08); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--green); flex-shrink: 0;
}
.ch-icon svg { width: 16px; height: 16px; }
.ch-label { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); letter-spacing: .08em; }
.ch-val { font-family: var(--font-mono); font-size: .82rem; color: var(--text); }

/* ── LEGAL ── */
.legal-page {
  max-width: 800px; margin: 0 auto; padding: 8rem 5vw 5rem;
}
.legal-page h1 { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; margin-bottom: .5rem; }
.legal-date { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-bottom: 2.5rem; }
.legal-section { margin-bottom: 2rem; }
.legal-section h3 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; color: var(--green); }
.legal-section p { color: var(--muted); font-size: .88rem; line-height: 1.8; }
.legal-section ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.legal-section ul li { font-size: .88rem; color: var(--muted); padding-left: 1.2rem; position: relative; }
.legal-section ul li::before { content: '→'; position: absolute; left: 0; color: var(--green); }

/* ── STICKY BAR ── */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  background: rgba(4,8,10,.95); border-top: 1px solid var(--border);
  backdrop-filter: blur(20px); padding: .6rem 5vw;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.sb-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.sb-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .65rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  padding: .35rem .75rem; border-radius: 99px; text-decoration: none;
  transition: all .2s ease;
}
.sb-pill:hover { color: var(--green); border-color: var(--border2); }
.sb-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.sb-brand { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); letter-spacing: .1em; flex-shrink: 0; }
.sb-brand span { color: var(--green); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── MOBILE ── */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-featured { grid-column: span 2; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .vehicle-grid { grid-template-columns: repeat(2, 1fr); }
  .tips-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-terminal { display: none; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight-visual { display: none; }
  .fc-body { grid-template-columns: 1fr; }
  .fc-right { display: none; }
  .tc-body { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-links { display: none; position: fixed; top: calc(var(--ticker-h) + var(--nav-h)); left: 0; right: 0; background: rgba(4,8,10,.98); border-bottom: 1px solid var(--border); padding: 1.5rem; flex-direction: column; gap: .25rem; z-index: 99; }
  .nav-links.open { display: flex; }
  .nav-burger { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  .svc-featured { grid-column: span 1; }
  .why-grid { grid-template-columns: 1fr; padding: 0 5vw; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid-4 { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: 1fr; }
  .services-grid-3 { grid-template-columns: 1fr; }
  .vehicle-grid { grid-template-columns: 1fr; }
  .tips-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .hero-stats { gap: 1rem; }
  .stat-div { display: none; }
  .sticky-bar { flex-direction: column; gap: .5rem; padding: .75rem 5vw; }
  .sb-pills { justify-content: center; }
  #back-wrap { display: none; }
  .hero { padding: 2rem 5vw; }
  .section { padding: 3rem 5vw; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.2rem,10vw,3.5rem); }
  .cta-box { padding: 2rem; }
  .book-form-wrap { padding: 1.5rem; }
  .featured-course { padding: 1.5rem; }
  .tally-course { padding: 1.5rem; }
  .spotlight { padding: 1.5rem; }
}