@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink:          #0A0F1E;
  --ink-soft:     #1a2340;
  --surface:      #FFFFFF;
  --base:         #f0f4ff;
  --muted:        #5a6a8a;
  --line:         #dde3f0;

  /* ── BRAND COLORS ── */
  --electric:     #1a3a8f;
  --electric-lt:  #4d72c8;
  --neon:         #22c55e;
  --neon-lt:      #c8f0e0;
  --fire:         #1e5f74;
  --fire-lt:      #d0eef5;
  --green-lt:     #c8f0e0;
  --pink:         #1a3a8f;
  --green:        #22c55e;

  /* ── BRAND GRADIENTS ── */
  --grad-brand:   linear-gradient(135deg, #0f1f5c 0%, #1a3a8f 30%, #1e5f74 65%, #0f7a5a 100%);
  --grad-hero:    linear-gradient(135deg, #0a1235 0%, #0f1f5c 30%, #1a3a8f 60%, #1e5f74 85%, #0f7a5a 100%);
  --grad-card:    linear-gradient(135deg, #1a3a8f 0%, #1e5f74 50%, #0f7a5a 100%);
  --grad-fire:    linear-gradient(135deg, #0f1f5c 0%, #1e5f74 100%);
  --grad-green:   linear-gradient(135deg, #0f7a5a 0%, #1e5f74 100%);
  --grad-pink:    linear-gradient(135deg, #1a3a8f 0%, #0f7a5a 100%);
  --grad-light:   linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);

  --font-display:  'DM Sans', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono: 'Inter', sans-serif;

  --max:      1200px;
  --r-sm:     8px;
  --r-md:     16px;
  --r-lg:     24px;
  --r-xl:     32px;

  --shadow-sm:   0 1px 3px rgba(10,18,60,0.07);
  --shadow-md:   0 4px 20px rgba(10,18,60,0.12);
  --shadow-lg:   0 20px 60px rgba(10,18,60,0.18);
  --shadow-glow: 0 0 40px rgba(26,58,143,0.35);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,select,textarea { font-family:inherit; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.2rem,5vw,2.8rem); }
h2 { font-size: clamp(1.8rem,3.5vw,2.6rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-size: 0.95rem; font-weight: 600; }
p  { color: var(--muted); line-height: 1.7; }

.text-white   { color:#fff !important; }
.text-white p { color:rgba(255,255,255,0.75) !important; }

/* ── LAYOUT ── */
.container  { max-width:var(--max); margin:0 auto; padding:0 24px; }
.section    { padding:90px 0; }
.section-sm { padding:60px 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--electric);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  background: rgb(22 32 182 / 8%);
  border: 1px solid rgba(168, 196, 255, 0.3);
  border-radius: 100px;
  padding: 5px 7px;
}
.eyebrow-fire  { color: var(--fire); }
.eyebrow-cyan  { color: var(--neon); }
.eyebrow-light { color: #a8c4ff; }
.eyebrow-pink  { color: #6fa3ef; }

.accent    { color: var(--electric); }
.acc-fire  { color: var(--fire); }
.acc-cyan  { color: var(--neon); }
.acc-green { color: var(--green); }
.acc-pink  { color: var(--electric-lt); }

.section-head { text-align:center; margin-bottom:54px; }
.section-head h2 { margin-bottom:12px; }
.section-head p  { max-width:540px; margin:0 auto; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--r-md);
  transition: all 0.22s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--grad-card);
  color: #fff;
  box-shadow: 0 4px 20px rgba(26,58,143,0.4);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(26,58,143,0.5); filter:brightness(1.1); }
.btn-outline {
  border-color: var(--electric);
  color: var(--electric);
  background: transparent;
}
.btn-outline:hover { background:var(--electric); color:#fff; }
.btn-outline-light {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.btn-outline-light:hover { background:rgba(255,255,255,0.18); border-color:#fff; }
.btn-neon {
  background: var(--grad-green);
  color: #fff;
  box-shadow: 0 4px 20px rgba(15,122,90,0.45);
  font-weight:700;
}
.btn-neon:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(15,122,90,0.55); filter:brightness(1.1); }
.btn-lg { padding:16px 36px; font-size:1rem; }

/* ── INFO BAR ── */
.info-bar {
  background: linear-gradient(135deg, #0f1f5c 0%, #1a3a8f 30%, #1e5f74 65%, #0f7a5a 100%);
  padding: 8px 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}
.info-bar a { color:#dee6f7; transition:color 0.2s; }
.info-bar a:hover { color:#7fffd4; }
.info-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.info-item { display:flex; align-items:center; gap:5px; color: rgb(224, 224, 246);}
.info-sep  { color:rgba(255,255,255,0.18); }

/* ── NAV ── */
nav {
  position: sticky;
  top: 0; z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 177px;
  height: 68px;
  gap: 32px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-links li a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 8px 13px;
  border-radius: var(--r-sm);
  transition: all 0.2s;
}
.nav-links li a:hover,
.nav-links li a.active { color:var(--electric); background:rgba(26,58,143,0.08); }
.nav-cta {
  background: var(--grad-card) !important;
  color: #fff !important;
  padding: 9px 20px !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 4px 14px rgba(26,58,143,0.35);
}
.nav-cta:hover { transform:translateY(-1px); filter:brightness(1.1); }
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
  padding: 8px;
}
.ham span {
  display: block; width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition: all 0.3s;
}
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  background:linear-gradient(135deg, #0f1f5c 0%, #1a3a8f 30%, #1e5f74 65%, #0f7a5a 100%);
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px;
  min-height: 640px;
}
.hero::before {
  content:'';
  position: absolute; inset:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(26,58,143,0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(15,122,90,0.2) 0%, transparent 45%),
    radial-gradient(circle at 60% 80%, rgba(30,95,116,0.15) 0%, transparent 40%);
  pointer-events:none;
}
.hero-grid {
  position: absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events:none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events:none;
}
.hero-orb-1 { width:400px;height:400px; top:-100px;right:100px; background:rgba(26,58,143,0.25); }
.hero-orb-2 { width:300px;height:300px; bottom:-50px;left:10%; background:rgba(15,122,90,0.18); }
.hero-orb-3 { width:200px;height:200px; top:40%;right:5%; background:rgba(30,95,116,0.15); }

.hero-inner {
  position: relative; z-index:2;
  max-width: var(--max);
  margin: 0 auto; padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
}
.hero-badge {
  display: inline-flex; align-items:center; gap:8px;
  background: rgba(26,58,143,0.2);
  border: 1px solid rgba(168,196,255,0.3);
  border-radius: 100px;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #a8c4ff;
  margin-bottom: 20px;
  font-weight: bold;
}
.dot-live {
  width:8px;height:8px;
  background:#7fffd4;
  border-radius:50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow:0 0 0 0 rgba(127,255,212,0.5); }
  50%      { box-shadow:0 0 0 6px rgba(127,255,212,0); }
}
.hero h1 { color:#fff; margin-bottom:20px; }
.hero h1 .hl {
  background: linear-gradient(135deg, #a8c4ff 0%, #7fffd4 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero h1 .hl-fire {
  background: linear-gradient(135deg, #7fffd4 0%, #a8c4ff 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  color: rgba(255,255,255,0.75) !important;
  font-size: 1.05rem;
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats {
  display: flex; gap:30px; flex-wrap:wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight:800;
  color: #fff; line-height:1;
}
.stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-top:4px;
}

/* Hero page variant */
.hero--page {
  padding:70px 0 60px;
  min-height: 360px;
}
.hero--page .hero-inner { grid-template-columns:1fr; text-align:center; }
.hero--page .hero-sub   { margin:0 auto 28px; }
.hero--page .hero-stats { justify-content:center; }
.hero--page .hero-actions { justify-content:center; }

/* ── FORM CARD ── */
.form-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(26,58,143,0.1);
  position: relative;
}
.form-title { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--ink); margin-bottom:5px; }
.form-sub   { font-size:0.83rem; color:var(--muted); margin-bottom:18px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--ink); margin-bottom:5px; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  font-size:0.88rem; color:var(--ink);
  background:#fff; outline:none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group textarea { resize:vertical; min-height:100px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--electric);
  box-shadow:0 0 0 3px rgba(26,58,143,0.1);
}
.form-submit {
  width:100%; padding:14px;
  background: var(--grad-brand);
  color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:1rem;
  border-radius:var(--r-md); cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 20px rgba(26,58,143,0.4);
  border:none;
}
.form-submit:hover { transform:translateY(-1px); filter:brightness(1.1); }
.form-note { font-size:0.73rem; color:var(--muted); text-align:center; margin-top:10px; }
.form-success {
  display:none; color:var(--green); font-weight:600;
  text-align:center; padding:12px;
  background:var(--green-lt); border-radius:var(--r-sm); margin-top:12px;
}
.field-err { font-size:0.76rem; color:#EF4444; margin-top:3px; }
.field-error { border-color:#EF4444 !important; }

/* ── TICKER STRIP ── */
.ticker-strip {
  overflow: hidden;
  width: 100%;
  padding: 12px 0;
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  width: max-content;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.ticker-item img {
  height: 90px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  display: block;
}

.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tablet */
@media (max-width: 768px) {
  .ticker-track { gap: 24px; }
  .ticker-item { font-size: 13px; gap: 6px; }
  .ticker-item img { height: 20px; max-width: 70px; }
}

/* Mobile */
@media (max-width: 480px) {
  .ticker-track { gap: 18px; }
  .ticker-item { font-size: 12px; }
  .ticker-item img { height: 16px; max-width: 56px; }
}

/* ── WHY SECTION (about.html) ── */
.why-section {
  background: var(--grad-hero);
  position:relative; overflow:hidden;
}
.why-section::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events:none;
}
.why-section .section-head h2 { color:#fff; }
.why-section .section-head p  { color:rgba(255,255,255,0.55); }
.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:20px;
}
.why-card {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r-xl);
  padding:28px;
  transition:all 0.3s;
  backdrop-filter:blur(10px);
}
.why-card:hover {
  background:rgba(255,255,255,0.11);
  border-color:rgba(168,196,255,0.4);
  transform:translateY(-4px);
}
.why-icon {
  width:50px;height:50px; border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem; margin-bottom:18px;
}
.wi-purple { background:rgba(168,196,255,0.15); }
.wi-cyan   { background:rgba(127,255,212,0.12); }
.wi-fire   { background:rgba(30,95,116,0.25); }
.wi-green  { background:rgba(15,122,90,0.2); }
.wi-pink   { background:rgba(168,196,255,0.1); }
.why-card h3 { color:#fff; margin-bottom:8px; }
.why-card p  { color:rgba(255,255,255,0.55); font-size:0.88rem; }

/* ── PARTNERS (about.html) ── */
.partners-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; margin-top:40px;
}
.partner-tile {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:0.88rem;
  color:var(--ink-soft); transition:all 0.22s;
}
.partner-tile:hover {
  border-color:var(--electric); color:var(--electric);
  box-shadow:0 4px 16px rgba(26,58,143,0.12); transform:translateY(-2px);
}

/* ── FAQ ── */
.faq-grid { display:grid; grid-template-columns:340px 1fr; gap:60px; align-items:start; }
.faq-sticky { position:sticky; top:100px; }
.faq-sticky h2 { margin-bottom:12px; }
.faq-sticky p  { margin-bottom:24px; }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; transition:border-color 0.2s;
}
.faq-item[open] { border-color:var(--electric); }
.faq-item summary {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:0.93rem;
  color:var(--ink); list-style:none; gap:12px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-chevron {
  width:28px;height:28px; border-radius:50%;
  background:var(--base); flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem; color:var(--muted); transition:all 0.25s;
}
.faq-item[open] .faq-chevron { background:var(--grad-card); color:#fff; transform:rotate(45deg); }
.faq-answer { padding:0 22px 18px; font-size:0.88rem; color:var(--muted); line-height:1.7; }

/* ── CTA SECTION (about.html) ── */
.cta-section {
  padding:90px 0; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(135deg, #0f2f89 0%, #0f3554 50%, #08a174 100%);
}
.cta-section::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events:none;
}
.cta-inner { position:relative; z-index:1; }
.cta-inner h2 { color:#fff; margin-bottom:14px; }
.cta-sub { color:rgba(255,255,255,0.65); max-width:500px; margin:0 auto 36px; font-size:1.05rem; }
.cta-actions { display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:18px; }

/* ── TEAM (about.html) ── */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:22px; }
.team-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:28px; text-align:center; transition:all 0.22s;
}
.team-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.team-avatar {
  width:80px;height:80px; border-radius:50%;
  background:var(--grad-card); color:#fff;
  font-family:var(--font-display); font-size:1.5rem; font-weight:800;
  display:flex;align-items:center;justify-content:center; margin:0 auto 16px;
}
.team-avatar.ta-fire  { background:var(--grad-fire); }
.team-avatar.ta-green { background:var(--grad-green); }
.team-avatar.ta-pink  { background:var(--grad-pink); }
.team-card h3 { font-size:1rem; margin-bottom:4px; }
.team-card .role { font-size:0.8rem; color:var(--electric); font-weight:600; margin-bottom:8px; }
.team-card p { font-size:0.82rem; }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-panel {
  background: var(--grad-hero);
  color:#fff; border-radius:var(--r-xl); padding:36px;
  position:relative; overflow:hidden;
}
.about-panel::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px; pointer-events:none;
}
.about-panel::after {
  content:''; position:absolute;
  top:0;left:0;width:100%;height:4px;
  background:linear-gradient(90deg,#a8c4ff,#7fffd4);
}
.panel-tag { font-family:var(--font-mono); font-size:0.74rem; color:#7fffd4; position:relative; z-index:1; }
.panel-rule { height:1px; background:rgba(255,255,255,0.12); margin:14px 0; position:relative; z-index:1; }
.panel-quote { font-size:1.02rem; color:rgba(255,255,255,0.85); font-style:italic; line-height:1.65; position:relative; z-index:1; }
.panel-credit { font-size:0.78rem; color:rgba(255,255,255,0.4); margin-top:12px; display:block; position:relative; z-index:1; }
.about-stats-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; position:relative; z-index:1;
}
.about-stat {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-md); padding:14px; text-align:center;
}
.as-num { font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:#a8c4ff; }
.as-lbl { font-size:0.73rem; color:rgba(255,255,255,0.5); margin-top:3px; }

.about-points { display:flex;flex-direction:column;gap:14px; }
.about-point {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--base); border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px; transition:all 0.22s;
}
.about-point:hover { border-color:var(--electric); box-shadow:0 4px 16px rgba(26,58,143,0.1); }
.ap-icon {
  width:40px;height:40px; border-radius:var(--r-sm);
  background:var(--grad-card); color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.about-point h3 { font-size:0.96rem; margin-bottom:4px; }
.about-point p  { font-size:0.85rem; }

/* ── POPUP ── */
.popup-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(10,18,60,0.72); backdrop-filter:blur(8px);
  z-index:500; align-items:center; justify-content:center; padding:20px;
}
.popup-overlay.open { display:flex; }
.popup-card {
  background:#fff; border-radius:var(--r-xl); padding:36px;
  max-width:440px; width:100%; position:relative; box-shadow:var(--shadow-lg);
  max-height:90vh; overflow-y:auto;
}
.popup-close {
  position:absolute; top:16px;right:16px; width:32px;height:32px;
  border-radius:50%; background:var(--base); border:none; cursor:pointer;
  font-size:1.2rem; display:flex;align-items:center;justify-content:center; color:var(--muted);
}
.popup-close:hover { background:var(--line); }
.popup-timer {
  text-align:center; font-family:var(--font-display); font-weight:700;
  color:#EF4444; font-size:0.85rem; margin-bottom:14px; letter-spacing:0.03em;
}

/* ── REVEAL ── */
[data-reveal] {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].in { opacity:1; transform:translateY(0); }
[data-reveal]:nth-child(1)  { transition-delay:0s; }
[data-reveal]:nth-child(2)  { transition-delay:0.07s; }
[data-reveal]:nth-child(3)  { transition-delay:0.14s; }
[data-reveal]:nth-child(4)  { transition-delay:0.21s; }
[data-reveal]:nth-child(5)  { transition-delay:0.28s; }
[data-reveal]:nth-child(6)  { transition-delay:0.35s; }
[data-reveal]:nth-child(7)  { transition-delay:0.42s; }
[data-reveal]:nth-child(8)  { transition-delay:0.49s; }
[data-reveal]:nth-child(9)  { transition-delay:0.56s; }
[data-reveal]:nth-child(10) { transition-delay:0.63s; }
[data-reveal]:nth-child(11) { transition-delay:0.70s; }
[data-reveal]:nth-child(12) { transition-delay:0.77s; }

/* ── FOOTER ── */
.site-footer { background:#060d22; padding:70px 0 0; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:100px;
  padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.07);
}
.footer-brand p { color:rgba(255,255,255,0.4); font-size:0.88rem; margin-bottom:20px; margin-top: 20px; }
.footer-col h4 {
  color:#fff; font-family:var(--font-display); font-size:0.82rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px;
}
.footer-col a, .footer-col p {
  display:block; color:rgba(255,255,255,0.4);
  font-size:0.86rem; margin-bottom:9px; transition:color 0.2s;
}
.footer-col a:hover { color:#a8c4ff; }
.footer-socials { display:flex; gap:10px; margin-top:8px; }
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  transition: background .2s, color .2s;
}
.footer-socials a:hover { background: #29a354; color: var(--navy); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; padding:20px 0;
}
.footer-bottom p { color:rgba(255,255,255,0.2); font-size:0.78rem; }
.footer-legal { display:flex; gap:18px; }
.footer-legal a { color:rgba(255,255,255,0.25); font-size:0.78rem; transition:color 0.2s; }
.footer-legal a:hover { color:rgba(255,255,255,0.55); }

/* ── HOURS TABLE (contact.html) ── */
.hours-table { width:100%; border-collapse:collapse; }
.hours-table td {
  padding:10px 0; font-size:0.88rem;
  border-bottom:1px solid var(--line); color:var(--muted);
}
.hours-table td:first-child { color:var(--ink); font-weight:500; }
.hours-table tr:last-child td { border-bottom:none; }
.hours-open { color:var(--green) !important; font-weight:600 !important; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .hero-inner        { grid-template-columns:1fr; gap:40px; }
  .hero-inner .form-card { max-width:480px; }
  .about-grid        { grid-template-columns:1fr; }
  .footer-grid       { grid-template-columns:1fr 1fr; }
  .faq-grid          { grid-template-columns:1fr; }
  .faq-sticky        { position:static; }
}
@media (max-width:768px) {
  nav { padding:0 20px; }
  .nav-links {
    display:none; position:fixed;
    top:68px;left:0;right:0;
    background:rgba(255,255,255,0.98); backdrop-filter:blur(20px);
    flex-direction:column; padding:20px; gap:4px;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); z-index:99;
  }
  .nav-links.open { display:flex; }
  .nav-links li a { display:block; padding:12px 16px; }
  .ham { display:flex; }
  .section { padding:60px 0; }
  .hero { padding:70px 0 60px; }
  .hero h1 { font-size:2rem; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
}
@media (prefers-reduced-motion:reduce) {
  [data-reveal],.btn,.why-card,
  .ticker-track { transition:none !important; animation:none !important;
    opacity:1 !important; transform:none !important; }
}

.journey-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:20px;
}

/* ===== FLOATING CONTACT WIDGET (right side) ===== */
.float-contact{
  position:fixed;right:22px;bottom:26px;z-index:200;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
.float-btn{
  display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:14.5px;
  padding:13px 22px;border-radius:30px;box-shadow:0 10px 24px rgba(15,23,42,.18);
  transition:.25s;border:none;cursor:pointer;
}
.float-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.24);}
.float-btn .ico{font-size:16px;line-height:1;}
.float-btn.call{background:#2563eb;}
.float-btn.whatsapp{background:#10b981;}
.float-btn.demo{background:#0f172a;}

/* ===== SCROLL UP/DOWN ARROWS (left side) ===== */
.scroll-nav{
  position:fixed;left:22px;bottom:26px;z-index:200;
  display:flex;flex-direction:column;gap:10px;
}
.scroll-btn{
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#0f172a;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);cursor:pointer;transition:.25s;
}
.scroll-btn:hover{background:linear-gradient(135deg,#2563eb,#10b981);color:#fff;border-color:transparent;transform:translateY(-2px);}

@media(max-width:600px){
  .float-contact{right:14px;bottom:16px;gap:10px;}
  .float-btn{padding:11px 16px;font-size:13px;}
  .scroll-nav{left:14px;bottom:16px;}
  .scroll-btn{width:40px;height:40px;font-size:16px;}
}

/* ── Tabs (used on index.html: gx-tabnav > tab-btn, gx-panel-frame > tab-panel) ── */
.tab-btn{
  font-family:var(--font-display);font-weight:600;font-size:.88rem;
  padding:11px 22px;border-radius:100px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer;transition:all .2s;
}
.tab-btn:hover{border-color:var(--electric);color:var(--electric)}
.tab-btn.active{background:var(--grad-card);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(26,58,143,.35)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tab-panel h3{color:var(--ink);margin-bottom:14px;font-size:1.15rem}
.tab-panel > p{margin-bottom:18px}
.tab-list{display:flex;flex-direction:column;gap:12px}
.tab-list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)}
.tab-list .dot{
  flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--grad-brand);margin-top:7px;
}

/* =====================================================================
   INDEX PAGE — .gx- prefixed sections (index.html only)
   ===================================================================== */

/* ---------- overview (split-panel tabs) ---------- */
.gx-overview{ padding:64px 0 74px; }
.gx-overview .section-head{ text-align:center; max-width:680px; margin:0 auto 36px; }
.gx-tabnav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.gx-panel-frame{ background:transparent; border:none; padding:0; margin-top:22px; }
.gx-overview .tab-panel{ display:none; }
.gx-overview .tab-panel.active{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:34px 38px;
  box-shadow:0 1px 3px rgba(10,18,60,.06);
  animation:fadeIn .35s ease;
}
.gx-panel-left{ padding:0; }
.gx-panel-left h3{ margin-bottom:6px; }
.gx-panel-left > p{ font-size:.88rem; margin-bottom:20px; }
.gx-overview .tab-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 30px; margin-bottom:22px;
}
.gx-overview .tab-list li{ padding:2px 0; }
.gx-panel-right{
  background:none; padding:18px 0 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start;
}
.gx-chip{
  color:var(--electric); background:var(--base); border:1px solid var(--line);
  font-size:.8rem; padding:7px 14px; border-radius:100px; transition:all .22s;
}
.gx-chip:hover{ background:#fff; border-color:var(--electric); transform:translateY(-1px); }
.gx-overview #tab-faqs.active{ display:block; }
.gx-overview #tab-faqs .gx-panel-left{ padding:0; }
.gx-overview #tab-faqs .faq-list{ max-width:100%; }
@media (max-width:700px){
  .gx-overview .tab-list{ grid-template-columns:1fr; }
  .gx-overview .tab-panel.active{ padding:26px 22px; }
}

/* ---------- courses (horizontal accent-bar cards) ---------- */
.gx-courses{ background:var(--base); }
.gx-course-list{ display:flex; flex-direction:column; gap:16px; max-width:960px; margin:0 auto; }
.gx-course-row{
  display:grid; grid-template-columns:64px 1fr auto; gap:22px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--electric);
  border-radius:var(--r-lg); padding:22px 26px; transition:all .25s;
}
.gx-course-row:nth-child(2){ border-left-color:var(--fire); }
.gx-course-row:nth-child(3){ border-left-color:var(--green); }
.gx-course-row:nth-child(4){ border-left-color:var(--electric-lt); }
.gx-course-row:nth-child(5){ border-left-color:#0f7a5a; }
.gx-course-row:hover{ transform:translateX(6px); box-shadow:var(--shadow-md); }
.gx-course-ico{
  width:56px;height:56px; border-radius:var(--r-md); background:var(--base);
  display:flex;align-items:center;justify-content:center; font-size:1.6rem; flex-shrink:0;
}
.gx-course-row h3{ font-size:1.05rem; margin-bottom:6px; }
.gx-course-row p{ font-size:.86rem; margin-bottom:12px; max-width:560px; }
.gx-course-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.gx-course-tags span{
  font-family:var(--font-mono); font-size:.68rem; background:var(--base); color:var(--electric);
  padding:4px 10px; border-radius:100px; border:1px solid var(--line);
}
.gx-course-cta{ font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--electric); white-space:nowrap; }
@media (max-width:700px){
  .gx-course-row{ grid-template-columns:1fr; text-align:left; }
  .gx-course-cta{ justify-self:start; }
}
.gx-courses-foot{ text-align:center; margin-top:34px; }

/* ---------- why choose ---------- */
.gx-why{ background:var(--surface); }
.gx-why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.gx-why-card{ border:1px solid var(--line); border-radius:var(--r-xl); padding:28px 24px; position:relative; overflow:hidden; transition:all .25s; }
.gx-why-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-brand); }
.gx-why-card:nth-child(2)::before{ background:var(--grad-fire); }
.gx-why-card:nth-child(3)::before{ background:var(--grad-green); }
.gx-why-card:nth-child(4)::before{ background:linear-gradient(135deg,var(--electric-lt),var(--fire)); }
.gx-why-card:nth-child(5)::before{ background:linear-gradient(135deg,var(--fire),#0f7a5a); }
.gx-why-card:nth-child(6)::before{ background:linear-gradient(135deg,#0f1f5c,var(--green)); }
.gx-why-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; }
.gx-why-ico{ width:50px;height:50px; border-radius:var(--r-md); background:var(--base); display:flex;align-items:center;justify-content:center; font-size:1.35rem; margin-bottom:16px; }
.gx-why-card h3{ font-size:1rem; margin-bottom:8px; }
.gx-why-card p{ font-size:.87rem; }

/* ---------- career support (checklist card grid) ---------- */
.gx-support{ background: var(--grad-hero); position:relative; overflow:hidden; }
.gx-support::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.gx-support .section-head h2{ color:#fff; }
.gx-support .section-head p{ color:rgba(255,255,255,.6); }
.gx-support-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; position:relative; z-index:1; }
.gx-support-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:24px; backdrop-filter:blur(8px); transition:all .25s; }
.gx-support-card:hover{ background:rgba(255,255,255,.11); transform:translateY(-3px); }
.gx-support-check{ width:34px;height:34px; border-radius:50%; background:rgba(127,255,212,.15); color:#7fffd4; display:flex;align-items:center;justify-content:center; font-weight:800; margin-bottom:14px; font-size:.95rem; }
.gx-support-card h3{ color:#fff; font-size:.96rem; margin-bottom:8px; }
.gx-support-card p{ color:rgba(255,255,255,.55); font-size:.85rem; }

/* ---------- final CTA ---------- */
.gx-cta{ padding:90px 0; text-align:center; position:relative; overflow:hidden; background: linear-gradient(135deg, #0f2f89 0%, #0f3554 50%, #08a174 100%); }
.gx-cta::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.gx-cta-inner{ position:relative; z-index:1; max-width:660px; margin:0 auto; }
.gx-cta h2{ color:#fff; margin-bottom:14px; }
.gx-cta p{ color:rgba(255,255,255,.65); margin-bottom:34px; font-size:1.05rem; }
.gx-cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.gx-cta-fine{ font-size:.76rem; color:rgba(255,255,255,.3); }

/* ---------- partners / testimonials ---------- */
.gx-partners{ background:var(--surface); }
.gx-partner-wall{
  display:grid; grid-template-columns:repeat(6,1fr); max-width:1000px; margin:38px auto 0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--line); gap:1px;
}
.gx-partner-cell{
  background:var(--base); padding:24px 10px; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:.86rem; color:var(--ink-soft); transition:all .2s;
}
.gx-partner-cell:hover{ background:#fff; color:var(--electric); }
@media (max-width:760px){ .gx-partner-wall{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .gx-partner-wall{ grid-template-columns:repeat(2,1fr); } }

.gx-testi{ background:var(--base); }
.gx-testi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; max-width:1080px; margin:0 auto; }
.gx-testi-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; position:relative; }
.gx-testi-card::before{ content:'\201C'; position:absolute; top:14px; right:22px; font-family:var(--font-display); font-size:2.6rem; color:rgba(26,58,143,.12); line-height:1; }
.gx-testi-top{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.gx-testi-avatar{
  width:46px;height:46px; border-radius:50%; color:#fff; flex-shrink:0;
  font-family:var(--font-display); font-weight:700; font-size:.86rem;
  display:flex;align-items:center;justify-content:center;
}
.gx-testi-avatar.a1{ background:var(--grad-card); }
.gx-testi-avatar.a2{ background:var(--grad-fire); }
.gx-testi-avatar.a3{ background:var(--grad-green); }
.gx-testi-top h4{ font-size:.92rem; color:var(--ink); }
.gx-testi-top span{ font-size:.76rem; color:var(--muted); }
.gx-testi-card p{ font-size:.88rem; font-style:italic; color:var(--ink-soft); line-height:1.65; }

/* =====================================================================
   COURSE PAGE (course.html) — .cx- prefixed
   ===================================================================== */
.cx-hero{
  background: linear-gradient(135deg, #0a1235 0%, #0f1f5c 30%, #1a3a8f 60%, #1e5f74 85%, #0f7a5a 100%);
  position:relative; overflow:hidden; padding:96px 0 84px;
}
.cx-hero-grid{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.cx-hero-orb{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.cx-orb-1{ width:380px;height:380px; top:-90px; right:80px; background:rgba(15,122,90,.22); }
.cx-orb-2{ width:260px;height:260px; bottom:-60px; left:6%; background:rgba(26,58,143,.28); }
.cx-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:center; }
.cx-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:rgba(26,58,143,.2);
  border:1px solid rgba(168,196,255,.3); border-radius:100px; padding:6px 16px;
  font-family:var(--font-mono); font-size:.74rem; font-weight:700; color:#a8c4ff; margin-bottom:20px;
}
.cx-dot-live{ width:8px;height:8px; background:#7fffd4; border-radius:50%; animation:pulse-dot 2s infinite; }
.cx-hero-copy h1{ color:#fff; margin-bottom:18px; }
.cx-hero-copy h1 .hl{ background:linear-gradient(135deg,#a8c4ff 0%,#7fffd4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cx-hero-sub{ color:rgba(255,255,255,.75); font-size:1.03rem; max-width:540px; margin-bottom:30px; }
.cx-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.cx-hero-card{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-xl); padding:30px 28px; backdrop-filter:blur(12px); }
.cx-hero-card-head{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#fff; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.14); }
.cx-hl-list{ display:flex; flex-direction:column; gap:14px; }
.cx-hl-list li{ display:flex; align-items:center; gap:12px; font-size:.9rem; color:rgba(255,255,255,.85); }
.cx-hl-ico{ width:34px;height:34px; flex-shrink:0; border-radius:var(--r-sm); background:rgba(127,255,212,.14); display:flex; align-items:center; justify-content:center; font-size:1rem; }
@media (max-width:900px){
  .cx-hero-inner{ grid-template-columns:1fr; text-align:center; }
  .cx-hero-sub{ margin-left:auto; margin-right:auto; }
  .cx-hero-actions{ justify-content:center; }
  .cx-hl-list li{ justify-content:center; text-align:left; }
}

.cx-stats-rail{ background:var(--grad-brand); padding:0; }
.cx-stats-inner{ display:grid; grid-template-columns:repeat(5,1fr); }
.cx-stat{ text-align:center; padding:26px 12px; border-left:1px solid rgba(255,255,255,.12); }
.cx-stat:first-child{ border-left:none; }
.cx-stat-num{ font-family:var(--font-display); font-size:1.4rem; font-weight:800; color:#fff; }
.cx-stat-lbl{ font-size:.74rem; color:rgba(255,255,255,.6); margin-top:4px; }
@media (max-width:820px){
  .cx-stats-inner{ grid-template-columns:repeat(3,1fr); }
  .cx-stat:nth-child(3n+1){ border-left:none; }
  .cx-stat{ border-top:1px solid rgba(255,255,255,.12); }
  .cx-stat:nth-child(-n+3){ border-top:none; }
}
@media (max-width:520px){
  .cx-stats-inner{ grid-template-columns:repeat(2,1fr); }
  .cx-stat:nth-child(2n+1){ border-left:none; }
}

.cx-why{ background:var(--surface); }
.cx-bento{ display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:auto auto; gap:18px; max-width:1100px; margin:0 auto; }
.cx-bento-card{ border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; transition:all .25s; background:var(--surface); }
.cx-bento-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; }
.cx-bento-lg{ grid-row:1 / span 2; background: var(--grad-hero); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.cx-bento-lg h3{ color:#fff; font-size:1.3rem; }
.cx-bento-lg p{ color:rgba(255,255,255,.65); }
.cx-bento-wide{ grid-column:2 / span 2; display:flex; align-items:center; gap:22px; }
.cx-bento-wide .cx-bento-ico{ margin-bottom:0; }
.cx-bento-ico{ width:48px;height:48px; border-radius:var(--r-md); background:var(--base); display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:16px; flex-shrink:0; }
.cx-bento-lg .cx-bento-ico{ background:rgba(255,255,255,.12); }
.cx-bento-card h3{ font-size:1.02rem; margin-bottom:8px; }
.cx-bento-card p{ font-size:.87rem; }
@media (max-width:860px){
  .cx-bento{ grid-template-columns:1fr; grid-template-rows:auto; }
  .cx-bento-lg{ grid-row:auto; }
  .cx-bento-wide{ grid-column:auto; flex-direction:column; align-items:flex-start; }
}

.cx-courses{ background:var(--base); }
.cx-course-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:22px; }
.cx-course-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; position:relative; overflow:hidden; transition:all .28s; }
.cx-course-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-brand); }
.cx-c1::before{ background:var(--grad-brand); }
.cx-c2::before{ background:var(--grad-fire); }
.cx-c3::before{ background:var(--grad-green); }
.cx-c4::before{ background:linear-gradient(135deg,var(--electric-lt),var(--fire)); }
.cx-c5::before{ background:linear-gradient(135deg,#0f1f5c,var(--green)); }
.cx-course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.cx-course-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cx-course-ico{ width:52px;height:52px; border-radius:var(--r-md); background:var(--base); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.cx-course-pill{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--electric); background:rgba(26,58,143,.08); border:1px solid rgba(26,58,143,.18); padding:4px 10px; border-radius:100px;
}
.cx-course-card h3{ font-size:1.08rem; margin-bottom:10px; }
.cx-course-card p{ font-size:.87rem; margin-bottom:16px; min-height:66px; }
.cx-course-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.cx-course-tags span{ font-family:var(--font-mono); font-size:.68rem; background:var(--base); color:var(--muted); padding:4px 10px; border-radius:100px; border:1px solid var(--line); }
.cx-course-link{ font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--electric); display:inline-flex; align-items:center; gap:6px; }
.cx-course-link span{ transition:transform .2s; }
.cx-course-link:hover span{ transform:translateX(4px); }
.cx-course-cta-card{ background:var(--grad-card); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; }
.cx-course-cta-card::before{ display:none; }
.cx-course-cta-card h3{ color:#fff; }
.cx-course-cta-card p{ color:rgba(255,255,255,.75); min-height:0; }

.cx-reasons{ background:var(--surface); padding:90px 0; }
.cx-reason-list{ max-width:900px; margin:0 auto; border-top:1px solid var(--line); }
.cx-reason-row{ display:grid; grid-template-columns:auto auto 1fr; align-items:baseline; gap:18px; padding:22px 8px; border-bottom:1px solid var(--line); position:relative; transition:padding-left .25s, background .25s; }
.cx-reason-row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-card); transform:scaleY(0); transform-origin:top; transition:transform .3s; }
.cx-reason-row:hover::before{ transform:scaleY(1); }
.cx-reason-row:hover{ padding-left:20px; background:var(--base); }
.cx-reason-ico{ align-self:center; width:42px;height:42px; border-radius:50%; background:var(--base); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.cx-reason-row:hover .cx-reason-ico{ background:#fff; }
.cx-reason-title{ font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--ink); white-space:nowrap; }
.cx-reason-desc{ font-size:.86rem; margin:0; text-align:right; }
@media (max-width:700px){
  .cx-reason-row{ grid-template-columns:auto 1fr; grid-template-areas:"ico title" "desc desc"; row-gap:8px; }
  .cx-reason-ico{ grid-area:ico; }
  .cx-reason-title{ grid-area:title; white-space:normal; }
  .cx-reason-desc{ grid-area:desc; text-align:left; }
  .cx-reason-row:hover{ padding-left:8px; }
}

.cx-journey{ background:var(--base); }
.cx-stepper{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:1120px; margin:44px auto 0; }
.cx-stepper::before{ content:''; position:absolute; top:23px; left:calc(100%/12); right:calc(100%/12); height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); z-index:0; }
.cx-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.cx-step-num{ width:46px;height:46px; border-radius:50%; background:var(--surface); border:2px solid var(--electric); color:var(--electric); font-family:var(--font-display); font-weight:800; font-size:.92rem; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.cx-step:hover .cx-step-num{ background:var(--grad-card); color:#fff; border-color:transparent; transform:scale(1.08); }
.cx-step h4{ font-size:.85rem; max-width:120px; }
@media (max-width:900px){
  .cx-stepper{ grid-template-columns:repeat(3,1fr); row-gap:32px; }
  .cx-stepper::before{ display:none; }
}
@media (max-width:520px){ .cx-stepper{ grid-template-columns:repeat(2,1fr); } }

.cx-cta{ padding:90px 0; text-align:center; position:relative; overflow:hidden; background: linear-gradient(135deg, #0f2f89 0%, #0f3554 50%, #08a174 100%); }
.cx-cta::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.cx-cta-inner{ position:relative; z-index:1; max-width:660px; margin:0 auto; }
.cx-cta h2{ color:#fff; margin:14px 0; }
.cx-cta p{ color:rgba(255,255,255,.65); margin-bottom:32px; font-size:1.03rem; }
.cx-cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   PLACEMENT PAGE (placement-training.html) — .px- prefixed
   ===================================================================== */
.px-hero{
  background: linear-gradient(135deg, #0a1235 0%, #0f1f5c 30%, #1a3a8f 60%, #1e5f74 85%, #0f7a5a 100%);
  position:relative; overflow:hidden; padding:100px 0 130px;
}
.px-hero-grid{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.px-hero-orb{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.px-orb-1{ width:400px;height:400px; top:-100px; right:60px; background:rgba(15,122,90,.24); }
.px-orb-2{ width:280px;height:280px; bottom:-40px; left:6%; background:rgba(26,58,143,.3); }
.px-orb-3{ width:220px;height:220px; top:30%; right:12%; background:rgba(30,95,116,.2); }
.px-hero-inner{ position:relative; z-index:1; max-width:780px; margin:0 auto; text-align:center; }
.px-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:rgba(26,58,143,.22);
  border:1px solid rgba(168,196,255,.35); border-radius:100px; padding:7px 18px;
  font-family:var(--font-mono); font-size:.76rem; font-weight:700; color:#a8c4ff; margin-bottom:22px;
}
.px-hero-inner h1{ color:#fff; margin-bottom:20px; font-size:clamp(2.1rem,4.2vw,2.9rem); }
.px-hero-inner h1 .hl{ background:linear-gradient(135deg,#a8c4ff 0%,#7fffd4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.px-hero-sub{ color:rgba(255,255,255,.75); font-size:1.05rem; margin:0 auto 34px; }
.px-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.px-trust-row{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.px-trust-row p{ color:rgba(255,255,255,.7); font-size:.9rem; margin:0; }
.px-trust-row strong{ color:#fff; }
.px-avatar-stack{ display:flex; }
.px-av{
  width:38px;height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.72rem; color:#fff; border:2.5px solid #0f1f5c; margin-left:-10px;
}
.px-av:first-child{ margin-left:0; }
.px-av.a1{ background:var(--grad-card); }
.px-av.a2{ background:var(--grad-fire); }
.px-av.a3{ background:var(--grad-green); }
.px-av.a4{ background:var(--grad-pink); }

.px-stats-float{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; margin-bottom:-96px; }
.px-stat-card{ background:#fff; border-radius:var(--r-xl); padding:26px 20px; text-align:center; box-shadow:var(--shadow-lg); transition:all .25s; }
.px-stat-card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(10,18,60,.22); }
.px-stat-ico{ width:46px;height:46px; margin:0 auto 12px; border-radius:50%; background:var(--base); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.px-stat-num{ font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--ink); }
.px-stat-lbl{ font-size:.78rem; color:var(--muted); margin-top:4px; }
@media (max-width:820px){ .px-stats-float{ grid-template-columns:repeat(2,1fr); margin-bottom:-140px; } }
@media (max-width:520px){ .px-stats-float{ grid-template-columns:1fr; margin-bottom:-260px; } }

.px-ticker-section{ background:var(--surface); padding:150px 0 40px; text-align:center; }
.px-ticker-lbl{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.px-ticker-strip{ border-radius:var(--r-lg); }
@media (max-width:820px){ .px-ticker-section{ padding-top:190px; } }
@media (max-width:520px){ .px-ticker-section{ padding-top:310px; } }

.px-why{ background:var(--base); }
.px-why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.px-why-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 26px; text-align:center; transition:all .28s; }
.px-why-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:transparent; }
.px-why-ico{ width:60px;height:60px; margin:0 auto 18px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow:0 8px 22px rgba(10,18,60,.18); }
.px-ico-1{ background:var(--grad-card); }
.px-ico-2{ background:var(--grad-fire); }
.px-ico-3{ background:linear-gradient(135deg,var(--electric-lt),var(--fire)); }
.px-ico-4{ background:var(--grad-green); }
.px-why-card h3{ font-size:1.02rem; margin-bottom:10px; }
.px-why-card p{ font-size:.88rem; }

.px-journey{ background:var(--surface); }
.px-zigzag{ position:relative; max-width:920px; margin:48px auto 0; }
.px-zigzag::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(var(--electric), var(--green)); transform:translateX(-50%); }
.px-zz-row{ position:relative; width:50%; padding:0 0 40px 0; }
.px-zz-row:last-child{ padding-bottom:0; }
.px-zz-row{ padding-right:44px; text-align:right; }
.px-zz-right{ margin-left:50%; padding-right:0; padding-left:44px; text-align:left; }
.px-zz-card{ display:inline-block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; position:relative; box-shadow:var(--shadow-sm); transition:all .25s; max-width:380px; }
.px-zz-row:hover .px-zz-card{ box-shadow:var(--shadow-md); border-color:var(--electric); transform:translateY(-3px); }
.px-zz-ico{ position:absolute; top:18px; width:40px;height:40px; border-radius:50%; background:var(--grad-card); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.05rem; box-shadow:0 0 0 6px var(--surface); }
.px-zz-row .px-zz-ico{ right:-64px; }
.px-zz-right .px-zz-ico{ left:-64px; right:auto; }
.px-zz-final .px-zz-ico{ background:var(--grad-green); }
.px-zz-card h3{ font-size:.98rem; margin-bottom:8px; }
.px-zz-card p{ font-size:.86rem; margin:0; }
.px-zz-final{ border-color:var(--green); }
@media (max-width:760px){
  .px-zigzag::before{ left:20px; }
  .px-zz-row, .px-zz-right{ width:100%; margin-left:0; text-align:left; padding:0 0 34px 56px; }
  .px-zz-card{ max-width:100%; }
  .px-zz-row .px-zz-ico, .px-zz-right .px-zz-ico{ left:-56px; right:auto; top:18px; }
}

.px-support{ background: var(--grad-hero); position:relative; overflow:hidden; padding:90px 0; }
.px-support::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.px-support .section-head{ position:relative; z-index:1; }
.px-support .section-head h2{ color:#fff; }
.px-support .section-head p{ color:rgba(255,255,255,.6); }
.px-support-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(309px,1fr)); gap:18px; }
.px-support-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:28px 24px; backdrop-filter:blur(10px); transition:all .25s; }
.px-support-card:hover{ background:rgba(255,255,255,.12); transform:translateY(-4px); border-color:rgba(168,196,255,.4); }
.px-support-ico{ width:44px;height:44px; border-radius:var(--r-sm); background:rgba(127,255,212,.14); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:16px; }
.px-support-card h3{ color:#fff; font-size:.98rem; margin-bottom:8px; }
.px-support-card p{ color:rgba(255,255,255,.55); font-size:.86rem; }

.px-who{ background:var(--base); }
.px-who-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:16px; max-width:920px; margin:0 auto; }
.px-who-card{
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:22px 16px; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:10px; transition:all .22s;
}
.px-who-ico{ font-size:1.5rem; }
.px-who-card:hover{ border-color:transparent; background:var(--grad-card); color:#fff; transform:translateY(-4px); box-shadow:var(--shadow-md); }

.px-cta{ padding:90px 0; text-align:center; position:relative; overflow:hidden; background: linear-gradient(135deg, #0f2f89 0%, #0f3554 50%, #08a174 100%); }
.px-cta::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.px-cta-inner{ position:relative; z-index:1; max-width:660px; margin:0 auto; }
.px-cta-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:8px 18px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700; color:#7fffd4; margin-bottom:18px;
}
.px-cta h2{ color:#fff; margin-bottom:14px; }
.px-cta p{ color:rgba(255,255,255,.65); margin-bottom:32px; font-size:1.03rem; }
.px-cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   CONTACT PAGE (contact.html) — .cp- prefixed
   ===================================================================== */
.cp-hero{
  background: linear-gradient(135deg, #0a1235 0%, #0f1f5c 30%, #1a3a8f 60%, #1e5f74 85%, #0f7a5a 100%);
  position:relative; overflow:hidden; padding:90px 0;
}
.cp-hero-grid{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.cp-hero-orb{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.cp-orb-1{ width:360px;height:360px; top:-80px; right:60px; background:rgba(15,122,90,0.22); }
.cp-orb-2{ width:260px;height:260px; bottom:-60px; left:5%; background:rgba(26,58,143,0.25); }
.cp-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:center; }
.cp-hero-copy h1{ color:#fff; margin:16px 0 18px; }
.cp-hero-copy h1 .hl{ background:linear-gradient(135deg,#a8c4ff 0%,#7fffd4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cp-hero-sub{ color:rgba(255,255,255,.75); font-size:1.05rem; max-width:480px; margin-bottom:30px; }
.cp-hero-card{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-xl); padding:26px; backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:18px; }
.cp-hero-card-row{ display:flex; align-items:center; gap:16px; }
.cp-hero-card-row + .cp-hero-card-row{ padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }
.cp-hero-card-ico{ width:44px;height:44px; flex-shrink:0; border-radius:var(--r-md); background:rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center; font-size:1.2rem; }
.cp-hero-card-row strong{ display:block; color:#fff; font-family:var(--font-display); font-size:1.05rem; }
.cp-hero-card-row small{ color:rgba(255,255,255,.6); font-size:.78rem; }
@media (max-width:900px){
  .cp-hero-inner{ grid-template-columns:1fr; text-align:center; }
  .cp-hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
}

.cp-info-section{ background:var(--surface); padding:90px 0; }
.cp-info-grid{ display:grid; grid-template-columns:1fr 440px; gap:56px; align-items:start; }
.cp-info-stack{ display:flex; flex-direction:column; gap:0; }
.cp-info-row{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); }
.cp-info-ico{ width:46px;height:46px; flex-shrink:0; border-radius:50%; background:var(--base); color:var(--electric); display:flex;align-items:center;justify-content:center; font-size:1.2rem; }
.cp-info-body h4{ font-size:.92rem; color:var(--ink); margin-bottom:5px; }
.cp-info-body p{ font-size:.9rem; margin-bottom:6px; word-break:break-word; overflow-wrap:anywhere; }
.cp-info-link{ font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--electric); word-break:break-word; overflow-wrap:anywhere; }
.cp-info-link:hover{ text-decoration:underline; }
.cp-hours-card{ background:var(--base); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; margin-top:24px; }
.cp-hours-card h4{ margin-bottom:14px; color:var(--ink); }
.cp-map-box{ width:100%; height:260px; background:var(--base); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:20px; }
.cp-map-box iframe{ width:100%; height:100%; border:0; }
.cp-form-card{ background:#fff; border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(26,58,143,0.1); position:sticky; top:90px; }
@media (max-width:960px){
  .cp-info-grid{ grid-template-columns:1fr; }
  .cp-form-card{ position:static; }
}

.cp-quick-section{ background:var(--base); padding:90px 0; }
.cp-quick-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.cp-quick-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 24px; position:relative; overflow:hidden; transition:all .28s; }
.cp-quick-card::before{ content:''; position:absolute; top:-40px; right:-40px; width:110px; height:110px; background:var(--grad-card); opacity:.08; border-radius:50%; transition:transform .35s; }
.cp-quick-card:hover::before{ transform:scale(1.5); }
.cp-quick-card:hover{ border-color:var(--electric); box-shadow:var(--shadow-md); transform:translateY(-5px); }
.cp-quick-num{ font-family:var(--font-display); font-weight:800; font-size:.78rem; letter-spacing:.08em; color:var(--electric); margin-bottom:14px; }
.cp-quick-ico{ width:50px;height:50px; border-radius:var(--r-md); background:var(--base); display:flex;align-items:center;justify-content:center; font-size:1.3rem; margin-bottom:16px; }
.cp-quick-card h3{ font-size:1rem; margin-bottom:8px; }
.cp-quick-card p{ font-size:.85rem; margin-bottom:16px; }
.cp-quick-link{ font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--electric); }
.cp-quick-link:hover{ text-decoration:underline; }
@media (max-width:900px){ .cp-quick-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cp-quick-row{ grid-template-columns:1fr; } }

.cp-social-section{ background: var(--grad-hero); padding:80px 0; text-align:center; position:relative; overflow:hidden; }
.cp-social-grid-bg{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.cp-social-inner{ position:relative; z-index:1; }
.cp-social-inner h2{ margin:14px 0 12px; }
.cp-social-sub{ color:rgba(255,255,255,.65); max-width:520px; margin:0 auto 34px; font-size:1.02rem; }
.cp-social-links{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.cp-social-btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:#fff; padding:13px 24px; border-radius:100px; background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); transition:all .22s;
}
.cp-social-btn:hover{ background:rgba(255,255,255,.18); border-color:#fff; transform:translateY(-2px); }
/* =====================================================================
   BLOG PAGE (blog.html) — .bx- prefixed
   Append this block to the existing style.css. Uses the same design
   tokens (--electric, --fire, --green, --grad-*, --r-*, --shadow-*) so it
   matches the rest of the site with zero extra setup.
   ===================================================================== */

/* ---------- page hero ---------- */
.bx-hero{
  background: linear-gradient(135deg, #0a1235 0%, #0f1f5c 30%, #1a3a8f 60%, #1e5f74 85%, #0f7a5a 100%);
  position:relative; overflow:hidden; padding:86px 0 74px; text-align:center;
}
.bx-hero-grid{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
.bx-hero-orb{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.bx-orb-1{ width:380px;height:380px; top:-100px; right:80px; background:rgba(15,122,90,.22); }
.bx-orb-2{ width:260px;height:260px; bottom:-60px; left:6%; background:rgba(26,58,143,.28); }
.bx-hero-inner{ position:relative; z-index:1; max-width:700px; margin:0 auto; }
.bx-hero-inner h1{ color:#fff; margin-bottom:16px; }
.bx-hero-inner h1 .hl{ background:linear-gradient(135deg,#a8c4ff 0%,#7fffd4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.bx-hero-sub{ color:rgba(255,255,255,.75); font-size:1.03rem; margin:0 auto 30px; }

/* search pill inside hero */
.bx-search{
  display:flex; align-items:center; gap:10px; max-width:460px; margin:0 auto;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.25);
  border-radius:100px; padding:6px 8px 6px 20px; backdrop-filter:blur(8px);
}
.bx-search input{
  flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:.9rem; padding:8px 0;
}
.bx-search input::placeholder{ color:rgba(255,255,255,.55); }
.bx-search button{
  background:var(--grad-green); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.85rem;
  padding:10px 20px; border-radius:100px; white-space:nowrap; transition:all .2s;
}
.bx-search button:hover{ filter:brightness(1.1); transform:translateY(-1px); }

/* ---------- category filter bar ---------- */
.bx-filters{ background:var(--surface); border-bottom:1px solid var(--line); padding:22px 0; position:sticky; top:68px; z-index:40; }
.bx-filter-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ---------- featured post ---------- */
.bx-featured-section{ background:var(--base); padding:64px 0 20px; }
.bx-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md);
}
.bx-featured-media{
  background:var(--grad-hero); position:relative; min-height:320px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.bx-featured-media::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:22px 22px; }
.bx-featured-media .bx-emoji{ font-size:4.5rem; position:relative; z-index:1; }
.bx-featured-badge{
  position:absolute; top:20px; left:20px; z-index:2;
  background:rgba(127,255,212,.16); border:1px solid rgba(127,255,212,.4); color:#7fffd4;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px;
}
.bx-featured-body{ padding:38px 40px; display:flex; flex-direction:column; justify-content:center; }
.bx-post-meta{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.76rem; color:var(--muted); margin-bottom:14px; flex-wrap:wrap; }
.bx-post-meta .cat{ color:var(--electric); font-weight:600; }
.bx-featured-body h2{ font-size:1.6rem; margin-bottom:12px; }
.bx-featured-body p{ margin-bottom:22px; }
.bx-read-link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--electric); }
.bx-read-link span{ transition:transform .2s; }
.bx-read-link:hover span{ transform:translateX(4px); }
@media (max-width:820px){ .bx-featured{ grid-template-columns:1fr; } .bx-featured-media{ min-height:200px; } .bx-featured-body{ padding:30px 26px; } }

/* ---------- blog grid + sidebar ---------- */
.bx-main{ background:var(--base); padding:60px 0 90px; }
.bx-layout{ display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; }
.bx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }

.bx-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column; transition:all .28s;
}
.bx-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.bx-card-media{
  height:150px; background:var(--grad-card); position:relative; display:flex; align-items:center; justify-content:center;
}
.bx-card:nth-child(3n+2) .bx-card-media{ background:var(--grad-fire); }
.bx-card:nth-child(3n+3) .bx-card-media{ background:var(--grad-green); }
.bx-card-media::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px); background-size:18px 18px; }
.bx-card-media .bx-emoji{ font-size:2.4rem; position:relative; z-index:1; }
.bx-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.bx-card-body .bx-post-meta{ margin-bottom:10px; }
.bx-card-body h3{ font-size:1.02rem; margin-bottom:10px; }
.bx-card-body p{ font-size:.86rem; margin-bottom:18px; flex:1; }
.bx-card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }
.bx-author{ display:flex; align-items:center; gap:8px; }
.bx-author-av{
  width:26px;height:26px; border-radius:50%; background:var(--grad-card); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.66rem; display:flex; align-items:center; justify-content:center;
}
.bx-author span{ font-size:.78rem; color:var(--ink-soft); font-weight:500; }
.bx-read-time{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); }

.bx-load-more{ text-align:center; margin-top:40px; }

/* ---------- sidebar ---------- */
.bx-sidebar{ display:flex; flex-direction:column; gap:22px; position:sticky; top:150px; }
.bx-side-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.bx-side-card h4{ font-family:var(--font-display); font-size:.92rem; font-weight:700; color:var(--ink); margin-bottom:16px; }
.bx-tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; }
.bx-tag-cloud a{
  font-size:.78rem; color:var(--electric); background:var(--base); border:1px solid var(--line);
  padding:6px 13px; border-radius:100px; transition:all .2s;
}
.bx-tag-cloud a:hover{ background:var(--electric); color:#fff; border-color:transparent; }
.bx-popular-list{ display:flex; flex-direction:column; gap:14px; }
.bx-popular-item{ display:flex; gap:12px; align-items:flex-start; }
.bx-popular-num{
  font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--line); flex-shrink:0; line-height:1.3;
}
.bx-popular-item p{ font-size:.85rem; color:var(--ink-soft); line-height:1.45; margin:0; font-weight:500; }
.bx-popular-item small{ display:block; color:var(--muted); font-size:.72rem; margin-top:4px; font-family:var(--font-mono); }

.bx-newsletter{ background:var(--grad-hero); color:#fff; position:relative; overflow:hidden; }
.bx-newsletter::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:18px 18px; }
.bx-newsletter h4{ color:#fff; position:relative; z-index:1; }
.bx-newsletter p{ color:rgba(255,255,255,.65); font-size:.83rem; margin-bottom:16px; position:relative; z-index:1; }
.bx-newsletter form{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; }
.bx-newsletter input{
  padding:11px 14px; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; font-size:.85rem; outline:none;
}
.bx-newsletter input::placeholder{ color:rgba(255,255,255,.5); }
.bx-newsletter button{
  background:var(--grad-green); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.86rem;
  padding:11px; border-radius:var(--r-md); transition:all .2s;
}
.bx-newsletter button:hover{ filter:brightness(1.1); }

@media (max-width:980px){
  .bx-layout{ grid-template-columns:1fr; }
  .bx-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .bx-sidebar .bx-side-card{ flex:1; min-width:260px; }
}
@media (max-width:600px){
  .bx-featured-body{ padding:26px 20px; }
  .bx-filters{ top:0; }
}