:root{
  --ink:#23233A;
  --ink-soft:#4A4A6B;
  --muted:#6E7090;
  --paper:#F5F6FB;
  --paper-raised:#FFFFFF;
  --paper-sunk:#EBEDF6;
  --line:rgba(35,35,58,0.12);
  --line-strong:rgba(35,35,58,0.22);
  --accent:#2F5FD1;
  --accent-ink:#1E3F94;
  --accent-soft:#E1E8FB;
  --accent-2:#6C4FA6;
  --cyan:#29B6E8;
  --bad:#B23B4A;
  --good:#1F9163;
  --good-soft:#DCEFE5;
  --shadow: 0 1px 2px rgba(35,35,58,0.07), 0 12px 32px -16px rgba(35,35,58,0.24);
  --radius:14px;
  --maxw:1160px;
  --font-display:'Unbounded', 'Segoe UI', sans-serif;
  --font-body:'Golos Text', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E9EAF6;
    --ink-soft:#C3C5E0;
    --muted:#9496B8;
    --paper:#13142A;
    --paper-raised:#1C1E3A;
    --paper-sunk:#0E0F20;
    --line:rgba(233,234,246,0.14);
    --line-strong:rgba(233,234,246,0.26);
    --accent:#7098FF;
    --accent-ink:#C9D7FF;
    --accent-soft:#212E5C;
    --accent-2:#A489DC;
    --cyan:#57D3F6;
    --bad:#E0717F;
    --good:#54CB90;
    --good-soft:#153826;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 20px 40px -20px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --ink:#E9EAF6;
  --ink-soft:#C3C5E0;
  --muted:#9496B8;
  --paper:#13142A;
  --paper-raised:#1C1E3A;
  --paper-sunk:#0E0F20;
  --line:rgba(233,234,246,0.14);
  --line-strong:rgba(233,234,246,0.26);
  --accent:#7098FF;
  --accent-ink:#C9D7FF;
  --accent-soft:#212E5C;
  --accent-2:#A489DC;
  --cyan:#57D3F6;
  --bad:#E0717F;
  --good:#54CB90;
  --good-soft:#153826;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 20px 40px -20px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent-soft);
  border:1px solid var(--line);
  padding:6px 12px 6px 10px;
  border-radius:999px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.band-ink .eyebrow{color:var(--cyan);}
.band-ink .eyebrow::before{background:var(--cyan);}
p{color:var(--ink-soft);}
.lede{font-size:1.18rem;line-height:1.6;max-width:56ch;color:var(--ink-soft);}
section{padding:96px 0;}
section.tight{padding:72px 0;}
.band-ink{background:var(--ink);color:var(--paper);}
.band-ink h2, .band-ink h3{color:var(--paper);}
.band-ink p{color:#C9CFDE;}
.band-ink .muted{color:#8E96AA;}
.band-sunk{background:var(--paper-sunk);}

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:68px;}
.logo{display:inline-flex;align-items:center;}
.logo-chip{background:#FFFFFF;border-radius:9px;padding:5px 10px;display:inline-flex;align-items:center;box-shadow:0 1px 3px rgba(20,20,40,0.12);}
.logo-img{height:22px;width:auto;display:block;}
footer .logo-img{height:26px;}
nav.links{display:flex;gap:28px;font-size:.92rem;font-weight:500;align-items:center;}
nav.links a{text-decoration:none;color:var(--ink-soft);position:relative;}
nav.links a:hover{color:var(--ink);}
.nav-home{display:inline-flex;color:var(--ink-soft);}
.nav-home:hover{color:var(--ink);}

/* nav dropdown */
.nav-drop{position:relative;}
.nav-drop-trigger{background:none;border:none;font:inherit;font-weight:500;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:0;}
.nav-drop-trigger:hover{color:var(--ink);}
.nav-drop-trigger .chev{font-size:.7em;}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;
  margin-top:16px;background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:8px;min-width:230px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:50;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-drop-menu a{padding:9px 12px;border-radius:8px;font-size:.88rem;color:var(--ink-soft);text-decoration:none;}
.nav-drop-menu a:hover{background:var(--paper-sunk);color:var(--ink);}
.btn{
  font-family:var(--font-body);
  font-weight:700;
  border-radius:10px;
  border:1px solid transparent;
  padding:11px 20px;
  font-size:.92rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow);}
.btn-accent:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-light{background:var(--paper);color:var(--ink);}

/* ---------- HERO ---------- */
.hero{padding:76px 0 60px;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.3rem, 3.4vw + 1rem, 3.4rem);font-weight:700;margin:18px 0 20px;line-height:1.08;}
.hero-cta{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap;}
.micro{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);}
.proof-strip{
  margin-top:52px;padding-top:28px;border-top:1px dashed var(--line-strong);
  display:flex;gap:36px;flex-wrap:wrap;
}
.proof-item{font-size:.86rem;color:var(--muted);display:flex;gap:8px;align-items:baseline;}
.proof-item b{font-family:var(--font-mono);color:var(--ink);font-weight:600;}

