/* ============================================================
   STYLE.CSS — Gatistavam Softech Design System Foundation
   Premium dark AI-agency system (Stripe / Linear / Vercel tier)

   Contents:
     01. Design tokens (CSS variables)
     02. Font faces
     03. Reset & base
     04. Accessibility
     05. Layout: container, section, 12-col grid
     06. Typography system
     07. Buttons
     08. Glass cards
     09. Badges & eyebrows
     10. Effects: glows, dividers, scrollbar, selection

   Naming: BEM (block__element--modifier)
   Theme: dark (default and only theme)
   ============================================================ */

/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

:root {
  /* ---------- Color: core palette ---------- */
  --clr-bg:             #f5f7fc;   /* page background — soft light grey   */
  --clr-bg-deep:        #e9edf6;   /* footer / recessed areas             */
  --clr-surface-1:      #ffffff;   /* raised section background           */
  --clr-surface-2:      #ffffff;   /* cards, panels                       */
  --clr-surface-3:      #eef2fa;   /* hover / active surface              */

  /* ---------- Color: brand ---------- */
  --clr-primary:        #6d5ef0;   /* electric violet                     */
  --clr-primary-strong: #7c6cff;
  --clr-primary-soft:   #a89cff;
  --clr-accent:         #377dff;   /* signal blue                         */
  --clr-accent-soft:    #8db4ff;
  --clr-cyan:           #56ccf2;   /* data highlights                     */

  /* ---------- Color: text ---------- */
  --clr-text:           #141723;   /* headings, primary copy              */
  --clr-text-body:      #3c4256;   /* body copy                           */
  --clr-text-muted:     #656c82;   /* captions, meta                      */
  --clr-text-faint:     #98a0b6;   /* disabled, placeholders              */

  /* ---------- Color: semantic ---------- */
  --clr-success:        #34d399;
  --clr-warning:        #fbbf24;
  --clr-danger:         #f4586f;
  --clr-info:           var(--clr-accent);

  /* ---------- Color: categorical palette ----------
     Sampled from the hexagon network graphic. Use for
     per-category accents: card icons, tags, node dots.  */
  --clr-cat-teal:       #1ca9c9;   /* folder node   */
  --clr-cat-purple:     #8e2d8c;   /* globe node    */
  --clr-cat-green:      #7cb342;   /* phone node    */
  --clr-cat-red:        #ee4b4b;   /* laptop node   */
  --clr-cat-orange:     #ef9a1c;   /* team node     */
  --clr-cat-indigo:     #3b4ca0;   /* gears node    */
  --clr-cat-pink:       #d81e6a;   /* buildings node */

  /* ---------- Color: lines & fills ---------- */
  --clr-border:         rgba(20, 24, 45, 0.12);
  --clr-border-strong:  rgba(20, 24, 45, 0.22);
  --clr-border-glow:    rgba(124, 108, 255, 0.45);
  --clr-fill-ghost:     rgba(15, 20, 40, 0.03);
  --clr-fill-hover:     rgba(15, 20, 40, 0.06);

  /* ---------- Gradients ---------- */
  --grad-primary:       linear-gradient(135deg, #7c6cff 0%, #377dff 100%);
  --grad-primary-hover: linear-gradient(135deg, #8d7eff 0%, #639aff 100%);
  --grad-text:          linear-gradient(92deg, #6d5ef0 0%, #377dff 100%);
  --grad-text-accent:   linear-gradient(92deg, #8d7eff 0%, #56ccf2 100%);
  --grad-border:        linear-gradient(135deg, rgba(124,108,255,.55), rgba(55, 125, 255,.12) 45%, rgba(86,204,242,.35));
  --grad-hero-glow:     radial-gradient(ellipse at center, rgba(109, 94, 240, 0.22) 0%, transparent 65%);
  --grad-surface:       linear-gradient(180deg, rgba(20,24,45,0.015) 0%, rgba(20,24,45,0.04) 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* Type scale — fluid, 1.25 ratio anchored at 16px */
  --fs-display:   clamp(2.875rem, 2rem + 4.4vw, 5.25rem);   /* hero H1        */
  --fs-h1:        clamp(2.375rem, 1.8rem + 2.9vw, 4rem);    /* page titles    */
  --fs-h2:        clamp(1.5rem, 1.15rem + 1.1vw, 2rem);     /* section titles */
  --fs-h3:        clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --fs-h4:        1.25rem;
  --fs-lead:      1.125rem;                                  /* intro copy    */
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-caption:   0.75rem;

  --lh-display:   1.04;
  --lh-heading:   1.15;
  --lh-body:      1.65;

  --ls-tight:     -0.03em;
  --ls-wide:      0.14em;    /* eyebrows / labels */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:  0.25rem;    /*  4px */
  --space-2:  0.5rem;     /*  8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */

  /* Section rhythm */
  --section-pad:      clamp(2.75rem, 2.25rem + 2.5vw, 5rem);
  --section-gap-head: clamp(2.5rem, 2rem + 2vw, 4rem);   /* heading → content */

  /* ---------- Containers ---------- */
  --container-max:    75rem;      /* 1200px — main content     */
  --container-wide:   85rem;      /* 1360px — full-bleed cards */
  --container-narrow: 46rem;      /* 736px  — prose, forms     */
  --container-pad:    1.25rem;

  /* ---------- Grid ---------- */
  --grid-cols: 12;
  --grid-gap:  clamp(1rem, 0.8rem + 1vw, 1.75rem);

  /* ---------- Border radius ---------- */
  --radius-xs:   0.375rem;   /*  6px — chips, code           */
  --radius-sm:   0.625rem;   /* 10px — buttons, inputs       */
  --radius-md:   1rem;       /* 16px — cards                 */
  --radius-lg:   1.5rem;     /* 24px — panels, media         */
  --radius-xl:   2rem;       /* 32px — hero frames           */
  --radius-full: 999px;      /* pills, avatars               */

  /* ---------- Shadows ---------- */
  --shadow-sm:   0 1px 2px rgba(20, 24, 45, 0.08);
  --shadow-md:   0 6px 24px rgba(20, 24, 45, 0.10);
  --shadow-lg:   0 24px 64px rgba(20, 24, 45, 0.14);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
                 0 12px 40px rgba(20, 24, 45, 0.10);

  /* ---------- Glow effects ---------- */
  --glow-primary:   0 0 24px rgba(124, 108, 255, 0.45), 0 0 64px rgba(124, 108, 255, 0.18);
  --glow-primary-lg:0 0 40px rgba(124, 108, 255, 0.55), 0 0 120px rgba(109, 94, 240, 0.25);
  --glow-accent:    0 0 24px rgba(55, 125, 255, 0.40), 0 0 64px rgba(55, 125, 255, 0.15);
  --glow-cyan:      0 0 20px rgba(86, 204, 242, 0.35);
  --glow-text:      0 0 32px rgba(168, 156, 255, 0.35);

  /* ---------- Glass ---------- */
  --glass-bg:       rgba(255, 255, 255, 0.65);
  --glass-bg-heavy: rgba(255, 255, 255, 0.82);
  --glass-blur:     16px;
  --glass-border:   rgba(20, 24, 45, 0.10);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      180ms;
  --dur-med:       320ms;
  --dur-slow:      600ms;

  /* ---------- Z-index scale ---------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    50;
  --z-nav:       100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     1100;
}

/* ============================================================
   02. FONT FACES — self-hosted (drop .woff2 into /assets/fonts)
   Falls back to system stack until files are added.
   ============================================================ */

/*
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
*/

/* ============================================================
   03. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

ul,
ol {
  list-style: none;
}

/* ============================================================
   04. ACCESSIBILITY
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ============================================================
   05. LAYOUT — container, section, grid
   ============================================================ */

.container {
  width: 100%;
  max-width: none;              /* full-width edge-to-edge — no centred column */
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide   { max-width: none; }
/* Narrow stays capped + centred: it's for prose/forms where line length matters */
.container--narrow { max-width: calc(var(--container-narrow) + var(--container-pad) * 2); }

.section {
  position: relative;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--clr-border);   /* divider between sections */
}

.section--flush   { padding-block: 0; }
.section--raised  { background: var(--clr-surface-1); }

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid__col-2  { grid-column: span 2; }
.grid__col-3  { grid-column: span 3; }
.grid__col-4  { grid-column: span 4; }
.grid__col-5  { grid-column: span 5; }
.grid__col-6  { grid-column: span 6; }
.grid__col-7  { grid-column: span 7; }
.grid__col-8  { grid-column: span 8; }
.grid__col-12 { grid-column: span 12; }

/* Auto-fit card row (services, projects) */
.grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--grid-gap);
}

/* ============================================================
   06. TYPOGRAPHY SYSTEM
   ============================================================ */

.heading {
  font-family: var(--font-display);
  color: var(--clr-text);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.heading--display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
}

.heading--h1 { font-size: var(--fs-h1); }
.heading--h2 { font-size: var(--fs-h2); }
.heading--h3 { font-size: var(--fs-h3); }
.heading--h4 { font-size: var(--fs-h4); }

.text--lead {
  font-size: var(--fs-lead);
  color: var(--clr-text-body);
}

.text--small   { font-size: var(--fs-small); }
.text--caption { font-size: var(--fs-caption); }
.text--muted   { color: var(--clr-text-muted); }
.text--mono    { font-family: var(--font-mono); }

/* Gradient headline word — e.g. "Future World" */
.text--gradient {
  background: var(--grad-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text--gradient-soft {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   07. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;                 /* ≥44px touch target */
  padding: 0.75rem 1.625rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  /* `transform` is intentionally omitted — GSAP owns it for the magnetic
     hover (js/animations.js). A CSS transition here would rubber-band
     against the per-frame quickTo updates. */
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Tap feedback on touch (magnetic hover is disabled there) */
.btn:active { transform: scale(0.97); }

/* Primary — gradient + glow */
.btn--primary {
  background: var(--grad-primary);
  color: #ffffff;
  box-shadow: var(--glow-primary);
}

.btn--primary:hover {
  background: var(--grad-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--glow-primary-lg);
}

/* Secondary — outlined glass */
.btn--secondary {
  background: var(--clr-fill-ghost);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  backdrop-filter: blur(8px);
}

.btn--secondary:hover {
  background: var(--clr-fill-hover);
  border-color: var(--clr-border-strong);
  transform: translateY(-2px);
}

/* Ghost — text only */
.btn--ghost {
  padding-inline: var(--space-3);
  color: var(--clr-text-muted);
}

.btn--ghost:hover { color: var(--clr-text); }

/* Sizes */
.btn--lg {
  min-height: 3.25rem;
  padding: 1rem 2.25rem;
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
}

.btn--sm {
  min-height: 2.25rem;
  padding: 0.5rem 1.125rem;
  font-size: var(--fs-caption);
}

/* Icon affordance — arrow slides on hover */
.btn__icon {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(4px); }

/* ============================================================
   08. GLASS CARDS
   ============================================================ */

.card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--clr-border-glow);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

/* Heavier, opaque variant (over imagery) */
.card--solid {
  background: var(--glass-bg-heavy);
}

/* Gradient-border premium variant */
.card--gradient-border {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--clr-surface-2), var(--clr-surface-2)) padding-box,
    var(--grad-border) border-box;
}

/* Non-interactive card */
.card--static:hover {
  transform: none;
  border-color: var(--glass-border);
  box-shadow: var(--shadow-card);
}

/* Card internals */
.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--grad-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-primary-soft);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  margin-bottom: var(--space-2);
}

.card__text {
  font-size: var(--fs-small);
  color: var(--clr-text-muted);
}

/* ============================================================
   09. BADGES & EYEBROWS
   ============================================================ */

/* Pill badge — e.g. "● AI-POWERED INNOVATION" */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  background: var(--clr-fill-ghost);
  border: 1px solid var(--clr-border);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-text-body);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--clr-primary-soft);
  box-shadow: var(--glow-primary);
}

