/* ===================== Design tokens (homepage-specific) ===================== */
:root{
  --ink:#101828;
  --text:#344054;
  --text-dim:#667085;
  --text-faint:#98A2B3;
  --paper:#FFFFFF;
  --paper-alt:#F9FAFB;
  --card:#FFFFFF;
  --line:#E4E7EC;
  --line-soft:#EEF0F3;
  --brand:#3161E8;
  --brand-dark:#1F44B0;
  --brand-soft:#5F86EA;
  --brand-tint:#EDF2FE;
  --gold:#B7862E;
  --gold-tint:#FBF3E1;
  --gold-line:#EAD7A8;
  --good:#12805C;
  --good-tint:#E6F4EE;
  --radius-sm:8px;
  --radius-md:12px;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --sans:'Inter', -apple-system, sans-serif;
  --display:'Public Sans', 'Inter', -apple-system, sans-serif;
}

/* Homepage-only styles — loaded after site.css + nav-footer.css */


@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#FFFFFF; --paper-alt:#F9FAFB; --card:#FFFFFF; --ink:#101828; --text:#344054;
  }
}

:root[data-theme="dark"]{
  --paper:#FFFFFF; --paper-alt:#F9FAFB; --card:#FFFFFF; --ink:#101828; --text:#344054;
}


*{box-sizing:border-box; margin:0; padding:0;}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}

section[id], .product-card[id]{ scroll-margin-top:84px; }

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}

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

a{color:inherit; text-decoration:none;}

::selection{background:var(--brand); color:#fff;}

:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }


h1,h2,h3,h4{font-family:var(--display); color:var(--ink); font-weight:700; letter-spacing:-0.015em;}


/* --- Balanced fluid type scale: caps on large desktop, tuned for tablet --- */
.h-xl{ font-size:clamp(2.15rem, 1.2rem + 3.3vw, 3.7rem); line-height:1.06; }

.h-lg{ font-size:clamp(1.45rem, 1rem + 1.4vw, 2.05rem); line-height:1.2; }

.h-md{ font-size:clamp(1.15rem, 1rem + 0.5vw, 1.3rem); line-height:1.3; }

.lede{ font-size:clamp(1rem, 0.94rem + 0.25vw, 1.1rem); color:var(--text-dim); max-width:48ch; line-height:1.65; }

.eyebrow{ font-family:var(--sans); font-weight:600; font-size:0.8rem; color:var(--brand); }


.pill{
  display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; font-weight:600;
  padding:6px 13px; border-radius:999px; background:var(--brand-tint); color:var(--brand-dark);
  border:1px solid #D7E2FB;
}


