/* ==========================================================================
   OKTAGATE — Design System
   IT Solutions & Services  ·  oktagate.com
   --------------------------------------------------------------------------
   1.  Tokens & themes          8.  Marquee / logo walls
   2.  Reset & base             9.  Cards
   3.  Utilities & layout      10.  Tabs, accordion, process
   4.  Typography              11.  Stats & counters
   5.  Buttons & pills         12.  CTA, footer
   6.  Header & navigation     13.  Forms
   7.  Hero & page headers     14.  Motion & responsive
   ========================================================================== */

/* ------------------------------------------------ 1. Tokens & themes ---- */
:root {
  /* Brand */
  --brand-cyan:   #22D3EE;
  --brand-blue:   #2E6BFF;
  --brand-violet: #7C5CFF;
  --brand:        #2E6BFF;
  --grad-brand:   linear-gradient(135deg, #22D3EE 0%, #2E6BFF 48%, #7C5CFF 100%);
  --grad-soft:    linear-gradient(135deg, rgba(34,211,238,.16), rgba(124,92,255,.16));
  /* Solid accent for anything that carries text or a number. Gradient-filled
     text fails contrast at its light end, so the gradient is reserved for
     surfaces: the logo, primary buttons and the CTA band. */
  --accent:       #22D3EE;

  /* Dark surfaces (default) */
  --bg:           #05070F;
  --bg-alt:       #080C18;
  --surface:      #0B1122;
  --surface-2:    #101832;
  --surface-3:    #16203E;
  --line:         rgba(255,255,255,.09);
  --line-strong:  rgba(255,255,255,.16);

  /* Text */
  --fg:           #EAEEF9;
  --fg-strong:    #FFFFFF;
  --fg-muted:     #97A3C0;
  --fg-dim:       #6C7899;

  /* Effects */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.25);
  --shadow-md:  0 14px 40px -12px rgba(0,0,0,.55);
  --shadow-lg:  0 40px 90px -30px rgba(0,0,0,.75);
  --glow:       0 0 0 1px rgba(46,107,255,.35), 0 18px 50px -20px rgba(46,107,255,.55);

  /* Geometry */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 118px);

  /* Type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* Light theme
   The ground is tinted with the brand hue instead of being pure white, and the
   cards stay white so they lift off it. Previously --bg and --surface were both
   #FFFFFF, which left every card separated from the page by nothing but a
   hairline and made the whole theme read as blank paper.

   Every colour below is a desaturated step off the existing cyan/blue/violet
   ramp. Nothing new is introduced: the brand palette is simply applied instead
   of being held back for buttons. Text tokens keep their AA contrast, measured
   against the new tinted ground rather than against white. */
[data-theme="light"] {
  --bg:          #EEF3FF;   /* tinted ground, was #FFFFFF */
  --bg-alt:      #E2EBFD;
  --surface:     #FFFFFF;   /* cards stay white and now read as raised */
  --surface-2:   #E8F0FF;
  --surface-3:   #D9E5FD;
  /* Hairlines carry the brand hue rather than neutral black. */
  --line:        rgba(46,107,255,.14);
  --line-strong: rgba(46,107,255,.26);
  --fg:          #16203A;
  --fg-strong:   #05070F;
  --fg-muted:    #51608A;   /* 6.2:1 on white, 5.7:1 on --bg */
  --fg-dim:      #5A6478;   /* 5.4:1 on --bg. #7A8499 previously failed AA at 3.8:1 */
  --accent:      #1B5FE0;   /* 5.1:1 on --bg, so small text and numbers pass AA */
  /* Tint surfaces carry more of the gradient than they did on white. */
  --grad-soft:   linear-gradient(135deg, rgba(34,211,238,.24), rgba(124,92,255,.20));
  /* Shadows are blue-black, not grey, so depth agrees with the palette. */
  --shadow-sm:  0 2px 10px rgba(30,60,160,.08);
  --shadow-md:  0 16px 40px -16px rgba(30,60,160,.20);
  --shadow-lg:  0 40px 80px -32px rgba(30,60,160,.26);
  --glow:       0 0 0 1px rgba(46,107,255,.30), 0 18px 50px -20px rgba(46,107,255,.45);
}

/* Alternating bands get a soft wash across the full brand ramp rather than one
   flat grey. Kept very low saturation so body text is unaffected. */
