/* KONUM: CodeAndSystems.Website\wwwroot\css\pages\services.css
   Services page: its own styles (moved out of the old services.html, unchanged) and, at the end, the dark theme of the page
   (generated from the light colours of the rules above, then hand-tuned). Loaded after site.css, before theme.css. */

/* ══════════════════════════════════════════════════════════
   SERVICES v2 — the page's own styles (uses the site.css tokens)
   ══════════════════════════════════════════════════════════ */
:root{ --svc-mono: Consolas,'SF Mono',Menlo,monospace; }

/* ---------- HERO ---------- */
.svc-hero{position:relative;overflow:hidden;padding:88px 0 0;background:radial-gradient(900px 400px at 15% 0%,#ede9fe 0%,transparent 60%),radial-gradient(700px 400px at 90% 20%,#e0f2fe 0%,transparent 55%),#fff}
.svc-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.svc-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1.02;letter-spacing:-0.025em;color:var(--text);margin:0 0 18px}
.svc-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-hero p{font-size:16px;color:var(--muted);font-weight:300;max-width:520px;margin-bottom:28px;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--border)}
.ht{display:flex;flex-direction:column;gap:2px}
.ht b{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:var(--text)}
.ht span{font-size:11.5px;color:var(--muted2)}

.hero-panel{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 60px -20px rgba(17,24,39,.18);overflow:hidden}
.hp-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg2)}
.hp-top i{width:10px;height:10px;border-radius:50%;background:#e5e7eb;display:block}
.hp-top i:nth-child(1){background:#fca5a5}.hp-top i:nth-child(2){background:#fcd34d}.hp-top i:nth-child(3){background:#86efac}
.hp-top span{margin-left:8px;font-size:11.5px;color:var(--muted2);font-family:var(--svc-mono)}
.hp-body{padding:18px}
.hp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.hp-stat{border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.hp-stat small{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:6px}
.hp-stat b{font-family:var(--svc-mono);font-size:20px;font-weight:600;color:var(--text)}
.hp-stat b.ok{color:#059669}.hp-stat b.pu{color:var(--purple-l)}
.hp-list{display:flex;flex-direction:column;gap:8px}
.hp-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;color:var(--text);animation:hpIn .6s both}
.hp-item:nth-child(2){animation-delay:.15s}.hp-item:nth-child(3){animation-delay:.3s}.hp-item:nth-child(4){animation-delay:.45s}
@keyframes hpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative}
.hp-item .t{flex:1}.hp-item .t small{display:block;color:var(--muted2);font-size:11px;font-weight:300}
.hp-item .st{font-size:10.5px;padding:3px 9px;border-radius:100px;font-weight:600;white-space:nowrap}
.st.done{background:#ecfdf5;color:#059669}.st.live{background:var(--purple-xl);color:var(--purple-l)}.st.sched{background:#fffbeb;color:#d97706}
.hp-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--purple-l);animation:hpPulse 1.8s infinite;opacity:0}
@keyframes hpPulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}

/* ---------- STICKY JUMP NAV ---------- */
.jumpbar{position:sticky;top:66px;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:64px}
.jumpbar .container{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.jumpbar .container::-webkit-scrollbar{display:none}
.jump{white-space:nowrap;font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:100px;border:1px solid transparent;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:.2s;text-decoration:none}
.jump i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--purple-l))}
.jump:hover,.jump.on{background:var(--bg2);border-color:var(--border);color:var(--text)}

/* ---------- CATEGORY BLOCKS ---------- */
.services-body{padding:72px 0 40px}
.svc-cat{--c:#7c3aed;--cxl:#f3f0ff;display:grid;grid-template-columns:300px 1fr;gap:56px;padding:64px 0;border-top:1px solid var(--border);scroll-margin-top:130px}
.svc-cat:first-child{border-top:none;padding-top:0}
.svc-side{position:sticky;top:130px;align-self:start}
.svc-num{font-family:var(--svc-mono);font-size:11px;color:var(--c);letter-spacing:.1em;margin-bottom:14px}
.svc-ico{width:52px;height:52px;border-radius:14px;background:var(--cxl);color:var(--c);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.svc-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-side h2{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-0.02em;color:var(--text);margin-bottom:10px}
.svc-side p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.7;margin-bottom:18px}
.svc-bul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.svc-bul li{font-size:12.5px;color:var(--text);display:flex;gap:9px;align-items:flex-start}
.svc-bul li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--cxl);flex-shrink:0;margin-top:1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center}
.svc-link{font-size:13px;font-weight:600;color:var(--c);display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:gap .2s}
.svc-link:hover{gap:10px}

