/* ===== LP-SVC-BASE (service-pages.css, scoped .lp-svc) ===== */
/* ═══════════════════════════════════════════════════════════════
   LamaPixel - Service Pages CSS (v2.6+)

   Общие правила для 6 сервисных страниц с .lp-svc wrapper:
   tvorba-webu, tvorba-eshopu, mobilni-aplikace, automatizace,
   crm-erp, o-nas.

   Извлечено из inline <style> блоков, где раньше повторялось 4-6 раз.
   Уникальные стили каждой страницы остаются в её inline.

   Site convention (main.js):
   - DARK = absence of data-theme attribute (BASE)
   - LIGHT = html[data-theme="light"]
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Theme-aware page chrome ─────────────────────────────── */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{background:#0A0A0A;color:#F0F0F0;transition:background .3s,color .3s}
html[data-theme="light"] body{background:#FAFAFA;color:#1A1A1A}

html .lp-svc,
.lp-svc{
  min-height:calc(100vh - 120px);
  --c-paper:#0A0A0A;
  --c-card:#141414;
  --c-ink:#F0F0F0;
  --c-ink-light:#A0A0A0;
  --c-border:#222222;
  --c-orange:#E68900;
  --c-orange-hover:#FF9800;
  --c-terminal:#050505;
  --c-matrix:#4AE6C8;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--f-b);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
  overflow-x:clip;
  position:relative;
}
html[data-theme="light"] .lp-svc{
  --c-paper:#FAFAFA;
  --c-card:#FFFFFF;
  --c-ink:#1A1A1A;
  --c-ink-light:#666666;
  --c-border:#E5E5E5;
}

/* Reset specific to .lp-svc subtree (legacy from designer mockups) */
.lp-svc *{margin:0;padding:0;box-sizing:border-box}

/* Default container - pages may override locally to 1450px (tvorba-webu) */
.lp-svc .container{max-width:1320px;margin:0 auto;padding:0 40px}

/* ── 2. v2.4.1 - contrast-section inner-element fixes ──────────
   Sections that invert with theme (ai-sec / process-sec / case-4)
   need inner text to track --c-paper so it stays readable. */
.lp-svc .ai-sec .ai-list li,
.lp-svc .ai-sec .ai-list li.highlight,
.lp-svc .process-sec .p-step h3,
.lp-svc .process-sec .p-step p,
.lp-svc .process-sec .p-step *,
.lp-svc .ai-sec h2,
.lp-svc .ai-sec h3,
.lp-svc .ai-sec p,
.lp-svc .case-4,
.lp-svc .case-4 h3,
.lp-svc .case-4 p,
.lp-svc .case-4 .c-flow{color:var(--c-paper) !important}

/* Dark terminal inside light contrast block keeps its OWN colors */
.lp-svc .ai-sec .terminal,
.lp-svc .ai-sec .terminal *,
.lp-svc .ai-sec .terminal-wrap,
.lp-svc .ai-sec .terminal-wrap *,
.lp-svc .case-4 .terminal,
.lp-svc .case-4 .terminal *{color:#F0F0F0 !important}
.lp-svc .ai-sec .term-title,
.lp-svc .case-4 .term-title{color:#FFFFFF !important}
.lp-svc .ai-sec .terminal .type-line,
.lp-svc .case-4 .terminal .type-line{color:#4AE6C8 !important}
.lp-svc .ai-sec .terminal .l5{color:#FFFFFF !important}
.lp-svc .ai-sec .terminal .l6{color:var(--c-orange,#E68900) !important}
.lp-svc .ai-sec .term-desc,
.lp-svc .case-4 .term-desc{color:#A0A0A0 !important}

/* Dashboards keep hardcoded grays (work on fixed dark bg) */
.lp-svc .css-dash,.lp-svc .css-dash *,
.lp-svc .dash-table,.lp-svc .dash-table *,
.lp-svc .d-stat,.lp-svc .d-stat *{color:#F0F0F0 !important}
.lp-svc .d-url,.lp-svc .d-stat span,
.lp-svc .dt-row,.lp-svc .dt-row.header{color:#A0A0A0 !important}

/* ── 3. v2.4 - fixed-dark element text forcing ──────────────── */
.lp-svc .terminal-wrap,
.lp-svc .terminal-wrap *,
.lp-svc .terminal,
.lp-svc .terminal *,
.lp-svc .marquee-wrap,
.lp-svc .marquee-wrap *,
.lp-svc .p-step.active,
.lp-svc .p-step.active *,
.lp-svc .p-step:hover,
.lp-svc .p-step:hover *,
.lp-svc .eco-box:hover,
.lp-svc .eco-box:hover *,
.lp-svc .erp-card:hover,
.lp-svc .erp-card:hover *{color:#F0F0F0}
.lp-svc .term-title,
.lp-svc .terminal-wrap h3{color:#FFFFFF !important}
.lp-svc .term-desc{color:#A0A0A0 !important}
.lp-svc .terminal,
.lp-svc .terminal .type-line{color:#4AE6C8}
.lp-svc .terminal .l5{color:#FFFFFF !important}
.lp-svc .terminal .l6{color:var(--c-orange,#E68900) !important;font-weight:bold}

/* brutal-highlight with proper multi-line support */
.lp-svc .brutal-highlight{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ── 4. v2.5 - Mobile hardening (bulletproof) ──────────────── */
@media (max-width:640px){
  html .lp-svc,html .lp-svc *{max-width:100%}
  html .lp-svc h2,html .lp-svc h3,
  html .lp-svc .hero-title,html .lp-svc .sec-title,
  html .lp-svc .bento-card h3,html .lp-svc .b-card h3,
  html .lp-svc .term-title{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    hyphens:auto !important;
    -webkit-hyphens:auto !important;
    letter-spacing:0 !important;   /* Safari iOS clips glyphs on uppercase + negative LS */
    max-width:100% !important;
  }
  html .lp-svc .bento-card h3,
  html .lp-svc .b-card h3{
    font-size:1.05rem !important;
    line-height:1.2 !important;
  }
  html .lp-svc .bento-card,
  html .lp-svc .b-card,
  html .lp-svc .eco-box,
  html .lp-svc .erp-card{
    padding:22px 18px !important;
    clip-path:none !important;     /* clip-path + overflow = text clipping */
  }
  html .lp-svc .hero-title{
    font-size:clamp(1.6rem,7vw,2.2rem) !important;
    letter-spacing:-0.01em !important;
    line-height:1.08 !important;
  }
  html .lp-svc .sec-title{
    font-size:clamp(1.5rem,6.5vw,2rem) !important;
    line-height:1.12 !important;
  }
  html .lp-svc .hero{
    padding:calc(var(--header-h, 65px) + 24px) 0 40px !important;
    gap:28px !important;
  }
  html .lp-svc .brutal-highlight{
    white-space:normal !important;
    display:inline !important;
    background:linear-gradient(transparent 72%,var(--c-orange,#E68900) 72%,var(--c-orange,#E68900) 92%,transparent 92%) !important;
    padding:0 2px !important;
    -webkit-box-decoration-break:clone !important;
    box-decoration-break:clone !important;
  }
  html .lp-svc .brutal-highlight::after{display:none !important}
  html .lp-svc .brutal-label{
    transform:none !important;
    clip-path:none !important;
    padding:2px 10px !important;
    box-shadow:3px 3px 0 var(--c-orange,#E68900) !important;
    white-space:normal !important;
  }
  /* Terminal/dash - compact, no scale transforms */
  html .lp-svc .terminal-wrap{padding:20px 16px !important}
  html .lp-svc .terminal{padding:14px !important;font-size:.7rem !important}
  html .lp-svc .term-title{font-size:1.3rem !important}
  html .lp-svc .dash-table,
  html .lp-svc .css-dash{transform:none !important;padding:16px !important}
  /* Final safety: clip stray horizontal scroll from ::before/::after */
  html .lp-svc{overflow-x:clip}
}

/* Stack hero columns on mobile (common pattern across pages) */
@media (max-width:640px){
  html .lp-svc .hero-row,
  html .lp-svc .pipeline-wrap{
    display:block !important;
    grid-template-columns:1fr !important;
    grid-template-areas:none !important;
  }
  html .lp-svc .hero-row > *{width:100%;margin-bottom:28px}
  html .lp-svc .hero-row > *:last-child{margin-bottom:0}
}

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 - Eyebrow H1 SEO contract (Session 3, Stage 4.0 micro-patch)
   <h1 class="hero-eyebrow"> - мелкий оранжевый kicker (SEO).
   <div class="hero-title-display"> / <div class="hero-title"> - креативный hero.
   Защитный слой: повышенная специфичность (html .lp-svc .hero-eyebrow = 0,0,1,2)
   побеждает любые .lp-svc h1 правила без !important.
   ────────────────────────────────────────────────────────────────────────── */
html .lp-svc .hero-eyebrow{
  font-family:var(--f-m,'JetBrains Mono',monospace);
  font-size:clamp(0.7rem,2.4vw,0.75rem);
  font-weight:700;
  color:var(--c-brand,#FF9800);
  text-transform:uppercase;
  letter-spacing:0.15em;
  line-height:1.4;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  -webkit-hyphens:none;
  max-width:100%;
}
@media (max-width:640px){
  html .lp-svc .hero-eyebrow{
    font-size:0.65rem;
    margin-bottom:18px;
    letter-spacing:0.12em;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 - Reading rhythm (Stage 4: prevent stuck section transitions)
   .lp-svc * { margin:0 } reset убил default <p>/<ul>/<ol> margin.
   Восстанавливаем минимальный rhythm + обнуляем у :last-child чтобы
   секции не накапливали 24px дополнительного зазора на стыке.
   ────────────────────────────────────────────────────────────────────────── */
.lp-svc p,
.lp-svc ul,
.lp-svc ol,
.lp-svc blockquote{ margin-bottom: 1em; }

.lp-svc p:last-child,
.lp-svc ul:last-child,
.lp-svc ol:last-child,
.lp-svc blockquote:last-child,
.lp-svc > section > :last-child,
.lp-svc > header > :last-child{ margin-bottom: 0 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 - Section padding scale (Stage 4: unified vertical rhythm)
   Replaces 20+ inline overrides with single source of truth.
   Mobile / Tablet / Desktop = 60 / 80 / 120 px vertical.
   ────────────────────────────────────────────────────────────────────────── */
.lp-svc section{ padding: 120px 0; }
@media (max-width: 1024px){
  .lp-svc section{ padding: 80px 0; }
}
@media (max-width: 640px){
  .lp-svc section{ padding: 60px 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 - Hero clearance (header-h unified)
   First section/header inside .lp-svc needs extra top padding for fixed nav.
   tokens.css defines --header-h: 65px (the actual header height).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .lp-svc > header.hero,
  .lp-svc > section:first-of-type{
    padding-top: calc(var(--header-h, 65px) + 32px);
  }
}

/* ===== LP-SVC-WEB (tvorba-webu page CSS) ===== */
/* ── LP v2.6 - Theme-aware page chrome ── */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{background:#0A0A0A;color:#F0F0F0;transition:background .3s,color .3s}
html[data-theme="light"] body{background:#FAFAFA;color:#1A1A1A}
html .lp-svc.svc-web,
.lp-svc.svc-web{
  min-height:calc(100vh - 120px);
  --c-paper:#0A0A0A;--c-card:#141414;--c-ink:#F0F0F0;
  --c-ink-light:#A0A0A0;--c-border:#222222;
  --c-orange:#E68900;--c-orange-hover:#FF9800;
  --c-terminal:#050505;--c-matrix:#4AE6C8;
  background:var(--c-paper);color:var(--c-ink);
  transition:background .3s,color .3s;
  overflow-x:clip;position:relative;
}
html[data-theme="light"] .lp-svc.svc-web{
  --c-paper:#FAFAFA;--c-card:#FFFFFF;--c-ink:#1A1A1A;
  --c-ink-light:#666666;--c-border:#E5E5E5;
}
/* Contrast inversion */
.lp-svc.svc-web .card-wf,
.lp-svc.svc-web .process-sec{background:#F0F0F0;color:#0A0A0A}
html[data-theme="light"] .lp-svc.svc-web .card-wf,
html[data-theme="light"] .lp-svc.svc-web .process-sec{background:#1A1A1A;color:#F0F0F0}
.lp-svc.svc-web { 
  background: var(--c-paper); 
  color: var(--c-ink); 
  font-family: var(--f-b); 
  line-height: 1.6; 
  overflow-x: hidden; 
  -webkit-font-smoothing: antialiased;
}
.lp-svc.svc-web .container { max-width: 1450px; margin: 0 auto; padding: 0 40px; }

/* ── TYPOGRAPHIC EFFECTS ── */
.lp-svc.svc-web .brutal-label {
  display: inline-block;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 0 20px;
  line-height: 1.1;
  clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 96%);
  transform: translateY(-8px) rotate(-2deg);
  box-shadow: 8px 8px 0 var(--c-orange);
  margin-right: 8px;
}
.lp-svc.svc-web .brutal-highlight {
  position: relative;
  display: inline-block;
  color: var(--c-ink);
  z-index: 1;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lp-svc.svc-web .brutal-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: -4px;
  width: calc(100% + 8px);
  height: 45%;
  background: var(--c-orange);
  z-index: -1;
  transform: rotate(-1deg);
}
.lp-svc.svc-web .section-tag {
  font-family: var(--f-m);
  font-size: 0.7rem;
  color: var(--c-orange);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.lp-svc.svc-web .section-tag::before { content: ""; width: 24px; height: 2px; background: var(--c-orange); }

/* ── HERO v2 - INTEGRATED MOCKUP ── */
.lp-svc.svc-web .hero {
  padding: 120px 0 80px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
.lp-svc.svc-web .hero-eyebrow {
  font-family: var(--f-m);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-orange);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}
.lp-svc.svc-web .hero-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--c-orange);
  flex-shrink: 0;
}
.lp-svc.svc-web .hero-title-display {
  font-family: var(--f-d);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--c-ink);
}
.lp-svc.svc-web .hero-perex {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--c-ink-light);
  max-width: 600px;
  margin-bottom: 48px;
  border-left: 2px solid var(--c-orange);
  padding-left: 24px;
  line-height: 1.7;
}
.lp-svc.svc-web .btn-brutal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-orange);
  color: var(--c-ink);
  font-family: var(--f-d);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 24px 48px;
  text-decoration: none;
  clip-path: polygon(1% 0%, 100% 2%, 99% 100%, 0% 97%);
  transition: all 0.4s var(--ease);
}
.lp-svc.svc-web .btn-brutal:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  transform: translateY(-4px);
  clip-path: polygon(0% 2%, 99% 0%, 100% 98%, 1% 100%);
}

/* === HERO MOCKUP - Browser-window frame === */
.lp-svc.svc-web .hero-mockup {
  position: relative;
  width: 100%;
  height: 540px;
  perspective: 1200px;
}
.lp-svc.svc-web .hm-window {
  position: relative;
  width: calc(100% - 50px);   /* 25px gutter na obě strany pro badges + shadow */
  height: 100%;
  margin: 0 auto;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 10px 10px 0 var(--c-orange);
  transform: rotate(-1deg);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.lp-svc.svc-web .hm-window:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 12px 12px 0 var(--c-orange);
}
.lp-svc.svc-web .hm-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.lp-svc.svc-web .hm-dots { display: flex; gap: 7px; flex-shrink: 0; }
.lp-svc.svc-web .hm-dots i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-border);
}
.lp-svc.svc-web .hm-dots i:nth-child(1) { background: #ff5f56; }
.lp-svc.svc-web .hm-dots i:nth-child(2) { background: #ffbd2e; }
.lp-svc.svc-web .hm-dots i:nth-child(3) { background: #27c93f; }
.lp-svc.svc-web .hm-url {
  flex: 1;
  font-family: var(--f-m);
  font-size: 0.78rem;
  color: var(--c-ink-light);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: 7px 16px;
  text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-svc.svc-web .hm-url::before {
  content: "🔒 ";
  opacity: 0.6;
  font-size: 0.7rem;
}
.lp-svc.svc-web .hm-screen {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--c-paper);
}
.lp-svc.svc-web .hm-screen img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.08);
  opacity: 0.85;
  transition: opacity 0.6s, filter 0.6s;
}
.lp-svc.svc-web .hm-window:hover .hm-screen img {
  opacity: 1;
  filter: grayscale(0%) contrast(1);
}
.lp-svc.svc-web .hm-screen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(230,137,0,0.12) 100%);
  pointer-events: none;
}
.lp-svc.svc-web .hv-badge {
  position: absolute;
  background: var(--c-card);
  border: 2px solid var(--c-ink);
  padding: 20px 24px;
  box-shadow: 8px 8px 0 var(--c-orange);
  font-family: var(--f-d);
  z-index: 3;
  transition: transform 0.4s var(--ease);
}
.lp-svc.svc-web .hv-badge:hover { transform: translate(-2px, -2px) rotate(0deg) !important; }
.lp-svc.svc-web .badge-1 { bottom: 12%; left: 0; transform: rotate(-3deg); }
.lp-svc.svc-web .badge-2 { top: 14%; right: 0; transform: rotate(3deg); }
.lp-svc.svc-web .hv-badge strong { display: block; font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--c-ink); }
.lp-svc.svc-web .hv-badge span { font-family: var(--f-m); font-size: 0.65rem; color: var(--c-ink-light); text-transform: uppercase; letter-spacing: 0.12em; }

/* ── SECTION 01: PLATFORMS (BENTO) ── */
.lp-svc.svc-web .platforms-sec { padding: 120px 0; border-top: 1px solid var(--c-border); }
.lp-svc.svc-web .sec-title {
  font-family: var(--f-d);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 64px;
  max-width: 1000px;
}
.lp-svc.svc-web .bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-svc.svc-web .b-card {
  padding: 48px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease);
}
.lp-svc.svc-web .b-card:hover { transform: translateY(-8px); }
.lp-svc.svc-web .b-card-tag { font-family: var(--f-m); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 24px; display: block; }
.lp-svc.svc-web .b-card h3 { font-family: var(--f-d); font-size: 2.5rem; font-weight: 900; margin-bottom: 16px; letter-spacing: -0.02em; }
.lp-svc.svc-web .b-card p { font-size: 1.05rem; margin-bottom: 32px; line-height: 1.6; }
.lp-svc.svc-web .b-list { list-style: none; margin-top: auto; }
.lp-svc.svc-web .b-list li { margin-bottom: 12px; display: flex; gap: 12px; font-weight: 600; font-size: 0.95rem; }
.lp-svc.svc-web .b-list li::before { content: "✓"; font-family: var(--f-m); }
.lp-svc.svc-web .card-wp {
  background: var(--c-card); border: 1px solid var(--c-border);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 97%);
}
.lp-svc.svc-web .card-wp .b-card-tag { color: var(--c-ink-light); }
.lp-svc.svc-web .card-wp p { color: var(--c-ink-light); }
.lp-svc.svc-web .card-wp .b-list li::before { color: var(--c-orange); }
.lp-svc.svc-web .card-wf {
  background: var(--c-ink); color: var(--c-paper);
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}
.lp-svc.svc-web .card-wf .b-card-tag { color: var(--c-orange); }
.lp-svc.svc-web .card-wf p { color: #666666; }
.lp-svc.svc-web .card-wf .b-list li { color: var(--c-paper); }
.lp-svc.svc-web .card-wf .b-list li::before { color: var(--c-orange); }
.lp-svc.svc-web .trending-badge { position: absolute; top: 0; right: 40px; background: var(--c-orange); color: var(--c-ink); font-family: var(--f-m); font-size: 0.6rem; font-weight: 800; padding: 6px 12px; text-transform: uppercase; }
.lp-svc.svc-web .card-next {
  background: var(--c-orange); color: var(--c-ink);
  clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%);
}
.lp-svc.svc-web .card-next .b-card-tag { color: var(--c-ink); opacity: 0.6; }
.lp-svc.svc-web .card-next p { color: var(--c-ink); opacity: 0.8; }
.lp-svc.svc-web .card-next .b-list li { color: var(--c-ink); }
.lp-svc.svc-web .card-next .b-list li::before { color: var(--c-paper); }

/* ── SECTION 02: PHILOSOPHY ── */
.lp-svc.svc-web .philo-sec { padding: 120px 0; border-top: 1px solid var(--c-border); }
.lp-svc.svc-web .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 80px;
}
.lp-svc.svc-web .stat-item { position: relative; }
.lp-svc.svc-web .stat-num {
  font-family: var(--f-d);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--c-orange);
  margin-bottom: 16px;
  display: block;
}
.lp-svc.svc-web .stat-item h4 { font-family: var(--f-d); font-size: 1.2rem; font-weight: 800; margin-bottom: 12px; }
.lp-svc.svc-web .stat-item p { color: var(--c-ink-light); font-size: 1rem; }

/* ── SECTION 03: PROCESS - REDESIGNED v2 ── */
.lp-svc.svc-web .process-sec {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 140px 0;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  margin-top: -40px;
}
.lp-svc.svc-web .process-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  border: 1px solid #2a2a2a;
}
.lp-svc.svc-web .p-step-v2 {
  background: var(--c-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #2a2a2a;
  transition: background 0.3s;
}
.lp-svc.svc-web .p-step-v2:last-child { border-right: none; }
.lp-svc.svc-web .p-step-v2:hover { background: #1a1a1a; }
.lp-svc.svc-web .p-step-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 32px 0;
  height: 130px;
  position: relative;
}
.lp-svc.svc-web .p-step-num {
  font-family: var(--f-d);
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #333;
  letter-spacing: -0.03em;
  transition: all 0.4s var(--ease);
  pointer-events: none;
}
.lp-svc.svc-web .p-step-arrow {
  font-family: var(--f-m);
  color: #444;
  font-size: 1.4rem;
  transition: color 0.3s, transform 0.4s var(--ease);
}
.lp-svc.svc-web .p-step-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 24px 32px 0;
  position: relative;
  transition: background 0.3s;
}
.lp-svc.svc-web .p-step-body {
  padding: 28px 32px 40px;
  flex: 1;
}
.lp-svc.svc-web .p-step-body h3 {
  font-family: var(--f-d);
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.lp-svc.svc-web .p-step-body p {
  color: #888;
  font-size: 0.95rem;
  line-height: 1.65;
}
/* Active + hover states */
.lp-svc.svc-web .p-step-v2:hover .p-step-num,
.lp-svc.svc-web .p-step-v2.active .p-step-num {
  -webkit-text-stroke: 1.5px var(--c-orange);
  color: rgba(230,137,0,0.08);
}
.lp-svc.svc-web .p-step-v2:hover .p-step-arrow,
.lp-svc.svc-web .p-step-v2.active .p-step-arrow {
  color: var(--c-orange);
  transform: translate(3px, -3px);
}
.lp-svc.svc-web .p-step-v2:hover .p-step-divider,
.lp-svc.svc-web .p-step-v2.active .p-step-divider { background: var(--c-orange); }
.lp-svc.svc-web .p-step-v2.active { background: #111; }
.lp-svc.svc-web .p-step-v2.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--c-orange);
}

/* ── SECTION 04: FAQ v2 - Categorized accordion ── */
.lp-svc.svc-web .faq-sec { padding: 140px 0; background: var(--c-paper); }
.lp-svc.svc-web .faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}
.lp-svc.svc-web .faq-left { position: sticky; top: 80px; }
.lp-svc.svc-web .faq-left h2 { 
  font-family: var(--f-d); 
  font-size: clamp(2.2rem, 4vw, 3.4rem); 
  font-weight: 900; 
  line-height: 1.05; 
  letter-spacing: -0.03em; 
  margin-bottom: 24px; 
}
.lp-svc.svc-web .faq-left p { color: var(--c-ink-light); font-size: 1.1rem; line-height: 1.7; max-width: 380px; }

/* === FAQ left - Direct contact card + mini stats === */
.lp-svc.svc-web .faq-contact-card {
  margin-top: 36px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: 24px;
  position: relative;
  clip-path: polygon(2% 0, 100% 1%, 98% 100%, 0% 99%);
  box-shadow: 6px 6px 0 var(--c-orange);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.lp-svc.svc-web .faq-contact-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--c-orange);
}
.lp-svc.svc-web .faq-cc-label {
  font-family: var(--f-m);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-orange);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-svc.svc-web .faq-cc-dot {
  width: 8px; height: 8px;
  background: var(--c-orange);
  border-radius: 50%;
  flex-shrink: 0;
  animation: faqCcPulse 1.6s ease-in-out infinite;
}
@keyframes faqCcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,137,0,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(230,137,0,0); }
}
.lp-svc.svc-web .faq-cc-email {
  display: block;
  font-family: var(--f-m);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  margin-bottom: 6px;
  word-break: break-all;
  transition: color 0.3s;
}
.lp-svc.svc-web .faq-cc-email:hover { color: var(--c-orange); }
.lp-svc.svc-web .faq-cc-sub {
  font-size: 0.82rem;
  color: var(--c-ink-light);
  line-height: 1.5;
  margin-bottom: 18px;
}
.lp-svc.svc-web .faq-cc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--f-m);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ink);
  text-decoration: none;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  transition: color 0.3s;
}
.lp-svc.svc-web .faq-cc-cta span { color: var(--c-orange); transition: transform 0.3s; }
.lp-svc.svc-web .faq-cc-cta:hover { color: var(--c-orange); }
.lp-svc.svc-web .faq-cc-cta:hover span { transform: translateX(4px); }

.lp-svc.svc-web .faq-stats-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.lp-svc.svc-web .faq-stat-mini {
  padding: 18px 16px;
  border: 1px solid var(--c-border);
  background: var(--c-paper);
  transition: border-color 0.3s, transform 0.3s;
}
.lp-svc.svc-web .faq-stat-mini:hover {
  border-color: var(--c-orange);
  transform: translateY(-3px);
}
.lp-svc.svc-web .faq-stat-mini strong {
  display: block;
  font-family: var(--f-d);
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--c-orange);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.lp-svc.svc-web .faq-stat-mini span {
  font-size: 0.74rem;
  color: var(--c-ink-light);
  line-height: 1.4;
  display: block;
  letter-spacing: 0.02em;
}

.lp-svc.svc-web .accordion-v2 { display: flex; flex-direction: column; }
.lp-svc.svc-web .faq-item {
  border-bottom: 1px solid var(--c-border);
  position: relative;
  transition: padding 0.35s var(--ease), background 0.35s var(--ease);
}
.lp-svc.svc-web .faq-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.lp-svc.svc-web .faq-item[open]::before { transform: scaleY(1); }
.lp-svc.svc-web .faq-item[open] { padding-left: 24px; }
.lp-svc.svc-web .faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 24px;
  font-family: var(--f-b);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-ink);
  transition: color 0.3s;
  outline: none;
}
.lp-svc.svc-web .faq-item > summary::-webkit-details-marker { display: none; }
.lp-svc.svc-web .faq-item > summary::marker { content: ""; }
.lp-svc.svc-web .faq-cat {
  font-family: var(--f-m);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-ink-light);
  padding: 5px 10px;
  border: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s;
  font-weight: 700;
}
.lp-svc.svc-web .faq-item:hover summary { color: var(--c-orange); }
.lp-svc.svc-web .faq-item[open] summary { color: var(--c-orange); }
.lp-svc.svc-web .faq-item:hover .faq-cat,
.lp-svc.svc-web .faq-item[open] .faq-cat {
  color: var(--c-orange);
  border-color: var(--c-orange);
  background: rgba(230,137,0,0.06);
}
.lp-svc.svc-web .faq-answer {
  padding: 0 0 32px 124px;
  color: var(--c-ink-light);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 760px;
  animation: faqOpen 0.4s var(--ease);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.lp-svc.svc-web .icon-plus {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.lp-svc.svc-web .icon-plus::before,
.lp-svc.svc-web .icon-plus::after {
  content: '';
  position: absolute;
  background: var(--c-orange);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.lp-svc.svc-web .icon-plus::before { width: 100%; height: 2px; }
.lp-svc.svc-web .icon-plus::after { width: 2px; height: 100%; }
.lp-svc.svc-web .faq-item[open] .icon-plus { transform: rotate(135deg); }

/* ── FINAL CTA ── */
.lp-svc.svc-web .final-cta {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 120px 40px;
  text-align: center;
  clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
  margin-bottom: 60px;
}
.lp-svc.svc-web .final-cta p {
  font-family: var(--f-d);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  max-width: 800px;
  margin: 0 auto 48px;
}
.lp-svc.svc-web .final-cta a {
  color: var(--c-orange);
  font-family: var(--f-m);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: 0.3s;
}
.lp-svc.svc-web .final-cta a::after { content: '→'; transition: transform 0.3s; }
.lp-svc.svc-web .final-cta a:hover { color: var(--c-paper); }
.lp-svc.svc-web .final-cta a:hover::after { transform: translateX(8px); }

/* ── Tablet ── */
@media (max-width: 1024px) {
  .lp-svc.svc-web .hero, .lp-svc.svc-web .faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .lp-svc.svc-web .hero-mockup { height: 420px; max-width: 600px; }
  .lp-svc.svc-web .bento-grid, .lp-svc.svc-web .stats-grid { grid-template-columns: 1fr; }
  .lp-svc.svc-web .process-grid-v2 { grid-template-columns: 1fr 1fr; }
  .lp-svc.svc-web .p-step-v2:nth-child(2) { border-right: none; }
  .lp-svc.svc-web .p-step-v2:nth-child(1), .lp-svc.svc-web .p-step-v2:nth-child(2) { border-bottom: 1px solid #2a2a2a; }
  .lp-svc.svc-web .process-sec { clip-path: none; margin-top: 0; padding: 80px 0; }
  .lp-svc.svc-web .faq-left { position: static; }
  .lp-svc.svc-web .card-wp, .lp-svc.svc-web .card-wf, .lp-svc.svc-web .card-next { clip-path: none; }
  .lp-svc.svc-web .faq-item > summary { grid-template-columns: 86px 1fr auto; gap: 18px; }
  .lp-svc.svc-web .faq-answer { padding-left: 104px; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .lp-svc.svc-web .container { padding: 0 20px !important; }
  .lp-svc.svc-web .hero, .lp-svc.svc-web .bento-grid, .lp-svc.svc-web .stats-grid,
  .lp-svc.svc-web .process-grid-v2, .lp-svc.svc-web .faq-layout,
  .lp-svc.svc-web [class*="-grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  .lp-svc.svc-web .p-step-v2 { border-right: none !important; border-bottom: 1px solid #2a2a2a; }
  .lp-svc.svc-web .p-step-v2:last-child { border-bottom: none; }
  .lp-svc.svc-web .p-step-head { height: auto; padding: 24px 24px 0; }
  .lp-svc.svc-web .p-step-body { padding: 20px 24px 32px; }
  .lp-svc.svc-web .p-step-num { font-size: 3.5rem; }
  .lp-svc.svc-web .hero-eyebrow { font-size: 0.65rem; margin-bottom: 18px; }
  .lp-svc.svc-web .hero-title-display { 
    font-size: clamp(2rem, 8vw, 2.8rem) !important; 
    line-height: 1.05 !important; 
    letter-spacing: -0.01em !important;
  }
  .lp-svc.svc-web .sec-title, .lp-svc.svc-web h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.1 !important; }
  .lp-svc.svc-web h3 { font-size: 1.4rem !important; }
  .lp-svc.svc-web .hero-perex, .lp-svc.svc-web p { font-size: .95rem !important; }
  .lp-svc.svc-web .hv-badge, .lp-svc.svc-web .trending-badge, .lp-svc.svc-web [class*="-badge"] { display: none !important; }
  .lp-svc.svc-web [class*="card-"], .lp-svc.svc-web .process-sec, .lp-svc.svc-web .final-cta { clip-path: none !important; margin-top: 0 !important; }
  .lp-svc.svc-web .hm-window { transform: rotate(0); box-shadow: 0 20px 40px rgba(0,0,0,.4), 8px 8px 0 var(--c-orange); }
  .lp-svc.svc-web .hero-mockup { height: 280px; }
  .lp-svc.svc-web .brutal-label {
    padding: 0 12px !important;
    transform: none !important;
    clip-path: none !important;
    box-shadow: 3px 3px 0 var(--c-orange) !important;
    margin-right: 4px !important;
    display: inline-block !important;
  }
  .lp-svc.svc-web .btn-brutal, .lp-svc.svc-web .final-cta a { width: 100%; text-align: center; box-sizing: border-box; padding: 14px 20px !important; }
  .lp-svc.svc-web .section-tag { font-size: 0.65rem !important; margin-bottom: 16px !important; }
  .lp-svc.svc-web .faq-left { position: static !important; margin-bottom: 20px !important; }
  .lp-svc.svc-web .stat-num { font-size: clamp(3rem, 12vw, 5rem) !important; }
  .lp-svc.svc-web img { max-width: 100% !important; height: auto !important; }
  .lp-svc.svc-web .brutal-highlight { 
    white-space: normal !important; 
    display: inline !important; 
    background: linear-gradient(transparent 70%, var(--c-orange) 70%, var(--c-orange) 92%, transparent 92%) !important;
    padding: 0 3px !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }
  .lp-svc.svc-web .brutal-highlight::after { display: none !important; }
  .lp-svc.svc-web header.hero { padding-block: calc(var(--header-h, 65px) + 24px) 40px !important; padding-inline: 20px !important; gap: 28px !important; }
  .lp-svc.svc-web .faq-item > summary { grid-template-columns: 1fr auto; gap: 14px; padding: 22px 0; font-size: 1rem; }
  .lp-svc.svc-web .faq-cat { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; }
  .lp-svc.svc-web .faq-answer { padding-left: 0; padding-bottom: 24px; font-size: 0.95rem; }
  .lp-svc.svc-web .faq-item[open] { padding-left: 14px; }
  .lp-svc.svc-web h2, .lp-svc.svc-web h3,
  .lp-svc.svc-web .hero-title-display, .lp-svc.svc-web .sec-title {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
  }
  .lp-svc.svc-web .b-card, .lp-svc.svc-web .bento-card { padding: 22px 18px !important; clip-path: none !important; }
  .lp-svc.svc-web .b-card h3 { font-size: 1.1rem !important; line-height: 1.2 !important; }
}
@media (max-width: 400px) {
  .lp-svc.svc-web .container { padding: 0 16px !important; }
  .lp-svc.svc-web section { padding: 48px 0 !important; }
  .lp-svc.svc-web .hero-title-display { font-size: 1.8rem !important; }
  .lp-svc.svc-web .sec-title, .lp-svc.svc-web h2 { font-size: 1.5rem !important; }
}

/* reusable service section (split blocks): no full-viewport min-height per wrapper */
.lp-svc.lp-svc--sec, .lp-svc.svc-web.lp-svc--sec, .lp-svc.svc-eshop.lp-svc--sec, .lp-svc.svc-app.lp-svc--sec, .lp-svc.svc-auto.lp-svc--sec, .lp-svc.svc-crm.lp-svc--sec, .lp-svc.svc-brand.lp-svc--sec{min-height:0}

/* ===== LP-SVC-ESHOP (tvorba-eshopu page CSS) ===== */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{background:#0A0A0A;color:#F0F0F0;transition:background .3s,color .3s}
html[data-theme="light"] body{background:#FAFAFA;color:#1A1A1A}
html .lp-svc.svc-eshop,
.lp-svc.svc-eshop{
  min-height:calc(100vh - 120px);
  --c-paper:#0A0A0A;--c-card:#141414;--c-ink:#F0F0F0;
  --c-ink-light:#A0A0A0;--c-border:#222222;
  --c-orange:#E68900;--c-orange-hover:#FF9800;
  background:var(--c-paper);color:var(--c-ink);
  transition:background .3s,color .3s;
  overflow-x:clip;position:relative;
}
html[data-theme="light"] .lp-svc.svc-eshop{
  --c-paper:#FAFAFA;--c-card:#FFFFFF;--c-ink:#1A1A1A;
  --c-ink-light:#666666;--c-border:#E5E5E5;
}
.lp-svc.svc-eshop .eco-sec{background:var(--c-ink);color:var(--c-paper)}
html[data-theme="light"] .lp-svc.svc-eshop .eco-sec{background:#1A1A1A;color:#F0F0F0}
.lp-svc.svc-eshop { 
  background: var(--c-paper); 
  color: var(--c-ink); 
  font-family: var(--f-b); 
  line-height: 1.6; 
  overflow-x: hidden; 
  -webkit-font-smoothing: antialiased;
}
.lp-svc.svc-eshop .container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

.lp-svc.svc-eshop .brutal-label {
  display: inline-block;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 0 20px;
  line-height: 1.1;
  clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 96%);
  transform: translateY(-8px) rotate(1deg);
  margin-top:10px;
  box-shadow: 8px 8px 0 var(--c-orange);
  margin-right: 8px;
}
.lp-svc.svc-eshop .brutal-highlight {
  position: relative;
  display: inline-block;
  color: var(--c-ink);
  z-index: 1;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lp-svc.svc-eshop .brutal-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px; left: -4px;
  width: calc(100% + 8px);
  height: 45%;
  background: var(--c-orange);
  z-index: -1;
  transform: rotate(-1deg);
}
.lp-svc.svc-eshop .section-tag {
  font-family: var(--f-m);
  font-size: 0.7rem;
  color: var(--c-orange);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.lp-svc.svc-eshop .section-tag::before { content: ""; width: 24px; height: 2px; background: var(--c-orange); }

.lp-svc.svc-eshop .btn-brutal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-orange);
  color: var(--c-ink);
  font-family: var(--f-d);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 24px 48px;
  text-decoration: none;
  clip-path: polygon(1% 0%, 100% 2%, 99% 100%, 0% 97%);
  transition: all 0.4s var(--ease);
}
.lp-svc.svc-eshop .btn-brutal:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  transform: translateY(-4px);
  clip-path: polygon(0% 2%, 99% 0%, 100% 98%, 1% 100%);
}

.lp-svc.svc-eshop .ghost-text {
  position: absolute;
  top: 15%; left: -5%;
  font-family: var(--f-d);
  font-size: clamp(150px, 22vw, 320px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,152,0,0.04);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  line-height: 1;
}

/* ── HERO v2 ── */
.lp-svc.svc-eshop .hero {
  padding: 120px 0 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  position: relative;
}
.lp-svc.svc-eshop .hero-text { position: relative; z-index: 2; min-width: 0; }
.lp-svc.svc-eshop .nowrap { white-space: nowrap; }
.lp-svc.svc-eshop .hero-eyebrow {
  font-family: var(--f-m);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-orange);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}
.lp-svc.svc-eshop .hero-eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--c-orange);
  flex-shrink: 0;
}
.lp-svc.svc-eshop .hero-title-display {
  font-family: var(--f-d);
  font-size: clamp(2.2rem, 4.3vw, 4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--c-ink);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
.lp-svc.svc-eshop .hero-title-display .nowrap { white-space: nowrap; }
.lp-svc.svc-eshop .hero-perex {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--c-ink-light);
  max-width: 600px;
  margin-bottom: 48px;
  border-left: 2px solid var(--c-orange);
  padding-left: 24px;
  line-height: 1.7;
}

.lp-svc.svc-eshop .hero-visual {
  position: relative;
  height: 560px;
  width: 100%;
  z-index: 2;
}
.lp-svc.svc-eshop .hv-img-1 {
  width: 68%; height: 78%;
  position: absolute;
  left: 8%; top: 12%;
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 98%);
  background: var(--c-ink);
  overflow: hidden;
  box-shadow: 20px 20px 60px rgba(0,0,0,0.15);
}
.lp-svc.svc-eshop .hv-img-2 {
  width: 48%; height: 58%;
  position: absolute;
  right: 0; top: 0;
  clip-path: polygon(0 0, 100% 2%, 98% 100%, 2% 98%);
  overflow: hidden;
  border: 4px solid var(--c-paper);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.lp-svc.svc-eshop .hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  transition: 0.5s var(--ease);
}
.lp-svc.svc-eshop .hero-visual:hover img { filter: grayscale(0%); }
.lp-svc.svc-eshop .hv-badge {
  position: absolute;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 16px 22px;
  box-shadow: -8px 8px 0 var(--c-orange);
  font-family: var(--f-d);
  z-index: 3;
  transition: transform 0.4s var(--ease);
}
.lp-svc.svc-eshop .hv-badge:hover { transform: translate(2px, -2px) rotate(0deg) !important; }
.lp-svc.svc-eshop .badge-1 { bottom: 16%; right: 6%; transform: rotate(3deg); }
.lp-svc.svc-eshop .badge-2 { top: 8%; left: 0; transform: rotate(-2deg); }
.lp-svc.svc-eshop .hv-badge strong { display: block; font-size: 1.7rem; font-weight: 900; line-height: 1; color: var(--c-orange); }
.lp-svc.svc-eshop .hv-badge span { font-family: var(--f-m); font-size: 0.6rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; }

/* ── 02 ARCHITECTURE - REDESIGNED ── */
.lp-svc.svc-eshop .arch-sec { padding: 120px 0; border-top: 1px solid var(--c-border); }
.lp-svc.svc-eshop .sec-title {
  font-family: var(--f-d);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 64px;
  max-width: 1100px;
}

.lp-svc.svc-eshop .plat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.lp-svc.svc-eshop .plat-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: 36px 30px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.lp-svc.svc-eshop .plat-card:hover {
  transform: translateY(-8px);
  border-color: var(--c-orange);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.lp-svc.svc-eshop .plat-shopify {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}
.lp-svc.svc-eshop .plat-shopify::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--c-orange);
}
.lp-svc.svc-eshop .plat-ribbon {
  position: absolute;
  top: 16px; right: -36px;
  background: var(--c-orange);
  color: var(--c-ink);
  font-family: var(--f-m);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 40px;
  transform: rotate(35deg);
  z-index: 2;
}
.lp-svc.svc-eshop .plat-best {
  font-family: var(--f-m);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 18px;
  font-weight: 700;
  display: inline-block;
}
.lp-svc.svc-eshop .plat-card h3 {
  font-family: var(--f-d);
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lp-svc.svc-eshop .plat-shopify h3 { color: var(--c-orange); }
.lp-svc.svc-eshop .plat-card p {
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 22px;
}
.lp-svc.svc-eshop .plat-shopify p { color: #999; }
.lp-svc.svc-eshop .plat-shoptet p, .lp-svc.svc-eshop .plat-woo p { color: var(--c-ink-light); }
.lp-svc.svc-eshop .plat-feats { list-style: none; margin-bottom: 24px; flex-grow: 1; }
.lp-svc.svc-eshop .plat-feats li {
  display: flex; gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.45;
}
.lp-svc.svc-eshop .plat-feats li::before {
  content: "✓";
  color: var(--c-orange);
  font-family: var(--f-m);
  flex-shrink: 0;
}
.lp-svc.svc-eshop .plat-stack {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lp-svc.svc-eshop .plat-shopify .plat-stack { border-color: #2a2a2a; }
.lp-svc.svc-eshop .plat-shoptet .plat-stack, .lp-svc.svc-eshop .plat-woo .plat-stack { border-color: var(--c-border); }
.lp-svc.svc-eshop .plat-stack span {
  font-family: var(--f-m);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(230,137,0,0.08);
  color: var(--c-orange);
  border: 1px solid rgba(230,137,0,0.22);
}

.lp-svc.svc-eshop .plat-spotlight {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--c-card);
  border: 2px solid var(--c-ink);
  padding: 48px;
  position: relative;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
}
.lp-svc.svc-eshop .plat-spotlight::before {
  content: "↗";
  position: absolute;
  top: 24px; right: 32px;
  font-family: var(--f-m);
  color: var(--c-orange);
  font-size: 1.4rem;
}
.lp-svc.svc-eshop .ps-tag {
  font-family: var(--f-m);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 16px;
  display: block;
  font-weight: 700;
}
.lp-svc.svc-eshop .plat-spotlight h3 {
  font-family: var(--f-d);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lp-svc.svc-eshop .plat-spotlight p {
  font-size: 1rem;
  color: var(--c-ink-light);
  margin-bottom: 22px;
  line-height: 1.65;
}
.lp-svc.svc-eshop .ps-feats { list-style: none; }
.lp-svc.svc-eshop .ps-feats li {
  display: flex; gap: 12px;
  font-family: var(--f-d);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 12px;
  line-height: 1.4;
}
.lp-svc.svc-eshop .ps-feats li::before { content: "↗"; color: var(--c-orange); flex-shrink: 0; }
.lp-svc.svc-eshop .ps-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lp-svc.svc-eshop .ps-stack-item {
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  padding: 18px 14px;
  font-family: var(--f-m);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
  transition: all 0.3s;
  position: relative;
  color: var(--c-ink);
}
.lp-svc.svc-eshop .ps-stack-item:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
  transform: translateY(-2px);
}
.lp-svc.svc-eshop .ps-stack-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--c-orange);
}

/* ── 03 ECOSYSTEM ── */
.lp-svc.svc-eshop .eco-sec {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 140px 0;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  margin-top: -40px;
}
.lp-svc.svc-eshop .eco-perex {
  font-size: 1.1rem; color: #888; max-width: 760px; margin-bottom: 64px; line-height: 1.7;
}
.lp-svc.svc-eshop .eco-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px; 
  background: #333; 
  border: 2px solid #333;
}
.lp-svc.svc-eshop .eco-box {
  background: var(--c-ink);
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  text-align: center;
}
.lp-svc.svc-eshop .eco-box:hover { background: #111; }
.lp-svc.svc-eshop .eco-box:hover .eco-bg-num { -webkit-text-stroke: 1px var(--c-orange); color: rgba(230, 137, 0, 0.05); transform: translateX(-50%) translateY(-10px); }
.lp-svc.svc-eshop .eco-box:hover h3 { color: var(--c-orange); }
.lp-svc.svc-eshop .eco-bg-num {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-d);
  font-size: 8rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px #222;
  pointer-events: none;
  transition: 0.4s var(--ease);
  z-index: 1;
}
.lp-svc.svc-eshop .eco-box h3 { font-family: var(--f-d); font-size: 1.3rem; font-weight: 800; margin: 40px 0 16px; position: relative; z-index: 2; transition: 0.3s; }
.lp-svc.svc-eshop .eco-box p { color: #888; font-size: 0.92rem; line-height: 1.6; position: relative; z-index: 2; }

/* ── 04 MIGRATION ── */
.lp-svc.svc-eshop .mig-sec { padding: 140px 0; background: var(--c-paper); }
.lp-svc.svc-eshop .mig-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.lp-svc.svc-eshop .mig-list { list-style: none; margin-top: 40px; }
.lp-svc.svc-eshop .mig-list li { margin-bottom: 16px; display: flex; gap: 16px; font-family: var(--f-d); font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.lp-svc.svc-eshop .mig-list li::before { content: "↗"; color: var(--c-orange); flex-shrink: 0; }
.lp-svc.svc-eshop .mig-visual {
  width: 100%;
  height: 500px;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 90%);
  overflow: hidden;
}
.lp-svc.svc-eshop .mig-visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.2);
  transition: 0.5s;
}
.lp-svc.svc-eshop .mig-visual:hover img { filter: grayscale(0%); transform: scale(1.05); }

/* ── 05 FAQ v2 ── */
.lp-svc.svc-eshop .faq-sec { padding: 140px 0; border-top: 1px solid var(--c-border); }
.lp-svc.svc-eshop .faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
.lp-svc.svc-eshop .faq-left { position: sticky; top: 80px; }
.lp-svc.svc-eshop .faq-left h2 { font-family: var(--f-d); font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 24px; }
.lp-svc.svc-eshop .faq-left p { color: var(--c-ink-light); font-size: 1.1rem; line-height: 1.7; max-width: 380px; }

.lp-svc.svc-eshop .faq-contact-card {
  margin-top: 36px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: 24px;
  position: relative;
  clip-path: polygon(2% 0, 100% 1%, 98% 100%, 0% 99%);
  box-shadow: 6px 6px 0 var(--c-orange);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.lp-svc.svc-eshop .faq-contact-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--c-orange); }
.lp-svc.svc-eshop .faq-cc-label {
  font-family: var(--f-m);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-orange);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.lp-svc.svc-eshop .faq-cc-dot {
  width: 8px; height: 8px;
  background: var(--c-orange);
  border-radius: 50%;
  flex-shrink: 0;
  animation: faqCcPulse 1.6s ease-in-out infinite;
}
@keyframes faqCcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,137,0,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(230,137,0,0); }
}
.lp-svc.svc-eshop .faq-cc-email {
  display: block;
  font-family: var(--f-m);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  margin-bottom: 6px;
  word-break: break-all;
  transition: color 0.3s;
}
.lp-svc.svc-eshop .faq-cc-email:hover { color: var(--c-orange); }
.lp-svc.svc-eshop .faq-cc-sub {
  font-size: 0.82rem;
  color: var(--c-ink-light);
  line-height: 1.5;
  margin-bottom: 18px;
}
.lp-svc.svc-eshop .faq-cc-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--f-m);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ink);
  text-decoration: none;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  transition: color 0.3s;
}
.lp-svc.svc-eshop .faq-cc-cta span { color: var(--c-orange); transition: transform 0.3s; }
.lp-svc.svc-eshop .faq-cc-cta:hover { color: var(--c-orange); }
.lp-svc.svc-eshop .faq-cc-cta:hover span { transform: translateX(4px); }

