/* ===========================================================
   PRICE MONITOR — landing page styles
   Editorial paper + electric lime · Bricolage / Archivo / mono
   =========================================================== */

:root{
  /* paper canvas */
  --paper:#f3ecdd;
  --paper-2:#fbf7ee;
  --paper-3:#eaded0;
  --paper-4:#e2d3bd;

  /* ink */
  --ink:#15120c;
  --ink-2:#2c2820;
  --dim:#6a6151;
  --dim-2:#8b8170;

  /* signal colors (accent is tweakable) */
  --accent:#c8ef33;
  --accent-ink:#4f6300;
  --accent-deep:#3a4a00;
  --accent-soft:rgba(200,239,51,.22);

  --coral:#e0412a;
  --coral-soft:rgba(224,65,42,.12);
  --green:#2f7d2f;
  --green-soft:rgba(47,125,47,.13);

  --line:rgba(21,18,12,.14);
  --line-2:rgba(21,18,12,.07);

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px;

  --shadow-card:0 18px 40px -24px rgba(21,18,12,.45);
  --shadow-pop:0 30px 70px -30px rgba(21,18,12,.55);

  --maxw:1200px;
  --pad:40px;

  --f-display:"Bricolage Grotesque", serif;
  --f-body:"Archivo", system-ui, sans-serif;
  --f-mono:"Spline Sans Mono", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.narrow{max-width:840px; margin-left:auto; margin-right:auto}
.mono{font-family:var(--f-mono)}
section{padding:84px 0; position:relative}
.divider-wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.divider{height:1px; background:var(--line); border:none; margin:0}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--accent-ink);
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--accent-ink); display:inline-block}
.sec-head{max-width:780px; margin-bottom:44px}
h1{margin:0}
h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(32px,4.6vw,56px); line-height:1.02; letter-spacing:-1.5px;
  margin:16px 0 0; text-wrap:balance;
}
h2 .hl{color:var(--accent-ink); position:relative}
.lead{font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); max-width:640px; margin:22px 0 0}
.lead b{color:var(--accent-ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--f-mono); font-weight:600; font-size:15px; letter-spacing:.3px;
  padding:17px 28px; border-radius:var(--r-sm); text-decoration:none;
  border:2px solid var(--ink); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  white-space:nowrap;
}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--ink); color:var(--paper); box-shadow:6px 6px 0 var(--accent)}
.btn-primary:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--accent)}
.btn-accent{background:var(--accent); color:var(--ink); border-color:var(--ink); box-shadow:6px 6px 0 var(--ink)}
.btn-accent:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--ink)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none}
.btn-ghost:hover{border-color:var(--ink); background:var(--paper-2)}
.btn-sm{padding:11px 18px; font-size:13px; border-width:2px}
.cta-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:30px}
.cta-note{font-family:var(--f-mono); font-size:12.5px; color:var(--dim); letter-spacing:.2px}
.cta-note b{color:var(--ink)}

/* friction removers */
.frictions{list-style:none; display:flex; flex-wrap:wrap; gap:9px 18px; padding:0; margin:24px 0 0}
.frictions li{font-family:var(--f-mono); font-size:12.5px; color:var(--dim); display:flex; align-items:center; gap:7px}
.frictions li::before{content:""; width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6300' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}

/* ===========================================================
   STICKY NAV
   =========================================================== */
.topbar{position:sticky; top:0; z-index:600; background:rgba(243,236,221,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .inner{max-width:var(--maxw); margin:0 auto; padding:14px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:21px; letter-spacing:-.5px}
a.brand{text-decoration:none; color:inherit; cursor:pointer; transition:opacity .15s}
a.brand:hover{opacity:.7}
.brand .dot{width:30px;height:30px;border-radius:50%; background:var(--ink); display:grid; place-items:center; position:relative}
.brand .dot::before{content:""; width:10px;height:10px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(200,239,51,.35)}
.brand .dot::after{content:""; position:absolute; width:20px;height:20px;border-radius:50%; border:1.5px solid var(--accent); animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}
.brand b{color:var(--accent-ink)}
.brand-mark{width:48px;height:auto;flex:0 0 auto;display:block;shape-rendering:geometricPrecision}
.brand-mark .pw{stroke-dasharray:72; animation:tagping 2.4s ease-in-out infinite}
@keyframes tagping{0%,100%{opacity:1}50%{opacity:.55}}
.brand:hover .brand-mark .pw{animation:ekg 1.5s ease-in-out infinite}
@keyframes ekg{0%{stroke-dashoffset:72}45%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.topnav{display:flex; align-items:center; gap:26px}
.topnav a.lnk{font-family:var(--f-mono); font-size:13px; color:var(--dim); text-decoration:none; transition:color .15s}
.topnav a.lnk:hover{color:var(--ink)}
.scrollbar-prog{position:absolute; left:0; bottom:-1px; height:2px; background:var(--accent); width:0}
@media (max-width:860px){.topnav .lnk{display:none}}

/* ===========================================================
   HERO
   =========================================================== */
.hero{padding:92px 0 80px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; top:-120px; right:-180px; width:560px; height:560px; z-index:0;
  background:radial-gradient(circle, var(--accent-soft), transparent 60%); filter:blur(10px)}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 668px; gap:48px; align-items:center; max-width:1340px; margin:0 auto}
.badge-live{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; font-weight:600;
  letter-spacing:.5px; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); padding:7px 14px; border-radius:30px; margin-bottom:22px}
.badge-live .pulse{width:8px;height:8px;border-radius:50%; background:var(--green); position:relative}
.badge-live .pulse::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--green); animation:ping 2s ease-out infinite}
.hero h1{font-family:var(--f-display); font-weight:700; font-size:clamp(44px,6vw,82px); line-height:.96; letter-spacing:-2.6px; text-wrap:balance}
.hero h1 .hl{color:var(--accent-ink)}
.hero .rhythm{font-family:var(--f-mono); font-weight:500; color:var(--dim); font-size:clamp(13px,1.4vw,16px); letter-spacing:.2px; margin:20px 0 0; line-height:1.5}
@media (min-width:1320px){ .hero .rhythm{white-space:nowrap; font-size:14px} }
.hero .lede{font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); margin:20px 0 0; max-width:520px}
.hero .lede b{color:var(--accent-ink)}