/* ---------- receipt mock ---------- */
.receipt{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:26px 26px 22px;
  position:relative;
  font-family:var(--font-mono);
}
.receipt::before, .receipt::after{
  content:"";position:absolute;width:22px;height:22px;border-radius:50%;
  background:var(--paper);top:50%;transform:translateY(-50%);
}
.receipt::before{left:-11px;}
.receipt::after{right:-11px;}
.receipt .r-head{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px dashed var(--line-strong);padding-bottom:14px;margin-bottom:16px;}
.r-flow{display:flex;flex-direction:column;gap:0;}
.r-step{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:.86rem;color:var(--ink-soft);}
.r-step + .r-step{border-top:1px dashed var(--line);}
.r-step .ic{width:30px;height:30px;border-radius:8px;background:var(--paper-sunk);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;}
.r-step.time .ic{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink-soft);}
.r-step b{color:var(--ink);font-family:var(--font-body);font-weight:600;}
.r-step .tag{margin-left:auto;font-size:.68rem;color:var(--good);background:var(--good-soft);padding:3px 8px;border-radius:6px;letter-spacing:.03em;}
.r-foot{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-strong);display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);}

/* ---------- generic section heads ---------- */
.head{max-width:640px;margin-bottom:48px;}
.head h2{font-size:clamp(1.6rem, 1.6vw + 1rem, 2.2rem);font-weight:700;margin-top:14px;}
.head p{margin-top:14px;font-size:1.05rem;}
.footnote{font-size:.8rem;color:var(--muted);margin-top:8px !important;}
.kicker{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.band-ink .kicker{color:var(--accent);}

/* case study */
.case-panel{border:1px solid var(--line);border-radius:16px;padding:34px;background:var(--paper-raised);}
.case-panel h3{font-size:1.3rem;margin:10px 0 10px;max-width:32ch;}
.case-panel p{max-width:56ch;}
.case-stats{display:flex;gap:36px;margin-top:24px;padding-top:22px;border-top:1px dashed var(--line-strong);flex-wrap:wrap;}
.case-stat{display:flex;flex-direction:column;gap:2px;}
.case-stat b{font-family:var(--font-display);font-size:1.8rem;color:var(--accent);font-variant-numeric:tabular-nums;}
.case-stat span{font-size:.8rem;color:var(--muted);}

/* pain grid */
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper-raised);}
.pain-col{padding:30px 32px;}
.pain-col + .pain-col{border-left:1px dashed var(--line-strong);}
.pain-col h3{font-size:.78rem;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;}
.pain-col.old h3{color:var(--bad);}
.pain-col.new h3{color:var(--good);}
.pain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.pain-list li{display:flex;gap:10px;font-size:.95rem;color:var(--ink-soft);}
.pain-col.old .pain-list li::before{content:"✕";color:var(--bad);flex:none;font-size:.82rem;margin-top:2px;}
.pain-col.new .pain-list li::before{content:"✓";color:var(--good);flex:none;font-size:.82rem;margin-top:2px;font-weight:700;}

