/* Inter: body, UI, buttons, numerals */
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:400;src:url('/fonts/inter-v20-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:500;src:url('/fonts/inter-v20-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:600;src:url('/fonts/inter-v20-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:700;src:url('/fonts/inter-v20-latin-700.woff2') format('woff2')}
/* Inter Tight: display face for headings */
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:400;src:url('/fonts/inter-tight-v9-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:500;src:url('/fonts/inter-tight-v9-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:600;src:url('/fonts/inter-tight-v9-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:700;src:url('/fonts/inter-tight-v9-latin-700.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:800;src:url('/fonts/inter-tight-v9-latin-800.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:900;src:url('/fonts/inter-tight-v9-latin-900.woff2') format('woff2')}

:root {
  --bg: #FBFAF7;
  --bg-warm: #F1ECE2;
  --bg-dark: #0E0D0B;
  --surface: #FFFFFF;
  --text: #0E0D0B;
  --text-muted: #2A2D33;
  --text-subtle: #6B7280;
  --border: #E6E2D8;
  --border-light: #F0EDE5;
  --accent: #9B1C2E;        /* primary CTA buttons and link hover ONLY */
  --accent-hover: #7E1525;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-btn: 0 1px 2px rgba(0,0,0,0.10);
  --max: 1120px;
  --nav-h: 60px;
  --radius: 10px;
  --radius-lg: 16px;
  --display: 'Inter Tight', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul{list-style:none}
::selection{background:var(--bg-warm);color:var(--text)}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-0.02em}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}
@media(min-width:1024px){.container{padding:0 40px}}

/* ── Section header ── */
.sh{text-align:center;margin-bottom:48px}
.sh-title{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;color:var(--text);margin-bottom:12px}
.sh-sub{font-size:1.05rem;color:var(--text-muted);max-width:560px;margin:0 auto;line-height:1.6}

/* Screen-reader only (visually hidden labels) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Honeypot anti-spam */
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;tab-index:-1}

/* ── Motion ──────────────────────────────────────────────────────────
   Still the same handful of .reveal elements (headings and the hero).
   The richness comes from the curve, the slight de-focus on entry, and
   staggering the parts of a heading WITHOUT adding more observed nodes.
   ------------------------------------------------------------------ */
/* Scoped to html.js: nothing is ever hidden unless the script that reveals
   it again is actually running. */
.js .reveal{
  opacity:0;
  transform:translateY(26px) scale(0.99);
  filter:blur(5px);
  transition:opacity 1s var(--ease), transform 1.05s var(--ease), filter .8s var(--ease);
  will-change:opacity,transform,filter;
}
.js .reveal.up{opacity:1;transform:none;filter:none;will-change:auto}

/* A section header animates as a sequence: title, then subtitle.
   The parent is only the trigger, so the .reveal count stays where it was. */
.js .sh.reveal{opacity:1;transform:none;filter:none;transition:none;will-change:auto}
.js .sh.reveal>*{
  opacity:0;transform:translateY(18px);filter:blur(4px);
  transition:opacity .9s var(--ease), transform .95s var(--ease), filter .7s var(--ease);
}
.js .sh.reveal.up>*{opacity:1;transform:none;filter:none}
.js .sh.reveal.up>*:nth-child(2){transition-delay:.11s}
.js .sh.reveal.up>*:nth-child(3){transition-delay:.22s}

/* Hover feels weightier: lift plus a soft shadow bloom rather than a jump. */
.btn,.nav-cta,.case-demo-btn,.form-btn{transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.case-card,.problem-card,.cap-card,.step-card,.pricing-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .sh.reveal>*{opacity:1;transform:none;filter:none;transition:none}
  *{transition:none!important;animation:none!important}
}

.section{padding:56px 0}
@media(min-width:768px){.section{padding:76px 0}}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;padding:13px 26px;border-radius:var(--radius);
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);white-space:nowrap;cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(0.98)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 4px 14px rgba(0,0,0,0.12)}
.btn-ghost-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.22)}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,0.50);background:rgba(255,255,255,0.06)}
/* Plain text link, used beside a primary button */
.link-plain{font-size:15px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);padding-bottom:1px;transition:color .15s,border-color .15s}
.link-plain:hover{color:var(--accent);border-color:var(--accent)}

/* ====================================================
   NAV
   ==================================================== */
/* Solid, never translucent: text scrolling through a semi-transparent bar was
   the loudest mobile defect, and backdrop-filter is unreliable on Android. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  transition:box-shadow 0.3s;
}
@media(min-width:900px){
  .nav.scrolled{box-shadow:0 1px 6px rgba(0,0,0,0.06)}
}
/* Anchor jumps must not park a heading under the fixed bar. */
[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
.nav-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  max-width:var(--max);margin:0 auto;padding:0 20px;height:100%;gap:16px;
}
@media(min-width:1024px){.nav-inner{padding:0 40px}}

.nav-logo{font-family:'Inter',system-ui,sans-serif;font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.02em;flex-shrink:0}
.nav-logo span{color:var(--accent)}

.nav-links{display:none;align-items:center;gap:3px;justify-content:center}
@media(min-width:900px){.nav-links{display:flex}}
.nav-link{font-size:13px;font-weight:600;padding:7px 10px;border-radius:var(--radius);transition:color 0.15s,background 0.15s;color:var(--text-subtle)}
.nav-link:hover{color:var(--text);background:var(--bg-warm)}

.nav-actions{display:none;align-items:center;flex-shrink:0;justify-content:flex-end}
@media(min-width:900px){.nav-actions{display:flex}}
/* Ghost, never solid: only one solid oxblood button may be in view at a time */
.nav-cta{background:transparent;color:var(--text);border:1px solid var(--border);font-size:14px;font-weight:700;padding:8px 17px;border-radius:var(--radius);transition:color 0.2s,border-color 0.2s;white-space:nowrap}
.nav-cta:hover{color:var(--accent);border-color:var(--accent);background:transparent}