/* ---------- live demo (browser mock) ---------- */
.demo{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-pop); transform:rotate(.5deg)}
.demo .chrome{background:var(--paper-3); padding:11px 14px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line)}
.demo .chrome i{width:11px;height:11px;border-radius:50%; display:inline-block}
.demo .chrome .url{margin-left:12px; flex:1; font-family:var(--f-mono); font-size:11px; color:var(--ink-2); background:#fff; padding:6px 12px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.demo .chrome .url .lock{width:12px;height:12px; color:var(--green); flex:0 0 auto}
.demo .chrome .url .path{color:var(--dim)}
.demo .chrome .chrome-chip{flex:0 0 auto; display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10px; font-weight:600; color:var(--accent-deep); background:var(--accent-soft); border:1px solid rgba(79,99,0,.25); padding:5px 9px; border-radius:20px}
.demo .chrome .chrome-chip .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green); animation:blink 1.8s ease-in-out infinite}
.demo .demo-title{display:flex; align-items:center; justify-content:space-between; padding:13px 16px 9px; gap:10px}
.demo .demo-title b{font-family:var(--f-display); font-weight:700; font-size:15px}
.demo .wk{font-family:var(--f-mono); font-size:10.5px; color:var(--dim); background:var(--paper); padding:4px 9px; border-radius:20px; border:1px solid var(--line)}
table.sheet{width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:12.5px; background:#fff}
table.sheet th{background:#f4f1ea; color:var(--dim); font-weight:600; text-align:right; padding:9px 12px; border-bottom:1.5px solid var(--line); font-size:10px; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap}
table.sheet th:first-child{text-align:left}
table.sheet td{padding:11px 12px; text-align:right; border-bottom:1px solid var(--line-2); color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
table.sheet td:first-child{text-align:left; font-family:var(--f-body); font-weight:600; color:var(--ink); font-size:13px}
table.sheet tr:last-child td{border-bottom:none}
table.sheet .you{background:var(--accent-soft); font-weight:700; color:var(--ink)}
table.sheet td.lo{color:var(--green); font-weight:700}
table.sheet td.hi{color:var(--coral); font-weight:700}
.pos{font-family:var(--f-mono); font-size:9.5px; font-weight:600; padding:4px 8px; border-radius:20px; white-space:nowrap; letter-spacing:.2px}
.pos.win{background:var(--green-soft); color:var(--green)}
.pos.mid{background:rgba(21,18,12,.07); color:var(--dim)}
.pos.bad{background:var(--coral-soft); color:var(--coral)}
.demo-foot{font-family:var(--f-mono); font-size:10px; color:var(--dim); padding:10px 14px; background:#f4f1ea; text-align:center; letter-spacing:.3px; display:flex; align-items:center; justify-content:center; gap:8px; border-top:1px solid var(--line)}
.demo-foot .live-dot{width:7px;height:7px;border-radius:50%;background:var(--green); animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ===========================================================
   MARQUEE / SECTORS
   =========================================================== */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); padding:20px 0; overflow:hidden; position:relative}
.marquee .lbl{position:absolute; left:0; top:0; bottom:0; z-index:3; display:flex; align-items:center; padding:0 18px 0 var(--pad);
  background:var(--paper-2); font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.marquee .lbl::after{content:""; position:absolute; right:-44px; top:0; bottom:0; width:44px; background:linear-gradient(90deg,var(--paper-2),rgba(251,247,238,0)); pointer-events:none}
.marquee::after{content:""; position:absolute; right:0; top:0; bottom:0; width:60px; z-index:2; background:linear-gradient(270deg,var(--paper-2),rgba(251,247,238,0)); pointer-events:none}
.marquee-track{display:flex; gap:42px; width:max-content; animation:scroll 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.sector{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:600; font-size:19px; color:var(--ink); opacity:.55; white-space:nowrap}
.sector svg{width:20px;height:20px; color:var(--accent-ink)}

/* ===========================================================
   ROI CALCULATOR
   =========================================================== */
.calc-sec{background:var(--ink); color:var(--paper); position:relative; overflow:hidden}
.calc-sec::before{content:""; position:absolute; top:-160px; left:-120px; width:480px; height:480px;
  background:radial-gradient(circle, rgba(200,239,51,.16), transparent 62%); filter:blur(10px)}
.calc-sec .eyebrow{color:var(--accent)}
.calc-sec .eyebrow::before{background:var(--accent)}
.calc-sec h2{color:var(--paper)}
.calc-sec h2 .hl{color:var(--accent)}
.calc-sec .lead{color:rgba(243,236,221,.72)}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:stretch; margin-top:44px; position:relative; z-index:1}
.calc-card{background:rgba(243,236,221,.05); border:1px solid rgba(243,236,221,.16); border-radius:var(--r-lg); padding:34px}
.calc-card .ct{font-family:var(--f-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(243,236,221,.6); margin-bottom:26px}
.field{margin-bottom:26px}
.field .frow{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.field label{font-size:14.5px; color:rgba(243,236,221,.85)}
.field .fval{font-family:var(--f-mono); font-weight:700; font-size:17px; color:var(--accent)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:rgba(243,236,221,.2); outline:none; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px;height:22px;border-radius:50%; background:var(--accent); border:3px solid var(--ink); box-shadow:0 0 0 1px var(--accent); cursor:pointer; transition:transform .12s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%; background:var(--accent); border:3px solid var(--ink); cursor:pointer}
.field .fhint{font-family:var(--f-mono); font-size:11px; color:rgba(243,236,221,.45); margin-top:9px}

/* result side */
.calc-result{display:flex; flex-direction:column; justify-content:center; background:var(--accent); color:var(--ink); border-radius:var(--r-lg); padding:38px 34px; border:1px solid var(--accent)}
.calc-result .rl{font-family:var(--f-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-deep)}
.calc-result .big{font-family:var(--f-display); font-weight:700; font-size:clamp(44px,6vw,76px); line-height:.95; letter-spacing:-2.5px; margin:10px 0 4px; font-variant-numeric:tabular-nums}
.calc-result .per{font-family:var(--f-mono); font-size:14px; color:var(--accent-deep)}
.calc-result .yr{margin-top:22px; padding-top:20px; border-top:1.5px solid rgba(21,18,12,.18); display:flex; justify-content:space-between; align-items:baseline}
.calc-result .yr span{font-size:13.5px; color:rgba(21,18,12,.7)}
.calc-result .yr b{font-family:var(--f-mono); font-weight:700; font-size:22px; font-variant-numeric:tabular-nums}
.calc-result .rcta{margin-top:26px}
.calc-result .btn-primary{box-shadow:5px 5px 0 var(--ink); border-color:var(--ink); width:100%; justify-content:center}
.calc-result .btn-primary:hover{box-shadow:7px 7px 0 var(--ink)}
.calc-disclaimer{font-family:var(--f-mono); font-size:11px; color:rgba(243,236,221,.4); margin-top:24px; text-align:center; position:relative; z-index:1}

/* ===========================================================
   COUNTERS STRIP
   =========================================================== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--paper-2)}
.stat{padding:34px 26px; border-right:1px solid var(--line); text-align:center}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--f-display); font-weight:700; font-size:clamp(34px,4vw,48px); color:var(--accent-ink); letter-spacing:-1.5px; line-height:1; font-variant-numeric:tabular-nums}
.stat .n .suf{font-size:.55em}
.stat p{margin:10px 0 0; font-family:var(--f-mono); font-size:11.5px; color:var(--dim); letter-spacing:.5px; text-transform:uppercase}

/* ===========================================================
   3 STEPS
   =========================================================== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
.step{padding:34px 30px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-2); position:relative; overflow:hidden}
.step .sn{font-family:var(--f-display); font-weight:700; font-size:64px; color:transparent; -webkit-text-stroke:2px var(--accent-ink); line-height:1; letter-spacing:-3px; display:block; margin-bottom:16px}
.step h4{font-family:var(--f-display); font-weight:700; font-size:22px; margin:0 0 9px; letter-spacing:-.5px}
.step p{margin:0; font-size:15px; color:var(--dim)}
.step .ico{position:absolute; top:30px; right:28px; width:26px; height:26px; color:var(--accent-ink); opacity:.4}
.fric-line{text-align:center; font-family:var(--f-mono); font-size:15px; color:var(--ink); margin:34px 0 0; letter-spacing:.2px}
.fric-line b{color:var(--accent-ink)}

/* ===========================================================
   COST OF INACTION (dark)
   =========================================================== */
.cost{background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:56px}
.cost .eyebrow{color:var(--coral)} .cost .eyebrow::before{background:var(--coral)}
.cost h2{color:var(--paper)} .cost h2 .hl{color:var(--coral)}
.cost .lead{color:rgba(243,236,221,.72); max-width:720px}
.cost-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(243,236,221,.14); border:1px solid rgba(243,236,221,.14); border-radius:var(--r-md); overflow:hidden; margin-top:40px}
.cost-card{background:var(--ink); padding:32px 28px}
.cost-card .ci{width:34px;height:34px; color:var(--coral); margin-bottom:18px}
.cost-card .ci-kc{display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:25px; letter-spacing:-1px; line-height:1}
.cost-card .ct{font-family:var(--f-display); font-weight:700; font-size:19px; margin:0 0 8px}
.cost-card p{margin:0; font-size:14.5px; color:rgba(243,236,221,.62)}

/* ===========================================================
   UNIQUE MECHANISM
   =========================================================== */
.mech{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
.mcard{border:1px solid var(--line); border-radius:var(--r-md); padding:30px; background:var(--paper-2); position:relative}
.mcard.us{border:2px solid var(--accent-ink); background:linear-gradient(180deg,var(--accent-soft),transparent 80%)}
.mcard .mn{font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase}
.mcard.us .mn{color:var(--accent-ink)}
.mcard h4{font-family:var(--f-display); font-weight:700; font-size:21px; margin:14px 0 9px; letter-spacing:-.5px}
.mcard p{margin:0; font-size:14.5px; color:var(--dim)}
.mcard .verdict{display:flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--f-mono); font-size:12.5px; font-weight:600}
.mcard .verdict.bad{color:var(--coral)}
.mcard .verdict.good{color:var(--green)}

/* ===========================================================
   PRIVATE LABEL / SUBSTITUTE MATCHING
   =========================================================== */
.pl-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:50px; align-items:center; margin-top:8px}
.pl-points{list-style:none; padding:0; margin:28px 0 0}
.pl-points li{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line)}
.pl-points li:last-child{border-bottom:1px solid var(--line)}
.pl-points .pk{flex:0 0 auto; width:26px;height:26px; border-radius:50%; background:var(--accent); display:grid; place-items:center; color:var(--ink)}
.pl-points .pk svg{width:14px;height:14px}
.pl-points .pt b{display:block; font-size:15.5px; margin-bottom:2px}
.pl-points .pt span{font-size:14px; color:var(--dim)}

/* grouping diagram */
.group-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-card)}
.group-card .gh{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
.group-card .gh .gt{font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim)}
.group-card .gh .gtag{font-family:var(--f-mono); font-size:10.5px; font-weight:600; color:var(--accent-deep); background:var(--accent); padding:4px 10px; border-radius:20px}
.yourprod{display:flex; align-items:center; gap:16px; padding:18px; border:2px solid var(--ink); border-radius:var(--r-md); background:#fff; position:relative}
.yourprod .thumb{width:52px;height:52px;border-radius:10px; background:var(--ink); display:grid; place-items:center; color:var(--accent); flex:0 0 auto}
.yourprod .thumb svg{width:26px;height:26px}
.thumb-slot{border:1px solid var(--line); background:var(--paper-3); border-radius:10px; overflow:hidden; color:var(--dim); font-family:var(--f-mono); font-size:9px}
.yourprod .pi b{display:block; font-size:16px; font-family:var(--f-display); font-weight:700}
.yourprod .pi span{font-family:var(--f-mono); font-size:11px; color:var(--dim)}
.yourprod .price{margin-left:auto; font-family:var(--f-mono); font-weight:700; font-size:20px; text-align:right}
.yourprod .price small{display:block; font-size:10px; font-weight:500; color:var(--accent-ink)}
.group-connector{height:26px; width:2px; background:var(--line); margin:0 auto; position:relative}
.group-connector::after{content:"≈ alternativy na trhu"; position:absolute; left:18px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--f-mono); font-size:10.5px; color:var(--dim); letter-spacing:.5px}
.alt-list{display:flex; flex-direction:column; gap:9px}
.alt{display:flex; align-items:center; gap:13px; padding:13px 16px; border:1px solid var(--line); border-radius:10px; background:#fff}
.alt .adot{width:9px;height:9px;border-radius:50%; flex:0 0 auto}
.alt .an{font-size:14px; font-weight:600}
.alt .as{font-family:var(--f-mono); font-size:11px; color:var(--dim); margin-left:2px}
.alt .ap{margin-left:auto; font-family:var(--f-mono); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums}
.alt .ap.lo{color:var(--green)} .alt .ap.hi{color:var(--coral)}

/* ===========================================================
   REPORT SHOWCASE
   =========================================================== */
.report-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:stretch; margin-top:8px}
.panel{border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-2); overflow:hidden; display:flex; flex-direction:column}
.panel .ph{padding:15px 22px; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--dim); display:flex; justify-content:space-between; align-items:center}
.panel .ph b{color:var(--ink)}
.chart{padding:24px; flex:1}
.chart svg{width:100%; height:auto; display:block}
/* interactive report */
.rep-tabs{display:flex; flex-wrap:wrap; gap:8px; padding:16px 22px 4px}
.rep-chip{font-family:var(--f-mono); font-size:11.5px; color:var(--dim); background:var(--paper); border:1px solid var(--line); padding:7px 12px; border-radius:20px; cursor:pointer; transition:all .14s; white-space:nowrap}
.rep-chip:hover{border-color:var(--ink); color:var(--ink)}
.rep-chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.rep-stats{display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid var(--line)}
.rep-stats .rs{padding:16px 18px; border-right:1px solid var(--line)}
.rep-stats .rs:last-child{border-right:none}
.rep-stats .rs .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.rep-stats .rs .v{font-family:var(--f-mono); font-size:18px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.rep-stats .rs .pos{font-size:9.5px}
.chart svg .rep-dot{transition:none}
.legend{display:flex; gap:22px; margin-top:16px; font-family:var(--f-mono); font-size:12px; color:var(--dim)}
.legend i{display:inline-block; width:16px; height:3px; vertical-align:middle; margin-right:7px; border-radius:2px}
.mail{padding:20px 22px}
.mail .from{font-family:var(--f-mono); font-size:11px; color:var(--dim); margin-bottom:5px}
.mail .subj{font-family:var(--f-display); font-weight:700; font-size:18px; margin-bottom:6px; letter-spacing:-.3px}
.mail .mail-intro{font-size:13px; color:var(--dim); margin-bottom:8px}
.mail .line{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:13.5px}
.mail .line .lt{display:flex; align-items:center; gap:9px}
.mail .line .d{font-family:var(--f-mono); font-weight:700; white-space:nowrap; color:var(--ink)}
.mail .tag{font-family:var(--f-mono); font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:3px 7px; border-radius:5px; flex:0 0 auto}
.mail .tag.good{background:var(--green-soft); color:var(--green)}
.mail .tag.bad{background:var(--coral-soft); color:var(--coral)}
.mail .tag.neu{background:rgba(21,18,12,.08); color:var(--dim)}
.mail .alert{margin-top:16px; background:var(--coral-soft); border-left:3px solid var(--coral); padding:13px 15px; font-size:13.5px; border-radius:0 8px 8px 0}
.mail .alert b{color:var(--coral)}

/* ===========================================================
   VALUE PILLARS
   =========================================================== */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px}