/* AI invoice */
.invoice-demo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.snap-card{
  background:var(--ink);color:var(--paper);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);
}
.snap-row{display:flex;align-items:center;gap:14px;}
.snap-num{font-family:var(--font-mono);font-size:.78rem;color:#8E96AA;width:22px;}
.snap-line{flex:1;height:1px;background:rgba(255,255,255,0.14);}
.snap-arrow{color:var(--accent);font-family:var(--font-mono);}
.snap-final{margin-top:6px;background:rgba(255,255,255,0.06);border:1px dashed rgba(255,255,255,0.22);border-radius:10px;padding:14px 16px;font-family:var(--font-mono);font-size:.82rem;color:#DCE1EE;}

/* roles */
.roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.role-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:22px 20px;}
.role-card .who{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);background:var(--accent-soft);display:inline-block;padding:3px 9px;border-radius:6px;margin-bottom:14px;}
.role-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.role-card li{font-size:.87rem;color:var(--ink-soft);padding-left:14px;position:relative;}
.role-card li::before{content:"-";position:absolute;left:0;color:var(--muted);}

/* workflow chain */
.chain{display:flex;align-items:stretch;gap:0;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:var(--paper-raised);}
.chain-step{flex:1;padding:26px 20px;position:relative;}
.chain-step + .chain-step{border-left:1px dashed var(--line-strong);}
.chain-step .n{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);}
.chain-step h4{font-family:var(--font-body);font-weight:700;font-size:.98rem;margin:8px 0 6px;}
.chain-step p{font-size:.83rem;margin:0;color:var(--muted);}
.chain-step .click{position:absolute;top:22px;right:16px;font-family:var(--font-mono);font-size:.66rem;background:var(--good-soft);color:var(--good);padding:2px 7px;border-radius:5px;}

/* verticals */
.vert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.vert-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.vert-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(2, 132, 199, 0.12);
}
.vert-card .ic{font-size:24px;}
.vert-card h4{font-family:var(--font-body);font-weight:700;font-size:1.06rem;margin:2px 0 0;color:var(--ink);}
.vert-card p{font-size:.86rem;line-height:1.55;margin:0;color:var(--muted);flex:1;}
.vert-card-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 14px;
  border-radius:8px;
  background:rgba(2, 132, 199, 0.07);
  border:1px solid rgba(2, 132, 199, 0.2);
  color:var(--accent-ink);
  font-size:0.84rem;
  font-weight:700;
  letter-spacing:0.01em;
  transition:all 0.2s ease;
}
.vert-card-cta .arrow{
  font-size:1.05rem;
  transition:transform 0.2s ease;
}
.vert-card:hover .vert-card-cta{
  background:var(--accent);
  border-color:var(--accent);
  color:#ffffff;
  box-shadow:0 2px 8px rgba(2, 132, 199, 0.3);
}
.vert-card:hover .vert-card-cta .arrow{
  transform:translateX(4px);
}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.blog-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.blog-card:hover{border-color:var(--line-strong);transform:translateY(-2px);}
.blog-card .ic{font-size:22px;}
.blog-card h4{font-family:var(--font-body);font-weight:700;font-size:1.02rem;margin:2px 0 0;}
.blog-card p{font-size:.85rem;margin:0;color:var(--muted);}
.blog-date{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-top:auto;padding-top:10px;}
.blog-meta{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);margin:6px 0 28px;}
.article-body p{font-size:1.05rem;line-height:1.7;margin:0 0 20px;}

