/* ============================================================
   DevHive — SERVICE SUB-PAGES · "AURORA CONTROL" dark theme
   Loaded AFTER style.css. Each page keeps its OWN --accent
   (theme-cyber=red, theme-ai=cyan, ...). Hero markup kept;
   gradient overlay neutralised so the themed bg shows through.
   All body sections rebuilt dark to match home/about/services.
   ============================================================ */

:root{--svp-accent:var(--accent,#00bdc3)}
body[class*="theme-"]{
  --svp:var(--accent);
  --bg:#0b1422;--bg2:#0e1a2c;
  --panel:rgba(255,255,255,.04);--panel2:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.09);--line3:rgba(255,255,255,.14);
  --txt:#9fb2c6;--txt-dim:#728aa1;--vio:#7b6cff;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  background:var(--bg);color:var(--txt);position:relative;
}

/* atmosphere — accent wash that stays rich through the HERO *and the
   first section*, then fades into dark. Absolute (not fixed) so it lives
   at the top of the page only — no page-wide glow on scroll. */
body[class*="theme-"] main{position:relative;z-index:1}
body[class*="theme-"]::before{content:"";position:absolute;left:0;right:0;top:0;height:1500px;pointer-events:none;z-index:0}
body[class*="theme-"]::after{content:"";position:absolute;left:0;right:0;top:0;height:1500px;pointer-events:none;z-index:0}
body[class*="theme-"]::before{
  background:
    radial-gradient(1400px 820px at 74% 90px,color-mix(in srgb,var(--accent) 30%,transparent),transparent 56%),
    radial-gradient(1100px 720px at 10% 200px,color-mix(in srgb,var(--accent) 20%,transparent),transparent 54%),
    radial-gradient(1000px 640px at 92% 620px,color-mix(in srgb,var(--accent) 10%,transparent),transparent 56%),
    /* colour holds through the hero, then a SHORT spill into the top of
       section 1 and fades to dark fast */
    linear-gradient(180deg,
      color-mix(in srgb,var(--accent) 16%,#0d1828) 0%,
      color-mix(in srgb,var(--accent) 13%,#0b1422) 40%,
      color-mix(in srgb,var(--accent) 7%,#0a1322) 50%,
      #0b1422 60%);
}
body[class*="theme-"]::after{
  background-image:linear-gradient(rgba(122,170,200,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,200,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 60%);mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 60%);
  opacity:.5;
}
@keyframes svpDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-20px,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){body[class*="theme-"]::before{animation:none}}

/* shared-class dark overrides */
body[class*="theme-"] .section{position:relative;z-index:1;padding:104px 0}
body[class*="theme-"] .section.tight{padding:72px 0}
body[class*="theme-"] .bg-mist,body[class*="theme-"] .bg-navy{background:transparent;color:var(--txt)}
body[class*="theme-"] h1,body[class*="theme-"] h2,body[class*="theme-"] h3,body[class*="theme-"] h4{color:#f3f8fc}
body[class*="theme-"] .title{color:#fff}
body[class*="theme-"] .lead{color:var(--txt)}
body[class*="theme-"] .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
body[class*="theme-"] .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--vio))}
body[class*="theme-"] .eyebrow.light{color:var(--accent)}
body[class*="theme-"] .sec-head{max-width:780px;margin:0 auto}
body[class*="theme-"] .btn-ghost{background:transparent;color:#fff;border:1.5px solid var(--line3)}
body[class*="theme-"] .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
body[class*="theme-"] .checks li{color:#cfe0ea}
body[class*="theme-"] .checks .ck{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}

/* header flips to crisp light glass on scroll (matches other pages) */
body[class*="theme-"] .site-header.scrolled{background:rgba(8,14,24,.94);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.06)}
body[class*="theme-"] .site-header.scrolled .nav .nav-links>li>a{color:#e7f1f8}
body[class*="theme-"] .site-header.scrolled .nav-links>li>a:hover,body[class*="theme-"] .site-header.scrolled .nav-links>li>a.active{color:var(--teal)}
body[class*="theme-"] .site-header.scrolled .brand .wordmark b{color:#fff}
body[class*="theme-"] .site-header.scrolled .brand .wordmark span{color:var(--sky)}
body[class*="theme-"] .site-header.scrolled .burger span{background:#fff}

/* ============================================================
   HERO — keep markup; remove heavy gradient overlay so the
   themed background colour reads clean. Accent glow + grid kept.
   ============================================================ */
body[class*="theme-"] .hero{position:relative;overflow:hidden}
/* the scene overlay div that dimmed the bg — neutralise it */
body[class*="theme-"] .hero .scene{background:transparent!important;opacity:0!important}
body[class*="theme-"] .hero h1{color:#fff}
body[class*="theme-"] .hero h1 .grad-text,body[class*="theme-"] .flawless-word{
  background:linear-gradient(120deg,var(--accent),#fff 135%);-webkit-background-clip:text;background-clip:text;color:transparent}
body[class*="theme-"] .hero .lead{color:rgba(225,238,247,.86)}
body[class*="theme-"] .hero .crumb{color:rgba(210,228,240,.7)}
body[class*="theme-"] .hero-badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#eaf3fa}
body[class*="theme-"] .hero-badge .dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}

/* hero aura fx */
.svp-hero-fx{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.svp-grid-fx{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(680px 420px at 75% 12%,#000,transparent 75%);mask-image:radial-gradient(680px 420px at 75% 12%,#000,transparent 75%)}
.svp-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.45;animation:svpFloat 13s ease-in-out infinite}
.svp-orb.o1{width:360px;height:360px;right:6%;top:4%;background:radial-gradient(circle,var(--accent),transparent 70%)}
.svp-orb.o2{width:300px;height:300px;right:30%;bottom:-4%;background:radial-gradient(circle,#6a5cff,transparent 70%);animation-delay:2.4s}
.svp-orb.o3{width:240px;height:240px;left:3%;top:32%;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.3;animation-delay:1.3s}
@keyframes svpFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,22px)}}
.svp-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);opacity:.85;animation:svpRise 7s linear infinite}
.svp-spark:nth-child(4){left:60%;top:82%}.svp-spark:nth-child(5){left:82%;top:88%;animation-delay:1.7s}
.svp-spark:nth-child(6){left:46%;top:84%;animation-delay:3.2s}.svp-spark:nth-child(7){left:90%;top:74%;animation-delay:4.6s}
@keyframes svpRise{0%{transform:translateY(0);opacity:0}12%{opacity:.9}90%{opacity:.5}100%{transform:translateY(-200px);opacity:0}}

/* ============================================================
   1) OVERVIEW + "at a glance" panel (kept · now fully dark)
   ============================================================ */
.svp-glance{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:stretch}
@media(max-width:920px){.svp-glance{grid-template-columns:1fr;gap:22px}}
.svp-ov{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:22px;padding:34px 34px 30px;overflow:hidden}
.svp-ov::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--vio))}
.svp-ov .ov-deco{position:absolute;right:22px;top:22px;width:96px;height:96px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);display:grid;place-items:center;opacity:.6;animation:svpRot 30s linear infinite}
.svp-ov .ov-deco::before{content:"";width:54px;height:54px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.svp-ov .ov-deco i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
@keyframes svpRot{to{transform:rotate(360deg)}}
.ov-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:7px 14px;border-radius:50px}
.ov-eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.svp-ov p.ovlead{color:#dbe8f2;font-size:16.5px;line-height:1.65;margin:20px 0 0;max-width:560px}
.svp-ov .ov-sep{height:1px;background:var(--line2);margin:24px 0 18px}
.svp-ov .ov-cap-h{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:14px}
.svp-ov .ov-pills{display:flex;flex-wrap:wrap;gap:10px}
.svp-ov .ov-pills span{font:600 13px var(--mono);color:#cfe0ea;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:50px;padding:9px 16px;transition:all .25s}
.svp-ov .ov-pills span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.svp-at{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line2);border-radius:22px;padding:30px;overflow:hidden}
.svp-at::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%);filter:blur(20px);opacity:.45}
.svp-at .at-h{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.svp-at .at-h i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.svp-at .at-metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin:18px 0 24px}
.svp-at .at-m{padding:18px 14px;text-align:center}
.svp-at .at-m + .at-m{border-left:1px solid var(--line2)}
.svp-at .at-m b{display:block;font:800 19px var(--display);color:#fff;line-height:1}
.svp-at .at-m span{display:block;margin-top:6px;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim)}
.svp-at .at-bar{position:relative;z-index:2;margin-bottom:16px}
.svp-at .at-bar:last-child{margin-bottom:0}
.svp-at .at-bar .lab{display:flex;justify-content:space-between;font:600 12.5px var(--mono);color:#aecbdb;margin-bottom:7px}
.svp-at .at-bar .track{height:8px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.svp-at .at-bar .fill{height:100%;border-radius:8px;width:0;background:linear-gradient(90deg,var(--accent),var(--vio));transition:width 1.3s var(--ease) .2s}
.svp-at .at-bar.alt .fill{background:linear-gradient(90deg,var(--accent),#6a5cff)}
.svp-glance.in .svp-at .at-bar .fill{width:var(--w)}

/* ============================================================
   2) OUTCOMES strip (counters) — dark
   ============================================================ */
.svp-out{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svp-out .o{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:30px 22px;text-align:center;position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s}
.svp-out .o::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--vio))}
.svp-out .o:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.svp-out .o b{display:block;font:800 clamp(30px,3.6vw,44px)/1 var(--display);color:#fff}
.svp-out .o span{display:block;margin-top:8px;color:var(--txt);font-size:13.5px;font-weight:600}
@media(max-width:760px){.svp-out{grid-template-columns:1fr 1fr}}

/* ============================================================
   3) CAPABILITY cards (image-led) — dark
   ============================================================ */
.svp-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svp-cap{background:var(--panel);border:1px solid var(--line2);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .4s}
.svp-cap:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.svp-cap .svp-ph{aspect-ratio:16/10;overflow:hidden;position:relative;background:#0a1320}
.svp-cap .svp-ph img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.svp-cap:hover .svp-ph img{transform:scale(1.07)}
.svp-cap .svp-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--accent) 28%,rgba(5,8,15,.7)),transparent 60%)}
.svp-cap .svp-tx{padding:22px 22px 24px}
.svp-cap .svp-tx h3{font-size:18px;margin-bottom:6px;color:#fff}
.svp-cap .svp-tx p{color:var(--txt);font-size:14px;margin:0;line-height:1.6}
@media(max-width:900px){.svp-caps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svp-caps{grid-template-columns:1fr}}

/* ============================================================
   4) PROCESS — vertical timeline — dark
   ============================================================ */
.svp-flow{position:relative;max-width:760px;margin:48px auto 0;padding-left:8px}
.svp-flow::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 8%,transparent))}
.svp-stepf{position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:0 0 34px}
.svp-stepf:last-child{padding-bottom:0}
.svp-stepf .sn{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;position:relative;z-index:2;background:#0a1726;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line2));color:var(--accent);font:800 18px var(--display);box-shadow:0 0 0 5px var(--bg),0 0 24px color-mix(in srgb,var(--accent) 20%,transparent);transition:transform .5s var(--ease)}
.svp-stepf.in .sn{animation:svpPop .55s var(--ease) backwards}
.svp-stepf:nth-child(2).in .sn{animation-delay:.15s}.svp-stepf:nth-child(3).in .sn{animation-delay:.3s}.svp-stepf:nth-child(4).in .sn{animation-delay:.45s}
@keyframes svpPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.svp-stepf:hover .sn{transform:scale(1.08)}
.svp-stepf .st{padding-top:8px}
.svp-stepf .st h3{font-size:19px;margin-bottom:5px;color:#fff}
.svp-stepf .st p{color:var(--txt);font-size:14.5px;margin:0;line-height:1.6}

/* ============================================================
   5) SPLIT feature (image + text) — dark
   ============================================================ */
.svp-feat{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.svp-feat.flip .svp-feat-media{order:2}
.svp-feat-media{position:relative}
.svp-feat-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;border:1px solid var(--line2);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.svp-feat-media .fb{position:absolute;left:18px;bottom:18px;background:rgba(8,15,26,.82);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:50px;padding:9px 16px;font:700 13px var(--display);color:#fff;display:inline-flex;gap:8px;align-items:center}
.svp-feat-media .fb::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.svp-feat-tx h2{font:700 clamp(23px,2.6vw,32px)/1.16 var(--display);margin:8px 0 14px;color:#fff}
.svp-feat-tx p{color:var(--txt);font-size:16px;margin-bottom:16px;line-height:1.7}
@media(max-width:920px){.svp-feat{grid-template-columns:1fr;gap:26px}.svp-feat.flip .svp-feat-media{order:0}}

/* ============================================================
   6) TECH chips — dark
   ============================================================ */
.svp-tech{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:760px;margin:34px auto 0}
.svp-tech .t{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:50px;background:var(--panel);border:1px solid var(--line2);font:600 13.5px var(--mono);color:#cfe0ea;transition:transform .3s var(--ease),border-color .3s,color .3s}
.svp-tech .t i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.svp-tech .t:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:#fff}

/* ============================================================
   7) DELIVERABLES grid — dark
   ============================================================ */
.svp-deliver{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){.svp-deliver{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.svp-deliver{grid-template-columns:1fr}}
.svp-deliver .d{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:20px;transition:transform .35s var(--ease),border-color .35s}
.svp-deliver .d:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.svp-deliver .d .di{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.svp-deliver .d .di svg{width:20px;height:20px}
.svp-deliver .d h3{font-size:15.5px;margin:2px 0 4px;color:#fff}
.svp-deliver .d p{color:var(--txt);font-size:13.5px;margin:0;line-height:1.55}

/* ============================================================
   CTA band — aurora dark (drop old gradient)
   ============================================================ */
body[class*="theme-"] .cta-band{position:relative;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,transparent),rgba(123,108,255,.12)),#0e1a2c!important;border:1px solid var(--line3);border-radius:30px;padding:64px 40px;text-align:center}
body[class*="theme-"] .cta-band::after{display:block!important;content:"";position:absolute;inset:-40%;z-index:0;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--accent) 18%,transparent),transparent 35%,rgba(123,108,255,.18),transparent 70%);animation:svpRot 18s linear infinite}
body[class*="theme-"] .cta-band>*{position:relative;z-index:2}
body[class*="theme-"] .cta-band h2{color:#fff}
body[class*="theme-"] .cta-band p{color:#bcd0e0}
@media(prefers-reduced-motion:reduce){body[class*="theme-"] .cta-band::after{animation:none}}

/* legacy hero-visual constellation (only used by some pages) — keep dark-safe */
.svp-stage{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:1/1}
.svp-stage .ring{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);animation:svpRot 36s linear infinite}
.svp-stage .ring.r2{inset:13%;border-style:dashed;animation-duration:26s;animation-direction:reverse}
.svp-stage .ring.r3{inset:28%;animation-duration:46s}
.svp-stage .glow{position:absolute;inset:18%;border-radius:50%;filter:blur(40px);opacity:.5;background:radial-gradient(circle,var(--accent),transparent 70%)}

/* CTA hex-net decoration */
body[class*="theme-"] .cta-band .hex-net{z-index:0;opacity:.5}
body[class*="theme-"] .cta-band .hex-net path{fill:none;stroke:color-mix(in srgb,var(--accent) 30%,transparent);stroke-width:1.5}
body[class*="theme-"] .cta-band .hero-cta{justify-content:center;display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ============================================================
   v3 — fully recreated sub-page sections (ov2/m2/cap2/pr2/ft2/tech2/dv2/cta2)
   Polished dark, accent-driven, matches home/about quality.
   ============================================================ */

/* 1 · OVERVIEW split */
.ov2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.ov2-l{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:24px;padding:38px 36px;overflow:hidden}
.ov2-l::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--vio))}
.ov2-tag{display:inline-flex;align-items:center;gap:9px;font:700 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:8px 15px;border-radius:50px}
.ov2-tag i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.ov2-lead{color:#dbe8f2;font-size:17px;line-height:1.7;margin:22px 0 0}
.ov2-caph{font:700 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);margin:26px 0 14px}
.ov2-pills{display:flex;flex-wrap:wrap;gap:9px}
.ov2-pills span{font:600 12.5px var(--mono);color:#cfe0ea;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:50px;padding:8px 15px;transition:all .25s}
.ov2-pills span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.ov2-btn{margin-top:26px}
.ov2-r{position:sticky;top:96px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid var(--line2);border-radius:24px;padding:30px;overflow:hidden}
.ov2-r::after{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 36%,transparent),transparent 70%);filter:blur(24px);opacity:.5}
.gat-h{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;font:700 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.gat-h i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.gat-metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin:18px 0 22px}
.gm{padding:18px 12px;text-align:center}
.gm + .gm{border-left:1px solid var(--line2)}
.gm b{display:block;font:800 18px var(--display);color:#fff;line-height:1}
.gm span{display:block;margin-top:6px;font:600 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim)}
.gbar{position:relative;z-index:2;margin-bottom:15px}
.gbar:last-child{margin-bottom:0}
.gbar .gl{display:flex;justify-content:space-between;font:600 12.5px var(--mono);color:#aecbdb;margin-bottom:7px}
.gbar .gt{height:7px;border-radius:7px;background:rgba(255,255,255,.07);overflow:hidden}
.gbar .gt i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,var(--accent),var(--vio));transition:width 1.3s var(--ease) .2s}
.gbar.alt .gt i{background:linear-gradient(90deg,var(--accent),#6a5cff)}
.ov2.in .gbar .gt i{width:var(--w)}
@media(max-width:920px){.ov2{grid-template-columns:1fr;gap:20px}.ov2-r{position:static}}

/* 2 · IMPACT counters */
.m2-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.m2{position:relative;overflow:hidden;text-align:center;padding:32px 18px;border-radius:20px;background:var(--panel);border:1px solid var(--line2);transition:transform .45s var(--ease),border-color .45s}
.m2::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),var(--vio));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.m2:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.m2:hover::before{transform:scaleX(1)}
.m2-n{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.8vw,46px);line-height:1;color:#fff}
.m2-l{margin-top:9px;color:var(--txt);font-size:13.5px;font-weight:600}
@media(max-width:760px){.m2-row{grid-template-columns:1fr 1fr}}

/* 3 · CAPABILITIES icon cards */
.cap2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.cap2{position:relative;overflow:hidden;border-radius:20px;padding:30px 26px;background:var(--panel);border:1px solid var(--line2);transition:transform .45s var(--ease),border-color .45s,background .45s}
.cap2::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);opacity:0;transition:opacity .45s}
.cap2:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:rgba(255,255,255,.05)}
.cap2:hover::after{opacity:1}
.cap2-ic{position:relative;z-index:1;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 22%,transparent),rgba(123,108,255,.16));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);margin-bottom:18px}
.cap2-ic svg{width:25px;height:25px}
.cap2 h3{position:relative;z-index:1;color:#fff;font-size:18px;margin:0 0 8px;font-family:var(--display)}
.cap2 p{position:relative;z-index:1;color:var(--txt);font-size:14px;line-height:1.6;margin:0}
@media(max-width:880px){.cap2-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cap2-grid{grid-template-columns:1fr}}

/* 4 · PROCESS rail */
.pr2-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:54px}
.pr2-row::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 45%,transparent),rgba(123,108,255,.4),transparent)}
.pr2{position:relative;text-align:center}
.pr2-n{position:relative;z-index:1;width:68px;height:68px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:21px;color:#fff;background:#0a1726;border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 6px var(--bg),0 0 24px color-mix(in srgb,var(--accent) 25%,transparent)}
.pr2 h3{color:#fff;font-size:18px;margin:0 0 8px;font-family:var(--display)}
.pr2 p{color:var(--txt);font-size:14px;line-height:1.6;margin:0 auto;max-width:24ch}
@media(max-width:820px){.pr2-row{grid-template-columns:1fr 1fr;gap:34px 18px}.pr2-row::before{display:none}}
@media(max-width:460px){.pr2-row{grid-template-columns:1fr}}

/* 5 · FEATURE split */
.ft2{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}
.ft2-media{position:relative}
.ft2-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;border:1px solid var(--line2);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.ft2-media::after{content:"";position:absolute;inset:0;border-radius:22px;background:linear-gradient(160deg,transparent,color-mix(in srgb,var(--accent) 14%,transparent))}
.ft2-badge{position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(8,15,26,.82);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:50px;padding:9px 16px;font:700 13px var(--display);color:#fff;display:inline-flex;gap:8px;align-items:center}
.ft2-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.ft2-tx .checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ft2-tx .checks li{display:flex;align-items:center;gap:12px;color:#dbeaf3;font-size:15px}
.ft2-tx .checks .ck{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.ft2-tx .checks .ck svg{width:15px;height:15px}
@media(max-width:920px){.ft2{grid-template-columns:1fr;gap:30px}.ft2-media{order:-1}}

/* 6 · TECH pills */
.tech2{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;max-width:760px;margin:34px auto 0}
.tech2 .t{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:50px;background:var(--panel);border:1px solid var(--line2);font:600 13.5px var(--mono);color:#cfe0ea;transition:transform .3s var(--ease),border-color .3s,color .3s}
.tech2 .t i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.tech2 .t:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:#fff}

/* 7 · DELIVERABLES */
.dv2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.dv2{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:22px;transition:transform .35s var(--ease),border-color .35s}
.dv2:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.dv2-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.dv2-ic svg{width:20px;height:20px}
.dv2 h3{font-size:15.5px;margin:2px 0 5px;color:#fff;font-family:var(--display)}
.dv2 p{color:var(--txt);font-size:13.5px;margin:0;line-height:1.55}
@media(max-width:880px){.dv2-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.dv2-grid{grid-template-columns:1fr}}

/* 8 · CTA aurora */
.cta2{position:relative;overflow:hidden;border-radius:30px;padding:70px 40px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,transparent),rgba(123,108,255,.12)),#0e1a2c;border:1px solid var(--line3)}
.cta2::before{content:"";position:absolute;inset:-40%;z-index:0;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--accent) 18%,transparent),transparent 35%,rgba(123,108,255,.18),transparent 70%);animation:svpRot 18s linear infinite}
.cta2-grid{position:absolute;inset:0;z-index:0;opacity:.4;background-image:linear-gradient(rgba(122,170,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(122,170,200,.08) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.cta2>*{position:relative;z-index:2}
.cta2 h2{font-size:clamp(28px,4vw,46px);color:#fff;letter-spacing:-.02em;line-height:1.08;max-width:22ch;margin:14px auto 0}
.cta2 p{color:#bcd0e0;max-width:56ch;margin:16px auto 0;font-size:17px}
.cta2 .hero-cta{justify-content:center;margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.cta2::before{animation:none}}

/* ============================================================
   v4 — HERO → BODY colour fade (no hard dark cut)
   The themed hero now melts into the dark base instead of
   stopping abruptly. Accent-tinted glow continues downward.
   ============================================================ */
/* ---- HERO sits transparently ON TOP of the body's top gradient ----
   We strip the hero's own solid background so the page-top accent wash
   flows continuously from hero into the first sections (no hard cut). */
body[class*="theme-"] .hero{position:relative;background:transparent!important}
body[class*="theme-"] .hero>*{position:relative;z-index:2}
/* keep a soft accent pool right behind the hero content for richness */
body[class*="theme-"] .hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 78% 24%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
    radial-gradient(700px 520px at 6% 80%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%);
}

/* ============================================================
   v5 fixes — accent-cohesive gradients (no violet clash on warm
   themes like ecom), per-theme harmony
   ============================================================ */
/* bars & accent lines use accent → lighter-accent, not violet */
body[class*="theme-"] .gbar .gt i,
body[class*="theme-"] .gbar.alt .gt i,
body[class*="theme-"] .svp-at .at-bar .fill,
body[class*="theme-"] .svp-at .at-bar.alt .fill,
body[class*="theme-"] .wv-stat .v-bar i{
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#fff))!important;
}
/* warm themes: pair accent with a warm partner instead of cool violet */
body.theme-ecom,body.theme-auto,body.theme-wp{--vio:color-mix(in srgb,var(--accent) 55%,#ff8a3d)}
body.theme-cyber{--vio:#ff6a6a}

/* ============================================================
   v5 — CYBERSECURITY hero layout fix (no overlap)
   ============================================================ */
body.theme-cyber .cy-scene{min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:70px}
body.theme-cyber .cy-chips{position:absolute;left:0;top:0}
body.theme-cyber .cy-threats{position:absolute;right:0;top:0}
body.theme-cyber .cy-radar{margin-top:10px}
/* caption sits cleanly at the bottom, never over the radar/chips */
body.theme-cyber .cy-scene .caption{position:static!important;transform:none!important;margin:34px auto 0!important;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(239,74,74,.3);border-radius:14px;padding:12px 18px}
body.theme-cyber .cy-scene .caption b{display:block;color:#fff;font-family:var(--display);font-size:15px}
body.theme-cyber .cy-scene .caption span{display:block;color:var(--txt-dim);font:600 12px var(--mono);margin-top:4px}
@media(max-width:600px){
  body.theme-cyber .cy-scene{padding-top:120px}
  body.theme-cyber .cy-chips{top:0;flex-direction:row;flex-wrap:wrap}
  body.theme-cyber .cy-threats{position:static;margin:18px auto 0}
}

/* ============================================================
   theme-cyber — force the whole page red (no blue/teal/indigo)
   ============================================================ */
body.theme-cyber .btn-primary{
  background:linear-gradient(120deg,#ff6a6a,#ef4a4a 55%,#c81e1e);
  color:#fff;box-shadow:0 12px 30px rgba(239,74,74,.38)}
body.theme-cyber .btn-primary:hover{box-shadow:0 20px 44px rgba(239,74,74,.5)}
body.theme-cyber .svp-orb.o2{background:radial-gradient(circle,#b91c1c,transparent 70%)}
body.theme-cyber .cta2{
  background:linear-gradient(160deg,rgba(239,74,74,.16),rgba(200,30,30,.12)),#170b0b;
  border-color:rgba(239,74,74,.22)}
body.theme-cyber .cta2-grid{
  background-image:linear-gradient(rgba(239,74,74,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(239,74,74,.10) 1px,transparent 1px)}

/* ============================================================
   theme-cyber — recreated hero (pills + VAPT title + stats)
   ============================================================ */
/* top pills: "← All Services" + "Cybersecurity" */
body.theme-cyber .cy-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
body.theme-cyber .cy-pill{display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;font:700 13px var(--body);line-height:1;
  border:1px solid rgba(239,74,74,.32);background:rgba(239,74,74,.10);color:#ffd9d9;
  text-decoration:none;transition:background .25s,border-color .25s,transform .25s}
body.theme-cyber .cy-pill-back{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
body.theme-cyber .cy-pill-back:hover{background:rgba(239,74,74,.16);border-color:rgba(239,74,74,.5);transform:translateY(-2px)}
body.theme-cyber .cy-pill-back span{font-size:15px;line-height:1}
body.theme-cyber .cy-pill-tag{color:#ff9a9a}

/* stat row: OWASP / CVSSv3 / 48h — all red */
body.theme-cyber .cy-stats{display:flex;flex-wrap:wrap;gap:34px;margin:26px 0 30px}
body.theme-cyber .cy-stat b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(26px,3.4vw,34px);line-height:1;letter-spacing:-.02em;
  background:linear-gradient(120deg,#ff8585,#ef4a4a 60%,#c81e1e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-cyber .cy-stat span{display:block;margin-top:7px;font:600 11px var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:rgba(225,238,247,.62)}
@media(max-width:520px){
  body.theme-cyber .cy-stats{gap:22px}
}

/* ============================================================
   theme-cyber — kill ALL remaining blue/indigo/teal accents
   ============================================================ */
/* "How it works" timeline connector line */
body.theme-cyber .pr2-row::before{
  background:linear-gradient(90deg,transparent,rgba(239,74,74,.5) 30%,rgba(200,30,30,.5) 70%,transparent)}
/* capability icon tiles (e.g. Penetration testing) */
body.theme-cyber .cap2-ic{
  background:linear-gradient(140deg,rgba(239,74,74,.24),rgba(200,30,30,.14));
  border-color:rgba(239,74,74,.32)}
/* CTA rotating aura ("Let's secure your business") */
body.theme-cyber .cta2::before{
  background:conic-gradient(from 0deg,transparent,rgba(239,74,74,.20),transparent 35%,rgba(200,30,30,.18),transparent 70%)}
/* radar scan beam — leftover teal glow → red */
body.theme-cyber .cy-radar .scanline{box-shadow:0 0 16px #ef4a4a}

/* ============================================================
   Service sub-pages — primary/ghost buttons adopt each page's
   own theme accent (so buttons match the hero on every service)
   ============================================================ */
body[class*="theme-"] .btn-primary{
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--accent) 80%,#fff),
    var(--accent) 52%,
    color-mix(in srgb,var(--accent) 72%,#000));
  color:#fff;box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 36%,transparent)}
body[class*="theme-"] .btn-primary:hover{box-shadow:0 20px 44px color-mix(in srgb,var(--accent) 48%,transparent)}
body[class*="theme-"] .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}