[data-theme="light"] .section--alt {
  background: linear-gradient(135deg, #E9F0FF 0%, #F0EDFF 52%, #E6F7FC 100%);
}
[data-theme="light"] .site-footer {
  background: linear-gradient(135deg, #E9F0FF 0%, #EDEBFE 55%, #E6F7FC 100%);
}
/* The orbs are the main source of colour on the hero. On white they were nearly
   invisible; on the tinted ground they can carry their weight. */
[data-theme="light"] .orb { opacity: .85; filter: blur(90px); }
/* Icon tiles are the most repeated colour element on the site. On white they
   were almost invisible; here they carry a readable slice of the ramp. */
[data-theme="light"] .card-ico { border-color: rgba(46,107,255,.22); box-shadow: 0 6px 16px -8px rgba(46,107,255,.45); }
[data-theme="light"] .eyebrow { border-color: rgba(46,107,255,.22); }
/* Stat bands read as one tinted panel rather than white boxes on white. */
[data-theme="light"] .stat { background: #FFFFFF; }
[data-theme="light"] .stat:hover { background: var(--surface-2); }
[data-theme="light"] .hero { background: radial-gradient(120% 90% at 50% -10%, rgba(46,107,255,.16), transparent 62%), var(--bg); }

/* ---------------------------------------------------- 2. Reset & base --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }

/* Inline icon defaults — keeps icon markup to `<svg class="i" viewBox="0 0 24 24">` */
svg.i { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg.i.solid { fill: currentColor; stroke: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(46,107,255,.32); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 3px solid var(--bg-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ------------------------------------------- 3. Utilities & layout ------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1440px; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 10px; } .gap-md { gap: 18px; } .gap-lg { gap: 32px; }
.wrap { flex-wrap: wrap; }
.mt-lg { margin-top: 44px; }
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Decorative backgrounds */
.bg-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  opacity: .7;
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.orb--cyan   { background: rgba(34,211,238,.20); }
.orb--blue   { background: rgba(46,107,255,.26); }
.orb--violet { background: rgba(124,92,255,.22); }
/* Light-theme orb strength is set with the rest of the light palette, above. */
.section > .container, .hero > .container { position: relative; z-index: 1; }

.divider { height: 1px; background: var(--line); border: 0; }
.rule-glow {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* --------------------------------------------------- 4. Typography ------ */
h1,h2,h3,h4,h5 { font-family: var(--font-display); color: var(--fg-strong); line-height: 1.14; letter-spacing: -.025em; font-weight: 700; }
h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); font-weight: 800; letter-spacing: -.038em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); letter-spacing: -.032em; }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p { color: var(--fg-muted); }
.lead { font-size: clamp(1.02rem, 1.35vw, 1.18rem); color: var(--fg-muted); line-height: 1.72; }
.small { font-size: .875rem; }
.tiny { font-size: .8rem; }
/* Solid, not gradient. A cyan-to-violet fill puts the light end of the ramp at
   1.8:1 on the light theme, which is unreadable. */
.grad-text { color: var(--accent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  padding: 7px 15px 7px 12px; border-radius: var(--r-pill);
  background: var(--grad-soft);
  border: 1px solid var(--line-strong);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px 2px rgba(34,211,238,.8);
}


.section-head { max-width: 720px; margin-bottom: clamp(38px, 4.5vw, 60px); }
.section-head.center { margin-inline: auto; }
.section-head h2 + .lead { margin-top: 16px; }

/* --------------------------------------------- 5. Buttons & pills ------- */
.btn {
  --btn-bg: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: .94rem;
  letter-spacing: -.01em; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--btn-bg); color: var(--fg-strong);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg.arr { transform: translateX(4px); }

.btn--primary {
  background: var(--grad-brand); border-color: transparent; color: #fff;
  box-shadow: 0 12px 30px -12px rgba(46,107,255,.75);
}
.btn--primary:hover { box-shadow: 0 18px 46px -14px rgba(46,107,255,.9); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--brand); }
.btn--light { background: #fff; color: #05070F; border-color: transparent; }
.btn--light:hover { box-shadow: 0 16px 40px -14px rgba(255,255,255,.4); }
.btn--sm { padding: 9px 18px; font-size: .85rem; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: var(--accent); transition: gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { gap: 13px; }


.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-muted);
}
.pill--ok { color: #34D399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: #34D399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ------------------------------------------ 6. Header & navigation ------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-brand); z-index: 200; transition: width .1s linear;
}

.topbar {
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
  font-size: .8rem; color: var(--fg-muted); position: relative; z-index: 101;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 40px; }
.topbar-left { display: flex; align-items: center; gap: 22px; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.topbar a:hover { color: var(--accent); }
.topbar svg { width: 14px; height: 14px; opacity: .8; }
.topbar-right { display: flex; align-items: center; gap: 18px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }

/* Logo: the octagon cut in half and opened, the name sitting in the gap.
   The brackets are SVG so they can carry the gradient; the wordmark stays real
   HTML text so it inherits the theme colour, scales with the type and can be
   selected. The two brackets close back into the whole octagon, which is the
   icon in assets/brand/mark.svg and the favicon. */
/* Size is set once on the lockup so the brackets can be measured in em against
   the wordmark. Change --brand-size alone to scale the whole logo. */
.brand, .brand-lockup {
  display: inline-flex; align-items: center; flex: none;
  font-size: var(--brand-size, 1.4rem);
}
/* Optical, not geometric, and the difference is large on purpose.

   Measured by rasterising the lockup and scanning every row for the closest
   approach between bracket ink and letter ink. With equal margins the left gap
   pinched at 10% of an em wider than the right: the round O curves away from
   the bracket tips exactly where they reach in, while the flat arms of the E
   reach out to meet them. At .19em the two sides pinch within 2% of an em,
   which is under half a pixel at header size.

   Do not "tidy" these into one value, and re-measure if the wordmark, the
   bracket shape or the typeface ever changes. */
.brand-br:first-child { margin-right: .19em; }
.brand-br:last-child  { margin-left: .40em; }
/* .95em puts the brackets a shade taller than the cap height, which reads as
   deliberate. The path spans 58 of the 68 viewBox units, so the visible bracket
   is about .81em and the caps are about .73em. */
.brand-br { width: auto; height: .95em; flex: none; }
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1em;
  letter-spacing: -.01em; color: var(--fg-strong); line-height: 1;
}
/* The wordmark picks the ramp up where the brackets leave it: cyan on the left,
   violet on the right, so the whole lockup reads as one gradient rather than a
   grey word between two coloured marks.

   Guarded by @supports because background-clip:text needs transparent fill, and
   without support that renders an invisible logo. The solid colour above stays
   as the fallback. Both ramps hold their legibility: the dark one keeps a white
   core, and every stop of the light one is dark enough to read on the tinted
   ground. This is the logo, which is one of the three surfaces the gradient is
   allowed on. The no-gradient-on-text rule still holds everywhere else. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand-name {
    background-image: linear-gradient(96deg, #A5EEFF 0%, #FFFFFF 48%, #C9B7FF 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  [data-theme="light"] .brand-name {
    background-image: linear-gradient(96deg, #0E7490 0%, #1B5FE0 52%, #6D28D9 100%);
  }
}


.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 500; font-size: .93rem; color: var(--fg-muted);
  transition: color .2s, background .2s;
}
.nav-link:hover, .nav-link.is-active { color: var(--fg-strong); background: var(--surface-2); }
.nav-link .chev { width: 13px; height: 13px; opacity: .7; transition: transform .25s var(--ease); }
.has-mega:hover .nav-link .chev { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Mega menu */
.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 10px);
  width: min(940px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 26px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  z-index: 120;
}
.has-mega:hover .mega, .has-mega:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.mega::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.mega--wide { width: min(1200px, calc(100vw - 40px)); padding: 24px; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; }
.mega--wide .mega-grid { grid-template-columns: repeat(4, 1fr); gap: 6px 14px; }
.mega--wide .mega-item { padding: 9px 10px; gap: 10px; }
.mega--wide .mega-item .ico { width: 30px; height: 30px; border-radius: 8px; }
.mega--wide .mega-item .ico svg { width: 15px; height: 15px; }
.mega--wide .mega-item strong { font-size: .84rem; }
.mega--wide .mega-item span span { font-size: .73rem; }
.mega-col h5 {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--fg-dim); font-weight: 600; margin: 6px 0 10px; padding-left: 12px;
}
.mega-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-sm);
  transition: background .2s, transform .2s var(--ease);
}
.mega-item:hover { background: var(--surface-2); transform: translateX(3px); }
.mega-item .ico {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line);
  color: var(--accent);
}
.mega-item .ico svg { width: 17px; height: 17px; }
.mega-item strong { display: block; font-family: var(--font-display); font-size: .89rem; font-weight: 600; color: var(--fg-strong); }
.mega-item span { display: block; font-size: .78rem; color: var(--fg-dim); line-height: 1.45; }