.pillar{border:1px solid var(--line); border-radius:var(--r-md); padding:30px 26px; background:var(--paper-2)}
.pillar .pic{width:42px;height:42px;border-radius:10px; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent-ink); margin-bottom:18px}
.pillar .pic svg{width:22px;height:22px}
.pillar h4{font-family:var(--f-display); font-weight:700; font-size:19px; margin:0 0 8px; letter-spacing:-.4px}
.pillar p{margin:0; font-size:14px; color:var(--dim)}

/* ===========================================================
   OFFER STACK
   =========================================================== */
.stack{border:2px solid var(--ink); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); box-shadow:10px 10px 0 var(--accent)}
.stack-head{background:var(--ink); color:var(--paper); padding:26px 34px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px}
.stack-head .t{font-family:var(--f-display); font-size:23px; font-weight:700; letter-spacing:-.5px}
.stack-head .h{font-family:var(--f-mono); font-size:11px; color:var(--accent); letter-spacing:1px; text-transform:uppercase}
.stack-row{display:flex; justify-content:space-between; align-items:center; gap:18px; padding:19px 34px; border-bottom:1px dashed var(--line); transition:background .15s}
.stack-row:hover{background:var(--paper-3)}
.stack-row .l{display:flex; gap:15px; align-items:flex-start}
.stack-row .chk{flex:0 0 auto; width:24px;height:24px;border-radius:50%; background:var(--accent); display:grid; place-items:center; color:var(--ink); margin-top:1px}
.stack-row .chk svg{width:13px;height:13px}
.stack-row .name{font-weight:600; font-size:15.5px}
.stack-row .name small{display:block; font-weight:400; color:var(--dim); font-size:13.5px; margin-top:3px; max-width:46ch}
.stack-row .val{font-family:var(--f-mono); font-size:14px; color:var(--dim); white-space:nowrap}
/* group label (Jednorázově / Každý měsíc) */
.stack-group{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 34px; background:var(--paper-3); border-bottom:1px solid var(--line)}
.stack-group .gl{font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:9px}
.stack-group .gl svg{width:15px;height:15px; color:var(--accent-ink)}
.stack-group .gh{font-family:var(--f-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--dim)}
/* per-group subtotal */
.stack-subtotal{display:flex; justify-content:space-between; align-items:baseline; padding:16px 34px; border-bottom:1px solid var(--line); background:var(--paper-2)}
.stack-subtotal .lbl{font-family:var(--f-mono); font-size:12px; letter-spacing:.5px; color:var(--dim)}
.stack-subtotal .amt{font-family:var(--f-mono); font-size:17px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.stack-price{padding:38px 36px; text-align:center; background:var(--accent); color:var(--ink)}
.stack-price .anchor{font-family:var(--f-mono); font-size:14px; color:var(--accent-deep)}
.stack-price .anchor s{text-decoration-color:var(--coral); text-decoration-thickness:2px; font-weight:700}
.stack-price .lbl{font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent-deep); margin-top:14px}
.stack-price .amt{font-family:var(--f-display); font-weight:700; font-size:clamp(42px,6.5vw,68px); letter-spacing:-2px; line-height:1; margin:4px 0 6px}
.stack-price .amt span{font-size:20px; font-family:var(--f-mono); font-weight:600}
.stack-price .note{font-family:var(--f-mono); font-size:12.5px; color:var(--accent-deep); max-width:42ch; margin:0 auto}
.stack-price .btn{margin-top:24px}