.hamburger{display:flex;flex-direction:column;gap:5px;padding:8px;justify-self:end}
@media(min-width:900px){.hamburger{display:none}}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s}

.mobile-drawer{
  position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100vh;
  background:#fff;z-index:105;padding:68px 24px 24px;
  display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow:-8px 0 40px rgba(0,0,0,0.12);
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer a{font-size:20px;font-weight:700;color:var(--text);display:block;padding:9px 0}
.mob-niche{font-size:15px!important;font-weight:600!important;color:var(--text-muted)!important}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:104;opacity:0;pointer-events:none;transition:opacity 0.3s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.close-btn{position:absolute;top:16px;right:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px}

/* ====================================================
   HERO: text only, left aligned, generous whitespace
   ==================================================== */
.hero{padding:132px 0 46px;background:var(--bg)}
@media(min-width:768px){.hero{padding:170px 0 56px}}
.hero-text{max-width:780px}
.hero h1{
  font-size:clamp(2.4rem,6vw,3.8rem);
  line-height:1.05;color:var(--text);margin-bottom:26px;
}
.hero-sub{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--text-muted);max-width:620px;margin-bottom:40px;line-height:1.65}
.hero-ctas{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.hero-micro{margin-top:16px;margin-bottom:0;font-size:14px;color:var(--text-subtle)}

/* ── Demo line, directly under the hero (the homepage's actual proof) ── */
.demo-line{padding:34px 0;background:var(--bg-warm);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(min-width:768px){.demo-line{padding:42px 0}}

/* Line 1 — muted label */
.demo-label{margin:0;font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-subtle)}

/* Line 2 — the pipeline. Flex items so a wrap can only ever happen BETWEEN
   steps, never inside one. On narrow screens the chain simply stacks. */
.demo-flow{margin:14px 0 0;max-width:860px;font-size:15px;line-height:1.6;color:var(--text-muted);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.flow-step{white-space:nowrap}
.flow-lead{white-space:nowrap;color:var(--text);font-weight:600}
/* The arrow lives INSIDE the step it points at, so it can never end a line. */
.flow-arrow{color:var(--text-subtle);margin-right:6px}
@media(max-width:520px){
  .demo-flow{gap:2px 7px;font-size:14.5px}
  .flow-step,.flow-lead{white-space:normal}
}

/* Line 3 — reads as a link at a glance */
.demo-cta{display:inline-block;margin-top:14px;font-size:15px;font-weight:500;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.demo-cta:hover{color:var(--accent-hover);border-bottom-width:2px;padding-bottom:1px}

/* ====================================================
   PROBLEM
   ==================================================== */
.problem-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:36px}
@media(min-width:768px){.problem-grid{grid-template-columns:repeat(3,1fr)}}
.problem-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.problem-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--bg-warm)}
.problem-icon svg{width:16px;height:16px;color:var(--text-muted)}
.problem-card h4{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:8px}
.problem-card p{font-size:14px;color:var(--text-muted);line-height:1.6}
.problem-callout{font-family:var(--display);font-weight:700;font-size:24px;text-align:center;margin-top:36px}

/* ====================================================
   WHAT I BUILD
   ==================================================== */
.workflow{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:40px}
@media(min-width:768px){.workflow{flex-direction:row;justify-content:center;align-items:center;gap:0}}
.workflow-col{display:flex;flex-direction:column;gap:10px}
@media(min-width:768px){.workflow-col{padding:0 18px}}
.wf-node{
  display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);font-size:13px;font-weight:500;color:var(--text-muted);
}
.wf-node svg{width:16px;height:16px;color:var(--text-subtle);flex-shrink:0}
.n8n-hub{width:68px;height:68px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#1A1A1A,#333);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.n8n-hub svg{width:34px;height:34px;color:#fff}
.wf-arrow{display:none}
@media(min-width:768px){.wf-arrow{display:flex;align-items:center;color:var(--text-subtle);font-size:24px;padding:0 6px;flex-shrink:0}}
.wf-arrow-mob{display:none;align-items:center;justify-content:center;color:rgba(0,0,0,0.22);font-size:22px;padding:4px 0;width:100%}
@media(max-width:767px){.wf-arrow-mob{display:flex}}

.cap-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:768px){.cap-grid{grid-template-columns:repeat(3,1fr)}}
.cap-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px}
.cap-card svg{width:18px;height:18px;color:var(--text-muted);margin-bottom:12px}
.cap-card h4{font-family:var(--display);font-weight:700;font-size:16px;color:var(--text);margin-bottom:7px;line-height:1.3}
.cap-card p{font-size:13.5px;color:var(--text-muted);line-height:1.55}

/* ====================================================
   BLUEPRINTS
   ==================================================== */
.cases-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cases-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:768px){.cases-grid{grid-template-columns:repeat(3,1fr)}}

/* Flex column so the demo button can be pinned to the card floor with
   margin-top:auto, on the same baseline whatever the copy length. */
.case-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.case-card:hover{border-color:var(--border);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.case-header{padding:22px 22px 0}
.case-kicker{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-subtle);display:block;margin-bottom:8px}
.case-card h3{font-size:17px;font-weight:700;line-height:1.3;margin-bottom:10px;color:var(--text)}
.case-problem-box{
  font-size:13px;color:var(--text-muted);line-height:1.5;
  padding:10px 12px;background:var(--bg-warm);border-radius:var(--radius);
  border-left:2px solid var(--border);
}
.case-problem-box strong{color:var(--text)}
.case-body{padding:16px 22px 22px;display:flex;flex-direction:column;flex:1}
.case-solution{margin-bottom:14px}
.case-solution li{font-size:13px;color:var(--text-muted);padding:4px 0 4px 18px;position:relative;line-height:1.5}
.case-solution li::before{content:'→';position:absolute;left:0;color:var(--text-subtle);font-weight:700}
.case-what{font-size:13.5px;color:var(--text-muted);line-height:1.6;padding-top:12px;border-top:1px solid var(--border-light);margin-bottom:14px}
/* margin-top:auto pins this to the bottom of the card, so the shorter Slovak
   copy no longer leaves it floating mid-card. */