.author-card{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:8px 0 32px;background:var(--paper-raised);}
.author-avatar{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;}
.author-info h4{font-size:.98rem;margin:0 0 2px;}
.author-info p{font-size:.86rem;margin:0 0 8px;}
.author-info a{font-size:.82rem;color:var(--accent-ink);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.author-info a:hover{color:var(--accent);}

/* switch */
.switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.switch-steps{display:flex;flex-direction:column;gap:0;}
.sw-step{display:flex;gap:16px;padding:18px 0;}
.sw-step + .sw-step{border-top:1px dashed var(--line);}
.sw-step .num{font-family:var(--font-mono);color:var(--accent);font-weight:600;flex:none;width:24px;}
.sw-step h4{font-size:.98rem;margin:0 0 4px;}
.sw-step p{font-size:.87rem;margin:0;}

/* auth / register+checkout */
.auth-wrap{min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center;padding:48px 20px;}
.auth-card{width:100%;max-width:400px;background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:36px 32px;}
.auth-card h1{font-size:1.6rem;font-weight:700;margin:14px 0 6px;}
.auth-sub{font-size:.94rem;margin:0 0 24px;}
.auth-errors{background:color-mix(in srgb, var(--bad) 12%, transparent);border:1px solid color-mix(in srgb, var(--bad) 35%, transparent);border-radius:10px;padding:12px 14px;margin-bottom:18px;}
.auth-errors p{color:var(--bad);font-size:.86rem;margin:0;}
.auth-errors p + p{margin-top:4px;}
.btn-google{width:100%;justify-content:center;background:var(--paper-raised);color:var(--ink);border:1px solid var(--line-strong);font-weight:600;}
.btn-google:hover{border-color:var(--ink);}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:.8rem;}
.auth-divider::before, .auth-divider::after{content:"";flex:1;height:1px;background:var(--line-strong);}
.auth-form, .simple-form{display:flex;flex-direction:column;gap:14px;}
.auth-form label, .simple-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink-soft);}
.auth-form input, .simple-form input, .simple-form textarea{
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:var(--paper-sunk);border:1px solid var(--line-strong);border-radius:9px;
  padding:11px 13px;font-weight:400;
}
.simple-form textarea{resize:vertical;min-height:120px;font-family:var(--font-body);}
.auth-form input:focus, .simple-form input:focus, .simple-form textarea:focus{outline:none;border-color:var(--accent);background:var(--paper-raised);}
.btn-full{width:100%;justify-content:center;margin-top:4px;}
.auth-fine{font-size:.78rem;color:var(--muted);text-align:center;margin-top:20px;}
.auth-fine a{color:var(--accent-ink);text-decoration:underline;}
.form-success{background:color-mix(in srgb, var(--good) 12%, transparent);border:1px solid color-mix(in srgb, var(--good) 35%, transparent);border-radius:10px;padding:12px 14px;margin-bottom:18px;color:var(--good);font-size:.86rem;}

/* contact */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:24px;align-items:start;}
.contact-card{border:1px solid var(--line);border-radius:16px;padding:32px;background:var(--paper-raised);}
.contact-line{display:flex;gap:14px;align-items:flex-start;padding:14px 0;}
.contact-line + .contact-line{border-top:1px dashed var(--line);}
.contact-line .ic{width:36px;height:36px;border-radius:9px;background:var(--paper-sunk);display:flex;align-items:center;justify-content:center;flex:none;font-size:16px;}
.contact-line h4{font-size:.88rem;margin:0 0 3px;}
.contact-line p{font-size:.92rem;margin:0;}
.contact-line a{color:var(--ink);text-decoration:none;}
.contact-line a:hover{color:var(--accent);}
.contact-quick{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;}

/* footer social */
.foot-social{display:flex;gap:10px;margin-top:18px;}
.social-badge{
  width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.92rem;
  border:1px solid var(--line-strong);color:var(--muted);text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.social-badge:hover{border-color:var(--accent);color:var(--accent);}

/* testimonials carousel */
.testi-carousel{position:relative;display:flex;align-items:center;gap:14px;}
.testi-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 10px;flex:1;
}
.testi-track::-webkit-scrollbar{height:6px;}
.testi-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.testi-card{
  scroll-snap-align:start;flex:0 0 calc((100% - 40px)/3);
  border:1px solid var(--line);border-radius:16px;background:var(--paper-raised);
  padding:24px;display:flex;flex-direction:column;gap:14px;
}
.testi-top{display:flex;gap:12px;align-items:center;}
.testi-avatar{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.85rem;}
.testi-who h4{font-size:.92rem;margin:0;}
.testi-who p{font-size:.78rem;margin:2px 0 0;color:var(--muted);}
.testi-title{font-size:.98rem;font-weight:700;margin:0;color:var(--ink);}
.testi-text{font-size:.88rem;margin:0;color:var(--ink-soft);line-height:1.55;}
.testi-nav{
  flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--paper-raised);color:var(--ink);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.testi-nav:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:880px){ .testi-card{flex-basis:calc((100% - 20px)/2);} }
@media (max-width:560px){ .testi-card{flex-basis:100%;} .testi-nav{display:none;} }

/* feature pages (Представяне) - alternating image/copy rows */
.topic-hero{padding:80px 0 20px;text-align:center;}
.topic-hero .wrap{max-width:720px;}
.topic-hero h1{font-size:clamp(2rem,2.6vw + 1rem,2.8rem);font-weight:700;margin:18px 0 16px;line-height:1.12;}
.topic-hero .lede{margin:0 auto 30px;}
.topic-hero .hero-cta{justify-content:center;}

