/* ============================================================================
   NEXXEN LTD — MIDNIGHT AURORA GLASSMORPHISM · core.css
   Shared design system: tokens · aurora layers · glass components · nav · footer
   · buttons · cards · pricing · stats · explorer · cursor · transitions · reveals
   Dark theme · WCAG-safe light-on-dark · Awwwards-tier frosted glass.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 · TOKENS
---------------------------------------------------------------------------- */
:root{
  /* Base — deep obsidian */
  --bg:#070812;
  --bg-2:#0a0c1a;
  --bg-3:#0e1124;

  /* Aurora accents (cool — background glow + gradients only, never body text) */
  --aur-indigo:#6d5cff;
  --aur-violet:#9b6bff;
  --aur-cyan:#38d2ff;
  --aur-emerald:#2fe3b4;

  /* Gold — signature warm accent (matches the logo). CTAs · hairlines · key words · focus */
  --gold:#f3c14e;
  --gold-2:#e7a23a;
  --gold-soft:rgba(243,193,78,0.16);
  --gold-glow:rgba(243,193,78,0.45);

  /* Text on dark */
  --text:#eef1ff;
  --text-soft:#aeb6da;
  --text-mute:#8b93b8;     /* >=4.5:1 on --bg (verified ~5.1:1) */

  /* Glass */
  --glass:rgba(255,255,255,0.055);
  --glass-2:rgba(255,255,255,0.09);
  --glass-3:rgba(255,255,255,0.13);
  --glass-bd:rgba(255,255,255,0.14);
  --glass-bd-soft:rgba(255,255,255,0.08);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,0.18);
  --glass-blur:blur(16px) saturate(140%);
  --glass-blur-card:blur(8px) saturate(140%);   /* lighter blur for in-flow cards (scroll perf) */
  --scrim:linear-gradient(rgba(7,8,18,0.55),rgba(7,8,18,0.55));  /* guaranteed dark scrim under glass text */

  /* Shadows / depth */
  --shadow-glass:0 8px 32px rgba(0,0,0,0.45);
  --shadow-lift:0 24px 64px rgba(0,0,0,0.55);
  --shadow-gold:0 10px 40px rgba(243,193,78,0.28);

  /* Concentric squircle radii */
  --r-xs:10px;
  --r-sm:14px;
  --r-md:20px;
  --r-lg:24px;
  --r-xl:32px;
  --r-2xl:40px;
  --r-pill:999px;

  /* Spacing rhythm (heavy whitespace) */
  --sp-1:0.5rem;
  --sp-2:1rem;
  --sp-3:1.5rem;
  --sp-4:2rem;
  --sp-5:3rem;
  --sp-6:4rem;
  --sp-7:6rem;
  --sp-8:8rem;

  /* Type */
  --font-display:"Clash Display","Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* Motion — custom cubic-beziers (never linear/ease) */
  --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:0.35s;
  --dur:0.6s;
  --dur-slow:0.9s;

  --nav-h:74px;
  --maxw:1240px;
}

/* ----------------------------------------------------------------------------
   2 · RESET / BASE
---------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--gold-soft);color:var(--text)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-0.02em;color:var(--text)}
h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:600}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.85rem)}
p{color:var(--text-soft)}

/* Gold→white gradient text-fill — decorative keywords only (never body/data) */
.grad-gold{
  background:linear-gradient(120deg,var(--gold) 0%,var(--gold-2) 30%,#fff 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ----------------------------------------------------------------------------
   3 · LAYOUT HELPERS
---------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.section{padding-block:clamp(4rem,9vw,7rem);position:relative;z-index:1}
.section--tight{padding-block:clamp(2.5rem,6vw,4rem)}
/* first section on every page must clear the fixed glass nav (fixes hero tucking under nav on About/Smart-Home mobile) */
main>.section:first-of-type{padding-top:clamp(6.5rem,15vw,9rem)}
.center{text-align:center}
.stack>*+*{margin-top:var(--sp-3)}

/* Eyebrow pill */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  padding:.5rem 1rem;border-radius:var(--r-pill);
  background:var(--gold-soft);border:1px solid rgba(243,193,78,0.28);
  box-shadow:var(--glass-hi);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-glow)}

