/* ============================================================================
   Absolute Demand — service detail pages (shared styles)
   Mirrors the "C — Kinetic" design language. Recolored by ../themes.js ('C').
   ========================================================================== */
:root{
  --accent-rgb:163,230,53; --text-rgb:232,245,233; --accent-deep:#80B82A;
  --bg:#0E1F18; --bg-2:#0A1812; --surface:#15291F; --surface-2:#1B3A2C;
  --line:rgba(var(--text-rgb),.08); --line-strong:rgba(var(--text-rgb),.18);
  --lime:#A3E635; --lime-bright:#CEFA50; --lime-glow:0 0 32px rgba(var(--accent-rgb),.4);
  --mint:#E8F5E9; --mint-soft:#B8C9BD; --mint-muted:#6B7D74; --ink:#070D0A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Space Grotesk", system-ui, sans-serif;
  background:var(--bg); color:var(--mint);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:16px; line-height:1.5; letter-spacing:-.005em; overflow-x:hidden;
}
::selection{background:var(--lime); color:var(--ink)}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; letter-spacing:0}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:"Space Grotesk", sans-serif; font-weight:500; letter-spacing:-.035em; line-height:.96}
.accent{color:var(--lime)}
.wrap{max-width:1320px; margin:0 auto; padding:0 32px}
@media (max-width:720px){.wrap{padding:0 20px}}

/* ==== NAV ==== */
.nav{position:sticky; top:0; z-index:50; background:rgba(14,31,24,.78);
  backdrop-filter:saturate(160%) blur(20px); border-bottom:1px solid var(--line)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
.brand{display:flex; align-items:center; gap:12px; font-size:17px; font-weight:500; letter-spacing:-.02em}
.brand__logo{height:30px; width:auto; display:block}
.foot__brand .brand__logo{height:54px}
@media (max-width:720px){.brand__logo{height:26px}.foot__brand .brand__logo{height:46px}}
.brand__orb{width:24px; height:24px; border-radius:50%; background:var(--lime); position:relative;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12), var(--lime-glow); animation:orb 3s ease-in-out infinite}
@keyframes orb{0%,100%{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12), 0 0 32px rgba(var(--accent-rgb),.4)}50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),.06), 0 0 48px rgba(var(--accent-rgb),.6)}}
.nav__links{display:flex; gap:32px; font-size:14px; color:var(--mint-soft)}
.nav__links a{position:relative; padding:6px 0; transition:color .2s}
.nav__links a:hover{color:var(--lime)}
.nav__cta{padding:12px 22px; font-size:13.5px; background:var(--lime); color:var(--ink);
  border-radius:999px; font-weight:500; letter-spacing:-.005em; transition:transform .15s, box-shadow .15s}
.nav__cta:hover{transform:translateY(-1px); box-shadow:var(--lime-glow)}
@media (max-width:900px){.nav__links{display:none}}

/* ==== BUTTONS ==== */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:999px;
  font-weight:500; font-size:14.5px; letter-spacing:-.005em; border:1px solid transparent;
  transition:transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s; white-space:nowrap}
.btn--lime{background:var(--lime); color:var(--ink)}
.btn--lime:hover{background:var(--lime-bright); transform:translateY(-1px); box-shadow:var(--lime-glow)}
.btn--ghost{border-color:var(--line-strong); color:var(--mint); background:rgba(var(--text-rgb),.02)}
.btn--ghost:hover{border-color:var(--lime); color:var(--lime)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btn:hover .arr-l{transform:translateX(-4px)}

/* ==== SERVICE HERO ==== */
.shero{padding:64px 0 96px; position:relative; overflow:hidden}
.shero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 480px at 18% 30%, rgba(var(--accent-rgb),.10), transparent 60%),
    radial-gradient(ellipse 560px 420px at 88% 70%, rgba(var(--accent-rgb),.05), transparent 60%)}