/* ===================== Gradient text ===================== */
.grad-text{
  background:linear-gradient(100deg, #3161E8 0%, #1F44B0 22%, #3E6FFF 45%, #6C4FE0 68%, #3161E8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800;
}

.grad-text-anim{
  background-size:280% auto; animation:gradShift 9s ease-in-out 1;
  animation-fill-mode:forwards;
}

@keyframes gradShift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

@media (prefers-reduced-motion: reduce){ .grad-text-anim{ animation:marquee 34s linear infinite; } }

.pill .dot{width:6px; height:6px; border-radius:50%; background:#12B76A; position:relative;}

.pill .dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #12B76A;
  animation:ring 2s ease-out infinite;
}

@keyframes ring{ 0%{transform:scale(0.4); opacity:0.8;} 100%{transform:scale(1.6); opacity:0;} }


/* ===================== Scroll reveal ===================== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }

.reveal.in{ opacity:1; transform:translateY(0); }

.reveal-stagger > *{ opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }

.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }

.reveal-stagger.in > *:nth-child(1){ transition-delay:0ms; }

.reveal-stagger.in > *:nth-child(2){ transition-delay:70ms; }

.reveal-stagger.in > *:nth-child(3){ transition-delay:140ms; }

.reveal-stagger.in > *:nth-child(4){ transition-delay:210ms; }

.reveal-stagger.in > *:nth-child(5){ transition-delay:280ms; }

.reveal-stagger.in > *:nth-child(6){ transition-delay:350ms; }

@media (prefers-reduced-motion: reduce){ .reveal,.reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; } }


.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:600;
  padding:4px 11px; border-radius:999px; background:var(--gold-tint); color:var(--gold);
  border:1px solid var(--gold-line);
}

.badge svg{width:12px; height:12px;}


.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-sm); font-weight:700; font-size:0.95rem;
  border:1px solid transparent; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  font-family:var(--sans); white-space:nowrap;
}

.btn:active{ transform:translateY(1px); }

.btn .arrow, .link-arrow .arrow{ display:inline-block; transition:transform .18s ease; line-height:1; }

.btn:hover .arrow, .link-arrow:hover .arrow{ transform:translateX(4px); }

.link-arrow{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--brand); font-size:0.92rem; transition:color .15s ease; }

.link-arrow:hover{ color:var(--brand-dark); }

.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand-dark); box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px -6px rgba(49,97,232,0.55); }

.btn-primary:hover{ background:var(--brand-dark); box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 20px -6px rgba(49,97,232,0.65); }

.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--brand-soft); box-shadow:0 1px 2px rgba(16,24,40,0.04); }

.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); box-shadow:0 2px 8px -2px rgba(49,97,232,0.28); }


section{padding:72px 0;}

.section-tight{padding:48px 0;}

@media (max-width:1024px){ section{padding:52px 0;} .section-tight{padding:38px 0;} }

@media (max-width:640px){ section{padding:40px 0;} }

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-actions{ display:none; }
  .nav-burger{ display:flex; }
}


/* ===================== Hero ===================== */
.hero{ padding:52px 0 0; position:relative; overflow:hidden; background:radial-gradient(900px 380px at 88% -6%, var(--brand-tint) 0%, transparent 62%); }


.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start; padding-bottom:36px; }

@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:34px;} }


.hero h1{ margin:16px 0 16px; font-weight:800; letter-spacing:-0.025em; }

.hero .lede{ margin-bottom:26px; }

.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }


.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:40px; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--card); box-shadow:0 1px 2px rgba(16,24,40,0.03); }

.stat-cell{ padding:16px 20px 18px; border-right:1px solid var(--line-soft); position:relative; }

.stat-cell::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),#5B8DEF); opacity:0.85; }

.stat-cell:last-child{ border-right:none; }

.stat-cell .v{ font-family:var(--display); font-weight:700; font-size:clamp(1.25rem, 1rem + 0.9vw, 1.6rem); color:var(--ink); }

.stat-cell .k{ font-size:0.8rem; color:var(--text-faint); margin-top:2px; }

@media (max-width:640px){
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .stat-cell{ border-bottom:1px solid var(--line-soft); }
  .stat-cell:nth-child(2n){ border-right:none; }
  .stat-cell:nth-last-child(-n+2){ border-bottom:none; }
}

@media (max-width:420px){
  .stat-cell{ padding:13px 14px 15px; }
  .stat-cell .v{ font-size:1.15rem; }
  .stat-cell .k{ font-size:0.72rem; }
}


/* live snapshot card (light) */
.snapshot{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 8px 24px -14px rgba(16,24,40,0.16); }

.snapshot-bar{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line-soft); background:var(--paper-alt);}

.snapshot-bar .path{ font-family:var(--mono); font-size:0.72rem; color:var(--text-faint);}

.snapshot-bar .pill{ padding:3px 9px; font-size:0.72rem;}

.snapshot-body{ padding:20px; }

.snapshot-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }

.snapshot-metric .k{ color:var(--text-faint); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:5px;}

.snapshot-metric .v{ font-family:var(--mono); font-size:1.2rem; color:var(--ink); font-weight:500;}

.snapshot-metric .v.good{ color:var(--good); }

.sparkline-wrap{ margin-bottom:16px; border:1px solid var(--line-soft); border-radius:8px; background:var(--paper-alt); padding:8px 10px 0; }

.sparkline-svg{ width:100%; height:56px; display:block; }

.spark-line{ stroke-dasharray:420; stroke-dashoffset:420; animation:drawLine 1.6s ease forwards .3s; }

.spark-area{ opacity:0; animation:fadeInArea 1s ease forwards 1.1s; }

@keyframes drawLine{ to{ stroke-dashoffset:0; } }