/* Section header */
.section-header{max-width:660px;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-header.center{margin-inline:auto}
.section-header .eyebrow{margin-bottom:1.25rem}
.section-header p{margin-top:1.1rem;font-size:1.075rem;color:var(--text-soft)}

/* ----------------------------------------------------------------------------
   4 · AURORA BACKGROUND LAYERS
   WebGL canvas mounts into #aurora-canvas; CSS fallback always present beneath.
---------------------------------------------------------------------------- */
#aurora-root{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg)}
#aurora-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* CSS aurora fallback (also the base layer below the canvas) */
.aurora-fallback{position:absolute;inset:0;overflow:hidden}
.aurora-fallback::before,
.aurora-fallback::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;
  mix-blend-mode:screen;
}
.aurora-fallback::before{
  width:60vw;height:60vw;top:-15vw;left:-10vw;
  background:radial-gradient(circle at 30% 30%,var(--aur-indigo),transparent 60%),
             radial-gradient(circle at 70% 70%,var(--aur-violet),transparent 60%);
  animation:auroraDrift 26s var(--ease-in-out) infinite alternate;
}
.aurora-fallback::after{
  width:55vw;height:55vw;bottom:-18vw;right:-8vw;
  background:radial-gradient(circle at 40% 40%,var(--aur-cyan),transparent 60%),
             radial-gradient(circle at 60% 60%,var(--aur-emerald),transparent 62%);
  animation:auroraDrift2 32s var(--ease-in-out) infinite alternate;
}
@keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8vw,6vw,0) scale(1.18)}}
@keyframes auroraDrift2{0%{transform:translate3d(0,0,0) scale(1.1)}100%{transform:translate3d(-7vw,-5vw,0) scale(.95)}}

/* vignette + grain overlay (sits above fallback, below content) */
#aurora-root .veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(7,8,18,.55) 100%),
    radial-gradient(100% 100% at 50% 120%,rgba(7,8,18,.7),transparent 60%);
}
#aurora-root .grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  .aurora-fallback::before,.aurora-fallback::after{animation:none}
}

/* Floating glass orbs (parallax, fresnel-look) */
/* Greek-key infinity motifs — drift + breathe at different sizes, merging into the aurora */
.bg-motif{
  position:absolute;pointer-events:none;
  background-image:url("../img/bg-infinity-gold.png");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  aspect-ratio:710/1500;opacity:.06;will-change:transform;
}
@keyframes motifA{0%,100%{transform:rotate(var(--rot,0deg)) scale(1)}50%{transform:rotate(calc(var(--rot,0deg) + 5deg)) scale(1.06)}}
@keyframes motifB{0%,100%{transform:rotate(var(--rot,0deg)) scale(1.05)}50%{transform:rotate(calc(var(--rot,0deg) - 6deg)) scale(.97)}}
@keyframes motifC{0%,100%{opacity:.04;transform:rotate(var(--rot,0deg)) scale(1)}50%{opacity:.09;transform:rotate(calc(var(--rot,0deg) + 3deg)) scale(1.03)}}
.motif-a{animation:motifA 46s var(--ease-in-out) infinite}
.motif-b{animation:motifB 58s var(--ease-in-out) infinite}
.motif-c{animation:motifC 34s var(--ease-in-out) infinite}
@media (prefers-reduced-motion:reduce){.bg-motif{animation:none!important}}

/* ----------------------------------------------------------------------------
   5 · GLASS PRIMITIVES
---------------------------------------------------------------------------- */
.glass{
  background:var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);
  -webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-glass),var(--glass-hi);
}

/* Double-bezel glass card: outer shell + inner core */
.card{
  position:relative;
  background:var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);
  -webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-glass),var(--glass-hi);
  padding:1.75rem;
  overflow:hidden;
  transition:transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
/* sheen overlay on hover */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,0.10),transparent 38%);
  opacity:0;transition:opacity var(--dur) var(--ease-out);
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0.22);
  box-shadow:var(--shadow-lift),var(--glass-hi);
}
.card:hover::after{opacity:1}

/* inner core — concentric squircle, inset highlight */
.card__core{
  position:relative;z-index:1;
  border-radius:var(--r-md);
}
.card--cored .card__core{
  background:rgba(255,255,255,0.035);
  border:1px solid var(--glass-bd-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
  padding:1.5rem;
}
.card__icon{
  width:52px;height:52px;border-radius:var(--r-sm);
  display:grid;place-items:center;margin-bottom:1.1rem;
  background:var(--gold-soft);border:1px solid rgba(243,193,78,0.28);
  color:var(--gold);box-shadow:var(--glass-hi);
}
.card__icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}
.card h3{margin-bottom:.6rem}
.card p{font-size:.97rem;color:var(--text-soft)}

/* ----------------------------------------------------------------------------
   6 · BUTTONS
---------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-body);font-weight:600;font-size:.97rem;
  padding:.95rem 1.5rem;border-radius:var(--r-pill);
  position:relative;will-change:transform;
  transition:transform var(--dur-fast) var(--ease-spring),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
/* While a magnetic CTA is engaged, JS writes el.style.transform on every
   pointermove — decouple it from the 0.35s springy hover tween so the magnet
   tracks the cursor tightly instead of rubber-banding. JS toggles .is-magnetic
   on pointerenter/pointerleave. */
.btn.is-magnetic{
  transition:transform 0.08s linear,
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}