.lp-svc.svc-eshop .faq-stats-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.lp-svc.svc-eshop .faq-stat-mini {
  padding: 18px 16px;
  border: 1px solid var(--c-border);
  background: var(--c-paper);
  transition: border-color 0.3s, transform 0.3s;
}
.lp-svc.svc-eshop .faq-stat-mini:hover { border-color: var(--c-orange); transform: translateY(-3px); }
.lp-svc.svc-eshop .faq-stat-mini strong {
  display: block;
  font-family: var(--f-d);
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--c-orange);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.lp-svc.svc-eshop .faq-stat-mini span {
  font-size: 0.72rem;
  color: var(--c-ink-light);
  line-height: 1.4;
  display: block;
  letter-spacing: 0.02em;
}

.lp-svc.svc-eshop .accordion-v2 { display: flex; flex-direction: column; }
.lp-svc.svc-eshop .faq-item {
  border-bottom: 1px solid var(--c-border);
  position: relative;
  transition: padding 0.35s var(--ease), background 0.35s var(--ease);
}
.lp-svc.svc-eshop .faq-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.lp-svc.svc-eshop .faq-item[open]::before { transform: scaleY(1); }
.lp-svc.svc-eshop .faq-item[open] { padding-left: 24px; }
.lp-svc.svc-eshop .faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 24px;
  font-family: var(--f-b);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-ink);
  transition: color 0.3s;
  outline: none;
}
.lp-svc.svc-eshop .faq-item > summary::-webkit-details-marker { display: none; }
.lp-svc.svc-eshop .faq-item > summary::marker { content: ""; }
.lp-svc.svc-eshop .faq-cat {
  font-family: var(--f-m);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-ink-light);
  padding: 5px 10px;
  border: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s;
  font-weight: 700;
}
.lp-svc.svc-eshop .faq-item:hover summary,
.lp-svc.svc-eshop .faq-item[open] summary { color: var(--c-orange); }
.lp-svc.svc-eshop .faq-item:hover .faq-cat,
.lp-svc.svc-eshop .faq-item[open] .faq-cat {
  color: var(--c-orange);
  border-color: var(--c-orange);
  background: rgba(230,137,0,0.06);
}
.lp-svc.svc-eshop .faq-answer {
  padding: 0 0 32px 124px;
  color: var(--c-ink-light);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 760px;
  animation: faqOpen 0.4s var(--ease);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.lp-svc.svc-eshop .icon-plus {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.lp-svc.svc-eshop .icon-plus::before, .lp-svc.svc-eshop .icon-plus::after {
  content: '';
  position: absolute;
  background: var(--c-orange);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.lp-svc.svc-eshop .icon-plus::before { width: 100%; height: 2px; }
.lp-svc.svc-eshop .icon-plus::after { width: 2px; height: 100%; }
.lp-svc.svc-eshop .faq-item[open] .icon-plus { transform: rotate(135deg); }

.lp-svc.svc-eshop .final-cta {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 120px 40px;
  text-align: center;
  clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
  margin-bottom: 60px;
}
.lp-svc.svc-eshop .final-cta p {
  font-family: var(--f-d);
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  max-width: 880px;
  margin: 0 auto 48px;
}
.lp-svc.svc-eshop .final-cta a {
  color: var(--c-orange);
  font-family: var(--f-m);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: 0.3s;
}
.lp-svc.svc-eshop .final-cta a::after { content: '→'; transition: transform 0.3s; }
.lp-svc.svc-eshop .final-cta a:hover { color: var(--c-paper); }
.lp-svc.svc-eshop .final-cta a:hover::after { transform: translateX(8px); }

@media (max-width: 1024px) {
  .lp-svc.svc-eshop .hero, .lp-svc.svc-eshop .mig-layout, .lp-svc.svc-eshop .faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .lp-svc.svc-eshop .plat-grid { grid-template-columns: 1fr; }
  .lp-svc.svc-eshop .plat-spotlight { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .lp-svc.svc-eshop .eco-grid { grid-template-columns: 1fr 1fr; }
  .lp-svc.svc-eshop .hero-visual { height: 420px; }
  .lp-svc.svc-eshop .eco-sec { clip-path: none; margin-top: 0; padding: 80px 0; }
  .lp-svc.svc-eshop .mig-visual { clip-path: none; }
  .lp-svc.svc-eshop .faq-left { position: static; }
  .lp-svc.svc-eshop .plat-card, .lp-svc.svc-eshop .plat-spotlight { clip-path: none; }
  .lp-svc.svc-eshop .ghost-text { display: none; }
  .lp-svc.svc-eshop .faq-item > summary { grid-template-columns: 86px 1fr auto; gap: 18px; }
  .lp-svc.svc-eshop .faq-answer { padding-left: 104px; }
}

@media (max-width: 640px) {
  .lp-svc.svc-eshop .container { padding: 0 20px !important; }
  .lp-svc.svc-eshop .hero, .lp-svc.svc-eshop .plat-grid, .lp-svc.svc-eshop .plat-spotlight,
  .lp-svc.svc-eshop .eco-grid, .lp-svc.svc-eshop .mig-layout, .lp-svc.svc-eshop .faq-layout,
  .lp-svc.svc-eshop .ps-stack, .lp-svc.svc-eshop [class*="-grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  
  .lp-svc.svc-eshop .hero-eyebrow { font-size: 0.65rem; margin-bottom: 18px; }
  .lp-svc.svc-eshop .hero-title-display { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; }
  .lp-svc.svc-eshop .sec-title, .lp-svc.svc-eshop h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; line-height: 1.12 !important; }
  .lp-svc.svc-eshop h3 { font-size: 1.3rem !important; }
  .lp-svc.svc-eshop .hero-perex, .lp-svc.svc-eshop p { font-size: .95rem !important; }
  
  .lp-svc.svc-eshop .hv-badge, [class*="-badge"] { display: none !important; }
  .lp-svc.svc-eshop .plat-ribbon { top: 12px; right: -32px; padding: 4px 36px; font-size: 0.52rem; }
  
  .lp-svc.svc-eshop [class*="card-"], .lp-svc.svc-eshop [class*="plat-"], .lp-svc.svc-eshop .eco-sec, .lp-svc.svc-eshop .mig-visual, .lp-svc.svc-eshop .final-cta { clip-path: none !important; margin-top: 0 !important; }
  
  .lp-svc.svc-eshop .btn-brutal, .lp-svc.svc-eshop .final-cta a { width: 100%; text-align: center; box-sizing: border-box; padding: 14px 20px !important; }
  .lp-svc.svc-eshop .section-tag { font-size: 0.65rem !important; margin-bottom: 16px !important; }
  .lp-svc.svc-eshop .faq-left { position: static !important; margin-bottom: 20px !important; }
  
  .lp-svc.svc-eshop img { max-width: 100% !important; height: auto !important; }
  
  .lp-svc.svc-eshop .brutal-highlight { 
    white-space: normal !important; 
    display: inline !important; 
    background: linear-gradient(transparent 70%, var(--c-orange) 70%, var(--c-orange) 92%, transparent 92%) !important;
    padding: 0 3px !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }
  .lp-svc.svc-eshop .brutal-highlight::after { display: none !important; }
  .lp-svc.svc-eshop .brutal-label {
    transform: none !important; clip-path: none !important;
    box-shadow: 3px 3px 0 var(--c-orange) !important;
    padding: 2px 10px !important; margin-right: 0 !important;
    display: inline-block !important;
  }
  .lp-svc.svc-eshop header.hero { padding-block: calc(var(--header-h, 65px) + 24px) 40px !important; padding-inline: 20px !important; gap: 28px !important; }
  .lp-svc.svc-eshop .faq-item > summary { grid-template-columns: 1fr auto; gap: 14px; padding: 22px 0; font-size: 1rem; }
  .lp-svc.svc-eshop .faq-cat { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; }
  .lp-svc.svc-eshop .faq-answer { padding-left: 0; padding-bottom: 24px; font-size: 0.95rem; }
  .lp-svc.svc-eshop .faq-item[open] { padding-left: 14px; }
  
  .lp-svc.svc-eshop h2, .lp-svc.svc-eshop h3,
  .lp-svc.svc-eshop .hero-title-display, .lp-svc.svc-eshop .sec-title {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
  }
  .lp-svc.svc-eshop .hero-title-display .nowrap { white-space: normal !important; }
  
  .lp-svc.svc-eshop .plat-card { padding: 22px 18px !important; }
  .lp-svc.svc-eshop .plat-card h3 { font-size: 1.5rem !important; }
  .lp-svc.svc-eshop .plat-spotlight { padding: 22px 18px !important; }
}
@media (max-width: 400px) {
  .lp-svc.svc-eshop .container { padding: 0 16px !important; }
  .lp-svc.svc-eshop section { padding: 48px 0 !important; }
  .lp-svc.svc-eshop .hero-title-display { font-size: 1.7rem !important; }
  .lp-svc.svc-eshop .sec-title, .lp-svc.svc-eshop h2 { font-size: 1.4rem !important; }
}

/* Platform card - "tmavé pozadí" toggle (dark like .plat-shopify) */
.lp-svc.svc-eshop .plat-card.plat-light{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
.lp-svc.svc-eshop .plat-card.plat-light h3{color:var(--c-orange)}
.lp-svc.svc-eshop .plat-card.plat-light p{color:#999}
.lp-svc.svc-eshop .plat-card.plat-light .plat-feats li{color:var(--c-paper)}
.lp-svc.svc-eshop .plat-card.plat-light .plat-stack{border-color:#2a2a2a}

/* ===== LP-SVC-APP (mobilni-aplikace page CSS) ===== */
/* ── LP v2.5 - Theme-aware page chrome (site convention: no attr = dark) ── */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{background:#0A0A0A;color:#F0F0F0;transition:background .3s,color .3s}
html[data-theme="light"] body{background:#FAFAFA;color:#1A1A1A}
html .lp-svc.svc-app,
.lp-svc.svc-app{
  min-height:calc(100vh - 120px);
  --c-paper:#0A0A0A;--c-card:#141414;--c-ink:#F0F0F0;
  --c-ink-light:#A0A0A0;--c-border:#222222;
  --c-orange:#E68900;--c-orange-hover:#FF9800;
  --c-terminal:#050505;--c-matrix:#4AE6C8;
  background:var(--c-paper);color:var(--c-ink);
  transition:background .3s,color .3s;
  overflow-x:clip;position:relative;
}
html[data-theme="light"] .lp-svc.svc-app{
  --c-paper:#FAFAFA;--c-card:#FFFFFF;--c-ink:#1A1A1A;
  --c-ink-light:#666666;--c-border:#E5E5E5;
}
/* Contrast inversion - blocks explicitly dark in the base design
   need to flip light in the dark theme (so they stay "contrast" blocks) */
.lp-svc.svc-app .card-wf,
.lp-svc.svc-app .process-sec{background:#F0F0F0;color:#0A0A0A}
html[data-theme="light"] .lp-svc.svc-app .card-wf,
html[data-theme="light"] .lp-svc.svc-app .process-sec{background:#1A1A1A;color:#F0F0F0}
        
        .lp-svc.svc-app { 
            background: var(--c-paper); 
            color: var(--c-ink); 
            font-family: var(--f-b); 
            line-height: 1.6; 
            overflow-x: hidden; 
            -webkit-font-smoothing: antialiased;
        }

        .lp-svc.svc-app .container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

        .lp-svc.svc-app /* ── TYPOGRAPHIC EFFECTS ── */
        .brutal-label {
            display: inline-block;
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 0 20px;
            line-height: 1.1;
            clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 96%);
            transform: translateY(-8px) rotate(-2deg);
            box-shadow: 8px 8px 0 var(--c-orange);
            margin-right: 8px;
        }

        .lp-svc.svc-app .brutal-highlight {
            position: relative;
            display: inline-block;
            color: var(--c-ink);
            z-index: 1;
            white-space: nowrap;
        }
        .lp-svc.svc-app .brutal-highlight::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: -4px;
            width: calc(100% + 8px);
            height: 45%;
            background: var(--c-orange);
            z-index: -1;
            transform: rotate(-1deg);
        }

        .lp-svc.svc-app .section-tag {
            font-family: var(--f-m);
            font-size: 0.7rem;
            color: var(--c-orange);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
        }
        .lp-svc.svc-app .section-tag::before { content: ""; width: 24px; height: 2px; background: var(--c-orange); }

        /* Hero eyebrow - H1 SEO якорь, visually identical to .section-tag */
        .lp-svc.svc-app .hero-eyebrow {
            font-family: var(--f-m);
            font-size: 0.7rem;
            color: var(--c-orange);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            line-height: 1.4;
        }
        .lp-svc.svc-app .hero-eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--c-orange);
            flex-shrink: 0;
        }

        .lp-svc.svc-app .btn-brutal {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--c-orange);
            color: var(--c-ink);
            font-family: var(--f-d);
            font-weight: 800;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 24px 48px;
            text-decoration: none;
            clip-path: polygon(1% 0%, 100% 2%, 99% 100%, 0% 97%);
            transition: all 0.4s var(--ease);
        }
        .lp-svc.svc-app .btn-brutal:hover {
            background: var(--c-ink);
            color: var(--c-paper);
            transform: translateY(-4px);
            clip-path: polygon(0% 2%, 99% 0%, 100% 98%, 1% 100%);
        }

        .lp-svc.svc-app /* Abstract Ghost Text */
        .ghost-text {
            position: absolute;
            top: 15%;
            left: -2%;
            font-family: var(--f-d);
            font-size: 32vw;
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 1px rgba(0,0,0,0.03);
            pointer-events: none;
            z-index: 0;
            user-select: none;
        }

        .lp-svc.svc-app /* ── HERO SECTION ── */
        .hero {
            padding: 120px 0 80px;
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
        }
        .lp-svc.svc-app .hero-text { position: relative; z-index: 2; }
        .lp-svc.svc-app .hero-title {
            font-family: var(--f-d);
            font-size: clamp(3rem, 6vw, 5.5rem);
            font-weight: 900;
            line-height: 0.95;
            letter-spacing: -0.03em;
            text-transform: uppercase;
            margin-bottom: 32px;
        }
        .lp-svc.svc-app .hero-perex {
            font-size: clamp(1.1rem, 2vw, 1.25rem);
            color: var(--c-ink-light);
            max-width: 600px;
            margin-bottom: 48px;
            border-left: 2px solid var(--c-orange);
            padding-left: 24px;
            line-height: 1.6;
        }

        .lp-svc.svc-app .tech-badges { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
        .lp-svc.svc-app .tech-badge { border: 1px solid var(--c-border); color: var(--c-ink-light); font-family: var(--f-m); font-size: 0.7rem; text-transform: uppercase; padding: 12px 24px; font-weight: 700; letter-spacing: 0.05em; background: var(--c-card); }

        .lp-svc.svc-app /* Hero Visual */
        .hero-visual {
            position: relative;
            height: 650px;
            width: 100%;
            z-index: 2;
        }
        .lp-svc.svc-app .hv-img {
            width: 85%;
            height: 90%;
            position: absolute;
            right: 0;
            top: 5%;
            clip-path: polygon(0 2%, 100% 0, 98% 100%, 0 96%);
            background: var(--c-ink);
            overflow: hidden;
            box-shadow: -20px 20px 60px rgba(0,0,0,0.05);
        }
        .lp-svc.svc-app .hero-visual img {
            width: 100%; height: 100%; object-fit: cover;
            filter: grayscale(100%) contrast(1.1);
            transition: 0.5s var(--ease);
        }
        .lp-svc.svc-app .hero-visual:hover img { filter: grayscale(0%); transform: scale(1.03); }
        
        .lp-svc.svc-app .hv-badge {
            position: absolute;
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 20px 32px;
            box-shadow: 8px 8px 0 var(--c-orange);
            font-family: var(--f-d);
            z-index: 3;
        }
        .lp-svc.svc-app .badge-1 { top: 15%; right: -5%; transform: rotate(3deg); }
        .lp-svc.svc-app .badge-2 { bottom: 10%; left: 0; transform: rotate(-2deg); }
        .lp-svc.svc-app .hv-badge strong { display: block; font-size: 2rem; font-weight: 900; line-height: 1; color: var(--c-orange); margin-bottom: 4px; }
        .lp-svc.svc-app .hv-badge span { font-family: var(--f-m); font-size: 0.65rem; color: #666666; text-transform: uppercase; letter-spacing: 0.1em; }

        .lp-svc.svc-app /* ── 01 ARCHITECTURE & TECH (BENTO) ── */
        .arch-sec { padding: 120px 0; border-top: 1px solid var(--c-border); }
        .lp-svc.svc-app .sec-title {
            font-family: var(--f-d);
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.03em;
            margin-bottom: 24px;
            max-width: 1000px;
        }
        .lp-svc.svc-app .sec-perex { font-size: 1.15rem; color: var(--c-ink-light); max-width: 700px; margin-bottom: 64px; }
        
        .lp-svc.svc-app .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .lp-svc.svc-app .b-card {
            padding: 48px;
            position: relative;
            display: flex;
            flex-direction: column;
            transition: transform 0.4s var(--ease);
        }
        .lp-svc.svc-app .b-card:hover { transform: translateY(-8px); }
        
        .lp-svc.svc-app .b-card-tag { font-family: var(--f-m); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 24px; display: block; font-weight: 700; }
        .lp-svc.svc-app .b-card h3 { font-family: var(--f-d); font-size: 2.5rem; font-weight: 900; margin-bottom: 24px; letter-spacing: -0.02em; }
        .lp-svc.svc-app .b-card p { font-size: 1.05rem; margin-bottom: 32px; line-height: 1.6; }
        
        .lp-svc.svc-app .b-list { list-style: none; margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
        .lp-svc.svc-app .b-list li { display: flex; gap: 12px; font-weight: 600; font-size: 0.95rem; }
        .lp-svc.svc-app .b-list li::before { content: "✓"; font-family: var(--f-m); }

        .lp-svc.svc-app /* Card Stylings */
        .card-react {
            background: var(--c-ink); color: var(--c-paper);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
            border-top: 4px solid var(--c-orange);
        }
        .lp-svc.svc-app .card-react .b-card-tag { color: var(--c-orange); }
        .lp-svc.svc-app .card-react h3 { color: var(--c-orange); }
        .lp-svc.svc-app .card-react p { color: #666666; }
        .lp-svc.svc-app .card-react .b-list li { color: var(--c-paper); }
        .lp-svc.svc-app .card-react .b-list li::before { color: var(--c-orange); }

        .lp-svc.svc-app .card-flutter {
            background: var(--c-card); border: 1px solid var(--c-border);
            clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 98%);
        }
        .lp-svc.svc-app .card-flutter .b-card-tag { color: var(--c-orange); }
        .lp-svc.svc-app .card-flutter p { color: var(--c-ink-light); }
        .lp-svc.svc-app .card-flutter .b-list li::before { color: var(--c-orange); }

        .lp-svc.svc-app .card-api {
            background: var(--c-paper); border: 2px solid var(--c-ink);
            clip-path: polygon(0 2%, 100% 0, 100% 98%, 2% 100%);
        }
        .lp-svc.svc-app .card-api .b-card-tag { color: var(--c-ink-light); }
        .lp-svc.svc-app .card-api .b-list li::before { color: var(--c-ink); }

        .lp-svc.svc-app /* ── 02 ADDED VALUE (SPLIT LAYOUT) ── */
        .value-sec { padding: 140px 0; background: var(--c-paper); border-top: 1px solid var(--c-border); }
        .lp-svc.svc-app .value-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
        
        .lp-svc.svc-app .val-visual {
            width: 100%;
            height: 600px;
            clip-path: polygon(0 0, 100% 2%, 98% 100%, 0 96%);
            overflow: hidden;
        }
        .lp-svc.svc-app .val-visual img {
            width: 100%; height: 100%; object-fit: cover;
            filter: grayscale(100%) contrast(1.1);
            transition: 0.5s;
        }
        .lp-svc.svc-app .val-visual:hover img { filter: grayscale(0%); transform: scale(1.05); }

        .lp-svc.svc-app .val-list { list-style: none; margin-top: 48px; }
        .lp-svc.svc-app .val-item { border-bottom: 2px solid var(--c-ink); padding: 32px 0; }
        .lp-svc.svc-app .val-item:first-child { border-top: 2px solid var(--c-ink); }
        .lp-svc.svc-app .val-item h3 { font-family: var(--f-d); font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.02em; }
        .lp-svc.svc-app .val-item p { color: var(--c-ink-light); font-size: 1.1rem; line-height: 1.6; }

        .lp-svc.svc-app /* ── 03 HARDWARE (DARK MARQUEE SHOCK) ── */
        .hw-sec {
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 120px 0;
            clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
            margin-top: -40px;
            overflow: hidden;
        }
        .lp-svc.svc-app .hw-sec .sec-title { text-align: center; margin: 0 auto 64px; }
        
        .lp-svc.svc-app .marquee-wrap {
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
            padding: 32px 0;
            background: #111;
            transform: rotate(-1deg);
            width: 105%;
            margin-left: -2.5%;
        }
        .lp-svc.svc-app .marquee-track {
            display: flex;
            gap: 48px;
            width: max-content;
            animation: marquee 20s linear infinite;
        }
        .lp-svc.svc-app .marquee-item {
            font-family: var(--f-d);
            font-size: 2rem;
            font-weight: 900;
            text-transform: uppercase;
            color: var(--c-paper);
            display: flex;
            align-items: center;
            gap: 48px;
        }
        .lp-svc.svc-app .marquee-item::after { content: '◆'; color: var(--c-orange); font-size: 1rem; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        .lp-svc.svc-app /* ── 04 FAQ (STICKY + ACCORDION) ── */
        .faq-sec { padding: 140px 0; background: var(--c-paper); }
        .lp-svc.svc-app .faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
        .lp-svc.svc-app .faq-left { position: sticky; top: 80px; }
        .lp-svc.svc-app .faq-left h2 { font-family: var(--f-d); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin-bottom: 24px; }
        .lp-svc.svc-app .faq-left p { color: var(--c-ink-light); font-size: 1.15rem; }

        .lp-svc.svc-app .accordion { display: flex; flex-direction: column; border-top: 1px solid var(--c-border); }
        .lp-svc.svc-app .faq-item { border-bottom: 1px solid var(--c-border); padding: 32px 0; transition: 0.3s; }
        .lp-svc.svc-app .faq-question {
            width: 100%; background: none; border: none;
            display: flex; justify-content: space-between; align-items: center;
            font-family: var(--f-b); font-size: 1.2rem; font-weight: 600; color: var(--c-ink);
            cursor: pointer; text-align: left; transition: color 0.3s;
        }
        .lp-svc.svc-app .faq-item:hover .faq-question { color: var(--c-orange); }
        .lp-svc.svc-app .faq-answer {
            max-height: 0; overflow: hidden;
            transition: max-height 0.4s var(--ease), margin 0.4s;
            color: var(--c-ink-light); font-size: 1.05rem; line-height: 1.7; max-width: 600px;
        }
        .lp-svc.svc-app .faq-item.active .faq-question { color: var(--c-orange); }
        .lp-svc.svc-app .faq-item.active .faq-answer { max-height: 400px; margin-top: 24px; }
        
        .lp-svc.svc-app .icon-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; transition: 0.4s var(--ease); }
        .lp-svc.svc-app .icon-plus::before, .lp-svc.svc-app .icon-plus::after { content: ''; position: absolute; background: var(--c-orange); top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .lp-svc.svc-app .icon-plus::before { width: 100%; height: 2px; }
        .lp-svc.svc-app .icon-plus::after { width: 2px; height: 100%; }
        .lp-svc.svc-app .faq-item.active .icon-plus { transform: rotate(135deg); }

        .lp-svc.svc-app /* ── FINAL CTA ── */
        .final-cta {
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 120px 40px;
            text-align: center;
            clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
            margin-bottom: 60px;
        }
        .lp-svc.svc-app .final-cta p {
            font-family: var(--f-d);
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 800;
            line-height: 1.2;
            max-width: 900px;
            margin: 0 auto 48px;
        }
        .lp-svc.svc-app .final-cta a {
            color: var(--c-orange);
            font-family: var(--f-m);
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            transition: 0.3s;
        }
        .lp-svc.svc-app .final-cta a::after { content: '→'; transition: transform 0.3s; }
        .lp-svc.svc-app .final-cta a:hover { color: var(--c-paper); }
        .lp-svc.svc-app .final-cta a:hover::after { transform: translateX(8px); }

        @media (max-width: 1024px) {
            .lp-svc.svc-app .hero, .lp-svc.svc-app .value-layout, .lp-svc.svc-app .faq-layout { grid-template-columns: 1fr; gap: 48px; }
            .lp-svc.svc-app .bento-grid { grid-template-columns: 1fr; }
            .lp-svc.svc-app .hero-visual, .lp-svc.svc-app .val-visual { height: 400px; }
            .lp-svc.svc-app .hv-img { width: 100%; clip-path: none; }
            .lp-svc.svc-app .hw-sec { clip-path: none; margin-top: 0; padding: 80px 0; }
            .lp-svc.svc-app .faq-left { position: static; }
            .lp-svc.svc-app .ghost-text { display: none; }
            .lp-svc.svc-app .card-react, .lp-svc.svc-app .card-flutter, .lp-svc.svc-app .card-api { clip-path: none; }
        }





/* ── v2.4 - brutal-highlight with proper multi-line support ── */
.lp-svc.svc-app .brutal-highlight {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── LP - Mobile-safety block (v2.2 audit) ── */
@media (max-width: 640px) {
  .lp-svc.svc-app .container { padding: 0 20px !important; }

  /* Force every grid / 2-column layout to single column */
  .lp-svc.svc-app .hero,
  .lp-svc.svc-app .bento-grid,
  .lp-svc.svc-app .stats-grid,
  .lp-svc.svc-app .process-grid,
  .lp-svc.svc-app .faq-layout,
  .lp-svc.svc-app .eco-grid,
  .lp-svc.svc-app .mig-layout,
  .lp-svc.svc-app .value-layout,
  .lp-svc.svc-app .ai-grid,
  .lp-svc.svc-app .cases-grid,
  .lp-svc.svc-app .ctrl-layout,
  .lp-svc.svc-app .tags-grid,
  .lp-svc.svc-app .erp-grid,
  .lp-svc.svc-app .vs-grid,
  .lp-svc.svc-app .culture-grid,
  .lp-svc.svc-app .dt-row,
  .lp-svc.svc-app .hw-sec > *,
  .lp-svc.svc-app .platforms-sec .bento-grid,
  .lp-svc.svc-app [class*="-grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Typography scale-down */
  .lp-svc.svc-app .hero-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.05 !important; }
  .lp-svc.svc-app .sec-title,
  .lp-svc.svc-app h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.1 !important; }
  .lp-svc.svc-app h3 { font-size: 1.4rem !important; }
  .lp-svc.svc-app .hero-perex,
  .lp-svc.svc-app p { font-size: .95rem !important; }

  /* Hide decorative badges on narrow screens */
  .lp-svc.svc-app .hv-badge,
  .lp-svc.svc-app .trending-badge,
  .lp-svc.svc-app [class*="-badge"] { display: none !important; }

  /* Neutralize clip-paths that can cause horizontal overflow on mobile */
  .lp-svc.svc-app [class*="card-"],
  .lp-svc.svc-app .process-sec,
  .lp-svc.svc-app .hw-sec,
  .lp-svc.svc-app .ai-sec,
  .lp-svc.svc-app .erp-sec,
  .lp-svc.svc-app .eco-sec,
  .lp-svc.svc-app .human-sec,
  .lp-svc.svc-app .hv-img,
  .lp-svc.svc-app .final-cta { clip-path: none !important; margin-top: 0 !important; }

  /* Brutal label - reduce rotation/offset that could break */
  .lp-svc.svc-app .brutal-label {
    padding: 0 12px !important;
    transform: translateY(-4px) rotate(-1deg) !important;
    box-shadow: 4px 4px 0 var(--c-orange, #E68900) !important;
    margin-right: 4px !important;
  }

  /* Button full-width on mobile */
  .lp-svc.svc-app .btn-brutal,
  .lp-svc.svc-app .final-cta a { width: 100%; text-align: center; box-sizing: border-box; padding: 14px 20px !important; }

  /* Section tags slightly smaller */
  .lp-svc.svc-app .section-tag { font-size: 0.65rem !important; margin-bottom: 16px !important; }

  /* FAQ - stacked left/right layout */
  .lp-svc.svc-app .faq-left { position: static !important; margin-bottom: 20px !important; }

  /* Stats numbers - reduce stroke width */
  .lp-svc.svc-app .stat-num { font-size: clamp(3rem, 12vw, 5rem) !important; }

  /* Images must never overflow */
  .lp-svc.svc-app img { max-width: 100% !important; height: auto !important; }

  /* v2.3 fixes - hero overflow, wrap, reduced top padding */
  .lp-svc.svc-app .brutal-highlight { white-space: normal !important; display: inline !important; }
  .lp-svc.svc-app .brutal-highlight::after { display: none !important; }  /* orange underline messes up when wrapped */
  .lp-svc.svc-app .brutal-highlight { background: linear-gradient(transparent 55%, var(--c-orange, #E68900) 55%, var(--c-orange, #E68900) 95%, transparent 95%); padding: 0 2px; }
  .lp-svc.svc-app .brutal-label { 
    transform: none !important; 
    clip-path: none !important;
    box-shadow: 3px 3px 0 var(--c-orange, #E68900) !important;
    padding: 2px 10px !important;
    margin-right: 0 !important;
    display: inline-block !important;
  }
  /* Reduce hero top padding - ~120px default is too much on mobile */
  .lp-svc.svc-app header.hero { padding-block: 40px 48px !important; padding-inline: 20px !important; gap: 32px !important; }
  .lp-svc.svc-app .hero-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; letter-spacing: -0.02em !important; }
  .lp-svc.svc-app .hero-perex { font-size: .92rem !important; line-height: 1.55 !important; }
  /* v4.4.3 - removed `.lp-svc.svc-app section.hero { padding-top: 32px !important; }`:
     selector specificity (0,0,2,0) was beating the correct fixed-nav clearance
     rule below (0,0,1,1) and gluing hero content to the header. */
  /* First section below hero - tighten padding-top */
  .lp-svc.svc-app .platforms-sec, .lp-svc.svc-app .eco-sec, .lp-svc.svc-app .hw-sec,
  .lp-svc.svc-app .ai-sec, .lp-svc.svc-app .erp-sec, .lp-svc.svc-app .human-sec,
  .lp-svc.svc-app [class*="-sec"]:first-of-type { padding-top: 40px !important; }
  /* v2.4 - fixed-nav clearance + long-word wrap */
  .lp-svc.svc-app .hero,
  .lp-svc.svc-app > section:first-child,
  .lp-svc.svc-app > header:first-child,
  .lp-svc.svc-app > div:first-child > section:first-child {
    padding-top: calc(var(--header-h, 62px) + 28px) !important;
  }
  /* Force long single words to wrap instead of overflowing */
  .lp-svc.svc-app h1, .lp-svc.svc-app h2, .lp-svc.svc-app h3,
  .lp-svc.svc-app .hero-title, .lp-svc.svc-app .sec-title,
  .lp-svc.svc-app [class*="title"], .lp-svc.svc-app [class*="-h2"] {
    overflow-wrap: anywhere !important;
    word-break: normal;
    hyphens: auto;
    max-width: 100%;
  }
  /* Extra safety - no horizontal overflow on any child of .lp-svc.svc-app */
  .lp-svc.svc-app, .lp-svc.svc-app * { max-width: 100%; }

  /* v2.4 - mobile refinements: long-word break, thin underline, compact hero */
  .lp-svc.svc-app .hero-title, .lp-svc.svc-app .sec-title, .lp-svc.svc-app h2, .lp-svc.svc-app h3 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }
  .lp-svc.svc-app .brutal-highlight {
    background: linear-gradient(transparent 70%, var(--c-orange, #E68900) 70%, var(--c-orange, #E68900) 92%, transparent 92%) !important;
    padding: 0 3px !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    white-space: normal !important;
    display: inline !important;
  }
  .lp-svc.svc-app .brutal-highlight::after { display: none !important; }
  /* Bento cards - reduce padding drastically so "MIKROMANAGEMENTU" fits */
  .lp-svc.svc-app .bento-card, .lp-svc.svc-app .b-card, .lp-svc.svc-app .eco-box, .lp-svc.svc-app .erp-card, .lp-svc.svc-app .ai-list { 
    padding: 24px 20px !important;
  }
  .lp-svc.svc-app .bento-card h3, .lp-svc.svc-app .b-card h3 { 
    font-size: 1.1rem !important; 
    letter-spacing: -0.01em !important;
  }
  /* Terminal - compact on mobile */
  .lp-svc.svc-app .terminal-wrap { padding: 24px 20px !important; }
  .lp-svc.svc-app .terminal { padding: 16px !important; font-size: 0.72rem !important; }
  .lp-svc.svc-app .term-title { font-size: 1.4rem !important; }
  /* Dashboard layouts - simpler on mobile */
  .lp-svc.svc-app .dash-table, .lp-svc.svc-app .css-dash { transform: none !important; padding: 16px !important; }
}

@media (max-width: 400px) {
  .lp-svc.svc-app .container { padding: 0 16px !important; }
  .lp-svc.svc-app section { padding: 48px 0 !important; }
  .lp-svc.svc-app .hero-title { font-size: 1.8rem !important; }
  .lp-svc.svc-app .sec-title, .lp-svc.svc-app h2 { font-size: 1.5rem !important; }
}




/* ===== LP-SVC-AUTO (automatizace page CSS, scoped) ===== */
html {color-scheme:dark}html[data-theme="light"] {color-scheme:light}.lp-svc.svc-auto body {background:#0A0A0A;color:#F0F0F0;transition:background .3s,color .3s}html[data-theme="light"] .lp-svc.svc-auto body {background:#FAFAFA;color:#1A1A1A}html .lp-svc.svc-auto, .lp-svc.svc-auto {
  min-height:calc(100vh - 120px);
  --c-paper:#0A0A0A;--c-card:#141414;--c-ink:#F0F0F0;
  --c-ink-light:#A0A0A0;--c-border:#222222;
  --c-orange:#E68900;--c-orange-hover:#FF9800;
  --c-terminal:#050505;--c-matrix:#4AE6C8;
  background:var(--c-paper);color:var(--c-ink);
  transition:background .3s,color .3s;
  overflow-x:clip;position:relative;
}html[data-theme="light"] .lp-svc.svc-auto {
  --c-paper:#FAFAFA;--c-card:#FFFFFF;--c-ink:#1A1A1A;
  --c-ink-light:#666666;--c-border:#E5E5E5;
}.lp-svc.svc-auto .card-wf, .lp-svc.svc-auto .process-sec {background:#F0F0F0;color:#0A0A0A}html[data-theme="light"] .lp-svc.svc-auto .card-wf, html[data-theme="light"] .lp-svc.svc-auto .process-sec {background:#1A1A1A;color:#F0F0F0}.lp-svc.svc-auto { 
            background: var(--c-paper); 
            color: var(--c-ink); 
            font-family: var(--f-b); 
            line-height: 1.6; 
            overflow-x: hidden; 
            -webkit-font-smoothing: antialiased;
        }.lp-svc.svc-auto .container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }.lp-svc.svc-auto 
        .brutal-label {
            display: inline-block;
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 0 20px;
            line-height: 1.1;
            clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 96%);
            transform: translateY(-8px) rotate(-2deg);
            box-shadow: 8px 8px 0 var(--c-orange);
            margin-right: 8px;
        }.lp-svc.svc-auto .brutal-highlight {
            position: relative;
            display: inline-block;
            color: var(--c-ink);
            z-index: 1;
            white-space: nowrap;
        }.lp-svc.svc-auto .brutal-highlight::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: -4px;
            width: calc(100% + 8px);
            height: 45%;
            background: var(--c-orange);
            z-index: -1;
            transform: rotate(-1deg);
        }.lp-svc.svc-auto .section-tag {
            font-family: var(--f-m);
            font-size: 0.7rem;
            color: var(--c-orange);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
        }.lp-svc.svc-auto .section-tag::before { content: ""; width: 24px; height: 2px; background: var(--c-orange); }.lp-svc.svc-auto .hero-eyebrow {
            font-family: var(--f-m);
            font-size: 0.7rem;
            color: var(--c-orange);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            line-height: 1.4;
        }.lp-svc.svc-auto .hero-eyebrow::before {
            content: "";
            width: 24px; height: 2px;
            background: var(--c-orange);
            flex-shrink: 0;
        }.lp-svc.svc-auto .btn-brutal {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--c-orange);
            color: var(--c-ink);
            font-family: var(--f-d);
            font-weight: 800;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 24px 48px;
            text-decoration: none;
            clip-path: polygon(1% 0%, 100% 2%, 99% 100%, 0% 97%);
            transition: all 0.4s var(--ease);
            cursor: pointer;
            border: none;
        }.lp-svc.svc-auto .btn-brutal:hover {
            background: var(--c-ink);
            color: var(--c-paper);
            transform: translateY(-4px);
            clip-path: polygon(0% 2%, 99% 0%, 100% 98%, 1% 100%);
        }.lp-svc.svc-auto 
        .ghost-text {
            position: absolute;
            top: 5%;
            left: 0;
            font-family: var(--f-d);
            font-size: 28vw;
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 1px rgba(0,0,0,0.03);
            pointer-events: none;
            z-index: 0;
            user-select: none;
        }.lp-svc.svc-auto 
        .hero {
            padding: 120px 0 20px;
            position: relative;
            z-index: 2;
        }.lp-svc.svc-auto .hero-row {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            gap: 60px;
            align-items: start;
            margin-bottom: 64px;
        }.lp-svc.svc-auto .hero-text { min-width: 0; }.lp-svc.svc-auto .hero-title {
            font-family: var(--f-d);
            font-size: clamp(2.4rem, 5.2vw, 4.6rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.03em;
            text-transform: uppercase;
            margin-bottom: 32px;
        }.lp-svc.svc-auto .hero-perex {
            font-size: clamp(1.05rem, 1.6vw, 1.2rem);
            color: var(--c-ink-light);
            max-width: 600px;
            margin-bottom: 40px;
            border-left: 2px solid var(--c-orange);
            padding-left: 24px;
            line-height: 1.7;
        }.lp-svc.svc-auto .hero-visual {
            position: relative;
            width: 100%;
            height: 480px;
            min-width: 0;
        }.lp-svc.svc-auto .hv-img {
            width: 100%;
            height: 100%;
            background: var(--c-card);
            border: 1px solid var(--c-border);
            overflow: hidden;
            position: relative;
            clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 98%);
            box-shadow: 12px 12px 0 var(--c-orange);
            transform: rotate(-1deg);
            transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
        }.lp-svc.svc-auto .hv-img:hover { transform: rotate(0) translateY(-4px); box-shadow: 14px 14px 0 var(--c-orange); }.lp-svc.svc-auto .hv-img img {
            width: 100%; height: 100%; object-fit: cover;
            filter: grayscale(50%) contrast(1.05);
            transition: filter 0.5s;
        }.lp-svc.svc-auto .hv-img:hover img { filter: grayscale(0%); }.lp-svc.svc-auto .hv-badge {
            position: absolute;
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 18px 22px;
            box-shadow: -6px 6px 0 var(--c-orange);
            font-family: var(--f-d);
            z-index: 3;
            transition: transform 0.4s var(--ease);
        }.lp-svc.svc-auto .hv-badge:hover { transform: translate(2px, -2px) rotate(0) !important; }.lp-svc.svc-auto .badge-1 { top: 12%; right: -6%; transform: rotate(3deg); }.lp-svc.svc-auto .badge-2 { bottom: 12%; left: -4%; transform: rotate(-2deg); }.lp-svc.svc-auto .hv-badge strong { display: block; font-size: 1.7rem; font-weight: 900; line-height: 1; color: var(--c-orange); margin-bottom: 4px; }.lp-svc.svc-auto .hv-badge span { font-family: var(--f-m); font-size: 0.6rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; }.lp-svc.svc-auto 
        .pipeline-wrap {
            display: flex;
            align-items: stretch;
            gap: 4px;
            margin-top: 32px;
            width: 100%;
        }.lp-svc.svc-auto .pipe-box {
            background: var(--c-card);
            border: 1px solid var(--c-border);
            padding: 22px 24px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 150px;
            flex: 1 1 0;
            min-width: 0;
            transition: border-color 0.3s, transform 0.3s;
        }.lp-svc.svc-auto .pipe-box:hover { border-color: var(--c-orange); transform: translateY(-3px); }.lp-svc.svc-auto .pipe-box.result {
            border-color: var(--c-orange);
            background: var(--c-paper);
            box-shadow: 4px 4px 0 var(--c-orange);
        }.lp-svc.svc-auto .p-step { 
            font-family: var(--f-m); 
            font-size: 0.6rem; 
            color: var(--c-orange); 
            text-transform: uppercase; 
            letter-spacing: 0.12em; 
            display: block; 
            margin-bottom: 10px; 
            font-weight: 700; 
        }.lp-svc.svc-auto .pipe-box h3 { 
            font-family: var(--f-d); 
            font-size: 1rem; 
            font-weight: 800; 
            margin-bottom: 6px; 
            line-height: 1.2; 
            letter-spacing: -0.01em;
        }.lp-svc.svc-auto .pipe-box p { font-size: 0.78rem; color: var(--c-ink-light); line-height: 1.4; }.lp-svc.svc-auto .p-time { 
            font-family: var(--f-m); 
            font-size: 1.6rem; 
            color: var(--c-orange); 
            font-weight: 800; 
            display: block; 
            margin-top: 8px;
            letter-spacing: -0.01em;
        }.lp-svc.svc-auto .pipe-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            flex-shrink: 0;
            color: var(--c-border);
            position: relative;
        }.lp-svc.svc-auto .pipe-arrow svg { width: 22px; height: 22px; }.lp-svc.svc-auto .pipe-arrow::after {
            content: "";
            position: absolute;
            width: 6px; height: 6px;
            background: var(--c-orange);
            border-radius: 50%;
            left: -3px; top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            animation: pipeFlow 3s linear infinite;
        }.lp-svc.svc-auto .pipe-arrow:nth-of-type(2)::after { animation-delay: 0.7s; }.lp-svc.svc-auto .pipe-arrow:nth-of-type(3)::after { animation-delay: 1.4s; }@keyframes pipeFlow {0% { left: -3px; opacity: 0; }10% { opacity: 1; }90% { opacity: 1; }100% { left: calc(100% - 3px); opacity: 0; }
        }.lp-svc.svc-auto .wf-sec {
            padding: 80px 0 100px;
            position: relative;
            z-index: 2;
        }.lp-svc.svc-auto .wf-sec-title {
            font-family: var(--f-d);
            font-size: clamp(2rem, 3.8vw, 3rem);
            font-weight: 900;
            line-height: 1.05;
            letter-spacing: -0.03em;
            margin-bottom: 16px;
            max-width: 900px;
        }.lp-svc.svc-auto .wf-sec-perex {
            font-size: 1.05rem;
            color: var(--c-ink-light);
            max-width: 720px;
            margin-bottom: 48px;
            line-height: 1.65;
        }.lp-svc.svc-auto .wf-editor {
            background: #0E0E0E;
            border: 1px solid #2a2a2a;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 30px 70px rgba(0,0,0,0.18);
            position: relative;
        }html[data-theme="light"] .lp-svc.svc-auto .wf-editor {
            box-shadow: 0 24px 60px rgba(0,0,0,0.12);
        }.lp-svc.svc-auto .wf-toolbar {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 14px 22px;
            background: #060606;
            border-bottom: 1px solid #1c1c1c;
        }.lp-svc.svc-auto .wf-tb-dots { display: flex; gap: 7px; flex-shrink: 0; }.lp-svc.svc-auto .wf-tb-dots span {
            width: 12px; height: 12px;
            border-radius: 50%;
            background: #333;
        }.lp-svc.svc-auto .wf-tb-dots span:nth-child(1) { background: #ff5f56; }.lp-svc.svc-auto .wf-tb-dots span:nth-child(2) { background: #ffbd2e; }.lp-svc.svc-auto .wf-tb-dots span:nth-child(3) { background: #27c93f; }.lp-svc.svc-auto .wf-tb-title {
            font-family: var(--f-m);
            font-size: 0.78rem;
            color: #888;
            letter-spacing: 0.04em;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }.lp-svc.svc-auto .wf-tb-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--f-m);
            font-size: 0.62rem;
            color: #27c93f;
            letter-spacing: 0.18em;
            font-weight: 700;
            flex-shrink: 0;
        }.lp-svc.svc-auto .wf-tb-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #27c93f;
            box-shadow: 0 0 0 0 rgba(39,201,63,0.55);
            animation: wfPulse 1.8s ease-in-out infinite;
        }@keyframes wfPulse {0%, 100% { box-shadow: 0 0 0 0 rgba(39,201,63,0.5); }50% { box-shadow: 0 0 0 7px rgba(39,201,63,0); }
        }.lp-svc.svc-auto .wf-canvas {
            display: flex;
            align-items: stretch;
            gap: 0;
            padding: 44px 36px;
            background: #0E0E0E;
            background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
            background-size: 22px 22px;
            min-height: 240px;
        }.lp-svc.svc-auto .wf-connector {
            flex: 0 0 56px;
            align-self: center;
            height: 110px;
            position: relative;
            z-index: 1;
        }.lp-svc.svc-auto .wf-node {
            flex: 1 1 0;
            min-width: 0;
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            border-radius: 8px;
            padding: 16px 18px 14px;
            position: relative;
            display: flex;
            flex-direction: column;
            transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
        }.lp-svc.svc-auto .wf-node:hover {
            border-color: var(--c-orange);
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.3);
        }.lp-svc.svc-auto .wf-node-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid #2a2a2a;
        }.lp-svc.svc-auto .wf-node-icon {
            width: 28px; height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(230,137,0,0.12);
            border: 1px solid rgba(230,137,0,0.3);
            border-radius: 6px;
            font-size: 0.85rem;
            flex-shrink: 0;
            line-height: 1;
        }.lp-svc.svc-auto .wf-node-step {
            font-family: var(--f-m);
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--c-orange);
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }.lp-svc.svc-auto .wf-node-menu {
            color: #555;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            user-select: none;
            flex-shrink: 0;
        }.lp-svc.svc-auto .wf-node h3 {
            font-family: var(--f-d);
            font-size: 0.95rem;
            font-weight: 800;
            color: #F0F0F0;
            margin-bottom: 6px;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }.lp-svc.svc-auto .wf-node p {
            font-size: 0.76rem;
            color: #888;
            line-height: 1.45;
            margin-bottom: 12px;
            flex: 1;
        }.lp-svc.svc-auto .wf-node-time {
            font-family: var(--f-m);
            font-size: 1.5rem;
            color: var(--c-orange);
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 12px;
            line-height: 1;
        }.lp-svc.svc-auto .wf-node-time small {
            font-size: 0.85rem;
            margin-left: 4px;
            opacity: 0.7;
        }.lp-svc.svc-auto .wf-node-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: auto;
        }.lp-svc.svc-auto .wf-node-tags span {
            font-family: var(--f-m);
            font-size: 0.56rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            padding: 3px 7px;
            background: rgba(255,255,255,0.05);
            color: #aaa;
            border-radius: 3px;
            text-transform: uppercase;
            white-space: nowrap;
        }.lp-svc.svc-auto .wf-result {
            border-color: rgba(230,137,0,0.45);
            background: linear-gradient(135deg, #1a1a1a, #261a00);
        }.lp-svc.svc-auto .wf-result .wf-node-icon {
            background: var(--c-orange);
            color: #0A0A0A;
            border-color: var(--c-orange);
            font-weight: 900;
        }.lp-svc.svc-auto .wf-statbar {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: #2a2a2a;
            border-top: 1px solid #1c1c1c;
        }.lp-svc.svc-auto .wf-stat {
            background: #0E0E0E;
            padding: 18px 24px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }.lp-svc.svc-auto .wf-stat-lbl {
            font-family: var(--f-m);
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #666;
            font-weight: 600;
        }.lp-svc.svc-auto .wf-stat-val {
            font-family: var(--f-d);
            font-size: 1.3rem;
            font-weight: 900;
            color: #F0F0F0;
            letter-spacing: -0.01em;
        }.lp-svc.svc-auto 
        .ctrl-sec { padding: 120px 0; border-top: 1px solid var(--c-border); }.lp-svc.svc-auto .ctrl-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }.lp-svc.svc-auto .ctrl-title {
            font-family: var(--f-d);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.03em;
            margin-bottom: 32px;
        }.lp-svc.svc-auto .ctrl-text p { font-size: 1.15rem; color: var(--c-ink-light); margin-bottom: 24px; }.lp-svc.svc-auto .stack-box {
            background: var(--c-card);
            border: 2px solid var(--c-ink);
            padding: 48px;
            clip-path: polygon(0 0, 100% 2%, 98% 100%, 2% 98%);
            position: relative;
        }.lp-svc.svc-auto .stack-box::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c-orange);
        }.lp-svc.svc-auto .stack-box h3 { font-family: var(--f-d); font-size: 1.5rem; font-weight: 800; margin-bottom: 32px; }.lp-svc.svc-auto .tags-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }.lp-svc.svc-auto .stack-tag {
            font-family: var(--f-m); font-size: 0.85rem; font-weight: 700;
            border: 1px solid var(--c-border);
            padding: 12px 24px;
            background: var(--c-paper);
            transition: 0.3s;
        }.lp-svc.svc-auto .stack-tag:hover { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-paper); }.lp-svc.svc-auto 
        .cases-sec { padding: 120px 0; background: var(--c-card); border-top: 1px solid var(--c-border); }.lp-svc.svc-auto .cases-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 24px;
        }.lp-svc.svc-auto .case-card {
            border: 1px solid var(--c-border);
            padding: 40px;
            background: var(--c-paper);
            display: flex;
            flex-direction: column;
            transition: 0.4s var(--ease);
            position: relative;
        }.lp-svc.svc-auto .case-card:hover {
            border-color: var(--c-orange);
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.04);
            z-index: 2;
        }.lp-svc.svc-auto .c-num {
            position: absolute;
            top: 40px; right: 40px;
            font-family: var(--f-m);
            font-size: 0.8rem;
            color: var(--c-orange);
            border: 1px solid var(--c-orange);
            padding: 4px 8px;
            font-weight: 700;
        }.lp-svc.svc-auto .case-card h3 { font-family: var(--f-d); font-size: 1.4rem; font-weight: 800; margin-bottom: 16px; max-width: 80%; line-height: 1.2; }.lp-svc.svc-auto .case-card p { font-size: 1rem; color: var(--c-ink-light); margin-bottom: 32px; }.lp-svc.svc-auto 
        .c-flow {
            margin-top: auto;
            font-family: var(--f-m);
            font-size: 0.75rem;
            color: var(--c-ink);
            background: var(--c-border);
            padding: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }.lp-svc.svc-auto .c-flow span { color: var(--c-orange); }.lp-svc.svc-auto 
        .case-1 { grid-column: span 7; }.lp-svc.svc-auto .case-2 { grid-column: span 5; }.lp-svc.svc-auto .case-3 { grid-column: span 4; }.lp-svc.svc-auto .case-4 { grid-column: span 4; background: var(--c-ink); color: var(--c-paper); clip-path: polygon(0 0, 100% 2%, 98% 100%, 0 98%); border: none; }.lp-svc.svc-auto .case-4 h3 { color: var(--c-paper); }.lp-svc.svc-auto .case-4 p { color: #666666; }.lp-svc.svc-auto .case-4 .c-flow { background: #222; color: #EEE; }.lp-svc.svc-auto .case-5 { grid-column: span 4; }.lp-svc.svc-auto .case-6 { grid-column: span 6; }.lp-svc.svc-auto .case-7 { grid-column: span 6; }.lp-svc.svc-auto 
        .ai-sec {
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 160px 0;
            clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
            margin-top: -40px;
            position: relative;
            z-index: 2;
        }.lp-svc.svc-auto .ai-grid {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 80px;
            align-items: center;
        }.lp-svc.svc-auto .ai-text h2 {
            font-family: var(--f-d);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.03em;
            text-transform: uppercase;
            margin-bottom: 32px;
        }.lp-svc.svc-auto .ai-text h2 span { color: var(--c-orange); }.lp-svc.svc-auto .ai-text p { color: #666666; font-size: 1.15rem; margin-bottom: 40px; }.lp-svc.svc-auto .ai-list { list-style: none; }.lp-svc.svc-auto .ai-list li {
            font-family: var(--f-b);
            font-size: 1.05rem;
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            color: #CCC;
        }.lp-svc.svc-auto .ai-list li strong { color: var(--c-paper); font-family: var(--f-d); font-size: 1rem; }.lp-svc.svc-auto .ai-list li::before { content: "✓"; color: var(--c-orange); font-family: var(--f-m); font-weight: bold; margin-top: 2px; }.lp-svc.svc-auto 
        .terminal {
            background: var(--c-terminal);
            border: 1px solid #333;
            border-radius: 6px;
            padding: 32px;
            font-family: var(--f-m);
            font-size: 0.9rem;
            color: var(--c-matrix);
            box-shadow: 0 20px 40px rgba(0,0,0,0.8);
            position: relative;
        }.lp-svc.svc-auto .mac-dots { display: flex; gap: 8px; margin-bottom: 32px; }.lp-svc.svc-auto .mac-dots span { width: 12px; height: 12px; border-radius: 50%; background: #333; }.lp-svc.svc-auto .mac-dots span:nth-child(1) { background: #FF5F56; }.lp-svc.svc-auto .mac-dots span:nth-child(2) { background: #FFBD2E; }.lp-svc.svc-auto .mac-dots span:nth-child(3) { background: #27C93F; }.lp-svc.svc-auto .type-line { overflow: hidden; white-space: nowrap; width: 0; margin-bottom: 12px; color: #666666; }.lp-svc.svc-auto .l1 { animation: typing 1s steps(30, end) forwards; color: #FFF; font-weight: bold; }.lp-svc.svc-auto .l2 { animation: typing 1s steps(30, end) 1s forwards; color: var(--c-matrix); }.lp-svc.svc-auto .l3 { animation: typing 1s steps(30, end) 2s forwards; }.lp-svc.svc-auto .l4 { animation: typing 1s steps(30, end) 3s forwards; }.lp-svc.svc-auto .l5 { animation: typing 1s steps(30, end) 4s forwards; }.lp-svc.svc-auto .l6 { animation: typing 1s steps(30, end) 5s forwards; color: var(--c-orange); margin-top: 24px;}.lp-svc.svc-auto .l7 { animation: typing 1s steps(30, end) 6s forwards; color: var(--c-matrix); font-weight: bold;}@keyframes typing {from { width: 0 }to { width: 100% } }.lp-svc.svc-auto 
        .faq-sec { padding: 140px 0; background: var(--c-paper); }.lp-svc.svc-auto .faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }.lp-svc.svc-auto .faq-left { position: sticky; top: 80px; }.lp-svc.svc-auto .faq-left h2 { font-family: var(--f-d); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin-bottom: 24px; }.lp-svc.svc-auto .faq-left p { color: var(--c-ink-light); font-size: 1.15rem; }.lp-svc.svc-auto .accordion { display: flex; flex-direction: column; border-top: 1px solid var(--c-border); }.lp-svc.svc-auto .faq-item { border-bottom: 1px solid var(--c-border); padding: 32px 0; transition: 0.3s; }.lp-svc.svc-auto .faq-question {
            width: 100%; background: none; border: none;
            display: flex; justify-content: space-between; align-items: center;
            font-family: var(--f-b); font-size: 1.2rem; font-weight: 600; color: var(--c-ink);
            cursor: pointer; text-align: left; transition: color 0.3s;
        }.lp-svc.svc-auto .faq-item:hover .faq-question { color: var(--c-orange); }.lp-svc.svc-auto .faq-answer {
            max-height: 0; overflow: hidden;
            transition: max-height 0.4s var(--ease), margin 0.4s;
            color: var(--c-ink-light); font-size: 1.05rem; line-height: 1.7; max-width: 600px;
        }.lp-svc.svc-auto .faq-item.active .faq-question { color: var(--c-orange); }.lp-svc.svc-auto .faq-item.active .faq-answer { max-height: 400px; margin-top: 24px; }.lp-svc.svc-auto .icon-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; transition: 0.4s var(--ease); }.lp-svc.svc-auto .icon-plus::before, .lp-svc.svc-auto .icon-plus::after { content: ''; position: absolute; background: var(--c-orange); top: 50%; left: 50%; transform: translate(-50%, -50%); }.lp-svc.svc-auto .icon-plus::before { width: 100%; height: 2px; }.lp-svc.svc-auto .icon-plus::after { width: 2px; height: 100%; }.lp-svc.svc-auto .faq-item.active .icon-plus { transform: rotate(135deg); }.lp-svc.svc-auto 
        .final-cta {
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 120px 40px;
            text-align: center;
            clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
            margin-bottom: 60px;
        }.lp-svc.svc-auto .final-cta p {
            font-family: var(--f-d);
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 800;
            line-height: 1.2;
            max-width: 900px;
            margin: 0 auto 48px;
        }.lp-svc.svc-auto .final-cta a {
            color: var(--c-orange);
            font-family: var(--f-m);
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            transition: 0.3s;
        }.lp-svc.svc-auto .final-cta a::after { content: '→'; transition: transform 0.3s; }.lp-svc.svc-auto .final-cta a:hover { color: var(--c-paper); }.lp-svc.svc-auto .final-cta a:hover::after { transform: translateX(8px); }@media (max-width: 1024px) {.lp-svc.svc-auto .hero-title { font-size: 3rem; }.lp-svc.svc-auto .hero-row { grid-template-columns: 1fr; gap: 40px; }.lp-svc.svc-auto .hero-visual { height: 360px; }.lp-svc.svc-auto .pipeline-wrap { 
                grid-template-columns: 1fr; 
                grid-template-areas: none;
            }.lp-svc.svc-auto .pipe-arrow { transform: rotate(90deg); width: auto; margin: 8px 0; }.lp-svc.svc-auto .pipe-arrow::after { display: none; }.lp-svc.svc-auto .ctrl-layout, .lp-svc.svc-auto .ai-grid, .lp-svc.svc-auto .faq-layout { grid-template-columns: 1fr; gap: 48px; }.lp-svc.svc-auto .cases-grid { grid-template-columns: 1fr; }.lp-svc.svc-auto .case-card { grid-column: span 1 !important; clip-path: none !important; }.lp-svc.svc-auto .faq-left { position: static; }.lp-svc.svc-auto .ghost-text { display: none; }.lp-svc.svc-auto .wf-canvas { flex-direction: column; padding: 22px 18px; gap: 0; }.lp-svc.svc-auto .wf-connector { width: 100%; flex: 0 0 auto; height: 42px; transform: rotate(90deg); margin: -8px 0; }.lp-svc.svc-auto .wf-statbar { grid-template-columns: 1fr; }
        }.lp-svc.svc-auto .brutal-highlight {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}@media (max-width: 640px) {.lp-svc.svc-auto .container { padding: 0 20px !important; }.lp-svc.svc-auto .hero, .lp-svc.svc-auto .bento-grid, .lp-svc.svc-auto .stats-grid, .lp-svc.svc-auto .process-grid, .lp-svc.svc-auto .faq-layout, .lp-svc.svc-auto .eco-grid, .lp-svc.svc-auto .mig-layout, .lp-svc.svc-auto .value-layout, .lp-svc.svc-auto .ai-grid, .lp-svc.svc-auto .cases-grid, .lp-svc.svc-auto .ctrl-layout, .lp-svc.svc-auto .tags-grid, .lp-svc.svc-auto .erp-grid, .lp-svc.svc-auto .vs-grid, .lp-svc.svc-auto .culture-grid, .lp-svc.svc-auto .dt-row, .lp-svc.svc-auto .hw-sec > *, .lp-svc.svc-auto .platforms-sec .bento-grid, .lp-svc.svc-auto [class*="-grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }.lp-svc.svc-auto .hero-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.05 !important; }.lp-svc.svc-auto .sec-title, .lp-svc.svc-auto h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.1 !important; }.lp-svc.svc-auto h3 { font-size: 1.4rem !important; }.lp-svc.svc-auto .hero-perex, .lp-svc.svc-auto p { font-size: .95rem !important; }.lp-svc.svc-auto .hv-badge, .lp-svc.svc-auto .trending-badge, .lp-svc.svc-auto [class*="-badge"] { display: none !important; }.lp-svc.svc-auto [class*="card-"], .lp-svc.svc-auto .process-sec, .lp-svc.svc-auto .hw-sec, .lp-svc.svc-auto .ai-sec, .lp-svc.svc-auto .erp-sec, .lp-svc.svc-auto .eco-sec, .lp-svc.svc-auto .human-sec, .lp-svc.svc-auto .hv-img, .lp-svc.svc-auto .final-cta { clip-path: none !important; margin-top: 0 !important; }.lp-svc.svc-auto .brutal-label {
    padding: 0 12px !important;
    transform: translateY(-4px) rotate(-1deg) !important;
    box-shadow: 4px 4px 0 var(--c-orange, #E68900) !important;
    margin-right: 4px !important;
  }.lp-svc.svc-auto .btn-brutal, .lp-svc.svc-auto .final-cta a { width: 100%; text-align: center; box-sizing: border-box; padding: 14px 20px !important; }.lp-svc.svc-auto .section-tag { font-size: 0.65rem !important; margin-bottom: 16px !important; }.lp-svc.svc-auto .faq-left { position: static !important; margin-bottom: 20px !important; }.lp-svc.svc-auto .stat-num { font-size: clamp(3rem, 12vw, 5rem) !important; }.lp-svc.svc-auto img { max-width: 100% !important; height: auto !important; }.lp-svc.svc-auto .brutal-highlight { white-space: normal !important; display: inline !important; }.lp-svc.svc-auto .brutal-highlight::after { display: none !important; }.lp-svc.svc-auto .brutal-highlight { background: linear-gradient(transparent 55%, var(--c-orange, #E68900) 55%, var(--c-orange, #E68900) 95%, transparent 95%); padding: 0 2px; }.lp-svc.svc-auto .brutal-label { 
    transform: none !important; 
    clip-path: none !important;
    box-shadow: 3px 3px 0 var(--c-orange, #E68900) !important;
    padding: 2px 10px !important;
    margin-right: 0 !important;
    display: inline-block !important;
  }.lp-svc.svc-auto header.hero { padding-block: 40px 48px !important; padding-inline: 20px !important; gap: 32px !important; }.lp-svc.svc-auto .hero-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; letter-spacing: -0.02em !important; }.lp-svc.svc-auto .hero-perex { font-size: .92rem !important; line-height: 1.55 !important; }.lp-svc.svc-auto .platforms-sec, .lp-svc.svc-auto .eco-sec, .lp-svc.svc-auto .hw-sec, .lp-svc.svc-auto .ai-sec, .lp-svc.svc-auto .erp-sec, .lp-svc.svc-auto .human-sec, .lp-svc.svc-auto [class*="-sec"]:first-of-type { padding-top: 40px !important; }.lp-svc.svc-auto .hero, .lp-svc.svc-auto > section:first-child, .lp-svc.svc-auto > header:first-child, .lp-svc.svc-auto > div:first-child > section:first-child {
    padding-top: calc(var(--header-h, 62px) + 28px) !important;
  }.lp-svc.svc-auto h1, .lp-svc.svc-auto h2, .lp-svc.svc-auto h3, .lp-svc.svc-auto .hero-title, .lp-svc.svc-auto .sec-title, .lp-svc.svc-auto [class*="title"], .lp-svc.svc-auto [class*="-h2"] {
    overflow-wrap: anywhere !important;
    word-break: normal;
    hyphens: auto;
    max-width: 100%;
  }.lp-svc.svc-auto, .lp-svc.svc-auto * { max-width: 100%; }.lp-svc.svc-auto .hero-title, .lp-svc.svc-auto .sec-title, .lp-svc.svc-auto h2, .lp-svc.svc-auto h3 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }.lp-svc.svc-auto .brutal-highlight {
    background: linear-gradient(transparent 70%, var(--c-orange, #E68900) 70%, var(--c-orange, #E68900) 92%, transparent 92%) !important;
    padding: 0 3px !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    white-space: normal !important;
    display: inline !important;
  }.lp-svc.svc-auto .brutal-highlight::after { display: none !important; }.lp-svc.svc-auto .bento-card, .lp-svc.svc-auto .b-card, .lp-svc.svc-auto .eco-box, .lp-svc.svc-auto .erp-card, .lp-svc.svc-auto .ai-list { 
    padding: 24px 20px !important;
  }.lp-svc.svc-auto .bento-card h3, .lp-svc.svc-auto .b-card h3 { 
    font-size: 1.1rem !important; 
    letter-spacing: -0.01em !important;
  }.lp-svc.svc-auto .terminal-wrap { padding: 24px 20px !important; }.lp-svc.svc-auto .terminal { padding: 16px !important; font-size: 0.72rem !important; }.lp-svc.svc-auto .term-title { font-size: 1.4rem !important; }.lp-svc.svc-auto .dash-table, .lp-svc.svc-auto .css-dash { transform: none !important; padding: 16px !important; }
}@media (max-width: 400px) {.lp-svc.svc-auto .container { padding: 0 16px !important; }.lp-svc.svc-auto section { padding: 48px 0 !important; }.lp-svc.svc-auto .hero-title { font-size: 1.8rem !important; }.lp-svc.svc-auto .sec-title, .lp-svc.svc-auto h2 { font-size: 1.5rem !important; }
}@media (max-width:640px) {html .lp-svc.svc-auto, html .lp-svc.svc-auto * { max-width:100%; }html .lp-svc.svc-auto h2, html .lp-svc.svc-auto h3, html .lp-svc.svc-auto .hero-title, html .lp-svc.svc-auto .sec-title, html .lp-svc.svc-auto .bento-card h3, html .lp-svc.svc-auto .b-card h3, html .lp-svc.svc-auto .term-title {
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    hyphens:auto !important;
    -webkit-hyphens:auto !important;
    letter-spacing:0 !important;      
    max-width:100% !important;
  }html .lp-svc.svc-auto .bento-card h3, html .lp-svc.svc-auto .b-card h3 {
    font-size:1.05rem !important;
    line-height:1.2 !important;
  }html .lp-svc.svc-auto .bento-card, html .lp-svc.svc-auto .b-card, html .lp-svc.svc-auto .eco-box, html .lp-svc.svc-auto .erp-card {
    padding:22px 18px !important;
    clip-path:none !important;         
  }html .lp-svc.svc-auto .hero-title {
    font-size:clamp(1.6rem,7vw,2.2rem) !important;
    letter-spacing:-0.01em !important;
    line-height:1.08 !important;
  }html .lp-svc.svc-auto .sec-title {
    font-size:clamp(1.5rem,6.5vw,2rem) !important;
    line-height:1.12 !important;
  }html .lp-svc.svc-auto .hero {
    padding-block:calc(var(--header-h,65px) + 24px) 40px !important;
    gap:28px !important;
  }html .lp-svc.svc-auto .brutal-highlight {
    white-space:normal !important;
    display:inline !important;
    background:linear-gradient(transparent 72%,var(--c-orange,#E68900) 72%,var(--c-orange,#E68900) 92%,transparent 92%) !important;
    padding:0 2px !important;
    -webkit-box-decoration-break:clone !important;
    box-decoration-break:clone !important;
  }html .lp-svc.svc-auto .brutal-highlight::after {display:none !important}html .lp-svc.svc-auto .brutal-label {
    transform:none !important;
    clip-path:none !important;
    padding:2px 10px !important;
    box-shadow:3px 3px 0 var(--c-orange,#E68900) !important;
    white-space:normal !important;
  }html .lp-svc.svc-auto .terminal-wrap {padding:20px 16px !important}html .lp-svc.svc-auto .terminal {padding:14px !important; font-size:.7rem !important}html .lp-svc.svc-auto .term-title {font-size:1.3rem !important}html .lp-svc.svc-auto .dash-table, html .lp-svc.svc-auto .css-dash {transform:none !important; padding:16px !important}
}@media (max-width: 640px) {html .lp-svc.svc-auto .hero-row, html .lp-svc.svc-auto .pipeline-wrap {
    display: block !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }html .lp-svc.svc-auto .hero-row > * { width: 100% !important; margin-bottom: 28px; }html .lp-svc.svc-auto .hero-row > *:last-child { margin-bottom: 0; }html .lp-svc.svc-auto .hero-visual { height: 280px; }html .lp-svc.svc-auto .hv-badge { display: none !important; }html .lp-svc.svc-auto .pipe-box { margin-bottom: 12px; }html .lp-svc.svc-auto .pipe-arrow { transform: rotate(90deg); margin: 4px auto; width: auto; display: flex; }html .lp-svc.svc-auto .pipe-arrow::after { display: none; }
}


/* ===== LP-SVC-CRM (crm-erp page CSS, scoped) ===== */
html .lp-svc.svc-crm, .lp-svc.svc-crm {
  min-height:calc(100vh - 120px);
  --c-paper:#0A0A0A;--c-card:#141414;--c-ink:#F0F0F0;
  --c-ink-light:#A0A0A0;--c-border:#222222;
  --c-orange:#E68900;--c-orange-hover:#FF9800;
  --c-terminal:#050505;--c-matrix:#4AE6C8;
  background:var(--c-paper);color:var(--c-ink);
  transition:background .3s,color .3s;
  overflow-x:clip;position:relative;
}html[data-theme="light"] .lp-svc.svc-crm {
  --c-paper:#FAFAFA;--c-card:#FFFFFF;--c-ink:#1A1A1A;
  --c-ink-light:#666666;--c-border:#E5E5E5;
}.lp-svc.svc-crm .card-wf, .lp-svc.svc-crm .process-sec {background:#F0F0F0;color:#0A0A0A}html[data-theme="light"] .lp-svc.svc-crm .card-wf, html[data-theme="light"] .lp-svc.svc-crm .process-sec {background:#1A1A1A;color:#F0F0F0}.lp-svc.svc-crm { 
            background: var(--c-paper); 
            color: var(--c-ink); 
            font-family: var(--f-b); 
            line-height: 1.6; 
            overflow-x: hidden; 
            -webkit-font-smoothing: antialiased;
        }.lp-svc.svc-crm .container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }.lp-svc.svc-crm 
        .brutal-label {
            display: inline-block;
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 0 20px;
            line-height: 1.1;
            clip-path: polygon(2% 0, 100% 4%, 98% 100%, 0 96%);
            transform: translateY(-8px) rotate(-2deg);
            box-shadow: 8px 8px 0 var(--c-orange);
            margin-right: 8px;
        }.lp-svc.svc-crm .brutal-highlight {
            position: relative;
            display: inline-block;
            color: var(--c-ink);
            z-index: 1;
            white-space: nowrap;
        }.lp-svc.svc-crm .brutal-highlight::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: -4px;
            width: calc(100% + 8px);
            height: 45%;
            background: var(--c-orange);
            z-index: -1;
            transform: rotate(-1deg);
        }.lp-svc.svc-crm .section-tag {
            font-family: var(--f-m);
            font-size: 0.7rem;
            color: var(--c-orange);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
        }.lp-svc.svc-crm .section-tag::before { content: ""; width: 24px; height: 2px; background: var(--c-orange); }.lp-svc.svc-crm .btn-brutal {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--c-orange);
            color: var(--c-ink);
            font-family: var(--f-d);
            font-weight: 800;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 24px 48px;
            text-decoration: none;
            clip-path: polygon(1% 0%, 100% 2%, 99% 100%, 0% 97%);
            transition: all 0.4s var(--ease);
            cursor: pointer;
            border: none;
        }.lp-svc.svc-crm .btn-brutal:hover {
            background: var(--c-ink);
            color: var(--c-paper);
            transform: translateY(-4px);
            clip-path: polygon(0% 2%, 99% 0%, 100% 98%, 1% 100%);
        }.lp-svc.svc-crm 
        .ghost-text {
            position: absolute;
            top: 5%;
            right: -5%;
            font-family: var(--f-d);
            font-size: 25vw;
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 1px rgba(0,0,0,0.03);
            pointer-events: none;
            z-index: 0;
            user-select: none;
            writing-mode: vertical-rl;
        }.lp-svc.svc-crm 
        .hero {
            padding: 120px 0 80px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 2;
        }.lp-svc.svc-crm .hero-title {
            font-family: var(--f-d);
            font-size: clamp(3rem, 6vw, 5.5rem);
            font-weight: 900;
            line-height: 0.95;
            letter-spacing: -0.03em;
            text-transform: uppercase;
            margin-bottom: 32px;
        }.lp-svc.svc-crm .hero-perex {
            font-size: clamp(1.1rem, 2vw, 1.25rem);
            color: var(--c-ink-light);
            max-width: 600px;
            margin-bottom: 48px;
            border-left: 2px solid var(--c-orange);
            padding-left: 24px;
            line-height: 1.6;
        }.lp-svc.svc-crm 
        .css-dash {
            background: #111;
            border: 2px solid var(--c-ink);
            padding: 24px;
            border-radius: 8px;
            box-shadow: -20px 20px 0 rgba(0,0,0,0.05);
            transform: rotate(2deg);
            transition: transform 0.5s var(--ease);
        }.lp-svc.svc-crm .css-dash:hover { transform: rotate(0deg) scale(1.02); }.lp-svc.svc-crm .dash-header { display: flex; gap: 8px; margin-bottom: 24px; align-items: center; }.lp-svc.svc-crm .d-dot { width: 12px; height: 12px; border-radius: 50%; background: #333; }.lp-svc.svc-crm .d-dot:nth-child(1) { background: var(--c-orange); }.lp-svc.svc-crm .d-url { margin-left: auto; font-family: var(--f-m); font-size: 0.65rem; color: #666; background: #222; padding: 4px 16px; border-radius: 4px; }.lp-svc.svc-crm .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }.lp-svc.svc-crm .d-stat { background: #1A1A1A; border: 1px solid #333; padding: 16px; }.lp-svc.svc-crm .d-stat span { display: block; font-family: var(--f-m); font-size: 0.6rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }.lp-svc.svc-crm .d-stat strong { font-family: var(--f-d); font-size: 1.8rem; color: var(--c-paper); line-height: 1; }.lp-svc.svc-crm .d-stat.highlight strong { color: var(--c-orange); }.lp-svc.svc-crm .dash-table { background: #1A1A1A; border: 1px solid #333; }.lp-svc.svc-crm .dt-row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 12px 16px; border-bottom: 1px solid #222; font-family: var(--f-m); font-size: 0.75rem; color: #AAA; }.lp-svc.svc-crm .dt-row.header { color: #666; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; }.lp-svc.svc-crm .dt-row:last-child { border-bottom: none; }.lp-svc.svc-crm .dt-client { color: var(--c-paper); font-weight: 700; font-family: var(--f-b); font-size: 0.9rem;}.lp-svc.svc-crm .dt-status { color: var(--c-orange); }.lp-svc.svc-crm 
        .vs-sec { padding: 120px 0; border-top: 1px solid var(--c-border); }.lp-svc.svc-crm .vs-title { font-family: var(--f-d); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin-bottom: 24px; text-align: center; }.lp-svc.svc-crm .vs-perex { text-align: center; max-width: 600px; margin: 0 auto 64px; color: var(--c-ink-light); font-size: 1.15rem; }.lp-svc.svc-crm .vs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            position: relative;
            max-width: 1100px;
            margin: 0 auto;
        }.lp-svc.svc-crm .vs-badge {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 64px; height: 64px;
            background: var(--c-ink);
            color: var(--c-paper);
            font-family: var(--f-d);
            font-size: 1.2rem;
            font-weight: 900;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            z-index: 3;
            border: 4px solid var(--c-paper);
        }.lp-svc.svc-crm .vs-card { padding: 64px 48px; display: flex; flex-direction: column; justify-content: center; }.lp-svc.svc-crm .vs-card span { font-family: var(--f-m); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; display: block; font-weight: 700; }.lp-svc.svc-crm .vs-card h3 { font-family: var(--f-d); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; line-height: 1; margin-bottom: 24px; letter-spacing: -0.03em; }.lp-svc.svc-crm .vs-card p { font-size: 1rem; line-height: 1.6; }.lp-svc.svc-crm .vs-left {
            background: var(--c-ink);
            color: var(--c-paper);
            border-right: 1px solid #333;
            clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
        }.lp-svc.svc-crm .vs-left span { color: var(--c-red); }.lp-svc.svc-crm .vs-left h3 { color: var(--c-red); }.lp-svc.svc-crm .vs-left p { color: #888; }.lp-svc.svc-crm .vs-right {
            background: var(--c-card);
            border: 1px solid var(--c-border);
            border-left: none;
            clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
            margin-left: -5%; 
            padding-left: 10%;
        }.lp-svc.svc-crm .vs-right span { color: var(--c-orange); }.lp-svc.svc-crm .vs-right h3 { color: var(--c-orange); }.lp-svc.svc-crm .vs-right p { color: var(--c-ink-light); }.lp-svc.svc-crm .vs-footer {
            max-width: 1100px; margin: 40px auto 0;
            background: var(--c-card); border: 1px solid var(--c-border); padding: 32px;
            font-size: 1rem; color: var(--c-ink-light); text-align: center;
        }.lp-svc.svc-crm 
        .erp-sec {
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 140px 0;
            clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
            margin-top: 40px;
        }.lp-svc.svc-crm .erp-sec .sec-title { text-align: center; color: var(--c-paper); margin-bottom: 24px; }.lp-svc.svc-crm .erp-sec .vs-perex { color: #666666; margin-bottom: 80px; }.lp-svc.svc-crm .erp-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            background: #333;
            border: 2px solid #333;
        }.lp-svc.svc-crm .erp-card {
            background: var(--c-ink);
            padding: 48px 40px;
            transition: 0.3s;
        }.lp-svc.svc-crm .erp-card:hover { background: #111; }.lp-svc.svc-crm .erp-card .tag { font-family: var(--f-m); font-size: 0.65rem; color: var(--c-orange); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 24px; font-weight: 700; }.lp-svc.svc-crm .erp-card h3 { font-family: var(--f-d); font-size: 2rem; font-weight: 800; margin-bottom: 16px; color: var(--c-paper); }.lp-svc.svc-crm .erp-card p { font-size: 0.95rem; color: #888; line-height: 1.6; }.lp-svc.svc-crm 
        .alt-sec { padding: 140px 0; background: var(--c-paper); }.lp-svc.svc-crm .alt-top {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 80px;
        }.lp-svc.svc-crm .alt-top h2 { font-family: var(--f-d); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin-bottom: 24px; }.lp-svc.svc-crm .alt-top p { font-size: 1.15rem; color: var(--c-ink-light); }.lp-svc.svc-crm .alt-img {
            width: 100%; height: 350px;
            clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 90%);
            overflow: hidden;
        }.lp-svc.svc-crm .alt-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); transition: 0.5s; }.lp-svc.svc-crm .alt-img:hover img { filter: grayscale(0%); transform: scale(1.05); }.lp-svc.svc-crm .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }.lp-svc.svc-crm .b-card {
            background: var(--c-card);
            border: 1px solid var(--c-border);
            padding: 48px 40px;
            position: relative;
            transition: 0.4s var(--ease);
        }.lp-svc.svc-crm .b-card:hover { transform: translateY(-8px); border-color: var(--c-orange); box-shadow: 0 20px 40px rgba(0,0,0,0.04); }.lp-svc.svc-crm .b-card h3 { font-family: var(--f-d); font-size: 2rem; font-weight: 800; margin-bottom: 16px; color: var(--c-orange); }.lp-svc.svc-crm .b-card p { font-size: 1rem; color: var(--c-ink-light); line-height: 1.6; }.lp-svc.svc-crm .badge-fav {
            position: absolute;
            top: 0; right: 40px;
            background: var(--c-orange);
            color: var(--c-ink);
            font-family: var(--f-m);
            font-size: 0.6rem;
            font-weight: 800;
            padding: 6px 12px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }.lp-svc.svc-crm 
        .faq-sec { padding: 140px 0; border-top: 1px solid var(--c-border); }.lp-svc.svc-crm .faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }.lp-svc.svc-crm .faq-left { position: sticky; top: 80px; }.lp-svc.svc-crm .faq-left h2 { font-family: var(--f-d); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin-bottom: 24px; }.lp-svc.svc-crm .faq-left p { color: var(--c-ink-light); font-size: 1.15rem; }.lp-svc.svc-crm .accordion { display: flex; flex-direction: column; border-top: 1px solid var(--c-border); }.lp-svc.svc-crm .faq-item { border-bottom: 1px solid var(--c-border); padding: 32px 0; transition: 0.3s; }.lp-svc.svc-crm .faq-question {
            width: 100%; background: none; border: none;
            display: flex; justify-content: space-between; align-items: center;
            font-family: var(--f-b); font-size: 1.2rem; font-weight: 600; color: var(--c-ink);
            cursor: pointer; text-align: left; transition: color 0.3s;
        }.lp-svc.svc-crm .faq-item:hover .faq-question { color: var(--c-orange); }.lp-svc.svc-crm .faq-answer {
            max-height: 0; overflow: hidden;
            transition: max-height 0.4s var(--ease), margin 0.4s;
            color: var(--c-ink-light); font-size: 1.05rem; line-height: 1.7; max-width: 600px;
        }.lp-svc.svc-crm .faq-item.active .faq-question { color: var(--c-orange); }.lp-svc.svc-crm .faq-item.active .faq-answer { max-height: 400px; margin-top: 24px; }.lp-svc.svc-crm .icon-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; transition: 0.4s var(--ease); }.lp-svc.svc-crm .icon-plus::before, .lp-svc.svc-crm .icon-plus::after { content: ''; position: absolute; background: var(--c-orange); top: 50%; left: 50%; transform: translate(-50%, -50%); }.lp-svc.svc-crm .icon-plus::before { width: 100%; height: 2px; }.lp-svc.svc-crm .icon-plus::after { width: 2px; height: 100%; }.lp-svc.svc-crm .faq-item.active .icon-plus { transform: rotate(135deg); }.lp-svc.svc-crm 
        .final-cta {
            background: var(--c-ink);
            color: var(--c-paper);
            padding: 120px 40px;
            text-align: center;
            clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
            margin-bottom: 60px;
        }.lp-svc.svc-crm .final-cta p {
            font-family: var(--f-d);
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 800;
            line-height: 1.2;
            max-width: 900px;
            margin: 0 auto 48px;
        }.lp-svc.svc-crm .final-cta a {
            color: var(--c-orange);
            font-family: var(--f-m);
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            transition: 0.3s;
        }.lp-svc.svc-crm .final-cta a::after { content: '→'; transition: transform 0.3s; }.lp-svc.svc-crm .final-cta a:hover { color: var(--c-paper); }.lp-svc.svc-crm .final-cta a:hover::after { transform: translateX(8px); }@media (max-width: 1024px) {.lp-svc.svc-crm .hero, .lp-svc.svc-crm .alt-top, .lp-svc.svc-crm .faq-layout { grid-template-columns: 1fr; gap: 48px; }.lp-svc.svc-crm .vs-grid { grid-template-columns: 1fr; }.lp-svc.svc-crm .vs-left { clip-path: none; border-right: none; border-bottom: 1px solid #333; }.lp-svc.svc-crm .vs-right { clip-path: none; margin-left: 0; padding-left: 48px; border-left: 1px solid var(--c-border); }.lp-svc.svc-crm .vs-badge { display: none; }.lp-svc.svc-crm .erp-grid, .lp-svc.svc-crm .bento-grid { grid-template-columns: 1fr; }.lp-svc.svc-crm .alt-img { height: 250px; clip-path: none; }.lp-svc.svc-crm .faq-left { position: static; }.lp-svc.svc-crm .ghost-text { display: none; }
        }.lp-svc.svc-crm .brutal-highlight {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}@media (max-width: 640px) {.lp-svc.svc-crm .container { padding: 0 20px !important; }.lp-svc.svc-crm .hero, .lp-svc.svc-crm .bento-grid, .lp-svc.svc-crm .stats-grid, .lp-svc.svc-crm .process-grid, .lp-svc.svc-crm .faq-layout, .lp-svc.svc-crm .eco-grid, .lp-svc.svc-crm .mig-layout, .lp-svc.svc-crm .value-layout, .lp-svc.svc-crm .ai-grid, .lp-svc.svc-crm .cases-grid, .lp-svc.svc-crm .ctrl-layout, .lp-svc.svc-crm .tags-grid, .lp-svc.svc-crm .erp-grid, .lp-svc.svc-crm .vs-grid, .lp-svc.svc-crm .culture-grid, .lp-svc.svc-crm .dt-row, .lp-svc.svc-crm .hw-sec > *, .lp-svc.svc-crm .platforms-sec .bento-grid, .lp-svc.svc-crm [class*="-grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }.lp-svc.svc-crm .hero-title, .lp-svc.svc-crm h1, .lp-svc.svc-crm .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.05 !important; }.lp-svc.svc-crm .sec-title, .lp-svc.svc-crm h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.1 !important; }.lp-svc.svc-crm h3 { font-size: 1.4rem !important; }.lp-svc.svc-crm .hero-perex, .lp-svc.svc-crm p { font-size: .95rem !important; }.lp-svc.svc-crm .hv-badge, .lp-svc.svc-crm .trending-badge, .lp-svc.svc-crm [class*="-badge"] { display: none !important; }.lp-svc.svc-crm [class*="card-"], .lp-svc.svc-crm .process-sec, .lp-svc.svc-crm .hw-sec, .lp-svc.svc-crm .ai-sec, .lp-svc.svc-crm .erp-sec, .lp-svc.svc-crm .eco-sec, .lp-svc.svc-crm .human-sec, .lp-svc.svc-crm .hv-img, .lp-svc.svc-crm .final-cta { clip-path: none !important; margin-top: 0 !important; }.lp-svc.svc-crm .brutal-label {
    padding: 0 12px !important;
    transform: translateY(-4px) rotate(-1deg) !important;
    box-shadow: 4px 4px 0 var(--c-orange, #E68900) !important;
    margin-right: 4px !important;
  }.lp-svc.svc-crm .btn-brutal, .lp-svc.svc-crm .final-cta a { width: 100%; text-align: center; box-sizing: border-box; padding: 14px 20px !important; }.lp-svc.svc-crm .section-tag { font-size: 0.65rem !important; margin-bottom: 16px !important; }.lp-svc.svc-crm .faq-left { position: static !important; margin-bottom: 20px !important; }.lp-svc.svc-crm .stat-num { font-size: clamp(3rem, 12vw, 5rem) !important; }.lp-svc.svc-crm img { max-width: 100% !important; height: auto !important; }.lp-svc.svc-crm .brutal-highlight { white-space: normal !important; display: inline !important; }.lp-svc.svc-crm .brutal-highlight::after { display: none !important; }.lp-svc.svc-crm .brutal-highlight { background: linear-gradient(transparent 55%, var(--c-orange, #E68900) 55%, var(--c-orange, #E68900) 95%, transparent 95%); padding: 0 2px; }.lp-svc.svc-crm .brutal-label { 
    transform: none !important; 
    clip-path: none !important;
    box-shadow: 3px 3px 0 var(--c-orange, #E68900) !important;
    padding: 2px 10px !important;
    margin-right: 0 !important;
    display: inline-block !important;
  }.lp-svc.svc-crm .hero { padding: 40px 0 48px !important; gap: 32px !important; }.lp-svc.svc-crm .hero-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; letter-spacing: -0.02em !important; }.lp-svc.svc-crm .hero-perex { font-size: .92rem !important; line-height: 1.55 !important; }.lp-svc.svc-crm .platforms-sec, .lp-svc.svc-crm .eco-sec, .lp-svc.svc-crm .hw-sec, .lp-svc.svc-crm .ai-sec, .lp-svc.svc-crm .erp-sec, .lp-svc.svc-crm .human-sec, .lp-svc.svc-crm [class*="-sec"]:first-of-type { padding-top: 40px !important; }.lp-svc.svc-crm .hero, .lp-svc.svc-crm > section:first-child, .lp-svc.svc-crm > header:first-child, .lp-svc.svc-crm > div:first-child > section:first-child {
    padding-top: calc(var(--header-h, 62px) + 28px) !important;
  }.lp-svc.svc-crm h1, .lp-svc.svc-crm h2, .lp-svc.svc-crm h3, .lp-svc.svc-crm .hero-title, .lp-svc.svc-crm .sec-title, .lp-svc.svc-crm [class*="title"], .lp-svc.svc-crm [class*="-h2"] {
    overflow-wrap: anywhere !important;
    word-break: normal;
    hyphens: auto;
    max-width: 100%;
  }.lp-svc.svc-crm, .lp-svc.svc-crm * { max-width: 100%; }.lp-svc.svc-crm .hero-title, .lp-svc.svc-crm .sec-title, .lp-svc.svc-crm h1, .lp-svc.svc-crm h2, .lp-svc.svc-crm h3 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }.lp-svc.svc-crm .brutal-highlight {
    background: linear-gradient(transparent 70%, var(--c-orange, #E68900) 70%, var(--c-orange, #E68900) 92%, transparent 92%) !important;
    padding: 0 3px !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    white-space: normal !important;
    display: inline !important;
  }.lp-svc.svc-crm .brutal-highlight::after { display: none !important; }.lp-svc.svc-crm .bento-card, .lp-svc.svc-crm .b-card, .lp-svc.svc-crm .eco-box, .lp-svc.svc-crm .erp-card, .lp-svc.svc-crm .ai-list { 
    padding: 24px 20px !important;
  }.lp-svc.svc-crm .bento-card h3, .lp-svc.svc-crm .b-card h3 { 
    font-size: 1.1rem !important; 
    letter-spacing: -0.01em !important;
  }.lp-svc.svc-crm .terminal-wrap { padding: 24px 20px !important; }.lp-svc.svc-crm .terminal { padding: 16px !important; font-size: 0.72rem !important; }.lp-svc.svc-crm .term-title { font-size: 1.4rem !important; }.lp-svc.svc-crm .dash-table, .lp-svc.svc-crm .css-dash { transform: none !important; padding: 16px !important; }
}@media (max-width: 400px) {.lp-svc.svc-crm .container { padding: 0 16px !important; }.lp-svc.svc-crm section { padding: 48px 0 !important; }.lp-svc.svc-crm .hero-title { font-size: 1.8rem !important; }.lp-svc.svc-crm .sec-title, .lp-svc.svc-crm h2 { font-size: 1.5rem !important; }
}



/* ===== LP-SVC-BRAND (branding page CSS, scoped) ===== */
/* ════════════════════════════════════════════════════════════════
   BRANDING PAGE - Theme-aware, mobile-first responsive
   All styles scoped under .lp-svc.svc-brand to prevent leakage.
   ════════════════════════════════════════════════════════════════ */

/* ─── Theme variables ─── */
.lp-svc.svc-brand{
  --bg:       #0A0A0A;
  --surface:  #111111;
  --surface-2:#161616;
  --line:     #1E1E1E;
  --text:     #FFFFFF;
  --text-mute:#AAAAAA;
  --text-dim: #888888;
  --orange:   #F5A623;
  --orange-d: #C8851A;
  --orange-soft: rgba(245,166,35,.10);

  --font-d:'Unbounded',sans-serif;
  --font-b:'Outfit',sans-serif;
  --font-m:'JetBrains Mono',monospace;

  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
html[data-theme="light"] .lp-svc.svc-brand{
  --bg:       #FAFAFA;
  --surface:  #FFFFFF;
  --surface-2:#F2F2F2;
  --line:     #E5E5E5;
  --text:     #1A1A1A;
  --text-mute:#555555;
  --text-dim: #888888;
}
.lp-svc.svc-brand *, .lp-svc.svc-brand *::before, .lp-svc.svc-brand *::after{ box-sizing:border-box; }
.lp-svc.svc-brand img{ max-width:100%; display:block; }

/* ─── Utility primitives ─── */
.lp-svc.svc-brand .w{
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,80px);
  width:100%;
}
.lp-svc.svc-brand .lb{
  font-size:clamp(11px,1vw,13px);
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--orange);
  font-weight:600;
  margin-bottom:14px;
  display:inline-block;
  font-family:var(--font-m);
}
.lp-svc.svc-brand .h1{
  font-family:var(--font-d);
  font-size:clamp(34px,6vw,82px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:28px;
  color:var(--text);
}
.lp-svc.svc-brand .h1 em{ color:var(--orange); font-style:normal; }
.lp-svc.svc-brand .h2{
  font-family:var(--font-d);
  font-size:clamp(26px,3.8vw,52px);
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:clamp(28px,4vw,48px);
  color:var(--text);
}
.lp-svc.svc-brand .h2 em{ color:var(--orange); font-style:normal; }
.lp-svc.svc-brand .px{
  font-size:clamp(15px,1.2vw,18px);
  color:var(--text-mute);
  max-width:720px;
  margin-bottom:36px;
  line-height:1.7;
}
.lp-svc.svc-brand .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--orange);
  color:#0A0A0A;
  font-family:var(--font-d);
  font-weight:700;
  font-size:clamp(14px,1.1vw,17px);
  padding:16px 32px;
  text-decoration:none;
  transition:transform .25s,box-shadow .25s,background .25s;
  border:none;
  cursor:pointer;
}
.lp-svc.svc-brand .btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(245,166,35,.25);
  background:var(--orange-d);
}
.lp-svc.svc-brand .sec{
  padding:clamp(70px,10vw,120px) 0;
  border-bottom:1px solid var(--line);
}
.lp-svc.svc-brand .sec.nb{ border-bottom:none; }

/* ════════════════════════════════════════════════
   HERO - ALWAYS dark contrast block (regardless of theme)
   Photo + dark overlay + always-light text. Looks the same in both themes.
   ════════════════════════════════════════════════ */
.lp-svc.svc-brand .hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#0A0A0A;
  color:#FFFFFF;
}
.lp-svc.svc-brand .hero-bg{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1561070791-2526d30994b5?w=1600&q=80') center/cover no-repeat;
  filter:grayscale(60%) brightness(.22) contrast(1.05);
  transition:filter .8s ease;
}
.lp-svc.svc-brand .hero:hover .hero-bg{ filter:grayscale(30%) brightness(.28); }
.lp-svc.svc-brand .hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,#0A0A0A 0%,transparent 25%,transparent 65%,#0A0A0A 100%),
    linear-gradient(90deg,#0A0A0A 0%,rgba(10,10,10,.85) 30%,transparent 60%);
}
.lp-svc.svc-brand .hero-content{
  position:relative;
  z-index:2;
  padding-block:clamp(60px,8vw,100px);  /* vertical only - horizontal padding comes from .w */
  max-width:65%;
}
.lp-svc.svc-brand .hero-content .lb{ color:var(--orange); }
.lp-svc.svc-brand .hero-content .h1{ color:#FFFFFF; }
.lp-svc.svc-brand .hero-content .px{ color:#CCCCCC; }

/* Scattered floating cards */
.lp-svc.svc-brand .hero-scatter{
  position:absolute;
  right:0;top:0;bottom:0;
  width:clamp(280px,26vw,380px);
  z-index:2;
  pointer-events:none;
}
.lp-svc.svc-brand .hero-card{
  position:absolute;
  background:rgba(20,20,20,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  color:#FFFFFF;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
  transition:transform .4s cubic-bezier(.22,.9,.36,1),border-color .3s;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  white-space:nowrap;
}
.lp-svc.svc-brand .hero-card:hover{ border-color:var(--orange); z-index:10; }
.lp-svc.svc-brand .hero-card:nth-child(1){ top:18%; right:10%; transform:rotate(-4deg); }
.lp-svc.svc-brand .hero-card:nth-child(2){ top:38%; right:2%;  transform:rotate(3deg); }
.lp-svc.svc-brand .hero-card:nth-child(3){ top:56%; right:12%; transform:rotate(-2deg); }
.lp-svc.svc-brand .hero-card:nth-child(4){ top:74%; right:4%;  transform:rotate(5deg); border-color:var(--orange); }
.lp-svc.svc-brand .hero-card:hover{ transform:rotate(0) scale(1.06); }
.lp-svc.svc-brand .hero-card-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.lp-svc.svc-brand .hero-card span{ font-weight:700; font-size:clamp(11px,.9vw,13px); }

/* ════════════════════════════════════════════════
   PARA - Photo + content split.
   Photo side always dark; content side theme-aware.
   ════════════════════════════════════════════════ */
.lp-svc.svc-brand .para{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:520px;
}
.lp-svc.svc-brand .para-img{
  position:relative;
  overflow:hidden;
  background:#0A0A0A;
}
.lp-svc.svc-brand .para-img img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(30%) brightness(.5);
  transition:filter .6s;
}
.lp-svc.svc-brand .para:hover .para-img img{ filter:grayscale(0%) brightness(.65); }
.lp-svc.svc-brand .para-img::after{
  content:'';
  position:absolute; inset:0;
  /* Vignette INTO the photo - not fading to outer bg */
  background:linear-gradient(270deg,rgba(10,10,10,.7) 0%,transparent 45%);
  pointer-events:none;
}
.lp-svc.svc-brand .para-content{
  padding:clamp(40px,5vw,80px);
  display:flex; flex-direction:column;
  justify-content:center;
  background:var(--bg);
}
.lp-svc.svc-brand .para-row{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,24px);
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.lp-svc.svc-brand .para-row:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.lp-svc.svc-brand .para-old{
  flex:1;
  color:var(--text-dim);
  font-size:clamp(12px,1vw,14px);
  text-decoration:line-through;
  text-decoration-color:var(--line);
  line-height:1.5;
}
.lp-svc.svc-brand .para-arrow{
  color:var(--orange);
  font-family:var(--font-d);
  font-size:18px;
  flex-shrink:0;
  font-weight:700;
}
.lp-svc.svc-brand .para-new{
  flex:1;
  font-weight:700;
  font-size:clamp(12px,1vw,14px);
  line-height:1.5;
  color:var(--text);
}
.lp-svc.svc-brand .para-new.highlight{ color:var(--orange); }

/* ════════════════════════════════════════════════
   BENTO - Cards grid, theme-aware
   ════════════════════════════════════════════════ */
.lp-svc.svc-brand .sec-bento{
  background:var(--surface-2);
}
html[data-theme="light"] .lp-svc.svc-brand .sec-bento{ background:#F2F2F2; }
:root:not([data-theme="light"]) .lp-svc.svc-brand .sec-bento{ background:#080808; }

.lp-svc.svc-brand .bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;
  gap:2px;
}
.lp-svc.svc-brand .bento-card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:clamp(24px,2.5vw,36px);
  position:relative;
  overflow:hidden;
  transition:border-color .35s,transform .35s;
  display:flex;
  flex-direction:column;
}
.lp-svc.svc-brand .bento-card:hover{
  border-color:rgba(245,166,35,.4);
  transform:translateY(-3px);
}
.lp-svc.svc-brand .bento-card-line{
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.9,.36,1);
}
.lp-svc.svc-brand .bento-card:hover .bento-card-line{ transform:scaleX(1); }
.lp-svc.svc-brand .bento-card h3{
  font-family:var(--font-d);
  font-size:clamp(16px,1.4vw,22px);
  margin-bottom:12px;
  color:var(--text);
}
.lp-svc.svc-brand .bento-card p{
  color:var(--text-mute);
  font-size:clamp(12px,.95vw,14px);
  line-height:1.6;
  margin-bottom:18px;
}
.lp-svc.svc-brand .bento-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:clamp(11px,.9vw,13px);
  font-weight:600;
  color:var(--text-mute);
  flex-grow:1;
}
.lp-svc.svc-brand .bento-list li{
  margin-bottom:7px;
  display:flex;
  gap:8px;
}
.lp-svc.svc-brand .bento-list li::before{ content:"→"; color:var(--orange); }

.lp-svc.svc-brand .bento-num{
  font-family:var(--font-m);
  font-size:10px;
  color:var(--orange);
  letter-spacing:.2em;
  margin-bottom:16px;
  display:block;
  font-weight:600;
}

/* Bento photo tile - ALWAYS dark */
.lp-svc.svc-brand .bento-img{
  grid-column:span 2;
  grid-row:span 2;
  position:relative;
  overflow:hidden;
  min-height:300px;
  background:#0A0A0A;
}
.lp-svc.svc-brand .bento-img img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(30%) brightness(.45);
  transition:filter .6s,transform .6s;
}
.lp-svc.svc-brand .bento-img:hover img{
  filter:grayscale(0%) brightness(.6);
  transform:scale(1.03);
}
.lp-svc.svc-brand .bento-img-overlay{
  position:absolute; inset:0;
  /* Dark gradient INTO photo for text contrast */
  background:linear-gradient(0deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.4) 35%,transparent 65%);
  pointer-events:none;
}
.lp-svc.svc-brand .bento-img-text{
  position:absolute;
  bottom:clamp(20px,3vw,36px);
  left:clamp(20px,3vw,36px);
  right:clamp(20px,3vw,36px);
  font-family:var(--font-d);
  font-size:clamp(20px,2.5vw,36px);
  z-index:2;
  line-height:1.2;
  color:#FFFFFF;
}
.lp-svc.svc-brand .bento-img-text em{ color:var(--orange); font-style:normal; }