@keyframes fadeInArea{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){ .spark-line{ stroke-dashoffset:0; animation:marquee 34s linear infinite; } .spark-area{ opacity:1; animation:none; } }

.snapshot-log{ border-top:1px solid var(--line-soft); padding-top:16px; display:flex; flex-direction:column; gap:9px; }

.snapshot-log-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.78rem; color:var(--text-faint); gap:10px;}

.snapshot-log-row .path{ color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.snapshot-log-row .status{ color:var(--good); }


/* marquee trust strip */
.trust-strip{ position:relative; z-index:2; border-top:1px solid var(--line); background:var(--paper-alt); padding:20px 0; }

.trust-strip-label{ font-size:0.78rem; font-weight:600; color:var(--text-faint); white-space:nowrap; text-align:center;}

.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.marquee-track{ display:flex; gap:44px; width:max-content; animation:marquee 34s linear infinite; }

.marquee:hover .marquee-track{ animation-play-state:paused; }

.marquee-track span{ font-family:var(--display); font-weight:700; font-size:0.92rem; color:var(--text-dim); letter-spacing:-0.01em; opacity:0.7; white-space:nowrap; }

.marquee-item{ display:inline-flex !important; align-items:center; gap:8px; padding:6px 4px; border-radius:8px; transition:color .2s ease, opacity .2s ease, transform .2s ease, background .2s ease; transform-origin:center; --acc:var(--brand); --acc-tint:var(--brand-tint); }

.marquee-item svg{ width:16px; height:16px; flex-shrink:0; opacity:0.6; transition:opacity .2s ease, color .2s ease; }

.marquee-item:hover{ color:var(--acc); opacity:1; transform:scale(1.14); background:var(--acc-tint); }

.marquee-item:hover svg{ opacity:1; color:var(--acc); }

.marquee-item.acc-1{ --acc:#3161E8; --acc-tint:#EDF2FE; }

.marquee-item.acc-2{ --acc:#0E8F82; --acc-tint:#E6F5F3; }

.marquee-item.acc-3{ --acc:#B7862E; --acc-tint:#FBF3E1; }

.marquee-item.acc-4{ --acc:#6852D6; --acc-tint:#F0EDFC; }

.marquee-item.acc-5{ --acc:#12805C; --acc-tint:#E6F4EE; }

.marquee-item.acc-6{ --acc:#1B87C9; --acc-tint:#E8F4FB; }

@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:marquee 34s linear infinite; } }



/* ===================== Credibility datasheet ===================== */
.datasheet{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}

.datasheet-head{ padding:24px 26px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap;}

.datasheet-head h2{max-width:38ch;}

.datasheet-grid{ display:grid; grid-template-columns:repeat(4,1fr); }

.datasheet-cell{ padding:20px 26px; border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft);}

.datasheet-cell:nth-child(4n){border-right:none;}

.datasheet-cell .v{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,1rem + 0.7vw,1.5rem); color:var(--ink); margin-bottom:4px;}

.datasheet-cell .k{ font-size:0.82rem; color:var(--text-faint);}

@media (max-width:760px){ .datasheet-grid{grid-template-columns:1fr 1fr;} .datasheet-cell:nth-child(4n){border-right:1px solid var(--line-soft);} .datasheet-cell:nth-child(2n){border-right:none;} }


/* ===================== Spec list (features) ===================== */
.spec-list{ border-top:1px solid var(--line); }

.spec-row{ display:grid; grid-template-columns:260px 1fr; gap:28px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline;}

.spec-row .term{ font-family:var(--display); font-weight:700; font-size:1rem; display:flex; align-items:center; gap:10px;}

.spec-list-numbered .spec-row .term::before{
  content:''; display:inline-block; flex-shrink:0;
  width:9px; height:9px; border-radius:50%; background:var(--brand);
}

.spec-row .term svg{width:18px; height:18px; color:var(--brand); flex-shrink:0;}

.spec-row .def{ color:var(--text-dim); max-width:58ch; font-size:0.95rem;}

@media (max-width:760px){ .spec-row{grid-template-columns:1fr; gap:8px;} }


/* ===================== Product cards ===================== */
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

@media (max-width:980px){ .products-grid{grid-template-columns:1fr 1fr;} }

@media (max-width:700px){ .products-grid{grid-template-columns:1fr;} }

.product-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

.product-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -20px rgba(16,24,40,0.22); border-color:#D0D5DD; }

.product-card.featured:hover{ border-color:var(--brand); }

.product-card.featured::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(49,97,232,0.10), transparent);
  transform:skewX(-18deg); transition:left .7s ease; pointer-events:none;
}

.product-card.featured:hover::before{ left:130%; }

.product-card .kicker{ font-family:var(--sans); font-weight:600; font-size:0.75rem; color:var(--brand); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:12px;}

.product-title-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }

.product-icon{ width:34px; height:34px; border-radius:9px; background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.product-icon svg{ width:18px; height:18px; }

.product-card h3{ font-size:1.2rem; margin-bottom:0;}

.product-card p{ color:var(--text-dim); font-size:0.92rem; margin-bottom:18px;}

.product-card .price{ font-family:var(--display); font-weight:700; font-size:1.5rem; margin-bottom:4px; color:var(--ink);}

.product-card .price small{ font-size:0.74rem; color:var(--text-faint); font-weight:500; font-family:var(--sans);}

.product-card ul{ list-style:none; margin:14px 0 20px; display:flex; flex-direction:column; gap:9px;}

.product-card li{ display:flex; gap:9px; font-size:0.87rem; color:var(--text-dim); align-items:flex-start;}

.product-card li svg{width:15px; height:15px; color:var(--good); flex-shrink:0; margin-top:2px;}

.product-card .cta-row{ display:flex; gap:10px; margin-top:auto; }

.product-card.featured{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), 0 12px 24px -16px rgba(49,97,232,0.28); }


/* ===================== Live demo tabs ===================== */
.demo-shell{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }

.demo-tabs{ display:flex; border-bottom:1px solid var(--line); position:relative; }

.demo-tab{
  flex:1; min-width:160px; text-align:left; background:none; border:none; cursor:pointer;
  padding:14px 18px; border-bottom:2px solid transparent; border-right:1px solid var(--line-soft);
  display:flex; align-items:center; gap:11px; transition:background .15s ease, border-color .15s ease;
  font-family:var(--sans);
}

.demo-tab:last-child{ border-right:none; }

.demo-tab:hover{ background:var(--paper-alt); }

.demo-tab.active{ border-bottom-color:var(--brand); background:var(--brand-tint); }

.demo-tab-icon{ width:34px; height:34px; border-radius:9px; background:var(--paper-alt); color:var(--text-faint); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s ease, color .15s ease; }

.demo-tab-icon svg{ width:17px; height:17px; }

.demo-tab.active .demo-tab-icon{ background:var(--brand); color:#fff; }

.demo-tab-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }

.demo-tab-label{ font-weight:700; font-size:0.92rem; color:var(--ink); }

.demo-tab-sub{ font-family:var(--mono); font-size:0.7rem; color:var(--text-faint); }

.demo-tab.active .demo-tab-sub{ color:var(--brand-dark); }

.demo-caret{
  position:absolute; width:13px; height:13px; top:100%; margin-top:-7px; left:24px;
  background:var(--brand-tint); border-right:1px solid var(--brand); border-bottom:1px solid var(--brand);
  transform:rotate(45deg); transition:left .25s ease; z-index:3; pointer-events:none;
}

@media (max-width:600px){ .demo-caret{ display:none; } }


.demo-panel{ display:none; padding:28px; animation:fadeIn .35s ease; }

.demo-panel.active{ display:block; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.demo-panel-grid{ display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:stretch; height:236px; }

@media (max-width:700px){ .demo-panel-grid{grid-template-columns:1fr; gap:18px; height:480px; overflow:hidden;} }

@media (max-width:400px){ .demo-panel-grid{height:440px;} }

.demo-meta-row{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:0.86rem;}

.demo-meta .btn{ white-space:normal; text-align:center; line-height:1.3; }

.demo-meta-row .k{ color:var(--text-faint); }

.demo-meta-row .v{ font-family:var(--mono); color:var(--ink); font-weight:500; }

.demo-meta-row .v.good{ color:var(--good); }


.demo-visual{ background:var(--paper-alt); border:1px solid var(--line-soft); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:10px; justify-content:center; min-height:236px; }

@media (max-width:700px){ .demo-visual{ min-height:200px; } }

@media (max-width:400px){ .demo-visual{ min-height:180px; } }

.chat-bubble{ max-width:78%; padding:10px 14px; border-radius:14px; font-size:0.88rem; line-height:1.5; }

.chat-bubble.user{ align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px; }

.chat-bubble.bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); color:var(--text); border-bottom-left-radius:4px; }