.case-demo-btn{display:flex;align-items:center;justify-content:center;margin-top:auto;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:700;color:#fff;background:var(--accent);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow-btn);transition:background 0.2s,transform 0.2s}
.case-demo-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* ── Single CTA band ── */
.cta-band{padding:40px 0}
.cta-band .container{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cta-band p{font-size:15px;font-weight:600;color:var(--text-muted);margin:0;max-width:520px}

/* ====================================================
   WHY ME
   ==================================================== */
#why{background:var(--surface)}
.why-lead{font-size:16px;color:var(--text-muted);max-width:560px;margin:0 auto 36px}
.comparison-wrap{overflow-x:auto}
.comparison-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.comparison-table th{padding:13px 16px;font-size:14px;font-weight:700;text-align:left;background:var(--bg-warm);font-family:'Inter',system-ui,sans-serif}
.comparison-table td{padding:11px 16px;font-size:13px;line-height:1.5;border-top:1px solid var(--border)}
.comparison-table td:first-child{font-weight:600}
.comparison-table td:nth-child(2){color:var(--text-muted)}
.cmp-source{font-size:12px;color:var(--text-subtle);text-align:center;margin:16px auto 0;max-width:580px;line-height:1.5}

/* Neutral glyphs replace the old two-colour tick-and-cross treatment */
.ic,.ix,.ck{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;vertical-align:-3px;margin-right:6px}
.ic,.ck{color:var(--text-muted)}
.ix{color:var(--text-subtle);opacity:.55}
.ic::before,.ck::before,.ix::before{content:"";width:16px;height:16px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic::before,.ck::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E")}
.ix::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E")}

/* ====================================================
   PROCESS
   ==================================================== */
.steps-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 22px 22px;overflow:hidden}
.step-num{position:absolute;top:8px;right:14px;font-family:var(--display);font-weight:800;font-size:80px;color:#ECE7DD;line-height:1;pointer-events:none}
.step-icon{width:36px;height:36px;border-radius:var(--radius);background:var(--bg-warm);color:var(--text-muted);display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative;z-index:1}
.step-icon svg{width:20px;height:20px}
.step-card h4{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:7px;position:relative;z-index:1}
.step-card p{font-size:14px;color:var(--text-muted);line-height:1.6;position:relative;z-index:1}

/* ====================================================
   PRICING
   ==================================================== */
.pricing-section{background:var(--bg-dark);color:#F9F8F4;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.pricing-section .sh-title{color:#F9F8F4}
.pricing-section .sh-sub{color:rgba(249,248,244,0.55)}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
@media(min-width:768px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}

.pricing-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column}
.pricing-card.featured{background:#fff;color:var(--text);box-shadow:0 8px 48px rgba(0,0,0,0.22)}

/* The only three badges left on the page */
.p-badge{
  display:inline-block;font-family:'Inter',system-ui,sans-serif;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  padding:3px 10px;border-radius:var(--radius);margin-bottom:9px;align-self:flex-start;
  background:rgba(255,255,255,0.10);color:rgba(255,255,255,0.60);
}
.pricing-card.featured .p-badge{background:var(--bg-warm);color:var(--text-muted)}

.p-name{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:3px;line-height:1.2}
.p-price{font-family:var(--display);font-size:32px;font-weight:800;margin-bottom:2px;letter-spacing:-0.02em}
.p-time{font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:2px}
.pricing-card.featured .p-time{color:var(--text-subtle)}
.p-rush{font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:13px;font-variant-numeric:tabular-nums}
.pricing-card.featured .p-rush{color:var(--text-subtle)}
.p-desc{font-size:13px;color:rgba(255,255,255,0.68);margin-bottom:16px;line-height:1.55}
.pricing-card.featured .p-desc{color:var(--text-muted)}
.p-features{list-style:none;flex:1;margin-bottom:20px}
.p-cta{margin-top:auto}
.p-cta .btn{width:100%}
.p-features li{font-size:13px;padding:5px 0;display:flex;align-items:flex-start;gap:7px;color:rgba(255,255,255,0.80);border-bottom:1px solid rgba(255,255,255,0.06)}
.p-features li:last-child{border-bottom:none}
.pricing-card.featured .p-features li{color:var(--text-muted);border-bottom-color:var(--border-light)}
.p-features .ck{color:rgba(255,255,255,0.45)}
.pricing-card.featured .p-features .ck{color:var(--text-subtle)}

.pricing-microcopy{text-align:center;font-size:13.5px;color:rgba(255,255,255,0.55);margin:28px auto 0;max-width:580px;line-height:1.5}
.pricing-microcopy strong{color:rgba(255,255,255,0.82);font-weight:700}

.guarantee-box{
  border:1px solid rgba(255,255,255,0.14);border-left:2px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.04);border-radius:var(--radius);padding:20px 24px;margin-top:24px;
}
.g-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:5px}
.guarantee-box p{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.55}

/* Collapsible blocks inside pricing */
.tco-details{margin:24px 0 0;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-lg);overflow:hidden}
.tco-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;font-size:13px;font-weight:700;letter-spacing:0.03em;color:rgba(255,255,255,0.78)}
.tco-details>summary::-webkit-details-marker{display:none}
.tco-details>summary:hover{color:#fff}
.tco-details .tco-chevron{flex-shrink:0;color:rgba(255,255,255,0.45);transition:transform 0.3s}
.tco-details[open]>summary .tco-chevron{transform:rotate(180deg)}
.tco-details .tco-inner{padding:2px 20px 20px}
.tco-header{margin:6px 0 14px;text-align:left}
.tco-header h3{color:#fff;font-size:1.2rem;font-weight:800;margin-bottom:4px}
.tco-header p{color:rgba(255,255,255,0.55);font-size:13px}
.tco-details .comparison-table{box-shadow:none}
.tco-details .comparison-table th{background:rgba(255,255,255,0.06);color:#fff}
.tco-details .comparison-table td{color:rgba(255,255,255,0.82);border-top-color:rgba(255,255,255,0.08)}
.tco-details .comparison-table td:first-child{color:#fff}
.tco-details .comparison-table td:nth-child(2){color:rgba(255,255,255,0.82)}
.tco-details .comparison-table td strong{color:#fff}
.tco-details .ic,.tco-details .ck{color:rgba(255,255,255,0.55)}
.tco-details .ix{color:rgba(255,255,255,0.35)}
.tco-foot{margin-top:14px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,0.5)}
.tco-foot strong{color:rgba(255,255,255,0.82)}
.terms-row{display:flex;align-items:baseline;gap:6px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:13px}
.terms-row:last-child{border-bottom:none;padding-bottom:0}
.terms-key{color:rgba(255,255,255,0.70);font-weight:600;flex-shrink:0;min-width:140px}
.terms-val{color:rgba(255,255,255,0.62);line-height:1.5}

/* ====================================================
   ABOUT
   ==================================================== */
.about-grid{display:flex;flex-direction:column;gap:32px}
@media(min-width:768px){.about-grid{flex-direction:row;align-items:flex-start;gap:52px}}
.about-photo-wrap{flex:0 0 36%;display:flex;justify-content:center}
.about-photo-c{position:relative;display:inline-block;width:220px;height:264px}
@media(min-width:768px){.about-photo-c{width:300px;height:360px}}
.about-photo{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-lg);background:var(--bg-warm)}
.about-text{flex:1}
.about-text p{font-size:15px;color:var(--text-muted);line-height:1.70;margin-bottom:12px;max-width:480px}
.about-langs{margin-top:14px;font-size:13px;color:var(--text-subtle)}

/* ====================================================
   FAQ
   ==================================================== */
.faq-section{background:var(--bg-warm)}
.faq-list{max-width:680px;margin:32px auto 0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 0;text-align:left;font-size:15px;font-weight:600;color:var(--text);cursor:pointer}
.faq-icon{flex-shrink:0;font-size:18px;transition:transform 0.3s;margin-left:12px;color:var(--text-subtle)}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease}
.faq-item.open .faq-a{max-height:420px;padding-bottom:14px}
.faq-a p{font-size:14px;color:var(--text-muted);line-height:1.65}
.faq-showall{display:none}
@media(max-width:768px){
  .faq-list .faq-item:nth-child(n+4){display:none}
  .faq-list.faq-expanded .faq-item:nth-child(n+4){display:block}
  .faq-showall{display:block;width:100%;margin-top:14px;padding:13px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',system-ui,sans-serif}
}

/* ====================================================
   FORM
   ==================================================== */
.form-section{background:var(--bg-dark);padding:96px 0 104px;position:relative;overflow:hidden}
@media(max-width:767px){.form-section{padding:64px 0 72px}.sh{margin-bottom:34px}}
.form-inner{max-width:540px;margin:0 auto;text-align:center}
.form-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3rem);color:#fff;line-height:1.05;margin-bottom:12px;letter-spacing:-0.02em}
.form-sub{font-size:16px;color:rgba(255,255,255,0.50);margin-bottom:32px}

.form-field{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.form-input{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;color:#fff;outline:none;transition:border-color 0.2s,background 0.2s;
}
.form-input::placeholder{color:rgba(255,255,255,0.28)}
.form-input:focus{border-color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.10)}
select.form-input{color:#fff}
select.form-input option{color:#0E0D0B;background:#fff}
textarea.form-input{font-family:'Inter',system-ui,-apple-system,sans-serif}
.form-btn{
  background:var(--accent);color:#fff;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;font-weight:700;padding:15px;
  border-radius:var(--radius);box-shadow:var(--shadow-btn);
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
  cursor:pointer;border:none;width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.form-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.14)}
.form-note{font-size:12px;color:rgba(255,255,255,0.50)}
.form-note a{color:rgba(255,255,255,0.70);text-decoration:underline}

.form-progress{height:3px;background:rgba(255,255,255,0.12);border-radius:3px;margin-bottom:28px;overflow:hidden}
.form-progress-fill{height:100%;background:rgba(255,255,255,0.55);border-radius:3px;transition:width 0.5s cubic-bezier(0.16,1,0.3,1)}
.form-step-lbl{font-size:11px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.50);margin-bottom:20px}
.form-hi{font-size:16px;color:rgba(255,255,255,0.65);margin-bottom:20px;font-weight:500;line-height:1.4;min-height:22px}
.form-hi strong{color:#fff;font-weight:800}
.form-step-block{will-change:opacity,transform}

.niche-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.niche-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:18px 15px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius);color:rgba(255,255,255,0.70);cursor:pointer;transition:all 0.22s cubic-bezier(0.16,1,0.3,1);text-align:left;font-family:'Inter',system-ui,sans-serif}
.niche-card:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.30);color:#fff;transform:translateY(-2px)}
.niche-card.selected{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.55);color:#fff;transform:translateY(-2px)}
.nc-label{font-size:14px;font-weight:700;display:block;line-height:1.2}
.nc-sub{font-size:12px;color:rgba(255,255,255,0.50);font-weight:400;display:block;margin-top:4px;transition:color 0.2s}
.niche-card.selected .nc-sub,.niche-card:hover .nc-sub{color:rgba(255,255,255,0.55)}
.nc-svg{width:26px;height:26px;display:block;margin-bottom:12px;flex-shrink:0;stroke:rgba(255,255,255,0.50);transition:stroke 0.22s}
.niche-card:hover .nc-svg,.niche-card.selected .nc-svg{stroke:rgba(255,255,255,0.88)}