.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:44px 0;}
.feature-row.reverse .feature-shot{order:1;}
.feature-row.reverse .feature-copy{order:2;}
@media (max-width: 900px){
  .feature-row{grid-template-columns:1fr;gap:28px;}
  .feature-row.reverse .feature-shot{order:2;}
  .feature-row.reverse .feature-copy{order:1;}
}
.feature-copy .kicker{margin-bottom:12px;display:inline-block;}
.feature-copy h2{font-size:clamp(1.4rem,1.5vw + 1rem,1.9rem);font-weight:700;margin:0 0 14px;line-height:1.25;}
.feature-copy p{font-size:0.98rem;line-height:1.55;color:var(--ink-soft);margin-bottom:16px;}
.feature-shot{
  border:1px solid var(--line-strong);border-radius:16px;
  background:var(--paper-raised);overflow:hidden;
  box-shadow:0 14px 34px -12px rgba(35,35,58,0.16);width:100%;max-width:580px;margin:0 auto;
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature-shot:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(35,35,58,0.22);}
.feature-shot .shot-placeholder{
  aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--muted);font-family:var(--font-mono);font-size:.8rem;padding:20px;text-align:center;
}
.feature-shot img{width:100%;height:auto;max-width:100%;display:block;object-fit:contain;}
.feature-points{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px;}
.feature-points li{display:flex;align-items:flex-start;gap:10px;font-size:0.92rem;color:var(--ink);line-height:1.45;}
.feature-points .check{color:var(--good);font-weight:700;font-size:1rem;line-height:1.2;flex-shrink:0;}
.shot-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-family:var(--font-mono);font-size:.8rem;padding:20px;text-align:center;}
.shot-placeholder .ic{font-size:30px;}

/* connectivity */
.conn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

/* data */
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.data-card{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--paper-raised);}
.data-card h4{font-size:1.02rem;margin-bottom:8px;}
.data-card .badge{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.data-card p{font-size:.88rem;}

/* shape */
.shape-box{
  border:1px dashed var(--line-strong);border-radius:16px;padding:34px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
}

/* pricing */
.tier-block{display:grid;grid-template-columns:1.35fr 0.65fr;gap:40px;align-items:stretch;margin-bottom:24px;}
.tier-table{border:1px solid var(--line);border-radius:14px;padding:8px 6px;background:var(--paper-raised);}
.tier-row{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;align-items:center;padding:12px 16px;font-family:var(--font-mono);font-size:.86rem;color:var(--ink-soft);border-radius:9px;}
.tier-row.head{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-bottom:10px;}
.tier-row.head + .tier-row{border-top:none;}
.tier-row + .tier-row{border-top:1px dashed var(--line);}
.tier-row .amt-sm{font-variant-numeric:tabular-nums;}
.tier-row.active{background:var(--accent-soft);color:var(--ink);font-weight:700;border-top:none !important;}
.badge-now{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font-size:.76rem;}
.badge-now::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.tier-row.cap{color:var(--muted);}
.tag-cap{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.tier-remaining{border:1px dashed var(--line-strong);border-radius:14px;padding:26px;background:var(--paper-raised);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;}
.tier-remaining .fig{font-family:var(--font-display);font-size:2.6rem;font-weight:700;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;}
.tier-remaining p{font-size:.85rem;margin:0;}
.vol-line{font-size:.92rem;color:var(--muted);margin-top:4px;}
.link-more{background:none;border:none;color:var(--accent-ink);font-family:var(--font-body);font-weight:700;font-size:inherit;cursor:pointer;text-decoration:underline;padding:0;}
.link-more:hover{color:var(--accent);}
.price-cap{margin-top:22px;font-size:.86rem;color:var(--muted);text-align:center;}

/* volume modal */
dialog.modal{border:1px solid var(--line-strong);border-radius:16px;padding:0;background:var(--paper-raised);color:var(--ink);max-width:440px;width:92vw;box-shadow:var(--shadow);}
dialog.modal::backdrop{background:rgba(10,16,28,0.55);backdrop-filter:blur(2px);}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px dashed var(--line-strong);}
.modal-head h3{font-size:1.02rem;margin:0;font-family:var(--font-body);font-weight:700;}
.modal-close{background:var(--paper-sunk);border:none;width:30px;height:30px;border-radius:8px;cursor:pointer;color:var(--ink);font-size:.9rem;flex:none;}
.modal-close:hover{background:var(--line-strong);}
.vol-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.86rem;}
.vol-table th, .vol-table td{padding:10px 22px;text-align:left;}
.vol-table td:last-child, .vol-table th:last-child{text-align:right;color:var(--muted);}
.vol-table thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px dashed var(--line-strong);}
.vol-table tbody tr:not(:last-child) td{border-bottom:1px dashed var(--line);}
.modal-note{padding:4px 22px 22px;font-size:.8rem;color:var(--muted);}

