/* ============================================================================
   MIHOVIL IVA d.o.o. — knjigovodstvo Zagreb
   Direct-response lander. Brand: crimson #B82E3D (sampled from logo pixels),
   Playfair Display (matches the serif M) + Poppins (already on their site).
   ========================================================================== */

/* ---- Self-hosted brand fonts (latin + latin-ext → đ Đ ć č ž š render) ---- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfair-display-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfair-display-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------------------------------- tokens -------------------------------- */
:root{
  --crimson:#B82E3D;
  --crimson-dark:#8E1F2C;
  --crimson-deep:#840628;
  --crimson-tint:#FBF1F2;
  --crimson-line:#F0D6D9;
  --ink:#16181D;
  --ink-2:#2C3038;
  --grey:#5C616B;
  --grey-2:#868C97;
  --paper:#F8F9FB;
  --white:#fff;
  --line:#E4E6EB;
  --ok:#1F7A4D;

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap:1180px;
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(22,24,29,.04), 0 8px 28px rgba(22,24,29,.07);
  --shadow-lg:0 2px 4px rgba(22,24,29,.05), 0 24px 60px rgba(22,24,29,.13);
}

/* ---------------------------------- reset --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:700; line-height:1.14; letter-spacing:-.012em; text-wrap:balance}
p{margin:0; text-wrap:pretty}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.section{padding:82px 0}
.section--tight{padding:58px 0}
.section--paper{background:var(--paper)}
.section--white{background:var(--white)}

.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:14px;
}
.sec-head{max-width:78ch; margin-bottom:44px}
.sec-head h2{font-size:clamp(28px,4.1vw,44px); line-height:1.13}
.sec-head .lead{margin-top:16px; color:var(--grey); font-size:clamp(16px,1.9vw,18.5px)}

/* ---- reveal: progressive enhancement, never hides content without JS ------ */
.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none}
  html{scroll-behavior:auto}
}

/* --------------------------------- buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 30px; border:0; border-radius:100px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:16.5px; letter-spacing:-.005em;
  text-decoration:none; transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn--primary{background:var(--crimson); color:#fff; box-shadow:0 10px 24px rgba(184,46,61,.26)}
.btn--primary:hover{background:var(--crimson-dark); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink); background:#fff}
.btn--wa{background:#1FA855; color:#fff}
.btn--wa:hover{background:#17843F}
.btn--block{width:100%}

/* --------------------------------- topbar --------------------------------- */
.topbar{
  position:sticky; top:0; z-index:60; background:rgba(248,249,251,.9);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line);
}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px}
.topbar__logo{display:flex; align-items:center}
.topbar__logo img{height:44px; width:auto}
.topbar__right{display:flex; align-items:center; gap:12px}
.topbar__tel{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-weight:600; font-size:15.5px; color:var(--ink); white-space:nowrap;
}
.topbar__tel svg{flex:0 0 auto; color:var(--crimson)}
.topbar .btn{min-height:44px; padding:0 20px; font-size:15px}