/* Gold "button-in-button" primary — nested circular icon */
.btn-gold{
  background:linear-gradient(120deg,var(--gold),var(--gold-2));
  color:#1a1405;
  padding:.5rem .5rem .5rem 1.5rem;
  box-shadow:var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-gold .btn__label{padding-block:.35rem}
.btn-gold .btn__icon{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:rgba(26,20,5,0.92);color:var(--gold);
  transition:transform var(--dur-fast) var(--ease-spring);
}
.btn-gold .btn__icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 50px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,0.5)}
.btn-gold:hover .btn__icon{transform:translateX(3px) rotate(-8deg)}

/* Ghost glass button */
.btn-ghost{
  background:var(--glass);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-bd);
  color:var(--text);
  box-shadow:var(--glass-hi);
  padding:.95rem 1.6rem;
}
.btn-ghost:hover{transform:translateY(-2px);background:var(--glass-2);border-color:rgba(255,255,255,0.24)}

/* magnetic hook target uses data-magnetic in JS; respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  .btn,.btn.is-magnetic,.btn-gold .btn__icon{transition:none}
  .btn:hover{transform:none}
}

/* ----------------------------------------------------------------------------
   6b · LOGO "FUSE" — living gold logo (gentle float + pulsing glow + light sheen
   that sweeps across the gold, masked to the logo silhouette). GPU-only props.
---------------------------------------------------------------------------- */
.logo-fuse{position:relative;display:inline-block;line-height:0;isolation:isolate}
.logo-fuse img{
  display:block;
  animation:logoFloat 6.5s var(--ease-in-out) infinite,
            logoGlow 4.2s var(--ease-in-out) infinite;
}
/* sheen sweep, clipped to the exact logo shape via the same PNG as a mask */
.logo-fuse::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  -webkit-mask:url("../img/nexxen-logo.png") center/contain no-repeat;
          mask:url("../img/nexxen-logo.png") center/contain no-repeat;
  background:linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,0.85) 49%,
    rgba(255,241,204,0.6) 53%,
    transparent 62%);
  background-size:250% 100%;
  mix-blend-mode:screen;
  animation:logoSheen 5s var(--ease-in-out) infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.045)}}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 22px rgba(243,193,78,0.30))}
  50%{filter:drop-shadow(0 0 46px rgba(243,193,78,0.60))}
}
@keyframes logoSheen{0%,100%{background-position:210% 0}55%{background-position:-70% 0}}
@media (prefers-reduced-motion:reduce){
  .logo-fuse img{animation:none;filter:drop-shadow(0 0 22px rgba(243,193,78,0.30))}
  .logo-fuse::after{animation:none;opacity:0}
}

/* ----------------------------------------------------------------------------
   7 · STATS
---------------------------------------------------------------------------- */
.stat{text-align:center;padding:1.5rem 1rem}
.stat__num{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;
  letter-spacing:-0.02em;
}
.stat__label{
  margin-top:.65rem;font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);
}
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.25rem;
}