/* final cta */
.cta-final{text-align:center;padding:90px 0 100px;}
.cta-final h2{font-size:clamp(1.8rem,2.4vw + 1rem,2.6rem);max-width:16ch;margin:0 auto 18px;}
.cta-final .hero-cta{justify-content:center;}
.start-steps{display:flex;justify-content:center;gap:0;margin:36px auto 0;max-width:720px;border:1px solid rgba(255,255,255,0.14);border-radius:14px;overflow:hidden;}
.start-step{flex:1;padding:18px 14px;text-align:center;border-left:1px dashed rgba(255,255,255,0.14);}
.start-step:first-child{border-left:none;}
.start-step .n{display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--cyan);margin-bottom:8px;}
.start-step h4{font-family:var(--font-body);font-weight:700;font-size:.9rem;color:var(--paper);margin:0;line-height:1.3;}
.start-note{margin-top:18px;font-family:var(--font-mono);font-size:.8rem;color:#9AA1B8;}
.start-price{margin-top:12px;font-size:1.02rem;color:var(--paper);font-weight:600;}

footer{border-top:1px solid var(--line);padding:44px 0 50px;}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;}
.foot-links{display:flex;gap:26px;font-size:.86rem;color:var(--muted);flex-wrap:wrap;}
.foot-links a{text-decoration:none;color:var(--muted);}
.foot-links a:hover{color:var(--ink);}
.foot-note{font-size:.8rem;color:var(--muted);margin-top:10px;}