/* Section eyebrow — e.g. "WHAT WE DO" */
.eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

/* ============================================================
   10. EFFECTS — glows, dividers, scrollbar, selection
   ============================================================ */

/* Ambient glow orb (position with inline-free utility wrappers) */
.glow-orb {
  position: absolute;
  z-index: var(--z-below);
  width: 40rem;
  height: 40rem;
  border-radius: var(--radius-full);
  background: var(--grad-hero-glow);
  pointer-events: none;
  filter: blur(40px);
}

.glow-orb--accent {
  background: radial-gradient(ellipse at center, rgba(55, 125, 255, 0.18) 0%, transparent 65%);
}

/* Hairline divider */
.divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--clr-border-strong), transparent);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb {
  background: var(--clr-surface-3);
  border-radius: var(--radius-full);
  border: 2px solid var(--clr-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* Text selection */
::selection {
  background: rgba(124, 108, 255, 0.35);
  color: var(--clr-text);
}

/* ============================================================
   11. HEADER / NAVIGATION
   ============================================================ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    backdrop-filter var(--dur-med) var(--ease-out);
}

/* Scroll active state — glass condenses in */
.header--scrolled {
  background: var(--glass-bg-heavy);
  border-bottom-color: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 4.75rem;
  transition: height var(--dur-med) var(--ease-out);
}

.header--scrolled .nav { height: 4rem; }

/* ---------- Logo ---------- */

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav__logo-text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: var(--clr-text);
}

/* ---------- Menu ---------- */

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link:hover { color: var(--clr-text); }

/* Active underline */
.nav__link::after {
  content: '';
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.nav__link--active {
  color: var(--clr-text);
}

.nav__link--active::after { transform: scaleX(1); }

/* ---------- Dropdown ---------- */

.nav__item--dropdown { position: relative; }

.nav__chevron {
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__item--dropdown.is-open .nav__chevron { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: var(--space-2);
  min-width: 14.5rem;
  padding: var(--space-2);
  background: var(--glass-bg-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility var(--dur-fast);
}

.nav__item--dropdown.is-open .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) {
  .nav__item--dropdown:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.nav__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--clr-text-muted);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.nav__dropdown-link:hover {
  background: var(--clr-fill-hover);
  color: var(--clr-text);
}

/* ---------- Actions ---------- */

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* ---------- Animated hamburger (hidden on desktop) ---------- */

.nav__burger {
  display: none;
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-fill-ghost);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav__burger-line {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--clr-text);
  transition:
    transform var(--dur-med) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.nav__burger.is-active .nav__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__burger.is-active .nav__burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__burger.is-active .nav__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   12. HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 7.5rem var(--space-12);
  overflow: hidden;
}

/* Ambient glows */
.hero__glow {
  position: absolute;
  z-index: var(--z-below);
  border-radius: var(--radius-full);
  pointer-events: none;
  /* no filter: the radial gradients are already soft — blur() here
     is invisible but extremely expensive to composite */
}

.hero__glow--primary {
  top: -20%;
  right: -10%;
  width: 55rem;
  height: 55rem;
  background: radial-gradient(ellipse at center, rgba(109, 94, 240, 0.20) 0%, transparent 62%);
}

.hero__glow--accent {
  bottom: -30%;
  left: -15%;
  width: 45rem;
  height: 45rem;
  background: radial-gradient(ellipse at center, rgba(55, 125, 255, 0.12) 0%, transparent 62%);
}

/* Interactive particles layer */
.hero__particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 15rem);
  align-items: center;
  gap: var(--space-12);
}