/* ---------------------------------- hero ---------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--white)}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(104deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.955) 44%, rgba(255,255,255,.80) 66%, rgba(255,255,255,.62) 100%),
    url('img/arhiva-blur.webp') center/cover no-repeat;
  z-index:0;
}
.hero__in{position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:start; padding:64px 0 76px}
.hero__copy{padding-top:8px}
.hero h1{font-size:clamp(34px,5.2vw,58px); line-height:1.07; max-width:15ch}
.hero h1 em{font-style:normal; color:var(--crimson)}
.hero__sub{margin-top:20px; font-size:clamp(17px,2.1vw,20px); color:var(--ink-2); max-width:50ch; line-height:1.55}
.hero__pills{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px}
.pill{
  display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:100px;
  background:var(--crimson-tint); border:1px solid var(--crimson-line);
  font-size:13.5px; font-weight:600; color:var(--crimson-deep); letter-spacing:-.003em;
}
.hero__points{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px; max-width:52ch}
.hero__points li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; font-size:16.5px; color:var(--ink-2)}
.hero__points .tick{
  flex:0 0 auto; width:23px; height:23px; border-radius:50%; background:var(--crimson);
  display:grid; place-items:center; margin-top:3px;
}
.hero__points .tick svg{width:13px; height:13px; color:#fff}
.hero__award{
  margin-top:28px; display:inline-grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  background:#fff; border:1px solid var(--crimson-line); border-radius:14px;
  padding:12px 20px 12px 12px; box-shadow:var(--shadow); max-width:min(100%,430px);
}
.hero__award img{width:52px; height:52px; border-radius:10px; object-fit:cover; object-position:center 18%; flex:0 0 auto}
.hero__award b{display:block; font-size:15px; font-weight:600; line-height:1.3; color:var(--ink)}
.hero__award span{display:block; margin-top:3px; font-size:13.5px; color:var(--grey); line-height:1.4}

/* --------------------------------- form ----------------------------------- */
.formcard{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); border-top:5px solid var(--crimson);
  overflow:hidden; position:sticky; top:96px;
}
.formcard__head{padding:26px 28px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#FDFBFB)}
.formcard__head h2{font-size:24px; line-height:1.2}
.formcard__head p{margin-top:9px; font-size:14.5px; color:var(--grey); line-height:1.5}
.formcard__body{padding:24px 28px 28px}
.field{margin-bottom:15px}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--ink-2)}
.field label .opt{font-weight:400; color:var(--grey-2)}
.field input,.field select{
  width:100%; min-height:52px; padding:0 15px; border:1.5px solid var(--line); border-radius:11px;
  background:#fff; font-size:16px; transition:border-color .16s ease, box-shadow .16s ease;
}
.field select{padding-right:40px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235C616B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field input:focus,.field select:focus{outline:0; border-color:var(--crimson); box-shadow:0 0 0 3px rgba(184,46,61,.13)}
.field input::placeholder{color:var(--grey-2)}

.pills{display:flex; flex-wrap:wrap; gap:8px}
.pills input{position:absolute; opacity:0; pointer-events:none; width:0; height:0}
.pills label{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; margin:0;
  border:1.5px solid var(--line); border-radius:100px; cursor:pointer;
  font-size:14.5px; font-weight:500; transition:all .16s ease; background:#fff;
}
.pills input:checked + label{background:var(--crimson); border-color:var(--crimson); color:#fff; font-weight:600}
.pills label:hover{border-color:var(--crimson)}

.consent{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; margin:18px 0 20px; font-size:13px; color:var(--grey); line-height:1.5}
.consent input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--crimson); flex:0 0 auto}
.consent a{color:var(--crimson); text-decoration:underline; text-underline-offset:2px}
.consent.attention{animation:shake .4s}
.consent.attention input{outline:2px solid var(--crimson); outline-offset:3px; border-radius:4px}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.form-alt{margin-top:16px; text-align:center; font-size:14px; color:var(--grey)}
.form-alt a{color:var(--crimson); font-weight:600; text-decoration:none}
.form-alt a:hover{text-decoration:underline}
.form-trust{margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color:var(--grey-2)}

/* --------------------------------- logos ---------------------------------- */
.logos{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); padding:26px 0}
.logos__lab{text-align:center; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2); margin-bottom:18px}
.logos__row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(26px,5vw,62px)}
.logos__row img{height:40px; width:auto; opacity:.82; filter:grayscale(1) contrast(1.15); transition:opacity .2s ease, filter .2s ease}
.logos__row img:hover{opacity:1; filter:grayscale(0)}

/* ---------------------------------- pain ---------------------------------- */
.pains{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.pain{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--crimson);
  border-radius:var(--r); padding:26px 26px 24px;
}
.pain__q{font-family:var(--serif); font-size:20px; font-weight:700; line-height:1.28; margin-bottom:10px}
.pain p{font-size:15.5px; color:var(--grey); line-height:1.58}
.pain__tag{
  display:inline-block; margin-top:14px; font-size:12.5px; font-weight:600; color:var(--crimson-deep);
  background:var(--crimson-tint); border-radius:100px; padding:5px 13px;
}