/* ----------------------------------------------------------------------------
   8 · NAV — fluid glass island
---------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding:clamp(.75rem,2vw,1.1rem) clamp(1rem,4vw,2rem);
  transition:padding var(--dur) var(--ease-out);
}
.nav__island{
  width:100%;max-width:var(--maxw);
  display:flex;align-items:center;gap:1.5rem;
  padding:.6rem .7rem .6rem 1.4rem;
  border-radius:var(--r-pill);
  background:rgba(10,12,26,0.55);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-bd);
  box-shadow:var(--shadow-glass),var(--glass-hi);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.nav.is-scrolled .nav__island{background:rgba(10,12,26,0.78);border-color:rgba(255,255,255,0.18)}

.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo img{
  height:32px;width:auto;
  filter:drop-shadow(0 0 14px var(--gold-glow));
}
/* text wordmark in the nav (logo image is kept only on the home hero) */
.nav__wordmark{
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;
  letter-spacing:.2em;line-height:1;padding-left:.15em;
  background:linear-gradient(120deg,var(--gold),var(--gold-2) 30%,#fff 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.nav__links{
  display:flex;align-items:center;gap:.35rem;margin-inline:auto;
}
.nav__link{
  font-size:.92rem;font-weight:500;color:var(--text-soft);
  padding:.55rem .9rem;border-radius:var(--r-pill);position:relative;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.nav__link:hover{color:var(--text);background:var(--glass)}
.nav__link[aria-current="page"]{color:var(--gold)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:.28rem;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-glow);
}
.nav__cta{flex:0 0 auto}
.nav__cta .btn-gold{padding:.42rem .42rem .42rem 1.2rem;font-size:.9rem}
.nav__cta .btn__icon{width:34px;height:34px}

/* ---- Vertical-solutions nav (multi-domain showcase) ---- */
.nav--verticals{gap:.5rem}
.nav__home{flex:0 0 auto;display:grid;place-items:center;width:42px;height:30px;border-radius:var(--r-pill)}
.nav__home svg{width:40px;height:20px;transition:filter .3s var(--ease-out),transform .35s var(--ease-spring)}
.nav__home:hover svg{filter:drop-shadow(0 0 10px var(--gold-glow));transform:scale(1.06)}
.nav__verticals{display:flex;align-items:center;gap:.1rem;margin-inline:auto;flex-wrap:nowrap}
.vlink{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;position:relative;
  padding:.5rem .7rem;border-radius:var(--r-pill);
  color:var(--text-soft);font-size:.85rem;font-weight:500;
  opacity:0;transform:translateY(-9px);animation:vIn .55s var(--ease-out) forwards;
  transition:color .3s var(--ease-out),background .3s var(--ease-out);
}
.vlink .vico{position:relative;width:18px;height:18px;display:grid;place-items:center;color:var(--gold);flex:0 0 auto}
.vlink .vico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .35s var(--ease-spring)}
.vlink .vico::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%);opacity:0;animation:vWave 7s ease-in-out infinite}
.vlink::after{content:"";position:absolute;left:50%;bottom:.24rem;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:translateX(-50%);transition:width .3s var(--ease-out)}
.vlink:hover{color:var(--text);background:var(--glass)}
.vlink:hover .vico svg{transform:scale(1.2) rotate(-6deg)}
.vlink:hover::after,.vlink[aria-current="page"]::after{width:60%}
.vlink[aria-current="page"]{color:var(--gold)}
.vlink:nth-child(1){animation-delay:.04s}.vlink:nth-child(2){animation-delay:.10s}
.vlink:nth-child(3){animation-delay:.16s}.vlink:nth-child(4){animation-delay:.22s}
.vlink:nth-child(5){animation-delay:.28s}.vlink:nth-child(6){animation-delay:.34s}
.vlink:nth-child(7){animation-delay:.40s}
.vlink:nth-child(1) .vico::before{animation-delay:0s}.vlink:nth-child(2) .vico::before{animation-delay:.5s}
.vlink:nth-child(3) .vico::before{animation-delay:1s}.vlink:nth-child(4) .vico::before{animation-delay:1.5s}
.vlink:nth-child(5) .vico::before{animation-delay:2s}.vlink:nth-child(6) .vico::before{animation-delay:2.5s}
.vlink:nth-child(7) .vico::before{animation-delay:3s}
@keyframes vIn{to{opacity:1;transform:none}}
@keyframes vWave{0%,80%,100%{opacity:0}40%{opacity:.6}}
/* super-futuristic flowing light beneath the vertical solutions */
.nav__verticals{position:relative}
.nav__verticals::after{content:"";position:absolute;left:5%;right:5%;bottom:-3px;height:1px;background:linear-gradient(90deg,transparent,var(--glass-bd),transparent)}
.nav__verticals::before{content:"";position:absolute;bottom:-3px;left:-24%;width:24%;height:1px;z-index:1;background:linear-gradient(90deg,transparent,var(--gold),#fff,var(--gold),transparent);box-shadow:0 0 8px var(--gold-glow);animation:navFlow 5.5s linear infinite}
@keyframes navFlow{0%{left:-24%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.nav__verticals::before{animation:none;opacity:.4}}
@media (max-width:1120px) and (min-width:769px){
  .vlink span:not(.vico){display:none}
  .vlink{padding:.5rem .5rem}
  .nav__verticals{gap:.02rem}
}
@media (prefers-reduced-motion:reduce){
  .vlink{opacity:1;transform:none;animation:none}
  .vlink .vico::before{animation:none}
}

/* Hamburger */
.nav__burger{
  display:none;flex:0 0 auto;width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-bd);
  place-items:center;position:relative;
}
.nav__burger span{
  position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:var(--text);
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out),top var(--dur-fast) var(--ease-out);
}
.nav__burger span:nth-child(1){top:15px}
.nav__burger span:nth-child(2){top:21px}
.nav__burger span:nth-child(3){top:27px}
body.menu-open .nav__burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* Full-screen blurred mobile overlay */
.nav__overlay{
  position:fixed;inset:0;z-index:55;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;
  background:rgba(7,8,18,0.72);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease-out),visibility var(--dur) var(--ease-out);
}
body.menu-open .nav__overlay{opacity:1;visibility:visible}
.nav__overlay a{
  font-family:var(--font-display);font-size:clamp(1.8rem,7vw,2.6rem);font-weight:500;
  color:var(--text-soft);padding:.4rem 1rem;
  opacity:0;transform:translateY(24px);
  transition:color var(--dur-fast) var(--ease-out);
}
body.menu-open .nav__overlay a{animation:overlayIn var(--dur) var(--ease-out) forwards}
body.menu-open .nav__overlay a:nth-child(1){animation-delay:.06s}
body.menu-open .nav__overlay a:nth-child(2){animation-delay:.12s}
body.menu-open .nav__overlay a:nth-child(3){animation-delay:.18s}
body.menu-open .nav__overlay a:nth-child(4){animation-delay:.24s}
body.menu-open .nav__overlay a:nth-child(5){animation-delay:.30s}
body.menu-open .nav__overlay a:nth-child(6){animation-delay:.36s}
.nav__overlay a:hover,.nav__overlay a[aria-current="page"]{color:var(--gold)}
@keyframes overlayIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .nav__overlay a{animation:none!important;opacity:1;transform:none}
}