/* ---------- Left: content ---------- */

/* Tuned for legibility over the light, animated pastel background.
   Scoped to the hero so the rest of the site keeps the base palette. */
.hero {
  --clr-text-muted: #454b60;   /* deeper than base #656c82 for pastel contrast */
  --clr-text-faint: #656c82;   /* deeper than base #98a0b6 so trust logos read */
}

/* Soft light halo lifts text off the moving mesh without a flat overlay */
.hero__title,
.hero__desc {
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(255, 255, 255, 0.65);
}

.hero__badge { margin-bottom: var(--space-6); }

.hero__title { margin-bottom: var(--space-6); }

/* "Future World" — solid blue instead of the shared violet gradient */
.hero__title .text--gradient {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--clr-accent);
}

.hero__desc {
  max-width: 32rem;
  margin-bottom: var(--space-8);
  color: var(--clr-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* Rating */
.hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.hero__stars {
  display: inline-flex;
  gap: 2px;
}

.hero__rating-score { color: var(--clr-text); }

/* Trusted companies */
.hero__trust-label { margin-bottom: var(--space-4); }

.hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

.hero__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--clr-text-faint);
  transition: color var(--dur-fast) var(--ease-out);
  cursor: default;
}

.hero__logo:hover { color: var(--clr-text-body); }

/* Stat row */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  margin-top: var(--space-10);
  padding: var(--space-6);
  border: 1px solid var(--clr-border);
  border-radius: 1rem;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--clr-border);
}

/* no separator at the start of each row (4-column layout) */
.hero-stat:nth-child(4n + 1) {
  padding-left: 0;
  border-left: 0;
}

/* Filled boxes — each stat in its own logo-palette color, white icon */
.hero-stat:nth-child(1) { --ic: var(--clr-cat-purple); }
.hero-stat:nth-child(2) { --ic: var(--clr-cat-pink); }
.hero-stat:nth-child(3) { --ic: var(--clr-cat-orange); }
.hero-stat:nth-child(4) { --ic: var(--clr-cat-teal); }

.hero-stat__icon {
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    180deg,
    var(--ic, var(--clr-primary)) 0%,
    color-mix(in srgb, var(--ic, var(--clr-primary)) 80%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--ic, var(--clr-primary)) 55%, transparent);
  color: #ffffff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ic, var(--clr-primary)) 34%, transparent);
}

.hero-stat__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.hero-stat__value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--clr-text);
}

.hero-stat__label {
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted);
}

/* ---------- Right: visual ---------- */

.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}

.hero__art {
  width: 100%;
  height: 100%;
}

