/* ═══ GripIQ design tokens ═══
   See docs/design-system.md §5.2. */
:root{
  /* ── colour primitives ── */
  --color-black:#000000;
  --color-white:#FFFFFF;
  --color-navy:#052B5D;
  --color-navy-deep:#031D42;
  --color-navy-light:#0A3D7A;
  --color-navy-abyss:#04042E;      /* hero backdrop: near-black indigo the hero video sits on */
  --color-indigo:#000066;          /* engine block glass base (legacy rgba(0,0,102,.6)) */
  --color-ink-deep:#0A1E3D;
  --color-ink:#12233F;
  --color-gray-50:#F5F7FB;
  --color-gray-100:#E5E9F0;
  --color-gray-200:#D0D9E4;
  --color-gray-300:#B7C2CF;
  --color-gray-400:#8C98A8;   /* decorative only — never text */
  --color-gray-500:#5B6879;   /* smallest-contrast text colour allowed on light */
  --color-gray-700:#3B4759;
  --color-cyan:#00CFFF;
  --color-cyan-bright:#33D9FF;
  --color-cyan-ink:#00728F;
  --color-cyan-tint:#E8F9FD;
  --color-coral:#FFAB8F;
  --color-coral-ink:#BA4A2A;
  --color-coral-tint:#FFF1EB;
  --color-green:#9EC2A3;
  --color-green-ink:#3F7349;
  --color-green-tint:#EDF6EE;
  --color-purple:#D9C2FF;
  --color-purple-ink:#7752AA;
  --color-purple-tint:#F5EFFF;
  --color-plum:#5B4DE0;
  --color-plum-deep:#4A3DC4;
  --color-plum-tint:#EEECFD;
  --color-amber:#E0982F;      /* decorative only (rules, check glyphs) */
  --color-amber-ink:#B8721E;  /* amber that clears 3:1 on white — use for meaningful icons */
  --color-error:#B42318;
  --color-error-on-dark:#FF7B7B;

  /* ── semantic colour: LIGHT context (default) ── */
  --bg:var(--color-white);
  --bg-card:var(--color-white);
  --bg-card-hover:var(--color-white);
  --bg-panel:var(--color-gray-50);
  --fg-strong:var(--color-ink);
  --fg:var(--color-gray-700);
  --fg-muted:var(--color-gray-500);
  --fg-faint:var(--color-gray-500);
  --line:var(--color-gray-100);
  --line-strong:var(--color-gray-200);
  --accent:var(--color-cyan);
  --accent-fg:var(--color-cyan-ink);
  --accent-tint:var(--color-cyan-tint);
  --btn-outline:var(--color-cyan-ink);
  --focus-ring:var(--color-cyan-ink);
  --error:var(--color-error);
  --heading:var(--color-navy);              /* section titles on light are navy, body headings ink */

  /* ── typography ── */
  --font-body:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-heading:'Ranade','Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:Georgia,'Times New Roman',serif;
  --fs-3xs:.6rem;
  --fs-2xs:.72rem;
  --fs-xs:.8rem;
  --fs-sm:.88rem;
  --fs-md:.95rem;
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.35rem;
  --fs-2xl:1.6rem;
  --fs-3xl:clamp(2rem,3.5vw,2.8rem);
  --fs-4xl:clamp(2.2rem,4vw,3.2rem);
  --fs-display:clamp(3rem,5.5vw,4.5rem);
  --fs-display-xl:clamp(3.3rem,5.75vw,5.25rem);
  --fs-stat:clamp(2.8rem,4.5vw,3.8rem);
  --fs-hero-lead:clamp(1.05rem,1.7vw,1.25rem);
  --lh-display:1.05;
  --lh-tight:1.15;
  --lh-snug:1.25;
  --lh-heading:1.35;
  --lh-normal:1.5;
  --lh-body:1.6;
  --lh-relaxed:1.65;
  --lh-loose:1.8;
  --ls-tightest:-.04em;
  --ls-tighter:-.03em;
  --ls-tight:-.02em;
  --ls-snug:-.01em;
  --ls-normal:0;
  --ls-wide:.04em;
  --ls-wider:.08em;
  --ls-widest:.12em;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:700;
  --fw-black:900;

  /* ── space (4px base) ── */
  --space-0-5:.125rem;
  --space-1:.25rem;
  --space-1-5:.375rem;
  --space-2:.5rem;
  --space-2-5:.625rem;
  --space-3:.75rem;
  --space-3-5:.9rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:1.75rem;
  --space-8:2rem;
  --space-9:2.25rem;
  --space-10:2.5rem;
  --space-11:2.75rem;
  --space-12:3rem;
  --space-14:3.5rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;
  --space-28:7rem;
  --space-36:9rem;
  --section-pad-y:var(--space-28);
  --section-pad-x:var(--space-8);
  --nav-offset:5.5rem;

  /* ── radius ── */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-full:50%;

  /* ── borders ── */
  --border-w:1px;
  --border-w-ctl:1.5px;
  --accent-rule:4px;

  /* ── shadow ── */
  --shadow-md:0 4px 24px rgba(5,43,93,.06);
  --shadow-lg:0 12px 40px rgba(5,43,93,.12);
  --shadow-dark-md:0 8px 32px rgba(0,0,0,.25);
  --shadow-dark-lg:0 30px 100px rgba(0,0,0,.45);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-glow:0 6px 20px rgba(0,207,255,.25);
  --shadow-glow-sm:0 0 15px rgba(0,207,255,.15),0 0 30px rgba(0,207,255,.05);
  --shadow-glow-lg:0 0 25px rgba(0,207,255,.25),0 0 50px rgba(0,207,255,.1);

  /* ── motion ── */
  --dur-fast:.2s;
  --dur-base:.25s;
  --dur-slow:.35s;
  --dur-slower:.6s;
  --dur-draw:1.2s;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --lift:-2px;

  /* ── layout ── */
  --container:1200px;
  --container-md:980px;
  --container-sm:760px;
  --measure:42rem;
  --measure-sm:32rem;

  /* ── z-index ── */
  --z-raised:1;
  --z-float:10;
  --z-nav:200;
  --z-popover:210;
  --z-overlay:300;
  --z-modal:310;
  --z-top:9999;

  /* ── CONTENT-FACING ALIASES — referenced by values stored in Sulu (hero verb colours,
        add-on colours) and by markup inside rich-text fields. Never remove. ── */
  --cyan:var(--color-cyan);
  --blue:var(--color-cyan);
  --teal:var(--color-green);
  --green:var(--color-green);
  --violet:var(--color-purple);
  --purple:var(--color-purple);
  --coral:var(--color-coral);
  --navy:var(--color-navy);
}

