/* ══════════════════════════════════════════════════════════════
   APEX CYBERHUB — home.css  v2
   Full light/dark theme support. All slide content fits device.
══════════════════════════════════════════════════════════════ */

/* ── Theme tokens ──────────────────────────────────────────── */
html[data-theme="light"] {
    --bg:        #f0f5fa;
    --bg2:       #e2ecf5;
    --card:      #ffffff;
    --card2:     #f4f8fc;
    --border:    rgba(0,0,0,0.09);
    --text:      #0d1724;      /* dark — readable on light bg */
    --text2:     #3d4f62;
    --muted:     rgba(13,23,36,0.48);
    --shadow:    rgba(0,0,0,0.10);
    --shadow-lg: rgba(0,0,0,0.18);
    --hero-bg:   linear-gradient(135deg,#ddeeff 0%,#c8eaf5 50%,#d8f5e8 100%);
    --stat-bg:   linear-gradient(135deg,rgba(0,200,216,.12),rgba(0,153,170,.07));
    --accent:    #0099aa;      /* slightly darker in light for contrast */
    --accent-fg: #ffffff;
    --cta-btn-outline-color: #0d1724;
}
html[data-theme="dark"] {
    --bg:        #07101a;
    --bg2:       #0d1a28;
    --card:      #0f1e2e;
    --card2:     #132333;
    --border:    rgba(255,255,255,0.07);
    --text:      #dce8f2;
    --text2:     #8faab8;
    --muted:     rgba(220,232,242,0.40);
    --shadow:    rgba(0,0,0,0.40);
    --shadow-lg: rgba(0,0,0,0.60);
    --hero-bg:   linear-gradient(135deg,#071525 0%,#0a1e30 50%,#081820 100%);
    --stat-bg:   linear-gradient(135deg,rgba(0,234,255,.10),rgba(0,153,170,.06));
    --accent:    #00eaff;
    --accent-fg: #001820;
    --cta-btn-outline-color: #ffffff;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background .3s, color .3s;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; }
section { padding: 90px 5%; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-label { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.section-title { font-size:clamp(26px,4vw,42px); font-weight:900; letter-spacing:-.02em; color:var(--text); line-height:1.15; margin-bottom:14px; }
.section-sub   { font-size:16px; color:var(--text2); max-width:560px; margin:0 auto; line-height:1.7; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:8px; padding:13px 26px;
    border-radius:10px; font-size:15px; font-weight:800; cursor:pointer;
    transition:transform .15s, opacity .15s, box-shadow .15s;
    border:none; font-family:inherit;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:#00eaff; color:#001820; box-shadow:0 4px 20px rgba(0,234,255,.28); }
.btn-primary:hover { box-shadow:0 8px 32px rgba(0,234,255,.42); }
html[data-theme="light"] .btn-primary { background:#0099aa; color:#fff; box-shadow:0 4px 20px rgba(0,153,170,.30); }
.btn-outline { background:transparent; color:var(--text); border:2px solid var(--border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-white { background:#fff; color:#001820; box-shadow:0 4px 20px rgba(0,0,0,.12); }
.btn-white:hover { box-shadow:0 8px 32px rgba(0,0,0,.20); }

/* Download App button (hero) */
.btn-download {
    background: linear-gradient(135deg,#00eaff,#0099aa);
    color: #001820; position:relative; overflow:hidden;
}
.btn-download:hover { box-shadow:0 8px 28px rgba(0,234,255,.40); }
.hero-dl-dot { display:none; width:7px; height:7px; background:#00ff88; border-radius:50%; flex-shrink:0; animation:dl-dot 1.8s ease-in-out infinite; }
#heroDlBtn.ready .hero-dl-dot { display:block; }
@keyframes dl-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero {
    min-height: 100vh;
    background: var(--hero-bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:100px 5% 70px; position:relative; overflow:hidden;
}
.hero-blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.10; pointer-events:none; animation:blob-float 9s ease-in-out infinite alternate; }
html[data-theme="dark"] .hero-blob { opacity:.18; }
.hero-blob-1 { width:520px; height:520px; background:#00eaff; top:-130px; left:-130px; }
.hero-blob-2 { width:420px; height:420px; background:#3b82f6; bottom:-80px; right:-80px; animation-delay:-4s; animation-duration:12s; }
.hero-blob-3 { width:320px; height:320px; background:#22c55e; top:42%; left:42%; animation-delay:-7s; animation-duration:16s; }
@keyframes blob-float { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,22px) scale(1.08)} }

.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1200px; width:100%; position:relative; z-index:1; }
.hero-copy { animation:fade-up .8s ease both; }

.hero-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(0,234,255,0.12); border:1px solid rgba(0,234,255,0.25);
    color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.10em;
    text-transform:uppercase; padding:6px 14px; border-radius:20px; margin-bottom:22px;
}
html[data-theme="light"] .hero-eyebrow { background:rgba(0,153,170,.10); border-color:rgba(0,153,170,.25); }
.hero-eyebrow::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; animation:dot-blink 1.4s ease infinite; }
@keyframes dot-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero-title { font-size:clamp(34px,5vw,60px); font-weight:900; line-height:1.08; letter-spacing:-.03em; color:var(--text); margin-bottom:22px; animation:fade-up .8s ease both; animation-delay:.15s; }
.hero-title .hl { color:transparent; background:linear-gradient(90deg,#00eaff,#22c55e); -webkit-background-clip:text; background-clip:text; }
html[data-theme="light"] .hero-title .hl { background:linear-gradient(90deg,#0077aa,#16803a); -webkit-background-clip:text; background-clip:text; }

.hero-sub { font-size:17px; color:var(--text2); line-height:1.72; margin-bottom:36px; max-width:480px; animation:fade-up .8s ease both; animation-delay:.25s; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; animation:fade-up .8s ease both; animation-delay:.35s; }
.hero-mini-stats { display:flex; gap:28px; margin-top:40px; animation:fade-up .8s ease both; animation-delay:.45s; }
.hms-item { text-align:center; }
.hms-num { font-size:24px; font-weight:900; color:var(--accent); line-height:1.1; }
.hms-lbl { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

/* ══════════════════════════════════════════════════════════════
   SERVICE ANIMATION SHOWCASE
══════════════════════════════════════════════════════════════ */
.showcase-wrap { position:relative; animation:fade-left .9s ease both; animation-delay:.25s; }

/* Floating tags */
.showcase-tag {
    position:absolute; background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:8px 14px; font-size:12px; font-weight:700; color:var(--text);
    box-shadow:0 8px 24px var(--shadow); white-space:nowrap;
    display:flex; align-items:center; gap:7px; z-index:3;
}
.showcase-tag-1 { top:10%; left:-18%; animation:float-tag 3.0s ease-in-out infinite; }
.showcase-tag-2 { top:48%; right:-20%; animation:float-tag 2.8s ease-in-out infinite; animation-delay:-.8s; }
.showcase-tag-3 { bottom:10%; left:-16%; animation:float-tag 3.4s ease-in-out infinite; animation-delay:-1.5s; }
@keyframes float-tag { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.tag-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:dot-blink 1.4s ease infinite; }

/* Device frame */
.showcase-device {
    background:var(--card); border-radius:22px;
    box-shadow:0 36px 90px var(--shadow-lg), 0 0 0 1px var(--border);
    overflow:hidden; position:relative; aspect-ratio:4/3;
}
.device-topbar {
    height:34px; background:var(--card2); border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:6px; padding:0 12px; flex-shrink:0;
}
.dev-dot { width:9px; height:9px; border-radius:50%; }
.dev-dot:nth-child(1){background:#ff5f56} .dev-dot:nth-child(2){background:#ffbd2e} .dev-dot:nth-child(3){background:#27c93f}
.device-url {
    flex:1; height:18px; background:var(--bg2); border-radius:9px; margin:0 6px;
    display:flex; align-items:center; padding:0 8px; gap:4px;
    font-size:10px; color:var(--muted); overflow:hidden;
}
.device-url::before { content:'🔒'; font-size:9px; }

/* Slides */
.slide-container { position:relative; height:calc(100% - 34px); overflow:hidden; }
.service-slide {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:14px 16px 36px;
    opacity:0; transition:opacity .7s ease, transform .7s ease; transform:scale(1.03);
    gap:0;
}
.service-slide.active { opacity:1; transform:scale(1); }

.slide-passport { background:linear-gradient(145deg,#001830,#003870); }
.slide-training  { background:linear-gradient(145deg,#12002a,#300a5e); }
.slide-printing  { background:linear-gradient(145deg,#1e0500,#4a1000); }
.slide-register  { background:linear-gradient(145deg,#001e0a,#003d18); }

.slide-caption { text-align:center; margin-top:10px; flex-shrink:0; }
.sc-title { font-size:14px; font-weight:800; color:#fff; margin-bottom:3px; }
.sc-sub   { font-size:11px; color:rgba(255,255,255,.60); line-height:1.4; }

/* ── Slide progress / dots ── */
.slide-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.08); }
.slide-progress-fill { height:100%; background:#00eaff; width:0; }
.slide-nav-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:3; }
.snd-btn { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); border:none; cursor:pointer; padding:0; transition:background .2s, transform .2s; }
.snd-btn.active { background:#00eaff; transform:scale(1.4); }

/* ════════════════════════════════════════
   SLIDE 1 — PASSPORT (live image)
════════════════════════════════════════ */
.passport-stage { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; }

.camera-icon-wrap { margin-bottom:8px; }
.camera-body-mini {
    width:52px; height:38px; background:#1a2a3a; border-radius:8px;
    border:2px solid rgba(0,234,255,.4); position:relative; margin:0 auto;
    animation:cam-shake .12s ease-in-out 3;
    animation-play-state:paused;
}
.service-slide.active .camera-body-mini {
    animation-play-state:running;
    animation-iteration-count:3; animation-delay:1.2s;
}
@keyframes cam-shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-1.5deg)} 75%{transform:rotate(1.5deg)} }
.camera-lens-mini {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:18px; height:18px; border-radius:50%; border:2px solid #00eaff;
    background:#000; box-shadow:0 0 0 2px rgba(0,234,255,.2),0 0 8px rgba(0,234,255,.5);
}
.camera-flash-anim {
    position:absolute; inset:0; background:#fff; border-radius:8px; opacity:0;
    animation:flash-anim 4s ease-in-out infinite;
}
@keyframes flash-anim { 0%,68%,100%{opacity:0} 70%,72%{opacity:.85} }

/* Passport photo strip */
.passport-strip {
    display:flex; gap:6px; justify-content:center;
    margin-top:6px;
}
.pp-frame {
    width:44px; height:56px; border-radius:4px;
    border:2px solid rgba(0,234,255,.6);
    overflow:hidden; background:#0a1a30; flex-shrink:0;
    animation:pp-appear .4s ease both;
}
.pp-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.pp-frame-2 { animation-delay:.3s; opacity:0; }
.pp-frame-3 { animation-delay:.6s; opacity:0; }
.pp-frame-4 { animation-delay:.9s; opacity:0; }
@keyframes pp-appear { from{opacity:0;transform:scale(.8) translateY(6px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* ════════════════════════════════════════
   SLIDE 2 — COMPUTER TRAINING
════════════════════════════════════════ */
.training-screen {
    width:100%; max-width:220px; background:#0a001e; border-radius:8px;
    border:2px solid rgba(168,85,247,.45); padding:10px;
    box-shadow:0 0 24px rgba(168,85,247,.30);
}
.ts-bar { display:flex; gap:5px; align-items:center; margin-bottom:8px; }
.ts-dot { width:8px; height:8px; border-radius:50%; }
.ts-dot:nth-child(1){background:#ff5f56} .ts-dot:nth-child(2){background:#ffbd2e} .ts-dot:nth-child(3){background:#27c93f}
.ts-filename { font-size:9px; color:rgba(255,255,255,.4); margin-left:4px; letter-spacing:.04em; }
.ts-code { display:flex; flex-direction:column; gap:5px; }
.ts-line { height:8px; border-radius:3px; width:0%; animation:type-in 3.5s ease-in-out infinite; }
.ts-purple { background:linear-gradient(90deg,#a855f7,#7c3aed); animation-delay:0s; }
.ts-cyan   { background:linear-gradient(90deg,#00eaff,#0099aa); animation-delay:.5s; }
.ts-green  { background:linear-gradient(90deg,#22c55e,#16a34a); animation-delay:1.0s; }
.ts-yellow { background:linear-gradient(90deg,#f59e0b,#d97706); animation-delay:1.5s; }
@keyframes type-in { 0%{width:0%} 40%,80%{width:85%} 100%{width:0%} }
.ts-cursor { width:6px; height:10px; background:#a855f7; border-radius:1px; margin-top:4px; animation:cursor-blink .8s step-end infinite; }
@keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ════════════════════════════════════════
   SLIDE 3 — PRINTING
════════════════════════════════════════ */
.printer-wrap { display:flex; flex-direction:column; align-items:center; width:100%; }
.printer-body-anim {
    width:110px; height:58px; background:#1a0800; border-radius:10px;
    border:2px solid rgba(249,115,22,.45); position:relative;
    box-shadow:0 0 24px rgba(249,115,22,.25); flex-shrink:0;
}
.printer-vent {
    position:absolute; top:10px; left:10px; right:10px; height:4px;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 3px,transparent 3px,transparent 7px);
    border-radius:2px;
}
.printer-slot-anim { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:75%; height:5px; background:#0a0400; border-radius:3px; }
.printer-light-anim { position:absolute; top:8px; right:10px; width:7px; height:7px; border-radius:50%; background:#22c55e; animation:dot-blink 1s ease-in-out infinite; }

.paper-output { overflow:hidden; width:72px; }
.paper-sheet {
    background:#fff; border-radius:0 0 4px 4px; padding:6px 6px 8px;
    animation:paper-emerge 4s ease-in-out infinite;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.paper-line { height:5px; border-radius:2px; background:#ddd; margin-bottom:4px; }
.pl-dark { background:#bbb; }
.paper-img-block { height:18px; background:linear-gradient(135deg,#f0f0f0,#d8d8d8); border-radius:2px; margin-bottom:4px; }
@keyframes paper-emerge { 0%,100%{height:0px;padding:0 6px} 15%,80%{height:70px;padding:6px 6px 8px} }

/* ════════════════════════════════════════
   SLIDE 4 — ONLINE REGISTRATION
════════════════════════════════════════ */
.reg-form-anim {
    width:100%; max-width:210px;
    background:rgba(0,255,120,.05); border:1px solid rgba(34,197,94,.35);
    border-radius:10px; padding:10px 12px;
    box-shadow:0 0 24px rgba(34,197,94,.20);
}
.reg-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.reg-icon { font-size:13px; }
.reg-form-title { font-size:10px; font-weight:800; color:#22c55e; text-transform:uppercase; letter-spacing:.07em; }
.reg-field { margin-bottom:6px; }
.reg-label { font-size:8px; color:rgba(255,255,255,.45); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
.reg-input { height:16px; background:rgba(255,255,255,.07); border:1px solid rgba(34,197,94,.25); border-radius:4px; overflow:hidden; }
.reg-fill { height:100%; background:linear-gradient(90deg,rgba(34,197,94,.4),rgba(34,197,94,.2)); width:0%; animation:fill-anim 4s ease-in-out infinite; }
@keyframes fill-anim { 0%,100%{width:0%} 25%,75%{width:90%} }
.reg-submit-btn {
    width:100%; height:18px; background:#22c55e; border-radius:5px; margin-top:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:800; color:#001a0a; letter-spacing:.06em;
    animation:submit-glow 4s ease-in-out infinite; animation-delay:2.5s;
}
@keyframes submit-glow { 0%,55%,100%{opacity:.5;box-shadow:none} 65%,80%{opacity:1;box-shadow:0 0 10px rgba(34,197,94,.6)} }

/* ══════════════════════════════════════════════════════════════
   SERVICES GRID
══════════════════════════════════════════════════════════════ */
.services-bg { background:var(--bg2); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card {
    background:var(--card); border:1px solid var(--border); border-radius:20px;
    padding:28px 24px; position:relative; overflow:hidden;
    transition:transform .25s, box-shadow .25s, border-color .25s; cursor:default;
}
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity .25s; }
.svc-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px var(--shadow-lg); border-color:rgba(0,153,170,.30); }
.svc-card:hover::before { opacity:1; }
.svc-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:18px; transition:transform .25s; }
.svc-card:hover .svc-icon { transform:scale(1.10) rotate(-5deg); }
.ic-cyan   { background:rgba(0,234,255,.12); }   html[data-theme="light"] .ic-cyan   { background:rgba(0,153,170,.12); }
.ic-purple { background:rgba(168,85,247,.12); }
.ic-orange { background:rgba(249,115,22,.12); }
.ic-green  { background:rgba(34,197,94,.12); }
.ic-blue   { background:rgba(59,130,246,.12); }
.ic-pink   { background:rgba(236,72,153,.12); }
.svc-title { font-size:17px; font-weight:800; color:var(--text); margin-bottom:8px; }
.svc-desc  { font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:18px; }
.svc-link  { font-size:13px; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:5px; transition:gap .2s; }
.svc-card:hover .svc-link { gap:10px; }

/* ══════════════════════════════════════════════════════════════
   STATS
══════════════════════════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-card {
    background:var(--stat-bg); border:1px solid rgba(0,153,170,.20); border-radius:20px;
    padding:32px 24px; text-align:center; transition:transform .25s, box-shadow .25s;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px var(--shadow); }
.stat-num { font-size:40px; font-weight:900; color:var(--accent); letter-spacing:-.02em; line-height:1; margin-bottom:8px; }
.stat-lbl { font-size:14px; color:var(--text2); font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════════════════════ */
.hiw-bg { background:var(--bg2); }
.hiw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
.hiw-grid::before { content:''; position:absolute; top:42px; left:calc(16.6% + 20px); right:calc(16.6% + 20px); height:2px; background:linear-gradient(90deg,var(--accent),rgba(0,153,170,.10)); }
.hiw-step { text-align:center; padding:0 24px; }
.hiw-num {
    width:84px; height:84px; border-radius:50%; background:var(--card); border:3px solid var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; color:var(--accent);
    margin:0 auto 20px; position:relative; z-index:1;
    box-shadow:0 0 0 8px var(--bg2), 0 8px 24px rgba(0,153,170,.22);
    transition:transform .25s, box-shadow .25s;
}
.hiw-step:hover .hiw-num { transform:scale(1.1); box-shadow:0 0 0 8px var(--bg2), 0 12px 32px rgba(0,153,170,.38); }
.hiw-title { font-size:17px; font-weight:800; color:var(--text); margin-bottom:10px; }
.hiw-desc  { font-size:14px; color:var(--text2); line-height:1.65; }

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════════ */
.testi-slider { overflow:hidden; }
.testi-track  { display:flex; gap:24px; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.testi-card {
    flex-shrink:0; width:calc(33.333% - 16px);
    background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px;
    transition:transform .25s, box-shadow .25s;
}
.testi-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px var(--shadow); }
.testi-stars  { color:#f59e0b; font-size:14px; margin-bottom:14px; letter-spacing:2px; }
.testi-body   { font-size:15px; color:var(--text2); line-height:1.7; font-style:italic; margin-bottom:20px; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#3b82f6); display:flex; align-items:center; justify-content:center; font-size:18px; color:#001820; font-weight:800; flex-shrink:0; }
.testi-name { font-size:14px; font-weight:800; color:var(--text); }
.testi-role { font-size:12px; color:var(--muted); }
.testi-nav  { display:flex; gap:8px; justify-content:center; margin-top:32px; }
.testi-dot  { width:8px; height:8px; border-radius:50%; background:var(--border); border:none; cursor:pointer; padding:0; transition:background .2s, transform .2s; }
.testi-dot.active { background:var(--accent); transform:scale(1.35); }

/* ══════════════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════════════ */
.cta-section { padding:0 5% 90px; }
.cta-card {
    max-width:1200px; margin:0 auto;
    background:linear-gradient(135deg,#003855,#001a2c); border-radius:28px;
    padding:64px 56px; display:flex; align-items:center; justify-content:space-between;
    gap:40px; position:relative; overflow:hidden;
    box-shadow:0 32px 80px rgba(0,0,0,.30);
}
.cta-card::before { content:''; position:absolute; width:400px; height:400px; background:radial-gradient(circle,rgba(0,234,255,.14),transparent 70%); top:-100px; right:-100px; pointer-events:none; }
html[data-theme="light"] .cta-card { background:linear-gradient(135deg,#003d5c,#001f35); }
.cta-copy h2 { font-size:clamp(22px,3vw,36px); font-weight:900; color:#fff; margin-bottom:12px; letter-spacing:-.02em; }
.cta-copy p  { font-size:15px; color:rgba(255,255,255,.65); line-height:1.7; max-width:440px; }
.cta-btns    { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════════════ */
@keyframes fade-up  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-left{ from{opacity:0;transform:translateX(28px)} to{opacity:1;transform:translateX(0)} }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) { .services-grid{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px)  { .hero-inner{grid-template-columns:1fr;gap:48px} .showcase-tag{display:none} .hiw-grid{grid-template-columns:1fr} .hiw-grid::before{display:none} .hiw-step{padding:0 0 32px} .testi-card{width:100%} .cta-card{flex-direction:column;text-align:center;padding:40px 28px} .cta-btns{justify-content:center} }
@media (max-width:640px)  { .services-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr 1fr} .hero-mini-stats{gap:18px} .hero-btns{flex-direction:column} .btn{justify-content:center} section{padding:64px 5%} }