/* ===========================================================
   PoliHub — landing page styles (RTL, Hebrew)
   Blue fintech-trust system
   =========================================================== */

:root{
  /* palette (overridable via tweaks) */
  --primary: #1f5fe0;
  --primary-strong: #1645ad;
  --primary-soft: #e8f0fe;
  --accent: #0e9aab;

  --bg: #f4f7fc;
  --surface: #ffffff;
  --ink: #0d1a30;
  --ink-2: #2b3b54;
  --muted: #61708a;
  --line: #e2e9f4;
  --line-strong: #cdd8ea;

  --ok: #15a06b;

  --font-head: "Rubik", system-ui, sans-serif;
  --font-body: "Assistant", system-ui, sans-serif;

  --radius: 16px;
  --radius-lg: 26px;
  --radius-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(13,26,48,.06), 0 2px 8px rgba(13,26,48,.05);
  --shadow-md: 0 6px 22px rgba(13,26,48,.09), 0 2px 8px rgba(13,26,48,.05);
  --shadow-lg: 0 24px 60px rgba(16,42,92,.16), 0 8px 24px rgba(13,26,48,.08);
  --shadow-blue: 0 18px 44px rgba(31,95,224,.28);

  --maxw: 1200px;
}

*{ box-sizing: border-box; }

/* Accessible keyboard focus indicator (WCAG 2.4.7) */
:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 7px var(--primary);
}
.skip-link{
  position: absolute;
  right: 16px; top: -120px;
  z-index: 2000;
  background: var(--primary); color: #fff;
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-family: var(--font-head); font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus{ top: 0; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 18px;
  overflow-x: hidden;
}
h1,h2,h3,h4{ font-family: var(--font-head); font-weight: 700; line-height: 1.12; margin:0; letter-spacing: -0.01em; }
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor: pointer; }

.wrap{ width: min(var(--maxw), 92vw); margin-inline: auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head);
  font-weight:600; font-size:.82rem; letter-spacing:.08em;
  color: var(--primary);
  text-transform: none;
}
.eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px; background: var(--primary);
}
.section{ padding: clamp(64px, 9vw, 128px) 0; }

/* shared grid-line texture for content sections */
#benefits, .calc, .reports{ position:relative; overflow:hidden; }
.section-grid-lines{
  position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 70% 25%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 75% at 70% 25%, #000 0%, transparent 72%);
  opacity:.6;
}
.calc .section-grid-lines, .lead-card .section-grid-lines{
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
}
#benefits .wrap, .calc .wrap, .reports .wrap{ position:relative; z-index:1; }

/* ===========================================================
   REPORTS — animated donut charts
   =========================================================== */