/* ---------- Workflow automation canvas ---------- */
.wfx-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* nodes — n8n-style cards with a palette category accent */
.wfx-body {
  fill: #ffffff;
  stroke: var(--wfx-accent, #b3b9c7);
  stroke-width: 2.5;
}
.wfx-node {
  --wfx-accent: #8a8fad;
  filter:
    drop-shadow(0 6px 14px rgba(20, 24, 45, 0.12))
    drop-shadow(0 0 7px var(--wfx-glow, rgba(140, 155, 255, 0.22)));
}

/* n8n node category colours — mapped to the brand palette */
.wfx-node--violet { --wfx-glow: rgba(109,  94, 240, 0.34); }
.wfx-node--blue   { --wfx-glow: rgba( 55, 125, 255, 0.34); }
.wfx-node--cyan   { --wfx-glow: rgba( 86, 204, 242, 0.36); }
.wfx-node--teal   { --wfx-glow: rgba( 28, 169, 201, 0.34); }
.wfx-node--green  { --wfx-glow: rgba(124, 179,  66, 0.34); }
.wfx-node--orange { --wfx-glow: rgba(239, 154,  28, 0.36); }
.wfx-node--red    { --wfx-glow: rgba(238,  75,  75, 0.32); }
.wfx-node--purple { --wfx-glow: rgba(142,  45, 140, 0.32); }
.wfx-node--indigo { --wfx-glow: rgba( 59,  76, 160, 0.32); }
.wfx-node--pink   { --wfx-glow: rgba(216,  30, 106, 0.34); }
.wfx-title { font-family: var(--font-body); font-weight: 700; font-size: 19px; fill: var(--clr-text-muted); }
.wfx-sub   { font-family: var(--font-body); font-weight: 400; font-size: 15px; fill: #656c82; }
.wfx-check { fill: none; stroke: #32ff7e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* black data connections */
.wfx-lines path {
  fill: none;
  stroke: #14151a;
  stroke-width: 2.2;
  opacity: 0.9;
  filter: drop-shadow(0 0 1.5px rgba(20, 24, 45, 0.18));
}
/* AI tool attachments — muted solid */
.wfx-tool {
  fill: none;
  stroke: rgba(180, 150, 255, 0.55);
  stroke-width: 2;
}

/* labels */
.wfx-item   { font-family: var(--font-body); font-weight: 500; font-size: 15px; fill: #14151a; }
.wfx-pill   { fill: rgba(20, 24, 45, 0.06); stroke: rgba(20, 24, 45, 0.30); stroke-width: 1; }

/* travelling data particles */
.wfx-particle { fill: #14151a; filter: drop-shadow(0 0 5px rgba(20, 24, 45, 0.55)); }

@media (prefers-reduced-motion: reduce) {
  .wfx-flow { animation: none; }
  .wfx-particle { display: none; }
}

/* ---------- Animated energy field around the background AI figure ---------- */
.hero__orbit {
  position: absolute;
  top: 46%;
  left: 76%;
  z-index: var(--z-below);        /* above the dark overlay, behind text + panels */
  width: clamp(20rem, 34vw, 42rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* soft breathing aura */
.hero__orbit::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(124, 108, 255, 0.18) 0%, transparent 62%);
  animation: orbit-pulse 6s ease-in-out infinite;
}

.hero__orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(124, 108, 255, 0.28);
}

.hero__orbit-ring--1 {
  inset: 0;
  border-color: rgba(124, 108, 255, 0.22);
  animation: orbit-spin 34s linear infinite;
}

.hero__orbit-ring--2 {
  inset: 13%;
  border-style: solid;
  border-color: rgba(55, 125, 255, 0.20);
  animation: orbit-spin 24s linear infinite reverse;
}

.hero__orbit-ring--3 {
  inset: 27%;
  border-color: rgba(160, 130, 255, 0.30);
  animation: orbit-spin 18s linear infinite;
}

/* orbiting particles — each span rotates, its dot sits on the rim */
.hero__orbit-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.hero__orbit-dot::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #a9b8ff;
  box-shadow: 0 0 10px 2px rgba(124, 140, 255, 0.9);
}

.hero__orbit-dot--a { animation: orbit-spin 12s linear infinite; }
.hero__orbit-dot--b { inset: 13%; animation: orbit-spin 16s linear infinite reverse; }
.hero__orbit-dot--b::before { width: 7px; height: 7px; background: #c9b6ff; box-shadow: 0 0 9px 2px rgba(169, 130, 255, 0.9); }
.hero__orbit-dot--c { inset: 27%; animation: orbit-spin 9s linear infinite; }
.hero__orbit-dot--c::before { width: 6px; height: 6px; background: #8fd0ff; box-shadow: 0 0 8px 2px rgba(79, 160, 255, 0.9); }
.hero__orbit-dot--d { inset: 6%; animation: orbit-spin 20s linear infinite reverse; }
.hero__orbit-dot--d::before { width: 5px; height: 5px; background: #d7c9ff; }

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes orbit-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__orbit-ring,
  .hero__orbit-dot,
  .hero__orbit::after {
    animation: none;
  }
}

/* the crop shifts on narrow screens — hide the field so it can't drift off the figure */
@media (max-width: 64em) {
  .hero__orbit { display: none; }
}

/* Animated n8n workflow visual */
.hero__flow {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__flow text { font-family: var(--font-body); }

.wf-body { fill: #33343f; stroke: #4d5163; stroke-width: 2; }
.wf-port { fill: #5b5b66; }
.wf-check { fill: none; stroke: #47c97e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.wf-title { font-weight: 700; font-size: 26px; fill: #eceef6; }
.wf-label { font-weight: 600; font-size: 22px; fill: #d4d7e4; }
.wf-sub   { font-weight: 400; font-size: 17px; fill: #8a8fad; }
.wf-item  { font-weight: 500; font-size: 18px; fill: #6fbf90; }
.wf-tools { font-weight: 500; font-size: 16px; fill: #8a8fad; }

/* fade the dotted canvas into the background at the edges */
.wf-grid {
  -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000 62%, transparent 100%);
}

/* HUD ring rotation */
.hero__hud {
  transform-box: fill-box;
  transform-origin: center;
}

/* Orbit ring with satellites */
.hero__orbit {
  position: absolute;
  inset: 6%;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.hero__orbit-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--clr-primary-soft);
  box-shadow: var(--glow-primary);
}

.hero__orbit-dot--1 { top: 50%; left: -5px; }
.hero__orbit-dot--2 { top: 8%; right: 12%; width: 7px; height: 7px; background: var(--clr-accent-soft); box-shadow: var(--glow-accent); }
.hero__orbit-dot--3 { bottom: 6%; right: 30%; width: 6px; height: 6px; background: var(--clr-cyan); box-shadow: var(--glow-cyan); }

/* Floating particles (spans injected by JS) */
.hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__particle {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--clr-primary-soft);
  opacity: 0.5;
}

/* Floating HUD chips */
.hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
}

.hero__chip--status { top: 14%; right: 2%; }
.hero__chip--model  { bottom: 12%; left: 0; }

.hero__chip-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--clr-text);
}

.hero__chip-label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--clr-text-muted);
}

.hero__chip-ring {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 3px solid rgba(124, 108, 255, 0.25);
  border-top-color: var(--clr-primary-soft);
}

.hero__chip-pulse {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--clr-success);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.8);
}

/* ---------- Right aside: expertise + status panels ---------- */

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: center;
}

.hero-panel { padding: var(--space-5); }

.hero-panel__label {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.hero-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero-expertise {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--clr-text-body);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Filled boxes — each expertise in its own logo-palette color, white icon */
.hero-expertise:nth-child(1) { --ic: var(--clr-cat-purple); }
.hero-expertise:nth-child(2) { --ic: var(--clr-cat-indigo); }
.hero-expertise:nth-child(3) { --ic: var(--clr-cat-teal); }
.hero-expertise:nth-child(4) { --ic: var(--clr-cat-pink); }
.hero-expertise:nth-child(5) { --ic: var(--clr-cat-green); }

.hero-expertise__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    180deg,
    var(--ic, var(--clr-primary)) 0%,
    color-mix(in srgb, var(--ic, var(--clr-primary)) 80%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--ic, var(--clr-primary)) 55%, transparent);
  color: #ffffff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ic, var(--clr-primary)) 32%, transparent);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.hero-expertise:hover { color: var(--clr-text); }

.hero-expertise:hover .hero-expertise__icon {
  border-color: color-mix(in srgb, var(--ic, var(--clr-primary)) 75%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ic, var(--clr-primary)) 45%, transparent);
  transform: translateY(-1px);
}

/* System status */
.hero-status__body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.hero-status__gauge {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.hero-status__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hero-status__value {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
}

.hero-status__unit {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

.hero-status__chart {
  width: 100%;
  height: 2.75rem;
}

/* Each bar in its own logo-palette color (cycles through the 7 accents) */
.hero-status__chart rect:nth-of-type(1)  { fill: var(--clr-cat-purple); }
.hero-status__chart rect:nth-of-type(2)  { fill: var(--clr-cat-indigo); }
.hero-status__chart rect:nth-of-type(3)  { fill: var(--clr-cat-teal); }
.hero-status__chart rect:nth-of-type(4)  { fill: var(--clr-cat-green); }
.hero-status__chart rect:nth-of-type(5)  { fill: var(--clr-cat-orange); }
.hero-status__chart rect:nth-of-type(6)  { fill: var(--clr-cat-pink); }
.hero-status__chart rect:nth-of-type(7)  { fill: var(--clr-cat-red); }
.hero-status__chart rect:nth-of-type(8)  { fill: var(--clr-cat-purple); }
.hero-status__chart rect:nth-of-type(9)  { fill: var(--clr-cat-indigo); }
.hero-status__chart rect:nth-of-type(10) { fill: var(--clr-cat-teal); }
.hero-status__chart rect:nth-of-type(11) { fill: var(--clr-cat-green); }

/* ============================================================
   14. SERVICES
   ============================================================ */

.services {
  position: relative;
  overflow: hidden;
}

.services__glow {
  position: absolute;
  z-index: var(--z-below);
  top: 10%;
  left: -20%;
  width: 45rem;
  height: 45rem;
  border-radius: var(--radius-full);
  background: radial-gradient(ellipse at center, rgba(109, 94, 240, 0.12) 0%, transparent 62%);
  pointer-events: none;
}

.services__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 3.2fr);
  gap: var(--space-12);
  align-items: start;
}

/* ---------- Left: intro ---------- */

.services__intro {
  position: sticky;
  top: 7.5rem;
}

.services__title { margin-bottom: var(--space-6); }

.services__desc {
  max-width: 26rem;
  margin-bottom: var(--space-8);
}

/* ---------- Right: cards grid ---------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* all cards in one line */
  gap: var(--grid-gap);
}

.service-card--wide { grid-column: auto; }