/* ===========================================================
   BONUSES
   =========================================================== */
.bonus{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:14px}
.bcard{border:1.5px solid var(--accent-ink); border-radius:var(--r-md); padding:30px 26px; background:linear-gradient(180deg,var(--accent-soft),transparent 70%); position:relative}
.bcard .flag{position:absolute; top:-12px; left:24px; background:var(--accent-ink); color:#fff; font-family:var(--f-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:5px 11px; border-radius:3px}
.bcard h4{font-family:var(--f-display); font-weight:700; font-size:19px; margin:12px 0 8px; letter-spacing:-.4px}
.bcard p{margin:0 0 14px; font-size:14px; color:var(--dim)}
.bcard .v{font-family:var(--f-mono); font-size:12.5px; color:var(--accent-ink); font-weight:600}
.bcard .v s{color:var(--dim); text-decoration-color:var(--coral)}

/* ===========================================================
   FOUNDER STORY
   =========================================================== */
.founder{display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start}
.founder-side{position:sticky; top:96px}
.founder-photos{display:flex; gap:0}
.founder-photos .founder-photo{border:3px solid var(--paper); box-shadow:0 6px 18px -8px rgba(21,18,12,.4)}
img.founder-photo{width:88px; height:88px; border-radius:50%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.02)}
.founder-photos .founder-photo:nth-child(2){margin-left:-18px}
.founder-meta{margin-top:18px}
.founder-meta b{display:block; font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:-.5px}
.founder-meta span{display:block; font-family:var(--f-mono); font-size:12.5px; color:var(--dim)}
.founder-meta .founder-co{color:var(--accent-ink); font-weight:600}
.founder-quote{margin-top:22px; padding-left:16px; border-left:3px solid var(--accent); font-family:var(--f-display); font-style:normal; font-weight:500; font-size:17px; line-height:1.3; color:var(--ink-2); letter-spacing:-.3px}
.founder-letter .eyebrow{margin-bottom:10px}
.founder-letter h2{margin-top:0}
.founder-open{font-family:var(--f-display); font-weight:500; font-size:clamp(20px,2.1vw,26px); line-height:1.32; letter-spacing:-.5px; color:var(--ink); margin:22px 0 0; text-wrap:pretty}
.founder-rest{margin-top:6px}
.founder-rest[hidden]{display:none}
.founder-rest p{font-size:16px; color:var(--ink-2); margin:18px 0 0; max-width:62ch}
.founder-rest .founder-sign{font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--ink); margin-top:24px}
.read-more{margin-top:24px; display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-weight:600; font-size:14px; color:var(--ink); background:var(--paper-2); border:2px solid var(--ink); padding:13px 22px; border-radius:var(--r-sm); cursor:pointer; transition:transform .15s, box-shadow .15s; box-shadow:4px 4px 0 var(--accent)}
.read-more:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--accent)}
.read-more .rm-ico{transition:transform .2s}
.read-more[aria-expanded="true"] .rm-ico{transform:rotate(180deg)}

