/* ============================================================
   Biznis Klinika — production stylesheet
   Single source of truth. Tokens mirror the brand book (v3.0).
   ============================================================ */

:root{
  /* Brand palette — designer guideline (authoritative) */
  --green:#84B46E;   /* PRIMARY */
  --blue:#ADE0ED;    /* PRIMARY */
  --ink:#030404;     /* PRIMARY (black) */
  --white:#FFFFFF;   /* PRIMARY */
  --yellow:#F4B519;  /* SECONDARY */
  --red:#E54E4E;     /* SECONDARY */
  /* Derived utility (legibility / surfaces) */
  --green-deep:#3E6A33; --green-tint:#EFF5EA;
  --blue-deep:#2C7A9E;  --blue-tint:#E9F6FA;
  --border:#E7E9E3; --muted:#6B7168; --paper:#FFFFFF; --paper-2:#FAFBF9;
  /* Type — single family */
  --font:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* Shape */
  --r-card:18px; --r-pill:999px; --r-input:12px;
  --shadow-sm:0 1px 2px rgba(3,4,4,.05),0 1px 3px rgba(3,4,4,.06);
  --shadow-md:0 8px 22px rgba(3,4,4,.07),0 2px 6px rgba(3,4,4,.05);
  --shadow-lg:0 18px 48px rgba(3,4,4,.10),0 6px 14px rgba(3,4,4,.06);
  /* Spacing scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:28px;--s7:40px;--s8:52px;--s9:72px;--s10:96px;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--green-deep);text-decoration:none}
a:hover{text-decoration:underline}
.data{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* Layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
.section{padding:var(--s8) 0}
.section--tight{padding:var(--s7) 0}
@media(max-width:640px){.section{padding:var(--s7) 0}}

/* Type helpers */
.eyebrow{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);display:inline-block;margin-bottom:var(--s4)}
.eyebrow--light{color:rgba(255,255,255,.65)}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.1;font-weight:800}
.h-xl{font-size:clamp(2.4rem,5.5vw,4rem);letter-spacing:-.03em;line-height:1.02}
.h-lg{font-size:clamp(2rem,3.8vw,2.9rem)}
.h-md{font-size:1.35rem;font-weight:700}
.lead{font-size:clamp(1.12rem,1.7vw,1.3rem);color:var(--muted);line-height:1.55}
.muted{color:var(--muted)}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:74px}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;align-items:center;gap:var(--s6);list-style:none}
.nav__links a{color:var(--ink);font-weight:600;font-size:.95rem}
.nav__links a:hover{color:var(--green-deep);text-decoration:none}
.nav__right{display:flex;align-items:center;gap:var(--s4)}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;width:44px;height:44px}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav__toggle span+span{margin-top:5px}
@media(max-width:900px){
  .nav__links,.nav__right .btn{display:none}
  .nav__toggle{display:block}
  .nav__panel{position:fixed;inset:74px 0 auto 0;background:var(--white);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);transform:translateY(-120%);transition:transform .25s ease;padding:var(--s5)}
  .nav__panel.open{transform:translateY(0)}
  .nav__panel ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
  .nav__panel a{display:block;padding:14px 8px;font-weight:600;font-size:1.05rem;color:var(--ink);border-radius:10px}
  .nav__panel a:hover{background:var(--green-tint);text-decoration:none}
  .nav__panel .btn{display:inline-flex;margin-top:var(--s3);width:100%;justify-content:center}
}
@media(min-width:901px){.nav__panel{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:700;font-size:.95rem;line-height:1;padding:14px 26px;border-radius:var(--r-pill);border:1.6px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn--primary{background:var(--green);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn--primary:hover{box-shadow:var(--shadow-md)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:#1a1c1a}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:var(--white)}
.btn--ghost{background:transparent;color:var(--green-deep);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--green)}
.btn--on-ink{background:var(--green);color:var(--ink)}
.btn-row{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:var(--s10) 0 var(--s9)}
.hero__pulse{position:absolute;left:0;right:0;bottom:0;width:100%;height:120px;opacity:.5;pointer-events:none;z-index:0}
.hero__pulse path{stroke:var(--green);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero .wrap{position:relative;z-index:1}
.hero__inner{max-width:760px}
.hero h1{margin-bottom:var(--s5)}
.hero .lead{max-width:56ch;margin-bottom:var(--s6)}
.hero .btn-row{margin-bottom:var(--s7)}
.stats{display:flex;flex-wrap:wrap;gap:var(--s6);border-top:1px solid var(--border);padding-top:var(--s5)}
.stat__n{font-weight:800;font-size:1.8rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block}
.stat__l{font-size:.85rem;color:var(--muted)}
@media(max-width:640px){.hero{padding:var(--s8) 0 var(--s7)}.stats{gap:var(--s5)}}

/* ---------- Section header ---------- */
.sec-head{max-width:64ch;margin-bottom:var(--s6)}
.sec-head .lead{margin-top:var(--s4)}

/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Cards / tiles ---------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5);box-shadow:var(--shadow-sm)}
.tile h3{font-size:1.05rem;font-weight:700;margin-bottom:var(--s2);display:flex;gap:10px;align-items:baseline}
.tile__no{font-weight:800;font-size:.9rem;color:var(--green-deep);font-variant-numeric:tabular-nums}
.tile p{color:var(--muted);font-size:1rem}

/* Arm cards */
.arm{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.arm:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none}
.arm__tag{font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);margin-bottom:var(--s3)}
.arm h3{font-size:1.25rem;margin-bottom:var(--s3)}
.arm p{color:var(--muted);font-size:1rem;flex:1}
.arm__cta{margin-top:var(--s5);font-weight:700;color:var(--ink);display:inline-flex;gap:6px}
.arm:hover .arm__cta{color:var(--green-deep)}

/* ---------- Ink band ---------- */
.band-ink{background:var(--ink);color:var(--white);border-radius:var(--r-card)}
.band-ink .q{font-weight:800;font-size:clamp(1.7rem,3.2vw,2.3rem);letter-spacing:-.02em;line-height:1.18;max-width:22ch}
.band-ink .a{color:rgba(255,255,255,.72);margin-top:var(--s5);max-width:60ch;font-size:1.05rem}
.band-ink .a b{color:var(--green);font-weight:800}
.band-ink__inner{padding:var(--s7) var(--s6)}
@media(max-width:640px){.band-ink__inner{padding:var(--s6) var(--s5)}}

/* ---------- Steps ---------- */
.steps{counter-reset:st;display:grid;gap:var(--s5)}
.step{display:grid;grid-template-columns:56px 1fr;gap:var(--s4);align-items:start;padding:var(--s5) 0;border-top:1px solid var(--border)}
.step:first-child{border-top:0}
.step::before{counter-increment:st;content:counter(st);font-weight:800;font-size:1.4rem;color:var(--green-deep);font-variant-numeric:tabular-nums}
.step h4{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- Closer ---------- */
.closer{text-align:center;background:var(--green-tint);border-radius:var(--r-card);padding:var(--s7) var(--s6)}
.closer h2{max-width:20ch;margin:0 auto var(--s4)}
.closer .lead{max-width:52ch;margin:0 auto var(--s6)}
.closer .btn-row{justify-content:center}

/* ---------- Signal chips ---------- */
.chip-sig{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--white)}
.chip-sig .d{width:10px;height:10px;border-radius:50%}

/* ---------- Fit / not-fit ---------- */
.fit{border-radius:var(--r-card);padding:var(--s5);border:1px solid var(--border);list-style:none}
.fit.yes{background:var(--green-tint)}
.fit.no{background:var(--white)}
.fit h4{font-weight:700;font-size:1rem;margin-bottom:var(--s4)}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{padding:5px 0 5px 26px;position:relative;font-size:.92rem}
.fit.yes li::before{content:"✓";position:absolute;left:0;color:var(--green-deep);font-weight:800}
.fit.no li::before{content:"–";position:absolute;left:0;color:var(--muted);font-weight:800}

/* ---------- Note ---------- */
.note{font-size:.85rem;color:var(--muted);font-style:italic;margin-top:var(--s4)}

/* ---------- Sticky form progress ---------- */
.frc-progress{position:sticky;top:74px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(8px);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s4);box-shadow:var(--shadow-sm)}
.frc-progress__bar{flex:1;height:6px;background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden}
.frc-progress__fill{height:100%;width:0;background:var(--green);border-radius:var(--r-pill);transition:width .18s ease}
.frc-progress__label{font-weight:700;font-size:.85rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){.frc-progress{padding:var(--s2) var(--s4)}.frc-progress__label{font-size:.78rem}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:var(--s3)}
.faq details{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s4) var(--s5);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;padding:var(--s2) 0;font-size:1rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;color:var(--green-deep);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);font-size:.95rem;margin-top:var(--s2);padding-bottom:var(--s2)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:var(--s9) 0 var(--s7)}
.site-footer img{height:34px;margin-bottom:var(--s5)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s6)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-col h5{color:var(--white);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:var(--s4)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:rgba(255,255,255,.7);font-weight:500}
.footer-col a:hover{color:var(--green);text-decoration:none}
.footer-col p{font-size:.95rem;max-width:34ch}
.footer-bottom{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);font-size:.82rem}

/* ---------- A11y / motion ---------- */
:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}