/* Teztrak — global stylesheet (design tokens, sections, hero) */
[hidden]{display:none!important}
/* ============================================================
   Teztrak — landing page
   Built to the "Pixel-Accurate UI + Motion Specification":
   light + dark themes, glass panels, orbital background, globe hero,
   scroll-linked workflow / timeline / coverage stack, full micro-motion.
   ============================================================ */

/* ---------- THEME TOKENS (spec §5) — light is the base palette ---------- */
:root{
  --bg:#f8fbff; --bg-2:#eef6ff;
  --panel:rgba(255,255,255,.70); --panel-strong:rgba(255,255,255,.92); --panel-soft:rgba(31,111,235,.035);
  --text:#0b1a33; --text-2:#52637a; --text-3:#7f8ea1;
  --border:rgba(74,126,189,.16); --border-hover:rgba(38,123,235,.36);
  --blue:#1677ff; --blue-2:#46b6ff; --cyan:#2fd6e8; --purple:#8057ff; --pink:#ff4f8c;
  --orange:#ff9c3b; --green:#10b981; --red:#ef476f;
  --shadow:0 18px 50px rgba(35,73,120,.12);
  --glow:.55;
  --ribbon-a:rgba(255,255,255,.55); --ribbon-b:rgba(120,170,255,.28); --ribbon-c:rgba(160,140,255,.22);
  --dash-bg:#ffffff; --dash-chrome:#f3f7fd; --dash-line:rgba(74,126,189,.14);
  --globe-a:#5fb4ff; --globe-b:#1677ff; --globe-c:#0b3aa6; --globe-dot:rgba(255,255,255,.85);
  --hdr-bg:rgba(248,251,255,.78);
  --font:"Inter","Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1240px; --gut:32px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#020711; --bg-2:#06101d;
    --panel:rgba(9,19,33,.72); --panel-strong:rgba(8,18,32,.92); --panel-soft:rgba(255,255,255,.025);
    --text:#f7fbff; --text-2:#a9b9cc; --text-3:#71839a;
    --border:rgba(123,181,255,.14); --border-hover:rgba(104,184,255,.34);
    --blue:#2da8ff; --blue-2:#5ec8ff; --cyan:#33e6ff; --purple:#8b5cff; --pink:#ff4d8d;
    --orange:#ff9d3d; --green:#19d59d; --red:#ff5e6d;
    --shadow:0 24px 80px rgba(0,0,0,.48);
    --glow:1;
    --ribbon-a:rgba(51,230,255,.09); --ribbon-b:rgba(45,168,255,.10); --ribbon-c:rgba(139,92,255,.10);
    --dash-bg:#071122; --dash-chrome:#0a1628; --dash-line:rgba(123,181,255,.12);
    --globe-a:#3fc0ff; --globe-b:#1a6dff; --globe-c:#04122e; --globe-dot:rgba(190,230,255,.9);
    --hdr-bg:rgba(2,7,17,.78);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#020711; --bg-2:#06101d;
  --panel:rgba(9,19,33,.72); --panel-strong:rgba(8,18,32,.92); --panel-soft:rgba(255,255,255,.025);
  --text:#f7fbff; --text-2:#a9b9cc; --text-3:#71839a;
  --border:rgba(123,181,255,.14); --border-hover:rgba(104,184,255,.34);
  --blue:#2da8ff; --blue-2:#5ec8ff; --cyan:#33e6ff; --purple:#8b5cff; --pink:#ff4d8d;
  --orange:#ff9d3d; --green:#19d59d; --red:#ff5e6d;
  --shadow:0 24px 80px rgba(0,0,0,.48);
  --glow:1;
  --ribbon-a:rgba(51,230,255,.09); --ribbon-b:rgba(45,168,255,.10); --ribbon-c:rgba(139,92,255,.10);
  --dash-bg:#071122; --dash-chrome:#0a1628; --dash-line:rgba(123,181,255,.12);
  --globe-a:#3fc0ff; --globe-b:#1a6dff; --globe-c:#04122e; --globe-dot:rgba(190,230,255,.9);
  --hdr-bg:rgba(2,7,17,.78);
  color-scheme:dark;
}

/* theme crossfade (spec §30): colours only, never layout */
html.theming body, html.theming body *{transition:background-color .42s ease,color .42s ease,border-color .42s ease,box-shadow .42s ease,fill .42s ease,stroke .42s ease!important}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
section{position:relative}
.sec{padding-block:clamp(72px,9vw,124px)}

