/* =========================================================
   ZeroPixel · Liquid Glass design system
   ========================================================= */

:root{
  --bg:#ffffff;
  --ink:#10172D;
  --muted:#56627B;
  --line:#DCE4F2;
  --accent:#776DFF;

  --navy-1:#101B3A;
  --navy-2:#15123B;
  --navy-3:#270E35;

  --aurora: linear-gradient(100deg,#89F7E5 0%,#51C8FF 26%,#9A77FF 54%,#FC7CC8 78%,#FFBC72 100%);

  --glass-bg: rgba(255,255,255,.55);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.65);
  --glass-shadow: 0 8px 40px rgba(16,23,45,.08);
  --glass-shadow-lg: 0 24px 70px rgba(16,23,45,.12);

  --radius-sm:16px;
  --radius:24px;
  --radius-lg:32px;
  --radius-pill:999px;

  --maxw:1160px;
  --gutter: clamp(20px,5vw,48px);
  --section-y: clamp(72px,10vw,140px);

  --ease: cubic-bezier(.22,1,.36,1);
  --dur:.6s;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          Inter, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:clamp(16px,1.05vw,17px);
  letter-spacing:-0.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.1; letter-spacing:-0.03em; font-weight:600; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:rgba(119,109,255,.1);
  color:#4b3fd6; padding:.1em .45em; border-radius:6px;
}