/* ----------------------------------------------------------------------------
   9 · FOOTER
---------------------------------------------------------------------------- */
.footer{position:relative;z-index:1;margin-top:clamp(4rem,8vw,7rem);padding-top:clamp(3rem,6vw,4rem)}
.footer__inner{
  background:var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:var(--glass-hi);
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem) 2rem;
}
.footer__top{
  display:grid;gap:2.5rem;
  grid-template-columns:1.4fr 1fr 1.3fr;
}
.footer__brand img{height:46px;width:auto;filter:drop-shadow(0 0 16px var(--gold-glow));margin-bottom:1rem}
.footer__brand .tagline{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.footer__brand p{margin-top:.9rem;max-width:32ch;font-size:.95rem}
.footer__brand .kreol{margin-top:1rem;font-style:italic;color:var(--text-mute);font-size:.9rem}

.footer__col h4{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin-bottom:1rem;font-weight:500}
.footer__col ul>li+li{margin-top:.6rem}
.footer__col a{color:var(--text-soft);font-size:.95rem;transition:color var(--dur-fast) var(--ease-out)}
.footer__col a:hover{color:var(--gold)}

.footer__social{display:flex;gap:.6rem;margin-top:1.25rem}
.footer__social a{
  width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-bd);color:var(--text-soft);
  transition:transform var(--dur-fast) var(--ease-spring),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.footer__social a:hover{color:var(--gold);transform:translateY(-3px);border-color:rgba(243,193,78,0.4)}
.footer__social svg{width:18px;height:18px;fill:currentColor}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--glass-bd-soft);
  font-size:.85rem;color:var(--text-mute);
}
.footer__bottom .proud{font-family:var(--font-mono);letter-spacing:.08em}

/* ----------------------------------------------------------------------------
   10 · PRICING GLASS CARDS
---------------------------------------------------------------------------- */
.pricing-grid{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:stretch;
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd);border-radius:var(--r-xl);
  box-shadow:var(--shadow-glass),var(--glass-hi);
  padding:2rem 1.75rem;overflow:hidden;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift),var(--glass-hi)}
.price-card--featured{
  border-color:rgba(243,193,78,0.5);
  box-shadow:var(--shadow-gold),var(--glass-hi);
  transform:translateY(-12px);
}
.price-card--featured:hover{transform:translateY(-18px)}
.price-card--featured::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--gold-soft),transparent 40%);
}
.price-card__badge{
  position:absolute;top:1rem;right:1rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#1a1405;background:linear-gradient(120deg,var(--gold),var(--gold-2));
  padding:.32rem .7rem;border-radius:var(--r-pill);font-weight:600;
}
.price-card__name{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.price-card__price{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);margin:.6rem 0;line-height:1}
.price-card__price small{font-size:.9rem;font-weight:400;color:var(--text-soft);font-family:var(--font-body)}
.price-card__desc{font-size:.95rem;color:var(--text-soft);margin-bottom:1.25rem}
.price-card__features{margin-bottom:1.75rem;flex:1}
.price-card__features li{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem;color:var(--text-soft);padding:.45rem 0}
.price-card__features li svg{flex:0 0 auto;width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:2;margin-top:.15rem}
.price-card .btn{width:100%;justify-content:center}

/* ----------------------------------------------------------------------------
   11 · INTERACTIVE PROBLEM EXPLORER — hero centerpiece
---------------------------------------------------------------------------- */
.explorer{
  display:grid;gap:1.5rem;
  grid-template-columns:minmax(280px,360px) 1fr;
  align-items:start;
}
.explorer__list{
  display:flex;flex-direction:column;gap:.6rem;
}