/* ---------- typography (spec §4) ---------- */
h1,h2,h3{margin:0;color:var(--text)}
h1{font-size:clamp(40px,5.6vw,80px);font-weight:700;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
h2{font-size:clamp(32px,3.3vw,46px);font-weight:700;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
h3{font-size:19px;font-weight:650;line-height:1.3;letter-spacing:-.015em}
.grad{background:linear-gradient(92deg,var(--blue) 0%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-2{background:linear-gradient(92deg,var(--blue) 0%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:17px;line-height:1.62;color:var(--text-2);max-width:52ch;margin:0}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:9999px;
  border:1px solid var(--border);background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent),0 0 10px var(--blue-2);flex:none}
.sec-head{display:flex;flex-direction:column;gap:18px;align-items:flex-start}

/* ---------- glass surfaces (spec §3.1) ---------- */
.glass{
  background:var(--panel);border:1px solid var(--border);border-radius:22px;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.35);position:relative;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .glass{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}}
:root[data-theme="dark"] .glass{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}
.glass-strong{background:var(--panel-strong)}

/* icon tiles */
.tile{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--border);background:var(--panel-strong);position:relative;transition:transform .18s ease,box-shadow .18s ease}
.tile svg{width:20px;height:20px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:calc(.55*var(--glow));background:radial-gradient(60% 60% at 50% 50%,var(--tc) 0%,transparent 100%);filter:blur(8px);z-index:-1}
.t-blue{--tc:var(--blue)}     .t-blue svg{stroke:var(--blue)}     .tile.t-blue{background:color-mix(in srgb,var(--blue) 10%,var(--panel-strong))}
.t-cyan{--tc:var(--cyan)}     .t-cyan svg{stroke:var(--cyan)}     .tile.t-cyan{background:color-mix(in srgb,var(--cyan) 10%,var(--panel-strong))}
.t-purple{--tc:var(--purple)} .t-purple svg{stroke:var(--purple)} .tile.t-purple{background:color-mix(in srgb,var(--purple) 10%,var(--panel-strong))}
.t-pink{--tc:var(--pink)}     .t-pink svg{stroke:var(--pink)}     .tile.t-pink{background:color-mix(in srgb,var(--pink) 10%,var(--panel-strong))}
.t-orange{--tc:var(--orange)} .t-orange svg{stroke:var(--orange)} .tile.t-orange{background:color-mix(in srgb,var(--orange) 10%,var(--panel-strong))}
.t-green{--tc:var(--green)}   .t-green svg{stroke:var(--green)}   .tile.t-green{background:color-mix(in srgb,var(--green) 10%,var(--panel-strong))}
.t-red{--tc:var(--red)}       .t-red svg{stroke:var(--red)}       .tile.t-red{background:color-mix(in srgb,var(--red) 10%,var(--panel-strong))}

/* ---------- buttons (spec §39) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:9999px;
  border:1px solid transparent;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.005)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.09s}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.btn:hover svg.arrow{transform:translateX(3px)}
.btn-primary{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 10px 26px -8px color-mix(in srgb,var(--blue) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{box-shadow:0 16px 34px -8px color-mix(in srgb,var(--blue) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);opacity:0}
.btn-primary:hover::after{animation:sweep .42s ease forwards}
@keyframes sweep{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}
.btn-outline{background:var(--panel);color:var(--text);border-color:var(--border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-outline:hover{border-color:var(--border-hover)}
.btn-sm{height:40px;padding:0 18px;font-size:13.5px}
.btn-block{width:100%}
.btn-soft{background:var(--panel-strong);color:var(--text);border-color:var(--border)}
.btn-soft:hover{border-color:var(--border-hover)}
.play-ic{width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;flex:none}
.play-ic svg{width:9px;height:9px;fill:currentColor;stroke:none;margin-left:1px}

/* ============================================================
   BACKGROUND SYSTEM (spec §26) — ribbons, orbits, spheres, particles
   ============================================================ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:calc(.9*var(--glow))}
.bg-glow.g1{width:760px;height:560px;left:-180px;top:-120px;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue-2) 34%,transparent),transparent);animation:glowDrift 22s ease-in-out infinite alternate}
.bg-glow.g2{width:820px;height:640px;right:-260px;top:140px;background:radial-gradient(closest-side,color-mix(in srgb,var(--purple) 30%,transparent),transparent);animation:glowDrift 26s ease-in-out infinite alternate-reverse}
.bg-glow.g3{width:700px;height:520px;left:20%;top:52%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cyan) 26%,transparent),transparent);animation:glowDrift 19s ease-in-out infinite alternate}
.bg-glow.g4{width:760px;height:560px;right:-160px;bottom:-140px;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 30%,transparent),transparent);animation:glowDrift 24s ease-in-out infinite alternate-reverse}
@keyframes glowDrift{from{transform:translate(0,0)}to{transform:translate(48px,-28px)}}

.ribbon{position:absolute;left:-30vw;width:160vw;height:240px;border-radius:9999px;filter:blur(2px);opacity:.72;
  background:linear-gradient(90deg,transparent 0%,var(--ribbon-a) 22%,var(--ribbon-b) 50%,var(--ribbon-c) 76%,transparent 100%);
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--blue) 25%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ribbon.r1{top:8%;transform:rotate(-14deg);animation:ribbonDrift 26s ease-in-out infinite alternate}
.ribbon.r2{top:34%;height:180px;transform:rotate(11deg);animation:ribbonDrift 32s ease-in-out infinite alternate-reverse}
.ribbon.r3{top:62%;height:260px;transform:rotate(-9deg);animation:ribbonDrift 28s ease-in-out infinite alternate}
.ribbon.r4{top:86%;height:200px;transform:rotate(13deg);animation:ribbonDrift 22s ease-in-out infinite alternate-reverse}
@keyframes ribbonDrift{from{translate:0 0}to{translate:44px 26px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ribbon{filter:blur(38px);box-shadow:none}}
:root[data-theme="dark"] .ribbon{filter:blur(38px);box-shadow:none}

.orbits{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1440/900;overflow:visible}
.orbits ellipse,.orbits path{fill:none;stroke-width:1.2;opacity:calc(.28*var(--glow) + .08)}

.sphere{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 12%,color-mix(in srgb,var(--blue-2) 42%,transparent) 42%,color-mix(in srgb,var(--blue) 26%,transparent) 68%,transparent 100%);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--blue) 45%,transparent),inset -8px -10px 24px rgba(255,255,255,.35);
  animation:floatY var(--d,9s) ease-in-out infinite alternate}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sphere{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55) 0%,rgba(140,200,255,.32) 14%,rgba(45,168,255,.18) 45%,rgba(139,92,255,.12) 72%,transparent 100%);border-color:rgba(160,210,255,.28);box-shadow:0 18px 50px -14px rgba(45,168,255,.5),inset -8px -10px 24px rgba(120,170,255,.18)}}
:root[data-theme="dark"] .sphere{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55) 0%,rgba(140,200,255,.32) 14%,rgba(45,168,255,.18) 45%,rgba(139,92,255,.12) 72%,transparent 100%);border-color:rgba(160,210,255,.28);box-shadow:0 18px 50px -14px rgba(45,168,255,.5),inset -8px -10px 24px rgba(120,170,255,.18)}
@keyframes floatY{from{transform:translateY(0)}to{transform:translateY(-16px)}}

.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--blue-2);opacity:.25;animation:breathe var(--d,9s) ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.12;transform:translateY(0)}to{opacity:.45;transform:translateY(-10px)}}

.cube{position:absolute;width:64px;height:64px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(38deg);animation:cubeFloat 12s ease-in-out infinite alternate}
.cube i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.6);background:linear-gradient(135deg,rgba(255,255,255,.55),color-mix(in srgb,var(--blue-2) 30%,transparent));backdrop-filter:blur(4px)}
.cube i:nth-child(1){transform:translateZ(32px)}
.cube i:nth-child(2){transform:rotateY(90deg) translateZ(32px);background:linear-gradient(135deg,rgba(255,255,255,.35),color-mix(in srgb,var(--purple) 26%,transparent))}
.cube i:nth-child(3){transform:rotateX(90deg) translateZ(32px);background:linear-gradient(135deg,rgba(255,255,255,.7),color-mix(in srgb,var(--cyan) 26%,transparent))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cube i{border-color:rgba(160,210,255,.3);background:linear-gradient(135deg,rgba(90,150,255,.22),rgba(45,168,255,.08))}}
:root[data-theme="dark"] .cube i{border-color:rgba(160,210,255,.3);background:linear-gradient(135deg,rgba(90,150,255,.22),rgba(45,168,255,.08))}
@keyframes cubeFloat{from{transform:rotateX(-24deg) rotateY(38deg) translateY(0)}to{transform:rotateX(-24deg) rotateY(38deg) translateY(-14px)}}

@media (max-width:767px){.sphere,.cube,.ribbon.r2,.ribbon.r4{display:none}.particle:nth-child(n+9){display:none}}

/* footer brand + inline CTA rows */
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.brand-mk{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(160deg,var(--blue-2),var(--blue));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--blue) 80%,transparent);color:#fff}
.brand-mk svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:767px){:root{--gut:20px}}


/* ============================================================
   HERO — vector dashboard composition (supplied design, RMT content)
   ============================================================ */
