/* =========================================================
   netCONNECT telecom — redesign
   Design system + components
   ========================================================= */

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

/* ---- Tokens ---- */
:root{
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* neutrals (warm) */
  --bg: oklch(0.986 0.004 60);
  --surface: #ffffff;
  --surface-2: oklch(0.965 0.005 60);
  --surface-3: oklch(0.945 0.006 55);
  --ink: oklch(0.235 0.012 40);
  --ink-soft: oklch(0.40 0.011 40);
  --muted: oklch(0.55 0.009 45);
  --line: oklch(0.905 0.005 60);
  --line-strong: oklch(0.84 0.006 55);

  /* brand accent (crimson) — overridable by Tweaks */
  --accent: oklch(0.55 0.185 26);
  --accent-deep: oklch(0.445 0.155 26);
  --accent-bright: oklch(0.61 0.205 28);
  --accent-tint: oklch(0.95 0.03 26);

  /* dark sections */
  --dark: oklch(0.175 0.012 35);
  --dark-2: oklch(0.225 0.014 35);
  --dark-line: oklch(0.32 0.012 40);
  --on-dark: oklch(0.97 0.004 60);
  --on-dark-soft: oklch(0.74 0.008 55);

  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 9px;
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --shadow-sm: 0 1px 2px rgba(20,15,12,.05), 0 2px 8px rgba(20,15,12,.04);
  --shadow-md: 0 4px 14px rgba(20,15,12,.07), 0 12px 34px rgba(20,15,12,.07);
  --shadow-lg: 0 18px 60px rgba(20,15,12,.16);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--accent); color:#fff; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin:0; letter-spacing:-0.02em; color: var(--ink); }
p{ margin:0; }

.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }

/* eyebrow / mono labels */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background: var(--accent); display:inline-block;
}
.eyebrow.on-dark{ color: color-mix(in oklch, var(--accent-bright) 80%, white); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ width:18px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight:600; font-size:15px; letter-spacing:-0.01em;
  padding: 14px 24px; border-radius: 999px; border:1px solid transparent;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn .arr{ transition: transform .2s ease; }
.btn:hover .arr{ transform: translateX(3px); }
.btn-primary{ background: var(--accent); color:#fff; box-shadow: 0 8px 22px -8px var(--accent); }
.btn-primary:hover{ background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--accent); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }
.btn-ondark{ background:#fff; color: var(--dark); }
.btn-ondark:hover{ background: var(--accent); color:#fff; transform: translateY(-2px); }
.btn-ondark-ghost{ background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.28); }
.btn-ondark-ghost:hover{ border-color:#fff; background: rgba(255,255,255,.06); }
.btn-lg{ padding: 17px 30px; font-size:16px; }

/* reveal animation */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
}

/* section rhythm */
.section{ padding-block: clamp(64px, 9vw, 120px); }
.section-head{ max-width: 720px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(30px, 4.4vw, 50px); margin-top:16px; }
.section-head p{ color: var(--muted); font-size: 18px; margin-top:18px; }

/* =========================================================
   TOP BAR + HEADER
   ========================================================= */
.topbar{
  background: var(--dark); color: var(--on-dark-soft);
  font-size: 13.5px;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:16px; }
.topbar a{ color: var(--on-dark-soft); transition: color .15s; }
.topbar a:hover{ color:#fff; }
.topbar-left{ display:flex; align-items:center; gap:22px; font-family: var(--font-mono); letter-spacing:.02em; }
.topbar-left .dot{ color: var(--accent-bright); }
.topbar-social{ display:flex; align-items:center; gap:6px; }
.topbar-social a{ width:30px; height:30px; display:grid; place-items:center; border-radius:7px; }
.topbar-social a:hover{ background: rgba(255,255,255,.08); }
.topbar-social svg{ width:15px; height:15px; }
@media (max-width: 880px){ .topbar-left .hide-sm{ display:none; } }

header.site{
  position: sticky; top:0; z-index: 60;
  background: color-mix(in oklch, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
header.site.scrolled{ box-shadow: var(--shadow-sm); border-color: var(--line); background: color-mix(in oklch, var(--bg) 94%, transparent); }
.nav{ display:flex; align-items:center; justify-content:space-between; min-height:80px; gap:24px; }
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}
.brand img{
  display:block;
  width:auto;
  height:auto;
  max-height:40px;
  max-width:190px;
  object-fit:contain;
}
.nav-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav-links > li > a{
  display:inline-flex; align-items:center; gap:6px;
  white-space: nowrap;
  font-family: var(--font-display); font-weight:500; font-size:15px;
  padding:10px 12px; border-radius: 9px; color: var(--ink-soft);
  transition: color .15s, background .15s;
}
.nav-links > li > a:hover{ color: var(--ink); background: var(--surface-2); }
.nav-links > li.has-mega > a .chev{ width:9px; height:9px; transition: transform .2s; opacity:.6; }
.nav-links > li.has-mega:hover > a .chev{ transform: rotate(180deg); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-phone{
  display:flex; align-items:center; gap:9px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family:var(--font-display); font-weight:600; font-size:15px;
}
.nav-phone svg{ width:17px; height:17px; color: var(--accent); }

/* mega menu */
.has-mega{ position: static; }
.mega{
  position:absolute; left:0; right:0; top:100%;
  background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index:55;
}
.has-mega:hover .mega, .mega:hover{ opacity:1; visibility:visible; transform:none; }
.mega-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:4px 28px; padding: 28px var(--gutter) 30px; }
.mega-col-head{ grid-column:1 / -1; }
.mega a{
  display:flex; gap:13px; align-items:flex-start; padding:13px 14px; border-radius:11px;
  transition: background .15s, transform .15s;
}
.mega a:hover{ background: var(--surface-2); }
.mega .m-ic{ width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center;
  background: var(--accent-tint); color: var(--accent-deep); }
.mega .m-ic svg{ width:19px; height:19px; }
.mega .m-t{ font-family:var(--font-display); font-weight:600; font-size:15px; color: var(--ink); }
.mega .m-d{ font-size:13px; color: var(--muted); margin-top:2px; line-height:1.4; }
.mega-feature{ background: var(--dark); color: var(--on-dark); border-radius:14px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; }
.mega-feature h4{ color:#fff; font-size:18px; }
.mega-feature p{ color: var(--on-dark-soft); font-size:13.5px; margin-top:8px; }

/* mobile nav */
.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:10px; width:46px; height:46px; place-items:center; color:var(--ink); }
.nav-toggle svg{ width:22px; height:22px; }
.mobile-nav{
  position: fixed; inset:0; z-index:80; background: var(--dark); color:var(--on-dark);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.7,0,.2,1);
  display:flex; flex-direction:column; padding: 22px var(--gutter); overflow-y:auto;
}
.mobile-nav.open{ transform:none; }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mobile-nav-top img{ height:34px; filter: brightness(0) invert(1); opacity:.92; }
.mobile-nav .m-close{ background:none; border:1px solid var(--dark-line); color:#fff; width:46px;height:46px;border-radius:10px; display:grid; place-items:center; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mobile-nav > ul > li{ border-bottom:1px solid var(--dark-line); }
.mobile-nav > ul > li > a, .m-acc-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-family:var(--font-display); font-weight:500; font-size:21px; color:#fff;
  padding:18px 2px; background:none; border:none; text-align:left;
}
.m-acc-btn .chev{ width:14px;height:14px; transition: transform .25s; opacity:.6; }
.m-acc.open .m-acc-btn .chev{ transform: rotate(180deg); }
.m-sub{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.m-acc.open .m-sub{ max-height:640px; }
.m-sub a{ display:block; padding:11px 2px 11px 14px; color:var(--on-dark-soft); font-size:16px; }
.mobile-nav .m-foot{ margin-top:auto; padding-top:26px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; background: var(--dark); color: var(--on-dark); overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 60% 40%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--dark) 12%, color-mix(in oklch, var(--dark) 78%, transparent) 46%, color-mix(in oklch, var(--dark) 24%, transparent) 70%),
    linear-gradient(0deg, var(--dark) 2%, transparent 38%);
}
.hero-glow{
  position:absolute; width:620px; height:620px; right:-120px; top:-160px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 60%, transparent), transparent 62%);
  filter: blur(20px); opacity:.55; pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-inner{ padding-block: clamp(80px, 13vw, 168px); max-width: 760px; }
.hero h1{ font-size: clamp(40px, 6.6vw, 78px); line-height:1.0; font-weight:700; color:#fff; letter-spacing:-0.03em; }
.hero h1 .hl{ color: var(--accent-bright); }
.hero-sub{ font-size: clamp(18px, 2.1vw, 21px); color: var(--on-dark-soft); margin-top:24px; max-width:560px; line-height:1.55; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero-tag{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 15px; color: var(--on-dark-soft);
  display:inline-flex; gap:8px; align-items:center;
}
.hero-tag .d{ width:6px;height:6px;border-radius:50%; background:var(--accent-bright); }

/* hero gradient variant (Tweaks) */
:root[data-hero="gradient"] .hero-media img{ display:none; }
:root[data-hero="gradient"] .hero-media{
  background:
    radial-gradient(900px 600px at 88% -10%, color-mix(in oklch, var(--accent) 55%, transparent), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, color-mix(in oklch, var(--accent-deep) 45%, transparent), transparent 60%),
    var(--dark);
}
:root[data-hero="gradient"] .hero-media::after{ background: linear-gradient(0deg, var(--dark), transparent 60%); }

/* stat strip below hero */
.stats{ background: var(--surface); border-bottom:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.stat{ padding: 34px var(--gutter); border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size: clamp(34px, 4vw, 46px); letter-spacing:-0.03em; color:var(--ink); display:flex; align-items:baseline; gap:2px; }
.stat .num .suf{ color: var(--accent); }
.stat .lbl{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-top:8px; }
@media (max-width: 860px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } .stat:nth-child(odd){ border-left:none; } .stat:nth-child(n+3){ border-top:1px solid var(--line); } }

/* =========================================================
   SERVICES
   ========================================================= */
.svc-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.svc{
  position:relative; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column;
}
.svc:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.svc-media{ aspect-ratio: 16/10; position:relative; overflow:hidden; background: var(--surface-3); }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.svc:hover .svc-media img{ transform: scale(1.06); }
.svc-num{ position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:12px; font-weight:700; color:#fff; background: color-mix(in oklch, var(--dark) 65%, transparent); backdrop-filter: blur(4px); padding:5px 10px; border-radius:999px; letter-spacing:.08em; }
.svc-body{ padding: 24px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.svc-body h3{ font-size:22px; }
.svc-body p{ color: var(--muted); font-size:15.5px; line-height:1.55; }
.svc-link{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color: var(--accent); }
.svc-link .arr{ transition: transform .2s; }
.svc:hover .svc-link .arr{ transform: translateX(4px); }

/* placeholder media */
.ph{
  width:100%; height:100%; position:relative;
  background:
    repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px);
  display:grid; place-items:center;
}
.ph::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 40%, color-mix(in oklch, var(--accent-tint) 60%, transparent), transparent 70%); }
.ph .ph-label{ position:relative; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color: var(--ink-soft); background: var(--surface); border:1px solid var(--line-strong); padding:7px 12px; border-radius:8px; text-transform:uppercase; }
.ph .ph-label .pi{ color: var(--accent); margin-right:7px; }

/* small service list (4 secondary) */
.svc-mini-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:18px; }
.svc-mini{
  display:flex; gap:15px; align-items:flex-start; padding:20px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.svc-mini:hover{ border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.svc-mini .mi{ width:42px;height:42px;flex:none;border-radius:11px; display:grid; place-items:center; background: var(--surface-2); color: var(--accent-deep); border:1px solid var(--line); }
.svc-mini .mi svg{ width:21px;height:21px; }
.svc-mini h4{ font-size:16.5px; }
.svc-mini p{ color: var(--muted); font-size:13.5px; margin-top:4px; line-height:1.45; }

/* =========================================================
   COVERAGE (dark)
   ========================================================= */
.dark-sec{ background: var(--dark); color: var(--on-dark); position:relative; overflow:hidden; }
.coverage-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px,6vw,80px); align-items:center; }
.coverage h2{ color:#fff; font-size: clamp(30px,4.2vw,48px); margin-top:16px; }
.coverage p.lead{ color: var(--on-dark-soft); font-size:18px; margin-top:18px; max-width:480px; }
.coverage-list{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.coverage-list li{ display:flex; gap:13px; align-items:flex-start; color: var(--on-dark); font-size:16px; }
.coverage-list .ck{ width:24px;height:24px;flex:none;border-radius:7px; background: color-mix(in oklch, var(--accent) 26%, transparent); color: var(--accent-bright); display:grid; place-items:center; margin-top:1px; }
.coverage-list .ck svg{ width:14px;height:14px; }

/* radar map motif */
.radar{ position:relative; aspect-ratio: 1/1; max-width: 460px; margin-inline:auto; }
.radar-ring{ position:absolute; inset:0; border:1px solid var(--dark-line); border-radius:50%; }
.radar-ring.r2{ inset:13%; } .radar-ring.r3{ inset:27%; } .radar-ring.r4{ inset:41%; }
.radar-core{ position:absolute; inset:46%; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 25%, transparent), 0 0 40px var(--accent); }
.radar-cross{ position:absolute; background: var(--dark-line); }
.radar-cross.h{ left:0; right:0; top:50%; height:1px; }
.radar-cross.v{ top:0; bottom:0; left:50%; width:1px; }
@media (prefers-reduced-motion: no-preference){
  .radar-sweep{ position:absolute; inset:0; border-radius:50%; background: conic-gradient(from 0deg, transparent 0 300deg, color-mix(in oklch, var(--accent) 40%, transparent) 350deg, transparent 360deg); animation: sweep 5s linear infinite; }
  @keyframes sweep{ to{ transform: rotate(360deg); } }
  .radar-node{ animation: ping 2.6s ease-out infinite; }
  @keyframes ping{ 0%{ transform: scale(.7); opacity:.3; } 50%{ opacity:1; } 100%{ transform: scale(1.25); opacity:.3; } }
}
.radar-node{ position:absolute; width:11px; height:11px; border-radius:50%; background: var(--accent-bright); box-shadow: 0 0 12px var(--accent-bright); }
.radar-node.n1{ top:22%; left:30%; } .radar-node.n2{ top:64%; left:62%; animation-delay:.6s; }
.radar-node.n3{ top:38%; left:72%; animation-delay:1.1s; } .radar-node.n4{ top:70%; left:28%; animation-delay:1.7s; }
.radar-label{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--on-dark-soft); }

/* =========================================================
   WISP packages
   ========================================================= */
.pkg-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:52px; }
.pkg{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding:30px 28px 32px;
  position:relative; transition: transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column;
}
.pkg:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pkg.featured{ border-color: var(--accent); box-shadow: 0 22px 50px -28px var(--accent); }
.pkg.featured::before{ content:"Most popular"; position:absolute; top:-12px; left:28px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background: var(--accent); color:#fff; padding:5px 12px; border-radius:999px; }
.pkg .pkg-range{ font-family:var(--font-display); font-weight:700; font-size:44px; letter-spacing:-0.03em; color: var(--ink); display:flex; align-items:baseline; gap:4px; }
.pkg .pkg-range .u{ font-size:18px; color: var(--muted); font-weight:600; }
.pkg .pkg-name{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-top:6px; }
.pkg .pkg-desc{ color: var(--muted); font-size:15px; margin-top:14px; line-height:1.5; }
.pkg ul{ list-style:none; margin:22px 0 26px; padding:22px 0 0; border-top:1px solid var(--line); display:grid; gap:13px; }
.pkg ul li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color: var(--ink-soft); }
.pkg ul .ck{ width:20px;height:20px;flex:none;border-radius:6px;background:var(--accent-tint); color:var(--accent-deep); display:grid;place-items:center; margin-top:1px; }
.pkg ul .ck svg{ width:12px;height:12px; }
.pkg .btn{ margin-top:auto; justify-content:center; }