/* ════════════════════════════════════════════════
   IMG-BREAK - Always dark photo breaks between sections
   ════════════════════════════════════════════════ */
.lp-svc.svc-brand .img-break{
  position:relative;
  height:clamp(220px,28vw,360px);
  overflow:hidden;
  background:#0A0A0A;
}
.lp-svc.svc-brand .img-break img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(40%) brightness(.35);
  transition:filter .6s;
}
.lp-svc.svc-brand .img-break:hover img{ filter:grayscale(0%) brightness(.5); }
.lp-svc.svc-brand .img-break-ov{
  position:absolute; inset:0;
  /* Vignette INSIDE the photo - left/right fade to dark */
  background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,transparent 30%,transparent 70%,rgba(10,10,10,.85) 100%),
             linear-gradient(180deg,transparent 50%,rgba(10,10,10,.5) 100%);
  pointer-events:none;
}
.lp-svc.svc-brand .img-break-text{
  position:absolute;
  bottom:clamp(24px,4vw,48px);
  left:clamp(24px,5vw,80px);
  right:clamp(24px,5vw,80px);
  font-family:var(--font-d);
  font-size:clamp(22px,3vw,42px);
  z-index:2;
  line-height:1.2;
  color:#FFFFFF;
}
.lp-svc.svc-brand .img-break-text em{ color:var(--orange); font-style:normal; }