/* ===========================================================
   GUARANTEE
   =========================================================== */
.guarantee{border:none; border-radius:var(--r-xl); padding:52px 56px; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; display:flex; align-items:center; gap:46px; box-shadow:12px 12px 0 var(--accent)}
.guarantee::before{content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; background:radial-gradient(circle, rgba(200,239,51,.16), transparent 62%); filter:blur(8px); pointer-events:none}
.g-medallion{position:relative; flex:0 0 auto; width:148px; height:148px; display:grid; place-items:center}
.g-medallion .g-ring{position:absolute; inset:0; width:100%; height:100%; color:var(--accent); animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.g-medallion .g-core{width:112px; height:112px; border-radius:50%; background:var(--accent); color:var(--ink); display:grid; place-items:center; align-content:center; box-shadow:0 0 0 6px rgba(200,239,51,.18)}
.g-medallion .g-num{font-family:var(--f-display); font-weight:700; font-size:46px; line-height:.9; letter-spacing:-2px}
.g-medallion .g-unit{font-family:var(--f-mono); font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-top:2px}
.g-body{flex:1}
.g-eyebrow{display:inline-block; font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.guarantee h3{font-family:var(--f-display); font-weight:700; font-size:clamp(28px,4.2vw,44px); letter-spacing:-1px; margin:0 0 16px; line-height:1.04; text-wrap:balance; color:var(--paper)}
.guarantee h3 .hl{color:var(--accent)}
.guarantee p{margin:0; font-size:16px; color:rgba(243,236,221,.72); max-width:640px}
@media (prefers-reduced-motion:reduce){.g-medallion .g-ring{animation:none}}

/* ===========================================================
   SOCIAL PROOF
   =========================================================== */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
.quote{border:1px solid var(--line); border-radius:var(--r-md); padding:30px; background:var(--paper-2); display:flex; flex-direction:column}
.quote .stars{color:var(--accent-ink); letter-spacing:3px; font-size:14px; margin-bottom:14px}
.quote p{font-family:var(--f-display); font-weight:500; font-size:18px; margin:0 0 20px; flex:1; line-height:1.35; letter-spacing:-.3px}
.quote .who{display:flex; align-items:center; gap:12px}
.quote .av{width:40px;height:40px;border-radius:50%; background:var(--accent); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; color:var(--ink); font-size:16px}
.quote .who b{display:block; font-size:14px} .quote .who span{font-size:12px; color:var(--dim); font-family:var(--f-mono)}
.ph-note{margin-top:18px; font-family:var(--f-mono); font-size:11px; color:var(--coral); text-align:center; letter-spacing:.4px}

/* ===========================================================
   SCARCITY
   =========================================================== */
.scarcity{display:flex; gap:30px; align-items:center; background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:40px 48px; flex-wrap:wrap}
.scarcity .big-n{font-family:var(--f-display); font-weight:700; font-size:90px; color:var(--accent); line-height:.85; letter-spacing:-4px}
.scarcity .txt{flex:1; min-width:260px}
.scarcity .txt h4{font-family:var(--f-display); font-weight:700; font-size:24px; margin:0 0 8px; letter-spacing:-.5px}
.scarcity .txt p{margin:0; color:rgba(243,236,221,.65); font-size:15px}
.scarcity .slots{display:flex; gap:7px; margin-top:14px}
.scarcity .slot{width:34px;height:6px;border-radius:3px; background:rgba(243,236,221,.2)}
.scarcity .slot.taken{background:var(--coral)}
.scarcity .slot.free{background:var(--accent)}

/* ===========================================================
   TIERS
   =========================================================== */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
.tier{border:1px solid var(--line); border-radius:var(--r-md); padding:32px 28px; background:var(--paper-2); display:flex; flex-direction:column; position:relative}
.tier.feat{background:var(--ink); color:var(--paper); border-color:var(--ink); box-shadow:8px 8px 0 var(--accent); transform:translateY(-8px)}
.tier .flag{position:absolute; top:-12px; left:28px; font-family:var(--f-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); background:var(--accent); padding:5px 11px; border-radius:3px; font-weight:600}
.tier .tn{font-family:var(--f-display); font-weight:700; font-size:25px; margin:0 0 6px; letter-spacing:-.5px}
.tier .twho{font-size:13.5px; color:var(--dim); min-height:42px; margin:0 0 20px}
.tier.feat .twho{color:rgba(243,236,221,.6)}
.tier .price{font-family:var(--f-display); font-size:34px; font-weight:700; letter-spacing:-1.5px; font-variant-numeric:tabular-nums}
.tier .price .cur{font-size:18px; font-family:var(--f-mono); font-weight:600; color:var(--dim)}
.tier.feat .price .cur{color:rgba(243,236,221,.6)}
.tier .price small{display:block; font-size:11.5px; font-weight:500; color:var(--dim); margin-top:6px; font-family:var(--f-mono)}
.tier.feat .price small{color:rgba(243,236,221,.5)}
.tier .spec{list-style:none; padding:0; margin:22px 0 24px; font-family:var(--f-mono); font-size:12.5px; flex:1}
.tier .spec li{padding:10px 0; border-top:1px dashed var(--line); display:flex; justify-content:space-between; gap:12px}
.tier.feat .spec li{border-top:1px dashed rgba(243,236,221,.2)}
.tier .spec li span{color:var(--dim)} .tier.feat .spec li span{color:rgba(243,236,221,.55)}
.tier .spec li b{text-align:right}
.tier .btn{justify-content:center}
.tier.feat .btn-ghost{border-color:rgba(243,236,221,.3); color:var(--paper)}
.tier.feat .btn-ghost:hover{background:rgba(243,236,221,.1); border-color:var(--paper)}

/* ===========================================================
   FAQ
   =========================================================== */
.faq{margin-top:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 0; font-family:var(--f-display); font-weight:600; font-size:20px; display:flex; justify-content:space-between; align-items:center; gap:18px; letter-spacing:-.4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q-ico{flex:0 0 auto; width:26px;height:26px;border-radius:50%; border:1.5px solid var(--accent-ink); display:grid; place-items:center; position:relative; transition:background .2s}
.faq summary .q-ico::before,.faq summary .q-ico::after{content:""; position:absolute; background:var(--accent-ink); transition:transform .25s}
.faq summary .q-ico::before{width:11px;height:2px}
.faq summary .q-ico::after{width:2px;height:11px}
.faq details[open] summary .q-ico{background:var(--accent)}
.faq details[open] summary .q-ico::after{transform:rotate(90deg); opacity:0}
.faq p{margin:0 0 22px; color:var(--dim); font-size:15.5px; max-width:760px}

/* ===========================================================
   FINAL CTA
   =========================================================== */
.final{text-align:center; padding:96px 0; position:relative; overflow:hidden}
.final::after{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 55%)}
.final .inner{position:relative; z-index:1}
.final h2{margin:16px auto 0; max-width:18ch}
.final .lead{margin:22px auto 0}
.final .cta-row{justify-content:center}

/* ===========================================================
   FOOTER
   =========================================================== */
footer{border-top:1px solid var(--line); padding:40px 0; background:var(--paper-2)}
footer .frow{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12.5px; color:var(--dim); letter-spacing:.4px}
footer b{color:var(--ink)}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
/* anti-stall failsafe: force final visible state instantly if transitions are throttled */
.reveal.shown{opacity:1 !important; transform:none !important; transition:none !important}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.13s}.reveal.d3{transition-delay:.2s}.reveal.d4{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .marquee-track,.brand .dot::after,.brand-mark .pw,.brand:hover .brand-mark .pw,.badge-live .pulse::after{animation:none}
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  :root{--pad:28px}
  .hero-grid,.calc-grid,.report-wrap,.pl-grid{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr; gap:28px}
  .founder-side{position:static}
  .demo{transform:none}
  .pl-grid .group-card{order:-1}
  .cost-grid,.mech,.pillars,.bonus,.tiers,.quotes{grid-template-columns:1fr 1fr}
  .pillars,.stats{grid-template-columns:repeat(2,1fr)}
  .tier.feat{transform:none}
  section{padding:64px 0}
}
@media (max-width:620px){
  body{font-size:16px}
  :root{--pad:20px}
  .cost-grid,.mech,.pillars,.bonus,.tiers,.quotes,.stats,.steps{grid-template-columns:1fr}
  .stat{border-right:none; border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:none}
  .cost,.calc-card,.calc-result,.guarantee{padding:30px}
  .guarantee{flex-direction:column; text-align:center; gap:24px}
  .guarantee p{margin:0 auto}
  .cost{padding:32px 24px}
  .scarcity{padding:30px 26px}
  .scarcity .big-n{font-size:64px}
  .stack-row,.stack-head,.stack-group,.stack-subtotal{padding-left:22px; padding-right:22px}
  .stack-row .name small{max-width:none}
  .marquee .lbl{position:static; padding:0 0 12px var(--pad); background:none; display:block}
  .marquee .lbl::after{display:none}
  .rep-stats{grid-template-columns:1fr}
  .rep-stats .rs{border-right:none; border-bottom:1px solid var(--line)}
  .rep-stats .rs:last-child{border-bottom:none}
}

/* print */
@media print{
  body::before{display:none}
  .reveal{opacity:1;transform:none}
  .topbar{position:static}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===========================================================
   LEAD FORM  (embedded in hero of Nabídka)
   =========================================================== */

/* form card */
.form-card{background:var(--paper-2); border:2px solid var(--ink); border-radius:var(--r-lg); box-shadow:10px 10px 0 var(--accent); overflow:hidden}
.form-card .fc-head{background:var(--ink); color:var(--paper); padding:22px 30px}
.form-card .fc-head .fct{font-family:var(--f-display); font-weight:700; font-size:21px; letter-spacing:-.5px}
.form-card .fc-head .fcs{font-family:var(--f-mono); font-size:12px; color:var(--accent); letter-spacing:.4px; margin-top:5px}
.form-card form{padding:28px 30px 30px}
.ff{margin-bottom:20px}
.ff > label{display:flex; align-items:baseline; gap:7px; font-family:var(--f-mono); font-size:12.5px; font-weight:600; letter-spacing:.4px; color:var(--ink); margin-bottom:9px}
.ff > label .req{color:var(--accent-ink)}
.ff > label .opt{font-weight:500; color:var(--dim); letter-spacing:.3px; text-transform:none; margin-left:auto}
.ff input[type=url],.ff input[type=email],.ff input[type=tel],.ff textarea{
  width:100%; font-family:var(--f-body); font-size:16px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none}
.ff input::placeholder,.ff textarea::placeholder{color:var(--dim-2)}
.ff input:focus,.ff textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-soft)}
.ff textarea{resize:vertical; min-height:74px; line-height:1.5}
.ff.invalid input,.ff.invalid textarea{border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft)}
.ff .err{display:none; font-family:var(--f-mono); font-size:11.5px; color:var(--coral); margin-top:7px}
.ff.invalid .err{display:block}