:root{ --page:var(--bg); --page-2:var(--bg-2); --ink:var(--text); --muted:var(--text-2); --soft:var(--text-3);
  --line:rgba(75,134,195,.17); --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.93); --glass-border:rgba(92,153,225,.29);
  --fz-glow:rgba(55,139,237,.17); --badge:#f1f7ff; --planet-css-glow:#73b3ff;
  --frame-high:rgba(220,232,255,.98);--frame-mid:rgba(235,243,255,.96);--frame-low:rgba(220,236,255,.97);
 --dash-high:#eff6ff;--dash-low:#eaf2fe;--tile-high:#ffffff;--tile-low:#f3f9ff;
 --rim-a:#eaf8ff;--rim-b:#88b6fb;--rim-c:#adb5ff;--inner-rim:rgba(113,173,238,.45);
 --sidebar-fill:rgba(254,255,255,.77);--main-face:#f5f9ff;--nav-selected:#ffffff;--nav-border:#bedcff;
 --tile-stroke:rgba(112,166,231,.29);--text-strong:#0b2446;--text-sub:#46617d;--text-faint:#8799b0;
 --divider:rgba(92,149,208,.24);--top-lens:rgba(255,255,255,.9);--small-pill:#ffffff;
 --value-blue:#246de1;--ocean-hi:#80ccff;--ocean-mid:#238bdc;--ocean-deep:#0857aa;--ocean-edge:#063d86;
 --globe-halo-a:#72b6ff;--globe-halo-b:#62abff;--globe-outer-ring:#55baff;
 --globe-grid:#c5efff;--globe-dots:#d5f4ff;--globe-coast:#b7eaff;--globe-lat-ring:#e4f4ff;--globe-edge:rgba(172,229,255,.93);
 --orbit-muted:#75a7fa;--tiny-star:#4f9af4;--shadow-rgb:#568ccc;
 --planet-glow:#55aaff;--planet-surface1:#b1ddff;--planet-surface2:#90beff;--planet-surface3:#e0f1ff;
 --rim-space:#64aeed;--planet-contours:#d6f2ff;--city-dot:#358ddd;--city-gold:#f5bf70;--chart-soft:#a4a9f9; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --line:rgba(95,145,205,.18); --glass:rgba(12,26,45,.68); --glass-strong:rgba(8,23,42,.93); --glass-border:rgba(111,174,237,.22);
  --fz-glow:rgba(40,143,255,.21); --badge:#112136; --planet-css-glow:#0069cf;
  --frame-high:rgba(17,42,80,.95);--frame-mid:rgba(7,24,51,.89);--frame-low:rgba(13,15,47,.91);
 --dash-high:#08182c;--dash-low:#051223;--tile-high:#0d203b;--tile-low:#09172e;
 --rim-a:#2b68ba;--rim-b:#244f9b;--rim-c:#8c4bce;--inner-rim:rgba(89,151,255,.19);
 --sidebar-fill:#081529;--main-face:#061528;--nav-selected:#153f6c;--nav-border:#26568c;
 --tile-stroke:rgba(75,138,214,.32);--text-strong:#ebf5ff;--text-sub:#afc4db;--text-faint:#637f9f;
 --divider:rgba(92,149,208,.18);--top-lens:#3875c4;--small-pill:#0d223c;
 --value-blue:#65cfff;--ocean-hi:#134f93;--ocean-mid:#0b376c;--ocean-deep:#062346;--ocean-edge:#03132e;
 --globe-halo-a:#007bff;--globe-halo-b:#0b76ff;--globe-outer-ring:#20a0ff;
 --globe-grid:#50a6eb;--globe-dots:#58b9ff;--globe-coast:#6fd3ff;--globe-lat-ring:#65d5ff;--globe-edge:rgba(77,174,255,.82);
 --orbit-muted:#378bfc;--tiny-star:#65a4ff;--shadow-rgb:#000d28;
 --planet-glow:#008aff;--planet-surface1:#08539b;--planet-surface2:#06254c;--planet-surface3:#041122;
 --rim-space:#2bafff;--planet-contours:#2f9fe4;--city-dot:#2783cc;--city-gold:#f4a44c;--chart-soft:#5273d9; } }