/* ── semantic colour: DARK context. Applied by the components that are dark, and by the
      blog/article page wrappers, which are dark as whole pages rather than as sections. ── */
.section--dark,.section--navy,.hero,.lp-hero,.lp-activate,.nav,.nav-mobile,.footer,.engine-modal,.card--navy,
.blog-header,.blog-list,.blog-pagination,.article,.article-back-nav,.article-related,.article-subscribe{
  color-scheme:dark;
  --bg:var(--color-ink-deep);
  --bg-card:rgba(255,255,255,.06);
  --bg-card-hover:rgba(255,255,255,.1);
  --bg-panel:rgba(255,255,255,.04);
  --fg-strong:var(--color-white);
  --fg:rgba(255,255,255,.85);
  --fg-muted:rgba(255,255,255,.7);
  --fg-faint:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.2);
  --accent:var(--color-cyan);
  --accent-fg:var(--color-cyan);
  --accent-tint:rgba(0,207,255,.12);
  --btn-outline:var(--color-cyan);
  --focus-ring:var(--color-cyan);
  --error:var(--color-error-on-dark);
  --heading:var(--color-white);
  color:var(--fg);
}
/* light island inside a dark context */
.card--light{
  --bg:var(--color-white);--bg-card:var(--color-white);--bg-card-hover:var(--color-white);--bg-panel:var(--color-gray-50);
  --fg-strong:var(--color-ink);--fg:var(--color-gray-700);--fg-muted:var(--color-gray-500);--fg-faint:var(--color-gray-500);
  --line:var(--color-gray-100);--line-strong:var(--color-gray-200);
  --accent-fg:var(--color-cyan-ink);--accent-tint:var(--color-cyan-tint);--btn-outline:var(--color-cyan-ink);--focus-ring:var(--color-cyan-ink);
  --error:var(--color-error);--heading:var(--color-navy);
  color:var(--fg);
}

/* ═══ reset + base ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
section[id]{scroll-margin-top:var(--nav-offset)}
body{font-family:var(--font-body);background:var(--color-black);color:var(--fg);line-height:var(--lh-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
button{font:inherit;color:inherit}
body.modal-open{overflow:hidden}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-aos]{transform:none!important;opacity:1!important}
}
/* AOS: elements are inert until revealed (legacy behaviour, kept) */
[data-aos]{pointer-events:none}
[data-aos].aos-animate{pointer-events:auto}