.mega-foot {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mega-foot p { font-size: .84rem; }

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--fg-muted);
  transition: color .2s, border-color .2s, transform .3s var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--brand); transform: rotate(18deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }

/* Mobile */
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); place-items: center; }
.nav-toggle svg { width: 20px; height: 20px; }
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw);
  background: var(--bg-alt); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .38s var(--ease);
  z-index: 300; display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-alt); z-index: 2; }
.drawer-body { padding: 18px var(--gutter) 40px; }
.drawer-body .m-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--fg); border-bottom: 1px solid var(--line); width: 100%; text-align: left;
}
.drawer-body .m-link svg { width: 16px; height: 16px; opacity: .6; transition: transform .25s; }
.drawer-body .m-link[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--accent); }
.m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.m-sub > div { overflow: hidden; }
.m-sub.is-open { grid-template-rows: 1fr; }
.m-sub a { display: block; padding: 11px 14px; font-size: .9rem; color: var(--fg-muted); border-left: 2px solid var(--line); margin-left: 4px; }
.m-sub a:hover { color: var(--accent); border-left-color: var(--accent); }
/* group headings inside the drawer sub-lists */
.m-sub a b {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.m-sub a:has(b) { border-left-color: var(--brand); margin-top: 10px; }

.overlay {
  position: fixed; inset: 0; background: rgba(2,4,10,.65); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 290;
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------- 7. Hero & page headers --------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(60px, 8vw, 110px) clamp(70px, 9vw, 130px);
  background: radial-gradient(120% 90% at 50% -10%, rgba(46,107,255,.20), transparent 60%), var(--bg);
}
.hero .orb--blue   { width: 620px; height: 620px; top: -220px; left: -140px; }
.hero .orb--violet { width: 520px; height: 520px; top: -120px; right: -180px; }
.hero .orb--cyan   { width: 400px; height: 400px; bottom: -260px; left: 38%; }

.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(36px, 5vw, 68px); align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { max-width: 560px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-proof { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
/* NOTE: the label selectors below are direct-child (`>`) on purpose. The counter
   markup nests a <span data-count> inside <strong>/<b>, and a descendant
   selector would shrink the number to the label size. */
.hero-proof .item strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--fg-strong); letter-spacing: -.03em; }
.hero-proof .item strong span { font: inherit; color: inherit; letter-spacing: inherit; }
.hero-proof .item > span { font-size: .8rem; color: var(--fg-dim); }

/* Hero visual — glass NOC panel */
.hero-visual { position: relative; }
.glass {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  padding: 20px; overflow: hidden;
  backdrop-filter: blur(20px);
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.10), transparent 42%);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--fg-strong); }
.panel-title svg { width: 16px; height: 16px; color: var(--accent); }
.panel-rows { display: grid; gap: 9px; margin-top: 14px; }
.prow {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid var(--line);
}
.prow .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent); }
.prow .ic svg { width: 14px; height: 14px; }
.prow b { font-family: var(--font-display); font-size: .84rem; font-weight: 600; color: var(--fg-strong); display: block; }
.prow em { font-style: normal; font-size: .74rem; color: var(--fg-dim); }
.prow .val { font-family: var(--font-display); font-size: .82rem; font-weight: 700; color: #34D399; }
.prow .val.warn { color: #FBBF24; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.spark i { width: 4px; border-radius: 2px; background: var(--grad-brand); opacity: .85; animation: bar 2.6s ease-in-out infinite; }
@keyframes bar { 0%,100% { height: 30%; } 50% { height: 100%; } }

/* Inner page header */
.page-head {
  position: relative; overflow: hidden;
  padding-block: clamp(52px, 6.5vw, 92px) clamp(46px, 5.5vw, 78px);
  background: radial-gradient(110% 130% at 15% -20%, rgba(46,107,255,.20), transparent 55%), var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.page-head .orb--violet { width: 460px; height: 460px; top: -180px; right: -140px; }
.page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 900px; }
.page-head .lead { max-width: 700px; margin-top: 18px; }
.crumbs { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--fg-dim); margin-bottom: 20px; }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { width: 13px; height: 13px; opacity: .5; }

/* --------------------------------------- 8. Marquee / logo walls -------- */
.trustbar { padding-block: 34px; border-block: 1px solid var(--line); background: var(--bg-alt); }
.trustbar p { text-align: center; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 22px; }

.marquee { position: relative; overflow: hidden; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-alt), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-alt), transparent); }
.marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee--rev .marquee-track { animation-direction: reverse; animation-duration: 54s; }
@keyframes slide { to { transform: translateX(-50%); } }
/* Vendor logos are plain <img>. Each SVG carries the vendor's brand colour, and
   a CSS filter forces it monochrome until hover, when the filter is dropped and
   the real colour shows through.
   Deliberately NOT CSS mask-image: masks obey the same-origin policy, and a
   file:// page has an opaque origin, so masked logos disappear entirely when
   someone opens a page by double-clicking it instead of serving it.
   Fixed box keeps glyph marks and wordmarks optically level; `.wm` marks are
   text wordmarks, whose cap height is ~72% of their box. */