.contact-toggle{display:flex;gap:8px;margin-bottom:10px}
.contact-btn{flex:1;padding:11px 8px;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.50);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Inter',system-ui,sans-serif}
.contact-btn.active{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.30);color:#fff}
.contact-btn-wa{opacity:0.6}
.contact-btn-wa.active{opacity:1}

.other-field-wrap{overflow:hidden;transition:max-height 0.4s ease,opacity 0.4s ease;max-height:0;opacity:0}
.other-field-wrap.open{max-height:200px;opacity:1}

.s1-body{display:flex;flex-direction:column;gap:14px}
.s3-body{display:flex;flex-direction:column;gap:20px}
.s3-contact{display:flex;flex-direction:column;gap:10px}
.s3-lbl{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.50);margin:0}

/* ====================================================
   FOOTER
   ==================================================== */
.footer{background:var(--bg-dark);color:#fff;padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
/* Logo, not a heading: stays Inter */
.footer-brand h3{font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:800;letter-spacing:-0.02em;margin-bottom:4px}
.footer-brand h3 span{color:var(--accent)}
.footer-brand p,.footer-brand .loc{font-size:13px;color:rgba(255,255,255,0.55)}
.footer-links{display:flex;flex-direction:column;gap:6px}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.55);transition:color 0.15s}
.footer-links a:hover{color:rgba(255,255,255,0.90)}
.footer-contact{display:flex;flex-direction:column;gap:9px}
.footer-contact a{font-size:13px;color:rgba(255,255,255,0.55);transition:color 0.15s}
.footer-contact a:hover{color:rgba(255,255,255,0.90)}
.footer-legal{max-width:700px;margin:0 auto;padding:24px 0 0;text-align:center;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,0.5)}
.footer-legal strong{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:7px;font-weight:700}
.footer-legal a{color:rgba(255,255,255,0.7);border-bottom:1px solid rgba(255,255,255,0.2)}
.footer-legal a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);margin-top:24px;padding-top:20px;font-size:12px;color:rgba(255,255,255,0.45);text-align:center}
.footer-bottom a{color:rgba(255,255,255,0.35)}
.footer-bottom a:hover{color:rgba(255,255,255,0.75)}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media(max-width:767px){
  .hero-ctas{gap:18px}
  .comparison-table{font-size:12px}
  .comparison-table th,.comparison-table td{padding:9px 10px}
  .about-text p{max-width:100%}
}
@media(max-width:600px){
  .cmp-stack thead{display:none}
  .cmp-stack,.cmp-stack tbody,.cmp-stack tr,.cmp-stack td{display:block;width:100%}
  .cmp-stack{box-shadow:none;border-radius:0;overflow:visible}
  .cmp-stack tr{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:12px;background:var(--surface);overflow:hidden}
  .cmp-stack td{border-top:none;padding:8px 16px}
  .cmp-stack td:first-child{font-weight:700;font-size:14px;background:var(--bg-warm);padding:10px 16px}
  .cmp-stack td[data-c]::before{content:attr(data-c) "  /  ";font-weight:700;color:var(--text-subtle)}
  .comparison-table:not(.cmp-stack){min-width:520px}
}