.shero__inner{position:relative; z-index:1; max-width:920px}
.crumb{display:flex; align-items:center; gap:10px; font-family:"IBM Plex Mono", monospace;
  font-size:12px; color:var(--mint-muted); letter-spacing:.04em; margin-bottom:40px}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--lime)}
.crumb .sep{opacity:.5}
.crumb .here{color:var(--mint-soft)}
.shero__kicker{display:inline-flex; align-items:center; gap:10px; font-family:"IBM Plex Mono", monospace;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime); margin-bottom:28px;
  padding:6px 14px; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.2); border-radius:999px}
.shero__kicker .n{color:var(--mint-muted)}
.shero h1{font-size:clamp(48px, 7vw, 96px); letter-spacing:-.045em; line-height:.95; font-weight:500}
.shero__lede{margin-top:32px; font-size:20px; line-height:1.5; color:var(--mint-soft); max-width:620px}
.shero__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:36px}
.shero__tags span{font-family:"IBM Plex Mono", monospace; font-size:11px; padding:6px 13px;
  border:1px solid var(--line-strong); border-radius:999px; color:var(--mint-muted); letter-spacing:.04em; text-transform:uppercase}
.shero__ctas{display:flex; gap:14px; margin-top:44px; flex-wrap:wrap}

/* ==== SECTIONS ==== */
.section{padding:120px 0; position:relative}
@media (max-width:720px){.section{padding:80px 0}}
.sech{margin-bottom:64px; max-width:760px}
.sech__kicker{display:inline-flex; align-items:center; gap:10px; font-family:"IBM Plex Mono", monospace;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime); margin-bottom:24px;
  padding:6px 14px; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.2); border-radius:999px}
.sech h2{font-size:clamp(34px, 4.4vw, 60px); letter-spacing:-.04em; line-height:1; font-weight:500}
.sech p{margin-top:24px; font-size:18px; line-height:1.55; color:var(--mint-soft); max-width:560px}

/* ==== INCLUDES GRID ==== */
.inc{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:960px){.inc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.inc{grid-template-columns:1fr}}
.inc__card{padding:28px 26px 30px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface), var(--bg-2)); border-radius:20px;
  display:flex; flex-direction:column; gap:12px; transition:transform .2s, border-color .2s}
.inc__card:hover{transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.4)}
.inc__num{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--mint-muted); letter-spacing:.06em}
.inc__card h3{font-size:19px; line-height:1.15; letter-spacing:-.02em; font-weight:500; color:var(--mint)}
.inc__card p{font-size:14px; line-height:1.55; color:var(--mint-soft)}

/* ==== STEPS ==== */
.steps{display:grid; gap:14px; counter-reset:st}
.step{padding:26px 28px; border:1px solid var(--line); border-radius:18px; background:rgba(var(--text-rgb),.02);
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  transition:border-color .2s, background .2s, transform .15s}
.step:hover{border-color:var(--lime); background:rgba(var(--accent-rgb),.04); transform:translateX(6px)}
.step__n{width:44px; height:44px; border-radius:50%; background:var(--lime); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:17px;
  font-variant-numeric:tabular-nums; box-shadow:var(--lime-glow)}
.step h3{font-size:21px; letter-spacing:-.02em; font-weight:500; color:var(--mint)}
.step p{margin-top:6px; font-size:15px; line-height:1.5; color:var(--mint-soft); max-width:640px}
@media (max-width:560px){.step{grid-template-columns:1fr; gap:14px}}

/* ==== STAT ROW ==== */
.statrow{padding:48px; border:1px solid var(--line); border-radius:28px;
  background:radial-gradient(ellipse 500px 400px at 0% 0%, rgba(var(--accent-rgb),.06), transparent 60%), linear-gradient(180deg, var(--surface), var(--bg-2))}