/* ---------- Card behavior ---------- */

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-6) var(--space-8);
  overflow: hidden;               /* clips the border sweep */
}

/* Whole-card link → service subpage */
.service-card__link {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
}

/* Animated gradient border sweep (activates on hover) */
.service-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--sweep-angle, 0deg),
    transparent 0%,
    color-mix(in srgb, var(--ic, var(--clr-primary)) 90%, transparent) 12%,
    color-mix(in srgb, var(--ic, var(--clr-primary)) 55%, transparent) 22%,
    transparent 36%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.service-card:hover::before { opacity: 1; }

/* On hover, the card picks up a faint wash + glow in its own accent color */
.service-card:hover {
  border-color: color-mix(in srgb, var(--ic, var(--clr-primary)) 40%, transparent);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ic, var(--clr-primary)) 7%, transparent) 0%,
    transparent 60%);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--ic, var(--clr-primary)) 22%, transparent);
}

/* Icon tile — tinted per service */
.service-card__icon {
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) var(--ease-out);
}

.service-card:hover .service-card__icon {
  transform: translateY(-4px) scale(1.06) rotate(-4deg);
}

/* Per-card accents driven by the categorical palette (--ic).
   Set on the whole card (via :has) so the accent reaches the border
   sweep, wash and glow — not just the icon. Legacy modifier names kept. */
.service-card:has(.service-card__icon--violet),
.service-card:has(.service-card__icon--purple),
.service-card__icon--violet,
.service-card__icon--purple { --ic: var(--clr-cat-purple); }
.service-card:has(.service-card__icon--blue),
.service-card:has(.service-card__icon--indigo),
.service-card__icon--blue,
.service-card__icon--indigo { --ic: var(--clr-cat-indigo); }
.service-card:has(.service-card__icon--amber),
.service-card:has(.service-card__icon--orange),
.service-card__icon--amber,
.service-card__icon--orange { --ic: var(--clr-cat-orange); }
.service-card:has(.service-card__icon--cyan),
.service-card:has(.service-card__icon--teal),
.service-card__icon--cyan,
.service-card__icon--teal   { --ic: var(--clr-cat-teal); }
.service-card:has(.service-card__icon--pink),
.service-card__icon--pink   { --ic: var(--clr-cat-pink); }
.service-card:has(.service-card__icon--green),
.service-card__icon--green  { --ic: var(--clr-cat-green); }
.service-card:has(.service-card__icon--red),
.service-card__icon--red    { --ic: var(--clr-cat-red); }

/* Solid filled tile in the card's own color, white icon */
.service-card__icon[class*="service-card__icon--"] {
  color: #ffffff;
  background:
    linear-gradient(180deg,
      var(--ic, var(--clr-primary)) 0%,
      color-mix(in srgb, var(--ic, var(--clr-primary)) 78%, #000) 100%);
  border-color: color-mix(in srgb, var(--ic, var(--clr-primary)) 60%, transparent);
}
.service-card:hover .service-card__icon[class*="service-card__icon--"] {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ic, var(--clr-primary)) 92%, #fff) 0%,
      var(--ic, var(--clr-primary)) 100%);
  border-color: color-mix(in srgb, var(--ic, var(--clr-primary)) 75%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--ic, var(--clr-primary)) 45%, transparent);
}

/* Corner arrow */
.service-card__arrow {
  margin-top: auto;
  padding-top: var(--space-5);
  align-self: flex-end;
  color: var(--clr-text-faint);
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.service-card:hover .service-card__arrow {
  color: var(--clr-primary-soft);
  transform: translateX(4px);
}

/* ============================================================
   15. PROCESS TIMELINE
   ============================================================ */

.process__head {
  margin-bottom: var(--section-gap-head);
  text-align: center;
}

.process__timeline {
  position: relative;
}

/* Base connector line, sits across node centers */
.process__line {
  position: absolute;
  top: 1.375rem;                      /* node height / 2 */
  left: calc(100% / 12);              /* half a column in, so it spans node→node */
  right: calc(100% / 12);
  height: 2px;
  background: var(--clr-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* Progress fill — scaled by GSAP scrub, flows through the step palette */
.process__line-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--clr-cat-purple) 0%,
    var(--clr-cat-indigo) 20%,
    var(--clr-cat-teal)   40%,
    var(--clr-cat-green)  60%,
    var(--clr-cat-orange) 80%,
    var(--clr-cat-pink)  100%);
  box-shadow: var(--glow-primary);
  transform: scaleX(0);
  transform-origin: left center;
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
}

/* ---------- Step ---------- */

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Per-step accent from the logo palette (matches the line-fill order) */
.process-step:nth-child(1) { --ic: var(--clr-cat-purple); }
.process-step:nth-child(2) { --ic: var(--clr-cat-indigo); }
.process-step:nth-child(3) { --ic: var(--clr-cat-teal); }
.process-step:nth-child(4) { --ic: var(--clr-cat-green); }
.process-step:nth-child(5) { --ic: var(--clr-cat-orange); }
.process-step:nth-child(6) { --ic: var(--clr-cat-pink); }

.process-step__node {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--clr-surface-2);
  border: 1.5px solid color-mix(in srgb, var(--ic, var(--clr-border-strong)) 55%, transparent);
  color: var(--ic, var(--clr-text-muted));
  transition:
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-spring);
}

/* Active node — lit by the passing progress line, in its own color */
.process-step.is-active .process-step__node {
  background: var(--ic, var(--clr-primary));
  border-color: var(--ic, var(--clr-primary-soft));
  color: #ffffff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ic, var(--clr-primary)) 18%, transparent),
    0 0 26px color-mix(in srgb, var(--ic, var(--clr-primary)) 55%, transparent);
  transform: scale(1.08);
}

.process-step__label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text);
  margin-bottom: var(--space-2);
}

.process-step__label em {
  font-style: normal;
  color: var(--ic, var(--clr-primary-soft));
  margin-right: var(--space-1);
}

.process-step__text {
  font-size: var(--fs-caption);
  color: var(--clr-text-muted);
  max-width: 11rem;
}

/* ============================================================
   16. FEATURED PROJECTS
   ============================================================ */

.projects {
  position: relative;
  overflow: hidden;
}

.projects__glow {
  position: absolute;
  z-index: var(--z-below);
  bottom: -10%;
  right: -20%;
  width: 45rem;
  height: 45rem;
  border-radius: var(--radius-full);
  background: radial-gradient(ellipse at center, rgba(55, 125, 255, 0.10) 0%, transparent 62%);
  pointer-events: none;
}

.projects__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 3.2fr);
  gap: var(--space-12);
  align-items: start;
}

.projects__intro {
  position: sticky;
  top: 7.5rem;
}

.projects__title { margin-bottom: var(--space-6); }

.projects__desc {
  max-width: 26rem;
  margin-bottom: var(--space-8);
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* all cards in one line */
  gap: var(--grid-gap);
}

/* ---------- Project card ---------- */

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--clr-border-glow);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