.ws-card{ width:100%; display:flex; flex-direction:column; gap:6px; }

.ws-row{ display:flex; justify-content:space-between; font-size:0.86rem; color:var(--text-dim); }

.ws-row strong{ color:var(--ink); font-family:var(--mono); font-weight:500; }

.ws-bar{ height:6px; border-radius:999px; background:var(--line-soft); overflow:hidden; margin-bottom:8px; }

.ws-bar-fill{ height:100%; background:var(--brand); border-radius:999px; width:0; transition:width 1s ease; }

.ws-bar-fill.alt{ background:var(--gold); }


/* ===================== Bento feature grid ===================== */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

@media (max-width:900px){ .bento{grid-template-columns:1fr 1fr;} }

@media (max-width:600px){ .bento{grid-template-columns:1fr;} }

.bento-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px;
  display:flex; flex-direction:column; gap:10px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bento-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -20px rgba(16,24,40,0.2); border-color:#D0D5DD; }

.bento-icon{ width:38px; height:38px; border-radius:10px; background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; }

.bento-icon svg{ width:19px; height:19px; }

.bento-card h4{ font-size:1.02rem; color:var(--ink); }

.bento-card p{ color:var(--text-dim); font-size:0.89rem; }

.bento-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }

.chip{ font-size:0.72rem; font-weight:600; color:var(--brand-dark); background:var(--brand-tint); border:1px solid #D7E2FB; padding:3px 9px; border-radius:999px; }

.uptime-bars{ display:flex; align-items:flex-end; gap:2px; height:40px; margin-top:auto; padding-top:6px; }

.uptime-bars span{ flex:1; background:var(--good); border-radius:2px; opacity:0.85; transform:scaleY(0); transform-origin:bottom; animation:barGrow .5s ease forwards; }

.uptime-bars span:nth-child(1){animation-delay:0ms;}
 .uptime-bars span:nth-child(2){animation-delay:15ms;}
 .uptime-bars span:nth-child(3){animation-delay:30ms;}
 .uptime-bars span:nth-child(4){animation-delay:45ms;}
 .uptime-bars span:nth-child(5){animation-delay:60ms;}

.uptime-bars span:nth-child(6){animation-delay:75ms;}
 .uptime-bars span:nth-child(7){animation-delay:90ms;}
 .uptime-bars span:nth-child(8){animation-delay:105ms;}
 .uptime-bars span:nth-child(9){animation-delay:120ms;}
 .uptime-bars span:nth-child(10){animation-delay:135ms;}

.uptime-bars span:nth-child(11){animation-delay:150ms;}
 .uptime-bars span:nth-child(12){animation-delay:165ms;}
 .uptime-bars span:nth-child(13){animation-delay:180ms;}
 .uptime-bars span:nth-child(14){animation-delay:195ms;}
 .uptime-bars span:nth-child(15){animation-delay:210ms;}

.uptime-bars span:nth-child(16){animation-delay:225ms;}
 .uptime-bars span:nth-child(17){animation-delay:240ms;}
 .uptime-bars span:nth-child(18){animation-delay:255ms;}
 .uptime-bars span:nth-child(19){animation-delay:270ms;}
 .uptime-bars span:nth-child(20){animation-delay:285ms;}

@keyframes barGrow{ to{ transform:scaleY(1); } }

@media (prefers-reduced-motion: reduce){ .uptime-bars span{ transform:scaleY(1); animation:marquee 34s linear infinite; } }


/* ===================== Product deep-dive ===================== */
.deep-dive{ display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:start; }

.deep-head{ position:sticky; top:100px; }

.deep-head .lede{ max-width:34ch; }

.deep-kicker{ display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; border-radius:999px; background:var(--brand-tint); border:1px solid #D7E2FB; }

.deep-kicker-icon{ width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.deep-kicker-icon svg{ width:16px; height:16px; }

.deep-kicker-name{ font-family:var(--display); font-weight:800; font-size:1.08rem; color:var(--brand-dark); letter-spacing:-0.01em; }

.deep-kicker-sub{ font-size:0.78rem; font-weight:600; color:var(--brand-dark); opacity:0.7; padding-left:2px; border-left:1px solid #C7D6FA; padding-left:8px; }

.spec-row .def code{ font-family:var(--mono); font-size:0.85em; background:var(--paper-alt); border:1px solid var(--line-soft); padding:1px 6px; border-radius:4px; color:var(--brand-dark); }

.spec-row .def strong{ color:var(--ink); font-weight:600; }

@media (max-width:900px){ .deep-dive{grid-template-columns:1fr; gap:20px;} .deep-head{position:static;} }


/* ===================== Steps ===================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-md); overflow:visible; background:var(--card); box-shadow:0 1px 2px rgba(16,24,40,0.03); }

.step{
  padding:30px 28px 70px; border-right:1px solid var(--line); position:relative; overflow:hidden;
  transition:background .25s ease, box-shadow .25s ease;
}

.step:first-child{ border-radius:var(--radius-md) 0 0 var(--radius-md); }

.step:last-child{border-right:none; border-radius:0 var(--radius-md) var(--radius-md) 0;}

.step:hover{ background:var(--gold-tint); box-shadow:inset 0 -4px 0 0 var(--gold); }

.step .num{ font-family:var(--mono); color:var(--brand); font-size:0.95rem; font-weight:700; margin-bottom:12px; display:block; }

.step h4{ margin-bottom:10px; font-size:1.18rem; letter-spacing:-0.01em; }

.step p{ color:var(--text-dim); font-size:0.93rem; line-height:1.6; max-width:34ch;}

.step:not(:last-child)::after{
  content:''; position:absolute; bottom:18px; right:18px;
  width:48px; height:48px; border-radius:50%; background:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:21px 21px;
  z-index:2; box-shadow:0 4px 14px -2px rgba(180,134,46,0.55);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}

.step:hover:not(:last-child)::after{
  transform:translateX(7px) scale(1.14);
  box-shadow:0 6px 18px -1px rgba(180,134,46,0.7);
}

@media (max-width:760px){
  .steps{grid-template-columns:1fr;}
  .step{border-right:none; border-bottom:1px solid var(--line);}
  .step:last-child{border-bottom:none;}
  .step:first-child{ border-radius:var(--radius-md) var(--radius-md) 0 0; }
  .step:last-child{ border-radius:0 0 var(--radius-md) var(--radius-md); }
  .step:hover{ box-shadow:inset 4px 0 0 0 var(--gold); }
  .step:not(:last-child)::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4v12M5 11l5 5 5-5'/%3E%3C/svg%3E");
  }
  .step:hover:not(:last-child)::after{ transform:translateY(7px) scale(1.14); }
}


/* ===================== Compare table ===================== */
table.compare{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; font-size:0.9rem;}

table.compare th, table.compare td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-soft); }

table.compare th{ font-family:var(--display); font-size:0.78rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.03em; background:var(--paper-alt); font-weight:600;}

table.compare td{ color:var(--text-dim); }

table.compare tr:last-child td{border-bottom:none;}

table.compare td:first-child, table.compare th:first-child{ color:var(--ink); font-weight:600;}

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }


/* ===================== Testimonials ===================== */
.testi-slider{ position:relative; }

.testi-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:4px 4px 16px; scrollbar-width:none; }