/* problem button */
.explorer__pain{
  display:flex;align-items:center;gap:.9rem;text-align:left;width:100%;
  padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd-soft);
  color:var(--text-soft);font-weight:500;font-size:.97rem;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.explorer__pain .px-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-xs);
  display:grid;place-items:center;
  background:rgba(255,255,255,0.05);border:1px solid var(--glass-bd-soft);color:var(--text-mute);
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.explorer__pain .px-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.explorer__pain .px-label{flex:1}
.explorer__pain .px-chev{flex:0 0 auto;color:var(--text-mute);transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.explorer__pain .px-chev svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.explorer__pain:hover{background:var(--glass-2);color:var(--text);transform:translateX(2px)}
.explorer__pain:hover .px-icon{color:var(--text-soft)}
.explorer__pain[aria-expanded="true"]{
  background:var(--glass-2);
  border-color:rgba(243,193,78,0.4);
  color:var(--text);
  box-shadow:var(--glass-hi),0 0 0 1px rgba(243,193,78,0.1);
}
.explorer__pain[aria-expanded="true"] .px-icon{background:var(--gold-soft);border-color:rgba(243,193,78,0.34);color:var(--gold)}
.explorer__pain[aria-expanded="true"] .px-chev{transform:rotate(90deg);color:var(--gold)}

/* detail panel */
.explorer__detail{
  position:relative;min-height:100%;
  background:var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd);border-radius:var(--r-xl);
  box-shadow:var(--shadow-glass),var(--glass-hi);
  padding:clamp(1.5rem,3vw,2.25rem);overflow:hidden;
}
.explorer__detail::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent 40%);
}
.explorer__detail-inner{position:relative;z-index:1}
.explorer__detail .pain-line{
  font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:500;
  color:var(--text);margin-bottom:1.5rem;letter-spacing:-0.01em;line-height:1.25;
}

.explorer__steps{display:grid;gap:.9rem;grid-template-columns:repeat(3,1fr);margin-bottom:1.5rem}
.explorer__step{
  position:relative;
  background:rgba(255,255,255,0.035);
  border:1px solid var(--glass-bd-soft);
  border-radius:var(--r-md);padding:1.15rem 1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.explorer__step .step-tag{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7rem;display:block;
}
.explorer__step .step-ico{
  width:36px;height:36px;border-radius:var(--r-xs);display:grid;place-items:center;
  background:var(--gold-soft);border:1px solid rgba(243,193,78,0.26);color:var(--gold);margin-bottom:.7rem;
}
.explorer__step .step-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.explorer__step h4{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin-bottom:.3rem}
.explorer__step p{font-size:.86rem;color:var(--text-soft);line-height:1.5}

.explorer__outcome{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--gold-soft);border:1px solid rgba(243,193,78,0.26);
  box-shadow:var(--glass-hi);margin-bottom:1rem;
}
.explorer__outcome svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;margin-top:.1rem}
.explorer__outcome span{color:var(--text);font-weight:500;font-size:.98rem}
.explorer__reassure{font-size:.9rem;color:var(--text-soft);margin-bottom:1.25rem}
.explorer__detail .btn-gold{margin-top:.25rem}

/* reduced-motion: explorer shows instantly (JS also guards) */
@media (prefers-reduced-motion:reduce){
  .explorer__detail,.explorer__step{transition:none}
}

/* ----------------------------------------------------------------------------
   12 · CUSTOM GLASS CURSOR (desktop only)
---------------------------------------------------------------------------- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;transform:translate(-50%,-50%);
  mix-blend-mode:screen;
}
.cursor-dot{width:7px;height:7px;background:var(--gold)}
.cursor-ring{
  width:38px;height:38px;border:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(2px);
  transition:width var(--dur-fast) var(--ease-out),height var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.cursor-ring.is-hover{width:58px;height:58px;border-color:var(--gold);background:rgba(243,193,78,0.06)}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button{cursor:none}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ----------------------------------------------------------------------------
   13 · PAGE TRANSITION + INTRO LOADER
---------------------------------------------------------------------------- */
.transition-panel{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:0;visibility:hidden;
  background:linear-gradient(160deg,var(--bg-2),var(--bg-3));
}
.transition-panel::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 30%,rgba(109,92,255,0.25),transparent 70%);
}
/* swift, fluid page arrival: content fades in over the persistent aurora on every load */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
main{animation:pageIn .4s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){main{animation:none}}

.loader{
  position:fixed;inset:0;z-index:9500;display:grid;place-items:center;
  background:var(--bg);
  transition:opacity var(--dur-slow) var(--ease-out),visibility var(--dur-slow) var(--ease-out);
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__logo{width:min(220px,52vw);filter:drop-shadow(0 0 30px var(--gold-glow))}
.loader__bar{
  margin-top:1.5rem;width:min(200px,46vw);height:2px;border-radius:2px;
  background:rgba(255,255,255,0.12);overflow:hidden;
}
.loader__bar i{display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:loaderSweep 1.1s var(--ease-in-out) infinite}
@keyframes loaderSweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ----------------------------------------------------------------------------
   14 · SCROLL REVEAL BASE
   JS adds .is-in when ScrollTrigger fires; default keeps content visible if JS off.
---------------------------------------------------------------------------- */
.reveal{}
/* Only hint will-change while the element is still waiting to animate in; once
   .is-in lands the hint is dropped so we don't pin dozens of GPU layers for the
   page lifetime (mid-range Android tablet layer/memory cost). */
.js .reveal:not(.is-in){opacity:0;transform:translateY(34px);filter:blur(6px);will-change:transform,opacity,filter}
.js .reveal.is-in{opacity:1;transform:none;filter:none;will-change:auto;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;filter:none}
}