/* Media area — SVG artwork on tinted gradient */
.project-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.project-card__media--analytics  { background: linear-gradient(150deg, #0d1026, #1a1650); }
.project-card__media--automation { background: linear-gradient(150deg, #0d1026, #0f2a4d); }
.project-card__media--chatbot    { background: linear-gradient(150deg, #0d1026, #241a4f); }
.project-card__media--vision     { background: linear-gradient(150deg, #0d1026, #0e2f40); }

.project-card__art,
.project-card__img {
  width: 100%;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.project-card__img {
  object-fit: cover;
  display: block;
}

/* Hover zoom */
.project-card:hover .project-card__art,
.project-card:hover .project-card__img {
  transform: scale(1.07);
}

/* Overlay — deepens on hover */
.project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 6, 15, 0.72));
  opacity: 0.6;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.project-card:hover .project-card__overlay { opacity: 1; }

/* Technology badge */
.project-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: var(--z-raised);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(5, 6, 15, 0.65);
  border: 1px solid var(--clr-border-strong);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--clr-accent-soft);
  letter-spacing: 0.04em;
}

/* Info block */
.project-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;                       /* fill remaining height so links bottom-align */
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.project-card__cat {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-primary-soft);
  margin-bottom: var(--space-1);
}

.project-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  margin-bottom: var(--space-3);
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  margin-top: auto;              /* pin to the card bottom, aligned across the row */
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--clr-text-muted);
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}

.project-card__link:hover {
  color: var(--clr-accent-soft);
  gap: var(--space-3);
}

/* ============================================================
   17. WHY CHOOSE US — honeycomb
   ============================================================ */

/* ---------- Header (centered, on top) ---------- */

.why {
  background: url('../images/why-bg-light.svg') no-repeat center/cover;
  position: relative;
}

.whyhex__head {
  max-width: 60rem;
  margin: 0 auto var(--space-12);
  text-align: center;
}

.whyhex__head h2 {
  color: var(--clr-text, #141723);
}

.whyhex__head .eyebrow {
  color: var(--clr-primary, #6d5ef0);
}

/* ---------- Honeycomb grid ---------- */

.honeycomb {
  --hex-w: clamp(11rem, 7rem + 13vw, 15.5rem);
  --hex-h: calc(var(--hex-w) * 0.9);
  --hex-gap: 0.35rem;
  --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.honeycomb__col {
  display: flex;
  flex-direction: column;
  gap: var(--hex-gap);
}

/* interlock columns horizontally */
.honeycomb__col:not(:first-child) {
  margin-left: calc(var(--hex-w) * -0.25 + var(--hex-gap));
}

/* drop alternate columns half a hex to nest between neighbours.
   Half the hex height + a hair lands on the sweet spot (~113px at full width)
   and, because it's tied to --hex-h, stays aligned as the hexes scale down.
   Uses top (not transform) so the GSAP stagger reveal — which animates
   transform:translateY — can't flatten the offset back to the top. */
.honeycomb__col--down {
  position: relative;
  top: calc(var(--hex-h) / 2 + 1.4px);
}

/* ---------- Single hexagon ---------- */

.hex {
  position: relative;
  width: var(--hex-w);
  height: var(--hex-h);
  transition: transform var(--dur-med, 0.3s) var(--ease-out, ease);
}

/* border layer */
.hex::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--hex-clip);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--hc, var(--clr-primary)) 40%, transparent),
    var(--clr-border) 55%);
  transition: background var(--dur-med, 0.3s) var(--ease-out, ease);
}

.hex__inner {
  position: absolute;
  inset: 1.5px;
  clip-path: var(--hex-clip);
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--hc, var(--clr-primary)) 10%, transparent) 0%,
      transparent 55%),
    var(--clr-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(1rem, 0.4rem + 2.4vw, 1.9rem);
}

/* icon badge */
.hex__icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  color: #ffffff;
  background: linear-gradient(
    180deg,
    var(--hc, var(--clr-primary)) 0%,
    color-mix(in srgb, var(--hc, var(--clr-primary)) 80%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--hc, var(--clr-primary)) 55%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--hc, var(--clr-primary)) 32%, transparent);
  transition: transform var(--dur-med, 0.3s) var(--ease-spring, ease),
              background var(--dur-med, 0.3s) var(--ease-out, ease),
              box-shadow var(--dur-med, 0.3s) var(--ease-out, ease);
}

.hex__title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.hex__text {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--clr-text-muted);
}

/* hover */
.hex:hover {
  transform: translateY(-5px);
  z-index: 2;
}
.hex:hover::before {
  background: linear-gradient(160deg,
    var(--hc, var(--clr-primary)),
    color-mix(in srgb, var(--hc, var(--clr-primary)) 25%, transparent) 60%);
}
.hex:hover .hex__icon {
  transform: scale(1.08);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--hc, var(--clr-primary)) 45%, transparent);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .honeycomb { --hex-w: clamp(9.5rem, 21vw, 12.5rem); }
}

/* stack into a single centred column of hexes on small screens */
@media (max-width: 680px) {
  .honeycomb {
    flex-direction: column;
    align-items: center;
    --hex-w: 17rem;
    gap: var(--hex-gap);
  }
  .honeycomb__col:not(:first-child) { margin-left: 0; }
  .honeycomb__col--down { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hex, .hex__icon { transition: none; }
}

/* ============================================================
   18. TEAM
   ============================================================ */

.team__inner {
  display: grid;
  grid-template-columns: 1fr 2.1fr;
  gap: var(--space-16);
  align-items: center;
}

.team__title { margin-bottom: var(--space-5); }

.team__desc { max-width: 24rem; }

.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* ---------- Team card ---------- */

.team-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.team-card:hover {
  transform: translateY(-6px);
  border-color: var(--clr-border-glow);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

/* Animated border sweep — same mechanism as service cards */
.team-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: var(--z-raised);
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--sweep-angle, 0deg),
    transparent 0%,
    rgba(124, 108, 255, 0.9) 12%,
    rgba(55, 125, 255, 0.6) 22%,
    transparent 36%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.team-card:hover::before { opacity: 1; }

/* Portrait area */
.team-card__media {
  aspect-ratio: 1 / 0.92;
  display: grid;
  place-items: end center;
  overflow: hidden;
}

.team-card__media--violet { background: linear-gradient(160deg, #171b38, #241a4f); }
.team-card__media--blue   { background: linear-gradient(160deg, #131a38, #0f2a4d); }
.team-card__media--cyan   { background: linear-gradient(160deg, #12203a, #0e2f40); }

.team-card__avatar {
  width: 82%;
  transition: transform var(--dur-med) var(--ease-out);
}

.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-med) var(--ease-out);
}

.team-card:hover .team-card__avatar,
.team-card:hover .team-card__img {
  transform: scale(1.05);
}

/* Info */
.team-card__info {
  padding: var(--space-5) var(--space-5) var(--space-6);
  text-align: center;
}

.team-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
}

.team-card__role {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary-soft);
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
}

/* Social icons */
.team-card__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.team-card__social {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  background: var(--clr-fill-ghost);
  color: var(--clr-text-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.team-card__social:hover {
  color: #ffffff;
  background: var(--clr-primary);
  border-color: var(--clr-primary-soft);
  transform: translateY(-2px);
}

/* ---------- Scroll indicator ---------- */

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--clr-text-faint);
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-med) var(--ease-out);
  z-index: 2;
}

.hero__scroll:hover { color: var(--clr-text-body); }

.hero__scroll-mouse {
  display: block;
  width: 22px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-full);
  position: relative;
}

.hero__scroll-wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ============================================================
   19. TESTIMONIALS — alternate split: intro + infinite slider
   ============================================================ */

.testimonials {
  position: relative;
  overflow: hidden;
}

.testimonials__glow {
  position: absolute;
  top: 15%;
  right: -12%;
  width: 42rem;
  height: 42rem;
  background: var(--grad-hero-glow);
  pointer-events: none;
  z-index: var(--z-below);
}

.testimonials__inner {
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 0.8fr);
  gap: var(--space-12);
  align-items: start;
}