.testi-track::-webkit-scrollbar{ display:none; }

.testi{ flex:0 0 calc(33.333% - 12px); scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; display:flex; flex-direction:column; min-height:230px; transition:transform .2s ease, box-shadow .2s ease; }

.testi:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -20px rgba(16,24,40,0.2); }

@media (max-width:900px){ .testi{ flex-basis:calc(50% - 9px); } }

@media (max-width:640px){ .testi{ flex-basis:86%; min-height:210px; } }

.testi .stars{ display:flex; gap:2px; color:var(--gold); margin-bottom:10px;}

.testi p{ color:var(--text); font-size:0.94rem; line-height:1.6; margin-bottom:16px;}

.testi-who{ display:flex; align-items:center; gap:10px; margin-top:auto; }

.testi-avatar{ width:32px; height:32px; border-radius:50%; background:var(--brand-tint); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.74rem; font-weight:600; flex-shrink:0;}

.testi-who .name{ font-weight:600; font-size:0.87rem; color:var(--ink);}

.testi-who .role{ font-size:0.78rem; color:var(--text-faint);}

.testi-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }

.testi-dots{ display:flex; gap:7px; }

.testi-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); border:none; padding:0; cursor:pointer; transition:background .2s ease, transform .2s ease; }

.testi-dot.active{ background:var(--brand); transform:scale(1.3); }