:root[data-theme="dark"]{
  --line:rgba(95,145,205,.18); --glass:rgba(12,26,45,.68); --glass-strong:rgba(8,23,42,.93); --glass-border:rgba(111,174,237,.22);
  --fz-glow:rgba(40,143,255,.21); --badge:#112136; --planet-css-glow:#0069cf;
  --frame-high:rgba(17,42,80,.95);--frame-mid:rgba(7,24,51,.89);--frame-low:rgba(13,15,47,.91);
 --dash-high:#08182c;--dash-low:#051223;--tile-high:#0d203b;--tile-low:#09172e;
 --rim-a:#2b68ba;--rim-b:#244f9b;--rim-c:#8c4bce;--inner-rim:rgba(89,151,255,.19);
 --sidebar-fill:#081529;--main-face:#061528;--nav-selected:#153f6c;--nav-border:#26568c;
 --tile-stroke:rgba(75,138,214,.32);--text-strong:#ebf5ff;--text-sub:#afc4db;--text-faint:#637f9f;
 --divider:rgba(92,149,208,.18);--top-lens:#3875c4;--small-pill:#0d223c;
 --value-blue:#65cfff;--ocean-hi:#134f93;--ocean-mid:#0b376c;--ocean-deep:#062346;--ocean-edge:#03132e;
 --globe-halo-a:#007bff;--globe-halo-b:#0b76ff;--globe-outer-ring:#20a0ff;
 --globe-grid:#50a6eb;--globe-dots:#58b9ff;--globe-coast:#6fd3ff;--globe-lat-ring:#65d5ff;--globe-edge:rgba(77,174,255,.82);
 --orbit-muted:#378bfc;--tiny-star:#65a4ff;--shadow-rgb:#000d28;
 --planet-glow:#008aff;--planet-surface1:#08539b;--planet-surface2:#06254c;--planet-surface3:#041122;
 --rim-space:#2bafff;--planet-contours:#2f9fe4;--city-dot:#2783cc;--city-gold:#f4a44c;--chart-soft:#5273d9; }
.fz button{cursor:pointer;border:0;font:inherit;color:inherit}
.fz-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:60}
.fz-head.is-scrolled .site-header{background:var(--glass-strong);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
:root .fz .sun{display:none} :root .fz .moon{display:block}
:root .fz .hero-art{filter:saturate(1.11) brightness(1.025)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fz .sun{display:block} :root:not([data-theme="light"]) .fz .moon{display:none} :root:not([data-theme="light"]) .fz .hero-art{filter:saturate(1.04)} }
:root[data-theme="dark"] .fz .sun{display:block} :root[data-theme="dark"] .fz .moon{display:none} :root[data-theme="dark"] .fz .hero-art{filter:saturate(1.04)}
.fz .page{position:relative;isolation:isolate;background:radial-gradient(ellipse 950px 500px at 82% 24%,var(--fz-glow),transparent 78%);overflow:hidden;padding-bottom:36px}
.fz .page::before{content:"";position:absolute;z-index:0;pointer-events:none;top:-400px;left:39%;height:850px;width:850px;transform:rotate(-21deg);border:1px solid var(--line);border-radius:50%;box-shadow:0 0 145px var(--fz-glow);opacity:.38;animation:spaceDrift 24s ease-in-out infinite alternate}
.fz .page::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--ink) .6px,transparent .8px);background-size:79px 93px;opacity:.032;mask-image:linear-gradient(transparent,black 35%,transparent 100%)}
@keyframes spaceDrift{to{transform:translate(45px,17px) rotate(-26deg)}}
.fz .fz-wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut);position:relative}
.fz .site-header{position:relative;z-index:30;border-bottom:1px solid var(--line);transition:background .3s,border .3s;}
.fz .navbar{height:82px;display:flex;align-items:center;gap:24px}
.fz .fz-brand{display:inline-flex;align-items:center;gap:11px;font-size:23px;font-weight:785;letter-spacing:-.055em;flex-shrink:0}
.fz .fz-brand svg{width:32px;height:38px;overflow:visible}
.fz .fz-brand-mark{filter:drop-shadow(0 0 9px rgba(81,146,246,.3))}
.fz .navigation{display:flex;align-items:center;gap:35px;margin:auto}
.fz .navigation a{font-size:13px;font-weight:620;color:var(--muted);transition:color .2s;white-space:nowrap;position:relative}
.fz .navigation a:hover,.fz .navigation a:focus-visible{color:var(--ink)}
.fz .navigation a::after{content:"";height:3px;width:3px;border-radius:50%;background:#3eaafa;position:absolute;bottom:-13px;left:calc(50% - 1.5px);opacity:0;transform:scale(.2);transition:all .2s}
.fz .navigation a:hover::after{opacity:1;transform:scale(1)}
.fz .nav-actions{display:flex;align-items:center;gap:12px}
.fz .switch{height:43px;width:43px;display:grid;place-items:center;background:transparent;color:var(--ink);border:1px solid var(--glass-border);border-radius:50%;transition:background .2s,transform .2s}
.fz .switch:hover{transform:translateY(-2px);background:var(--glass)}
.fz .switch svg{height:17px;width:17px}
.fz .sun{display:block}
.fz .moon{display:none}
.fz .fz-btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;white-space:nowrap;min-height:49px;padding:0 23px;border-radius:16px;font-size:13px;font-weight:740;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s,background .2s;position:relative;overflow:hidden}
.fz .fz-btn:hover{transform:translateY(-2px)}
.fz .fz-btn:active{transform:translateY(0) scale(.98)}
.fz .fz-btn .arr{font-size:19px;font-weight:550;transition:transform .2s}
.fz .fz-btn:hover .arr{transform:translateX(3px)}
.fz .fz-btn-primary{background:linear-gradient(110deg,#35b8ff,#1f77ef);color:#fff;border:1px solid rgba(148,215,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 13px 29px rgba(15,114,236,.16)}
.fz .fz-btn-primary::after{content:"";position:absolute;inset:-50%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.31),transparent);transform:rotate(27deg) translateX(-340px);transition:transform .65s}
.fz .fz-btn-primary:hover{box-shadow:inset 0 1px rgba(255,255,255,.7),0 18px 34px rgba(28,120,244,.31)}
.fz .fz-btn-primary:hover::after{transform:rotate(27deg) translateX(360px)}
.fz .fz-btn-outline{border:1px solid var(--glass-border);background:rgba(255,255,255,.018);color:var(--ink)}
.fz .fz-btn-outline:hover{background:var(--glass);border-color:#579fee}
.fz .fz-btn-sm{min-height:43px;padding:0 21px;border-radius:22px}
.fz .play-circle{width:22px;height:22px;border:1.3px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:11px;padding-left:1px}
.fz .nav-toggle{display:none;background:transparent;color:var(--ink);font-size:27px;line-height:1}
.fz .fz-hero{position:relative;z-index:1}
.fz .hero-stage{position:relative;height:680px}
.fz .hero-copy{position:relative;z-index:8;width:clamp(395px,39%,500px);padding-top:52px}
.fz .hero-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--glass-border);background:var(--badge);border-radius:99px;padding:8px 14px 8px 11px;font-size:11px;font-weight:760;color:var(--ink);box-shadow:inset 0 1px rgba(255,255,255,.13);backdrop-filter:blur(9px)}
.fz .badge-diamond{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(130deg,#fff,#89beff);box-shadow:0 0 13px #79abfa}
.fz .badge-star{margin-left:2px;color:#ffdc83;font-size:12px}
.fz h1{font-size:clamp(53px,4.55vw,66px);line-height:1.01;letter-spacing:-.066em;margin:21px 0 13px;font-weight:790;max-width:560px}
.fz .headline-line{display:block;white-space:nowrap;opacity:0;transform:translateY(19px);filter:blur(7px);animation:lineAppear .78s cubic-bezier(.16,1,.3,1) forwards}
.fz .headline-line:nth-child(1){animation-delay:.15s}
.fz .headline-line:nth-child(2){animation-delay:.25s}
.fz .headline-line:nth-child(3){animation-delay:.34s}
.fz .headline-line:nth-child(4){animation-delay:.43s}
.fz .gradient-text{background:linear-gradient(99deg,#58d4ff 5%,#579bff 48%,#9077ff 105%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fz .desc{max-width:449px;margin:19px 0 26px;font-size:16px;line-height:1.58;color:var(--muted);letter-spacing:-.009em;animation:descAppear .8s .58s backwards}
.fz .hero-actions{display:flex;align-items:center;gap:14px;animation:descAppear .8s .71s backwards}
.fz .hero-actions .fz-btn{min-height:55px;padding:0 26px;font-size:14px;border-radius:17px}
.fz .hero-trust{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12.5px;font-weight:610;margin-top:29px;animation:descAppear .8s .83s backwards}
.fz .avatars{display:flex;align-items:center;padding-left:7px}
.fz .avatar{width:32px;height:32px;margin-left:-7px;border-radius:50%;border:2px solid var(--page);overflow:hidden;box-shadow:0 0 0 1px var(--line);background:#cdb4a5}
.fz .avatar:nth-child(2){background:#ead4bc}
.fz .avatar:nth-child(3){background:#d8ab91}
.fz .avatar:nth-child(4){background:#b5d7e7}
.fz .avatar svg{width:100%;height:100%;display:block}
.fz .hero-art{position:absolute;width:min(890px,70vw);height:auto;aspect-ratio:1020/775;left:29.5%;top:-10px;z-index:2;pointer-events:none;transform-origin:60% 49%;transition:filter .4s}
.fz .hero-art .visual-svg{display:block;width:100%;height:100%}
.fz .hero-art::before{content:"";position:absolute;width:600px;height:450px;top:30px;left:180px;background:radial-gradient(ellipse,var(--fz-glow),transparent 68%);filter:blur(38px);z-index:-1}
.fz .intro{animation:descAppear .75s both}
@keyframes lineAppear{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes descAppear{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
.fz .stat-shell{position:relative;z-index:9;margin-top:-10px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:21px;min-height:93px;box-shadow:0 12px 37px rgba(6,51,101,.1),inset 0 1px rgba(255,255,255,.075);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:descAppear .8s 1.08s both}
.fz .stat{display:flex;align-items:center;justify-content:center;gap:17px;position:relative;padding:18px 14px}
.fz .stat:not(:last-child)::after{position:absolute;content:"";right:0;top:24px;height:45px;width:1px;background:var(--line)}
.fz .stat-icon{width:46px;height:46px;border-radius:13px;background:var(--badge);border:1px solid var(--glass-border);display:grid;place-items:center;color:#48baff;flex-shrink:0}
.fz .stat:nth-child(3) .stat-icon{color:#a67aff}
.fz .stat:nth-child(4) .stat-icon{color:#2cddbd}
.fz .stat-icon svg{width:24px;height:24px}
.fz .stat-number{font-size:21px;font-weight:740;letter-spacing:-.04em;line-height:1.12}
.fz .stat-title{font-size:12px;color:var(--muted);margin-top:5px;font-weight:570}


@media(max-width:1190px){
.fz .navigation{gap:21px}
.fz .hero-art{left:auto;right:0;width:68%;top:0}
.fz .hero-copy{width:42%}
.fz h1{font-size:clamp(53px,5.45vw,69px)}
.fz .desc{font-size:15px;max-width:400px}
.fz .stat-shell{margin-top:-25px}}
@media(max-width:1060px){.fz .navbar{height:71px}.fz .navigation{display:none;position:absolute;top:67px;left:var(--gut);right:var(--gut);background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:15px;gap:0;backdrop-filter:blur(22px);padding:13px;box-shadow:0 20px 40px rgba(0,0,0,.1)}.fz .navigation.open{display:flex;flex-direction:column;align-items:stretch}.fz .navigation a{padding:12px}.fz .nav-toggle{display:block}.fz .nav-actions{margin-left:auto}.fz .nav-actions .fz-btn-sm{display:none}}
@media(max-width:900px){





.fz .hero-stage{height:auto;display:flex;flex-direction:column}
.fz .hero-copy{width:100%;max-width:650px;padding-top:57px}
.fz .hero-art{position:relative;left:auto;top:auto;align-self:center;width:106%;margin-top:-20px;max-width:810px}
.fz .stat-shell{margin-top:-37px}
.fz h1{font-size:clamp(49px,7vw,76px)}
.fz .desc{max-width:500px}}
@media(max-width:640px){
.fz .fz-brand{font-size:20px;flex:1 1 auto;min-width:0}.fz .fz-brand-tx{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fz .fz-brand svg{width:27px}
.fz .navbar{gap:12px}
.fz .nav-actions{margin-left:auto;gap:12px}
.fz .switch{height:39px;width:39px}
.fz .hero-copy{padding-top:44px}
.fz .hero-badge{font-size:9px}
.fz h1{font-size:clamp(40px,10vw,55px);margin-top:22px;letter-spacing:-.058em}
.fz .desc{font-size:15px;line-height:1.55;margin:19px 0 22px}
.fz .hero-actions{gap:9px}
.fz .hero-actions .fz-btn{min-height:49px;padding:0 15px;font-size:11.5px;border-radius:12px}
.fz .play-circle{width:18px;height:18px}
.fz .hero-trust{font-size:11px;gap:8px}
.fz .avatar{width:29px;height:29px}
.fz .hero-art{width:114%;left:-6%;align-self:flex-start;margin-top:-12px;aspect-ratio:1020/775}
.fz .stat-shell{margin-top:-46px;border-radius:14px;grid-template-columns:repeat(2,1fr);min-height:160px}
.fz .stat{justify-content:flex-start;gap:10px;padding:15px 10px}
.fz .stat-icon{width:39px;height:39px;border-radius:11px}
.fz .stat-icon svg{width:19px}
.fz .stat-number{font-size:19px}
.fz .stat-title{font-size:10px}
.fz .stat:nth-child(2)::after{display:none}
.fz .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
.fz .stat:not(:last-child)::after{top:20px;height:39px}
}
@media(prefers-reduced-motion:reduce){.fz *,.fz *::before,.fz *::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
.fz .headline-line{opacity:1!important;filter:none!important;transform:none!important}
.fz .hero-art .chart-line{stroke-dashoffset:0}}
.fz .visual-svg .feed-row{ animation: feedHighlight 16s ease-in-out infinite;transform-origin:left center; }
.fz .visual-svg .feed-row:nth-of-type(3){animation-delay:4s}
.fz .visual-svg .feed-row:nth-of-type(4){animation-delay:8s}
.fz .visual-svg .feed-row:nth-of-type(5){animation-delay:12s}
.fz .visual-svg .globe-pins circle:nth-child(2),.fz .visual-svg .globe-pins circle:nth-child(4){animation:pinBreath 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.fz .visual-svg .globe-pins circle:nth-child(4){animation-delay:1.4s}
@keyframes feedHighlight{0%,8%,25%,100%{opacity:1}14%{opacity:.61}17%{opacity:1}}
@keyframes pinBreath{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.32)}}
@media(prefers-reduced-motion:reduce){.fz .visual-svg .feed-row,.fz .visual-svg .globe-pins circle{animation:none!important}}
.visual-svg { width:100%;height:100%;overflow:visible; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; isolation:isolate; }



.visual-svg text { fill:var(--text-strong);paint-order:stroke; }
.visual-svg .sidebar-brand { font-weight:750;font-size:15px;letter-spacing:-.055em; }
.visual-svg .side-nav g { color:var(--text-faint); }
.visual-svg .side-nav g text { font-size:11px;font-weight:540;fill:var(--text-sub); }
.visual-svg .side-nav .side-active { color:#61c3ff; }
.visual-svg .side-nav .side-active text { fill:var(--text-strong);font-weight:680; }
.visual-svg .dashboard-heading { font-size:20px;font-weight:720;letter-spacing:-.048em; }
.visual-svg .pill-text { font-size:10px;fill:var(--text-sub);font-weight:680; }
.visual-svg .metric-label { font-size:11px;fill:var(--text-sub);font-weight:620; }
.visual-svg .metric-label-gold{fill:#edae55;} .visual-svg .metric-label-green{fill:#54cda8;}
.visual-svg .metric-value{font-size:26px;font-weight:680;letter-spacing:-.06em;}
.visual-svg .metric-hint{font-size:8.4px;font-weight:660;}
.visual-svg .feed-title{font-size:13px;font-weight:710;letter-spacing:-.025em;}
.visual-svg .feed-name{font-size:11.3px;font-weight:600;}
.visual-svg .feed-time{font-size:9.5px;fill:var(--text-faint);}
.visual-svg .metric-card { animation:metricArrival .95s cubic-bezier(.16,1,.3,1) both;transform-box:fill-box;transform-origin:center;}
.visual-svg .second{animation-delay:.19s}.visual-svg .third{animation-delay:.33s}.visual-svg .fourth{animation-delay:.47s}
.visual-svg .dashboard-scene { animation:dashboardArrive 1.35s cubic-bezier(.16,1,.3,1) both,subtleFloat 8s ease-in-out 1.5s infinite;transform-box:fill-box;transform-origin:center; }
.visual-svg .globe-aura {animation:globeAura 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.visual-svg .live-dot {animation:fzLivePulse 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.visual-svg .earth-grid{animation:lightBreath 9s ease-in-out infinite;}
.visual-svg .chart-line {stroke-dasharray:160;stroke-dashoffset:160;animation:drawGraph 1.4s ease 1.4s forwards,chartBreath 8s ease-in-out 3s infinite;}
.visual-svg .metric-card rect {transition:stroke .25s ease;}
.visual-svg .pulse-marker {animation:markerPulse 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.visual-svg .delay-two{animation-delay:1.7s;}
@keyframes dashboardArrive{from{opacity:0;transform:translate(15px,22px) scale(.97);}to{opacity:1;transform:translate(0,0) scale(1);}}
@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes metricArrival{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@keyframes globeAura{0%,100%{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.055)}}
@keyframes fzLivePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.62;transform:scale(1.28)}}
@keyframes lightBreath{0%,100%{opacity:.3}50%{opacity:.53}}
@keyframes markerPulse{0%,100%{opacity:.66;transform:scale(.91)}50%{opacity:1;transform:scale(1.16)}}
@keyframes drawGraph{to{stroke-dashoffset:0}}
@keyframes chartBreath{0%,100%{opacity:.85}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.visual-svg *, .visual-svg *::before, .visual-svg *::after {animation:none!important;transition:none!important}.visual-svg .chart-line{stroke-dashoffset:0}}

/* ============================================================
   WORKFLOW (spec §13)
   ============================================================ */
.wf-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:64px;align-items:center}
.wf-vis{position:relative;min-height:380px}
.wf-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wf-svg .track{fill:none;stroke:var(--border);stroke-width:1.5}
.wf-svg .draw{fill:none;stroke:url(#wfg);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cyan) 70%,transparent))}
.wf-node{position:absolute;display:flex;align-items:center;gap:14px;opacity:.55;transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.wf-node.on{opacity:1;transform:scale(1.035)}
.wf-node.on .tile{box-shadow:0 0 28px -4px var(--tc);animation:nodePulse .5s ease}
@keyframes nodePulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.wf-node .tile{width:50px;height:50px;border-radius:14px}
.wf-node .tile svg{width:22px;height:22px}
.wf-card{padding:12px 16px;border-radius:14px;white-space:nowrap}
.wf-card b{display:block;font-size:14px;font-weight:650;color:var(--text)}
.wf-card span{font-size:12px;color:var(--text-2)}
.wf-node.n1{left:2%;top:4%} .wf-node.n2{left:20%;top:29%} .wf-node.n3{left:38%;top:54%} .wf-node.n4{left:54%;top:79%}
.signal{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px var(--cyan),0 0 22px 8px color-mix(in srgb,var(--cyan) 50%,transparent);opacity:0;transform:translate(-50%,-50%);pointer-events:none;z-index:2}
@media (max-width:1023px){.wf-grid{grid-template-columns:1fr;gap:36px}}
@media (max-width:600px){.wf-vis{min-height:0}.wf-svg,.signal{display:none}.wf-node{position:static;margin-bottom:14px;opacity:1}}

/* ============================================================
   PLATFORM BAND (spec §14)
   ============================================================ */
.band{padding:28px 28px 26px}
.band-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.band-top h3{font-size:20px}
.link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--blue)}
.link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.link:hover svg{transform:translateX(2px)}
.band-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.bcol{position:relative;padding:22px 20px;display:flex;flex-direction:column;gap:12px;border-radius:14px;transition:background-color .2s ease}
.bcol + .bcol::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--border);transition:background-color .2s}
.bcol:hover{background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--tc) 10%,transparent),transparent 70%)}
.bcol:hover .tile{transform:translateY(-2px);box-shadow:0 0 24px -4px var(--tc)}
.bcol:hover + .bcol::before{background:var(--border-hover)}
.bcol b{font-size:15.5px;font-weight:650;color:var(--text)}
.bcol p{margin:0;font-size:13px;line-height:1.5;color:var(--text-2)}
@media (max-width:1023px){.band-grid{grid-template-columns:repeat(3,1fr)}.bcol:nth-child(4)::before{display:none}}
@media (max-width:640px){.band-grid{grid-template-columns:repeat(2,1fr)}.bcol:nth-child(odd)::before{display:none}}

/* ============================================================
   RULES (spec §15–16)
   ============================================================ */
.rules-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:64px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.chip{padding:8px 13px;border-radius:9999px;border:1px solid var(--border);background:var(--panel);font-size:12.5px;font-weight:500;color:var(--text-2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;cursor:default}
.chip:hover,.chip.glow{transform:translateY(-2px);border-color:var(--blue);color:var(--text);background:color-mix(in srgb,var(--blue) 5%,var(--panel));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--blue) 60%,transparent)}
.perf-wrap{perspective:1400px}
.perf{border-radius:22px;padding:22px 24px 26px;transform:rotateY(-4deg) rotateX(2deg);box-shadow:var(--shadow),0 0 80px -30px color-mix(in srgb,var(--blue) calc(55% * var(--glow)),transparent)}
.perf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.perf-top b{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:650}
.perf-top b i{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);display:grid;place-items:center}
.perf-top b svg{width:13px;height:13px;fill:none;stroke:var(--blue);stroke-width:2}
.perf-top .sel{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--text-2);border:1px solid var(--border);border-radius:9px;padding:7px 11px;background:var(--panel-soft)}
.perf-top .sel svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.prow{display:grid;grid-template-columns:24px minmax(0,150px) minmax(0,1fr) 44px;gap:14px;align-items:center;padding:10px 0}
.prow + .prow{border-top:1px solid var(--border)}
.prow .pi{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);display:grid;place-items:center;background:var(--panel-soft)}
.prow .pi svg{width:12px;height:12px;fill:none;stroke:var(--text-2);stroke-width:2;stroke-linecap:round}
.prow span{font-size:13px;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptrack{height:8px;border-radius:9999px;background:var(--border);overflow:hidden;position:relative}
.pfill{height:100%;border-radius:9999px;width:0;position:relative;overflow:hidden;box-shadow:0 0 12px -2px var(--pc)}
.pfill::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);opacity:0}
.pfill.shimmer::after{animation:shim .5s ease forwards}
@keyframes shim{0%{left:-40%;opacity:0}20%{opacity:1}100%{left:110%;opacity:0}}
.prow b{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
@media (max-width:1023px){.rules-grid{grid-template-columns:1fr;gap:36px}.perf{transform:none}}
@media (max-width:520px){.prow{grid-template-columns:24px minmax(0,1fr) 44px}.prow .ptrack{grid-column:1/-1}}

/* ============================================================
   INVESTIGATION (spec §17–19)
   ============================================================ */
.inv-grid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:56px;align-items:center}
.tl{position:relative;margin-top:12px;padding-left:2px}
.tl-base{position:absolute;left:11px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--border)}
.tl-fill{position:absolute;left:11px;top:10px;bottom:10px;width:2px;border-radius:2px;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,var(--red),var(--orange) 25%,var(--purple) 50%,var(--cyan) 72%,var(--green))}
.ev{position:relative;display:grid;grid-template-columns:24px 52px minmax(0,1fr);gap:14px;align-items:start;padding:0 0 22px;opacity:.45;transform:translateX(-6px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.ev.on{opacity:1;transform:translateX(0)}
.ev-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;position:relative}
.ev-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--text-3);border:2px solid var(--bg);box-shadow:0 0 0 1.5px var(--border);transition:background-color .3s,box-shadow .3s}
.ev.on .ev-dot::before{background:var(--ec);box-shadow:0 0 0 1.5px var(--ec),0 0 12px var(--ec);animation:dotPop .65s cubic-bezier(.22,1,.36,1)}
.ev.on .ev-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;border:1.5px solid var(--ec);animation:ringOut .65s ease-out forwards}
@keyframes dotPop{0%{transform:scale(.7)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ringOut{from{transform:scale(1);opacity:.7}to{transform:scale(2.2);opacity:0}}
.ev time{font-size:13px;font-weight:600;color:var(--ec);font-variant-numeric:tabular-nums;padding-top:3px}
.ev b{display:block;font-size:14.5px;font-weight:650;color:var(--text);margin-bottom:2px}
.ev p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.inv-vis{perspective:1600px}
.inv-panel{border-radius:22px;overflow:visible;transform:rotateY(-1deg);animation:floatY 7.5s ease-in-out infinite alternate;box-shadow:var(--shadow),0 0 90px -30px color-mix(in srgb,var(--purple) calc(50% * var(--glow)),transparent)}
.inv-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.inv-top .tile{width:34px;height:34px;border-radius:10px}
.inv-top .tile svg{width:15px;height:15px}
.inv-top b{display:block;font-size:14px;font-weight:650}
.inv-top small{font-size:11px;color:var(--text-3)}
.inv-top .status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9999px;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 35%,transparent);white-space:nowrap}
.inv-top .status i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.inv-tabs{display:flex;gap:4px;padding:12px 20px 0}
.inv-tabs span{padding:8px 12px;border-radius:9px;font-size:12px;font-weight:500;color:var(--text-3)}
.inv-tabs span.on{color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,transparent);font-weight:600}
.inv-list{padding:12px 20px 20px;display:flex;flex-direction:column;gap:8px}
.irow{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel-soft);transition:background-color .22s,border-color .22s,transform .22s,opacity .22s}
.irow.on{background:color-mix(in srgb,var(--ic) 9%,var(--panel-soft));border-color:color-mix(in srgb,var(--ic) 40%,transparent);transform:translateX(3px)}
.irow i{width:8px;height:8px;border-radius:50%;background:var(--ic);box-shadow:0 0 8px var(--ic)}
.irow time{font-size:11.5px;font-weight:600;color:var(--ic);font-variant-numeric:tabular-nums;width:38px}
.irow div{min-width:0}
.irow b{display:block;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irow small{display:block;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:linear-gradient(180deg,var(--blue-2),var(--blue));display:grid;place-items:center;cursor:pointer;z-index:4;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--blue) 90%,transparent),0 0 0 8px color-mix(in srgb,var(--blue) 18%,transparent);transition:transform .18s ease,box-shadow .18s ease,opacity .25s ease}
.play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--blue) 60%,transparent);animation:playRing 3s ease-out infinite}
@keyframes playRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.play:hover{transform:translate(-50%,-50%) scale(1.08)}
.play:active{transform:translate(-50%,-50%) scale(.96)}
.play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
@media (max-width:1023px){.inv-grid{grid-template-columns:1fr;gap:36px}.inv-panel{transform:none;animation:none}}
@media (max-width:520px){.ev{grid-template-columns:24px minmax(0,1fr)}.ev time{grid-column:2;padding:0}}