.logo-mark {
  display: block; flex: none; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .55;
  transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
[data-theme="light"] .logo-mark { filter: grayscale(1) brightness(0); opacity: .5; }
.marquee-track .logo-mark { width: 150px; height: 24px; }
.marquee-track .logo-mark.wm { height: 30px; }
.marquee-track .logo-mark:hover { filter: none; opacity: 1; transform: scale(1.08); }

/* Partner wall grid */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }
.logo-tile {
  aspect-ratio: 16/9; display: grid; place-items: center; padding: 20px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s, transform .3s var(--ease), background .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.logo-tile::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: var(--grad-soft);
}
.logo-tile:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.logo-tile:hover::before { opacity: 1; }
.logo-tile .logo-mark { position: relative; z-index: 1; width: 100%; height: 28px; }
.logo-tile .logo-mark.wm { height: 34px; }
.logo-tile:hover .logo-mark { filter: none; opacity: 1; }
.logo-tile .cap {
  position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
  font-size: .68rem; color: var(--fg-dim); opacity: 0; transition: opacity .3s; z-index: 1;
}
.logo-tile:hover .cap { opacity: 1; }

/* Client name tiles (text-based, no third-party marks) */
.client-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.client-tile {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.client-tile:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.client-tile .mono {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: -.02em;
  color: var(--accent);
}
.client-tile b { display: block; font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--fg-strong); line-height: 1.25; }
.client-tile span { font-size: .74rem; color: var(--fg-dim); }


/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.chip {
  padding: 9px 18px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 500;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-muted);
  transition: all .25s var(--ease);
}
.chip:hover { color: var(--fg-strong); border-color: var(--line-strong); }
.chip.is-active { background: var(--brand); color: #fff; border-color: transparent; }

/* ------------------------------------------------------ 9. Cards -------- */
.card {
  position: relative; padding: 28px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s;
  overflow: hidden; height: 100%;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(46,107,255,.12), transparent 62%);
  transition: opacity .35s; pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .93rem; line-height: 1.66; }

.card-ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--accent);
  margin-bottom: 20px; transition: transform .35s var(--ease), color .35s;
  position: relative; z-index: 1;
}
.card-ico svg { width: 24px; height: 24px; }
.card:hover .card-ico { transform: scale(1.08) rotate(-4deg); }


.card-list { margin-top: 16px; display: grid; gap: 8px; }
.card-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .86rem; color: var(--fg-muted); }
.card-list svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--accent); }

.card .link-arrow { margin-top: 20px; }

.card--num .num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1; margin-bottom: 14px; color: var(--accent);
}
.card--flat { background: transparent; border-color: var(--line); }
.card--glass { background: color-mix(in srgb, var(--surface) 60%, transparent); backdrop-filter: blur(14px); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bento > * { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }

.card--feature {
  display: grid; grid-template-columns: 1fr; gap: 22px; padding: 32px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
}
.card--feature .mini-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 6px; }
.card--feature .mini-stats b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--fg-strong); display: block; letter-spacing: -.03em; }
.card--feature .mini-stats span { font-size: .76rem; color: var(--fg-dim); }

/* Case study card */
.case-card { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; height: 100%; display: flex; flex-direction: column; }
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.case-media { height: 190px; position: relative; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.case-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .4s var(--ease), transform .6s var(--ease); }
.case-card:hover .case-media > img { opacity: .72; transform: scale(1.04); }
.case-media.has-photo::before, .case-media.has-photo::after { display: none; }
.case-media.has-photo { background: #05070F; }
/* Photo cards carry no icon, so the image is the whole subject: show it brighter
   than the icon-over-photo treatment above, which dimmed it for contrast. */
.case-media.has-photo > img { opacity: .88; }
.case-card:hover .case-media.has-photo > img { opacity: 1; }
.case-media::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .8;
}
.case-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 40%, rgba(46,107,255,.30), transparent 70%); }
.case-media svg { position: relative; z-index: 1; width: 54px; height: 54px; color: var(--accent); opacity: .9; }
.case-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.case-body h3 { margin: 12px 0 10px; font-size: 1.15rem; }
.case-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.case-metrics { display: flex; gap: 24px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.case-metrics b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--fg-strong); display: block; letter-spacing: -.03em; }
.case-metrics span { font-size: .72rem; color: var(--fg-dim); }

/* ---------------------------------------------- Services octagon ------
   Eight nodes, because the eight domains in the bento below are the eight of
   okta. One 400-unit viewBox serves every breakpoint: the SVG radii are
   fractions of it, and the pixel sizes below use the same fractions of --s.

   Motion: the orbit rotates, and each node's inner wrapper runs the identical
   animation in reverse, which cancels the rotation so the icons stay upright
   while they travel. No JavaScript is involved in the movement. */
.oct { margin: 0 auto clamp(40px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; }
.oct-stage {
  --s: 460px;
  --r: calc(var(--s) * .37);
  --n: clamp(44px, calc(var(--s) * .135), 62px);
  /* the hub carries two lines of text now, so it needs more room than the .30
     it had when it only held a single word */
  --h: calc(var(--s) * .37);
  position: relative; width: var(--s); height: var(--s); max-width: 100%;
}
.oct-orbit { position: absolute; inset: 0; animation: oct-spin 70s linear infinite; }
.oct:hover .oct-orbit, .oct:focus-within .oct-orbit { animation-play-state: paused; }
@keyframes oct-spin { to { transform: rotate(360deg); } }

.oct-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oct-ring-line { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.oct-spoke {
  stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 3 6;
  opacity: .7; transition: stroke .3s, opacity .3s, stroke-width .3s;
}

.oct-node {
  position: absolute; top: 50%; left: 50%;
  width: var(--n); height: var(--n); margin: calc(var(--n) / -2);
  display: grid; place-items: center;
  /* place on the ring, then un-rotate so the node sits square to the orbit */
  transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -45deg));
}
/* Each layer holds exactly one transform, because an element cannot hold two.
   The node places itself on the ring, the wrapper scales on hover, the face
   inherits the orbit's rotation so the octagon turns on its own axis, and the
   icon counter-rotates so it stays upright while its plate spins under it.
   The glow is a filter rather than a box-shadow: clip-path would cut a shadow
   off at the octagon edge and the ring would never be seen. */
.oct-node-in {
  position: relative;
  width: 100%; height: 100%; display: grid; place-items: center;
  transition: filter .35s, transform .35s var(--ease);
}
/* Colour bloom behind the plate. Sits on the unclipped wrapper so it can spread
   past the octagon instead of being trimmed to it. */
.oct-node-in::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: var(--grad-brand);
  opacity: 0; transform: scale(1);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.oct-node-face {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  color: var(--accent);
  transition: background .35s, color .35s, border-color .35s;
}
/* The plate turns with the orbit. Eight-fold symmetry means a full revolution
   reads as eight quiet clicks rather than one obvious spin. */
.oct-node .i {
  width: 42%; height: 42%;
  animation: oct-spin 70s linear infinite reverse;
}
.oct-node-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.oct-node:hover .oct-node-face,
.oct-node:focus-visible .oct-node-face,
.oct-node.is-active .oct-node-face {
  background: var(--grad-brand); border-color: transparent; color: #fff;
}
.oct-node:hover .oct-node-in,
.oct-node:focus-visible .oct-node-in,
.oct-node.is-active .oct-node-in {
  transform: scale(1.22);
  filter: drop-shadow(0 12px 26px rgba(46,107,255,.6));
}
.oct-node:hover .oct-node-in::after,
.oct-node:focus-visible .oct-node-in::after,
.oct-node.is-active .oct-node-in::after { opacity: .38; transform: scale(1.7); }
.oct-node:focus-visible { outline: none; }
.oct[data-active] .oct-spoke { opacity: .3; }
.oct .oct-spoke.is-lit { stroke: var(--brand); opacity: 1; stroke-width: 2.4; stroke-dasharray: none; }

/* Hub. Static, so the label stays readable while the ring turns. */
.oct-hub {
  position: absolute; top: 50%; left: 50%;
  width: var(--h); height: var(--h); margin: calc(var(--h) / -2);
  display: grid; place-items: center; pointer-events: none;
}
.oct-hub-shape { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 34px rgba(46,107,255,.45)); }
.oct-hub::after {
  content: ""; position: absolute; inset: -9%;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: var(--grad-brand); opacity: .16;
  animation: oct-halo 3.6s ease-in-out infinite;
}
@keyframes oct-halo { 0%,100% { transform: scale(1); opacity: .14; } 50% { transform: scale(1.06); opacity: .26; } }
.oct-hub-text {
  position: relative; z-index: 1; padding: 0 13%;
  text-align: center; font-family: var(--font-display);
  letter-spacing: -.01em; color: #fff;
}
/* The label swap is the only scripted part: text out, text in. The one-liner
   follows a beat later so the two do not move as a single block. */
.oct-hub-label, .oct-hub-line {
  display: block;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.oct-hub-label {
  font-weight: 800; line-height: 1.15;
  font-size: clamp(.72rem, calc(var(--h) * .108), .98rem);
}
.oct-hub-line {
  margin-top: .35em; font-weight: 500; line-height: 1.3;
  font-size: clamp(.55rem, calc(var(--h) * .072), .72rem);
  color: rgba(255,255,255,.82); transition-delay: .04s;
}
.oct-hub-label.is-out { opacity: 0; transform: translateY(-6px) scale(.94); }
.oct-hub-line.is-out  { opacity: 0; transform: translateY(-4px); }

.oct-caption {
  margin-top: clamp(18px, 2.5vw, 28px); max-width: 56ch; text-align: center;
  font-size: .92rem; color: var(--fg-muted); min-height: 3.2em;
  transition: opacity .22s var(--ease);
}
.oct-caption.is-out { opacity: 0; }

@media (max-width: 980px) { .oct-stage { --s: 400px; } }
@media (max-width: 720px) { .oct-stage { --s: 320px; } .oct-caption { font-size: .87rem; } }
@media (max-width: 480px) { .oct-stage { --s: 274px; } }

/* Testimonial */
.quote {
  padding: 32px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); height: 100%; display: flex; flex-direction: column;
  position: relative; transition: border-color .3s, transform .3s var(--ease);
}
.quote:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.quote .qmark { font-family: var(--font-display); font-size: 3.6rem; line-height: .7; color: var(--brand); opacity: .28; margin-bottom: 12px; }
.quote blockquote { font-size: 1rem; line-height: 1.72; color: var(--fg); flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.avatar {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--accent);
}
.avatar svg { width: 20px; height: 20px; }
.quote figcaption b { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--fg-strong); }
.quote figcaption span { font-size: .78rem; color: var(--fg-dim); }
.stars { display: flex; gap: 2px; margin-bottom: 14px; }
.stars svg { width: 15px; height: 15px; color: #FBBF24; }

/* Post card */
.post-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s; height: 100%; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Article covers: a per-topic gradient (--c1/--c2 set inline) over a faint grid,
   so every card is visually distinct without needing photography. */
.post-media {
  height: 168px; position: relative; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(140deg, var(--c1, #16204a), var(--c2, #101830));
}
.post-media::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 70% 20%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 70% 20%, #000, transparent 75%);
}
.post-media::after {
  content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%;
  right: -60px; top: -70px; background: rgba(255,255,255,.10); filter: blur(30px);
}
.post-media svg { position: relative; z-index: 1; width: 46px; height: 46px; color: #fff; opacity: .92; }
.post-media--lg { height: 100%; min-height: 300px; }
.post-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: .76rem; color: var(--fg-dim); margin-bottom: 12px; }
.post-body h3 { font-size: 1.06rem; margin-bottom: 10px; }
.post-body p { font-size: .88rem; flex: 1; }

/* Industry card */
.ind-card {
  position: relative; padding: 26px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); height: 100%;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.ind-card:hover { transform: translateY(-5px); border-color: var(--brand); box-shadow: var(--glow); }
.ind-card .card-ico { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; }
.ind-card .card-ico svg { width: 21px; height: 21px; }
.ind-card h3 { font-size: 1.06rem; }
.ind-card p { font-size: .86rem; }

/* Value / feature row */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.feature-row--rev .feature-media { order: -1; }
.feature-list { display: grid; gap: 20px; margin-top: 30px; }
.feature-list li { display: flex; gap: 16px; align-items: flex-start; }
.feature-list .ic {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line); color: var(--accent);
}
.feature-list .ic svg { width: 19px; height: 19px; }
.feature-list b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--fg-strong); margin-bottom: 4px; }
.feature-list p { font-size: .89rem; }


/* ------------------------------- 10. Tabs, accordion, process ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; padding: 6px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.tab {
  padding: 10px 20px; border-radius: var(--r-pill); font-family: var(--font-display);
  font-size: .88rem; font-weight: 600; color: var(--fg-muted); transition: all .25s var(--ease); white-space: nowrap;
}
.tab:hover { color: var(--fg-strong); }
.tab.is-active { background: var(--brand); color: #fff; }
.tab-panel { display: none; animation: fadeUp .5s var(--ease); }
.tab-panel.is-active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.acc { display: grid; gap: 12px; }
.acc-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color .3s; }
.acc-item.is-open { border-color: var(--line-strong); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; text-align: left; font-family: var(--font-display);
  font-weight: 600; font-size: 1rem; color: var(--fg-strong);
}
.acc-btn .pm { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent); transition: transform .3s var(--ease), background .3s; }
.acc-btn .pm svg { width: 15px; height: 15px; }
.acc-item.is-open .pm { transform: rotate(45deg); background: var(--brand); color: #fff; border-color: transparent; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { padding: 0 24px 22px; font-size: .93rem; }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), var(--line-strong), transparent);
}
.step { position: relative; text-align: center; }
.step .no {
  width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--fg-strong);
  position: relative; z-index: 1; transition: all .35s var(--ease);
}
.step:hover .no { background: var(--brand); color: #fff; border-color: transparent; box-shadow: 0 12px 30px -12px rgba(46,107,255,.55); transform: translateY(-3px); }
.step h4 { margin-bottom: 8px; font-size: 1.05rem; }
.step p { font-size: .87rem; }

/* Timeline */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--accent), var(--brand-violet), transparent); }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
.tl-item .yr { font-family: var(--font-display); font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .05em; }
.tl-item h4 { margin: 5px 0 7px; }
.tl-item p { font-size: .9rem; }