@media (max-width:720px){.statrow{padding:28px 24px}}
.statrow__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (max-width:720px){.statrow__grid{grid-template-columns:1fr}}
.statcell{padding:36px 28px; border-right:1px solid var(--line)}
.statcell:last-child{border-right:none}
@media (max-width:720px){.statcell{border-right:none; border-bottom:1px solid var(--line)}.statcell:last-child{border-bottom:none}}
.statcell .l{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--mint-muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:22px}
.statcell .v{font-size:56px; font-weight:500; letter-spacing:-.04em; line-height:.95; color:var(--mint); font-variant-numeric:tabular-nums}
.statcell .v .u{font-size:.45em; color:var(--lime); font-weight:500; margin-left:2px}
.statcell .d{margin-top:14px; font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--lime); letter-spacing:.03em}

/* ==== WHO FOR ==== */
.whofor{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start}
@media (max-width:860px){.whofor{grid-template-columns:1fr; gap:32px}}
.whofor__copy p{font-size:19px; line-height:1.55; color:var(--mint-soft)}
.whofor__copy p strong{color:var(--mint); font-weight:500}
.fit{display:grid; gap:12px}
.fit li{list-style:none; display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--mint); line-height:1.45}
.fit li .ck{flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--lime); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; margin-top:1px}
.fit{padding:0; margin:0}

/* ==== RELATED ==== */
.related{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:640px){.related{grid-template-columns:1fr}}
.rel{padding:28px 28px 30px; border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  display:flex; flex-direction:column; gap:10px; transition:transform .2s, border-color .2s; position:relative}
.rel:hover{transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.4)}
.rel__top{display:flex; justify-content:space-between; align-items:center}
.rel__lab{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--mint-muted); letter-spacing:.06em; text-transform:uppercase}
.rel__arrow{width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--mint);
  transition:background .2s, color .2s, border-color .2s, transform .2s}
.rel:hover .rel__arrow{background:var(--lime); color:var(--ink); border-color:var(--lime); transform:rotate(-45deg)}
.rel h3{font-size:22px; letter-spacing:-.025em; font-weight:500; color:var(--mint)}
.rel p{font-size:14px; line-height:1.5; color:var(--mint-soft)}

/* ==== CTA BAND ==== */
.ctaband{position:relative; padding:120px 0; overflow:hidden}
.ctaband::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 800px 560px at 50% 20%, rgba(var(--accent-rgb),.14), transparent 60%),
    radial-gradient(ellipse 600px 480px at 82% 82%, rgba(var(--accent-rgb),.07), transparent 60%)}
.ctaband__inner{position:relative; z-index:1; max-width:820px; text-align:center; margin:0 auto}
.ctaband h2{font-size:clamp(40px, 5.6vw, 76px); letter-spacing:-.04em; line-height:.98; font-weight:500}
.ctaband h2 .accent{position:relative}
.ctaband h2 .accent::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--lime); border-radius:2px}
.ctaband p{margin:28px auto 0; font-size:18px; line-height:1.55; color:var(--mint-soft); max-width:540px}
.ctaband__ctas{display:flex; justify-content:center; gap:14px; margin-top:40px; flex-wrap:wrap}

/* ==== FOOTER ==== */
.foot{background:var(--bg-2); padding:64px 0 32px; border-top:1px solid var(--line)}
.foot__top{display:grid; grid-template-columns:1.3fr 2fr; gap:64px}
@media (max-width:780px){.foot__top{grid-template-columns:1fr}}
.foot__brand p{margin-top:14px; font-size:14px; color:var(--mint-soft); max-width:340px; line-height:1.6}
.foot__nav{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
@media (max-width:560px){.foot__nav{grid-template-columns:repeat(2,1fr)}}
.foot__col h5{font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mint-muted); font-weight:500; margin:0 0 16px}
.foot__col ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot__col a{font-size:14px; color:var(--mint-soft); transition:color .15s}
.foot__col a:hover{color:var(--lime)}
.foot__bot{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--mint-muted)}