/* ============================================================
   COVERAGE — layered stack (spec §20)
   ============================================================ */
.cov-grid{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:56px;align-items:center}
.stack-vis{position:relative;height:420px;perspective:1400px}
.stack{position:absolute;left:0;right:0;top:0;bottom:0;transform-style:preserve-3d}
.plane{position:relative;margin-left:8%;width:66%;height:150px;border-radius:14px;border:1px solid var(--border);
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 16%,var(--panel)),var(--panel));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25);
  transform:rotateX(58deg) rotateZ(-32deg);transform-origin:center;will-change:transform;overflow:hidden}
.plane::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--pc) 60%,transparent) 1px,transparent 1.5px);background-size:14px 14px;opacity:.55}
.plane svg{position:absolute;inset:0;width:100%;height:100%}
.plane svg line{stroke:color-mix(in srgb,var(--pc) 55%,transparent);stroke-width:1}
.plane svg circle{fill:var(--pc);opacity:.9}
.plane .node-blink{animation:blink var(--bd,5s) ease-in-out infinite}
@keyframes blink{0%,86%,100%{opacity:.35}92%{opacity:1}}
.stack-labels{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px;z-index:2}
.stack-labels span{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap}
.stack-labels span i{width:9px;height:9px;border-radius:50%;background:var(--pc);box-shadow:0 0 12px var(--pc)}
.stack-labels span::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--pc))}
@media (max-width:1023px){.cov-grid{grid-template-columns:1fr;gap:28px}.stack-vis{height:380px}}
@media (max-width:600px){.stack-vis{height:auto;perspective:none}.stack{position:static;display:flex;flex-direction:column;gap:10px}.plane{transform:none!important;width:100%;margin-left:0;height:64px}.stack-labels{position:static;transform:none;margin-top:16px;gap:10px}}