/* interactive competitors */
.comp-field{margin-bottom:20px}
.comp-field .comp-lab{display:flex; align-items:baseline; gap:7px; font-family:var(--f-mono); font-size:12.5px; font-weight:600; letter-spacing:.4px; color:var(--ink); margin-bottom:9px}
.comp-field .comp-lab .opt{font-weight:500; color:var(--dim); letter-spacing:.3px; margin-left:auto}
.hero-calc-link{display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--accent-ink); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px; transition:gap .15s}
.hero-calc-link:hover{gap:11px}
.comp-list{display:flex; flex-direction:column; gap:9px}
.comp-list:not(:empty){margin-bottom:10px}
.comp-row{display:flex; align-items:center; gap:9px; animation:compIn .22s cubic-bezier(.2,.7,.2,1)}
@keyframes compIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.comp-row input{flex:1; min-width:0; font-family:var(--f-body); font-size:15px; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; -webkit-appearance:none}
.comp-row input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-soft)}
.comp-row .comp-rm{flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--paper-2); color:var(--dim); display:grid; place-items:center; cursor:pointer; transition:border-color .15s, color .15s, background .15s}
.comp-row .comp-rm:hover{border-color:var(--coral); color:var(--coral); background:var(--coral-soft)}
.comp-row .comp-rm svg{width:15px; height:15px}
.comp-add{display:inline-flex; align-items:center; gap:10px; width:100%; justify-content:center; font-family:var(--f-mono); font-size:13.5px; font-weight:600; color:var(--accent-deep); background:var(--accent-soft); border:1.5px dashed var(--accent-ink); border-radius:var(--r-sm); padding:12px 16px; cursor:pointer; transition:background .15s, transform .12s}
.comp-add:hover{background:rgba(200,239,51,.34)}
.comp-add:active{transform:scale(.99)}
.comp-add .ci{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent-ink); color:var(--paper)}
.comp-add .ci svg{width:12px; height:12px; display:block}
.comp-add[hidden]{display:none}
.comp-hint{display:block; font-family:var(--f-mono); font-size:11.5px; color:var(--dim); margin-top:9px; text-align:center}
.comp-hint[hidden]{display:none}