/* ----------------------------------------------------------------------------
   15 · FOCUS / A11Y
---------------------------------------------------------------------------- */
:focus-visible{
  /* outline is NOT clipped by overflow:hidden ancestors (.card, .price-card,
     .explorer__detail, .explorer__step) the way box-shadow is, and stays intact
     under the magnetic transform — so use outline for the visible ring and keep
     box-shadow only for the soft glow. */
  outline:2px solid var(--gold);
  outline-offset:2px;
  box-shadow:0 0 18px var(--gold-glow);
  border-radius:var(--r-xs);
}
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:9999;
  background:var(--gold);color:#1a1405;padding:.7rem 1.1rem;border-radius:var(--r-sm);font-weight:600;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* spacer so fixed nav never overlaps content */
.nav-spacer{height:var(--nav-h)}

/* ----------------------------------------------------------------------------
   15b · COARSE-POINTER / TOUCH BLUR FALLBACK
   On touch devices (mid-range Android tablets) the frosted effect costs the most
   and reads the least: drop live backdrop blur on in-flow cards and fall back to
   a semi-opaque solid fill so legibility + scroll perf stay intact.
---------------------------------------------------------------------------- */
@media (hover:none),(pointer:coarse){
  .card,.price-card,.footer__inner,.explorer__detail,.glass{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(rgba(7,8,18,0.82),rgba(7,8,18,0.82)),var(--glass-2);
  }
  .explorer__pain{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ----------------------------------------------------------------------------
   16 · RESPONSIVE
---------------------------------------------------------------------------- */
@media (max-width:980px){
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
  .explorer{grid-template-columns:1fr}
}
@media (max-width:768px){
  /* mobile compaction — shorter page + smoother, blur-free reveals */
  .section{padding-block:clamp(2rem,6vw,3.25rem)}
  main>.section:first-of-type{padding-top:clamp(5.5rem,16vw,7rem)}
  .section--tight{padding-block:clamp(1.4rem,4vw,2.25rem)}
  .section-header{margin-bottom:clamp(1.5rem,5vw,2.25rem)}
  .js .reveal:not(.is-in){filter:none;transform:translateY(20px)}
  .bg-motif{opacity:.045}
  .nav__links{display:none}
  .nav__verticals{display:none}
  /* cosy mobile — comfortable padding, rounder cards, easy reading */
  .wrap{padding-inline:1.2rem}
  .card{padding:1.55rem;border-radius:var(--r-lg)}
  .card__icon{width:46px;height:46px}
  h1{line-height:1.14}
  p{line-height:1.68}
  .section-header p{font-size:1.02rem}
  .explorer{gap:1rem}
  .explorer__pain{padding:.95rem 1.05rem;border-radius:var(--r-md)}
  .explorer__detail{padding:1.35rem 1.15rem}
  .guarantee{padding:1.85rem 1.4rem}
  .nav__island{padding:.5rem .6rem .5rem 1rem}
  .nav__cta{display:none}
  .nav__burger{display:grid}
  .nav__island{padding:.55rem .7rem .55rem 1.1rem}
  .explorer__steps{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
  .section{padding-block:clamp(3rem,8vw,4.5rem)}
  .cursor-dot,.cursor-ring{display:none}
  body.has-cursor{cursor:auto}
}
@media (max-width:480px){
  .price-card--featured,.price-card--featured:hover{transform:none}
  .card{padding:1.4rem}
}

/* ----------------------------------------------------------------------------
   17 · INDUSTRIES — compact glass cards (auto-fit grid)
   Thin-line SVG icon slot · name · one-line use-case · subtle hover lift.
---------------------------------------------------------------------------- */
.industries{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.industry{
  position:relative;
  display:flex;flex-direction:column;gap:.75rem;
  background:var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd);border-radius:var(--r-md);
  box-shadow:var(--shadow-glass),var(--glass-hi);
  padding:1.25rem 1.25rem 1.35rem;overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.industry:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,0.22);
  box-shadow:var(--shadow-lift),var(--glass-hi);
}
.industry__icon{
  width:40px;height:40px;border-radius:var(--r-xs);
  display:grid;place-items:center;flex:0 0 auto;
  background:var(--gold-soft);border:1px solid rgba(243,193,78,0.28);
  color:var(--gold);box-shadow:var(--glass-hi);
}
.industry__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.industry__name{
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  letter-spacing:-0.01em;color:var(--text);line-height:1.2;
}
.industry__use{
  font-size:.85rem;color:var(--text-soft);line-height:1.45;
}

/* ----------------------------------------------------------------------------
   18 · GUARANTEE — prominent gold-accented glass band (wide, premium)
   Eyebrow badge · big line · sub-line · CTA room · optional circular "48h" seal.
---------------------------------------------------------------------------- */
.guarantee{
  position:relative;overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,4vw,3rem);
  background:
    linear-gradient(180deg,var(--gold-soft),transparent 55%),
    var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid rgba(243,193,78,0.5);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-gold),var(--glass-hi);
  padding:clamp(2rem,5vw,3.25rem) clamp(1.75rem,4vw,3rem);
}
/* soft gold glow bleed at the top edge */
.guarantee::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 120% at 15% 0%,rgba(243,193,78,0.18),transparent 60%);
}
.guarantee__body{position:relative;z-index:1;flex:1 1 340px;min-width:0}
.guarantee__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  padding:.5rem 1rem;border-radius:var(--r-pill);margin-bottom:1.1rem;
  background:var(--gold-soft);border:1px solid rgba(243,193,78,0.34);
  box-shadow:var(--glass-hi);
}
.guarantee__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-glow)}
.guarantee__line{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.12;letter-spacing:-0.02em;
  color:var(--text);
}
.guarantee__sub{
  margin-top:.9rem;max-width:52ch;font-size:1.02rem;color:var(--text-soft);
}
.guarantee__cta{position:relative;z-index:1;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.9rem}
/* optional circular gold "48h" seal */
.guarantee__seal{
  position:relative;z-index:1;flex:0 0 auto;
  width:clamp(96px,14vw,132px);height:clamp(96px,14vw,132px);border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:linear-gradient(140deg,var(--gold),var(--gold-2));
  color:#1a1405;font-family:var(--font-display);font-weight:600;
  box-shadow:var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,0.45);
  border:1px solid rgba(255,255,255,0.35);
}
.guarantee__seal b{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1;letter-spacing:-0.02em}
.guarantee__seal small{
  display:block;margin-top:.25rem;font-family:var(--font-mono);font-weight:600;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
}

