/* ============================================================
   BulkEngine Landing Page — Stylesheet
   Tokens aligned with design-note.md (mirrors bulkengine-doc).
   ============================================================ */

:root{
  /* WordPress system font stack — matches wp-admin + docs site */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Surface palette */
  --paper:#f7f8fa;
  --paper-2:#eef1f5;
  --paper-elev:#ffffff;
  --paper-tint:#f3f5fb;          /* subtle accent-blue tint for trust section */
  --surface-dark:#1e1e1e;
  --surface-dark-2:#262626;

  /* Ink */
  --ink:#1e1e1e;
  --ink-soft:#3f444d;
  --ink-faint:#828892;
  --ink-on-dark:#ffffff;
  --ink-on-dark-soft:rgba(255,255,255,.78);
  --ink-on-dark-faint:rgba(255,255,255,.52);

  /* Lines */
  --line:#e2e6ec;
  --line-strong:#cfd5de;
  --line-on-dark:rgba(255,255,255,.14);

  /* Brand accent */
  --accent:#3858e9;
  --accent-deep:#2d49c4;
  --accent-wash:#e6ecfd;
  --accent-on-dark:#a3b6f7;

  /* Semantic ability badge colors (mirror docs) */
  --b-seo:#3858e9;
  --b-wc:#7b3fb0;
  --b-content:#1e1e1e;
  --b-link:#3858e9;
  --b-lang:#0d9488;
  --b-img:#c2410c;

  /* Typography scale */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-md:16px;
  --fs-lg:18px;
  --fs-xl:21px;
  --fs-2xl:24px;
  --fs-3xl:36px;
  --fs-4xl:50px;
  --lh-base:1.65;
  --lh-tight:1.2;

  /* Spacing scale */
  --sp-1:4px;  --sp-2:5px;  --sp-3:10px; --sp-4:15px;
  --sp-5:16px; --sp-6:19px; --sp-7:20px; --sp-8:22px;

  /* Radius */
  --radius-xs:2px;
  --radius-sm:9999px;
  --radius-md:8px;
  --radius-lg:14px;

  /* Motion */
  --motion-instant:100ms;
  --motion-sm:180ms;

  /* Layout */
  --container-wide:1200px;
  --container-narrow:960px;
  --nav-h:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-family);
  font-size:var(--fs-md);
  font-weight:400;
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent-deep);text-decoration:none;transition:color var(--motion-instant) ease;}
a:hover{color:var(--accent);}

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

/* ---------- Focus-visible (WCAG 2.2 AA) ---------- */
:focus{outline:none;}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.surface-dark a:focus-visible,
.surface-dark button:focus-visible,
.surface-dark summary:focus-visible{
  outline-color:#fff;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;
  padding:var(--sp-3) var(--sp-5);
  font-weight:600;font-size:var(--fs-sm);
  border-radius:var(--radius-md);
  z-index:200;
}
.skip-link:focus{left:var(--sp-5);top:var(--sp-5);}

/* ---------- Container ---------- */
.container{
  width:100%;max-width:var(--container-wide);
  margin:0 auto;padding:0 32px;
}
.container--narrow{max-width:var(--container-narrow);}

/* ---------- Sticky nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(247,248,250,.85);
  border-bottom:1px solid transparent;
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  transition:background var(--motion-sm) ease,border-color var(--motion-sm) ease;
}
.site-nav.is-scrolled{
  background:rgba(247,248,250,.95);
  border-bottom-color:var(--line);
}
.site-nav__inner{
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);
}
.brand-link{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-weight:700;font-size:var(--fs-lg);
  color:var(--ink);
  letter-spacing:-.01em;
}
.brand-link:hover{color:var(--ink);}
.brand-link img{width:28px;height:28px;flex-shrink:0;}
/* Desktop nav layout: brand on left, drawer (links + CTA) grouped on right. */
.nav-drawer{
  display:flex;align-items:center;gap:var(--sp-7);
}
.nav-links{
  display:flex;align-items:center;gap:var(--sp-7);
  list-style:none;margin:0;padding:0;
}
.nav-links a{
  color:var(--ink-soft);font-size:var(--fs-sm);font-weight:500;
  padding:8px 4px;
}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  display:inline-flex;align-items:center;
}