/* ============================================================
   FEATURE GRID (spec §21)
   ============================================================ */
.feat{padding:28px}
.feat-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.feat-top h3{font-size:20px}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fcard{position:relative;overflow:hidden;padding:18px;border-radius:16px;border:1px solid var(--border);background:var(--panel-soft);display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.fcard::before{content:"";position:absolute;inset:0;background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--blue-2) calc(14% * var(--glow) + 4%),transparent),transparent 70%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.fcard:hover{transform:translateY(-3px);border-color:var(--border-hover);box-shadow:var(--shadow)}
.fcard:hover::before{opacity:1}
.fcard:hover .tile{transform:translateY(-2px)}
.fcard b{font-size:15px;font-weight:650;color:var(--text)}
.fcard p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2)}
@media (max-width:1023px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.feat-grid{grid-template-columns:1fr}}

/* ============================================================
   DATA & COVERAGE (spec §22)
   ============================================================ */
.src-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:34px}
.src{padding:16px;border-radius:16px;display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s,border-color .18s}
.src:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tc) 45%,transparent);box-shadow:0 18px 40px -22px var(--tc)}
.src b{font-size:14px;font-weight:650;color:var(--text)}
.src p{margin:0;font-size:12px;line-height:1.45;color:var(--text-2)}
.src .tile{width:38px;height:38px;border-radius:11px}
.src .tile svg{width:17px;height:17px}
@media (max-width:1023px){.src-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.src-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.src-row{grid-template-columns:1fr}}