/* ------------------------------------------- 11. Stats & counters ------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { padding: 34px 26px; background: var(--surface); text-align: center; transition: background .35s; position: relative; }
.stat:hover { background: var(--surface-2); }
.stat b {
  display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--accent);
}
.stat b span { font: inherit; color: inherit; letter-spacing: inherit; }
.stat > span { display: block; margin-top: 10px; font-size: .84rem; color: var(--fg-muted); }

/* -------------------------------- 11b. Rhythm breakers ------------------ */
/* Deliberate departures from the eyebrow + heading + card-grid pattern, so the
   page has more than one gear. Use sparingly: one per page at most. */

/* Full-bleed photographic band with an overlaid statement. */
.photo-band {
  position: relative; overflow: hidden; background: #05070F;
  min-height: clamp(340px, 44vw, 540px);
  display: grid; align-items: end;
}
.photo-band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,7,15,.96) 6%, rgba(5,7,15,.62) 52%, rgba(5,7,15,.30) 100%);
}
.photo-band .container { position: relative; z-index: 1; padding-block: clamp(44px, 6vw, 76px); }
.photo-band h2 { color: #fff; max-width: 18ch; }
.photo-band p { color: rgba(255,255,255,.80); max-width: 60ch; margin-top: 16px; }
.photo-band .eyebrow { color: #7FE7F7; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); }
.photo-band .eyebrow::before { background: #7FE7F7; box-shadow: 0 0 12px 2px rgba(127,231,247,.7); }
.photo-credit {
  position: absolute; right: 12px; bottom: 8px; z-index: 2;
  font-size: .64rem; letter-spacing: .04em; color: rgba(255,255,255,.34);
}
.photo-credit a { text-decoration: underline; text-underline-offset: 2px; }

/* Editorial split: real photograph beside text, no card wrapper. */
.split { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 5vw, 64px); }
.split--rev .split-media { order: -1; }
.split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 22px 14px;
  font-size: .78rem; color: rgba(255,255,255,.72);
  background: linear-gradient(to top, rgba(5,7,15,.88), transparent);
}

/* Numbers with no boxes, to interrupt the run of bordered cards. */
.stats--bare { background: none; border: 0; border-radius: 0; gap: clamp(20px, 3vw, 40px); }
.stats--bare .stat { background: none; padding: 0; text-align: left; }
.stats--bare .stat:hover { background: none; }
.stats--bare .stat + .stat { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
.stats--bare .stat b { font-size: clamp(2.4rem, 5vw, 3.6rem); }

/* ---------------------------------------------- 12. CTA & footer -------- */
.cta {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(40px, 5.5vw, 68px);
  background: linear-gradient(135deg, #0C1B4A 0%, #142A6B 45%, #2B1D6B 100%);
  border: 1px solid rgba(255,255,255,.14);
}
[data-theme="light"] .cta { background: linear-gradient(135deg, #0B1B4C, #23206B); }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 100% at 100% 0%, #000, transparent 70%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; max-width: 640px; }
.cta p { color: rgba(255,255,255,.76); max-width: 560px; margin-top: 16px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.cta-grid { display: grid; grid-template-columns: 1.2fr auto; gap: 40px; align-items: center; }

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: clamp(52px, 6vw, 78px) 0; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1.15fr; gap: 40px; }
.footer-brand p { font-size: .9rem; margin: 18px 0 22px; max-width: 320px; }
.f-col h5 { font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 18px; font-weight: 600; }
.f-col ul { display: grid; gap: 11px; }
.f-col a { font-size: .89rem; color: var(--fg-muted); transition: color .2s, padding-left .2s; }
.f-col a:hover { color: var(--accent); padding-left: 4px; }

.f-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; color: var(--fg-muted); }
.f-contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }
[data-theme="light"] .f-contact svg { color: var(--brand-blue); }
.socials { display: flex; gap: 9px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-muted);
  transition: all .28s var(--ease);
}
.socials a svg { width: 16px; height: 16px; }
.socials a:hover { color: #fff; background: var(--brand); border-color: transparent; transform: translateY(-3px); }
.footer-bottom {
  margin-top: 52px; padding-block: 24px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .82rem; color: var(--fg-dim);
}
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--accent); }

.to-top {
  position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: #fff;
  box-shadow: 0 12px 30px -10px rgba(46,107,255,.55); z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 19px; height: 19px; }

/* --------------------------------------------------- 13. Forms ---------- */
.form-card { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-size: .84rem; font-weight: 600; color: var(--fg); }
.field label .req { color: #F87171; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--r-sm);
  background: var(--bg-alt); border: 1px solid var(--line); color: var(--fg);
  font-size: .93rem; transition: border-color .25s, box-shadow .25s, background .25s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397A3C0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); background: var(--surface-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.field .err { font-size: .77rem; color: #F87171; display: none; }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: #F87171; }
.field.is-error .err { display: block; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: .84rem; color: var(--fg-muted); }
.check input { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--brand); }
.form-note { font-size: .8rem; color: var(--fg-dim); margin-top: 14px; }
.form-success {
  display: none; align-items: center; gap: 13px; padding: 16px 20px; border-radius: var(--r-md);
  background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.35); color: #34D399; font-size: .9rem;
}
.form-success.is-shown { display: flex; }
.form-success svg { width: 20px; height: 20px; flex: none; }
.form-error {
  display: none; align-items: center; gap: 13px; padding: 16px 20px; border-radius: var(--r-md);
  background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.35); color: #F87171; font-size: .9rem;
}
.form-error.is-shown { display: flex; }
.form-error svg { width: 20px; height: 20px; flex: none; }
/* #F87171 measures 3.1:1 on the light background, under the 4.5:1 minimum,
   so the light theme uses a darker red. Same rule as the v1.3 contrast pass. */