@media (max-width: 880px){
  .hero-grid, .invoice-demo, .switch-grid, .data-grid, .tier-block, .contact-grid, .feature-row{grid-template-columns:1fr;}
  .feature-row .feature-copy{order:1 !important;}
  .feature-row .feature-shot{order:2 !important;}
  .pain-grid{grid-template-columns:1fr;}
  .pain-col + .pain-col{border-left:none;border-top:1px dashed var(--line-strong);}
  .roles-grid, .vert-grid, .conn-grid, .blog-grid{grid-template-columns:repeat(2,1fr);}
  .chain{flex-direction:column;}
  .chain-step + .chain-step{border-left:none;border-top:1px dashed var(--line-strong);}
  .case-stats{gap:24px;}
  nav.links{display:none;}
  section{padding:64px 0;}
}
@media (max-width: 560px){
  .roles-grid, .vert-grid, .conn-grid, .blog-grid{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
  .tier-row{grid-template-columns:1fr 1fr;row-gap:4px;}
  .tier-row .badge-now, .tier-row .tag-cap{grid-column:1 / -1;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* scroll reveal - see assets/js/site.js. Inert until JS adds reveal-ready to <body>,
   so content still displays normally with JS disabled. */
body.reveal-ready .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
body.reveal-ready .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* ==========================================================================
   Interactive UI Showcase & Feature Visuals
   ========================================================================== */
.showcase-section {
  padding: 40px 0 70px;
}
.showcase-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 4px 18px;
  margin-bottom: 24px;
  justify-content: center;
}
@media (max-width: 768px) {
  .showcase-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}
.showcase-tab {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.showcase-tab:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}
.showcase-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(47, 95, 209, 0.32);
}
.showcase-tab .tab-icon {
  font-size: 1rem;
}
.showcase-window {
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 48px -12px rgba(35, 35, 58, 0.2);
  transition: box-shadow 0.3s ease;
}
.showcase-window-header {
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.window-dots {
  display: flex;
  gap: 6px;
}
.window-dots .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.window-dots .dot-red { background: #FF5F56; }
.window-dots .dot-yellow { background: #FFBD2E; }
.window-dots .dot-green { background: #27C93F; }

.window-title-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window-badge {
  background: var(--line);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.window-url {
  font-size: 0.74rem;
  color: var(--ink-soft);
  opacity: 0.85;
}
.window-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  display: inline-block;
  box-shadow: 0 0 8px var(--good);
}
.live-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--good);
}
.showcase-screens {
  position: relative;
  background: #151624;
}
.showcase-screen {
  display: none;
}
.showcase-screen.active {
  display: block;
  animation: scFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen-media {
  background: #0f101b;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.screen-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.showcase-screen-meta {
  padding: 22px 28px;
  background: var(--paper-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.showcase-screen-meta .meta-text {
  flex: 1 1 560px;
}
.showcase-screen-meta h4 {
  font-size: 1.14rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}
.showcase-screen-meta p {
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 1.5;
}
.showcase-screen-meta .meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.showcase-screen-meta .meta-tags .tag {
  background: var(--paper-sunk);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.showcase-screen-meta .meta-action {
  flex-shrink: 0;
}

/* Feature Shot Enhancement */
.feature-shot:has(img) {
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px -10px rgba(35, 35, 58, 0.16);
  background: var(--paper-raised);
  height: auto;
  aspect-ratio: auto;
}
.feature-shot img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Fast Start Split Grid */
.faststart-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  margin-top: 24px;
}
@media (max-width: 860px) {
  .faststart-split-grid {
    grid-template-columns: 1fr;
  }
}
.faststart-media-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px -12px rgba(35, 35, 58, 0.15);
}
.faststart-media-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.faststart-media-card .card-caption {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}



/* ==========================================================================
   Вариант А: Интерактивен ROI Калкулатор
   ========================================================================== */
.roi-section {
  padding: 80px 0;
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.roi-container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .roi-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.roi-controls {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.roi-control-group {
  margin-bottom: 26px;
}
.roi-control-group:last-child {
  margin-bottom: 0;
}
.roi-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.roi-control-header label {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
}
.roi-val-badge {
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.roi-slider {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--paper-sunk);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(47, 95, 209, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.roi-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.roi-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 6px;
}
.toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}
.toggle-copy .toggle-title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.toggle-copy .toggle-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider-toggle {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  transition: .3s;
  border-radius: 34px;
}
.slider-toggle:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider-toggle {
  background-color: var(--accent);
  border-color: var(--accent);
}
.toggle-switch input:checked + .slider-toggle:before {
  transform: translateX(24px);
}

.roi-results-card {
  background: var(--paper-raised);
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 34px;
  box-shadow: 0 20px 48px -12px rgba(47, 95, 209, 0.2);
  position: relative;
}
.res-kicker {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 20px;
}
.res-highlight {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}
.res-stat {
  display: flex;
  flex-direction: column;
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.stat-number.stat-money {
  color: var(--good);
}
.stat-unit {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}
.stat-desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.35;
}
.res-stat-divider {
  width: 1px;
  height: 70px;
  background: var(--line);
}
.res-breakdown {
  background: var(--paper-sunk);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.breakdown-row strong {
  color: var(--ink);
}
.breakdown-row.total-fee {
  border-top: 1px dashed var(--line-strong);
  padding-top: 10px;
  margin-top: 4px;
  font-weight: 700;
  color: var(--accent);
}
.breakdown-row.total-fee strong {
  font-size: 1.05rem;
  color: var(--accent);
}
.res-cta .res-note {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
}
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   Вариант Б: Сравнителна Таблица
   ========================================================================== */
.comparison-section {
  padding: 80px 0;
}
.comparison-table-wrapper {
  overflow-x: auto;
  margin-top: 40px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}
.comparison-table th, .comparison-table td {
  padding: 20px 22px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.comparison-table th {
  background: var(--paper-sunk);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
.comparison-table th small {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.78rem;
}
.comparison-table th.highlight {
  background: var(--accent-soft);
  border-top: 3px solid var(--accent);
}
.comparison-table td.highlight {
  background: rgba(47, 95, 209, 0.03);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.table-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-badge {
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}
.col-criteria {
  width: 24%;
}
.col-criteria strong {
  font-size: 0.94rem;
  color: var(--ink);
  display: block;
}
.criteria-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}
.col-bizhub {
  width: 28%;
}
.col-legacy, .col-heavy {
  width: 24%;
}
.comp-badge-good {
  color: var(--good);
  font-weight: 700;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 6px;
}
.comp-badge-bad {
  color: var(--bad);
  font-weight: 700;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 6px;
}
.comp-badge-neutral {
  color: #D97706;
  font-weight: 700;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 6px;
}
.comparison-table td p {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   Вариант В: Сценарий „Един ден с BizHub“
   ========================================================================== */
.day-section {
  padding: 80px 0;
  background: var(--paper);
}
.timeline-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
@media (max-width: 1040px) {
  .timeline-journey {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .timeline-journey {
    grid-template-columns: 1fr;
  }
}
.journey-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px -4px rgba(35,35,58,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.journey-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(35,35,58,0.14);
}
.journey-time-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.time-clock {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
}
.time-tag {
  background: var(--paper-sunk);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.journey-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.j-icon {
  font-size: 1.4rem;
}
.j-step-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 6px;
}
.journey-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.35;
}
.journey-body p {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 18px;
}
.j-highlight {
  background: var(--good-soft);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: auto;
}
.j-badge {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--good);
  text-transform: uppercase;
  font-weight: 700;
}
.j-highlight strong {
  display: block;
  font-size: 0.82rem;
  color: var(--good);
  margin-top: 2px;
}

/* --- Strategic BI & Custom Dashboards Banner for ROI Calculator --- */
.roi-power-banner {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px;
  padding: 32px 36px;
  margin: 36px auto 44px;
  max-width: 1080px;
  color: #f8fafc;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}
.roi-power-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #6366f1, #10b981);
}
.power-banner-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.power-banner-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.35;
}
.power-banner-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin-bottom: 24px;
}
.power-banner-text strong {
  color: #ffffff;
}
.power-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 860px) {
  .power-banner-grid {
    grid-template-columns: 1fr;
  }
  .roi-power-banner {
    padding: 24px 20px;
  }
}
.power-col {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.power-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}
.power-col-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.power-col-body strong {
  font-size: 0.92rem;
  color: #ffffff;
  font-weight: 700;
}
.power-col-body span {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.45;
}
.power-banner-footer {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.5;
}

/* Notice block right above the calculator */
.roi-clarity-block {
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 24px 30px;
  margin: 32px auto 36px;
  max-width: 1080px;
  box-shadow: var(--shadow-sm);
}
.clarity-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.clarity-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 10px;
}
.clarity-highlight {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.clarity-highlight strong {
  color: var(--ink);
}
.clarity-highlight u {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Legal Pages (Terms of Service, Privacy Policy, Cookies)
   ========================================================================== */
.legal-page {
  padding: 60px 0 100px;
  background: var(--paper-sunk);
}
.legal-container {
  max-width: 880px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 56px 48px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 768px) {
  .legal-container {
    padding: 32px 20px;
  }
}
.legal-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 26px;
  margin-bottom: 34px;
}
.legal-header h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink);
  margin: 12px 0 8px;
  line-height: 1.25;
}
.legal-meta {
  font-size: 0.88rem;
  color: var(--muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.legal-body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.legal-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 10px;
}
.legal-body p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.legal-body ul, .legal-body ol {
  margin: 0 0 20px 24px;
  padding: 0;
  color: var(--ink-soft);
}
.legal-body li {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 8px;
}
.legal-highlight-box {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
}
.legal-highlight-box h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--accent-ink);
  font-weight: 700;
}
.legal-highlight-box p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ==========================================================================
   Floating Fixed GDPR Cookie Consent Banner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
  padding: 18px 28px;
  color: #f8fafc;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  pointer-events: none;
}
.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cookie-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}
.cookie-banner-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}
.cookie-banner-text h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
}
.cookie-banner-text p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0;
}
.cookie-banner-text a {
  color: #38bdf8;
  text-decoration: underline;
  font-weight: 600;
}
.cookie-banner-text a:hover {
  color: #7dd3fc;
}
.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cookie-btn-accept {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}
.cookie-btn-accept:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.5);
}
.cookie-btn-necessary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}
.cookie-btn-necessary:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 860px) {
  .cookie-banner {
    padding: 16px 20px;
  }
  .cookie-banner-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .cookie-banner-actions {
    justify-content: stretch;
  }
  .cookie-btn {
    flex: 1;
    justify-content: center;
  }
}