/* =========================================================
   SECURITY split
   ========================================================= */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,72px); align-items:center; }
.split-media{ border-radius: var(--radius-lg); overflow:hidden; position:relative; box-shadow: var(--shadow-lg); }
.split-media img{ width:100%; aspect-ratio: 4/3.4; object-fit:cover; }
.split-media .badge{
  position:absolute; left:20px; bottom:20px; background: color-mix(in oklch, var(--dark) 78%, transparent); backdrop-filter: blur(8px);
  color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:14px 18px; display:flex; gap:12px; align-items:center;
}
.split-media .badge .bd{ width:9px;height:9px;border-radius:50%; background: oklch(0.72 0.18 145); box-shadow:0 0 10px oklch(0.72 0.18 145); }
.split-media .badge b{ font-family:var(--font-display); font-size:15px; }
.split-media .badge span{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-top:2px; }
.feature-list{ list-style:none; margin:26px 0 32px; padding:0; display:grid; gap:18px; }
.feature-list li{ display:flex; gap:15px; align-items:flex-start; }
.feature-list .fi{ width:46px;height:46px;flex:none;border-radius:12px; background: var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; color: var(--accent-deep); }
.feature-list .fi svg{ width:22px;height:22px; }
.feature-list h4{ font-size:17px; }
.feature-list p{ color: var(--muted); font-size:14.5px; margin-top:3px; line-height:1.5; }

/* =========================================================
   STORY / since 1998
   ========================================================= */
.story{ background: var(--surface-2); }
.story-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px,6vw,80px); align-items:center; }
.story-media{ position:relative; }
.story-media .photo{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.story-media .photo img{ width:100%; aspect-ratio: 4/3.2; object-fit:cover; }
.story-chip{
  position:absolute; right:-14px; bottom:-22px; background: var(--accent); color:#fff; border-radius: var(--radius);
  padding:20px 24px; box-shadow: var(--shadow-lg);
}
.story-chip .y{ font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; letter-spacing:-0.03em; }
.story-chip .t{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; opacity:.92; }
.story-text h2{ font-size: clamp(28px,3.6vw,42px); margin-top:16px; }
.story-text p{ color: var(--ink-soft); font-size:16.5px; margin-top:18px; line-height:1.65; }
.story-pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:30px; }
.pillar{ padding:18px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); }
.pillar .pi{ color: var(--accent); }
.pillar .pi svg{ width:24px;height:24px; }
.pillar h4{ font-size:15.5px; margin-top:12px; }
.pillar p{ font-size:13px; color: var(--muted); margin-top:5px; line-height:1.4; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.tst{ background: var(--dark); color: var(--on-dark); }
.tst-wrap{ position:relative; }
.tst-track{ display:flex; overflow:hidden; }
.tst-slide{ min-width:100%; opacity:0; transform: translateY(8px); transition: opacity .5s, transform .5s; padding: 4px; }
.tst-slide.active{ opacity:1; transform:none; }
.tst-quote{ font-family: var(--font-display); font-weight:500; font-size: clamp(22px, 3.2vw, 34px); line-height:1.32; color:#fff; letter-spacing:-0.02em; max-width: 920px; }
.tst-mark{ font-family: var(--font-display); font-size: 90px; line-height:.6; color: var(--accent); height:46px; display:block; }
.tst-author{ display:flex; align-items:center; gap:15px; margin-top:34px; }
.tst-avatar{ width:54px;height:54px;border-radius:50%; background: var(--dark-2); border:1px solid var(--dark-line); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:18px; color: var(--accent-bright); }
.tst-author .an{ font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff; }
.tst-author .ao{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color: var(--on-dark-soft); margin-top:2px; }
.tst-nav{ display:flex; gap:10px; margin-top:42px; align-items:center; }
.tst-dot{ width:9px;height:9px;border-radius:50%; background: var(--dark-line); border:none; padding:0; transition: width .25s, background .25s; }
.tst-dot.active{ width:30px; border-radius:999px; background: var(--accent); }

/* =========================================================
   INQUIRY / contact
   ========================================================= */
.inq-grid{ display:grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px,5vw,64px); }
.inq-info .contact-rows{ display:grid; gap:6px; margin-top:34px; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
.contact-row .ci{ width:46px;height:46px;flex:none;border-radius:12px;background: var(--accent-tint); color:var(--accent-deep); display:grid; place-items:center; }
.contact-row .ci svg{ width:22px;height:22px; }
.contact-row .ck-lbl{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.contact-row .cv{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); margin-top:3px; }
.contact-row .cv span{ display:block; font-family:var(--font-body); font-weight:400; font-size:14.5px; color:var(--muted); }

.inq-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,3vw,40px); box-shadow: var(--shadow-md); }
.inq-card h3{ font-size:24px; }
.inq-card .sub{ color: var(--muted); font-size:15px; margin-top:8px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:24px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:15.5px; color: var(--ink);
  background: var(--bg); border:1px solid var(--line-strong); border-radius:11px; padding:13px 15px;
  transition: border-color .15s, box-shadow .15s, background .15s; width:100%;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); background:#fff; }
.field.err input, .field.err select, .field.err textarea{ border-color: var(--accent); }
.field .msg{ font-size:12.5px; color: var(--accent); font-weight:600; min-height:0; display:none; }
.field.err .msg{ display:block; }
.inq-card button[type=submit]{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ font-size:13px; color: var(--muted); margin-top:14px; text-align:center; }
.form-success{ display:none; text-align:center; padding: 30px 10px; }
.form-success.show{ display:block; }
.form-success .ic{ width:64px;height:64px;border-radius:50%; background: var(--accent-tint); color: var(--accent-deep); display:grid; place-items:center; margin:0 auto 18px; }
.form-success .ic svg{ width:32px;height:32px; }
.form-success h3{ font-size:24px; }
.form-success p{ color: var(--muted); margin-top:10px; }

/* =========================================================
   FOOTER
   ========================================================= */
.cta-band{ background: var(--accent); color:#fff; }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block: clamp(40px,5vw,64px); flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size: clamp(26px,3.6vw,40px); max-width:640px; }
.cta-band p{ color: rgba(255,255,255,.85); margin-top:10px; }

footer.site-foot{ background: var(--dark); color: var(--on-dark-soft); }
.foot-top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-block: clamp(48px,6vw,76px); }
.foot-brand img{ height:38px; filter: brightness(0) invert(1); opacity:.95; }
.foot-brand p{ margin-top:18px; font-size:14.5px; line-height:1.6; max-width:300px; }
.foot-social{ display:flex; gap:10px; margin-top:22px; }
.foot-social a{ width:38px;height:38px;border-radius:10px;border:1px solid var(--dark-line); display:grid; place-items:center; color: var(--on-dark-soft); transition: all .15s; }
.foot-social a:hover{ background: var(--accent); border-color: var(--accent); color:#fff; transform: translateY(-2px); }
.foot-social svg{ width:16px;height:16px; }
.foot-col h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot-col a{ font-size:14.5px; color: var(--on-dark-soft); transition: color .15s; }
.foot-col a:hover{ color:#fff; }
.foot-contact li{ display:flex; gap:11px; font-size:14.5px; align-items:flex-start; margin-bottom:13px; }
.foot-contact svg{ width:16px;height:16px;flex:none;margin-top:3px; color: var(--accent-bright); }
.foot-bottom{ border-top:1px solid var(--dark-line); padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; }
.foot-bottom .reg{ font-family:var(--font-mono); letter-spacing:.03em; }

/* =========================================================
   Footnote marker + bar
   ========================================================= */
.fn-mark{ font-size:.62em; font-weight:700; vertical-align:super; line-height:0; }
.fn-mark a{ color: var(--accent); }
.fn-mark a:hover{ color: var(--accent-deep); }
.svc-body h3 .fn-mark a, .mega .m-t .fn-mark a{ color: var(--accent); }
.footnotes{ border-top:1px solid var(--dark-line); padding-block:20px; }
.footnotes p{ font-size:13px; color: var(--on-dark-soft); line-height:1.55; max-width:760px; display:flex; gap:9px; }
.footnotes .fs{ color: var(--accent-bright); font-weight:700; flex:none; }

/* =========================================================
   Capabilities (Software · AI · ICT)
   ========================================================= */
.cap-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:52px; }
.cap-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding:28px 26px 30px; display:flex; flex-direction:column; gap:1em;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position:relative; overflow:hidden;
}
.cap-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background: var(--accent); transform: scaleX(0); transform-origin:left; transition: transform .3s ease; }
.cap-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.cap-card:hover::after{ transform: scaleX(1); }
.cap-ic{ width:54px; height:54px; border-radius:15px; background: var(--accent-tint); color: var(--accent-deep); display:grid; place-items:center; }
.cap-ic svg{ width:27px; height:27px; }
.cap-card h3{ font-size:20px; }
.cap-card p{ color: var(--muted); font-size:14.5px; line-height:1.55; margin-top:.15em; }
.cap-tags{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.cap-tags li{ font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color: var(--ink-soft); background: var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.cap-also{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px; }
@media (max-width: 1080px){ .cap-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cap-grid, .cap-also{ grid-template-columns: 1fr; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .nav-links{ display:none; }
  .nav-phone{ display:none; }
  .nav-toggle{ display:grid; }
  .svc-grid{ grid-template-columns: repeat(2,1fr); }
  .svc-mini-grid{ grid-template-columns: repeat(2,1fr); }
  .foot-top{ grid-template-columns: 1fr 1fr; gap:34px 30px; }
}
@media (max-width: 820px){
  body{ font-size:16px; }
  .coverage-grid, .split, .story-grid, .inq-grid{ grid-template-columns: 1fr; }
  .split-media{ order:-1; }
  .story-media{ margin-bottom:30px; max-width:520px; }
  .pkg-grid{ grid-template-columns: 1fr; max-width:440px; margin-inline:auto; }
  .story-pillars{ grid-template-columns: repeat(3,1fr); }
  .form-grid{ grid-template-columns: 1fr; }
  .portfolio-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .svc-grid, .svc-mini-grid{ grid-template-columns: 1fr; }
  .story-pillars{ grid-template-columns: 1fr; }
  .hero-actions .btn{ flex:1; justify-content:center; }
  .topbar-left{ gap:12px; }
  .portfolio-grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   PAGE-LEVEL COMPONENTS (sub-pages)
   ========================================================= */

/* active nav state */
.nav-links > li > a[aria-current="page"]{ color: var(--ink); background: var(--surface-2); }
.mobile-nav > ul > li > a[aria-current="page"]{ color: var(--accent-bright); }

/* page hero (compact, dark) */
.page-hero{ position:relative; background: var(--dark); color: var(--on-dark); overflow:hidden; }
.page-hero .hero-glow{ opacity:.5; }
.page-hero .wrap{ position:relative; z-index:2; padding-block: clamp(52px, 8vw, 96px); }
.crumb{ display:flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--on-dark-soft); }
.crumb a{ color: var(--on-dark-soft); transition: color .15s; }
.crumb a:hover{ color:#fff; }
.crumb .sep{ opacity:.4; }
.crumb span:last-child{ color:#fff; }
.page-hero-inner{ max-width: 760px; margin-top:20px; }
.page-hero-inner h1{ font-size: clamp(34px, 5.4vw, 62px); line-height:1.02; color:#fff; letter-spacing:-0.03em; margin-top:14px; }
.page-hero-inner .lead{ font-size: clamp(17px, 2vw, 20px); color: var(--on-dark-soft); margin-top:20px; max-width: 600px; line-height:1.55; }
.page-hero-inner .hero-actions{ margin-top:32px; }

/* project spotlight */
.project-strip{ padding-top: 0; }
.project-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background: linear-gradient(135deg, color-mix(in oklch, var(--accent-tint) 58%, white), var(--surface));
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
}
.project-copy{ max-width: 760px; }
.project-copy h2{ font-size: clamp(26px, 3.3vw, 38px); margin-top: 8px; }
.project-copy p{ color: var(--muted); font-size: 16px; line-height:1.6; margin-top:12px; }
.project-action{ flex:none; }
@media (max-width: 760px){
  .project-card{ flex-direction:column; align-items:flex-start; }
  .project-action .btn{ width:100%; justify-content:center; }
}

/* portfolio grid */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  margin-top:42px;
}
.portfolio-card{
  margin:0;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:22px 18px 18px;
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  text-align:center;
  box-shadow: var(--shadow-sm);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.portfolio-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.portfolio-card img{
  width:100%;
  height:92px;
  object-fit:contain;
  object-position:center;
  display:block;
  filter: saturate(.95) contrast(.96);
}
.portfolio-card figcaption{
  font-family: var(--font-display);
  font-size:14px;
  font-weight:600;
  color: var(--ink);
  margin-top:14px;
  line-height:1.35;
}
body[data-page="portfolio"] .portfolio-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:18px 18px;
  margin-top:42px;
}
body[data-page="portfolio"] .portfolio-table td{
  width:25%;
  vertical-align:top;
}
body[data-page="portfolio"] .portfolio-table .portfolio-card{
  width:100%;
}
body[data-page="portfolio"] .portfolio-grid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width:100%;
}
@media (max-width: 1024px){
  body[data-page="portfolio"] .portfolio-table{
    border-spacing:14px 14px;
  }
  body[data-page="portfolio"] .portfolio-table td{
    width:50%;
  }
}
@media (max-width: 640px){
  body[data-page="portfolio"] .portfolio-table{
    border-spacing:12px 12px;
  }
  body[data-page="portfolio"] .portfolio-table td{
    display:block;
    width:100%;
  }
  body[data-page="portfolio"] .portfolio-table tr{
    display:block;
  }
}
@media (max-width: 1024px){
  body[data-page="portfolio"] .portfolio-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  body[data-page="portfolio"] .portfolio-grid{
    grid-template-columns: 1fr !important;
  }
}

/* intro two-column block */
.lead-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px,6vw,72px); align-items:start; }
.lead-grid h2{ font-size: clamp(27px,3.6vw,42px); }
.lead-grid .body p{ color: var(--ink-soft); font-size:16.5px; line-height:1.7; }
.lead-grid .body p + p{ margin-top:18px; }
@media (max-width: 820px){ .lead-grid{ grid-template-columns:1fr; } }

/* timeline */
.timeline{ margin-top:8px; border-top:1px solid var(--line); }
.tl-item{ display:grid; grid-template-columns: 140px 1fr; gap: clamp(16px,3vw,40px); padding-block: 28px; border-bottom:1px solid var(--line); }
.tl-year{ font-family: var(--font-display); font-weight:700; font-size: clamp(28px,3vw,38px); letter-spacing:-0.03em; color: var(--accent); line-height:1; }
.tl-item h4{ font-size:20px; }
.tl-item p{ color: var(--muted); font-size:15.5px; margin-top:8px; line-height:1.6; max-width:620px; }
@media (max-width: 620px){ .tl-item{ grid-template-columns:1fr; gap:6px; } }

/* process steps */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:52px; }
.step{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding:26px 24px 28px; position:relative; }
.step .sn{ font-family: var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.1em; color: var(--accent); }
.step h4{ font-size:18px; margin-top:14px; }
.step p{ color: var(--muted); font-size:14.5px; margin-top:8px; line-height:1.55; }
.step::before{ content:""; position:absolute; left:24px; right:24px; top:0; height:3px; background: var(--accent-tint); border-radius:0 0 3px 3px; }
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .steps{ grid-template-columns:1fr; } }

/* FAQ accordion */
.faq{ max-width: 860px; margin-top: 44px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 4px; background:none; border:none; text-align:left; font-family: var(--font-display); font-weight:600; font-size: clamp(17px,2vw,20px); color: var(--ink); letter-spacing:-0.01em; }
.faq-q .pl{ position:relative; width:20px; height:20px; flex:none; }
.faq-q .pl::before, .faq-q .pl::after{ content:""; position:absolute; background: var(--accent); border-radius:2px; transition: transform .25s ease; }
.faq-q .pl::before{ left:0; right:0; top:9px; height:2px; }
.faq-q .pl::after{ top:0; bottom:0; left:9px; width:2px; }
.faq-item.open .faq-q .pl::after{ transform: scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .32s ease; }
.faq-a p{ padding:0 4px 26px; color: var(--muted); font-size:16px; line-height:1.65; max-width:760px; }

/* office cards */
.office-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin-top:24px; }
.office{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding:28px; }
.office .tag{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); }
.office h4{ font-size:20px; margin-top:10px; }
.office .addr{ color: var(--ink-soft); font-size:15.5px; margin-top:10px; line-height:1.6; }
.office .row{ display:flex; align-items:center; gap:10px; font-size:15px; color: var(--ink-soft); margin-top:12px; }
.office .row svg{ width:17px; height:17px; flex:none; color: var(--accent); }
@media (max-width: 700px){ .office-grid{ grid-template-columns:1fr; } }

/* map placeholder (uses .ph styling, taller) */
.map-embed{ aspect-ratio: 21/9; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); margin-top:28px; }
@media (max-width: 700px){ .map-embed{ aspect-ratio: 4/3; } }

/* logo / client strip */
.logo-strip{ display:grid; grid-template-columns: repeat(5,1fr); gap:14px; margin-top:40px; }
.logo-cell{ aspect-ratio: 16/7; border:1px solid var(--line); border-radius: var(--radius); display:grid; place-items:center; background: var(--surface); }
.logo-cell span{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; color: var(--muted); text-transform:uppercase; }
@media (max-width: 820px){ .logo-strip{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px){ .logo-strip{ grid-template-columns: repeat(2,1fr); } }

/* spec list (detail pages) */
.spec-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:46px; }
.spec{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:22px 22px 24px; }
.spec .k{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.spec .v{ font-family: var(--font-display); font-weight:700; font-size: clamp(24px,2.6vw,30px); letter-spacing:-0.02em; color: var(--ink); margin-top:8px; }
.spec .v small{ font-size:15px; font-weight:600; color: var(--muted); }
.spec p{ color: var(--muted); font-size:14px; margin-top:8px; line-height:1.5; }
@media (max-width: 820px){ .spec-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .spec-grid{ grid-template-columns:1fr; } }

/* 404 */
.notfound{ min-height: 62vh; display:grid; place-items:center; text-align:center; padding-block: clamp(60px,10vw,120px); }
.notfound .code{ font-family: var(--font-display); font-weight:700; font-size: clamp(96px, 18vw, 200px); line-height:.9; letter-spacing:-0.05em; color: var(--ink); }
.notfound .code span{ color: var(--accent); }
.notfound h1{ font-size: clamp(26px,4vw,40px); margin-top:18px; }
.notfound p{ color: var(--muted); font-size:18px; margin-top:16px; max-width:480px; }
.notfound .hero-actions{ justify-content:center; margin-top:32px; }

/* generic alt-surface section helper */
.section.alt{ background: var(--surface-2); }
.section-head.tight{ margin-bottom: 8px; }