/* ====================================================
   LANGUAGE SWITCHER (EN · SK · CS)
   ==================================================== */
.lang-switch{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:0.04em;margin-left:14px}
.lang-switch a{color:var(--text-subtle);transition:color 0.15s}
.lang-switch a:hover{color:var(--accent)}
.lang-switch .lang-cur{color:var(--text)}
.lang-switch .lang-sep{color:var(--border)}
@media(max-width:899px){.nav-inner .lang-switch{display:none}}
.mobile-drawer .lang-switch{margin:18px 0 0;font-size:14px;gap:9px}

/* ====================================================================
   MOBILE PASS — everything below is phone-first (tested target: 390px)
   Desktop layout and copy are untouched.
   ==================================================================== */

/* 2 · Hamburger to the right edge. The 3-column grid put it in the middle
   once the desktop nav-links and nav-actions were hidden. */
@media(max-width:899px){
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .hamburger{justify-self:auto;margin-right:-8px}
}

/* 3 · Drawer: one compact group instead of ~900px of dead space, and the
   CTA clear of the home indicator. */
/* Symmetric padding, otherwise justify-content:center centres the group inside
   a box whose top padding (clearing the close button) is 44px deeper than its
   bottom — which parked the optical midpoint on "FAQ". */
.mobile-drawer{
  justify-content:center;
  padding:64px 24px calc(64px + env(safe-area-inset-bottom));
}
.drawer-foot{margin-top:20px}

/* .mobile-drawer a (display:block, 20px, --text, padding:9px 0) was beating
   .btn, so the CTA rendered as a left-aligned block with dark text on oxblood.
   Two classes here outrank it. */
.mobile-drawer .drawer-cta{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;margin-top:14px;padding:14px 20px;
  font-size:15px;font-weight:700;color:#fff;
}
.mobile-drawer .drawer-cta:hover{color:#fff}
/* The language switcher was inverted: .mobile-drawer a (20px, bold, dark) was
   beating .lang-switch a, so the INACTIVE languages looked active. */
.mobile-drawer .lang-switch{margin:0;gap:9px;font-size:15px}
.mobile-drawer .lang-switch a,
.mobile-drawer .lang-switch .lang-cur{display:inline;padding:0;font-size:15px;line-height:1.4}
.mobile-drawer .lang-switch a{color:var(--text-subtle);font-weight:500}
.mobile-drawer .lang-switch a:hover{color:var(--accent)}
.mobile-drawer .lang-switch .lang-cur{color:var(--text);font-weight:700}

/* 4 · Comparison table: the two column labels once at the top of the stack,
   then every row is just glyph + value. Was 14 repetitions of the labels. */
@media(max-width:600px){
  .cmp-stack thead{display:block;margin-bottom:12px}
  .cmp-stack thead tr{display:flex;gap:20px;margin:0;padding:0 2px;border:0;background:none;border-radius:0}
  .cmp-stack thead th{padding:0;background:none;font-size:12.5px;font-weight:700;display:flex;align-items:center}
  .cmp-stack thead th:empty{display:none}
  .cmp-stack td[data-c]::before{content:none}
}

/* 5 · Flow diagram: eight stacked boxes was over a screen and a half.
   Two chip rows, one arrow between them. Child indexes 4-6 are the hub and
   the trailing arrow in .workflow. */
@media(max-width:639px){
  .workflow{gap:10px;margin-bottom:32px}
  .workflow-col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;padding:0}
  .wf-node{padding:6px 10px;font-size:12px;gap:6px;border-radius:var(--radius)}
  .wf-node svg{width:13px;height:13px}
  .workflow>:nth-child(4),.workflow>:nth-child(5),.workflow>:nth-child(6){display:none}
  .wf-arrow-mob{padding:0;font-size:20px}
}