[data-theme="light"] .form-error { color: #B91C1C; background: rgba(185,28,28,.07); border-color: rgba(185,28,28,.32); }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill anything that is technically in the DOM. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact info blocks */
.info-card { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease); height: 100%; }
.info-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.info-card .card-ico { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.info-card .card-ico svg { width: 20px; height: 20px; }
.info-card h4 { margin-bottom: 8px; }
.info-card p, .info-card a { font-size: .89rem; color: var(--fg-muted); display: block; }
.info-card a:hover { color: var(--accent); }

.map-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); position: relative; min-height: 340px; display: grid; place-items: center; }
.map-frame::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
}
.map-frame .pin { position: relative; z-index: 1; text-align: center; }
.map-frame .pin svg { width: 42px; height: 42px; margin: 0 auto 12px; color: var(--brand); }
/* The frame centres its child so the old placeholder pin sat in the middle. A
   real map has to stretch instead, and sit above the grid pattern drawn by
   .map-frame::before. */
.map-frame { min-height: 420px; }
.map-frame iframe {
  grid-area: 1 / 1; justify-self: stretch; align-self: stretch;
  width: 100%; height: 100%; min-height: 420px;
  border: 0; display: block; position: relative; z-index: 1;
}

/* Job listing */
.job {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  padding: 24px 26px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.job:hover { border-color: var(--brand); transform: translateX(5px); box-shadow: var(--shadow-sm); }
.job h4 { margin-bottom: 8px; }
.job .meta { display: flex; gap: 9px; flex-wrap: wrap; }

/* --------------------------------- 13b. Long-form article / JD pages ---- */
.article { max-width: 780px; margin-inline: auto; }
.article > * + * { margin-top: 1.15em; }
.article h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem); margin-top: 2em; padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article h3 { font-size: 1.12rem; margin-top: 1.7em; }
.article p { font-size: 1.02rem; line-height: 1.82; }
.article strong { color: var(--fg-strong); font-weight: 600; }
.article a:not(.btn):not(.link-arrow) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.article ul, .article ol { display: grid; gap: 11px; margin-top: 1em; }
.article li { display: flex; gap: 13px; font-size: .99rem; line-height: 1.72; color: var(--fg-muted); }
.article ul li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--brand); margin-top: .62em;
}
.article ol { counter-reset: art; }
.article ol li::before {
  counter-increment: art; content: counter(art);
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: .74rem; font-weight: 700;
  font-family: var(--font-display); color: var(--accent);
  background: var(--grad-soft); border: 1px solid var(--line);
}

.article blockquote {
  border-left: 3px solid var(--brand); padding: 6px 0 6px 22px; margin-left: 0;
  color: var(--fg); font-size: 1.06rem; line-height: 1.7;
}
.article code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .88em;
  background: var(--surface-2); border: 1px solid var(--line); padding: 2px 7px; border-radius: 6px;
}
.article-table-wrap { overflow-x: auto; margin-top: 1.4em; }
.article table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 420px; }
.article th, .article td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-family: var(--font-display); font-weight: 600; color: var(--fg-strong); background: var(--surface); }
.article td { color: var(--fg-muted); }

.callout {
  padding: 22px 26px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--brand); margin-top: 1.6em;
}
.callout p { font-size: .96rem; }
.callout p:first-child { margin-top: 0; }

.article-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--fg-dim); }
.article-meta .dot { opacity: .5; }

.article-nav {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line);
}

/* ------------------------------------- 14. Motion & responsive ---------- */
/* Reveal-on-scroll is opt-in and only ever hides content once JS has confirmed
   it is running. The `js` class is set by a tiny inline script in <head>, so if
   the stylesheet loads but the script fails, every section still renders. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal="left"]  { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="zoom"]  { transform: scale(.95); }
.js [data-reveal].is-in   { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 42px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 980px) {
  :root { --header-h: 68px; }
  .split { grid-template-columns: 1fr; }
  .split--rev .split-media { order: 0; }
  .stats--bare { grid-template-columns: repeat(2, 1fr); }
  .stats--bare .stat + .stat { border-left: 0; padding-left: 0; }
  .nav-menu, .nav-actions .btn { display: none; }
  .nav-toggle { display: grid; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento .span-3, .bento .span-4 { grid-column: span 3; }
  .bento .span-6 { grid-column: span 6; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .steps::before { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row--rev .feature-media { order: 0; }
  .cta-grid { grid-template-columns: 1fr; gap: 26px; }
  .topbar-left .hide-md { display: none; }
}
@media (max-width: 720px) {
  .topbar { display: none; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .bento > *, .bento .span-3, .bento .span-4, .bento .span-6 { grid-column: span 6; }
  .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-proof { gap: 20px 30px; }
  .card { padding: 24px; }
  .logo-wall { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .to-top { right: 16px; bottom: 16px; }
  .hide-sm { display: none !important; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero-cta .btn, .cta-actions .btn { width: 100%; }
  .tabs { width: 100%; }
}

/* Print */
@media print {
  .site-header, .topbar, .to-top, .cta, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}