.svc-main{display:flex;flex-direction:column;gap:18px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sc{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px 22px;transition:.2s;position:relative;overflow:hidden}
.sc:hover{border-color:var(--c);box-shadow:0 10px 30px -12px rgba(17,24,39,.18);transform:translateY(-2px)}
.sc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);opacity:0;transition:.2s}
.sc:hover::before{opacity:1}
.sc h3{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:6px}
.sc p{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.65;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:10.5px;padding:3px 9px;border-radius:100px;background:var(--bg2);color:var(--muted);border:1px solid var(--border)}
.tag.hi{background:var(--cxl);color:var(--c);border-color:transparent}

/* visual panel - a mini screen for each category */
.vis{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.vis-l small{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);display:block;margin-bottom:6px}
.vis-l b{font-size:14px;font-weight:700;color:var(--text);display:block;margin-bottom:4px}
.vis-l span{font-size:12px;color:var(--muted);font-weight:300}
.vis-r{font-family:var(--svc-mono);font-size:11.5px}

.tl{display:flex;flex-direction:column;gap:6px;min-width:260px}
.tl div{display:flex;align-items:center;gap:10px;color:var(--muted)}
.tl i{width:9px;height:9px;border-radius:50%;background:var(--border2);flex-shrink:0}
.tl div.d i{background:#059669}.tl div.d{color:var(--text)}
.tl div.a i{background:var(--c);box-shadow:0 0 0 4px var(--cxl)}.tl div.a{color:var(--text);font-weight:600}
.tl time{margin-left:auto;color:var(--muted2);font-size:10.5px}

.mig{display:flex;flex-direction:column;gap:8px;min-width:280px}
.mig div{display:grid;grid-template-columns:82px 1fr 40px;gap:10px;align-items:center;color:var(--muted)}
.mig .bar{height:6px;border-radius:3px;background:#e5e7eb;overflow:hidden}
.mig .bar i{display:block;height:100%;background:var(--c);border-radius:3px;animation:svcGrow 9s ease-in-out infinite}
@keyframes svcGrow{0%{width:0}40%,100%{width:var(--w)}}
.mig b{text-align:right;color:var(--text);font-weight:600}

.thr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:280px}
.thr div{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.thr small{display:block;font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-family:Inter,sans-serif}
.thr b{font-size:18px;font-weight:600}
.thr b.g{color:#059669}.thr b.r{color:#e11d48}.thr b.a{color:#d97706}

.topo{min-width:280px}
.topo svg{width:100%;height:auto;display:block}
.topo .n{fill:#fff;stroke:var(--border2);stroke-width:1}
.topo .l{stroke:var(--border2);stroke-width:1.5;stroke-dasharray:4 4;animation:svcDash 3s linear infinite}
@keyframes svcDash{to{stroke-dashoffset:-16}}
.topo text{font-family:var(--svc-mono);font-size:8px;fill:var(--muted)}

.hv{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:280px}
.host{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px}
.host header{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted2);margin-bottom:8px}
.host header b{color:var(--text);font-weight:600}
.vms{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.vms i{height:16px;border-radius:4px;background:var(--cxl);border:1px solid var(--c);opacity:.7;display:block}
.vms i.r{background:#fff;border-style:dashed;opacity:.5}

.chart{display:flex;align-items:flex-end;gap:6px;height:64px;min-width:240px}
.chart i{flex:1;background:var(--c);border-radius:4px 4px 0 0;opacity:.85;animation:svcUp 9s ease-in-out infinite;transform-origin:bottom;display:block}
@keyframes svcUp{0%{transform:scaleY(0)}35%,100%{transform:scaleY(1)}}

.code{background:#111827;color:#e5e7eb;border-radius:10px;padding:12px 14px;font-size:11px;line-height:1.7;min-width:280px}
.code .k{color:#c4b5fd}.code .s{color:#86efac}.code .c{color:#6b7280}

/* ---------- PROCESS ---------- */
.process{padding:96px 0;background:var(--bg2);border-top:1px solid var(--border)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 22px}
.step b.n{font-family:var(--svc-mono);font-size:12px;color:var(--purple-l);display:block;margin-bottom:14px}
.step h3{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.step p{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.65}

/* ---------- EXPERTISE ---------- */
.partners-sec{padding:96px 0}
.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.partner-tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;transition:.2s}
.partner-tile:hover{border-color:#ddd6fe;box-shadow:0 8px 24px rgba(109,40,217,.08);transform:translateY(-2px)}
.pt-mono{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;color:#fff}
.pt-name{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;color:var(--text)}
.pt-type{font-size:11px;color:var(--muted2)}
.pt-badge{font-size:10px;padding:2px 9px;background:var(--purple-xl);color:var(--purple-l);border-radius:100px;font-weight:600;border:1px solid #ddd6fe}

/* ---------- CTA ---------- */
.svc-cta{padding:100px 0;text-align:center;border-top:1px solid var(--border);background:linear-gradient(180deg,#fff 0%,var(--bg2) 100%)}
.svc-cta h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-0.025em;color:var(--text);margin-bottom:14px}
.svc-cta p{font-size:15px;color:var(--muted);font-weight:300;margin-bottom:32px}

/* ══════════════════════════════════════════════════════════
   GATECORE AUTHENTICATOR — FOOTER BADGE BAR
   On every page. Images in /img: gatecore-logo.webp · app-store.svg · google-play.webp
   Both badges sit on the same 646x250 canvas, the visible box is 67% —
   the required clear space is inside the asset, so both get the same height.
   ══════════════════════════════════════════════════════════ */
.gc-appbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.gc-appbar-ico { width: 44px; height: 44px; border-radius: 22%; flex-shrink: 0; display: block; box-shadow: 0 6px 18px rgba(109,40,217,0.22); }
.gc-appbar-txt { min-width: 220px; }
.gc-appbar-t { font-size: 13.5px; font-weight: 700; color: var(--text); }
.gc-appbar-s { font-size: 11.5px; color: var(--muted); font-weight: 300; margin-top: 3px; line-height: 1.65; }
.gc-appbar-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.gc-appbar-badges a { display: inline-flex; align-items: center; transition: transform 0.2s, opacity 0.2s; }
.gc-appbar-badges a:hover { transform: translateY(-2px); opacity: 0.85; }
.gc-appbar-badges img { height: 58px; width: auto; display: block; }

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .svc-hero-grid{grid-template-columns:1fr}
  .svc-cat{grid-template-columns:1fr;gap:28px;padding:48px 0}
  .svc-side{position:static}
  .steps,.partners-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){ .jumpbar{top:0} }
@media (max-width: 700px) {
  .gc-appbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gc-appbar-badges { margin-left: 0; width: 100%; }
  .gc-appbar-badges a { flex: 1 1 150px; }
  .gc-appbar-badges img { height: 52px; max-width: 100%; }
}
@media(max-width:640px){
  .svc-hero{padding-top:56px}
  .svc-grid{grid-template-columns:1fr}
  .vis{grid-template-columns:1fr}
  .vis-r>*{min-width:0}
  .hp-row{gap:6px}.hp-stat{padding:10px}.hp-stat b{font-size:16px}
}
@media(max-width:420px){.steps,.partners-grid{grid-template-columns:1fr}.thr{grid-template-columns:1fr 1fr}}
@media (max-width: 380px) { .gc-appbar-badges img { height: 46px; } }
@media(prefers-reduced-motion:reduce){.hp-item,.hp-pulse::after,.mig .bar i,.topo .l,.chart i{animation:none!important}}

/* ================================================================ dark theme */
html[data-theme="dark"] .svc-hero { background: radial-gradient(900px 400px at 15% 0%,color-mix(in srgb, #370bf4 15%, var(--card)) 0%,transparent 60%),radial-gradient(700px 400px at 90% 20%,color-mix(in srgb, #0897f7 15%, var(--card)) 0%,transparent 55%),var(--card); }
html[data-theme="dark"] .hero-panel { background: var(--card); }
html[data-theme="dark"] .hp-top i { background: var(--bg3); }
html[data-theme="dark"] .st.done { background: color-mix(in srgb, #18e786 15%, var(--card)); }
html[data-theme="dark"] .st.sched { background: color-mix(in srgb, #ffcc00 15%, var(--card)); }
html[data-theme="dark"] .jumpbar { background: rgba(16,23,42,0.92); }
html[data-theme="dark"] .svc-cat { --c: #a273f2; --cxl: color-mix(in srgb, #3300ff 15%, var(--card)); }
html[data-theme="dark"] .sc { background: var(--card); }
html[data-theme="dark"] .mig .bar { background: var(--bg3); }
html[data-theme="dark"] .thr div { background: var(--card); }
html[data-theme="dark"] .thr b.r { color: #ee7791; }
html[data-theme="dark"] .host { background: var(--card); }
html[data-theme="dark"] .vms i.r { background: var(--card); }
html[data-theme="dark"] .step { background: var(--card); }
html[data-theme="dark"] .partner-tile { background: var(--card); }
html[data-theme="dark"] .partner-tile:hover { border-color: color-mix(in srgb, #451ffa 40%, var(--card)); }
html[data-theme="dark"] .pt-badge { border: 1px solid color-mix(in srgb, #451ffa 40%, var(--card)); }
html[data-theme="dark"] .svc-cta { background: linear-gradient(180deg,var(--card) 0%,var(--bg2) 100%); }
html[data-theme="dark"] [style*="--cxl"] { --cxl: color-mix(in srgb, var(--c) 18%, transparent) !important; }
html[data-theme="dark"] .hero-panel { box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }