/* =========================================================================
   NEXIM Group — Global Design System
   Apple.com-inspired: large type, generous whitespace, subtle motion,
   translucent sticky nav, scroll-triggered reveals.
   ========================================================================= */

:root {
  /* Brand colors — taken directly from the official NEXIM Group logo:
     Olive (wordmark ink) and Burnt Orange (the "GROUP" text + swoosh mark) */
  --navy: #636B2F;
  --navy-2: #81894D;
  --navy-soft: #8F9760;
  /* Footer accent: the brand olive darkened ~10% (rgb * 0.9) */
  --navy-dark: #59602A;
  --red: #CC5500;
  --red-dark: #9F4200;
  --white: #ffffff;
  --bg-light: #f5f5f7;
  --bg-light-2: #fbfbfd;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --line: #d2d2d7;
  --success: #1c8a4b;
  --warn: #b3701b;

  /* Deep near-black derived from the brand olive's own hue, reserved for
     large hero/dark backgrounds so they read as premium rather than the
     flatter brand olive used for text, buttons and the logo itself. */
  --ink: #14150e;
  --ink-2: #1c1d14;

  /* Light gradient + glass system — soft, desaturated tints of the brand
     olive/burnt-orange (not the full-strength logo colors) used behind
     translucent, blurred "glass" surfaces, in place of the heavier
     dark-olive gradient panels. This is the apple.com-style light/airy
     treatment. */
  --tint-navy: #F1F2E9;
  --tint-navy-2: #E9EBDA;
  --tint-red: #FDF0E8;
  --tint-red-2: #FBE1CE;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.65);

  /* Brand gradients — Olive → Burnt Orange, the two logo colors, for use
     wherever a bold "brand surface" treatment is called for (buttons,
     dark bands, footer). */
  --gradient-brand: linear-gradient(135deg, var(--navy) 0%, var(--red) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--tint-navy) 0%, var(--tint-red) 100%);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1200px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic z-index scale — never use arbitrary values elsewhere */
  --z-sticky: 500;
  --z-banner: 600;
  --z-fab: 650;
  --z-modal: 800;
  --z-toast: 900;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-light-2);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  color: var(--text-secondary);
  max-width: 68ch;
  text-wrap: pretty;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.3s var(--ease);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; }
.nexim-logo { height: 26px; width: auto; overflow: visible; }
.nexim-logo-ink { fill: var(--navy); }
.nexim-logo-accent {
  fill: var(--red);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.45s var(--ease);
}
.brand:hover .nexim-logo-accent,
.brand:focus-visible .nexim-logo-accent { transform: translateX(3%) scaleY(1.04); }

/* Footer logo sits on the same light background, slightly larger */
.footer-brand .nexim-logo { height: 30px; }

/* One-time entrance on first paint — plain CSS, no JS dependency, so it
   always plays even if scripting is blocked or fails to load. */
@media (prefers-reduced-motion: no-preference) {
  .nexim-logo {
    animation: nexim-logo-in 0.7s var(--ease) both;
  }
}
@keyframes nexim-logo-in {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-primary);
  opacity: 0.75;
  transition: opacity 0.2s var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.primary-nav a:hover,
.primary-nav a.is-active { opacity: 1; }
.primary-nav a:hover::after,
.primary-nav a.is-active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  max-height: 0;
  overflow: hidden;
  background: var(--bg-light-2);
  transition: max-height 0.35s var(--ease);
}
.mobile-nav.is-open { max-height: 480px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 24px 20px; }
.mobile-nav li { border-top: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 14px 0; font-size: 17px; }
.mobile-nav a.is-active { color: var(--red); }

/* ---------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: var(--white); }
.btn-primary:hover { background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%); }

.btn-secondary { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); }
.btn-secondary:hover { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%); }

.btn-outline {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--navy);
  border-color: rgba(99, 107, 47, 0.16);
}
.btn-outline:hover { background: var(--glass-bg-strong); border-color: rgba(99, 107, 47, 0.28); }

.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); }

.btn-small { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-light-2);
  color: var(--text-primary);
  padding: 0 24px 120px;
  text-align: center;
}

/* Animated wireframe-globe/network graphic sitting behind the hero photo.
   It's the first element in the section, so normal paint order puts it
   underneath .hero-intro's opaque photo — it only becomes visible where
   .hero-intro's own bottom mask-fade turns transparent, i.e. it genuinely
   sits "behind" the banner image rather than overlapping it. */
.hero-globe {
  position: absolute;
  top: 220px;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.hero-globe-spin { transform-box: view-box; transform-origin: 230px 230px; }
.hero-globe-wire { fill: none; stroke: var(--navy); stroke-width: 1; opacity: 0.4; }
.hero-globe-links { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; opacity: 0.6; stroke-dasharray: 6 10; }
.hero-globe-nodes circle { fill: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .hero-globe-spin { animation: hero-globe-spin 90s linear infinite; }
  .hero-globe-links { animation: hero-globe-flow 3s linear infinite; }
  .hero-globe-nodes circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-globe-pulse 2.6s ease-in-out infinite;
  }
  .hero-globe-nodes circle:nth-child(2) { animation-delay: 0.4s; }
  .hero-globe-nodes circle:nth-child(3) { animation-delay: 0.8s; }
  .hero-globe-nodes circle:nth-child(4) { animation-delay: 1.2s; }
  .hero-globe-nodes circle:nth-child(5) { animation-delay: 1.6s; }
}
@keyframes hero-globe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hero-globe-flow { to { stroke-dashoffset: -32; } }
@keyframes hero-globe-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.45); } }

/* The photo + its "spotlight" gradient live on the .hero-intro-bg layer
   only (see below), so the image visibly ends right after the
   hero-actions buttons rather than running the full height of the
   section (which also holds the partner carousel below). Keeping it on
   its own layer also means its animation never touches the actual
   text — it's a sibling, not an ancestor, of the eyebrow/h1/lede/actions. */
.hero-intro {
  position: relative;
  margin: 0 -24px;
  padding: 140px 24px 72px;
}

/* Background layer: gradient spotlight + photo + soft bottom fade, all
   isolated on their own absolutely-positioned box so its pan/zoom
   animation below only ever moves the photo, never the text stacked on
   top of it. The photo sits behind everything; the radial "spotlight"
   gradient sits on top of it (first layer = topmost in CSS
   multi-backgrounds) — bright and opaque right behind the
   headline/copy column so text stays crisp, fading out toward the
   edges so the photo's color reads through vividly at the margins
   instead of being washed out. Background-position's second value
   (the photo layer) is tuned so her face stays in frame; the "Ken
   Burns" drift below only ever nudges it a few percent so the face
   never drifts out of view. */
.hero-intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 900px 560px at 50% 40%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.88) 32%,
      rgba(241, 242, 233, 0.5) 62%,
      rgba(253, 240, 232, 0.28) 100%),
    url('/assets/images/pexels-darlene-alderson-4389894.jpg');
  background-size: cover, 106%;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

/* A deliberately visible "Ken Burns" pan-and-zoom on the photo layer —
   a wide, clearly-perceptible swing rather than a barely-there drift,
   on a fairly short cycle so the movement reads immediately rather than
   needing sustained attention to notice. The gradient layer's size/
   position (first values) stay fixed throughout; only the photo
   (second values) moves. Respects prefers-reduced-motion via the
   global override at the top of this file. */
@media (prefers-reduced-motion: no-preference) {
  .hero-intro-bg { animation: hero-photo-drift 15s ease-in-out infinite alternate; }
}
@keyframes hero-photo-drift {
  0%   { background-position: center, center 28%; background-size: cover, 104%; }
  100% { background-position: center, center 48%; background-size: cover, 128%; }
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
  animation: float 16s ease-in-out infinite;
}
.hero-orb.orb-red { width: 420px; height: 420px; background: var(--red); top: -140px; right: -100px; }
.hero-orb.orb-blue { width: 380px; height: 380px; background: var(--navy); bottom: -160px; left: -120px; animation-delay: -6s; }

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(20px, -30px, 0) scale(1.06); }
}

.hero-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 20px;
}

.hero h1 {
  position: relative;
  font-size: clamp(36px, 6vw, 72px);
  max-width: 900px;
  margin: 0 auto 20px;
  color: var(--text-primary);
}

.hero p.lede {
  position: relative;
  max-width: 620px;
  margin: 0 auto 36px;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-secondary);
}

.hero-actions {
  position: relative;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-sm {
  padding: 96px 24px 80px;
}
.hero-sm h1 { font-size: clamp(30px, 5vw, 52px); }

/* Wireframe network-sphere graphic sitting behind secondary page heroes
   (About, Services, Partners, Helpdesk, Billing, Contact). mix-blend-mode:
   multiply makes the image's light gradient backdrop drop out against the
   page background so only the dark wireframe/nodes read as visible —
   no alpha-channel editing needed. It's the first element in the section
   so it paints underneath the eyebrow/h1/lede (which are position:relative). */
.hero-sm-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(720px, 68vw);
  height: min(720px, 68vw);
  background-image: url('/assets/images/network-sphere.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-sm-sphere { animation: hero-sm-sphere-drift 20s linear infinite; }
}
@keyframes hero-sm-sphere-drift {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* ---------------------------------------------------------------------
   Hero intro — anthropic.com-style load-in. Every .hero (all pages)
   fades/rises its eyebrow, heading, lede and actions in as a short,
   understated stagger the instant the page is ready, instead of the
   generic scroll-triggered reveal used further down the page. Fully
   visible by default (no-JS / reduced-motion fallback); only animates
   once html.js confirms scripting and main.js flags the hero ready.
   ------------------------------------------------------------------- */
html.js .hero-eyebrow,
html.js .hero .reveal.is-visible {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
}
html.js .hero.is-in-ready .hero-eyebrow,
html.js .hero.is-in-ready .reveal.is-visible {
  animation: hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
html.js .hero.is-in-ready .hero-eyebrow { animation-delay: 0s; }
html.js .hero.is-in-ready h1.reveal.is-visible { animation-delay: 0.14s; }
html.js .hero.is-in-ready p.lede.reveal.is-visible { animation-delay: 0.28s; }
html.js .hero.is-in-ready .hero-actions.reveal.is-visible { animation-delay: 0.42s; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero-eyebrow,
  html.js .hero .reveal.is-visible { opacity: 1; transform: none; animation: none; }
}

/* ---------------------------------------------------------------------
   Hero showcase — homepage-only. The banner "opens up": a container
   expands past full width and settles back to size, then reveals three
   infographic panels in the same space. Progressive enhancement: fully
   visible with no animation until html.js confirms scripting is active,
   and reduced-motion gets an instant, static reveal instead.
   ------------------------------------------------------------------- */
.hero-showcase {
  position: relative;
  max-width: var(--max-width);
  margin: 52px auto 0;
  transform-origin: center;
}
html.js .hero-showcase {
  opacity: 0;
  transform: scaleX(0.86);
}
html.js .hero-showcase.is-ready {
  animation: hero-showcase-in 1.1s cubic-bezier(0.34, 1.4, 0.44, 1) forwards;
  animation-delay: 0.35s;
}
@keyframes hero-showcase-in {
  0% { opacity: 0; transform: scaleX(0.86); }
  55% { opacity: 1; transform: scaleX(1.035); }
  100% { opacity: 1; transform: scaleX(1); }
}

.hero-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .hero-showcase-grid { grid-template-columns: 1fr; }
}

.info-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px 28px;
  text-align: left;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.info-panel:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16, 17, 43, 0.1); }
html.js .info-panel {
  opacity: 0;
  transform: translateY(18px);
}
html.js .info-panel.is-ready {
  animation: info-panel-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes info-panel-in {
  to { opacity: 1; transform: none; }
}
.info-d1 { animation-delay: 1.3s; }
.info-d2 { animation-delay: 1.45s; }
.info-d3 { animation-delay: 1.6s; }

.info-icon { height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.info-icon svg { width: 90%; height: 90%; }
.info-panel h3 { font-size: 18px; margin-bottom: 0; }
.info-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.info-points li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero-showcase,
  html.js .info-panel {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Partner carousel — homepage hero, inspired by inq.inc's rotating
   banner slides. One slide per partner (logo + key courses/hardware +
   CTA); auto-advances, pauses on hover/focus, respects reduced motion.
   Progressive enhancement: the first slide is plain, visible, linked
   content with no JS required — main.js only adds the rotation.
   ------------------------------------------------------------------- */
.partner-carousel {
  position: relative;
  max-width: var(--max-width);
  margin: 52px auto 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
}

.carousel-track {
  position: relative;
  min-height: 320px;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px 44px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.carousel-slide.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (max-width: 720px) {
  .carousel-slide { grid-template-columns: 1fr; text-align: center; padding: 32px 24px 28px; }
}

.carousel-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
}
.carousel-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.carousel-logo img.partner-logo-huawei { max-height: 297px; }

.carousel-copy h3 { margin: 6px 0 0; font-size: 22px; }

.carousel-list {
  list-style: none;
  margin: 14px 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.carousel-list li {
  font-size: 14px;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
}
@media (max-width: 720px) { .carousel-list li { padding-left: 0; } }
.carousel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
@media (max-width: 720px) { .carousel-list li::before { display: none; } }

.carousel-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 0 22px;
}
.carousel-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease);
}
.carousel-arrow:hover { background: var(--white); }

.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(99, 107, 47, 0.22);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease), width 0.2s var(--ease);
}
.carousel-dot.is-active { background: var(--red); width: 22px; border-radius: 5px; }

/* ---------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------- */
.section {
  padding: 100px 24px;
}
.section-tight { padding: 60px 24px; }
.section-alt { background: var(--bg-light); }
.section-dark { background: linear-gradient(120deg, var(--navy-dark) 0%, var(--ink) 48%, var(--red-dark) 100%); color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.7); }

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 { font-size: clamp(28px, 4vw, 44px); }
.section-head p { font-size: 18px; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

/* Pill-style category tag — used only where a section is one of several
   genuinely distinct, named offerings (e.g. the three services), so it
   carries real wayfinding value rather than acting as decorative
   scaffolding on every section. */
.tag-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(204, 85, 0, 0.1);
  color: var(--red-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.tag-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.section-dark .tag-label,
.hero .tag-label {
  background: rgba(204, 85, 0, 0.18);
  color: #ffb37a;
}

/* ---------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------- */
/* Reveal-on-scroll is a progressive enhancement: content is fully visible
   by default so it never ships blank to no-JS browsers, print, headless
   renderers, or a tab that's backgrounded when the observer would fire.
   main.js adds `js` to <html> as its first action; only then do reveals
   start hidden, ready to be animated in by IntersectionObserver. */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transition: opacity 0.3s linear; transform: none; }
}

/* ---------------------------------------------------------------------
   Grids & cards
   ------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(16, 17, 43, 0.08);
  border-color: transparent;
}
a.card { display: block; }

/* Cursor-aware glow — a soft light that tracks the pointer, set via
   --mx/--my custom properties from main.js. Purely decorative, disabled
   entirely for reduced-motion and on touch devices (no hover). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card {
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(216, 50, 65, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
  }
  .card:hover::before { opacity: 1; }
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 24px; height: 24px; }

.card h3 { font-size: 20px; margin-bottom: 8px; }
.card p { margin-bottom: 0; font-size: 15px; }

/* ---------------------------------------------------------------------
   Service cards — animated illustration panels for the homepage's three
   practice areas (IT infrastructure, cyber security, business solutions).
   Motion is small-amplitude and continuous (breathing/flowing, not
   attention-grabbing), and fully disabled under reduced motion.
   ------------------------------------------------------------------- */
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16, 17, 43, 0.1); }
.service-visual {
  height: 160px;
  background: linear-gradient(135deg, var(--tint-navy) 0%, #ffffff 55%, var(--tint-red) 130%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-visual svg { width: 72%; height: 72%; }
.service-body { padding: 26px 30px 30px; }
.service-body h3 { font-size: 20px; margin-bottom: 8px; }
.service-body p { margin-bottom: 0; font-size: 15px; }
.service-body .card-link { margin-top: 14px; }

.d1 { animation-delay: 0.15s; }
.d2 { animation-delay: 0.3s; }
.d3 { animation-delay: 0.45s; }
.d4 { animation-delay: 0.6s; }

@media (prefers-reduced-motion: no-preference) {
  .viz-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: viz-pulse 2.6s ease-in-out infinite;
  }
  .viz-flow {
    stroke-dasharray: 10 140;
    animation: viz-flow 3.4s linear infinite;
  }
  .viz-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: viz-ring 2.8s ease-out infinite;
  }
  .viz-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: viz-bar 3s ease-in-out infinite;
  }
}
@keyframes viz-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes viz-flow {
  to { stroke-dashoffset: -300; }
}
@keyframes viz-ring {
  0% { opacity: 0.55; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes viz-bar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.85); }
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
}

/* Dark cards (for use inside .section-dark) */
.card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 32px;
}
.card-dark h3 { color: var(--white); }
.card-dark p { color: rgba(255,255,255,0.68); }

/* ---------------------------------------------------------------------
   Credentials strip — a quiet, editorial statement of trust markers.
   Deliberately avoids the big-number/small-label "hero metric" pattern:
   these are qualifications, not invented statistics.
   ------------------------------------------------------------------- */
.credentials-strip { padding: 56px 24px; }
.credentials-row {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}
.credentials-row p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.credentials-row .divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.22);
}
@media (max-width: 700px) {
  .credentials-row .divider { display: none; }
  .credentials-row { flex-direction: column; gap: 14px; }
}

/* ---------------------------------------------------------------------
   Partner badges — real partner logos on a clean white surface, so each
   brand's own colors (never altered) stay true and simply pop.
   ------------------------------------------------------------------- */
.partner-badge {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  text-align: left;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.partner-badge:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(16,17,43,0.08); }
.partner-badge .logo-frame {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: 18px;
}
.partner-badge .logo-frame.logo-frame-huawei {
  height: 112px;
}
.partner-badge .logo-frame.logo-frame-huawei img {
  max-height: 112px;
}
.partner-badge .logo-frame img {
  max-height: 100%;
  max-width: 168px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner-badge .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 18px;
}
.partner-badge .tier {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  margin-bottom: 10px;
}

.partner-downloads {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.partner-downloads a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.2s var(--ease);
}
.partner-downloads a:hover { color: var(--red); }
.partner-downloads svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Split / feature rows (Apple-style alternating layout)
   ------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}