/* Hamburger button — three short lines that morph into an X when open.
   Hidden on desktop; the only thing visible on mobile next to the brand. */
.menu-btn{
  display:none;
  align-items:center;gap:8px;
  background:transparent;border:1px solid var(--line-strong);
  color:var(--ink);font-family:inherit;font-weight:600;font-size:var(--fs-sm);
  padding:8px 14px;border-radius:0;
  cursor:pointer;
  transition:border-color var(--motion-instant) ease,background var(--motion-instant) ease;
}
.menu-btn:hover{border-color:var(--ink-soft);background:var(--paper-2);}
.menu-btn__lines{
  position:relative;
  width:18px;height:12px;
  display:inline-block;
  flex-shrink:0;
}
.menu-btn__lines span{
  position:absolute;left:0;
  width:100%;height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform var(--motion-sm) cubic-bezier(.2,.7,.2,1),
             opacity var(--motion-instant) ease,
             top var(--motion-sm) cubic-bezier(.2,.7,.2,1);
}
.menu-btn__lines span:nth-child(1){top:0;}
.menu-btn__lines span:nth-child(2){top:5px;}
.menu-btn__lines span:nth-child(3){top:10px;}
.menu-btn[aria-expanded="true"] .menu-btn__lines span:nth-child(1){
  top:5px;transform:rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-btn__lines span:nth-child(2){
  opacity:0;
}
.menu-btn[aria-expanded="true"] .menu-btn__lines span:nth-child(3){
  top:5px;transform:rotate(-45deg);
}

/* ---------- Buttons (WordPress.org style — flat, square corners) ----------
   Solid fill, 0 radius, no shadows. Hover only changes background + border
   colour. Matches the `Get WordPress` button on wordpress.org. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:var(--fs-sm);
  padding:7px 22px;
  border-radius:0;
  border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background var(--motion-instant) ease,border-color var(--motion-instant) ease,color var(--motion-instant) ease;
  white-space:nowrap;
}
.btn--primary{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.btn--primary:hover{
  background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;
}
.btn--ghost{
  background:transparent;color:var(--ink);border-color:var(--line-strong);
}
.btn--ghost:hover{
  border-color:var(--ink);background:var(--paper-2);color:var(--ink);
}
.btn--on-dark{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.32);
}
.btn--on-dark:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;
}
.btn--lg{
  font-size:var(--fs-md);padding:14px 28px;
}

/* ---------- Sections base ---------- */
section{padding:96px 0;}
.section-head{
  text-align:center;margin-bottom:56px;
  max-width:760px;margin-left:auto;margin-right:auto;
}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;
  background:var(--accent-wash);
  padding:6px var(--sp-4);
  border-radius:var(--radius-sm);
  border:1px solid #c0d0fb;
  margin-bottom:var(--sp-5);
}
.section-title{
  font-size:var(--fs-3xl);
  font-weight:700;letter-spacing:-.025em;
  margin:0 0 var(--sp-4);
  line-height:var(--lh-tight);
  color:var(--ink);
  text-wrap:balance;            /* avoid orphan/widow on multi-line titles */
}
.section-sub{
  font-size:var(--fs-lg);color:var(--ink-soft);
  margin:0;line-height:1.5;
  text-wrap:pretty;             /* avoid lone last-line word on intro copy */
}

/* Dark section variant */
.surface-dark{
  background:var(--surface-dark);color:var(--ink-on-dark);
}
.surface-dark .section-title{color:var(--ink-on-dark);}
.surface-dark .section-sub{color:var(--ink-on-dark-soft);}
.surface-dark .section-eyebrow{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.16);
}

/* ---------- Hero ---------- */
.hero{
  padding:96px 0 112px;
  background:var(--surface-dark);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(56,88,233,.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(56,88,233,.18), transparent 70%);
  color:var(--ink-on-dark);
  position:relative;overflow:hidden;
  isolation:isolate;          /* establishes a fresh stacking context */
}
/* WebGL canvas sits behind everything, edge to edge. The shader has its
   own vignette + flow-noise field — no separate overlay needed. */
