/* 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, 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}

@keyframes floatY{from{transform:translateY(0)}to{transform:translateY(-16px)}}

/* 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 @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 .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 .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-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(42px,3.7vw,54px);line-height:1.04;letter-spacing:-.05em;margin:21px 0 13px;font-weight:790}
.fz .headline-line{display:inline-block;white-space:normal;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 .intro{animation:descAppear .75s both}
.fz .hero-grid{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:52px;align-items:center;padding:56px 0 8px}
.fz .hero-copy{position:relative;z-index:2;max-width:520px}
.fz .hero-trust{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-size:13px;font-weight:610;animation:descAppear .8s .83s backwards}
.fz .hero-trust li{display:inline-flex;align-items:center;gap:7px}
.fz .hero-trust svg{width:15px;height:15px;fill:none;stroke:#3eaafa;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fz .hero-shot{position:relative;z-index:1;animation:shotIn .9s .3s both}
@keyframes shotIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fz .shot-frame{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--glass-border);background:var(--glass-strong);box-shadow:0 34px 90px -34px rgba(0,20,60,.5),0 0 0 1px rgba(255,255,255,.04)}
.fz .shot-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--badge)}
.fz .shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--glass-border)}
.fz .shot-bar span{margin-left:10px;font-size:12px;color:var(--soft)}
.fz .shot{display:block;width:100%;height:auto}
.fz .shot-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fz .shot-dark{display:block} :root:not([data-theme="light"]) .fz .shot-light{display:none}}
:root[data-theme="dark"] .fz .shot-dark{display:block} :root[data-theme="dark"] .fz .shot-light{display:none}
.fz .shot-card{position:absolute;z-index:3;border-radius:14px;border:1px solid var(--glass-border);background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -18px rgba(0,20,60,.5)}
.fz .shot-card-alert{left:-28px;bottom:56px;width:292px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;animation:descAppear .7s 1s backwards}
.fz .shot-card-alert .tile{width:36px;height:36px;border-radius:10px}
.fz .shot-card-alert .tile svg{width:16px;height:16px}
.fz .shot-card-alert b{display:block;font-size:12.5px;font-weight:650;color:var(--ink)}
.fz .shot-card-alert p{margin:3px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.fz .shot-card-fleet{right:-22px;top:64px;padding:10px 14px;animation:descAppear .7s 1.15s backwards}
.fz .shot-card-label{display:block;margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.fz .shot-chips{display:flex;gap:12px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.fz .shot-chips span{display:inline-flex;align-items:center;gap:6px}
.fz .shot-chips i{width:7px;height:7px;border-radius:50%}
.fz .c-green{background:#19d59d}.fz .c-red{background:#ff5e6d}.fz .c-grey{background:#8a9bb2}
@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:40px;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-grid{gap:36px}
.fz .desc{font-size:15px;max-width:400px}
.fz .stat-shell{margin-top:32px}}
@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-grid{grid-template-columns:1fr;gap:36px;padding-top:48px}
.fz .hero-copy{max-width:650px}
.fz .shot-card-alert{left:8px;bottom:28px}
.fz .shot-card-fleet{right:8px;top:48px}
.fz .stat-shell{margin-top:36px}
.fz h1{font-size:clamp(40px,6vw,56px)}
.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-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-grid{padding-top:40px}
.fz .hero-trust{font-size:12px;gap:8px 14px}
.fz .shot-card{display:none}
.fz .stat-shell{margin-top:28px;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}
}

/* ============================================================
   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}}

/* ============================================================
   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)}