/* ---------- Aurora background ---------- */
.aurora-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(137,247,229,.28), transparent 70%),
    radial-gradient(55% 45% at 88% 4%, rgba(154,119,255,.22), transparent 70%),
    radial-gradient(60% 55% at 80% 82%, rgba(252,124,200,.18), transparent 72%),
    radial-gradient(50% 45% at 8% 78%, rgba(81,200,255,.20), transparent 72%);
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--alt{ background:linear-gradient(180deg,rgba(255,255,255,0),rgba(240,244,255,.55) 30%,rgba(255,255,255,0)); }

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* ---------- Glass surface ---------- */
[data-glass]{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  [data-glass]{ background:rgba(255,255,255,.92); }
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.grad-text{
  background:var(--aurora);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section__head{ max-width:720px; margin-bottom:clamp(36px,5vw,64px); }
.section__title{ font-size:clamp(1.9rem,3.6vw,3rem); }
.section__lead{ margin-top:18px; color:var(--muted); font-size:clamp(1rem,1.3vw,1.15rem); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:12px 22px; border-radius:var(--radius-pill);
  font-weight:600; font-size:.95rem; letter-spacing:-0.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .35s var(--ease), border-color .35s var(--ease);
}
.btn--lg{ padding:15px 28px; font-size:1rem; }
.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,#5b52f0,#776DFF 55%,#9A77FF);
  box-shadow:0 10px 26px rgba(119,109,255,.35);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(119,109,255,.45); }
.btn--ghost{
  color:var(--ink);
  background:rgba(255,255,255,.6);
  border-color:rgba(16,23,45,.1);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(119,109,255,.4); background:rgba(255,255,255,.85); }
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- Reveal on scroll ----------
   Only hidden when JS is available (html.js), so the page
   stays fully readable if scripts fail or are disabled. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* Keep anchored sections clear of the sticky nav */
section[id]{ scroll-margin-top:104px; }

/* ---------- Navigation ---------- */
.nav{ position:sticky; top:0; z-index:100; padding:14px var(--gutter) 0; }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; gap:24px;
  padding:10px 12px 10px 18px;
  border-radius:var(--radius-pill);
  transition:box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.nav.is-scrolled .nav__inner{ box-shadow:var(--glass-shadow-lg); background:var(--glass-bg-strong); }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand__orb{ width:34px; height:34px; flex:none; border-radius:10px; }
.brand__name{ font-size:1.12rem; font-weight:500; letter-spacing:-0.03em; }
.brand__name strong{ font-weight:700; }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links a{
  padding:8px 14px; border-radius:var(--radius-pill);
  font-size:.92rem; font-weight:500; color:var(--muted);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(119,109,255,.09); }

.nav__actions{ display:flex; align-items:center; gap:10px; }
.nav__toggle{
  display:none; width:42px; height:42px; border-radius:12px; border:1px solid rgba(16,23,45,.12);
  background:rgba(255,255,255,.6); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__toggle span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.nav__mobile{
  max-width:var(--maxw); margin:10px auto 0;
  border-radius:var(--radius); padding:14px;
  display:flex; flex-direction:column; gap:4px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow-lg);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
}
.nav__mobile[hidden]{ display:none; }
.nav__mobile a{ padding:12px 14px; border-radius:12px; font-weight:500; color:var(--muted); }
.nav__mobile a:hover{ background:rgba(119,109,255,.09); color:var(--ink); }
.nav__mobile .btn{ margin-top:8px; color:#fff; }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(64px,9vw,128px) clamp(40px,6vw,80px); }
.hero__copy{ max-width:820px; }
.hero__title{ font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-0.045em; }
.hero__lead{ margin-top:24px; max-width:60ch; color:var(--muted); font-size:clamp(1.05rem,1.5vw,1.28rem); }
.hero__lead strong{ color:var(--ink); font-weight:600; }
.hero__actions{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.hero__facts{
  margin-top:clamp(40px,6vw,64px); padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,32px);
}
.hero__facts li{ display:flex; flex-direction:column; gap:6px; }
.hero__facts strong{
  font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:700; letter-spacing:-0.03em;
  background:var(--aurora); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__facts span{ font-size:.85rem; color:var(--muted); }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:clamp(16px,2vw,22px); }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.card{
  border-radius:var(--radius); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--glass-shadow-lg); }
.card h3{ font-size:1.08rem; }
.card p{ color:var(--muted); font-size:.95rem; }
.card__num{
  font-size:.85rem; font-weight:700; letter-spacing:.05em;
  background:var(--aurora); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  color:var(--accent); background:rgba(119,109,255,.1); flex:none;
}
.icon svg{ width:24px; height:24px; }

/* ---------- Callout ---------- */
.callout{
  border-radius:var(--radius); padding:clamp(22px,2.6vw,32px);
  margin-bottom:clamp(28px,4vw,44px);
  border-left:4px solid transparent;
  background-image:linear-gradient(var(--glass-bg),var(--glass-bg)),var(--aurora);
  background-origin:border-box; background-clip:padding-box,border-box;
}
.callout__tag{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.callout p{ color:var(--muted); max-width:70ch; }

/* ---------- Stack line ---------- */
.stackline{
  margin-top:clamp(14px,2.4vw,24px); display:flex; flex-wrap:wrap; gap:14px 36px;
  font-size:.9rem;
}
.stackline li{ display:flex; align-items:baseline; gap:9px; }
.stackline strong{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.stackline span{ color:var(--muted); }

/* ---------- Architecture layers ---------- */
.arch{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px); position:relative; }
.arch__layer{
  position:relative; border-radius:var(--radius); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.arch__layer:hover{ transform:translateY(-5px); box-shadow:var(--glass-shadow-lg); }
.arch__layer::before{
  content:""; position:absolute; top:0; left:clamp(22px,2.4vw,30px); right:clamp(22px,2.4vw,30px);
  height:3px; border-radius:3px; background:var(--aurora); opacity:.9;
}
.arch__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.arch__step{ font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--muted); }
.arch__status{
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radius-pill); white-space:nowrap;
}
.arch__status.is-done{ color:#0f7a4a; background:rgba(34,197,94,.14); }
.arch__status.is-progress{ color:#b45309; background:rgba(245,158,11,.18); }
.arch__status.is-next{ color:#4b3fd6; background:rgba(119,109,255,.14); }
.arch__layer h3{ font-size:1.06rem; }
.arch__layer p{ color:var(--muted); font-size:.94rem; }

/* ---------- Demo ---------- */
.demo{ border-radius:var(--radius-lg); padding:clamp(20px,3vw,36px); }
.demo__controls{
  display:inline-flex; gap:4px; padding:5px; margin-bottom:22px;
  border-radius:var(--radius-pill); background:rgba(16,23,45,.06);
}
.seg{
  border:0; cursor:pointer; padding:10px 20px; border-radius:var(--radius-pill);
  font-family:inherit; font-size:.9rem; font-weight:600; color:var(--muted);
  background:transparent; transition:color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.seg.is-active{ color:var(--ink); background:#fff; box-shadow:0 4px 14px rgba(16,23,45,.1); }
.demo__stage{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,#f7f9ff,#eef2ff);
  border:1px solid rgba(16,23,45,.06);
}
.demo__svg{ width:100%; height:auto; display:block; }
.demo__path{ fill:rgba(119,109,255,.14); stroke:var(--accent); stroke-width:2; transition:stroke-width .3s var(--ease); }
.demo__nodes circle{
  fill:#fff; stroke:var(--accent); stroke-width:2;
  transition:fill .2s var(--ease), stroke .2s var(--ease);
}
.demo.is-editable .demo__nodes circle{ cursor:grab; }
.demo.is-editable .demo__nodes circle:hover{ fill:var(--accent); }
.demo__nodes circle:active{ cursor:grabbing; }
.demo__hint{
  position:absolute; left:16px; bottom:14px; margin:0;
  font-size:.82rem; font-weight:500; color:var(--muted);
  background:rgba(255,255,255,.75); padding:7px 14px; border-radius:var(--radius-pill);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.demo__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 0;
}
.demo__stats > div{
  padding:16px 18px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6); border:1px solid rgba(16,23,45,.06);
}
.demo__stats dt{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.demo__stats dd{ margin:6px 0 0; font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:700; letter-spacing:-0.03em; }
.demo__stats dd.is-good{ color:#0f7a4a; }
.demo__stats dd.is-bad{ color:#c2410c; }

/* ---------- Market ---------- */
.market{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(16px,2vw,22px); }
.market__stat,.market__usp{ border-radius:var(--radius); padding:clamp(26px,3vw,38px); }
.market__stat{ display:flex; flex-direction:column; justify-content:center; gap:10px; }
.market__value{
  font-size:clamp(2.6rem,6vw,4rem); font-weight:700; letter-spacing:-0.05em; line-height:1;
  background:var(--aurora); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.market__label{ color:var(--muted); font-size:.98rem; }
.market__usp p{ color:var(--muted); margin-top:6px; }
.market__usp .callout__tag{ margin-bottom:8px; }

/* ---------- Comparison table ---------- */
.table-wrap{ margin-top:clamp(20px,3vw,28px); border-radius:var(--radius); padding:clamp(8px,1.4vw,14px); overflow-x:auto; }
.compare{ width:100%; border-collapse:collapse; min-width:560px; }
.compare caption{ text-align:left; padding:14px 16px 10px; color:var(--muted); font-size:.85rem; }
.compare th,.compare td{ padding:15px 16px; text-align:center; font-size:.92rem; }
.compare thead th{ color:var(--muted); font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.compare tbody th{ text-align:left; font-weight:500; color:var(--ink); }
.compare tbody tr{ border-top:1px solid var(--line); }
.compare thead th:nth-child(2){ color:var(--accent); }
.compare .yes{ color:#0f7a4a; font-weight:600; }
.compare .no{ color:#c2410c; font-weight:600; }
.compare .part{ color:var(--muted); }

/* ---------- Team ---------- */
.team{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,26px); }
.person{
  display:flex; gap:clamp(18px,2vw,26px); align-items:center;
  border-radius:var(--radius-lg); padding:clamp(22px,2.6vw,30px);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.person:hover{ transform:translateY(-5px); box-shadow:var(--glass-shadow-lg); }
.avatar{
  position:relative; width:clamp(84px,11vw,112px); aspect-ratio:1; flex:none;
  border-radius:26px; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#101B3A,#270E35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.avatar::after{
  content:attr(data-initials);
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(1.5rem,3vw,2rem); font-weight:700; letter-spacing:.02em;
  color:transparent; background:var(--aurora);
  -webkit-background-clip:text; background-clip:text;
}
.avatar__img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.person__body h3{ font-size:1.25rem; }
.person__role{ color:var(--accent); font-size:.88rem; font-weight:600; margin-top:4px; }
.person__note{ color:var(--muted); font-size:.92rem; margin-top:8px; }
.person__bio{ color:var(--muted); font-size:.92rem; line-height:1.62; margin-top:10px; }
.person__bio em{ font-style:italic; color:var(--ink); }
.person__links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; }
.person__link{
  display:inline-block; font-size:.9rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid rgba(119,109,255,.4); padding-bottom:1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.person__link:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Roadmap ---------- */
.roadmap{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); position:relative; }
.roadmap__step{
  position:relative; border-radius:var(--radius); padding:clamp(24px,2.6vw,32px) clamp(22px,2.4vw,28px) clamp(22px,2.4vw,28px);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.roadmap__step:hover{ transform:translateY(-5px); box-shadow:var(--glass-shadow-lg); }
.roadmap__dot{
  position:absolute; top:-7px; left:clamp(24px,2.6vw,32px);
  width:14px; height:14px; border-radius:50%;
  background:var(--aurora); box-shadow:0 0 0 4px #fff;
}
.roadmap__step h3{ font-size:1.1rem; margin-bottom:10px; }
.roadmap__step p{ color:var(--muted); font-size:.94rem; }

/* ---------- Signals ---------- */
.signals{
  margin-top:clamp(28px,4vw,44px); display:flex; flex-wrap:wrap; gap:12px 30px;
  font-size:.9rem; color:var(--muted);
}
.signals li{ display:flex; align-items:center; gap:10px; }
.signals li::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--aurora); flex:none;
}

/* ---------- CTA ---------- */
.cta__card{
  border-radius:var(--radius-lg); padding:clamp(40px,6vw,80px) clamp(28px,5vw,64px);
  text-align:center; display:flex; flex-direction:column; align-items:center;
  background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),var(--aurora);
  background-origin:border-box; background-clip:padding-box,border-box;
}
.cta__title{ font-size:clamp(2rem,4.4vw,3.2rem); }
.cta__lead{ margin-top:18px; color:var(--muted); max-width:52ch; font-size:clamp(1rem,1.3vw,1.15rem); }
.cta__actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---------- Footer ---------- */
.footer{ padding-block:clamp(48px,6vw,72px) 32px; border-top:1px solid var(--line); margin-top:clamp(40px,6vw,80px); }
.footer__inner{ display:grid; grid-template-columns:1.2fr 2fr; gap:clamp(28px,4vw,56px); }
.footer__brand img{ width:210px; height:auto; margin-bottom:16px; }
.footer__brand p{ color:var(--muted); max-width:34ch; font-size:.95rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__cols h4{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:700; }
.footer__cols a,.footer__cols span{ display:block; color:var(--ink); font-size:.93rem; padding:4px 0; }
.footer__cols a:hover{ color:var(--accent); }
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:clamp(36px,5vw,56px); padding-top:24px; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .arch{ grid-template-columns:repeat(2,1fr); }
  .roadmap{ grid-template-columns:1fr; }
  .market{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__actions .btn--primary{ display:none; }
  .hero__facts{ grid-template-columns:repeat(2,1fr); }
  .team{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .cards--4{ grid-template-columns:1fr; }
  .arch{ grid-template-columns:1fr; }
  .demo__stats{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .compare th,.compare td{ padding:12px 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}