/* gdpr checkbox */
.ff-check{display:flex; gap:12px; align-items:flex-start; margin:6px 0 22px}
.ff-check input{position:absolute; opacity:0; width:0; height:0}
.ff-check .box{flex:0 0 auto; width:24px; height:24px; border:1.5px solid var(--ink); border-radius:6px; background:#fff; display:grid; place-items:center; margin-top:1px; transition:background .15s, border-color .15s; cursor:pointer}
.ff-check .box svg{width:14px; height:14px; color:var(--ink); opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s}
.ff-check input:checked + .box{background:var(--accent); border-color:var(--ink)}
.ff-check input:checked + .box svg{opacity:1; transform:scale(1)}
.ff-check input:focus-visible + .box{box-shadow:0 0 0 3px var(--accent-soft)}
.ff-check .ct{font-size:13.5px; color:var(--ink-2); line-height:1.45; cursor:pointer}
.ff-check .ct a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
.ff-check.invalid .box{border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft)}
.form-card .btn-primary{width:100%; justify-content:center; margin-top:2px}
.form-trust{list-style:none; display:flex; flex-direction:column; gap:9px; padding:0; margin:20px 0 0}
.form-trust li{font-family:var(--f-mono); font-size:12.5px; color:var(--dim); display:flex; align-items:center; gap:9px}
.form-trust li svg{width:15px;height:15px; color:var(--accent-ink); flex:0 0 auto}

/* ---------- hero deliverable preview (what you get) ---------- */
.deliverable{position:relative}
.dlv-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--accent-deep); background:var(--accent); padding:7px 13px; border-radius:20px; margin-bottom:16px}
.dlv-tag svg{width:14px; height:14px}
.dlv-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-pop); overflow:hidden; transform:rotate(.4deg)}
.dlv-head{display:flex; align-items:center; gap:13px; padding:17px 20px; border-bottom:1px solid var(--line); background:var(--paper-2)}
.dlv-head .dlv-mk{flex:0 0 auto; width:44px; height:44px; border-radius:11px; background:var(--ink); display:grid; place-items:center}
.dlv-head .dlv-mk svg{width:30px; height:24px}
.dlv-title{font-family:var(--f-display); font-weight:700; font-size:16px; letter-spacing:-.3px}
.dlv-sub{font-family:var(--f-mono); font-size:11px; color:var(--dim); margin-top:3px}
.dlv-headline{padding:17px 20px 4px; font-family:var(--f-display); font-weight:600; font-size:18px; line-height:1.28; letter-spacing:-.4px}
.dlv-headline .up{color:var(--coral)} .dlv-headline b{color:var(--ink)}
.dlv-card table.sheet th{font-size:9.5px}
.dlv-insight{margin:14px 20px 18px; background:var(--accent-soft); border-left:3px solid var(--accent-ink); padding:12px 15px; font-size:13.5px; border-radius:0 8px 8px 0; color:var(--ink-2)}
.dlv-insight b{color:var(--accent-ink)}
.dlv-foot{display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-mono); font-size:11.5px; color:var(--dim); margin-top:16px; letter-spacing:.2px}
.dlv-foot svg{width:14px; height:14px; color:var(--accent-ink); flex:0 0 auto}

/* ---------- closing form section ---------- */
.formsec{padding:90px 0; position:relative; overflow:hidden}
.formsec::after{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 72% 42%, var(--accent-soft), transparent 56%); pointer-events:none}
.formsec .wrap{position:relative; z-index:1}
.formsec-grid{display:grid; grid-template-columns:1fr .9fr; gap:60px; align-items:center}
.formsec-copy h2{margin-top:14px}
.formsec-get{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:14px}
.formsec-get li{display:flex; gap:13px; align-items:flex-start; font-size:16px; color:var(--ink-2); line-height:1.4}
.formsec-get li .gk{flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--accent); display:grid; place-items:center; color:var(--ink); margin-top:1px}
.formsec-get li .gk svg{width:14px; height:14px}
.formsec-note{font-family:var(--f-mono); font-size:12.5px; color:var(--dim); margin:26px 0 0; letter-spacing:.2px}
.formsec-note b{color:var(--ink)}
@media (max-width:980px){
  .formsec-grid{grid-template-columns:1fr; gap:38px}
  .dlv-card{transform:none}
}

@media (max-width:980px){
  .form-card{margin-top:8px}
}

/* ===========================================================
   THANK-YOU  (Děkovná stránka.html)
   =========================================================== */
.ty{padding:88px 0 96px; position:relative; overflow:hidden}
.ty::after{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 50% 22%, var(--accent-soft), transparent 52%); pointer-events:none}
.ty .inner{position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center}
.ty-badge{width:78px; height:78px; border-radius:50%; background:var(--accent); border:2px solid var(--ink); display:grid; place-items:center; margin:0 auto 26px; box-shadow:6px 6px 0 var(--ink)}
.ty-badge svg{width:38px; height:38px; color:var(--ink)}
.ty h1{font-family:var(--f-display); font-weight:700; font-size:clamp(36px,5vw,62px); line-height:1.0; letter-spacing:-2px; text-wrap:balance}
.ty .lead{margin:22px auto 0; text-align:center}
.ty .urlchip{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:13px; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); padding:9px 16px; border-radius:30px; margin-top:24px; max-width:100%}
.ty .urlchip[hidden]{display:none}
.ty .urlchip svg{width:14px;height:14px; color:var(--green); flex:0 0 auto}
.ty .urlchip b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* timeline */
.timeline{max-width:680px; margin:52px auto 0; text-align:left; position:relative}
.timeline::before{content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px; background:var(--line)}
.tstep{position:relative; display:flex; gap:22px; padding:0 0 28px}
.tstep:last-child{padding-bottom:0}
.tstep .tn{flex:0 0 auto; width:48px; height:48px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:20px; color:var(--ink); position:relative; z-index:1}
.tstep:last-child .tn{background:var(--accent)}
.tstep .tb{padding-top:6px}
.tstep .tb h4{font-family:var(--f-display); font-weight:700; font-size:20px; letter-spacing:-.4px; margin:0 0 5px}
.tstep .tb p{margin:0; font-size:15px; color:var(--dim); max-width:52ch}
.tstep .tb p b{color:var(--accent-ink)}