.testimonials__intro {
  grid-column: 2;
  grid-row: 1;
}

.testimonials__grid {
  grid-column: 1;
  grid-row: 1;
}

/* ---------- Left: intro ---------- */

.testimonials__title { margin-bottom: var(--space-6); }

.testimonials__desc {
  max-width: 26rem;
  margin-bottom: var(--space-8);
}

.testimonials__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.testimonials__rating-stars {
  display: inline-flex;
  gap: 2px;
}

.testimonials__rating-score { color: var(--clr-text); }

/* ---------- Right: infinite slider ---------- */

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 4 cards in a row */
  gap: var(--grid-gap);
}

.testimonials__slide {
  display: grid;   /* stretch the card to fill the cell (equal heights) */
}

/* ---------- Glass testimonial card ---------- */

.testi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-6);
}

.testi-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.testi-card__stars {
  display: inline-flex;
  gap: 2px;
}

.testi-card__mark {
  color: var(--clr-primary-soft);
  opacity: 0.35;
  flex-shrink: 0;
  margin-top: -0.25rem;
}

.testi-card__quote {
  color: var(--clr-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* Normalize heights across varying quote lengths */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testi-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

.testi-card__photo {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.testi-card__photo--violet { background: linear-gradient(135deg, #7c6cff, #377dff); }
.testi-card__photo--blue   { background: linear-gradient(135deg, #377dff, #56ccf2); }
.testi-card__photo--cyan   { background: linear-gradient(135deg, #56ccf2, #34d399); }
.testi-card__photo--amber  { background: linear-gradient(135deg, #f0a34e, #f4586f); }
.testi-card__photo--pink   { background: linear-gradient(135deg, #f472b6, #7c6cff); }
.testi-card__photo--green  { background: linear-gradient(135deg, #34d399, #377dff); }

.testi-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testi-card__name {
  color: var(--clr-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

.testi-card__company {
  color: var(--clr-text-muted);
  font-size: var(--fs-caption);
}

/* ============================================================
   20. LATEST ARTICLES — intro + 2×2 blog card grid
   ============================================================ */

.blog__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 3.2fr);
  gap: var(--space-12);
  align-items: start;
}

/* ---------- Left: intro ---------- */

.blog__intro {
  position: sticky;
  top: 7.5rem;
}

.blog__title { margin-bottom: var(--space-6); }

.blog__desc {
  max-width: 26rem;
  margin-bottom: var(--space-8);
}

/* ---------- Right: card grid ---------- */

.blog__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* all posts in one line */
  gap: var(--grid-gap);
}

/* ---------- Blog card ---------- */

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--clr-border-glow);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

/* Media thumbnail */
.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-card__media--violet { background: linear-gradient(150deg, #0d1026, #241a4f); }
.blog-card__media--blue   { background: linear-gradient(150deg, #0d1026, #0f2a4d); }
.blog-card__media--cyan   { background: linear-gradient(150deg, #0d1026, #0e2f40); }
.blog-card__media--pink   { background: linear-gradient(150deg, #0d1026, #3a1740); }

.blog-card__art,
.blog-card__img {
  width: 100%;
  height: 100%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.blog-card__img {
  object-fit: cover;
  display: block;
}

.blog-card:hover .blog-card__art,
.blog-card:hover .blog-card__img { transform: scale(1.07); }

.blog-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 6, 15, 0.7));
  opacity: 0.55;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

.blog-card:hover .blog-card__overlay { opacity: 1; }

/* Category chip */
.blog-card__cat {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-raised);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(5, 6, 15, 0.65);
  border: 1px solid var(--clr-border-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--clr-primary-soft);
}

/* Body */
.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--clr-text-muted);
}

.blog-card__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-card__read {
  position: relative;
  padding-left: var(--space-4);
}

.blog-card__read::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--clr-text-faint);
  transform: translateY(-50%);
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

.blog-card__title a {
  color: var(--clr-text);
  transition: color var(--dur-fast) var(--ease-out);
}

.blog-card:hover .blog-card__title a { color: var(--clr-accent-soft); }

.blog-card__excerpt {
  font-size: var(--fs-small);
  color: var(--clr-text-muted);
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-muted);
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}

.blog-card:hover .blog-card__link,
.blog-card__link:hover {
  color: var(--clr-accent-soft);
  gap: var(--space-3);
}

/* ============================================================
   21. CTA — glass panel, aurora gradient, glow, particles
   ============================================================ */

.cta__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 2.2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--radius-xl);
  text-align: center;
  isolation: isolate;
}

/* Aurora — rotating blurred conic gradient behind the glass */
.cta__aurora {
  position: absolute;
  inset: -45%;
  z-index: -2;
  background: conic-gradient(from 0deg,
    rgba(124, 108, 255, 0) 0%,
    rgba(124, 108, 255, 0.55) 18%,
    rgba(55, 125, 255, 0.5) 38%,
    rgba(86, 204, 242, 0.42) 55%,
    rgba(244, 114, 182, 0.4) 74%,
    rgba(124, 108, 255, 0) 100%);
  filter: blur(72px);
  opacity: 0.5;
  animation: cta-aurora 20s linear infinite;
}

/* Glow orbs */
.cta__glow {
  position: absolute;
  z-index: -2;
  border-radius: var(--radius-full);
  pointer-events: none;
  animation: glow-pulse 8s var(--ease-out) infinite;
}

.cta__glow--1 {
  top: -35%;
  left: -8%;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle at center, rgba(124, 108, 255, 0.35) 0%, transparent 62%);
}

.cta__glow--2 {
  bottom: -45%;
  right: -6%;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle at center, rgba(55, 125, 255, 0.28) 0%, transparent 62%);
  animation-delay: -3s;
}

/* Animated particle field */
.cta__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cta__particle {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--clr-primary-soft);
  opacity: 0.5;
}

/* Content above all layers */
.cta__content {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin-inline: auto;
}

/* Paper-airplane icon */
.cta__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: #ffffff;
  box-shadow: var(--glow-primary-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: cta-float 5s var(--ease-in-out) infinite;
}

.cta__icon svg { transform: translateX(1px); }

.cta__title { margin-bottom: var(--space-5); }

.cta__desc {
  max-width: 36rem;
  margin-inline: auto;
  color: var(--clr-text-body);
}

/* ---------- Email capture form ---------- */

.cta__form {
  max-width: 34rem;
  margin: var(--space-10) auto 0;
}

.cta__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--glass-bg-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.cta__field:focus-within {
  border-color: var(--clr-border-glow);
  box-shadow: var(--glow-primary);
}

.cta__field-icon {
  display: flex;
  padding-left: var(--space-3);
  color: var(--clr-text-muted);
  flex-shrink: 0;
}

.cta__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-1);
  border: none;
  background: transparent;
  outline: none;
  color: var(--clr-text);
  font-size: var(--fs-body);
}

.cta__input::placeholder { color: var(--clr-text-faint); }

.cta__submit { flex-shrink: 0; }

.cta__msg {
  min-height: 1.25rem;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
}

/* Shared subscribe-form message states (CTA + footer) */
[data-subscribe-msg][data-state="error"]   { color: var(--clr-danger); }
[data-subscribe-msg][data-state="success"] { color: var(--clr-success); }

.cta__note {
  display: block;
  margin-top: var(--space-4);
}

/* ============================================================
   22. FOOTER
   ============================================================ */

.footer {
  /* dark-grey island on the light page — restore a dark palette locally */
  --clr-bg-deep:       #24262e;
  --clr-surface-2:     #30333c;
  --clr-surface-3:     #3a3e48;
  --clr-text:          #f4f5fb;
  --clr-text-body:     #c3c6db;
  --clr-text-muted:    #8a8fad;
  --clr-text-faint:    #5d6180;
  --clr-border:        rgba(138, 143, 173, 0.16);
  --clr-border-strong: rgba(138, 143, 173, 0.30);
  --clr-fill-ghost:    rgba(255, 255, 255, 0.04);
  --clr-fill-hover:    rgba(255, 255, 255, 0.07);

  position: relative;
  overflow: hidden;
  background: var(--clr-bg-deep);
  border-top: 1px solid var(--clr-border);
  padding-block: var(--space-24) var(--space-8);
}

.footer__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 60rem;
  height: 40rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(109, 94, 240, 0.12) 0%, transparent 62%);
  pointer-events: none;
  z-index: var(--z-below);
}

.footer__inner { position: relative; }

/* ---------- Top: brand + columns ---------- */

.footer__top {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr) 1.6fr;
  gap: var(--space-12) var(--space-8);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--clr-border);
}

.footer__logo { margin-bottom: var(--space-5); }

.footer__tagline {
  max-width: 24rem;
  margin-bottom: var(--space-6);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Social icons */
.footer__socials {
  display: flex;
  gap: var(--space-2);
}

.footer__social {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  background: var(--clr-fill-ghost);
  color: var(--clr-text-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.footer__social:hover {
  color: #ffffff;
  background: var(--clr-primary);
  border-color: var(--clr-primary-soft);
  transform: translateY(-2px);
}

/* Link columns */
.footer__heading {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--clr-text);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  position: relative;
  font-size: var(--fs-small);
  color: var(--clr-text-muted);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}

.footer__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--clr-primary-soft);
  transform: translateY(-50%);
  transition: width var(--dur-fast) var(--ease-out);
}

.footer__link:hover {
  color: var(--clr-text);
  padding-left: var(--space-4);
}

.footer__link:hover::before { width: var(--space-3); }

/* Newsletter */
.footer__newsletter-desc {
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
}

.footer__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  padding-left: var(--space-4);
  background: var(--glass-bg-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.footer__field:focus-within {
  border-color: var(--clr-border-glow);
  box-shadow: var(--glow-primary);
}

.footer__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  color: var(--clr-text);
  font-size: var(--fs-small);
  padding-block: var(--space-2);
}

.footer__input::placeholder { color: var(--clr-text-faint); }

.footer__submit {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--grad-primary);
  color: #ffffff;
  box-shadow: var(--glow-primary);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.footer__submit:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: var(--glow-primary-lg);
}

.footer__submit:active { transform: scale(0.95); }

.footer__msg {
  min-height: 1.1rem;
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
}

/* ---------- Bottom: copyright + legal ---------- */

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

.footer__legal-link {
  font-size: var(--fs-small);
  color: var(--clr-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__legal-link:hover { color: var(--clr-text); }

/* ============================================================
   23. LEFT SECTION RAIL — fixed vertical scroll-spy navigator
   Shown only where the content column leaves gutter room.
   ============================================================ */

.railnav { display: none; }

@media (min-width: 90em) {
  .railnav {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 1.75rem;
    z-index: calc(var(--z-nav) + 1);   /* above the sticky header so the line stays visible */
  }
}

.railnav__list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* spread items across the full height */
  height: 100%;
  padding-block: 7rem 3rem;          /* clear the header at top, breathe at bottom */
}

/* Connecting line + scroll progress fill */
.railnav__track,
.railnav__progress {
  position: absolute;
  right: 5px;                 /* centre on the 12px dots (6px from edge) */
  width: 2px;
  border-radius: 2px;
  z-index: 0;
  background-image: linear-gradient(180deg,
    var(--clr-primary-strong),
    var(--clr-accent),
    var(--clr-cyan),
    var(--clr-success),
    var(--clr-cat-orange),
    var(--clr-cat-pink),
    var(--clr-cat-purple),
    var(--clr-warning),
    var(--clr-danger)
  );
  background-repeat: no-repeat;
  background-size: 100% 100vh;   /* fix the gradient to the full rail so colours line up */
}

.railnav__track {
  top: 0;
  bottom: 0;
  opacity: 0.4;                 /* muted colourful base line */
}

.railnav__progress {
  top: 0;
  height: 0;
  box-shadow: 0 0 8px var(--clr-primary-soft);   /* vivid scrolled portion */
  transition: height var(--dur-med) var(--ease-out);
}

.railnav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* text left, dot right */
  gap: var(--space-2);
}

.railnav__dot {
  position: relative;
  z-index: 1;
  order: 2;                /* move the dot to the right of the label */
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 2px solid #ffffff;               /* round white border */
  background: var(--dot-color, var(--clr-primary-strong));   /* filled — recoloured per item below */
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* colourful dot per section using CSS palette variables */
.railnav__item:nth-child(1) { --dot-color: var(--clr-primary-strong); }
.railnav__item:nth-child(2) { --dot-color: var(--clr-accent); }
.railnav__item:nth-child(3) { --dot-color: var(--clr-cyan); }
.railnav__item:nth-child(4) { --dot-color: var(--clr-success); }
.railnav__item:nth-child(5) { --dot-color: var(--clr-cat-orange); }
.railnav__item:nth-child(6) { --dot-color: var(--clr-cat-pink); }
.railnav__item:nth-child(7) { --dot-color: var(--clr-cat-purple); }
.railnav__item:nth-child(8) { --dot-color: var(--clr-warning); }
.railnav__item:nth-child(9) { --dot-color: var(--clr-danger); }

.railnav__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.railnav__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--clr-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.railnav__label {
  font-size: 0.5625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-text-faint);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Hover */
.railnav__link:hover .railnav__dot {
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.railnav__link:hover .railnav__num,
.railnav__link:hover .railnav__label { color: var(--clr-text-body); }

/* Active */
.railnav__link--active .railnav__dot {
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 0 12px rgba(255, 255, 255, 0.45);
}

.railnav__link--active .railnav__num { color: var(--clr-text); }
.railnav__link--active .railnav__label { color: var(--dot-color, var(--clr-primary-soft)); }

/* ---------- Scroll indicator ---------- */

.hero__scroll-text {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ============================================================
   13. SCROLL-DRIVEN BACKGROUND CANVAS
   ============================================================ */

#scroll-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;                     /* base layer of the hero, behind glows + content */
  pointer-events: none;
  object-fit: cover;
  opacity: 1;
  filter: saturate(1.12) contrast(1.04);
}