/* ============================================================
   PRICING (spec §23)
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;align-items:stretch}
.plan{padding:26px 24px;border-radius:22px;display:flex;flex-direction:column;gap:18px;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s}
.plan:hover{transform:translateY(-6px) scale(1.01);border-color:var(--border-hover)}
.plan.mid{border:1.5px solid var(--blue);box-shadow:var(--shadow),0 0 80px -28px color-mix(in srgb,var(--blue) calc(70% * var(--glow)),transparent)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:9999px;background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;font-size:11px;font-weight:600;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--blue) 90%,transparent);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.plan-badge svg{width:11px;height:11px;fill:#fff;stroke:none}
.plan-h b{display:block;font-size:17px;font-weight:700}
.plan-h small{font-size:12.5px;color:var(--text-2)}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-size:36px;font-weight:700;letter-spacing:-.03em}
.price span{font-size:13px;color:var(--text-3)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2)}
.plan li svg{width:15px;height:15px;flex:none;margin-top:2px;fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.plan.mid li svg{stroke:var(--blue)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* ============================================================
   DEMO (spec §24)
   ============================================================ */
.demo-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:56px;align-items:start}
.bullets{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.bullets span{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.bullets span i{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--green) 16%,transparent);display:grid;place-items:center;flex:none}
.bullets svg{width:11px;height:11px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.form{padding:26px;border-radius:22px;display:flex;flex-direction:column;gap:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12px;font-weight:600;color:var(--text-2);transition:color .16s}
.field:focus-within label{color:var(--text)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel-strong);color:var(--text);font:inherit;font-size:14px;transition:border-color .16s,box-shadow .16s}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 16%,transparent)}
.field.bad input{border-color:var(--red);animation:nudge .3s ease}
@keyframes nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
.field textarea{min-height:90px;resize:vertical}
.err{font-size:11.5px;color:var(--red);margin:0}
.fnote{font-size:12px;color:var(--text-3);margin:0}
.btn.sending{opacity:.75;pointer-events:none;transform:scale(.985)}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite;display:none}
.btn.sending .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.ok{background:linear-gradient(180deg,#34d399,var(--green));box-shadow:0 10px 26px -8px color-mix(in srgb,var(--green) 70%,transparent)}
.btn.ok .check path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sent{padding:16px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--green) 40%,transparent);background:color-mix(in srgb,var(--green) 9%,transparent);font-size:13.5px;color:var(--text-2)}
.sent b{display:block;color:var(--text);margin-bottom:3px}
.contact{margin:14px 0 0;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;width:100%}
.crow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.crow dd{margin:0}.crow dt{width:76px;color:var(--text-3);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.crow .val{color:var(--text);font-weight:500;user-select:all;font-variant-numeric:tabular-nums}
.copy{border:1px solid var(--border);background:transparent;color:var(--text-3);border-radius:7px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;cursor:pointer;transition:color .15s,border-color .15s}
.copy:hover{color:var(--blue);border-color:var(--blue)}
.copy.done{color:var(--green);border-color:var(--green)}
@media (max-width:1023px){.demo-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:520px){.frow{grid-template-columns:1fr}}

/* ============================================================
   FOOTER (spec §25)
   ============================================================ */
.foot{position:relative;z-index:2;background:var(--bg-2);border-top:1px solid var(--border);padding-block:52px 28px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:32px}
.foot h4{margin:0 0 14px;font-size:13px;font-weight:650;color:var(--text)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot li a{font-size:13.5px;color:var(--text-2);transition:color .15s}
.foot li a:hover{color:var(--blue)}
.foot-blurb{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:32ch}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-2);transition:color .15s,border-color .15s}
.social a:hover{color:var(--blue);border-color:var(--border-hover)}
.social svg{width:14px;height:14px;fill:currentColor}
.sub{display:flex;gap:8px;margin-top:12px}
.sub input{flex:1;min-width:0;padding:11px 13px;border-radius:12px;border:1px solid var(--border);background:var(--panel-strong);color:var(--text);font:inherit;font-size:13.5px}
.sub input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 16%,transparent)}
.sub button{width:44px;flex:none;border-radius:12px;border:0;background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;cursor:pointer;display:grid;place-items:center}
.sub button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.foot-bot{margin-top:38px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}
@media (max-width:900px){.foot-in{grid-template-columns:1fr 1fr}.foot-in > div:first-child,.foot-in > div:last-child{grid-column:1/-1}}