.hero__canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
  display:block;
}
.hero__inner{
  max-width:880px;margin:0 auto;text-align:center;
  position:relative;
  z-index:2;                  /* lifts text above the shader canvas */
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;font-weight:700;
  background:rgba(255,255,255,.08);
  padding:6px var(--sp-4);
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.18);
  margin-bottom:var(--sp-7);
}
.hero__eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:#52f29a;box-shadow:0 0 0 4px rgba(82,242,154,.18);
}
.hero h1{
  font-size:clamp(var(--fs-3xl),5.5vw,var(--fs-4xl));
  font-weight:800;letter-spacing:-.035em;
  margin:0 0 var(--sp-7);line-height:1.04;
  color:var(--ink-on-dark);
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--accent-on-dark);}
.hero__sub{
  font-size:var(--fs-lg);
  color:var(--ink-on-dark-soft);
  margin:0 auto var(--sp-8);
  max-width:660px;line-height:1.55;
}
.hero__ctas{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);
  margin-bottom:var(--sp-7);
}

/* "Watch demo" trigger below the CTAs.
   Pill button on the hero with a play icon that emits a soft pulse ring
   to draw the eye without being noisy. Hover lights up the icon with
   the accent blue glow and slows the pulse for a focused state. */
.hero__video-trigger{
  display:inline-flex;align-items:center;gap:12px;
  margin:0 auto 36px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);font-weight:500;
  color:var(--ink-on-dark-soft);
  padding:6px 14px 6px 6px;
  transition:color var(--motion-instant) ease;
}
.hero__video-trigger:hover,
.hero__video-trigger:focus-visible{
  color:#fff;
}

/* The icon disk + its pulsing rings live in this wrapper so the rings
   can render outside the visible 32px without affecting layout. */
.hero__video-trigger-icon{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  flex-shrink:0;
  box-shadow:0 4px 14px -4px rgba(56,88,233,.6);
  transition:background var(--motion-instant) ease,
             color var(--motion-instant) ease,
             transform var(--motion-sm) cubic-bezier(.2,.7,.2,1),
             box-shadow var(--motion-sm) ease;
}
/* Two concentric pulse rings, offset in time so the ripple feels
   continuous rather than a single beat. */
.hero__video-trigger-icon::before,
.hero__video-trigger-icon::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:1px solid rgba(163,182,247,.55);
  pointer-events:none;
  animation:video-trigger-pulse 2.4s cubic-bezier(.2,.7,.2,1) infinite;
}
.hero__video-trigger-icon::after{
  animation-delay:1.2s;
}
@keyframes video-trigger-pulse{
  0%   { transform:scale(.95); opacity:.85; }
  80%  { transform:scale(1.85); opacity:0; }
  100% { transform:scale(1.85); opacity:0; }
}
.hero__video-trigger-icon svg{
  width:13px;height:13px;margin-left:2px;     /* nudge play triangle visually centred */
  position:relative;z-index:1;
}

/* Hover state — icon brightens + scales up, rings fan out faster. */
.hero__video-trigger:hover .hero__video-trigger-icon,
.hero__video-trigger:focus-visible .hero__video-trigger-icon{
  background:#fff;color:var(--accent-deep);
  transform:scale(1.1);
  box-shadow:0 6px 22px -4px rgba(56,88,233,.9),0 0 0 1px rgba(255,255,255,.6);
}
.hero__video-trigger:hover .hero__video-trigger-icon::before,
.hero__video-trigger:focus-visible .hero__video-trigger-icon::before,
.hero__video-trigger:hover .hero__video-trigger-icon::after,
.hero__video-trigger:focus-visible .hero__video-trigger-icon::after{
  border-color:rgba(255,255,255,.7);
  animation-duration:1.6s;
}
/* Reduced motion: kill the infinite ring animation entirely. The icon
   still works as a button — just no looping pulse. */
@media (prefers-reduced-motion: reduce){
  .hero__video-trigger-icon::before,
  .hero__video-trigger-icon::after{
    animation:none;opacity:0;
  }
}

