/* ============================================================
   MyXodim — Landing page
   Design system + two whole-page style variants (A / B)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --blue:        #1F5FD6;
  --blue-700:    #1A4FB5;
  --blue-600:    #2466DE;
  --navy:        #0B2A5E;
  --navy-900:    #071D44;
  --blue-100:    #CFE0FF;
  --blue-50:     #EAF1FF;
  --tint:        #F4F7FD;

  --ink:         #0E1726;
  --slate:       #51617C;
  --slate-400:   #7787A1;
  --line:        #E2E8F2;
  --line-soft:   #EEF2F8;
  --white:       #FFFFFF;
  --paper:       #F7F9FC;

  --green:       #0E9F6E;
  --green-50:    #E7F6EF;
  --amber:       #C77A12;
  --red:         #D23B3B;
  --red-50:      #FBECEC;

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-head: "IBM Plex Sans", system-ui, sans-serif;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(11,42,94,.06), 0 1px 3px rgba(11,42,94,.05);
  --shadow:    0 4px 16px rgba(11,42,94,.08), 0 1px 4px rgba(11,42,94,.05);
  --shadow-lg: 0 24px 60px -20px rgba(11,42,94,.30), 0 8px 24px -12px rgba(11,42,94,.18);
  --shadow-blue: 0 14px 30px -12px rgba(31,95,214,.45);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* Variant B overrides heading font */
:root{
  --font-head: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-head); margin:0; line-height:1.1; letter-spacing:-.02em; font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px,8vw,120px); }
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--blue); display:inline-block; }
.section-head{ max-width:680px; margin-bottom:clamp(36px,5vw,56px); }
.section-head h2{
  font-size:clamp(28px,4vw,44px); margin-top:16px; color:var(--ink);
  text-wrap:balance;
}
.section-head .lead{ margin-top:18px; font-size:clamp(16px,1.7vw,18.5px); color:var(--slate); max-width:60ch; }

.grid{ display:grid; gap:24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15.5px; padding:13px 22px; border-radius:var(--r);
  border:1px solid transparent; transition:.16s ease; white-space:nowrap;
  line-height:1;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover{ background:var(--blue-700); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue-100); background:var(--blue-50); color:var(--blue-700); }
.btn-lg{ padding:16px 28px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn{ border-radius:10px; }

/* ---------- Top navigation ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; gap:28px; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--blue);
  display:grid; place-items:center; box-shadow:var(--shadow-blue); flex:none;
}
.brand-mark svg{ width:18px; height:18px; }
.brand b{ font-weight:700; }
.brand span{ color:var(--blue); }
.nav-links{ display:flex; gap:4px; margin-inline:auto; }
.nav-links a{
  font-size:14.5px; color:var(--slate); padding:8px 13px; border-radius:8px; font-weight:500;
  transition:.14s;
}
.nav-links a:hover{ color:var(--ink); background:var(--tint); }
.nav-tools{ display:flex; align-items:center; gap:12px; }

/* language toggle */
.lang{ display:inline-flex; background:var(--tint); border:1px solid var(--line); border-radius:9px; padding:3px; }
.lang button{
  border:0; background:transparent; font-size:12.5px; font-weight:600; color:var(--slate-400);
  padding:5px 11px; border-radius:6px; font-family:var(--font-mono); letter-spacing:.04em; transition:.14s;
}
.lang button.on{ background:#fff; color:var(--blue); box-shadow:var(--shadow-sm); }

.nav-burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:#fff; position:relative; }
.nav-burger span{ display:block; width:18px; height:1.7px; background:var(--ink); margin:4px auto; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-burger.on span:nth-child(1){ transform:translateY(5.7px) rotate(45deg); }
.nav-burger.on span:nth-child(2){ opacity:0; }
.nav-burger.on span:nth-child(3){ transform:translateY(-5.7px) rotate(-45deg); }
.nav-cta-mobile{ display:none; }

/* ---------- Variant switcher (floating) ---------- */
.variant-switch{
  position:fixed; z-index:60; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:7px 8px 7px 14px;
  background:rgba(14,23,38,.92); backdrop-filter:blur(10px); border-radius:999px;
  box-shadow:0 16px 40px -12px rgba(11,42,94,.5); color:#fff;
}
.variant-switch .vs-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9fb4d6; padding-right:4px; }
.variant-switch button{
  border:0; background:transparent; color:#c4d2ea; font-weight:600; font-size:13px;
  padding:7px 14px; border-radius:999px; transition:.16s;
}
.variant-switch button.on{ background:var(--blue); color:#fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px);
  align-items:center; padding-block:clamp(48px,7vw,90px);
}
.hero h1{ font-size:clamp(34px,5vw,58px); color:var(--ink); margin-top:22px; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--blue); }
.hero .lead{ margin-top:22px; font-size:clamp(16.5px,1.8vw,19px); color:var(--slate); max-width:54ch; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:24px; margin-top:30px; flex-wrap:wrap; }
.hero-meta li{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--slate); font-weight:500; }
.hero-meta .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }

/* hero background flourishes */
.hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-bg::before{
  content:""; position:absolute; top:-220px; right:-160px; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(31,95,214,.10), transparent 62%);
}

/* Variant A: light hero. Variant B: navy hero */
.hero{ background:radial-gradient(120% 120% at 80% 0%, #103a7d 0%, var(--navy) 45%, var(--navy-900) 100%); }
.hero h1{ color:#fff; }
.hero h1 em{ color:#8fd0ff; }
.hero .lead{ color:#b9c8e4; }
.hero .eyebrow{ color:#8fd0ff; }
.hero .eyebrow::before{ background:#8fd0ff; }
.hero-meta li{ color:#aebfdd; }
.hero .btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#eaf1ff; }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }
.hero-bg::before{ background:radial-gradient(circle at center, rgba(143,208,255,.16), transparent 60%); }

/* ---------- Product mock (browser-framed app) ---------- */
.mock{
  border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow-lg);
  border:1px solid var(--line); overflow:hidden; position:relative;
}
.mock{ box-shadow:0 40px 80px -30px rgba(0,0,0,.55); border-color:rgba(255,255,255,.1); }
.mock-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line-soft); background:var(--paper); }
.mock-bar .d{ width:10px; height:10px; border-radius:50%; background:#D6DEEA; }
.mock-bar .url{
  margin-left:10px; font-family:var(--font-mono); font-size:11.5px; color:var(--slate-400);
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 12px;
}
.mock-body{ display:grid; grid-template-columns:148px 1fr; min-height:340px; }
.mock-side{ background:var(--navy); padding:16px 12px; color:#cdd9ef; }
.mock-side .ms-brand{ display:flex; align-items:center; gap:8px; font-weight:700; color:#fff; font-size:13.5px; margin-bottom:18px; }
.mock-side .ms-brand i{ width:20px; height:20px; border-radius:6px; background:var(--blue); display:inline-block; }
.mock-side a{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:7px; font-size:12.5px; color:#a9bbdc; margin-bottom:3px; }
.mock-side a .ic{ width:14px; height:14px; border-radius:4px; background:#3a548a; flex:none; }
.mock-side a.act{ background:rgba(255,255,255,.10); color:#fff; }
.mock-side a.act .ic{ background:var(--blue); }
.mock-main{ padding:18px; background:#fff; }
.mock-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mock-h h4{ font-size:15px; }
.pill{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; padding:4px 9px; border-radius:999px; letter-spacing:.03em; }
.pill-sync{ background:var(--green-50); color:var(--green); display:inline-flex; align-items:center; gap:6px; }
.pill-sync .bb{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.mock-row{ display:flex; align-items:center; gap:12px; padding:11px; border:1px solid var(--line-soft); border-radius:10px; margin-bottom:9px; background:#fff; }
.mock-row .av{ width:30px; height:30px; border-radius:8px; background:var(--blue-50); color:var(--blue); display:grid; place-items:center; font-size:11px; font-weight:700; font-family:var(--font-mono); flex:none; }
.mock-row .mr-t{ flex:1; min-width:0; }
.mock-row .mr-t b{ font-size:12.5px; display:block; font-weight:600; }
.mock-row .mr-t span{ font-size:11px; color:var(--slate-400); font-family:var(--font-mono); }
.mr-status{ font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:6px; }
.mr-status.s-sign{ background:var(--blue-50); color:var(--blue); }
.mr-status.s-ok{ background:var(--green-50); color:var(--green); }
.mr-status.s-wait{ background:#FFF3E0; color:var(--amber); }

.hero-float{
  position:absolute; left:-26px; bottom:34px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:13px 16px; display:flex; align-items:center; gap:12px;
}
.hero-float .hf-ic{ width:38px; height:38px; border-radius:10px; background:var(--green-50); display:grid; place-items:center; flex:none; }
.hero-float .hf-ic svg{ width:20px; height:20px; color:var(--green); }
.hero-float b{ font-size:13px; display:block; white-space:nowrap; }
.hero-float span{ font-size:11.5px; color:var(--slate-400); font-family:var(--font-mono); white-space:nowrap; }
.mock-wrap{ position:relative; }

/* ---------- Trust / stats strip ---------- */
.trust{ border-block:1px solid var(--line-soft); background:var(--white); }
.trust{ background:var(--navy-900); border-color:rgba(255,255,255,.07); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border-radius:0; }
.trust-grid{ background:rgba(255,255,255,.08); }
.trust-cell{ background:#fff; padding:26px 18px; text-align:center; }
.trust-cell{ background:var(--navy-900); }
.trust-cell .num{ font-family:var(--font-head); font-size:clamp(26px,3vw,38px); font-weight:700; color:var(--blue); letter-spacing:-.03em; }
.trust-cell .num{ color:#8fd0ff; }
.trust-cell .lab{ font-size:13px; color:var(--slate); margin-top:6px; }
.trust-cell .lab{ color:#9fb1d2; }

/* ---------- Features ---------- */
.features-grid{ grid-template-columns:repeat(3,1fr); }
.feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px;
  transition:.18s ease; position:relative;
}
.feature:hover{ border-color:var(--blue-100); box-shadow:var(--shadow); transform:translateY(-2px); }
.feature .f-ic{ width:48px; height:48px; border-radius:13px; background:var(--blue-50); display:grid; place-items:center; margin-bottom:18px; }
.feature .f-ic svg{ width:24px; height:24px; color:var(--blue); }
.feature h3{ font-size:19px; }
.feature p{ margin-top:10px; font-size:14.5px; color:var(--slate); }
.feature .f-tag{ font-family:var(--font-mono); font-size:11px; color:var(--blue); margin-top:14px; display:inline-block; letter-spacing:.04em; }

/* ============================================================
   1C INTEGRATION block
   ============================================================ */
.onec{ background:var(--tint); border-block:1px solid var(--line-soft); }
.onec-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.onec-list{ margin-top:26px; display:grid; gap:16px; }
.onec-list li{ display:flex; gap:14px; align-items:flex-start; }
.onec-list .ck{ width:24px; height:24px; border-radius:7px; background:var(--blue); display:grid; place-items:center; flex:none; margin-top:1px; }
.onec-list .ck svg{ width:13px; height:13px; color:#fff; }
.onec-list b{ font-size:15.5px; }
.onec-list p{ font-size:13.5px; color:var(--slate); margin-top:2px; }

/* sync diagram */
.sync{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:28px;
  box-shadow:var(--shadow); position:relative;
}
.sync-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.sync-side{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; }
.sync-side .badge{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-family:var(--font-mono); font-weight:700; font-size:13px; flex:none; }
.badge-1c{ background:#FDEFD6; color:#A66A12; }
.badge-mx{ background:var(--blue); color:#fff; }
.sync-flow{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--slate-400); font-family:var(--font-mono); font-size:11px; }
.sync-rows{ display:grid; gap:10px; }
.sync-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.sync-chip{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; font-size:13px; background:var(--paper); }
.sync-chip.src{ justify-content:flex-start; }
.sync-chip.dst{ justify-content:flex-start; background:var(--blue-50); border-color:var(--blue-100); }
.sync-chip .ci{ width:20px; height:20px; border-radius:6px; flex:none; }
.sync-chip.src .ci{ background:#FDEFD6; }
.sync-chip.dst .ci{ background:var(--blue-100); }
.sync-chip code{ font-family:var(--font-mono); font-size:11px; color:var(--slate-400); }
.sync-arrow{ color:var(--blue); display:grid; place-items:center; }
.sync-arrow svg{ width:18px; height:18px; }
.sync-foot{
  margin-top:18px; padding-top:18px; border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:11px; font-size:13px; color:var(--slate);
}
.sync-foot .ev{ font-family:var(--font-mono); font-size:11px; background:var(--navy); color:#cdd9ef; padding:4px 9px; border-radius:6px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps-grid{ grid-template-columns:repeat(4,1fr); counter-reset:step; }
.step{ position:relative; padding-top:8px; }
.step .s-num{
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--blue);
  width:42px; height:42px; border-radius:12px; border:1.5px solid var(--blue-100);
  display:grid; place-items:center; background:var(--blue-50); margin-bottom:18px;
}
.step h3{ font-size:17px; }
.step p{ margin-top:9px; font-size:14px; color:var(--slate); }
.step::after{
  content:""; position:absolute; top:29px; left:54px; right:-14px; height:1.5px;
  background:repeating-linear-gradient(90deg,var(--blue-100) 0 7px,transparent 7px 14px);
}
.step:last-child::after{ display:none; }

/* ============================================================
   ROLES
   ============================================================ */
.roles{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.roles .eyebrow{ color:#8fd0ff; } .roles .eyebrow::before{ background:#8fd0ff; }
.roles .section-head h2{ color:#fff; } .roles .section-head .lead{ color:#aebfdd; }
.roles-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }
.roles-tabs button{
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#c4d2ea;
  padding:11px 20px; border-radius:999px; font-weight:600; font-size:14.5px; transition:.16s;
}
.roles-tabs button.on{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.role-panel{ display:none; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.role-panel.on{ display:grid; }
@keyframes fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.role-info h3{ font-size:clamp(24px,3vw,34px); color:#fff; }
.role-info .role-who{ font-family:var(--font-mono); font-size:12.5px; color:#8fd0ff; letter-spacing:.05em; text-transform:uppercase; }
.role-info p{ margin-top:14px; color:#b9c8e4; font-size:15.5px; }
.role-caps{ margin-top:22px; display:grid; gap:14px; }
.role-caps li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:#dfe8f7; line-height:1.4; }
.role-caps .ck{ width:22px; height:22px; border-radius:7px; background:rgba(143,208,255,.18); display:grid; place-items:center; flex:none; margin-top:1px; }
.role-caps .ck svg{ width:12px; height:12px; color:#8fd0ff; }
.role-card{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-xl); padding:24px;
}
.role-screen{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg); }
.rs-top{ padding:14px 16px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; }
.rs-top b{ font-size:13.5px; color:var(--ink); }
.rs-top .pill{ background:var(--blue-50); color:var(--blue); }
.rs-body{ padding:16px; display:grid; gap:10px; }
.rs-widget{ border:1px solid var(--line-soft); border-radius:10px; padding:13px; }
.rs-widget .rw-lab{ font-size:11px; color:var(--slate-400); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }
.rs-widget .rw-val{ font-size:20px; font-weight:700; color:var(--ink); margin-top:4px; font-family:var(--font-head); }
.rs-widget .rw-sub{ font-size:11.5px; color:var(--green); margin-top:2px; }
.rs-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ============================================================
   E-IMZO / Security
   ============================================================ */
.sec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,64px); align-items:center; }
.sec-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sec-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:#fff; }
.sec-card .sc-ic{ width:42px; height:42px; border-radius:11px; background:var(--blue-50); display:grid; place-items:center; margin-bottom:14px; }
.sec-card .sc-ic svg{ width:21px; height:21px; color:var(--blue); }
.sec-card h4{ font-size:15.5px; }
.sec-card p{ font-size:13px; color:var(--slate); margin-top:7px; }
.sec-badges{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.sec-badges span{ font-family:var(--font-mono); font-size:11.5px; color:var(--slate); border:1px solid var(--line); border-radius:8px; padding:7px 12px; background:var(--paper); }

.eimzo-card{
  background:linear-gradient(165deg,var(--navy),var(--navy-900)); border-radius:var(--r-xl);
  padding:30px; color:#fff; box-shadow:var(--shadow-lg);
}
.eimzo-card .ec-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.eimzo-card .ec-logo{ display:flex; align-items:center; gap:10px; font-weight:700; }
.eimzo-card .ec-logo i{ width:34px; height:34px; border-radius:10px; background:#8fd0ff; color:var(--navy); display:grid; place-items:center; font-weight:700; }
.ec-doc{ background:#fff; border-radius:12px; padding:18px; color:var(--ink); }
.ec-doc .ecd-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.ec-doc .ecd-h b{ font-size:13.5px; }
.ec-line{ height:7px; border-radius:4px; background:var(--line-soft); margin-bottom:8px; }
.ec-line.w70{ width:70%; } .ec-line.w90{ width:90%; } .ec-line.w50{ width:50%; }
.ec-stamp{
  margin-top:16px; border:1.5px dashed var(--green); border-radius:10px; padding:12px; display:flex; align-items:center; gap:12px;
  background:var(--green-50);
}
.ec-stamp .qr{ width:46px; height:46px; border-radius:8px; flex:none;
  background:
    conic-gradient(from 0deg, #0E1726 0 25%, #fff 0 50%, #0E1726 0 75%, #fff 0) 0 0/16px 16px,
    #fff;
  border:2px solid var(--ink);
}
.ec-stamp .es-t b{ font-size:12.5px; color:var(--green); display:block; }
.ec-stamp .es-t span{ font-size:11px; color:var(--slate); font-family:var(--font-mono); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,64px); align-items:start; }
.faq-list{ display:grid; gap:12px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; transition:.16s; }
.faq-item.open{ border-color:var(--blue-100); box-shadow:var(--shadow-sm); }
.faq-q{ width:100%; text-align:left; border:0; background:transparent; padding:20px 22px; font-size:16px; font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-head); }
.faq-q .pm{ width:24px; height:24px; border-radius:7px; background:var(--blue-50); color:var(--blue); display:grid; place-items:center; flex:none; transition:.2s; font-size:18px; line-height:1; }
.faq-item.open .pm{ background:var(--blue); color:#fff; transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a p{ padding:0 22px 22px; color:var(--slate); font-size:14.5px; }

/* ============================================================
   LEAD FORM
   ============================================================ */
.cta{ position:relative; overflow:hidden; }
.cta{ background:radial-gradient(120% 120% at 15% 0%, #103a7d, var(--navy) 55%, var(--navy-900)); }
.lead-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,72px); align-items:center; }
.lead-copy .eyebrow{ color:var(--blue); }
.lead-copy h2{ font-size:clamp(28px,4vw,46px); margin-top:16px; color:var(--ink); text-wrap:balance; }
.lead-copy .lead-sub{ margin-top:18px; font-size:17px; color:var(--slate); max-width:46ch; }
.lead-points{ margin-top:26px; display:grid; gap:14px; }
.lead-points li{ display:flex; gap:12px; align-items:center; font-size:15px; color:var(--ink); font-weight:500; }
.lead-points .ck{ width:26px; height:26px; border-radius:8px; background:var(--blue); display:grid; place-items:center; flex:none; }
.lead-points .ck svg{ width:14px; height:14px; color:#fff; }
.lead-copy h2{ color:#fff; }
.lead-copy .lead-sub{ color:#b9c8e4; }
.lead-copy .eyebrow{ color:#8fd0ff; } .lead-copy .eyebrow::before{ background:#8fd0ff; }
.lead-points li{ color:#eaf1ff; }

/* the card */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,3vw,38px);
  box-shadow:var(--shadow-lg); position:relative;
}
.form-card h3{ font-size:21px; }
.form-card .fc-sub{ font-size:13.5px; color:var(--slate); margin-top:6px; }
.form-body{ margin-top:24px; display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field.col-2{ grid-column:span 1; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink); }
.field label .req{ color:var(--red); }
.field .hint{ font-size:11.5px; color:var(--slate-400); font-family:var(--font-mono); }
.input, .select, .textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  transition:.14s; outline:none;
}
.input::placeholder, .textarea::placeholder{ color:var(--slate-400); }
.input:focus, .select:focus, .textarea:focus{ border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(31,95,214,.13); }
.textarea{ resize:vertical; min-height:84px; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2351617C' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }

/* phone with prefix */
.phone{ display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper); transition:.14s; }
.phone:focus-within{ border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(31,95,214,.13); }
.phone .pfx{ display:flex; align-items:center; gap:7px; padding:0 13px; background:#fff; border-right:1.5px solid var(--line); font-size:14.5px; font-weight:600; color:var(--ink); font-family:var(--font-mono); }
.phone .pfx .fl{ width:20px; height:14px; border-radius:2px; overflow:hidden; display:grid; grid-template-rows:1fr 1fr 1fr; }
.phone .pfx .fl i:nth-child(1){ background:#1EB4E7; } .phone .pfx .fl i:nth-child(2){ background:#fff; } .phone .pfx .fl i:nth-child(3){ background:#1EAE5A; }
.phone input{ border:0; background:transparent; outline:none; flex:1; padding:12px 14px; font-size:14.5px; font-family:var(--font-mono); letter-spacing:.02em; color:var(--ink); min-width:0; }

/* segmented radio (1C yes/no) */
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg label{
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:10px; padding:11px; font-size:14px; font-weight:600;
  color:var(--slate); background:var(--paper); transition:.14s;
}
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label .tick{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; }
.seg input:checked + label{ border-color:var(--blue); background:var(--blue-50); color:var(--blue-700); }
.seg input:checked + label .tick{ border-color:var(--blue); background:var(--blue); }
.seg input:checked + label .tick::after{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; }

/* error states */
.field.err .input, .field.err .select, .field.err .textarea{ border-color:var(--red); background:var(--red-50); }
.field.err .phone{ border-color:var(--red); background:var(--red-50); }
.err-msg{ font-size:12px; color:var(--red); display:none; align-items:center; gap:5px; }
.field.err .err-msg{ display:flex; }

.form-foot{ margin-top:6px; }
.form-consent{ font-size:11.5px; color:var(--slate-400); margin-top:14px; text-align:center; line-height:1.5; }
.form-consent a{ color:var(--blue); text-decoration:underline; }

/* success state */
.form-success{ display:none; text-align:center; padding:18px 8px 8px; }
.form-success.show{ display:block; }
.form-card.done .form-body, .form-card.done .form-foot, .form-card.done .form-consent, .form-card.done > h3, .form-card.done > .fc-sub{ display:none; }
.success-ic{ width:72px; height:72px; border-radius:20px; background:var(--green-50); display:grid; place-items:center; margin:0 auto 20px; }
.success-ic svg{ width:38px; height:38px; color:var(--green); }
.form-success h3{ font-size:23px; }
.form-success p{ margin-top:12px; color:var(--slate); font-size:15px; }
.success-summary{ margin-top:20px; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; display:grid; gap:9px; }
.success-summary div{ display:flex; justify-content:space-between; gap:14px; font-size:13px; }
.success-summary div span{ color:var(--slate-400); font-family:var(--font-mono); font-size:12px; }
.success-summary div b{ color:var(--ink); font-weight:600; text-align:right; }

/* spinner on submit */
.spin{ width:17px; height:17px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:rot .6s linear infinite; display:none; }
@keyframes rot{ to{ transform:rotate(360deg) } }
.btn.loading .spin{ display:inline-block; }
.btn.loading .btn-tx{ opacity:.7; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy-900); color:#9fb1d2; padding-block:56px 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer .brand{ color:#fff; }
.footer-about{ margin-top:16px; font-size:13.5px; max-width:30ch; line-height:1.6; }
.footer h5{ color:#fff; font-size:13px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; font-weight:600; }
.footer-col a{ display:block; font-size:14px; color:#9fb1d2; padding:5px 0; transition:.14s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:22px; font-size:12.5px; gap:16px; flex-wrap:wrap; }
.footer-bottom .fb-r{ display:flex; gap:18px; }

/* ============================================================
   RESPONSIVE  — mobile-adaptive redesign (shared by both variants)
   ============================================================ */

/* ---- Tablet (≤1000px): stack two-column blocks, enable drawer nav ---- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-copy{ max-width:640px; }
  .mock-wrap{ max-width:560px; margin-inline:auto; }
  .onec-grid, .sec-grid, .faq-grid, .lead-grid, .role-panel.on{ grid-template-columns:1fr; }
  .features-grid{ grid-template-columns:1fr 1fr; }
  .steps-grid{ grid-template-columns:1fr 1fr; }
  .step::after{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; }

  /* drawer nav */
  .nav-inner{ gap:14px; }
  .nav-tools{ margin-left:auto; }
  .nav-links{
    flex-direction:column; gap:2px; align-items:stretch;
    position:absolute; top:100%; left:0; right:0; margin:0;
    background:#fff; border-bottom:1px solid var(--line-soft);
    box-shadow:var(--shadow); padding:14px var(--gutter) 20px;
    transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .24s ease, opacity .24s ease, visibility .24s;
  }
  .nav.nav-open .nav-links{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav-links a{ padding:14px 12px; font-size:16px; border-radius:10px; color:var(--ink); }
  .nav-links a:hover{ background:var(--tint); }
  .nav-cta-mobile{ display:flex; margin-top:10px; color:#fff; }
  .nav-burger{ display:block; }
}

/* ---- Large phone (≤760px): single-column everywhere, denser sections ---- */
@media (max-width:760px){
  :root{ --gutter:20px; }
  .section{ padding-block:clamp(48px,11vw,72px); }
  .section-head{ margin-bottom:32px; }

  .features-grid, .steps-grid, .sec-cards, .footer-top{ grid-template-columns:1fr; }
  .step{ padding-left:0; }

  /* trust strip → 2×2 tiles */
  .trust-grid{ grid-template-columns:1fr 1fr; gap:1px; }
  .trust-cell{ padding:22px 14px; }

  /* hero: full-width CTAs, larger tap targets */
  .hero h1{ font-size:clamp(30px,8vw,42px); }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-cta .btn{ width:100%; }
  .hero-meta{ gap:12px 22px; margin-top:24px; }

  /* product mock: drop desktop sidebar, let the inbox fill the screen */
  .hero-float{ display:none; }
  .mock-body{ grid-template-columns:1fr; min-height:0; }
  .mock-side{ display:none; }
  .mock-main{ padding:16px; }
  .mock-bar .url{ font-size:11px; }

  /* sync diagram: tighter chips, hide the +phone annotation */
  .sync{ padding:20px; border-radius:var(--r-lg); }
  .sync-chip{ font-size:12px; padding:9px 10px; }
  .sync-chip code{ display:none; }
  .sync-head{ margin-bottom:16px; }
  .sync-side span:last-child{ font-size:13px; }

  /* roles: scroll-snap tab strip that bleeds to the edges */
  .roles-tabs{
    flex-wrap:nowrap; overflow-x:auto; gap:8px;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .roles-tabs::-webkit-scrollbar{ display:none; }
  .roles-tabs button{ flex:0 0 auto; scroll-snap-align:start; padding:12px 18px; }
  .role-panel.on{ gap:28px; }
  .role-info h3{ font-size:clamp(22px,6vw,28px); }

  /* form: stack pairs, comfortable spacing */
  .form-row{ grid-template-columns:1fr; gap:16px; }
  .form-card{ border-radius:var(--r-lg); }

  /* footer */
  .footer{ padding-block:44px 96px; }
  .footer-top{ gap:28px; padding-bottom:32px; }
  .footer-about{ max-width:42ch; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; }

  /* keep last content clear of the floating variant switch */
  body{ padding-bottom:0; }
}

/* ---- Small phone (≤480px): final tightening ---- */
@media (max-width:480px){
  .nav-inner{ height:60px; }
  .brand{ font-size:17px; }
  .brand-mark{ width:30px; height:30px; }
  .hero{ }
  .hero .lead{ font-size:16px; }
  .eyebrow{ font-size:11.5px; letter-spacing:.12em; }
  .section-head h2{ font-size:clamp(25px,7vw,32px); }
  .trust-cell .num{ font-size:24px; }
  .trust-cell .lab{ font-size:12px; }
  .feature{ padding:22px; }
  .form-card{ padding:22px 18px; }
  .success-summary div{ flex-direction:column; gap:2px; }
  .success-summary div b{ text-align:left; }
}

/* ---- Floating CTAs that need to swap on mobile ---- */
@media (max-width:600px){
  .nav-cta-desktop{ display:none; }
}

/* ---- Compact variant switch on phones ---- */
@media (max-width:760px){
  .variant-switch{
    left:50%; right:auto; transform:translateX(-50%);
    bottom:14px; padding:6px 8px; gap:4px;
    max-width:calc(100vw - 24px);
  }
  .variant-switch .vs-label{ display:none; }
  .variant-switch button{ padding:9px 14px; font-size:12.5px; }
}

/* ---------- scroll reveal (disabled — always visible for reliability) ---------- */
[data-reveal]{ opacity:1; transform:none; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .nav-links{ transition:none !important; }
}