/* 8 · Button press — mobile has no hover, so :active is the only affordance. */
.btn:active,.nav-cta:active,.form-btn:active,.case-demo-btn:active,.demo-cta:active{
  transform:scale(0.98);transition-duration:.12s
}

/* ====================================================================
   MOTION — character, not volume. Observer count is unchanged (9/page).
   Every hiding rule is scoped to html.js, so if the script never runs
   nothing is ever invisible.
   ==================================================================== */

/* Hero: a one-time entrance on load, no observer involved. */
@keyframes bmk-enter{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.js .hero h1,.js .hero-sub,.js .hero-guard,.js .hero-ctas,.js .hero-micro{opacity:0;animation:bmk-enter .95s var(--ease) forwards}
.js .hero h1{animation-delay:.05s}
.js .hero-sub{animation-delay:.17s}
.js .hero-guard{animation-delay:.26s}
.js .hero-ctas{animation-delay:.34s}
.js .hero-micro{animation-delay:.35s}

/* Full-width bands settle into focus without moving. */
@keyframes bmk-focus{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:none}}
.js .demo-line>*{animation:bmk-focus 1s var(--ease) .45s both}
.js .pricing-section .sh.reveal.up>*{transform:none}

/* Card rows react to their own section heading, so no extra observers.
   .sh and the grid are siblings inside .container. */
.js .sh.reveal ~ .problem-grid > *,
.js .sh.reveal ~ .cases-grid > *,
.js .sh.reveal ~ .cap-grid > *,
.js .sh.reveal ~ .steps-grid > *{
  opacity:0;transform:translateY(20px) translateX(var(--lx,0));filter:blur(4px);
  transition:opacity .85s var(--ease),transform .9s var(--ease),filter .7s var(--ease);
}
/* Alternating lateral offset — the row assembles instead of marching. */
.js .sh.reveal ~ .problem-grid > :nth-child(odd),
.js .sh.reveal ~ .cases-grid > :nth-child(odd),
.js .sh.reveal ~ .cap-grid > :nth-child(odd),
.js .sh.reveal ~ .steps-grid > :nth-child(odd){--lx:-3px}
.js .sh.reveal ~ .problem-grid > :nth-child(even),
.js .sh.reveal ~ .cases-grid > :nth-child(even),
.js .sh.reveal ~ .cap-grid > :nth-child(even),
.js .sh.reveal ~ .steps-grid > :nth-child(even){--lx:3px}

.js .sh.reveal.up ~ .problem-grid > *,
.js .sh.reveal.up ~ .cases-grid > *,
.js .sh.reveal.up ~ .cap-grid > *,
.js .sh.reveal.up ~ .steps-grid > *{opacity:1;transform:none;filter:none}
.js .sh.reveal.up ~ .problem-grid > :nth-child(2),
.js .sh.reveal.up ~ .cases-grid > :nth-child(2),
.js .sh.reveal.up ~ .cap-grid > :nth-child(2),
.js .sh.reveal.up ~ .steps-grid > :nth-child(2){transition-delay:.08s}
.js .sh.reveal.up ~ .problem-grid > :nth-child(3),
.js .sh.reveal.up ~ .cases-grid > :nth-child(3),
.js .sh.reveal.up ~ .cap-grid > :nth-child(3),
.js .sh.reveal.up ~ .steps-grid > :nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion: reduce){
  .js .hero h1,.js .hero-sub,.js .hero-guard,.js .hero-ctas,.js .hero-micro,
  .js .demo-line>*{opacity:1;animation:none;filter:none}
  .js .sh.reveal ~ .problem-grid > *,
  .js .sh.reveal ~ .cases-grid > *,
  .js .sh.reveal ~ .cap-grid > *,
  .js .sh.reveal ~ .steps-grid > *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}