/* ---------- reduced motion (spec §35) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:400px){.fz .fz-brand{font-size:18px}}
@media (max-width:1279px){.wf-card{white-space:normal;max-width:170px}}

/* reveal utilities + coverage planes */
/* reveal utilities (spec §29) — visible at rest; the class .in plays a one-shot entrance */
.rv.in{animation:rv .65s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d,0s)}
@keyframes rv{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.rv-dash.in{animation:rvd .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d,.7s)}
@keyframes rvd{from{opacity:0;transform:translateY(28px) scale(.94);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.act.new{animation:actIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes actIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* coverage planes: stacked until the section enters, then spread */
.pl{position:absolute;left:0;right:0;top:var(--top);z-index:var(--z);transition:top .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*90ms)}
html.js .stack:not(.open) .pl{top:130px}
.plane{animation:planeFloat var(--fd,6s) ease-in-out infinite alternate}
@keyframes planeFloat{from{translate:0 0}to{translate:0 -4px}}
@media (max-width:600px){.pl{position:static;transition:none}html.js .stack:not(.open) .pl{top:auto}}
@keyframes orbDash{to{stroke-dashoffset:-320}}

/* ============ Teztrak logo (2026-09-28) ============
   The logo pack's two blues: #1F76D2 on light pages, #3D9CF0 on dark — the same
   pair the app uses. The logo SVGs (components/Logo.astro) paint in currentColor.
   Selectors are one step more specific than the ".fz .fz-brand svg" and
   ".brand-mk svg" rules above, which were written for the old pin icon. */
:root{--tz-brand:#1F76D2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tz-brand:#3D9CF0}}
:root[data-theme="dark"]{--tz-brand:#3D9CF0}
.fz .fz-brand .tz-logo-lockup{display:block;width:auto;height:30px;color:var(--tz-brand);overflow:visible}
@media(max-width:640px){.fz .fz-brand .tz-logo-lockup{height:26px}}
.brand-mk .tz-logo-symbol{display:block;width:auto;height:18px}
.brand-tx .tz-logo-wordmark{display:block;width:auto;height:22px;color:var(--tz-brand)}