.donuts{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  max-width: 980px; margin-inline:auto;
  align-items:start;
}
.donut{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.donut-svg{ width:100%; max-width:260px; height:auto; overflow:visible; }

.donut-hub{ fill: var(--surface); }
.donut-center{
  font-family: var(--font-head); font-weight:700;
  font-size:18px; fill: #20223a; letter-spacing:-.01em;
}
.donut-cat{
  font-family: var(--font-body); font-weight:600;
  font-size:11.5px; fill: #5b6678;
  opacity:0; transition: opacity .5s ease;
}
.donut-cat-active{ fill:#fff; font-weight:700; }
.donuts.playing .donut-cat{ opacity:1; }

/* ring segments draw in via dashoffset */
.seg{ transition: stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1); }
.seg-active{ filter: drop-shadow(0 5px 12px rgba(20,42,120,.30)); }
.donuts.playing .seg-active{ animation: segPulse 2.8s ease-in-out 1.4s infinite; }
@keyframes segPulse{
  0%,100%{ filter: drop-shadow(0 5px 12px rgba(20,42,120,.26)); }
  50%{ filter: drop-shadow(0 7px 20px rgba(20,42,120,.50)); }
}

.donut-meta{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.donut-val{
  font-family: var(--font-head); font-weight:700; font-size:1.15rem; color:#15673a;
  background:#d7f6e1; border:1px solid #b9ecca;
  border-radius: 10px; padding:7px 16px; white-space:nowrap;
  opacity:0; transform: translateY(8px) scale(.96);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:.7s;
}
.donut-period{
  font-size:.9rem; color: var(--muted);
  opacity:0; transition: opacity .5s ease; transition-delay:.85s;
}
.donuts.playing .donut-val{ opacity:1; transform: translateY(0) scale(1); }
.donuts.playing .donut-period{ opacity:1; }

/* ---- balances-by-product table ---- */
.rep-table-wrap{ max-width: 1040px; margin: clamp(40px,5vw,64px) auto 0; }
.rep-table-title{
  font-family: var(--font-head); font-weight:700; font-size: clamp(1.3rem,2.4vw,1.7rem);
  color: var(--ink); text-align:center; margin-bottom: 22px;
}
.rep-table-scroll{ overflow-x:auto; border-radius: var(--radius); border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.rep-table{ border-collapse: collapse; width:100%; min-width: 760px; font-size:.82rem; }
.rep-table th, .rep-table td{ padding:12px 8px; text-align:center; }
.rep-table thead .grp{
  background:#002286; color:#fff; font-family:var(--font-head); font-weight:700;
  text-align:start; padding-inline:16px; font-size:.92rem;
}
.rep-table thead .grp + .grp{ border-inline-start:2px solid #fff; }
.rep-table thead .col{
  background:#eaf0fb; color:#27345c; font-weight:600; line-height:1.25;
  border-inline-start:1px solid #dbe4f5; vertical-align:middle;
}
.rep-table thead .col.grp-edge{ border-inline-start:2px solid #c3d0ec; }
.rep-table tbody td{ border-top:1px solid #edf1f7; border-inline-start:1px solid #f0f3f8; color: var(--ink-2); font-weight:600; }
.rep-table tbody td.grp-edge{ border-inline-start:2px solid #e3e9f4; }
.rep-table tbody tr:first-child td{ height:44px; }
.rep-check{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  border:1.5px solid #2bb673; color:#2bb673; font-size:.72rem; font-weight:800; margin-inline:auto; }

/* ---- segmented view switcher (matches lead-form .lf-choice) ---- */
.rep-tabs{
  position:relative; display:flex; gap:0; max-width: 460px; margin: 0 auto clamp(34px,4vw,52px);
  background: var(--bg); border:1px solid var(--line); border-radius:999px; padding:5px;
}
.rep-tabs button{
  position:relative; z-index:1; flex:1 1 0; border:none; background:transparent; border-radius:999px; padding:12px 14px;
  font-family:var(--font-head); font-weight:600; font-size:1rem; color: var(--muted);
  cursor:pointer; transition: color .25s ease;
}
.rep-tabs button:hover{ color: var(--ink-2); }
.rep-tabs button.on{ color: var(--primary); }
/* sliding highlight thumb (matches lead-form .lf-choice) */
.rep-tabs-thumb{
  position:absolute; z-index:0; top:5px; bottom:5px; right:5px;
  width: calc((100% - 10px) / 3);
  background:#fff; border-radius:999px; box-shadow: var(--shadow-sm);
  transition: transform .42s cubic-bezier(.65,.05,.36,1);
  pointer-events:none;
}
.rep-tabs[data-active="clearing"] .rep-tabs-thumb{ transform: translateX(-100%); }
.rep-tabs[data-active="recos"]    .rep-tabs-thumb{ transform: translateX(-200%); }
@media (prefers-reduced-motion: reduce){
  .rep-tabs-thumb{ transition:none; }
}

/* ---- view show/hide ---- */
.rep-view{ display:none; animation: repFade .45s ease both; }
.rep-view.active{ display:block; }
@keyframes repFade{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- clearing: info card ---- */
.clr-card{
  display:flex; align-items:center; justify-content:space-between; gap: clamp(14px,2.4vw,30px);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 20px clamp(18px,2.4vw,28px);
  max-width: 1040px; margin-inline:auto; flex-wrap:nowrap; overflow-x:auto;
}
.clr-field{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:start; white-space:nowrap; }
.clr-lbl{ font-size:.86rem; color: var(--muted); font-weight:500; }
.clr-val{ font-family:var(--font-head); font-weight:700; font-size:1.06rem; color: var(--ink); }
.clr-status{ display:inline-flex; align-items:center; gap:7px; color:#1f8a4d; }
.clr-logo{
  flex:none; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background: #fff; border:1px solid var(--line); overflow:hidden; padding:9px;
}
.clr-logo img{ width:100%; height:100%; object-fit:contain; }

/* ---- clearing: detail panels ---- */
.clr-panels{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.4vw,28px);
  max-width: 1040px; margin: clamp(20px,3vw,30px) auto 0;
}
.clr-panel{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 8px clamp(14px,2vw,22px); }
.clr-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 4px; }
.clr-row + .clr-row{ border-top:1px solid #eef1f7; }
.clr-row-lbl{ color: var(--ink-2); font-size:.98rem; }
.clr-row-val{ font-family:var(--font-head); font-weight:700; font-size:1rem; color: var(--ink); white-space:nowrap; }

/* ---- clearing: returns table ---- */
.clr-returns{ max-width: 1040px; margin: clamp(20px,3vw,30px) auto 0; }
.clr-table{ min-width: 640px; }
.clr-table thead .col{ background:#eaf0fb; color:#27345c; padding:14px 10px; }
.clr-table thead .col-strong{ text-align:start; padding-inline:18px; }
.clr-table tbody td{ border-top:1px solid #edf1f7; padding:16px 10px; color: var(--ink-2); font-weight:600; }
.clr-table tbody td.td-strong{ font-family:var(--font-head); font-weight:700; color: var(--ink); text-align:start; padding-inline:18px; }
.clr-table tbody td.td-name{ font-weight:700; color: var(--ink); text-align:start; }

/* ---- recommendations view ---- */
.reco-card{ max-width: 1040px; margin-inline:auto; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(20px,2.6vw,30px); }
.reco-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom: clamp(18px,2.4vw,26px); flex-wrap:wrap; }
.reco-co{ display:flex; align-items:center; gap:12px; }
.reco-co-name{ font-family:var(--font-head); font-weight:700; font-size: clamp(1rem,1.6vw,1.18rem); color: var(--ink); }
.reco-logo{ flex:none; height:42px; width:auto; padding:7px 12px; border-radius:12px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); overflow:hidden;
  color: var(--primary-strong); font-family:var(--font-head); font-weight:800; font-size:.74rem; letter-spacing:-.01em; }
.reco-logo img{ height:100%; width:auto; max-width:76px; object-fit:contain; display:block; }
.reco-logo-generic{ min-width:58px; }
.reco-logo-generic{ color: var(--muted); letter-spacing:.06em; }
.reco-arrow{ font-size:1.6rem; color: var(--muted); flex:none; }

.reco-table-wrap{ margin-bottom: clamp(18px,2.4vw,24px); }
.reco-table{ min-width: 560px; }
.reco-good{ color:#15914d !important; font-weight:800 !important; }

.reco-text{ color: var(--ink-2); font-size:1.02rem; line-height:1.7; max-width: 760px; }
.reco-total{ display:flex; align-items:center; gap:14px; margin-top: clamp(20px,2.6vw,28px); padding-top: clamp(18px,2.4vw,24px); border-top:1px solid var(--line); }
.reco-total-lbl{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; color: var(--ink); }
.reco-total-pill{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:#15673a; background:#d7f6e1; border:1px solid #b9ecca; border-radius:10px; padding:7px 16px; }

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

@media (prefers-reduced-motion: reduce){
  .seg{ transition:none; }
  .donuts.playing .seg-active{ animation:none; }
}
@media (max-width: 760px){
  .donuts{ grid-template-columns: 1fr; max-width: 320px; gap:40px; }
}
.section-head{ max-width: 720px; margin-bottom: 52px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.6vw, 3rem); margin:.5rem 0 .7rem; }
.section-head p{ color: var(--muted); font-size: 1.12rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid transparent; border-radius: 999px;
  padding: 14px 26px; font-family: var(--font-head); font-weight:600; font-size:1rem;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--primary); color:#fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover{ background: var(--primary-strong); transform: translateY(-2px); }
.btn-ghost{ background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary); }
.btn-light{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.34); }
.btn-light:hover{ background: rgba(255,255,255,.2); }
.btn-lg{ padding: 17px 34px; font-size: 1.06rem; }
.btn .arr{ font-size:1.1em; transition: transform .2s; }
.btn:hover .arr{ transform: translateX(-4px); }

/* ---------- top bar ---------- */
.topbar{
  position: sticky; top:0; z-index: 60;
  background: rgba(244,247,252,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.topbar.scrolled{ border-color: var(--line); background: rgba(255,255,255,.9); }
.nav{ display:flex; align-items:center; justify-content:space-between; height: 76px; gap: 28px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-head); font-weight:700; font-size:1.32rem; color:var(--ink); }
.brand .logo{
  width:38px; height:38px; border-radius:11px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  position: relative; box-shadow: var(--shadow-sm); flex:none;
}
.brand .mark{
  width:38px; height:38px; border-radius:11px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  position: relative; box-shadow: var(--shadow-sm); flex:none;
  display:grid; place-items:center; overflow:hidden;
}
.nav-links{ display:flex; align-items:center; justify-content:center; flex:1; gap:30px; text-align:center; }
.nav-links a{ font-size:1rem; color: var(--ink-2); font-weight:500; position:relative; }
.nav-links a:hover{ color: var(--primary); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-cta .login{ font-weight:600; color:var(--ink-2); font-size:1rem; }
.nav-cta .login:hover{ color: var(--primary); }
.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line);
  border-radius:11px; cursor:pointer; padding:0;
  transition:background .15s ease, border-color .15s ease;
}
.nav-toggle:hover{ background:var(--bg); border-color:var(--line-strong); }
.nav-toggle-bars{ display:grid; gap:5px; width:20px; }
.nav-toggle-bars span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--ink); transition:transform .28s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu drawer */
.mobile-menu{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  padding:14px 22px 22px;
}
.mobile-menu:not([hidden]){ display:none; }
.mobile-menu-links{ display:flex; flex-direction:column; }
.mobile-menu-links a{
  display:block; padding:14px 6px;
  font-family:var(--font-head); font-weight:500; font-size:1.08rem;
  color:var(--ink-2); border-bottom:1px solid var(--line);
}
.mobile-menu-links a:hover{ color:var(--primary); }
.mobile-menu-cta{ width:100%; justify-content:center; margin-top:16px; }

/* blurred backdrop behind the open mobile menu (like the lead popup) */
.mobile-menu-backdrop{
  position:fixed; inset:0; z-index:55;
  background:rgba(8,18,38,.45);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.mobile-menu-backdrop.open{ opacity:1; visibility:visible; }

/* staggered entrance for each menu item — .menu-in is added by JS after a reflow */
.mobile-menu-links a, .mobile-menu-cta{
  opacity:0; transform:translateY(-10px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.mobile-menu.menu-in .mobile-menu-links a,
.mobile-menu.menu-in .mobile-menu-cta{ opacity:1; transform:none; }
.mobile-menu.menu-in .mobile-menu-links a:nth-child(1){ transition-delay:.05s; }
.mobile-menu.menu-in .mobile-menu-links a:nth-child(2){ transition-delay:.10s; }
.mobile-menu.menu-in .mobile-menu-links a:nth-child(3){ transition-delay:.15s; }
.mobile-menu.menu-in .mobile-menu-links a:nth-child(4){ transition-delay:.20s; }
.mobile-menu.menu-in .mobile-menu-links a:nth-child(5){ transition-delay:.25s; }
.mobile-menu.menu-in .mobile-menu-links a:nth-child(6){ transition-delay:.30s; }
.mobile-menu.menu-in .mobile-menu-cta{ transition-delay:.35s; }
@media (prefers-reduced-motion: reduce){
  .mobile-menu-links a, .mobile-menu-cta{ opacity:1; transform:none; transition:none; }
  .mobile-menu-backdrop{ transition:none; }
}

/* ===========================================================
   HERO  (3 layout variants via [data-hero])
   =========================================================== */
.hero{ position: relative; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(50px, 7vw, 96px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .blob{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; }
.hero-bg .b1{ width:520px; height:520px; background: var(--primary-soft); top:-180px; left:-120px; }
.hero-bg .b2{ width:420px; height:420px; background: color-mix(in srgb, var(--accent) 22%, transparent); bottom:-160px; right:-80px; opacity:.4; }
.hero-grid-lines{
  position:absolute; inset:0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 72%);
  opacity:.6;
}
.hero .wrap{ position:relative; z-index:1; }

.hero-inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 76px); align-items:center; }
.hero-copy{ max-width: 600px; }
.hero h1{ font-size: clamp(2.3rem, 4.6vw, 4rem); margin: 18px 0 20px; }
.hero h1 .hl{ color: var(--primary); position:relative; white-space:nowrap; }
.hero h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.30em;
  background: color-mix(in srgb, var(--accent) 38%, transparent); z-index:-1; border-radius:3px;
}
.hero .lede{ font-size: 1.22rem; color: var(--ink-2); max-width: 540px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 30px; }
/* mobile: keep both hero buttons on one row, shrink to fit */
@media (max-width: 560px){
  .hero .hero-cta{ flex-wrap:nowrap; gap:10px; }
  .hero .hero-cta .btn{ flex:1 1 0; min-width:0; padding:14px 12px; font-size:.88rem; gap:6px; }
  .hero .hero-cta .btn .arr{ display:none; }
}
.hero-trust{ display:flex; flex-wrap:wrap; gap:22px; margin-top: 26px; }
.trust-chip{ display:flex; align-items:center; gap:9px; font-size:.96rem; color: var(--muted); font-weight:500; }
.trust-chip .tick{ width:22px; height:22px; border-radius:50%; background: color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); display:grid; place-items:center; font-size:.8rem; font-weight:800; flex:none; }

/* hero entrance animation */
.reveal-up{ opacity:0; transform: translateY(22px); animation: revealUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1.reveal-up{ animation-delay:.05s; }
.hero .lede.reveal-up{ animation-delay:.16s; }
.hero-cta.reveal-up{ animation-delay:.27s; }
.hero-trust.reveal-up{ animation-delay:.36s; }
.eyebrow.reveal-up{ animation-delay:0s; }
@keyframes revealUp{ to{ opacity:1; transform:none; } }

/* ---- centered variant ---- */
.hero[data-hero="center"] .hero-inner{ grid-template-columns: 1fr; text-align:center; justify-items:center; }
.hero[data-hero="center"] .hero-copy{ max-width: 800px; }
.hero[data-hero="center"] .hero-cta,
.hero[data-hero="center"] .hero-trust{ justify-content:center; }
.hero[data-hero="center"] .lede{ margin-inline:auto; }
.hero[data-hero="center"] .hero-visual{ width:100%; max-width: 940px; margin-top: 54px; }

/* ---- panel (dark band) variant ---- */
.hero[data-hero="panel"]{ background: radial-gradient(120% 120% at 80% 0%, #14306b 0%, #0c1a3a 55%, #0a1430 100%); }
.hero[data-hero="panel"] .hero-grid-lines{ opacity:.18; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 70% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 90% 80% at 70% 20%, #000, transparent 75%); }
.hero[data-hero="panel"] .hero-bg .b1{ background: rgba(63,121,247,.4); opacity:.5; }
.hero[data-hero="panel"] .hero-bg .b2{ background: rgba(14,154,171,.4); }
.hero[data-hero="panel"] .eyebrow{ color: #8fd0db; }
.hero[data-hero="panel"] .eyebrow::before{ background:#8fd0db; }
.hero[data-hero="panel"] h1{ color:#fff; }
.hero[data-hero="panel"] h1 .hl{ color:#9ec3ff; }
.hero[data-hero="panel"] .lede{ color: #c2cfe4; }
.hero[data-hero="panel"] .trust-chip{ color:#aeb9cf; }
.hero[data-hero="panel"] .btn-ghost{ background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.3); }
.hero[data-hero="panel"] .btn-ghost:hover{ background: rgba(255,255,255,.18); color:#fff; }

/* ===========================================================
   PRODUCT MOCKUP (CSS dashboard)
   =========================================================== */
.hero-visual{ position:relative; perspective: 1600px; }
.dash{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 20px; position:relative; overflow:hidden;
  transform: rotateY(-6deg) rotateX(2deg); transform-style: preserve-3d;
  animation: floatCard 7s ease-in-out infinite;
}
.hero[data-hero="center"] .dash{ transform:none; }
@keyframes floatCard{ 0%,100%{ transform: rotateY(-6deg) rotateX(2deg) translateY(0);} 50%{ transform: rotateY(-6deg) rotateX(2deg) translateY(-12px);} }
.dash-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.dash-client{ display:flex; align-items:center; gap:11px; }
.dash-ava{ width:42px; height:42px; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; }
.dash-client b{ display:block; font-family:var(--font-head); font-size:1.02rem; }
.dash-client span{ font-size:.84rem; color:var(--muted); }
.dash-badge{ font-size:.78rem; font-weight:700; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); padding:6px 12px; border-radius:999px; font-family:var(--font-head); }
.src-list{ display:flex; flex-direction:column; gap:10px; }
.src{
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  border:1px solid var(--line); border-radius: var(--radius-sm); background: #fbfcff;
  opacity:0; transform: translateY(8px); animation: srcIn .5s ease forwards;
}
.src:nth-child(1){ animation-delay:.5s; } .src:nth-child(2){ animation-delay:.85s; }
.src:nth-child(3){ animation-delay:1.2s; } .src:nth-child(4){ animation-delay:1.55s; }
@keyframes srcIn{ to{ opacity:1; transform:none; } }
.src-ic{ width:36px; height:36px; border-radius:9px; background: var(--primary-soft); color: var(--primary); display:grid; place-items:center; font-size:1.05rem; flex:none; }
.src-name{ font-family:var(--font-head); font-weight:600; font-size:.98rem; flex:1; }
.src-bar{ width:74px; height:7px; border-radius:99px; background: var(--line); overflow:hidden; position:relative; }
.src-bar::after{ content:""; position:absolute; inset:0; width:0; background: linear-gradient(90deg,var(--primary),var(--accent)); border-radius:99px; animation: fill 1.1s ease forwards; }
.src:nth-child(1) .src-bar::after{ animation-delay:.7s; } .src:nth-child(2) .src-bar::after{ animation-delay:1.05s; }
.src:nth-child(3) .src-bar::after{ animation-delay:1.4s; } .src:nth-child(4) .src-bar::after{ animation-delay:1.75s; }
@keyframes fill{ to{ width:100%; } }
.src-tick{ width:24px; height:24px; border-radius:50%; background: var(--ok); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:800; flex:none; opacity:0; transform: scale(.4); animation: pop .4s cubic-bezier(.3,1.5,.5,1) forwards; }
.src:nth-child(1) .src-tick{ animation-delay:1.8s; } .src:nth-child(2) .src-tick{ animation-delay:2.15s; }
.src:nth-child(3) .src-tick{ animation-delay:2.5s; } .src:nth-child(4) .src-tick{ animation-delay:2.85s; }
@keyframes pop{ to{ opacity:1; transform:none; } }
.dash-foot{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background: var(--ink); color:#fff; border-radius: var(--radius-sm); padding:14px 17px; }
.dash-foot b{ font-family:var(--font-head); }
.dash-foot .mini{ font-size:.82rem; color:#aebbd2; }
.dash-foot .go{ background:var(--primary); color:#fff; border-radius:999px; padding:9px 16px; font-family:var(--font-head); font-weight:600; font-size:.86rem; }

/* floating stat chips around the dash */
.float-chip{
  position:absolute; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow: var(--shadow-md); padding:11px 15px; z-index:3;
  display:flex; align-items:center; gap:10px; animation: floatChip 5s ease-in-out infinite;
}
.float-chip .big{ font-family:var(--font-head); font-weight:700; font-size:1.25rem; color:var(--ink); line-height:1; }
.float-chip .lbl{ font-size:.74rem; color:var(--muted); }
.float-chip .dot{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:1rem; }
.fc-1{ top: 8%; right: -7%; } .fc-1 .dot{ background: color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); }
.fc-2{ bottom: 10%; left: -9%; animation-delay:1.5s; } .fc-2 .dot{ background: var(--primary-soft); color:var(--primary); }
@keyframes floatChip{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* ===========================================================
   TRUST / LOGO WALL
   =========================================================== */
.trust-band{ padding: 28px 0; }
.trust-band .label{ text-align:center; color:var(--muted); font-size:.95rem; font-weight:600; margin-bottom:26px; }
.logo-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 22px 48px; }
.logo-img{
  height: 32px; width:auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity:.6;
  transition: filter .3s, opacity .3s, transform .3s;
}
.logo-img:hover{ filter:none; opacity:1; transform: translateY(-2px); }
.hero-logos{ display:grid; grid-template-columns: repeat(4, max-content); justify-content:flex-start; align-items:center; gap: 16px 34px; margin-top:22px; }
.hero-logos .logo-img{ height:26px; }
.hero-logos .logo-img-sq{ height:40px; }
.logo-ph{
  height: 38px; min-width: 118px; padding: 0 22px;
  display:grid; place-items:center; border-radius:10px;
  background: var(--surface); border:1px dashed var(--line-strong);
  color: var(--muted); font-family: var(--font-head); font-weight:700; font-size:1rem;
  letter-spacing:.02em; opacity:.85; filter: grayscale(1);
  transition: filter .25s, opacity .25s;
}
.logo-ph:hover{ filter:none; opacity:1; }

/* ===========================================================
   HOW IT WORKS
   =========================================================== */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: step; }
.step{
  position:relative; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding: 30px 24px 26px; box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.step:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb,var(--primary) 35%,var(--line)); }
.step .num{
  font-family: var(--font-head); font-weight:700; font-size: 1rem; color: var(--primary);
  width:46px; height:46px; border-radius:13px; background: var(--primary-soft);
  display:grid; place-items:center; margin-bottom: 18px;
}
.step h3{ font-size:1.22rem; margin-bottom: 9px; }
.step p{ color: var(--muted); font-size:1rem; }
.step .connector{ position:absolute; top: 52px; left: -10px; width:20px; height:2px; background: var(--line-strong); }
.steps .step:first-child .connector{ display:none; }

/* ===========================================================
   MODULES GRID
   =========================================================== */
.modules{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.module{
  position:relative; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding: 30px; overflow:hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.module::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: right; transition: transform .35s ease;
}
.module:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.module:hover::before{ transform: scaleX(1); }
.module .m-ic{
  width:56px; height:56px; border-radius:15px; display:grid; place-items:center;
  background: var(--primary-soft); color: var(--primary); font-size:1.5rem; margin-bottom:20px;
}
.module .m-ic.m-ic-img{ background: var(--primary-soft); }
.module .m-ic.m-ic-img img{ width:34px; height:34px; object-fit:contain; display:block; }
.module h3{ font-size:1.3rem; margin-bottom:11px; }
.module p{ color: var(--muted); font-size:1.02rem; }
.module .m-link{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; color: var(--primary); font-family:var(--font-head); font-weight:600; font-size:.96rem; }
.module .m-link .arr{ transition: transform .2s; }
.module:hover .m-link .arr{ transform: translateX(-5px); }

/* ===========================================================
   BENEFITS (alternating value props)
   =========================================================== */
.benefits{ display:flex; flex-direction:column; gap: clamp(48px,7vw,96px); }
.benefit{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; }
.benefit:nth-child(even) .b-visual{ order:-1; }
.benefit h3{ font-size: clamp(1.5rem,2.6vw,2.1rem); margin-bottom: 14px; }
.benefit .b-copy > p{ color: var(--ink-2); font-size:1.1rem; max-width: 46ch; }
.benefit .pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pill{ display:inline-flex; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:.92rem; font-weight:600; color:var(--ink-2); }
.pill .tick{ color: var(--ok); font-weight:800; }

/* benefit kicker */
.b-kicker{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
  font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.04em;
  color: var(--primary); text-transform: uppercase;
  background: var(--primary-soft); border-radius:999px; padding:7px 15px 7px 17px;
}
.b-kicker-dot{ width:7px; height:7px; border-radius:50%; background: var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent); }

/* benefit visual card */
.b-visual{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px;
  position:relative; overflow:hidden;
}
.b-visual::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.bv-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.bv-label{ font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--ink); }
.bv-badge{
  font-family:var(--font-head); font-weight:700; font-size:.8rem; white-space:nowrap;
  color: var(--ok); background: color-mix(in srgb,var(--ok) 12%,transparent);
  border-radius:999px; padding:6px 13px;
}

/* time comparison */
.cmp{ display:flex; flex-direction:column; gap:20px; }
.cmp-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:9px; }
.cmp-name{ font-weight:600; color:var(--ink-2); font-size:1rem; }
.cmp-val{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; }
.cmp-row.old .cmp-val{ color:var(--muted); }
.cmp-row.new .cmp-val{ color:var(--primary); font-size:1.4rem; }
.cmp-track{ position:relative; height:14px; border-radius:999px; background: var(--bg); overflow:hidden; }
.cmp-fill{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:999px; }
.cmp-row.old .cmp-fill{ background: var(--line-strong); }
.cmp-row.new .cmp-fill{ background: linear-gradient(90deg, var(--primary), var(--accent)); }
.bv-foot{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.bv-stat b{ display:block; font-family:var(--font-head); font-weight:700; font-size:1.7rem; color:var(--ink); line-height:1; }
.bv-stat span{ display:block; margin-top:6px; color:var(--muted); font-size:.9rem; }

/* automation pipeline */
.pipe{ list-style:none; margin:0; padding:0; position:relative; }
.pipe::before{
  content:""; position:absolute; top:14px; bottom:24px; inset-inline-start:13px; width:2px;
  background: linear-gradient(var(--ok), color-mix(in srgb,var(--primary) 60%,var(--ok)));
}
.pipe-step{ position:relative; display:flex; align-items:flex-start; gap:15px; padding:9px 0; }
.pipe-dot{
  position:relative; z-index:1; width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--ok); color:#fff; display:grid; place-items:center;
  font-size:.82rem; font-weight:800; box-shadow:0 0 0 4px var(--surface);
}
.pipe-txt{ font-weight:600; color:var(--ink-2); font-size:1.02rem; padding-top:3px; }
.pipe-step.final .pipe-dot{ background: linear-gradient(135deg, var(--primary), var(--accent)); font-size:.9rem; }
.pipe-step.final{ margin-top:6px; padding:14px 16px; background: var(--primary-soft); border-radius: var(--radius-sm); align-items:center; }
.pipe-step.final .pipe-dot{ box-shadow:0 0 0 4px var(--primary-soft); }
.pipe-step.final .pipe-txt b{ display:block; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.05rem; }
.pipe-step.final .pipe-txt small{ display:block; margin-top:3px; color:var(--primary); font-weight:600; font-size:.85rem; }

/* ===========================================================
   ROI CALCULATOR
   =========================================================== */
.calc{ background: radial-gradient(120% 130% at 85% 0%, #14306b 0%, #0c1a3a 60%, #0a1430 100%); color:#fff; }
.calc .section-head h2{ color:#fff; }
.calc .section-head p{ color:#c2cfe4; }
.calc .eyebrow{ color:#8fd0db; } .calc .eyebrow::before{ background:#8fd0db; }
.calc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:stretch; }
.calc-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: clamp(26px,3vw,40px); backdrop-filter: blur(8px); }
.calc-card.result{ background: var(--surface); color: var(--ink); }
.slider-block{ margin-bottom: 34px; }
.slider-block:last-child{ margin-bottom:0; }
.slider-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.slider-top label{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; }
.slider-val{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; color:#9ec3ff; }
input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px; background: rgba(255,255,255,.18); outline:none; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:5px solid var(--primary); cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.3); transition: transform .12s; }
input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.12); }
input[type="range"]::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:#fff; border:5px solid var(--primary); cursor:pointer; }
.slider-scale{ display:flex; justify-content:space-between; margin-top:10px; font-size:.78rem; color:#8d9cba; }
.result .res-label{ color:var(--muted); font-size:1rem; font-weight:600; }
.result .res-big{ font-family:var(--font-head); font-weight:700; font-size: clamp(2.8rem,6vw,4.4rem); color:var(--primary); line-height:1; margin:8px 0 4px; letter-spacing:-.02em; }
.result .res-sub{ color:var(--muted); }
.res-split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0; }
.res-tile{ background: var(--bg); border:1px solid var(--line); border-radius: var(--radius-sm); padding:18px; }
.res-tile .rt-num{ font-family:var(--font-head); font-weight:700; font-size:1.7rem; color:var(--ink); }
.res-tile .rt-lbl{ font-size:.88rem; color:var(--muted); margin-top:2px; }
.calc-disclaim{ font-size:.82rem; color:#8d9cba; margin-top:26px; text-align:center; }

/* ===========================================================
   TESTIMONIALS
   =========================================================== */
.tcards{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.tcard{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:30px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.tcard .stars{ color:#f5a623; letter-spacing:2px; margin-bottom:14px; font-size:1.05rem; }
.tcard .quote{ font-size:1.06rem; color:var(--ink-2); flex:1; }
.tcard .who{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.tcard .who .av{ width:46px;height:46px;border-radius:50%; background: var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:1.1rem; }
.tcard .who b{ font-family:var(--font-head); display:block; font-size:1rem; }
.tcard .who span{ font-size:.86rem; color:var(--muted); }

/* ===========================================================
   SECTORS
   =========================================================== */
.sectors{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.sector{ display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; transition: transform .2s, box-shadow .2s; }
.sector:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sector .s-ic{ width:50px;height:50px;border-radius:13px; background: var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-size:1.3rem; flex:none; }
.sector b{ font-family:var(--font-head); font-size:1.08rem; }
.sector span{ display:block; font-size:.9rem; color:var(--muted); }

/* ===========================================================
   FINAL CTA
   =========================================================== */
.final{ text-align:center; }
.final-card{
  background: radial-gradient(120% 140% at 50% 0%, #1f5fe0 0%, #1746b0 55%, #11357f 100%);
  border-radius: var(--radius-lg); padding: clamp(48px,7vw,86px) 28px; color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.final-card::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 120%, rgba(255,255,255,.18), transparent 40%); }
.final-card h2{ font-size: clamp(2rem,4vw,3.2rem); color:#fff; position:relative; max-width: 760px; margin-inline:auto; }
.final-card p{ color: #d9e4fb; font-size:1.18rem; margin: 16px auto 32px; max-width: 580px; position:relative; }
.final-card .hero-cta{ justify-content:center; position:relative; }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{ background: var(--ink); color:#aeb9cf; padding: 72px 0 32px; position:relative; overflow:hidden; }
.footer-grid-lines{
  position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 70% 25%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 75% at 70% 25%, #000 0%, transparent 72%);
  opacity:.6;
}
.footer .wrap{ position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .brand{ color:#fff; margin-bottom:16px; }
.footer-about{ font-size:1rem; max-width: 320px; }
.footer-col h4{ color:#fff; font-size:1.02rem; margin-bottom:16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.98rem; color:#aeb9cf; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:26px; font-size:.9rem; flex-wrap:wrap; }
.footer-bottom .legal{ display:flex; gap:20px; }

/* ===========================================================
   SCROLL REVEAL
   =========================================================== */
.r{ opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.r.in{ opacity:1; transform:none; }
.r.d1{ transition-delay:.08s; } .r.d2{ transition-delay:.16s; } .r.d3{ transition-delay:.24s; } .r.d4{ transition-delay:.32s; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1080px){
  .steps{ grid-template-columns: repeat(2,1fr); }
  .steps .step .connector{ display:none; }
  .modules{ grid-template-columns: repeat(2,1fr); }
  .tcards{ grid-template-columns: 1fr 1fr; }
  .sectors{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  body{ font-size:17px; }
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-copy{ min-width:0; }
  .hero-visual{ margin-top: 44px; min-width:0; }
  .hero-logos{ display:flex; flex-wrap:wrap; gap:16px 28px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu:not([hidden]){ display:block; }
  .benefit{ grid-template-columns: 1fr; }
  .benefit:nth-child(even) .b-visual{ order:0; }
  .calc-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
/* ===========================================================
   Legal modals (Terms / Privacy / Accessibility)
   =========================================================== */
.legal span.legal a,
.footer-bottom .legal a{ cursor:pointer; }

.lmodal{
  position:fixed; inset:0; z-index:1200;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
}
.lmodal.open{ display:flex; }
.lmodal__backdrop{
  position:absolute; inset:0;
  background:rgba(8,18,38,.55);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.lmodal.open .lmodal__backdrop{ opacity:1; }
.lmodal__panel{
  position:relative;
  width:min(680px,100%);
  max-height:min(82vh,820px);
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:translateY(14px) scale(.98);
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s ease;
}
.lmodal.open .lmodal__panel{ transform:none; opacity:1; }
.lmodal__head{
  flex:0 0 auto;
  display:flex; align-items:flex-start; gap:16px;
  padding:26px 30px 18px;
  border-bottom:1px solid var(--line);
}
.lmodal__head .lmodal__icon{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary);
}
.lmodal__head .lmodal__icon svg{ width:23px; height:23px; }
.lmodal__titles{ flex:1 1 auto; }
.lmodal__titles h3{
  margin:0; font-family:var(--font-head);
  font-size:1.32rem; font-weight:700; color:var(--ink);
}
.lmodal__titles p{
  margin:4px 0 0; font-size:.86rem; color:var(--muted);
}
.lmodal__close{
  flex:0 0 auto;
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); cursor:pointer;
  display:grid; place-items:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lmodal__close:hover{ background:var(--bg); color:var(--ink); border-color:var(--line-strong); }
.lmodal__close svg{ width:18px; height:18px; }
.lmodal__body{
  flex:1 1 auto; overflow-y:auto;
  padding:22px 30px 28px;
  color:var(--ink-2); line-height:1.72; font-size:.96rem;
}
.lmodal__body h4{
  margin:22px 0 7px; font-family:var(--font-head);
  font-size:1.02rem; font-weight:600; color:var(--ink);
}
.lmodal__body h4:first-child{ margin-top:0; }
.lmodal__body p{ margin:0 0 12px; }
.lmodal__body ul{ margin:0 0 14px; padding-inline-start:20px; }
.lmodal__body li{ margin:0 0 6px; }
.lmodal__body strong{ color:var(--ink); font-weight:600; }
.lmodal__body a{ color:var(--primary); }
.lmodal__updated{
  margin-top:18px; padding-top:14px;
  border-top:1px dashed var(--line-strong);
  font-size:.82rem; color:var(--muted);
}
@media (max-width: 560px){
  .lmodal__head{ padding:20px 20px 16px; }
  .lmodal__body{ padding:18px 20px 24px; }
}

@media (max-width: 560px){
  .modules{ grid-template-columns: 1fr; }
  .tcards{ grid-template-columns: 1fr; }
  .sectors{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .res-split{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .float-chip{ display:none; }
  .footer-col ul{ gap:2px; }
  .footer-col a{ display:inline-block; padding:9px 0; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
  .footer-bottom .legal{ flex-wrap:wrap; gap:6px 20px; }
  .footer-bottom .legal a{ padding:8px 0; }

  /* trust chips: keep all three on one row */
  .hero-trust{ flex-wrap:nowrap; gap:8px; justify-content:space-between; }
  .trust-chip{ font-size: clamp(.68rem, 3vw, .82rem); gap:5px; white-space:nowrap; }
  .trust-chip .tick{ width:18px; height:18px; font-size:.68rem; }

  /* hero logos: 4 per row, shrink to fit */
  .hero-logos{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px 8px; justify-items:center; align-items:center; }
  .hero-logos .logo-img{ width:auto !important; max-width:100%; height:auto; max-height:20px; }
  .hero-logos .logo-img-sq{ max-height:28px; }
}