/* ----------------------------------------------------------------------------
   19 · TRUST STRIP — centered flex-wrap row of glass pills
   Small mono label + optional tiny check/shield icon slot.
---------------------------------------------------------------------------- */
.trust-strip{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.7rem;
}
.trust-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .95rem;border-radius:var(--r-pill);
  background:var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd-soft);
  box-shadow:var(--glass-hi);
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.trust-chip:hover{border-color:rgba(243,193,78,0.4);color:var(--text)}
.trust-chip__ico{
  flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center;color:var(--gold);
}
.trust-chip__ico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ----------------------------------------------------------------------------
   20 · SLA TABLE — responsive 3-plan comparison grid
   Glass styling · gold header accents · stacks to per-plan blocks on mobile.
---------------------------------------------------------------------------- */
.sla-table{
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  background:var(--scrim),var(--glass);
  backdrop-filter:var(--glass-blur-card);-webkit-backdrop-filter:var(--glass-blur-card);
  border:1px solid var(--glass-bd);border-radius:var(--r-xl);
  box-shadow:var(--shadow-glass),var(--glass-hi);
  overflow:hidden;
}
.sla-table__cell{
  padding:1.05rem 1.15rem;
  border-bottom:1px solid var(--glass-bd-soft);
  font-size:.94rem;color:var(--text-soft);
  display:flex;align-items:center;
}
/* row-head (left column) — mono label */
.sla-table__cell--rowhead{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);
}
/* top header row — plan names, gold accent */
.sla-table__cell--head{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
  background:var(--gold-soft);
  border-bottom:1px solid rgba(243,193,78,0.28);
}
.sla-table__cell--corner{background:transparent;border-bottom:1px solid rgba(243,193,78,0.28)}
/* strip bottom border off the last visual row */
.sla-table__cell--last{border-bottom:none}
.sla-note{
  margin-top:.9rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--text-mute);line-height:1.5;
}

@media (max-width:768px){
  /* stack the SLA table into per-plan blocks; each cell shows its label via data-plan */
  .sla-table{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .sla-table__cell{
    justify-content:space-between;gap:1rem;
    border-bottom:1px solid var(--glass-bd-soft);
  }
  .sla-table__cell--last{border-bottom:1px solid var(--glass-bd-soft)}
  /* hide the desktop corner + row-head cells; the plan-head becomes a section title */
  .sla-table__cell--corner{display:none}
  .sla-table__cell--head{
    justify-content:flex-start;border-radius:0;
    border-bottom:1px solid rgba(243,193,78,0.28);
  }
  /* prefix each data cell with its row label (author supplies data-label) */
  .sla-table__cell[data-label]::before{
    content:attr(data-label);
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--text-mute);margin-right:1rem;
  }
  .guarantee{flex-direction:column;text-align:left}
  .guarantee__seal{align-self:flex-start}
}

/* touch / coarse-pointer blur fallback for the new glass surfaces */
@media (hover:none),(pointer:coarse){
  .industry,.guarantee,.trust-chip,.sla-table{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(rgba(7,8,18,0.82),rgba(7,8,18,0.82)),var(--glass-2);
  }
  .guarantee{border-color:rgba(243,193,78,0.5)}
}