/* secondary action */
.ty-second{max-width:680px; margin:48px auto 0; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; text-align:left}
.ty-second .s-ico{flex:0 0 auto; width:42px; height:42px; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center; color:var(--accent-ink)}
.ty-second .s-ico svg{width:22px;height:22px}
.ty-second .s-txt{flex:1; min-width:200px}
.ty-second .s-txt b{font-family:var(--f-display); font-weight:700; font-size:16px; display:block; margin-bottom:3px}
.ty-second .s-txt p{margin:0; font-size:14px; color:var(--dim)}
.ty-second .s-actions{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width:620px){
  .ty-second{flex-direction:column; align-items:flex-start}
  .tstep{gap:16px}
}

/* ===========================================================
   HERO LIVE PRICE TABLE (embedded comparison)
   =========================================================== */
.hero-live{display:flex; justify-content:flex-end; overflow:visible}
.hero-grid > *{min-width:0}
.hero-live .ptbl{width:max-content; max-width:100%}
.ptbl{background:var(--paper-2); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-pop); overflow:hidden}
.ptbl-chrome{background:var(--paper-3); padding:11px 15px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line)}
.ptbl-chrome i{width:11px; height:11px; border-radius:50%; display:inline-block}
.ptbl-chrome .purl{margin-left:12px; flex:1; min-width:0; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); background:#fff; padding:7px 13px; border-radius:8px; border:1px solid var(--line)}
.ptbl-chrome .purl .plock{width:12px; height:12px; color:var(--green); flex:0 0 auto}
.ptbl-chrome .purl .ppath{color:var(--dim)}
.ptbl-chrome .pauto{flex:0 0 auto; display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10.5px; font-weight:600; color:var(--accent-deep); background:var(--accent-soft); padding:6px 11px; border-radius:20px}
.ptbl-chrome .pauto .ldot{width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 1.8s ease-in-out infinite}
.ptbl-cols{display:grid; grid-template-columns:46px 78px 64px 66px 66px 66px 66px 72px; align-items:center; gap:14px; padding:11px 20px; background:#fff; font-family:var(--f-mono); font-size:8.5px; font-weight:600; letter-spacing:.2px; text-transform:uppercase; color:var(--dim)}
.ptbl-cols .you-col{color:var(--accent-deep)}
.ptbl-row{display:grid; grid-template-columns:46px 78px 64px 66px 66px 66px 66px 72px; align-items:center; gap:14px; padding:9px 20px; border-top:1px solid var(--line-2)}
.ptbl .ta-r{text-align:right} .ptbl .ta-c{text-align:center}
.pcell-prod{display:flex; align-items:center}
.pphoto{width:40px; height:40px; display:block; border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden}
.pphoto img{width:100%; height:100%; object-fit:cover; display:block}
.pcell-you{font-family:var(--f-mono); font-size:13px; font-weight:700; white-space:nowrap; padding:4px 5px; border-radius:7px}
.pcell-you.win{color:var(--accent-deep); background:var(--accent-soft)}
.pcell-you.high{color:var(--coral); background:var(--coral-soft)}
.pcheck{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; font-size:11px; font-weight:700; line-height:1}
.pdash{color:var(--dim-2)}
.pcell-comp{font-family:var(--f-mono); font-size:12px; font-weight:500; white-space:nowrap; border-radius:6px; transition:background .5s ease, color .5s ease}
.pcell-comp.lower{color:var(--green)}
.pcell-comp.higher{color:var(--coral)}
.pcell-comp.equalp{color:var(--ink-2)}
.pcell-comp.flash{animation:cellflash .85s ease}
@keyframes cellflash{0%{background:var(--accent); color:var(--ink)}100%{background:transparent}}
.pcell-avg{font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--dim); white-space:nowrap}
.ptbl-foot{display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-mono); font-size:10.5px; color:var(--dim); letter-spacing:.3px; padding:11px 14px; background:#fff; border-top:1px solid var(--line-2)}
.ptbl-foot .ldot{width:7px; height:7px; border-radius:50%; background:var(--green); animation:blink 1.8s ease-in-out infinite}
@media (max-width:1200px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-live{justify-content:flex-start; overflow-x:auto; padding-bottom:8px}
}

/* ===========================================================
   FLOW ILLUSTRATION (how it works)
   =========================================================== */
.flow-wrap{margin-top:60px}
.flow-head{text-align:center}
.flow-eyebrow{display:inline-block; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent-deep); margin-bottom:10px}
.flow-head h3{font-family:var(--f-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.6px; margin:0}
.flow-stage{max-width:940px; margin:30px auto 0}
.flow-svg{width:100%; height:auto; display:block}
.flow-cap{text-align:center; max-width:640px; margin:26px auto 0; color:var(--dim); font-size:15px; line-height:1.55; text-wrap:balance}
.flow-cap b{color:var(--ink)}

.flow-svg .fwire use{stroke:rgba(21,18,12,.28); stroke-width:2; stroke-dasharray:5 6; fill:none}
.flow-svg .fnode{fill:#fff; stroke:rgba(21,18,12,.13); stroke-width:1.5}
.flow-svg .fdot-s{fill:var(--paper-3)}
.flow-svg .fglyph{stroke:var(--ink); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.flow-svg .flab{font-family:var(--f-display); font-weight:600; font-size:17px; fill:var(--ink)}
.flow-svg .furl{font-family:var(--f-mono); font-size:12px; fill:var(--dim)}
.flow-svg .fpulse circle{fill:var(--accent-ink)}
.flow-svg .fscan{stroke:var(--accent); stroke-width:2.5; stroke-dasharray:34 230; opacity:.85; transform-box:view-box; transform-origin:500px 247px; animation:fscan 3.2s linear infinite}
@keyframes fscan{to{transform:rotate(360deg)}}
.flow-svg .fcore-t{font-family:var(--f-mono); font-size:13px; fill:var(--ink); text-anchor:middle; letter-spacing:.4px}
.flow-svg .fout-h{font-family:var(--f-display); font-weight:700; font-size:14px; fill:var(--ink)}
.flow-svg .fout-live{fill:var(--green); animation:blink 1.8s ease-in-out infinite}
.flow-svg .fout-col{font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.5px; fill:var(--dim)}
.flow-svg .fout-name{font-family:var(--f-body); font-size:13px; fill:var(--ink)}
.flow-svg .fval{font-family:var(--f-mono); font-size:13px; font-weight:700; fill:var(--accent-deep)}
.flow-svg .fval.flash{animation:fvalflash .7s ease}
@keyframes fvalflash{0%{fill:var(--ink)}40%{fill:var(--coral)}100%{fill:var(--accent-deep)}}
.flow-svg .fmkt{font-family:var(--f-mono); font-size:13px; fill:var(--dim)}
.flow-svg .fout-foot{font-family:var(--f-mono); font-size:10px; fill:var(--dim)}

@media (prefers-reduced-motion: reduce){
  .flow-svg .fscan,.flow-svg .fout-live{animation:none}
}
@media (max-width:760px){
  .flow-svg .flab{font-size:19px}
  .flow-svg .furl{font-size:13px}
}