.hero__pills{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);
}
.hero__pill{
  font-size:var(--fs-xs);font-weight:500;
  color:var(--ink-on-dark-soft);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:6px var(--sp-4);
  border-radius:var(--radius-sm);
}
.hero__pill b{color:#fff;font-weight:700;}

/* ---------- Abilities grid ---------- */
.abilities-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-7);
}
.ability-card{
  background:var(--paper-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  display:flex;flex-direction:column;gap:var(--sp-4);
  transition:border-color var(--motion-sm) ease,transform var(--motion-sm) ease,box-shadow var(--motion-sm) ease;
}
.ability-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 12px 28px -16px rgba(56,88,233,.35);
}
.ability-badge{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-sm);
  background:var(--b-content);color:#fff;
  align-self:flex-start;
}
.ability-badge--seo{background:var(--b-seo);}
.ability-badge--wc{background:var(--b-wc);}
.ability-badge--link{background:var(--b-link);}
.ability-badge--lang{background:var(--b-lang);}
.ability-badge--img{background:var(--b-img);}
.ability-card h3{
  font-size:var(--fs-xl);font-weight:700;
  margin:0;letter-spacing:-.01em;
  color:var(--ink);
}
.ability-card p{
  margin:0;color:var(--ink-soft);font-size:var(--fs-md);
}