/* ════════════════════════════════════════════════
   BRANDBOOK MOCKUP - Themed properly + semantic mini-grid
   ════════════════════════════════════════════════ */
.lp-svc.svc-brand .bb-section{ position:relative; overflow:hidden; }
.lp-svc.svc-brand .bb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,60px);
  align-items:center;
}
.lp-svc.svc-brand .bb-text p{
  color:var(--text-mute);
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.7;
  margin-bottom:16px;
}
.lp-svc.svc-brand .bb-text ul{
  list-style:none;
  padding:0;
  margin-top:24px;
  font-weight:700;
  font-family:var(--font-d);
  font-size:clamp(14px,1.2vw,18px);
}
.lp-svc.svc-brand .bb-text ul li{ margin-bottom:12px; display:flex; gap:10px; color:var(--text); }
.lp-svc.svc-brand .bb-text ul li::before{ content:"✓"; color:var(--orange); flex-shrink:0; }

.lp-svc.svc-brand .bb-mockup{
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
  box-shadow:0 24px 48px rgba(0,0,0,.06);
}
.lp-svc.svc-brand .bb-mockup-top{
  background:var(--surface-2);
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.lp-svc.svc-brand .bb-mockup-logo{
  font-family:var(--font-d);
  font-size:clamp(16px,1.6vw,22px);
  color:var(--text);
  font-weight:700;
}
.lp-svc.svc-brand .bb-mockup-logo em{ color:var(--orange); font-style:normal; }
.lp-svc.svc-brand .bb-mockup-tag{
  font-family:var(--font-m);
  font-size:10px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.2em;
}
.lp-svc.svc-brand .bb-mockup-body{
  padding:clamp(20px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:clamp(20px,2.5vw,28px);
}
.lp-svc.svc-brand .bb-row-label{
  font-family:var(--font-m);
  font-size:9px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.2em;
  margin-bottom:10px;
  display:block;
}

/* Color palette swatches - colors are absolute, ALWAYS the same */
.lp-svc.svc-brand .bb-palette{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.lp-svc.svc-brand .bb-swatch{
  aspect-ratio:1/1;
  border-radius:6px;
  border:1px solid var(--line);
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  font-family:var(--font-m);
  font-size:10px;
  font-weight:600;
  line-height:1.3;
  transition:transform .25s;
}
.lp-svc.svc-brand .bb-swatch:hover{ transform:scale(1.05); }
.lp-svc.svc-brand .bb-swatch span{ display:block; font-size:8px; opacity:.7; text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px; }

/* Typography sample */
.lp-svc.svc-brand .bb-typo{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lp-svc.svc-brand .bb-typo-main{
  font-family:var(--font-d);
  font-size:clamp(16px,1.6vw,22px);
  color:var(--text);
  font-weight:700;
}
.lp-svc.svc-brand .bb-typo-sub{
  font-family:var(--font-b);
  font-size:13px;
  color:var(--text-mute);
}

/* Logo placement mini-grid - semantic always-same colors */
.lp-svc.svc-brand .bb-grid-mini{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.lp-svc.svc-brand .bb-mini{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-d);
  font-weight:700;
  font-size:13px;
  border-radius:4px;
  border:1px solid var(--line);
  transition:transform .25s;
}
.lp-svc.svc-brand .bb-mini:hover{ transform:translateY(-2px); }
.lp-svc.svc-brand .bb-mini em{ font-style:normal; }
.lp-svc.svc-brand .bb-mini.light{
  background:#FFFFFF;
  color:#0A0A0A;
}
.lp-svc.svc-brand .bb-mini.light em{ color:#F5A623; }
.lp-svc.svc-brand .bb-mini.dark{
  background:#0A0A0A;
  color:#FFFFFF;
  border-color:#0A0A0A;
}
.lp-svc.svc-brand .bb-mini.dark em{ color:#F5A623; }
.lp-svc.svc-brand .bb-mini.accent{
  background:#F5A623;
  color:#0A0A0A;
  border-color:#F5A623;
}
.lp-svc.svc-brand .bb-mini.accent em{ color:#FFFFFF; }
.lp-svc.svc-brand .bb-mini.mono{
  background:var(--surface-2);
  color:var(--text);
  font-size:20px;
}

/* ════════════════════════════════════════════════
   FAQ - Theme-aware accordion
   ════════════════════════════════════════════════ */
.lp-svc.svc-brand .faq-layout{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:clamp(30px,5vw,80px);
  align-items:start;
}
.lp-svc.svc-brand .faq-side .px{
  font-size:clamp(13px,1vw,15px);
  margin-bottom:0;
}
.lp-svc.svc-brand .dt{
  background:var(--surface);
  border:1px solid var(--line);
  margin-bottom:2px;
  padding:20px 28px;
  cursor:pointer;
  transition:background .3s,border-color .3s;
}
.lp-svc.svc-brand .dt:hover{
  background:var(--orange-soft);
  border-color:rgba(245,166,35,.3);
}
.lp-svc.svc-brand .dt summary{
  font-family:var(--font-d);
  font-size:clamp(13px,1vw,16px);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:var(--text);
}
.lp-svc.svc-brand .dt summary::-webkit-details-marker{ display:none; }
.lp-svc.svc-brand .dt summary::after{
  content:"+";
  color:var(--orange);
  font-size:22px;
  font-weight:400;
  flex-shrink:0;
  transition:transform .25s;
}
.lp-svc.svc-brand .dt[open] summary::after{ content:"-"; transform:rotate(180deg); }
.lp-svc.svc-brand .faq-body{
  margin-top:14px;
  font-size:14px;
  line-height:1.7;
  color:var(--text-mute);
}

/* ════════════════════════════════════════════════
   CTA - ALWAYS orange. Hardcoded for theme-independence.
   ════════════════════════════════════════════════ */
.lp-svc.svc-brand .cta{
  background:#F5A623;
  color:#0A0A0A;
  padding:clamp(60px,8vw,120px) clamp(24px,5vw,80px);
  text-align:center;
  position:relative;
  overflow:hidden;
  border-bottom:none;
}
.lp-svc.svc-brand .cta::before{
  content:'BRAND';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-d);
  font-size:clamp(80px,16vw,260px);
  color:rgba(10,10,10,.07);
  font-weight:900;
  letter-spacing:-.04em;
  white-space:nowrap;
  pointer-events:none;
  line-height:1;
}
.lp-svc.svc-brand .cta .h2{
  color:#0A0A0A;
  margin-bottom:18px;
  position:relative;
}
.lp-svc.svc-brand .cta .h2 em{ color:#FFFFFF; }
.lp-svc.svc-brand .cta p{
  color:rgba(10,10,10,.85);
  font-size:clamp(15px,1.2vw,18px);
  font-weight:600;
  margin:0 auto 36px;
  max-width:640px;
  position:relative;
  line-height:1.7;
}
.lp-svc.svc-brand .cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#0A0A0A;
  color:#FFFFFF;
  font-family:var(--font-d);
  font-weight:700;
  font-size:clamp(14px,1.1vw,17px);
  padding:18px 36px;
  text-decoration:none;
  transition:background .25s,transform .25s;
  position:relative;
}
.lp-svc.svc-brand .cta-btn:hover{
  background:#1A1A1A;
  transform:translateY(-3px);
}

/* ════════════════════════════════════════════════
   RESPONSIVE - Three breakpoints + edge case 400
   ════════════════════════════════════════════════ */
@media (max-width:1100px){
  .lp-svc.svc-brand .hero-content{ max-width:58%; }
  .lp-svc.svc-brand .hero-scatter{ width:clamp(220px,24vw,300px); }
  .lp-svc.svc-brand .hero-card{ padding:8px 14px; }
  .lp-svc.svc-brand .hero-card span{ font-size:11px; }
}

@media (max-width:900px){
  .lp-svc.svc-brand .hero{ min-height:auto; }
  .lp-svc.svc-brand .hero-content{
    padding-block:clamp(100px,15vw,140px) clamp(50px,8vw,80px);
    max-width:100%;
  }
  .lp-svc.svc-brand .hero-scatter{ display:none; }
  .lp-svc.svc-brand .para{ grid-template-columns:1fr; }
  .lp-svc.svc-brand .para-img{ min-height:220px; }
  .lp-svc.svc-brand .para-img::after{
    background:linear-gradient(0deg,rgba(10,10,10,.7) 0%,transparent 55%);
  }
  .lp-svc.svc-brand .bento{ grid-template-columns:1fr 1fr; }
  .lp-svc.svc-brand .bento-img{ grid-column:span 2; grid-row:span 1; min-height:240px; }
  .lp-svc.svc-brand .bb-grid{ grid-template-columns:1fr; }
  .lp-svc.svc-brand .faq-layout{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .lp-svc.svc-brand .w{ padding:0 20px; }
  .lp-svc.svc-brand .hero-content{ padding-block:90px 50px; }
  .lp-svc.svc-brand .h1{ font-size:clamp(28px,9vw,40px); }
  .lp-svc.svc-brand .h2{ font-size:clamp(22px,7vw,32px); }
  .lp-svc.svc-brand .px{ font-size:14px; }
  .lp-svc.svc-brand .btn,
  .lp-svc.svc-brand .cta-btn{ width:100%; max-width:360px; justify-content:center; padding:16px 24px; }
  .lp-svc.svc-brand .para-row{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:18px; }
  .lp-svc.svc-brand .para-arrow{ transform:rotate(90deg); align-self:center; }
  .lp-svc.svc-brand .para-old,
  .lp-svc.svc-brand .para-new{ width:100%; }
  .lp-svc.svc-brand .bento{ grid-template-columns:1fr; }
  .lp-svc.svc-brand .bento-img{ grid-column:span 1; min-height:200px; }
  .lp-svc.svc-brand .bb-palette{ grid-template-columns:repeat(2,1fr); }
  .lp-svc.svc-brand .bb-swatch{ aspect-ratio:2/1; }
  .lp-svc.svc-brand .bb-grid-mini{ grid-template-columns:1fr 1fr; }
  .lp-svc.svc-brand .dt{ padding:18px 20px; }
  .lp-svc.svc-brand .dt summary{ font-size:14px; }
  .lp-svc.svc-brand .cta{ padding:60px 20px; }
  .lp-svc.svc-brand .cta::before{ font-size:clamp(60px,20vw,140px); }
}

@media (max-width:400px){
  .lp-svc.svc-brand .h1{ font-size:26px; line-height:1.05; }
  .lp-svc.svc-brand .h2{ font-size:22px; }
  .lp-svc.svc-brand .bb-mockup-body{ padding:18px; }
  .lp-svc.svc-brand .bb-swatch{ aspect-ratio:2.2/1; padding:8px; }
}