.split.reverse .split-media { order: 2; }
.split-media {
  border-radius: var(--radius-lg);
  min-height: 340px;
  background: linear-gradient(135deg, var(--tint-navy) 0%, #ffffff 45%, var(--tint-red) 130%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-media svg { width: 55%; height: 55%; }
.split h3 { font-size: clamp(24px, 3vw, 34px); }
@media (max-width: 860px) {
  .split, .split.reverse .split-media { grid-template-columns: 1fr; order: 0; }
  .split { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------- */
.form-grid { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 15px;
  font-family: inherit;
  background: var(--white);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(16,17,43,0.08);
}
textarea { resize: vertical; min-height: 140px; }

.field-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Honeypot field — hidden from real users, visible to bots that ignore CSS */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 620px;
  margin: 0 auto;
}

.form-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 18px;
}

.alert {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}
.alert-success { background: #e7f6ed; color: var(--success); border: 1px solid #bfe8cd; }
.alert-error { background: #fdecee; color: var(--red-dark); border: 1px solid #f7c6cd; }

/* ---------------------------------------------------------------------
   Email OTP verification panel — the "second factor" step shown after a
   public form is submitted, before it's actually written/forwarded.
   ------------------------------------------------------------------- */
.form-grid.is-locked { opacity: 0.55; pointer-events: none; }

.otp-panel {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}
.otp-copy { font-size: 14px; color: var(--text-secondary); margin-bottom: 14px; }
.otp-row { display: flex; gap: 10px; align-items: stretch; }
.otp-row .btn { flex: 1; white-space: nowrap; }
.otp-input {
  flex: 0 0 150px;
  text-align: center;
  letter-spacing: 6px;
  font-size: 20px;
  font-weight: 700;
}
@media (max-width: 480px) {
  .otp-row { flex-direction: column; }
  .otp-input { flex: none; }
}
.otp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover { color: var(--red); }
.link-button:disabled { color: var(--text-secondary); cursor: not-allowed; text-decoration: none; }

/* ---------------------------------------------------------------------
   Portal panels (Helpdesk / Billing)
   ------------------------------------------------------------------- */
.portal-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (max-width: 900px) { .portal-hero { grid-template-columns: 1fr; } }

.status-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
}
.status-card + .status-card { margin-top: 18px; }
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.status-row:first-of-type { border-top: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.pill-ok { background: #e7f6ed; color: var(--success); }
.pill-warn { background: #fdf3e3; color: var(--warn); }
.pill-info { background: #eaeefe; color: #3654ff; }

/* ---------------------------------------------------------------------
   Table
   ------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { background: var(--bg-light); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------
   CTA band
   ------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--tint-navy) 0%, #ffffff 45%, var(--tint-red) 130%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.22;
  pointer-events: none;
}
.cta-band::before { width: 260px; height: 260px; background: var(--red); top: -90px; right: -60px; }
.cta-band::after { width: 220px; height: 220px; background: var(--navy); bottom: -100px; left: -60px; }
.cta-band h2 { position: relative; font-size: clamp(26px, 3.4vw, 38px); color: var(--text-primary); }
.cta-band p { position: relative; color: var(--text-secondary); max-width: 520px; margin: 0 auto 28px; }
.cta-band .btn { position: relative; }

/* ---------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--ink) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 24px 32px;
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

/* Footer sits on a dark navy field — the logo's navy ink swaps to white
   so the wordmark stays legible; the red accent stroke is unchanged. */
.footer-brand .nexim-logo-ink { fill: var(--white); }

.footer-tagline { margin-top: 16px; font-size: 14px; max-width: 260px; color: rgba(255, 255, 255, 0.6); }
.footer-accreditation {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 8px 14px 8px 8px;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.footer-accreditation img { display: block; width: 40px; height: 34px; flex-shrink: 0; }
.footer-accreditation span { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-social a:hover { background: var(--red); border-color: var(--red); color: var(--white); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }

/* Light-background variant of the same social icon row, used on Contact. */
.social-links { display: flex; gap: 10px; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tint-navy);
  color: var(--navy);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.social-links a:hover { background: var(--red); color: var(--white); transform: translateY(-2px); }
.social-links svg { width: 18px; height: 18px; }

.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
.footer-col a { color: rgba(255, 255, 255, 0.82); }
.footer-col a:hover { color: #ff8f9a; }
.footer-contact li { color: rgba(255, 255, 255, 0.6); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-legal a { color: rgba(255, 255, 255, 0.5); }
.footer-legal a:hover { color: #ff8f9a; }

/* ---------------------------------------------------------------------
   Misc utilities
   ------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-56 { margin-top: 56px; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-16 { margin-bottom: 16px; }
.max-w-760 { max-width: 760px; margin-left: auto; margin-right: auto; }
.max-w-900 { max-width: 900px; margin-left: auto; margin-right: auto; }
.form-panel.flush { margin: 0; }
.panel-title { font-size: 24px; }
.status-card h3 { font-size: 17px; margin-bottom: 14px; }
.muted { color: var(--text-secondary); }

@media (min-width: 861px) {
  .nav-toggle { display: none; }
}
@media (max-width: 860px) {
  .primary-nav, .nav-actions .btn { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------------------------------------------------------------------
   Scroll progress bar
   ------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: var(--z-fab);
  transform: scaleX(0);
  transform-origin: left;
  background: var(--red);
  pointer-events: none;
}
html.js .scroll-progress { transition: transform 0.1s linear; }

/* ---------------------------------------------------------------------
   Back to top
   ------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-fab);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(16,17,43,0.14);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.2s var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { border-color: var(--navy); }
.back-to-top svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------
   Cookie / privacy notice
   ------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-banner);
  max-width: 560px;
  margin: 0 auto;
  background: var(--navy);
  color: rgba(255,255,255,0.9);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: 0 20px 50px rgba(16,17,43,0.3);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-banner p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.78); flex: 1 1 260px; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; }

/* ---------------------------------------------------------------------
   FAQ accordion (native <details>/<summary>)
   ------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--navy);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 10px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item .faq-answer { padding: 0 4px 20px; }
.faq-item .faq-answer p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer {
    animation: faq-in 0.25s var(--ease) both;
  }
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}