/* ---------- Trust section (Change Report / Rollback / Refine) ---------- */
.section--trust{
  background:var(--paper-tint);
  position:relative;
}
.trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-7);
}
.trust-card{
  background:var(--paper-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.trust-card__icon{
  width:48px;height:48px;flex-shrink:0;
  border-radius:12px;
  background:var(--accent-wash);
  color:var(--accent-deep);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;
}
.trust-card h3{
  font-size:var(--fs-xl);font-weight:700;margin:0;
  letter-spacing:-.01em;color:var(--ink);
}
.trust-card > p{
  margin:0;color:var(--ink-soft);font-size:var(--fs-md);
}
.trust-card ul{
  list-style:none;margin:auto 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.trust-card ul li{
  position:relative;padding-left:24px;
  font-size:var(--fs-sm);color:var(--ink-soft);
  line-height:1.5;
}
.trust-card ul li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:var(--radius-xs);
  background:var(--accent);transform:rotate(45deg);
}

/* ---------- Screenshots gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-7);
}
.gallery__item{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--paper-elev);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:0;overflow:hidden;
  cursor:pointer;
  font-family:inherit;text-align:left;
  transition:border-color var(--motion-sm) cubic-bezier(.2,.7,.2,1),
             transform var(--motion-sm) cubic-bezier(.2,.7,.2,1),
             box-shadow var(--motion-sm) cubic-bezier(.2,.7,.2,1);
}
.gallery__item:hover,
.gallery__item:focus-visible{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 12px 28px -14px rgba(56,88,233,.4);
}
.gallery__item img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/10;
  object-fit:cover;object-position:top left;
  background:var(--paper-2);
  transition:transform 400ms cubic-bezier(.2,.7,.2,1);
}
.gallery__item:hover img,
.gallery__item:focus-visible img{
  transform:scale(1.02);
}
.gallery__caption{
  display:block;
  padding:14px 18px;
  font-size:var(--fs-sm);font-weight:600;
  color:var(--ink);
  border-top:1px solid var(--line);
  background:var(--paper-elev);
}

/* ---------- Lightbox dialog ---------- */
.lightbox{
  /* Wide stage — clamp to viewport with comfortable margins. */
  max-width:min(1200px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  width:auto;
  padding:0;margin:auto;
  border:none;
  background:transparent;
  color:#fff;
  overflow:visible;
}
.lightbox::backdrop{
  background:rgba(15,15,18,.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* Native <dialog> animation — fade + scale in when opened. */
.lightbox[open]{
  animation:lightbox-in 220ms cubic-bezier(.2,.7,.2,1);
}
.lightbox[open]::backdrop{
  animation:lightbox-backdrop-in 220ms ease-out;
}
@keyframes lightbox-in{
  from{opacity:0;transform:scale(.96);}
  to{opacity:1;transform:none;}
}
@keyframes lightbox-backdrop-in{
  from{opacity:0;}
  to{opacity:1;}
}
.lightbox__stage{
  margin:0;padding:0;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
}
.lightbox__img{
  display:block;max-width:100%;
  max-height:calc(100vh - 140px);
  width:auto;height:auto;
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  background:#fff;
}
.lightbox__caption{
  color:rgba(255,255,255,.8);
  font-size:var(--fs-sm);
  letter-spacing:.04em;
  text-align:center;
}

/* Lightbox controls — close (top-right) + prev/next (sides). */
.lightbox__close,
.lightbox__nav{
  position:fixed;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  cursor:pointer;
  font-family:inherit;
  transition:background var(--motion-instant) ease,
             border-color var(--motion-instant) ease,
             transform var(--motion-instant) ease;
  z-index:2;
}
.lightbox__close:hover,
.lightbox__nav:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
}
.lightbox__close:active,
.lightbox__nav:active{
  transform:scale(.95);
}
.lightbox__close{top:20px;right:20px;}
.lightbox__nav--prev{left:20px;top:50%;transform:translateY(-50%);}
.lightbox__nav--next{right:20px;top:50%;transform:translateY(-50%);}
.lightbox__nav--prev:active{transform:translateY(-50%) scale(.95);}
.lightbox__nav--next:active{transform:translateY(-50%) scale(.95);}
.lightbox__close svg,
.lightbox__nav svg{width:20px;height:20px;}
/* Disabled state (gallery has no wraparound when only one image is shown) */
.lightbox__nav[hidden]{display:none;}

/* ---------- Video lightbox (hero demo) ---------- */
.video-lightbox{
  max-width:min(1100px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  width:auto;
  padding:0;margin:auto;
  border:none;
  background:transparent;
  color:#fff;
  overflow:visible;
}
.video-lightbox::backdrop{
  background:rgba(15,15,18,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.video-lightbox[open]{
  animation:video-lightbox-in 420ms cubic-bezier(.2,1.05,.4,1);  /* slight overshoot */
}
.video-lightbox[open]::backdrop{
  animation:video-backdrop-in 300ms ease-out;
}
@keyframes video-lightbox-in{
  0%   { opacity:0; transform:scale(.5) translateY(20px); filter:blur(8px); }
  60%  { opacity:1; transform:scale(1.02) translateY(0);  filter:blur(0); }
  100% { opacity:1; transform:scale(1);    translateY(0);  filter:blur(0); }
}
@keyframes video-backdrop-in{
  from { opacity:0; }
  to   { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .video-lightbox[open],
  .video-lightbox[open]::backdrop{
    animation:none;
  }
}
.video-lightbox__stage{
  position:relative;
  width:min(1100px,calc(100vw - 48px));
  aspect-ratio:16 / 9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}
.video-lightbox__player{
  width:100%;height:100%;
  display:block;
  background:#000;
}
.video-lightbox__close{
  position:fixed;top:20px;right:20px;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  cursor:pointer;
  font-family:inherit;
  transition:background var(--motion-instant) ease,
             border-color var(--motion-instant) ease,
             transform var(--motion-instant) ease;
  z-index:2;
}
.video-lightbox__close:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
}
.video-lightbox__close:active{transform:scale(.95);}
.video-lightbox__close svg{width:20px;height:20px;}

@media (max-width:560px){
  .video-lightbox__close{top:12px;right:12px;width:40px;height:40px;}
}

/* ---------- FAQ ---------- */
.faq-list{
  max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--paper-elev);
  overflow:hidden;
  transition:border-color var(--motion-sm) ease;
}
.faq-item[open]{border-color:var(--accent);}
.faq-item summary{
  list-style:none;cursor:pointer;
  padding:20px 24px;
  font-weight:600;font-size:var(--fs-md);
  color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-size:24px;font-weight:400;
  color:var(--ink-faint);
  transition:transform var(--motion-sm) ease,color var(--motion-instant) ease;
  line-height:1;
}
.faq-item[open] summary::after{
  content:"−";color:var(--accent);
}
.faq-item summary:hover{color:var(--accent-deep);}
.faq-item__body{
  padding:0 24px 22px;
  color:var(--ink-soft);font-size:var(--fs-md);
  line-height:var(--lh-base);
}
.faq-item__body p{margin:0;}
.faq-item__body p + p{margin-top:12px;}

/* ---------- Final CTA ---------- */
.section--final{
  background:var(--surface-dark);
  background-image:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(56,88,233,.32), transparent 70%);
  color:var(--ink-on-dark);
  text-align:center;
}
.section--final h2{
  font-size:clamp(var(--fs-2xl),4vw,var(--fs-3xl));
  font-weight:800;letter-spacing:-.025em;
  margin:0 0 var(--sp-4);line-height:1.1;
  color:#fff;max-width:760px;margin-left:auto;margin-right:auto;
  text-wrap:balance;
}
.section--final p.lead{
  font-size:var(--fs-lg);color:var(--ink-on-dark-soft);
  margin:0 auto 36px;max-width:560px;
}
.section--final .btn--primary{
  background:#fff;color:var(--accent-deep);border-color:#fff;
}
.section--final .btn--primary:hover{
  background:var(--accent-wash);color:var(--accent-deep);border-color:var(--accent-wash);
}
.section--final .footnote{
  margin-top:var(--sp-7);
  font-size:var(--fs-xs);
  color:var(--ink-on-dark-faint);
  letter-spacing:.04em;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:40px 0 56px;
  background:var(--paper);
}
.site-footer__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);flex-wrap:wrap;
}
.site-footer .brand-link{font-size:var(--fs-md);}
.footer-links{
  display:flex;gap:var(--sp-7);
  list-style:none;margin:0;padding:0;
  font-size:var(--fs-sm);
}
.footer-links a{color:var(--ink-soft);}
.footer-links a:hover{color:var(--ink);}
.footer-copy{
  font-size:var(--fs-xs);color:var(--ink-faint);
  letter-spacing:.02em;
}

/* ---------- Mobile drawer ---------- */
.scrim{
  display:none;
  position:fixed;inset:0;
  background:rgba(30,30,30,.45);z-index:90;
}
.scrim.show{display:block;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .abilities-grid,
  .trust-grid,
  .gallery{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:768px){
  section{padding:72px 0;}
  .hero{padding:72px 0 88px;}
  .container{padding:0 22px;}

  /* Mobile header: brand on the left, hamburger on the right.
     Everything else (nav links + CTA) moves into the drawer panel. */
  .menu-btn{display:inline-flex;}
  .nav-drawer{
    display:block;
    /* Position the drawer as a fixed sheet below the nav so it survives
       scroll position and never overlaps the page logo. */
    position:fixed;left:0;right:0;top:var(--nav-h);
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 16px 32px -18px rgba(0,0,0,.22);
    padding:14px 22px 22px;
    /* Hidden by default — slide + fade in when .is-open is added. */
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity 180ms ease,transform 220ms cubic-bezier(.2,.7,.2,1),visibility 220ms ease;
    /* Constrain height so very small viewports still get scrollable menu. */
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .nav-drawer.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .nav-drawer .nav-links{
    display:flex;flex-direction:column;
    gap:0;
    margin:0;padding:0;
  }
  .nav-drawer .nav-links li{
    border-bottom:1px solid var(--line);
  }
  .nav-drawer .nav-links li:last-child{
    border-bottom:none;
  }
  .nav-drawer .nav-links a{
    display:block;
    font-size:var(--fs-md);
    font-weight:500;
    color:var(--ink);
    padding:14px 4px;
    transition:color var(--motion-instant) ease,padding-left var(--motion-sm) cubic-bezier(.2,.7,.2,1);
  }
  .nav-drawer .nav-links a:hover,
  .nav-drawer .nav-links a:focus-visible{
    color:var(--accent-deep);
    padding-left:8px;
  }
  .nav-drawer .nav-cta{
    display:block;
    margin-top:18px;
  }
  .nav-drawer .nav-cta .btn{
    width:100%;
    justify-content:center;
    padding:13px 22px;
  }

  .site-footer__inner{
    flex-direction:column;align-items:flex-start;text-align:left;
  }
}
@media (max-width:560px){
  .abilities-grid,
  .trust-grid,
  .gallery{
    grid-template-columns:1fr;
  }
  /* Tighter lightbox controls on tiny screens — keep them tappable
     but pull in from the edges so they don't crowd the image. */
  .lightbox__close{top:12px;right:12px;width:40px;height:40px;}
  .lightbox__nav--prev{left:8px;width:40px;height:40px;}
  .lightbox__nav--next{right:8px;width:40px;height:40px;}
  .hero h1{font-size:var(--fs-3xl);}
  .section-title{font-size:var(--fs-2xl);}
  .ability-card,
  .trust-card{padding:24px;}
  .hero__ctas .btn{width:100%;}
}

/* ---------- Scroll-reveal animations ----------
   Sections + cards fade-up the first time they enter the viewport.
   JS adds [data-revealed="true"] via IntersectionObserver. Once shown,
   the attribute stays — no jitter when the user scrolls back up. */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 600ms cubic-bezier(.2,.7,.2,1),transform 600ms cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.reveal[data-revealed="true"]{
  opacity:1;
  transform:none;
}

/* Staggered children — used on grid + faq-list so cards rise one by one. */
.reveal-stagger > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 520ms cubic-bezier(.2,.7,.2,1),transform 520ms cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.reveal-stagger[data-revealed="true"] > *{
  opacity:1;
  transform:none;
}
.reveal-stagger[data-revealed="true"] > *:nth-child(1){transition-delay:0ms;}
.reveal-stagger[data-revealed="true"] > *:nth-child(2){transition-delay:70ms;}
.reveal-stagger[data-revealed="true"] > *:nth-child(3){transition-delay:140ms;}
.reveal-stagger[data-revealed="true"] > *:nth-child(4){transition-delay:210ms;}
.reveal-stagger[data-revealed="true"] > *:nth-child(5){transition-delay:280ms;}
.reveal-stagger[data-revealed="true"] > *:nth-child(6){transition-delay:350ms;}

/* ---------- Hero text reveal stage ----------
   GSAP (hero-scene.js) drives all hero entrance animations now —
   eyebrow, H1 per-character cascade, sub, CTAs, pills. CSS here only
   provides the per-character split host requirements + the reduced-motion
   safety net so content stays visible when JS/GSAP are unavailable. */
.text-animation-title{
  display:inline-block;
  transform-style:preserve-3d;
}
/* Each word is its own inline-block + nowrap so the character spans
   inside it never break mid-word ("item" stays together). Whole words
   still wrap to the next line normally between word wrappers. */
.text-animation-word{
  display:inline-block;
  white-space:nowrap;
}
.text-animation-unit{
  display:inline-block;
  white-space:pre;
  transform-origin:50% 55%;
  backface-visibility:hidden;
  will-change:transform,opacity,filter;
}

/* ---------- Back to top button ---------- */
.back-to-top{
  position:fixed;
  right:24px;bottom:24px;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  border:none;cursor:pointer;
  font-family:inherit;font-size:18px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -10px rgba(56,88,233,.55),0 2px 6px rgba(0,0,0,.08);
  opacity:0;visibility:hidden;
  transform:translateY(16px) scale(.92);
  transition:opacity 220ms ease,transform 220ms cubic-bezier(.2,.7,.2,1),visibility 220ms ease,background var(--motion-instant) ease,box-shadow var(--motion-instant) ease;
  z-index:90;
}
.back-to-top.is-visible{
  opacity:1;visibility:visible;
  transform:none;
}
.back-to-top:hover{
  background:var(--accent-deep);
  box-shadow:0 14px 32px -10px rgba(56,88,233,.7),0 3px 8px rgba(0,0,0,.12);
}
.back-to-top:active{
  transform:translateY(1px);
}
.back-to-top svg{
  width:18px;height:18px;
}

/* ---------- Smooth ability/trust card lift on hover (subtle polish) ---------- */
/* (Existing rules already animate via transition: border-color/transform/box-shadow
   — adding here so the easing curve matches reveal animation.) */
.ability-card,
.trust-card{
  transition-timing-function:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* When the user opts out of motion, show revealed content immediately
     so they don't see invisible / half-transformed sections. */
  .reveal,
  .reveal-stagger > *,
  .hero__inner > *,
  .text-animation-unit{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}