/* ------------------------------- comparison ------------------------------- */
.cmp{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.cmp__row{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.cmp__row:last-child{border-bottom:0}
.cmp__head{background:#FAFAFC}
.cmp__head .cmp__cell{padding:20px 26px; font-family:var(--serif); font-size:18.5px; font-weight:700}
.cmp__cell{padding:22px 26px; font-size:15.8px; line-height:1.55; display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start}
.cmp__cell--them{color:var(--grey); background:#FCFCFD; border-right:1px solid var(--line)}
.cmp__cell--us{color:var(--ink-2); font-weight:500}
.cmp__ic{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px}
.cmp__ic--x{background:#EDEEF1; color:var(--grey-2)}
.cmp__ic--v{background:var(--crimson); color:#fff}
.cmp__ic svg{width:12px; height:12px}
.cmp__head .cmp__cell{display:block}
.cmp__lab{display:block; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:6px; font-family:var(--sans)}
.cmp__lab--them{color:var(--grey-2)}
.cmp__lab--us{color:var(--crimson)}
.cmp__foot{margin-top:20px; font-size:13.5px; color:var(--grey-2); line-height:1.5}

/* --------------------------------- offer ---------------------------------- */
.offer{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.stack{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.stack li{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start}
.stack .tick{flex:0 0 auto; width:27px; height:27px; border-radius:8px; background:var(--crimson-tint); border:1px solid var(--crimson-line); display:grid; place-items:center; margin-top:2px}
.stack .tick svg{width:14px; height:14px; color:var(--crimson)}
.stack b{display:block; font-weight:600; font-size:17px; margin-bottom:3px}
.stack span{color:var(--grey); font-size:15.5px; line-height:1.55}
.offer__media{position:relative}
.offer__media img{border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:3/4; object-fit:cover}
.pricetag{
  position:absolute; left:-20px; bottom:26px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:16px 22px; box-shadow:var(--shadow-lg); max-width:230px;
}
.pricetag b{display:block; font-family:var(--serif); font-size:26px; color:var(--crimson); line-height:1.1}
.pricetag span{display:block; font-size:13px; color:var(--grey); margin-top:5px; line-height:1.45}

/* --------------------------------- proof ---------------------------------- */
.proof{display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center}
.proof__media img{border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 22%}
.proof__body h2{font-size:clamp(27px,3.7vw,40px)}
.proof__body .lead{margin-top:18px; color:var(--grey); font-size:17.5px; line-height:1.65}
.proof__quote{
  margin-top:24px; padding:22px 26px; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--crimson); border-radius:var(--r); font-size:17px; line-height:1.6;
}
.sign{margin-top:20px; display:flex; align-items:center; gap:16px}
.sign img{height:52px; width:auto; opacity:.88}
.sign div b{display:block; font-size:16px}
.sign div span{font-size:14px; color:var(--grey)}
.creds{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.cred{
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:12px;
  background:#fff; border:1px solid var(--line); font-size:14.5px; font-weight:500;
}
.cred b{color:var(--crimson); font-weight:700}

/* --------------------------------- niches --------------------------------- */
.niches{display:flex; flex-wrap:wrap; gap:11px; justify-content:center}
.niche{
  padding:12px 22px; border-radius:100px; background:#fff; border:1px solid var(--line);
  font-size:15.5px; font-weight:500; color:var(--ink-2);
}
.niche--hi{background:var(--crimson); border-color:var(--crimson); color:#fff; font-weight:600}

/* --------------------------------- steps ---------------------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
.step__n{
  width:42px; height:42px; border-radius:12px; background:var(--crimson); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-size:20px; font-weight:700; margin-bottom:16px;
}
.step h3{font-size:19px; margin-bottom:9px}
.step p{font-size:15.5px; color:var(--grey); line-height:1.58}

/* ---------------------------------- faq ----------------------------------- */
.faq{max-width:840px; margin-inline:auto}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:11px; overflow:hidden}
.faq details[open]{border-color:var(--crimson-line); box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer; list-style:none; padding:21px 56px 21px 24px; position:relative;
  font-weight:600; font-size:17px; line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:24px; top:50%; width:11px; height:11px; margin-top:-6px;
  border-right:2.2px solid var(--crimson); border-bottom:2.2px solid var(--crimson);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq .a{padding:0 24px 22px; color:var(--grey); font-size:16px; line-height:1.62}

/* -------------------------------- cta band -------------------------------- */
.cta{position:relative; overflow:hidden; background:var(--ink); color:#fff}
.cta::before{
  content:''; position:absolute; inset:0; opacity:.19;
  background:url('img/ured-city.webp') center/cover no-repeat;
}
.cta::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,24,29,.72), rgba(22,24,29,.92))}
.cta__in{position:relative; z-index:2; text-align:center; padding:84px 0; max-width:760px; margin-inline:auto}
.cta h2{font-size:clamp(29px,4.4vw,46px); color:#fff}
.cta p{margin-top:18px; color:rgba(255,255,255,.82); font-size:18px}
.cta__btns{margin-top:32px; display:flex; flex-wrap:wrap; gap:13px; justify-content:center}
.cta__btns .btn--ghost{color:#fff; border-color:rgba(255,255,255,.3)}
.cta__btns .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.09)}
.cta__note{margin-top:22px; font-size:14px; color:rgba(255,255,255,.6)}

/* --------------------------------- footer --------------------------------- */
.footer{background:var(--white); border-top:1px solid var(--line); padding:52px 0 42px; font-size:15px}
.footer__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px}
.footer img.flogo{height:46px; width:auto; margin-bottom:16px}
.footer h4{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2); margin-bottom:14px}
.footer a{color:var(--ink-2); text-decoration:none; display:block; margin-bottom:9px}
.footer a:hover{color:var(--crimson)}
.footer p{color:var(--grey); line-height:1.6}
.footer__bot{margin-top:38px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13.5px; color:var(--grey-2)}
.footer__bot a{display:inline; margin:0; color:var(--grey-2); text-decoration:underline; text-underline-offset:2px}

/* ------------------------------ sticky mobile ----------------------------- */
.stickybar{display:none}

/* ------------------------------ privacy modal ----------------------------- */
.modal{position:fixed; inset:0; z-index:200; display:none; padding:20px; overflow-y:auto}
.modal[aria-hidden="false"]{display:grid; place-items:center}
.modal__bg{position:fixed; inset:0; background:rgba(22,24,29,.6); backdrop-filter:blur(3px)}
.modal__card{position:relative; z-index:1; background:#fff; border-radius:var(--r-lg); max-width:660px; width:100%; padding:34px; box-shadow:var(--shadow-lg); max-height:86vh; overflow-y:auto}
.modal__card h3{font-size:24px; margin-bottom:14px}
.modal__card p{color:var(--grey); font-size:15px; margin-bottom:12px; line-height:1.6}
.modal__close{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:20px; line-height:1; color:var(--grey)}
.modal__close:hover{border-color:var(--ink); color:var(--ink)}
body.privacy-open{overflow:hidden}

/* ================================ RESPONSIVE ============================== */
@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr; gap:38px; padding:44px 0 56px}
  .formcard{position:static}
  .hero h1{max-width:none}
  .offer,.proof{grid-template-columns:1fr; gap:36px}
  .proof__media{order:2}
  .offer__media img,.proof__media img{aspect-ratio:16/11; max-height:420px}
  .pricetag{left:16px; bottom:16px}
  .steps{grid-template-columns:1fr}
}

@media (max-width:720px){
  body{font-size:16px}
  .section{padding:56px 0}
  .section--tight{padding:42px 0}
  .wrap{padding-inline:18px}
  .sec-head{margin-bottom:32px}

  .topbar__in{min-height:64px}
  .topbar__logo{min-height:44px; align-items:center}
  .topbar__logo img{height:36px}
  .topbar__tel span{display:none}
  .topbar__tel{width:44px; height:44px; justify-content:center; border:1.5px solid var(--line); border-radius:50%}
  .topbar .btn{padding:0 16px; font-size:14.5px}

  .hero__in{padding:32px 0 44px; gap:30px}
  .hero h1{font-size:clamp(29px,7.6vw,38px)}
  .hero__sub{font-size:17px}
  .hero__points li{font-size:15.5px}

  .formcard__head{padding:22px 20px 18px}
  .formcard__body{padding:20px 20px 24px}
  .formcard__head h2{font-size:21px}

  .pains{grid-template-columns:1fr; gap:14px}
  .pain{padding:22px 20px}
  .pain__q{font-size:18.5px}

  /* comparison → stacked pairs, never a squeezed 2-col table */
  .cmp__row{grid-template-columns:1fr}
  .cmp__cell{padding:17px 20px; font-size:15.2px}
  .cmp__cell--them{border-right:0; border-bottom:1px solid var(--line)}
  .cmp__head{display:none}
  .cmp__lab{display:block !important; font-size:11px; margin-bottom:5px}
  .cmp__cell--them .cmp__lab{display:block}

  .logos__row{gap:24px}
  .logos__row img{height:31px}

  .niches{justify-content:flex-start}
  .niche{font-size:14.5px; padding:10px 17px}

  .faq summary{font-size:16px; padding:18px 48px 18px 18px}
  .faq .a{padding:0 18px 19px; font-size:15.4px}

  .cta__in{padding:58px 0}
  .cta__btns .btn{width:100%}

  .footer__grid{grid-template-columns:1fr; gap:28px}
  /* footer links are the only NAP on mobile — give them a real tap target */
  .footer a{min-height:44px; display:flex; align-items:center; margin-bottom:2px}
  .footer__bot a{min-height:44px; display:inline-flex; align-items:center}

  /* nothing under 13px on a phone */
  .eyebrow{font-size:13px}
  .pain__tag{font-size:13px; padding:6px 14px}
  .form-trust{font-size:13px}
  .logos__lab{font-size:13px}
  .cmp__lab{font-size:13px; letter-spacing:.1em}
  .footer h4{font-size:13px}
  .footer__bot{font-size:13.5px}
  .pricetag span{font-size:13.5px}

  /* sticky call/WhatsApp bar — the topbar CTA is redundant here, hide it */
  .topbar .btn--primary{display:none}
  .stickybar{
    display:grid; grid-template-columns:1fr 1fr; gap:9px; position:fixed; z-index:90;
    left:0; right:0; bottom:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  }
  .stickybar .btn{min-height:50px; font-size:15.5px; padding:0 14px}
  body{padding-bottom:76px}
}

@media (max-width:400px){
  .hero h1{font-size:27px}
  .stickybar .btn{font-size:14.5px; gap:6px}
}