.testi-arrows{ display:flex; gap:8px; }

.testi-arrow-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }

.testi-arrow-btn:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

.testi-arrow-btn svg{ width:16px; height:16px; }

.testi-arrow-btn:disabled{ opacity:0.35; cursor:default; }

.testi-arrow-btn:disabled:hover{ background:var(--card); border-color:var(--line); color:var(--text); }


/* ===================== FAQ ===================== */
.faq-list{ border-top:1px solid var(--line); }

.faq-item{ border-bottom:1px solid var(--line); padding:18px 0;}

.faq-item summary{ cursor:pointer; font-family:var(--display); font-weight:600; font-size:0.98rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--ink);}

.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary .icon{ width:17px; height:17px; flex-shrink:0; color:var(--text-faint); transition:transform .15s ease;}

.faq-item[open] summary .icon{ transform:rotate(45deg); }

.faq-item p{ color:var(--text-dim); margin-top:11px; max-width:64ch; font-size:0.92rem;}


/* ===================== Final CTA ===================== */
.final-cta{ background:linear-gradient(135deg,var(--brand) 0%, var(--brand-dark) 100%); color:#fff; border-radius:var(--radius-md); padding:44px; display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap;}

.final-cta h2{ color:#fff; margin-bottom:6px; }

.final-cta p{ color:#D8E2FF; }

.final-cta .btn-ghost{ background:#fff; color:var(--brand-dark); border-color:transparent; }

.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid #232D45;}

.foot-brand p{ max-width:34ch; font-size:0.88rem; margin-top:12px; color:#8992B0; }

.foot-social{ display:flex; gap:10px; margin-top:18px; }

.foot-social a{
  width:36px; height:36px; border-radius:50%; background:#161F38; border:1px solid #232D45;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease, transform .15s ease;
  color:#8992B0;
}

.foot-social a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px); }

.foot-social svg{ width:16px; height:16px; }


.foot-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-size:0.79rem; flex-wrap:wrap; gap:10px; color:#6B7599;}

.foot-bottom a{ color:#8992B0; }

.foot-bottom a:hover{ color:#fff; }

@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }

@media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }


.mb-sm{margin-bottom:14px;}
 .mb-md{margin-bottom:24px;}
 .mb-lg{margin-bottom:40px;}


/* ===================== Scroll to top ===================== */
.scroll-top-btn{
  position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 10px 24px -8px rgba(49,97,232,0.5); z-index:60;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, background .15s ease, visibility .25s ease;
}

.scroll-top-btn.visible{ opacity:1; visibility:visible; transform:translateY(0); }

.scroll-top-btn:hover{ background:var(--brand-dark); }

.scroll-top-btn svg{ width:18px; height:18px; }

@media (max-width:600px){ .scroll-top-btn{ right:16px; bottom:16px; width:40px; height:40px; } }


/* ===================== Mobile refinement pass ===================== */
@media (max-width:600px){
  body{ font-size:15px; }
  .wrap{ padding:0 18px; }
  .nav-row{ height:58px; }
  .brand{ font-size:0.98rem; gap:8px; }
  .brand-logo{ height:30px; }
  .nav-actions{ gap:7px; }
  .nav-actions .btn{ padding:7px 12px; font-size:0.8rem; }
  .btn{ padding:11px 18px; font-size:0.88rem; }
  section{ padding:34px 0; }
  .section-tight{ padding:28px 0; }
  .h-xl{ font-size:2.05rem; line-height:1.12; }
  .h-lg{ font-size:1.3rem; }
  .lede{ font-size:0.95rem; }
  .hero-ctas{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
  .hero-ctas .btn{ width:auto; padding:10px 16px; font-size:0.85rem; }
  .hero-ctas .link-arrow{ align-self:center; margin-top:0; font-size:0.85rem; }
  .pill{ font-size:0.74rem; padding:5px 11px; }
  .datasheet-head{ padding:18px 18px; }
  .datasheet-cell{ padding:16px 18px; }
  .demo-tabs{ flex-direction:column; }
  .demo-tab{ border-right:none; border-bottom:1px solid var(--line-soft); padding:13px 16px; }
  .demo-panel{ padding:20px; }
  .final-cta{ padding:30px 24px; flex-direction:column; align-items:flex-start; text-align:left; }
  .final-cta .btn{ width:100%; justify-content:center; padding:12px 18px; }
  .foot-top{ flex-direction:column; }
  .snapshot-metrics{ gap:10px; }
  .snapshot-metric .v{ font-size:1.05rem; }
  .product-card .cta-row .btn{ padding:11px 16px; font-size:0.86rem; }
}

@media (max-width:400px){
  .h-xl{ font-size:1.8rem; line-height:1.15; }
  .snapshot-metrics{ grid-template-columns:repeat(3,1fr); }
  .snapshot-metric .k{ font-size:0.62rem; }
  .stat-cell .v{ font-size:1.1rem; }
  .btn{ padding:10px 16px; font-size:0.85rem; }
}
@media (max-width:600px){
  section{ padding:34px 0; }
  .section-tight{ padding:28px 0; }
  .h-xl{ font-size:2.05rem; line-height:1.12; }
  .h-lg{ font-size:1.3rem; }
  .lede{ font-size:0.95rem; }
  .hero-ctas{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
  .hero-ctas .btn{ width:auto; padding:10px 16px; font-size:0.85rem; }
  .hero-ctas .link-arrow{ align-self:center; margin-top:0; font-size:0.85rem; }
  .pill{ font-size:0.74rem; padding:5px 11px; }
  .datasheet-head{ padding:18px 18px; }
  .datasheet-cell{ padding:16px 18px; }
  .demo-tabs{ flex-direction:column; }
  .demo-tab{ border-right:none; border-bottom:1px solid var(--line-soft); padding:13px 16px; }
  .demo-panel{ padding:20px; }
  .final-cta{ padding:30px 24px; flex-direction:column; align-items:flex-start; text-align:left; }
  .final-cta .btn{ width:100%; justify-content:center; padding:12px 18px; }
  .foot-top{ flex-direction:column; }
  .snapshot-metrics{ gap:10px; }
  .snapshot-metric .v{ font-size:1.05rem; }
  .product-card .cta-row .btn{ padding:11px 16px; font-size:0.86rem; }
}

/* pak-71: step 3 gets its own finish icon (was blank) */
.step:last-child::after{content:'';position:absolute;bottom:18px;right:18px;width:48px;height:48px;border-radius:50%;background:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:21px 21px;z-index:2;box-shadow:0 4px 14px -2px rgba(180,134,46,0.55);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;}
.step:last-child:hover::after{transform:scale(1.12);box-shadow:0 6px 18px -1px rgba(180,134,46,0.7);}
/* pak-71: tablet - product intros use the full width (heading left, summary and button right) */
@media (min-width:641px) and (max-width:900px){
  .deep-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:32px;row-gap:8px;align-items:start;}
  .deep-head .deep-kicker{grid-column:1/-1;justify-self:start;}
  .deep-head h2{grid-column:1;grid-row:2/span 2;max-width:none !important;margin-top:6px !important;}
  .deep-head .lede{grid-column:2;grid-row:2;max-width:none;margin-top:6px !important;}
  .deep-head .btn{grid-column:2;grid-row:3;justify-self:start;align-self:start;margin-top:4px !important;}
}
@media (max-width:640px){ .deep-head h2,.deep-head .lede{max-width:none !important;} }