/* ════════════════════════════════════════════════════════════════════════
   SK REWORK — new blocks. Everything below is additive: new class names
   only, so the EN and CS pages that share this file are untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero: text left, the one moving thing right ── */
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:48px}}
.hero-media{margin:0}
.hero-media-box{
  aspect-ratio:16/10;background:var(--bg-warm);border:1px solid var(--border);
  border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-media-box img,.hero-media-box video{width:100%;height:100%;object-fit:cover}
.hero-media-note{font-size:12.5px;color:var(--text-subtle);letter-spacing:.01em}

/* ── 2. Ako to vyzera: four steps, each with a picture ── */
.steps4{display:grid;grid-template-columns:1fr;gap:28px;counter-reset:s4}
@media(min-width:680px){.steps4{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(min-width:1024px){.steps4{grid-template-columns:repeat(4,1fr);gap:24px}}
.s4{list-style:none}
.s4-shot{
  position:relative;aspect-ratio:4/3;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;
}
.s4-shot img{width:100%;height:100%;object-fit:cover}
.s4-num{
  position:absolute;top:10px;left:12px;font-family:var(--display);font-weight:800;
  font-size:13px;color:var(--text-subtle);letter-spacing:.04em;
}
.s4 h3{font-size:1.05rem;line-height:1.3;margin-bottom:6px}
.s4 p{font-size:.95rem;color:var(--text-muted);line-height:1.6}

/* ── 3. Co to nerobi ── */
.nerobi-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:840px;margin:0 auto}
@media(min-width:760px){.nerobi-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
.nerobi-card{border-left:2px solid var(--accent);padding:2px 0 2px 18px}
.nerobi-card h3{font-size:1.1rem;line-height:1.3;margin-bottom:8px}
.nerobi-card p{font-size:.97rem;color:var(--text-muted);line-height:1.65}

/* ── 4. Nic sa nestrati ── */
.nestrati-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:900px){.nestrati-grid{grid-template-columns:1fr 1.1fr;gap:44px}}
.nestrati-text h3{font-size:1.1rem;line-height:1.3;margin-bottom:8px}
.nestrati-text h3+p{margin-bottom:22px}
.nestrati-text p{font-size:.97rem;color:var(--text-muted);line-height:1.65}
.nestrati-shot{
  aspect-ratio:16/11;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.nestrati-shot img{width:100%;height:100%;object-fit:cover}

/* ── 5. Demo: a still that links to the page with the video ── */
.demo-card{
  position:relative;display:block;max-width:720px;margin:0 auto;
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);
}
.demo-card img{width:100%;height:auto;display:block}
.demo-card-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(14,13,11,.72);
}
.demo-card-play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.demo-card-label{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  background:linear-gradient(to top,rgba(14,13,11,.78),transparent);
  color:#fff;font-weight:600;font-size:.97rem;
}
.demo-card:hover .demo-card-play{background:rgba(14,13,11,.86)}

/* ── 6. The server strip: a step after buying, not a third package ── */
.server-strip{
  margin:36px 0 28px;padding:28px 26px;background:var(--bg-dark);color:#fff;
  border-radius:var(--radius-lg);
}
@media(min-width:760px){.server-strip{padding:34px 38px}}
.server-strip h3{font-size:1.25rem;margin-bottom:14px;color:#fff}
.server-strip p{font-size:.97rem;line-height:1.7;color:rgba(255,255,255,.78);margin-bottom:12px}
.server-strip p:last-child{margin-bottom:0}

/* ── Visible focus, everywhere, for keyboard users ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.server-strip :focus-visible,.footer :focus-visible,.form-section :focus-visible{
  outline-color:#fff;
}

/* ── Copy placeholders: invisible in production, visible with ?dev ──
   Max writes the real copy. Until then these hold the exact space it will
   take, so the page can be judged at the right length. */
.ph{display:none}
.dev .ph{
  display:block;color:#8a6d1f;background:rgba(214,178,58,.13);
  border:1px dashed rgba(214,178,58,.55);border-radius:6px;
  padding:6px 10px;font-style:italic;font-weight:400;
}
.dev .ph::before{content:"TEXT: ";font-style:normal;font-weight:700;opacity:.75}
.dev .ph-h{font-size:1.05rem;line-height:1.35}
.dev .ph-line{font-size:.95rem}
.dev .ph-p{font-size:.95rem}
.dev .s4-shot::after,.dev .nestrati-shot::after,.dev .hero-media-box::after{
  content:"IMG";position:absolute;right:10px;bottom:8px;
  font:700 11px Inter,sans-serif;color:var(--text-subtle);letter-spacing:.06em;
}
.dev .nestrati-shot,.dev .hero-media-box{position:relative}

/* Hero: the third line is the promise the whole page rests on, so it is set
   apart from the subheading rather than blended into it. */
.hero-guard{
  margin-top:18px;padding-left:14px;border-left:2px solid var(--accent);
  font-size:1.02rem;font-weight:600;line-height:1.5;color:var(--text);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Wording Claude drafted, waiting on Max. Invisible in production, marked at ?dev
   so a draft can never be mistaken for approved copy. */
.dev .draft{background:rgba(155,28,46,.10);box-shadow:inset 0 -1px 0 rgba(155,28,46,.45)}
.dev .draft::after{content:" [DRAFT]";font-size:.8em;font-weight:700;color:var(--accent)}

/* The line that carries block 4 into the price: seven manual steps, six of
   them gone, the seventh is the one worth your judgement. Not a card, not a
   heading - one quiet paragraph standing on its own under the block. */
.bridge{
  max-width:640px;margin:36px auto 0;padding-top:24px;
  border-top:1px solid var(--border);
  font-size:1.05rem;line-height:1.65;color:var(--text);text-align:center;
}
@media(min-width:760px){.bridge{font-size:1.1rem}}

/* ── Image slots with no image yet ──
   An empty framed box is worse than no box: it reads as a broken page. Until
   the file exists the slot collapses in production and the layout closes up.
   At ?dev it comes back, so the space can still be judged. Delete the class
   on a container the moment its image lands. */
.no-img{display:none}
.dev .no-img{display:flex}
.dev .s4-shot.no-img,.dev .nestrati-shot.no-img{display:block}
/* the step number used to sit inside the picture; it now stands on its own
   so it survives a missing one */
.s4-num{
  display:block;position:static;margin-bottom:6px;
  font-family:var(--display);font-weight:800;font-size:13px;
  color:var(--text-subtle);letter-spacing:.04em;
}

/* ════════════════════════════════════════════════════════════════════════
   SK REWORK — fixes found by looking at the published page, not the code.
   ════════════════════════════════════════════════════════════════════════ */

/* Secondary hero button. .btn-ghost-dark is white-on-transparent, meant for
   the dark bands; on the light hero it was white text on a white ground -
   invisible. The hero gets its own light-ground variant. */
.hero .btn-ghost-dark{
  background:transparent;color:var(--text);border:1px solid var(--border);
}
.hero .btn-ghost-dark:hover{border-color:var(--text);background:rgba(14,13,11,0.04)}

/* Two-column rows must collapse when their picture is not there yet, or the
   text sits in half the page next to a blank half. */
.hero-grid:has(.hero-media-box.no-img){grid-template-columns:1fr}
.hero-grid:has(.hero-media-box.no-img) .hero-media{display:none}
.nestrati-grid:has(.nestrati-shot.no-img){grid-template-columns:1fr}
@media(min-width:900px){
  .hero-grid:has(.hero-media-box.no-img) .hero-text,
  .nestrati-grid:has(.nestrati-shot.no-img) .nestrati-text{max-width:760px}
}

/* Two packages, not three. */
@media(min-width:768px){
  .pricing-grid{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto}
}

/* The server strip sits ON the dark pricing band, so a dark fill made it
   disappear into the background. It needs to read as its own block. */
.server-strip{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-left:3px solid var(--accent);
}
.server-strip h3{font-size:1.15rem;letter-spacing:-0.01em}
.server-strip p{color:rgba(255,255,255,0.72)}

/* The guarantee paragraphs ran together into one grey block. */
.guarantee-box p{margin-bottom:10px}
.guarantee-box p:last-child{margin-bottom:0}
.guarantee-box p:first-of-type{color:rgba(255,255,255,0.88);font-size:14px}
.g-title{font-size:15px;margin-bottom:10px}

/* Demo block with no still yet: the link keeps its shape and stays clickable,
   it just has no picture in it. Remove .demo-card-bare when one lands. */
.demo-card-bare{
  aspect-ratio:auto;max-width:none;width:auto;
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 26px 16px 20px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.demo-card-bare .demo-card-play{
  /* relative, not static: the triangle is an absolutely positioned ::after and
     anchors to the nearest positioned ancestor. Static sent it to the link and
     it landed on top of the label. */
  position:relative;top:auto;left:auto;transform:none;
  width:36px;height:36px;flex:0 0 36px;background:var(--accent);
}
.demo-card-bare .demo-card-play::after{border-width:8px 0 8px 13px;left:56%;top:50%}
.demo-card-bare .demo-card-label{
  position:static;padding:0;background:none;color:var(--text);
  font-size:1rem;font-weight:700;
}
.demo-card-bare:hover{border-color:var(--text);box-shadow:var(--shadow)}
.demo-card-bare:hover .demo-card-play{background:var(--accent-hover)}
.demo-wrap-bare{text-align:center}

/* ════════════════════════════════════════════════════════════════════════
   SK lead form. Three fields, one screen, on the dark band.

   Design brief it answers: no stack of identical rounded cards, no gradient,
   nothing shouting. Fields are ruled lines rather than boxes, the four
   answers sit on one row instead of four slabs, and the two buttons do not
   carry the same weight - Odoslat leads, WhatsApp follows.
   ════════════════════════════════════════════════════════════════════════ */
.lead-form[hidden],.lf-msg[hidden]{display:none !important}
.lead-form{display:grid;gap:28px;margin-top:26px;text-align:left}

/* name + mail share a row on desktop, halving the height of the form */
.lf-pair{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:640px){.lf-pair{grid-template-columns:1fr 1fr;gap:24px}}

.lf-row{display:grid;gap:7px}
.lf-fieldset{border:0;padding:0;margin:0}
.lf-label{
  font-size:13px;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,0.52);padding:0;
}

/* A ruled line, not a filled box. One border to look at instead of four. */
.lf-input{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.22);
  border-radius:0;padding:9px 2px;color:#fff;
  font-family:inherit;font-size:1.05rem;line-height:1.5;
  transition:border-color .16s ease;
}
.lf-input::placeholder{color:rgba(255,255,255,0.28)}
.lf-input:hover{border-bottom-color:rgba(255,255,255,0.40)}
.lf-input:focus{outline:none;border-bottom-color:#fff}
.lf-input:focus-visible{outline:none}
.lf-input:autofill{-webkit-text-fill-color:#fff}

/* Four answers on one line.

   Same surface the rest of the dark band already uses - .tco-details and
   .guarantee-box: --radius corners, a faint white fill, a thin white border.
   No pill shape, because nothing else on this page is a pill, and no radio
   dot, because the border already says "press me" and the picked state
   already says "this one". The dot said it a third time.

   The border is a touch stronger than on .tco-details on purpose: that panel
   is a disclosure you may ignore, this is a field you have to answer. */
.lf-choices{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.lf-choice{
  position:relative;display:inline-flex;align-items:center;cursor:pointer;
  padding:11px 18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.04);
  font-size:.98rem;color:rgba(255,255,255,0.72);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.lf-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lf-choice:hover{border-color:rgba(255,255,255,0.42);background:rgba(255,255,255,0.08);color:#fff}
.lf-choice:has(input:checked){
  border-color:var(--accent);background:rgba(155,28,46,0.20);color:#fff;font-weight:600;
}
.lf-choice:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}

/* Something is missing: the rule turns, no invented sentence appears. */
.lf-bad.lf-input{border-bottom-color:#E4708A}
.lf-bad .lf-choice{border-color:rgba(228,112,138,.65)}

.lf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.lf-btn{
  font-family:inherit;font-size:15px;font-weight:700;line-height:1;
  border-radius:var(--radius);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.lf-btn-primary{
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:15px 34px;box-shadow:var(--shadow-btn);
}
.lf-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* The second action is real, not decorative, but it must not read as an
   equal alternative: the lead is the form, WhatsApp is what happens after. */
.lf-btn-wa{
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;color:rgba(255,255,255,0.72);
  border:0;padding:15px 2px;font-weight:600;
}
.lf-btn-wa:hover{color:#fff}
.lf-wa-mark{width:19px;height:19px;flex:0 0 19px;color:#25D366}
.lf-btn:disabled{opacity:.5;cursor:default}
.lf-btn:disabled:hover{background:var(--accent);color:rgba(255,255,255,0.72)}
.lf-btn-primary:disabled:hover{background:var(--accent)}

.lf-msg{margin-top:22px;font-size:15px;line-height:1.65;color:rgba(255,255,255,0.72)}
.lf-msg a{color:#fff;text-decoration:underline}
.lf-ok-title{color:#fff;font-size:1.35rem;font-weight:800;font-family:var(--display);margin-bottom:6px}
.lf-ok-sub{color:rgba(255,255,255,0.55);font-size:14px}
.lead-form + .form-note,.lf-msg + .form-note{margin-top:22px}
.form-section .form-note{text-align:left}
@media(max-width:520px){
  .lf-choice + .lf-choice{margin-left:0}
  .lf-choices{gap:2px 18px}
  .lf-actions{gap:4px 18px}
  .lf-btn-primary{width:100%;text-align:center}
}
.form-section .form-sub[hidden]{display:none !important}