:root {
      --red: #C41E3A;
      --red-dark: #9B1B30;
      --red-bright: #e94560;
      --red-light: #fef2f2;
      --red-glow: rgba(196,30,58,.15);
      --black: #111111;
      --gray-900: #1a1a1a;
      --gray-800: #2d2d2d;
      --gray-700: #404040;
      --gray-600: #555555;
      --gray-500: #777777;
      --gray-400: #999999;
      --gray-300: #c4c4c4;
      --gray-200: #e5e5e5;
      --gray-100: #f3f3f3;
      --gray-50: #f9f9f9;
      --white: #ffffff;
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --max-w: 1140px;
      --transition: .3s cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body { font-family: var(--font); color: var(--gray-900); background: var(--white); line-height: 1.6; overflow-x: hidden; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

    /* ── Animations ── */
    @keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
    @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
    @keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
    @keyframes spinSlow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
    @keyframes dash { to { stroke-dashoffset: 0; } }
    @keyframes slideInLeft { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
    @keyframes slideInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
    @keyframes scaleIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
    @keyframes slideUp { from { opacity:0; transform:translateY(60px); } to { opacity:1; transform:translateY(0); } }

    /* Page load animation */
    .page-enter { animation: fadeIn .5s ease both; }

    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
    .reveal-left.visible { opacity: 1; transform: translateX(0); }
    .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
    .reveal-right.visible { opacity: 1; transform: translateX(0); }
    .reveal-scale { opacity: 0; transform: scale(.9); transition: opacity .7s ease, transform .7s ease; }
    .reveal-scale.visible { opacity: 1; transform: scale(1); }
    .reveal-d1 { transition-delay: .1s; }
    .reveal-d2 { transition-delay: .2s; }
    .reveal-d3 { transition-delay: .3s; }
    .reveal-d4 { transition-delay: .4s; }
    .reveal-d5 { transition-delay: .5s; }

    /* ── Decorative helpers ── */
    .glow-dot {
      position: absolute; width: 300px; height: 300px; border-radius: 50%;
      background: radial-gradient(circle, rgba(196,30,58,.06), transparent 70%);
      pointer-events: none; z-index: 0;
    }
    .grid-bg {
      background-image: radial-gradient(circle, var(--gray-200) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .gradient-text {
      background: linear-gradient(135deg, var(--red), var(--red-bright));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .tag { display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; }
    .tag-red { background: var(--red-light); color: var(--red); }
    .tag-dark { background: var(--gray-100); color: var(--gray-600); }
    .divider { width: 48px; height: 3px; background: var(--red); border-radius: 2px; margin: 16px 0; }
    .divider-center { margin: 16px auto; }

    /* ═══ NAVBAR ═══ */
    .navbar {
      position: sticky; top: 0; z-index: 1000;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--gray-200);
      transition: box-shadow var(--transition);
    }
    .navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.06); }
    .scroll-progress {
      position: absolute; bottom: 0; left: 0; height: 2px;
      background: linear-gradient(90deg, var(--red), var(--red-bright));
      width: 0%; transition: width .1s linear; z-index: 10;
    }
    .navbar .container {
      display: flex; align-items: center; justify-content: space-between; height: 64px;
    }
    /* Logo — mirrors .sidebar__brand in the admin panel: 30×30 red-gradient
       mark, 17px/800 wordmark with "land" inline-styled red. Wrapping in
       <strong> keeps "Eshop" and "land" as one flex item so the container's
       gap doesn't wedge them apart. */
    .nav-logo {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 17px; font-weight: 800; color: var(--gray-900); letter-spacing: -.3px;
      text-decoration: none;
    }
    .nav-logo__text { font-weight: 800; color: var(--gray-900); }
    .nav-logo__mark {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      background: linear-gradient(135deg, #DC2626, #991B1B);
      display: inline-flex; align-items: center; justify-content: center;
      color: #ffffff !important;   /* cart inherits via currentColor — keep this explicit */
    }
    .nav-logo__mark svg { width: 16px; height: 16px; color: #ffffff !important; }
    .nav-logo__mark svg * { stroke: #ffffff !important; }
    .nav-logo__mark svg circle { fill: #ffffff !important; }
    .nav-links { display: flex; align-items: center; gap: 8px; }
    .nav-link {
      padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--gray-600);
      border-radius: 8px; transition: all var(--transition);
    }
    .nav-link:hover { color: var(--gray-900); background: var(--gray-50); }
    .nav-link.active { color: var(--red); background: var(--red-light); }
    .nav-cta {
      margin-left: 8px; padding: 9px 22px;
      background: var(--red); color: var(--white) !important; border-radius: 8px;
      font-weight: 700; font-size: 14px; transition: all var(--transition);
      box-shadow: 0 2px 8px var(--red-glow);
    }
    .nav-cta:hover { background: var(--red-bright); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(233,69,96,.3); }

    .mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }

    /* ═══ SECTIONS ═══ */
    .section { padding: 96px 0; }
    .section-gray { background: var(--gray-50); }
    .section-red { background: var(--red-light); }
    .section-dark { background: var(--gray-900); }

    .section-label {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
      color: var(--red); margin-bottom: 16px;
    }
    .section-label .line { width: 32px; height: 2px; background: linear-gradient(90deg, var(--red), var(--red-bright)); border-radius: 1px; }

    .section-title { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.15; margin-bottom: 16px; color: var(--gray-900); }
    .section-title .accent { color: var(--red); }
    .section-sub { font-size: 17px; color: var(--gray-500); line-height: 1.7; max-width: 580px; }
    .section-header { text-align: center; margin-bottom: 56px; }
    .section-header .section-sub { margin: 0 auto; }

    /* ═══ HERO (home) ═══ */
    .hero {
      padding: 80px 0 96px; position: relative; overflow: hidden; background: var(--white);
      background-image: radial-gradient(circle at 80% 20%, rgba(196,30,58,.03) 0%, transparent 50%),
                        radial-gradient(circle at 20% 80%, rgba(196,30,58,.02) 0%, transparent 50%);
    }
    .hero::before {
      content: ''; position: absolute; top: 60px; right: -60px; width: 400px; height: 400px;
      border: 1px solid rgba(196,30,58,.06); border-radius: 50%; pointer-events: none;
      animation: spinSlow 60s linear infinite;
    }
    .hero::after {
      content: ''; position: absolute; top: 120px; right: 0px; width: 200px; height: 200px;
      border: 1px dashed rgba(196,30,58,.08); border-radius: 50%; pointer-events: none;
      animation: spinSlow 40s linear infinite reverse;
    }
    .hero .container { position: relative; z-index: 2; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .hero-content { max-width: 520px; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 18px; border-radius: 50px;
      background: var(--red-light); border: 1px solid rgba(196,30,58,.15);
      color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 28px;
      animation: fadeIn .8s .2s both; position: relative; overflow: hidden;
    }
    .hero-badge::after {
      content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
      animation: shimmer 3s infinite;
    }
    @keyframes shimmer { 0% { left:-100%; } 100% { left:200%; } }
    .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 2s ease-in-out infinite; }
    .hero h1 {
      font-size: 52px; font-weight: 900; color: var(--gray-900);
      line-height: 1.1; letter-spacing: -2px; margin-bottom: 20px;
      animation: fadeUp .7s .3s both;
    }
    .hero h1 .accent { color: var(--red); }
    .hero-sub {
      font-size: 17px; color: var(--gray-500); line-height: 1.75; margin-bottom: 36px;
      animation: fadeUp .7s .45s both;
    }
    .hero-buttons { display: flex; gap: 12px; animation: fadeUp .7s .6s both; }
    .hero-note { margin-top: 14px; font-size: 13px; color: var(--gray-400); animation: fadeUp .7s .7s both; }
    .hero-visual {
      display: flex; flex-direction: column; gap: 16px;
      animation: fadeUp .8s .5s both;
    }
    .hero-card {
      padding: 22px 24px; border-radius: 14px;
      background: var(--white); border: 1px solid var(--gray-200);
      box-shadow: 0 2px 12px rgba(0,0,0,.04);
      display: flex; align-items: flex-start; gap: 16px;
      transition: all .35s cubic-bezier(.4,0,.2,1);
      position: relative;
    }
    .hero-card::after {
      content: ''; position: absolute; inset: 0; border-radius: 14px;
      box-shadow: 0 0 0 0 rgba(196,30,58,0); transition: box-shadow .35s ease;
    }
    .hero-card:hover { border-color: var(--red); transform: translateY(-4px) scale(1.01); }
    .hero-card:hover::after { box-shadow: 0 12px 36px rgba(196,30,58,.12); }
    .hero-card-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: var(--red-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .hero-card-icon svg { width: 22px; height: 22px; color: var(--red); }
    .hero-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .hero-card p { font-size: 13px; color: var(--gray-500); line-height: 1.5; }

    /* ═══ BUTTONS ═══ */
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 30px; background: linear-gradient(135deg, var(--red), var(--red-bright)); color: var(--white);
      font-size: 15px; font-weight: 700; border-radius: 10px;
      transition: all .35s cubic-bezier(.4,0,.2,1); box-shadow: 0 4px 16px var(--red-glow);
      position: relative; overflow: hidden;
    }
    .btn-primary::after {
      content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
      transition: left .5s ease;
    }
    .btn-primary:hover::after { left: 200%; }
    .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(233,69,96,.3); }
    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 30px; background: var(--white); color: var(--gray-800);
      font-size: 15px; font-weight: 600; border-radius: 10px;
      border: 1px solid var(--gray-200); transition: all var(--transition);
    }
    .btn-secondary:hover { border-color: var(--gray-400); background: var(--gray-50); }

    /* ═══ TRUST BAR ═══ */
    .trust-bar { padding: 48px 0; border-bottom: 1px solid var(--gray-100); background: var(--gray-50); }
    .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .trust-item {
      display: flex; align-items: center; gap: 14px; padding: 18px 20px;
      border-radius: 12px; background: var(--white); border: 1px solid var(--gray-200);
      transition: all .35s cubic-bezier(.4,0,.2,1); position: relative;
    }
    .trust-item:hover { border-color: var(--red); box-shadow: 0 8px 24px var(--red-glow); transform: translateY(-2px); }
    .trust-icon {
      width: 42px; height: 42px; border-radius: 10px;
      background: var(--red-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .trust-icon svg { width: 20px; height: 20px; color: var(--red); }
    .trust-text { font-size: 14px; font-weight: 600; color: var(--gray-800); line-height: 1.3; }
    .trust-text small { display: block; font-size: 12px; font-weight: 400; color: var(--gray-500); margin-top: 2px; }

    /* ═══ FEATURE CARDS ═══ */
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .feature-card {
      padding: 36px 28px; border-radius: 16px;
      background: var(--white); border: 1px solid var(--gray-200);
      transition: all .35s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden;
    }
    .feature-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--red), var(--red-bright)); transform: scaleX(0); transform-origin: left;
      transition: transform .4s cubic-bezier(.4,0,.2,1);
    }
    .feature-card::after {
      content: ''; position: absolute; bottom: -60px; right: -60px; width: 120px; height: 120px;
      background: radial-gradient(circle, rgba(196,30,58,.04), transparent 70%);
      transition: all .4s ease; pointer-events: none;
    }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-card:hover::after { bottom: -30px; right: -30px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(196,30,58,.08), transparent 70%); }
    .feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.08); border-color: rgba(196,30,58,.25); }
    .feature-icon {
      width: 52px; height: 52px; border-radius: 14px;
      background: linear-gradient(135deg, var(--red-light), rgba(233,69,96,.08));
      display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
      transition: all var(--transition); position: relative;
    }
    .feature-card:hover .feature-icon { background: var(--red); }
    .feature-icon svg { width: 24px; height: 24px; color: var(--red); transition: color var(--transition); }
    .feature-card:hover .feature-icon svg { color: var(--white); }
    .feature-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
    .feature-card p { font-size: 14px; color: var(--gray-500); line-height: 1.7; }

    /* ═══ COMPARISON ═══ */
    .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 920px; margin: 0 auto; }
    .compare-card { padding: 36px; border-radius: 16px; }
    .compare-bad { background: var(--gray-50); border: 1px solid var(--gray-200); }
    .compare-good {
      background: var(--white); border: 2px solid var(--red);
      box-shadow: 0 8px 40px var(--red-glow), 0 0 0 4px rgba(196,30,58,.04);
      position: relative;
    }
    .compare-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
    .compare-bad h3 { color: var(--gray-500); }
    .compare-good h3 { color: var(--red); }
    .compare-list { list-style: none; }
    .compare-list li { padding: 10px 0; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--gray-100); }
    .compare-list li:last-child { border-bottom: none; }
    .compare-bad li { color: var(--gray-500); }
    .compare-good li { color: var(--gray-700); }
    .compare-list .ix { color: var(--gray-300); font-weight: 700; font-size: 16px; flex-shrink: 0; line-height: 1.4; }
    .compare-list .ic { color: var(--red); font-weight: 700; font-size: 16px; flex-shrink: 0; line-height: 1.4; }
    .compare-ribbon {
      position: absolute; top: 16px; right: -8px;
      background: var(--red); color: var(--white); font-size: 11px; font-weight: 800;
      padding: 5px 16px 5px 12px; letter-spacing: 1px; text-transform: uppercase;
      border-radius: 4px 0 0 4px;
    }
    .compare-ribbon::after {
      content: ''; position: absolute; right: 0; bottom: -8px;
      border: 4px solid var(--red-dark); border-right-color: transparent; border-bottom-color: transparent;
    }

    /* ═══ INDIVIDUAL APPROACH (proc-my) ═══ */
    .approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .approach-num { font-size: 72px; font-weight: 900; color: var(--red-light); line-height: 1; margin-bottom: 8px; letter-spacing: -3px; }
    .approach-item { margin-bottom: 48px; }
    .approach-item:last-child { margin-bottom: 0; }
    .approach-item h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
    .approach-item p { font-size: 15px; color: var(--gray-500); line-height: 1.7; }

    .value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .value-card {
      padding: 32px; border-radius: 14px; background: var(--white);
      border: 1px solid var(--gray-200); transition: all var(--transition); text-align: center;
    }
    .value-card:hover { border-color: var(--red); box-shadow: 0 8px 24px var(--red-glow); transform: translateY(-3px); }
    .value-card-icon { font-size: 32px; margin-bottom: 16px; }
    .value-card h4 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
    .value-card p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

    /* ═══ SHOWCASE ═══ */
    .showcase-card {
      border-radius: 20px; overflow: hidden; background: var(--white);
      border: 1px solid var(--gray-200); box-shadow: 0 8px 40px rgba(0,0,0,.06);
      transition: all .4s cubic-bezier(.4,0,.2,1);
    }
    .showcase-card:hover { box-shadow: 0 20px 70px rgba(0,0,0,.1); transform: translateY(-6px); }
    .showcase-browser {
      background: var(--gray-100); padding: 12px 16px;
      display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--gray-200);
    }
    .showcase-dot { width: 10px; height: 10px; border-radius: 50%; }
    .showcase-dot:nth-child(1) { background: #ff5f57; }
    .showcase-dot:nth-child(2) { background: #ffbd2e; }
    .showcase-dot:nth-child(3) { background: #28ca42; }
    .showcase-url {
      flex: 1; text-align: center; font-size: 12px; color: var(--gray-500);
      background: var(--white); border-radius: 6px; padding: 5px 12px;
      margin-left: 8px;
    }
    .showcase-body { padding: 40px; }
    .showcase-body h3 { font-size: 28px; font-weight: 900; margin-bottom: 12px; }
    .showcase-body p { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-bottom: 24px; }
    .showcase-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
    .showcase-feat {
      display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-600);
    }
    .showcase-feat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
    .showcase-link { font-size: 14px; color: var(--red); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
    .showcase-link:hover { text-decoration: underline; }

    /* ═══ PRO FEATURES LIST ═══ */
    .pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .pro-item {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 20px; border-radius: 10px;
      background: var(--white); border: 1px solid var(--gray-200);
      transition: all var(--transition);
    }
    .pro-item:hover { border-color: var(--red); transform: translateX(6px); box-shadow: 0 4px 16px var(--red-glow); }
    .pro-item:hover .pro-check { background: var(--red); }
    .pro-item:hover .pro-check svg { color: var(--white); }
    .pro-check {
      width: 28px; height: 28px; border-radius: 7px;
      background: var(--red-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .pro-check svg { width: 14px; height: 14px; color: var(--red); }
    .pro-item span { font-size: 14px; font-weight: 600; color: var(--gray-700); }

    /* ═══ AUTOMATION LIST ═══ */
    .auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
    .auto-features { display: flex; flex-direction: column; gap: 16px; }
    .auto-feat {
      display: flex; gap: 18px; padding: 24px;
      border-radius: 14px; background: var(--white); border: 1px solid var(--gray-200);
      transition: all var(--transition);
    }
    .auto-feat:hover { border-color: var(--red); box-shadow: 0 6px 24px var(--red-glow); transform: translateX(6px); }
    .auto-feat-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .auto-feat-icon svg { width: 22px; height: 22px; color: var(--white); }
    .auto-feat h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .auto-feat p { font-size: 13px; color: var(--gray-500); line-height: 1.6; }

    .auto-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .auto-stat {
      padding: 28px; border-radius: 14px; text-align: center;
      background: var(--white); border: 1px solid var(--gray-200);
      transition: all .35s cubic-bezier(.4,0,.2,1);
    }
    .auto-stat:hover { border-color: var(--red); box-shadow: 0 8px 28px var(--red-glow); transform: translateY(-3px); }
    .auto-stat-num { font-size: 36px; font-weight: 900; color: var(--red); line-height: 1; }
    .auto-stat-label { font-size: 11px; color: var(--gray-400); margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

    /* ═══ INTEGRATIONS ═══ */
    .int-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 40px; }
    .int-card {
      padding: 28px 16px; border-radius: 12px; text-align: center;
      background: var(--white); border: 1px solid var(--gray-200); transition: all var(--transition);
    }
    .int-card:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 8px 24px var(--red-glow); }
    .int-icon {
      width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 14px;
      background: var(--gray-100); display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 900; color: var(--red); transition: all var(--transition);
    }
    .int-card:hover .int-icon { background: var(--red); color: var(--white); }
    .int-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
    .int-card p { font-size: 12px; color: var(--gray-500); }

    /* Balíčky Starter/Business/Enterprise zrušeny 8/2026, ceník je
       procento z obratu. Styly .pricing-* šly pryč i s nimi, nové jsou
       .tier-* a .calc-* dole. */

    /* ═══ WOPRO ECOSYSTEM ═══ */
    .eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .eco-card {
      padding: 28px 20px; border-radius: 14px; text-align: center;
      background: var(--white); border: 1px solid var(--gray-200);
      transition: all .35s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden;
    }
    .eco-card::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--red), var(--red-bright));
      transform: scaleX(0); transition: transform .35s ease;
    }
    .eco-card:hover::after { transform: scaleX(1); }
    .eco-card:hover { border-color: var(--red); transform: translateY(-5px); box-shadow: 0 12px 32px var(--red-glow); }
    .eco-card-icon { font-size: 28px; margin-bottom: 12px; }
    .eco-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
    .eco-card p { font-size: 12px; color: var(--gray-500); line-height: 1.5; }

    /* ═══ CTA SECTION ═══ */
    .cta-section {
      padding: 80px 0; text-align: center;
      background: var(--gray-900); color: var(--white);
      position: relative; overflow: hidden;
    }
    .cta-section::before {
      content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(196,30,58,.1), transparent 70%); pointer-events: none;
    }
    .cta-section::after {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,.015) 1px, transparent 1px);
      background-size: 32px 32px; pointer-events: none;
    }
    .cta-section .container { position: relative; z-index: 2; }
    .cta-section h2 { font-size: 36px; font-weight: 900; margin-bottom: 12px; letter-spacing: -1px; color: var(--white); }
    .cta-section h2 .accent { color: var(--red-bright); }
    .cta-section p { font-size: 17px; color: var(--gray-400); margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; }

    /* ═══ QUOTE ═══ */
    .quote-block {
      max-width: 640px; margin: 0 auto; text-align: center; padding: 48px 0;
    }
    .quote-block { position: relative; }
    .quote-block::before {
      content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
      width: 80px; height: 80px; border-radius: 50%; background: var(--red-light); z-index: 0;
    }
    .quote-mark { font-size: 56px; color: var(--red); opacity: .3; line-height: 1; margin-bottom: 16px; position: relative; z-index: 1; }
    .quote-text { font-size: 20px; color: var(--gray-700); font-weight: 500; line-height: 1.7; margin-bottom: 20px; font-style: italic; position: relative; z-index: 1; }
    .quote-author { font-size: 14px; font-weight: 700; color: var(--gray-800); }
    .quote-role { font-size: 13px; color: var(--gray-400); }

    /* Multi-testimonial grid — used where we want several quotes side-by-side
       instead of one centred hero quote. */
    .quotes-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
      max-width: 1120px; margin: 0 auto;
    }
    .quote-card {
      background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px;
      padding: 32px 28px; box-shadow: 0 4px 16px rgba(0,0,0,.04);
      text-align: left; display: flex; flex-direction: column;
    }
    .quote-card .quote-mark { font-size: 44px; margin-bottom: 4px; }
    .quote-card .quote-text { font-size: 15px; line-height: 1.65; margin-bottom: 18px; flex: 1; }
    @media (max-width: 900px) {
      .quotes-grid { grid-template-columns: 1fr; max-width: 520px; }
    }

    /* ═══ PAGE HERO (subpages) ═══ */
    .page-hero {
      padding: 56px 0 48px; text-align: center; border-bottom: 1px solid var(--gray-100);
      background: var(--gray-50); position: relative; overflow: hidden;
    }
    .page-hero::before {
      content: ''; position: absolute; top: -80px; right: -80px; width: 250px; height: 250px;
      border: 1px solid rgba(196,30,58,.05); border-radius: 50%; pointer-events: none;
    }
    .page-hero::after {
      content: ''; position: absolute; bottom: -40px; left: -40px; width: 150px; height: 150px;
      border: 1px dashed rgba(196,30,58,.06); border-radius: 50%; pointer-events: none;
    }
    .page-hero h1 { font-size: 40px; font-weight: 900; letter-spacing: -1px; margin-bottom: 12px; }
    .page-hero h1 .accent { color: var(--red); }
    .page-hero p { font-size: 17px; color: var(--gray-500); max-width: 560px; margin: 0 auto; }

    /* ═══ TARGET AUDIENCE ═══ */
    .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .audience-card {
      padding: 32px; border-radius: 14px; background: var(--white);
      border: 1px solid var(--gray-200); text-align: center; transition: all var(--transition);
    }
    .audience-card:hover { border-color: var(--red); box-shadow: 0 12px 32px var(--red-glow); transform: translateY(-6px); }
    .audience-card:hover .audience-icon svg { transform: scale(1.1); }
    .audience-icon svg { transition: transform var(--transition); }
    .audience-icon { font-size: 40px; margin-bottom: 16px; }
    .audience-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
    .audience-card p { font-size: 14px; color: var(--gray-500); line-height: 1.6; }

    /* ═══ FOOTER ═══ */
    /* ═══ SCROLL INDICATOR ═══ */
    .scroll-hint {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 5;
      animation: float 3s ease-in-out infinite;
    }
    .scroll-hint span { font-size: 11px; color: var(--gray-400); font-weight: 500; }
    .scroll-hint-arrow { width: 20px; height: 20px; border-right: 2px solid var(--gray-300); border-bottom: 2px solid var(--gray-300); transform: rotate(45deg); }

    .footer { padding: 56px 0 32px; border-top: 1px solid var(--gray-200); background: var(--gray-50); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
    .footer-brand p { font-size: 13px; color: var(--gray-400); line-height: 1.6; margin-top: 12px; }
    .footer-col h4 { font-size: 12px; font-weight: 700; color: var(--gray-800); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
    .footer-col a { display: block; font-size: 14px; color: var(--gray-500); padding: 3px 0; transition: color var(--transition); }
    .footer-col a:hover { color: var(--red); }
    .footer-bottom {
      border-top: 1px solid var(--gray-200); padding-top: 24px;
      display: flex; justify-content: space-between; align-items: center;
    }
    .footer-copy { font-size: 13px; color: var(--gray-400); }
    .footer-copy a { color: var(--gray-500); }
    .footer-copy a:hover { color: var(--red); }

    /* ═══ VOP ═══ */
    .vop-content { max-width: 760px; margin: 0 auto; }
    .vop-content h2 { font-size: 22px; font-weight: 800; margin: 40px 0 12px; color: var(--gray-900); }
    .vop-content h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
    .vop-content p, .vop-content li { font-size: 14px; color: var(--gray-600); line-height: 1.8; }
    .vop-content ul { padding-left: 24px; margin: 8px 0; }
    .vop-content li { margin-bottom: 4px; }
    .vop-content .vop-date { font-size: 13px; color: var(--gray-400); margin-bottom: 32px; }

    /* ═══ MARKET COMPARISON BAR ═══ */
    .market-bars { max-width: 700px; margin: 0 auto; }
    .market-bar-item { margin-bottom: 24px; }
    .market-bar-label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
    .market-bar-label .price { color: var(--gray-400); font-weight: 500; }
    .market-bar-track { height: 12px; background: var(--gray-100); border-radius: 6px; overflow: hidden; position: relative; }
    .market-bar-fill { height: 100%; border-radius: 6px; width: 0; transition: width 1.5s cubic-bezier(.4,0,.2,1); }
    .market-bar-fill.gray { background: linear-gradient(90deg, var(--gray-200), var(--gray-300)); }
    .market-bar-fill.red { background: linear-gradient(90deg, var(--red), var(--red-bright)); box-shadow: 0 2px 8px var(--red-glow); }
    .reveal.visible .market-bar-fill { width: var(--bar-w, 0); }

    /* ═══ CONTACT FORM ═══ */
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
    .contact-info h3 { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
    .contact-info p { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-bottom: 28px; }
    .contact-detail {
      display: flex; align-items: center; gap: 14px; padding: 16px 0;
      border-bottom: 1px solid var(--gray-100);
    }
    .contact-detail:last-child { border-bottom: none; }
    .contact-detail-icon {
      width: 40px; height: 40px; border-radius: 10px; background: var(--red-light);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .contact-detail-icon svg { width: 18px; height: 18px; color: var(--red); }
    .contact-detail-text { font-size: 14px; color: var(--gray-700); }
    .contact-detail-text small { display: block; font-size: 12px; color: var(--gray-400); margin-top: 1px; }

    .contact-form {
      background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px;
      padding: 36px; box-shadow: 0 4px 24px rgba(0,0,0,.04);
    }
    .contact-form h3 { font-size: 20px; font-weight: 800; margin-bottom: 24px; }
    .form-group { margin-bottom: 18px; }
    .form-group label {
      display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;
    }
    .form-group label .req { color: var(--red); }
    .form-input {
      display: block; width: 100%; padding: 11px 14px;
      border: 1px solid var(--gray-200); border-radius: 10px;
      font-size: 14px; font-family: var(--font); color: var(--gray-900);
      background: var(--white); transition: all var(--transition);
    }
    .form-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(196,30,58,.08); }
    .form-input::placeholder { color: var(--gray-400); }
    textarea.form-input { resize: vertical; min-height: 120px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-honeypot { position: absolute; left: -9999px; }
    .form-submit {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 32px; background: var(--red); color: var(--white);
      font-size: 15px; font-weight: 700; border-radius: 10px;
      border: none; cursor: pointer; font-family: var(--font);
      transition: all var(--transition); box-shadow: 0 4px 16px var(--red-glow);
    }
    .form-submit:hover { background: var(--red-bright); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(233,69,96,.25); }
    .form-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .form-msg { margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; display: none; }
    .form-msg.ok { display: block; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
    .form-msg.err { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

    /* ═══ 404 ═══ */
    .not-found { padding: 120px 0; text-align: center; }
    .not-found h1 { font-size: 80px; font-weight: 900; color: var(--gray-200); margin-bottom: 16px; }
    .not-found p { font-size: 18px; color: var(--gray-500); margin-bottom: 32px; }

    /* ═══ RESPONSIVE ═══ */
    @media (max-width: 1024px) {
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .hero-content { max-width: 100%; }
      .hero h1 { font-size: 42px; }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .pro-grid { grid-template-columns: repeat(2, 1fr); }
      .auto-grid { grid-template-columns: 1fr; gap: 40px; }
      .approach-grid { grid-template-columns: 1fr; gap: 40px; }
      .int-grid { grid-template-columns: repeat(3, 1fr); }
      .eco-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .section { padding: 64px 0; }
      .section-title { font-size: 30px; }
      .hero { padding: 48px 0 64px; }
      .hero h1 { font-size: 34px; letter-spacing: -1px; }
      .hero-buttons { flex-direction: column; }
      .trust-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .compare-grid { grid-template-columns: 1fr; }
      .features-grid { grid-template-columns: 1fr; }
      .pro-grid { grid-template-columns: 1fr; }
      .int-grid { grid-template-columns: repeat(2, 1fr); }
      .audience-grid { grid-template-columns: 1fr; }
      .auto-stats { grid-template-columns: 1fr 1fr; }
      .value-grid { grid-template-columns: 1fr; }
      .showcase-features { grid-template-columns: 1fr; }
      .eco-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-grid { grid-template-columns: 1fr; gap: 32px; }
      .form-row { grid-template-columns: 1fr; }
      .page-hero h1 { font-size: 30px; }
      .cta-section h2 { font-size: 28px; }
      .footer-grid { grid-template-columns: 1fr; gap: 24px; }
      .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

      .nav-links { display: none; }
      .mobile-toggle { display: block; }
      .nav-links.open {
        display: flex; flex-direction: column; position: absolute;
        top: 64px; left: 0; right: 0; background: var(--white);
        padding: 16px; border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 8px 24px rgba(0,0,0,.06); gap: 4px; z-index: 999;
      }
    }
    @media (max-width: 480px) {
      /* 28 px byla na hlavní nadpis na mobilu málo: hero je první,
         co člověk uvidí, a musí nést váhu sdělení i na telefonu. */
      .hero h1 { font-size: 36px; letter-spacing: -1.2px; }
      .trust-grid { grid-template-columns: 1fr; }
      .int-grid { grid-template-columns: 1fr; }
    }

    /* ═══ Ceník: pásma a kalkulačka ═══════════════════════════════
       Jedno procento z obratu místo balíčků. Karty ukazují sazbu,
       kalkulačka ji převede na koruny. Obojí se používá na úvodní
       stránce i na /cenik, proto to má vlastní jména tříd a ne
       přebarvené .pricing-*. */
    .tier-grid {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px; max-width: 1020px; margin: 0 auto;
    }
    .tier-card {
      padding: 26px 20px; text-align: center; background: var(--white);
      border: 1px solid var(--gray-200); border-radius: 16px;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .tier-card:hover { transform: translateY(-4px); border-color: var(--red); box-shadow: 0 14px 40px rgba(0,0,0,.07); }
    .tier-card .rate {
      font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -2px; color: var(--gray-900);
    }
    .tier-card .rate span { margin-left: 3px; font-size: 20px; font-weight: 700; }
    .tier-card:first-child .rate { color: var(--gray-900); }
    .tier-card:last-child .rate { color: var(--red); }
    .tier-card .range { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--gray-800); }
    .tier-card .note  { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--gray-400); }


    @media (max-width: 900px) {
      .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .tier-grid { grid-template-columns: 1fr; }
      .tier-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; text-align: left; padding: 18px; }
      .tier-card .rate { grid-row: span 2; font-size: 36px; }
      .tier-card .range { margin-top: 0; }
      .tier-card .note { grid-column: 2; }
    }

/* ════════════════════════════════════════════════════════════════
   NOVÝ VÍCESTRÁNKOVÝ WEB
   Doplňky k původnímu stylu: navigace s megamenu, drobečky, karty
   obsahu, akordeon častých otázek, srovnávací tabulky a modal.
   ════════════════════════════════════════════════════════════════ */

/* ── Navigace ─────────────────────────────────────────────────── */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link { padding: 8px 11px; font-size: 14.5px; font-weight: 600; color: var(--gray-700);
            text-decoration: none; border-radius: 8px; transition: var(--transition); white-space: nowrap; }
.nav-link:hover { color: var(--black); background: var(--gray-100); }
.nav-link.active { color: var(--red); }
.nav-phone { display: flex; flex-direction: column; margin-left: 10px; padding-left: 14px;
             border-left: 1px solid var(--gray-200); text-decoration: none; line-height: 1.25; }
.nav-phone span { font-weight: 800; font-size: 14.5px; color: var(--black); white-space: nowrap; }
.nav-phone i { font-style: normal; font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.nav-login { padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--gray-700); text-decoration: none; }
.nav-login:hover { color: var(--black); }
.nav-cta { padding: 11px 18px; background: var(--red); color: #fff; border-radius: 9px;
           font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
           transition: var(--transition); }
.nav-cta:hover { background: var(--red-dark); }

/* Megamenu a rozbalovací nabídky */
/* Přechod je záměrně vypsaný po vlastnostech. Zkratka `all` tu
   animovala i `visibility`, takže se nabídka nestihla otevřít dřív,
   než uživatel stačil sjet myší na položku. */
.mega, .drop { position: absolute; top: calc(100% + 10px); opacity: 0; visibility: hidden;
               transform: translateY(-6px); z-index: 120;
               transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.nav-item:hover .mega, .nav-item:hover .drop,
.nav-item:focus-within .mega, .nav-item:focus-within .drop {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.mega { left: 50%; margin-left: -50vw; width: 100vw; background: #fff;
        border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 24px 48px rgba(0,0,0,.08); }
.mega-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 30px 24px 26px; }
.mega-col__head { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
                  color: var(--red); margin-bottom: 12px; }
.mega-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--gray-700);
              text-decoration: none; }
.mega-col a:hover { color: var(--black); }
.mega-foot { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 14px 0;
             font-size: 13.5px; color: var(--gray-600); }
.mega-foot strong { color: var(--black); }
.mega-foot a { margin-left: 10px; color: var(--red); font-weight: 700; text-decoration: none; }
.drop { left: 0; min-width: 290px; background: #fff; border: 1px solid var(--gray-200);
        border-radius: 12px; box-shadow: 0 24px 48px rgba(0,0,0,.10); padding: 8px; }
.drop a { display: flex; justify-content: space-between; align-items: center; gap: 14px;
          padding: 9px 12px; font-size: 14px; color: var(--gray-700); text-decoration: none; border-radius: 8px; }
.drop a:hover { background: var(--gray-50); color: var(--black); }
.drop a i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--red); white-space: nowrap; }

/* ── Drobečky ─────────────────────────────────────────────────── */
.crumbs { border-bottom: 1px solid var(--gray-200); background: var(--gray-50); font-size: 13px; }
.crumbs .container { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap;
                     gap: 7px; align-items: center; }
.crumbs a { color: var(--gray-600); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs i { color: var(--gray-300); font-style: normal; }
.crumbs span { color: var(--gray-800); font-weight: 600; }

/* ── Obsahové prvky ───────────────────────────────────────────── */
.web-img { display: block; width: 100%; height: auto; border-radius: 14px; }
.lead { font-size: 19px; line-height: 1.6; color: var(--gray-700); max-width: 720px; }
.prose { max-width: 760px; }
.prose h2 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--black); margin: 40px 0 14px; }
.prose p { margin-bottom: 16px; color: var(--gray-700); }
.prose > :first-child { margin-top: 0; }
ul.ticks { list-style: none; margin: 0 0 20px; padding: 0; }
ul.ticks li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--gray-700); }
ul.ticks li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px;
                      border-radius: 50%; background: var(--red); }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.badges li { font-size: 12px; font-weight: 600; color: var(--gray-600); background: var(--gray-100);
             border-radius: 100px; padding: 5px 11px; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 26px 0; }
.metric { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; padding: 20px; }
.metric b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -1px; color: var(--black); line-height: 1.1; }
.metric span { display: block; font-size: 13.5px; color: var(--gray-600); margin-top: 5px; }
.metric i { display: block; font-style: normal; font-size: 11px; color: var(--gray-400); margin-top: 8px; }
.metric--model { border-style: dashed; }

/* ── Karty ────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-200);
        border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
        transition: var(--transition); }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0,0,0,.08); border-color: var(--gray-300); }
.card__media { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--gray-100); }
.card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__kicker { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.1px; color: var(--red); }
.card__title { font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--black); margin: 7px 0 9px; }
.card__text { font-size: 14.5px; color: var(--gray-600); flex: 1; }
.card__more { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--red); }

/* ── Časté otázky ─────────────────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--gray-200); }
.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__q { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-weight: 700;
          font-size: 16.5px; color: var(--black); position: relative; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                 font-size: 22px; font-weight: 400; color: var(--red); }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 44px 22px 0; color: var(--gray-700); }

/* ── Tabulky ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
table.tbl th, table.tbl td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--gray-200); }
table.tbl th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--gray-500); font-weight: 800; }
table.tbl td b { color: var(--black); font-weight: 800; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl .num { text-align: right; white-space: nowrap; }
table.tbl .ours { background: var(--red-light); }
.tbl-note { font-size: 13px; color: var(--gray-500); margin-top: 12px; }

/* ── Ceník prací ──────────────────────────────────────────────── */
.works { border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; }
.work-row { display: flex; align-items: center; justify-content: space-between; gap: 20px;
            padding: 20px 24px; border-bottom: 1px solid var(--gray-200); text-decoration: none; color: inherit; }
.work-row:last-child { border-bottom: none; }
.work-row:hover { background: var(--gray-50); }
.work-row strong { display: block; font-size: 16px; color: var(--black); font-weight: 700; }
.work-row span { font-size: 13.5px; color: var(--gray-500); }
.work-row b { font-size: 22px; font-weight: 900; letter-spacing: -.6px; color: var(--red); white-space: nowrap; }

/* ── Kroky a časová osa ───────────────────────────────────────── */
.flow { display: grid; gap: 14px; }
.flow-step { display: flex; gap: 16px; align-items: flex-start; background: #fff;
             border: 1px solid var(--gray-200); border-radius: 14px; padding: 18px 20px; }
.flow-step em { font-style: normal; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
                background: var(--red); color: #fff; display: grid; place-items: center;
                font-size: 13px; font-weight: 800; }
.flow-step strong { display: block; color: var(--black); font-size: 15.5px; }
.flow-step span { font-size: 14px; color: var(--gray-600); }

/* ── Modal registrace ─────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center;
         justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.55); backdrop-filter: blur(3px); }
.modal__panel { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
                background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.modal__head { padding: 26px 28px 6px; }
.modal__step { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.1px; color: var(--red); }
.modal__head h2 { font-size: 23px; font-weight: 900; letter-spacing: -.7px; color: var(--black); margin-top: 6px; }
.modal__head p { font-size: 14.5px; color: var(--gray-600); margin-top: 6px; }
.modal__body { padding: 18px 28px 26px; }
.modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none;
                background: var(--gray-100); border-radius: 50%; cursor: pointer; font-size: 18px;
                color: var(--gray-600); line-height: 1; }
.modal__close:hover { background: var(--gray-200); }
.modal__foot { font-size: 12.5px; color: var(--gray-500); margin-top: 14px; text-align: center; }
.modal__foot a { color: var(--red); }

/* Formulářová pole sdílená modalem i stránkami */
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-group { margin-bottom: 14px; }
.f-group label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
.f-group input, .f-group select, .f-group textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: 10px;
    font-family: var(--font); font-size: 15px; color: var(--black); background: #fff; }
.f-group input:focus, .f-group select:focus, .f-group textarea:focus {
    outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
.f-group.is-error input, .f-group.is-error select { border-color: var(--red); }
.f-err { display: block; font-size: 12.5px; color: var(--red); margin-top: 4px; }
.f-hint { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 5px; }
.f-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--gray-600); }
.f-check input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.f-submit { width: 100%; margin-top: 6px; }
.f-honey { position: absolute; left: -9999px; }
.f-msg { display: none; padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.f-msg.ok { display: block; background: #ecfdf5; color: #065f46; }
.f-msg.err { display: block; background: var(--red-light); color: var(--red-dark); }


/* ── Responzivita ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav-link { padding: 8px 8px; font-size: 14px; }
  .nav-phone { display: none; }
}
@media (max-width: 1024px) {
  .mega-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-links { position: fixed; inset: 68px 0 0; background: #fff; flex-direction: column;
               align-items: stretch; gap: 0; padding: 16px 20px 120px; overflow-y: auto;
               display: none; z-index: 130; }
  .nav-links.open { display: flex; }
  .nav-link { padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--gray-100); }
  .nav-item { position: static; }
  .mega, .drop { position: static; opacity: 1; visibility: visible; transform: none; width: auto;
                 margin: 0; border: none; box-shadow: none; padding: 0 0 10px; }
  .mega-inner { grid-template-columns: 1fr; gap: 16px; padding: 8px 0 0; }
  .mega-foot { display: none; }
  .drop a { padding: 10px 4px; }
  .nav-phone { display: flex; margin: 14px 0 0; padding: 14px 0 0; border-left: none;
               border-top: 1px solid var(--gray-200); }
  .nav-cta, .nav-login { margin-top: 12px; text-align: center; }
  body { padding-bottom: 74px; }
  .f-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   Druhé kolo úprav
   ════════════════════════════════════════════════════════════════ */

/* ── Navigace: šipky a dvě tlačítka ───────────────────────────── */
.nav-caret { width: 11px; height: 11px; margin-left: 3px; opacity: .55;
             transition: transform .18s ease, opacity .18s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-link { display: inline-flex; align-items: center; }

/* Ikony v navigaci existují jen kvůli mobilnímu panelu. Na počítači by
   z vodorovné lišty udělaly změť, takže se ani nevykreslují. */
.nav-ico { display: none; }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.nav-cta--ghost { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.nav-cta--ghost:hover { background: var(--red-light); color: var(--red-dark); border-color: var(--red-dark); }

/* Ukazatel průběhu drží spodní hranu hlavičky. Volně po stránce
   vypadal jako přeškrtnutý obsah. */
.navbar { position: sticky; }
.navbar .scroll-progress { position: absolute; bottom: -1px; left: 0; height: 3px; }

/* ── Mřížky: nerozahovat, přebytek vycentrovat ────────────────── */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.cards > * { flex: 0 1 320px; min-width: 280px; max-width: 380px; }
.cards--2 > * { flex: 0 1 460px; max-width: 520px; }
.cards--wide > * { flex: 0 1 100%; max-width: none; }

.metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.metrics > * { flex: 0 1 220px; min-width: 190px; max-width: 280px; }

.tier-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.tier-grid > * { flex: 0 1 240px; min-width: 210px; max-width: 280px; }

/* ── Patička: pět sloupců, které se vejdou ────────────────────── */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; align-items: start; }
.footer-col h3 { font-size: 12px; font-weight: 800; color: var(--gray-800); text-transform: uppercase;
                 letter-spacing: 1px; margin-bottom: 12px; }
.footer-col a { display: block; font-size: 13.5px; color: var(--gray-500); padding: 3px 0;
                text-decoration: none; transition: color var(--transition); }
.footer-col a:hover { color: var(--red); }
.footer-brand p { font-size: 13px; color: var(--gray-500); line-height: 1.6; margin-top: 12px; max-width: 320px; }
.footer-contact { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.footer-contact a { font-weight: 700; color: var(--gray-800); text-decoration: none; }
.footer-contact a:hover { color: var(--red); }
.footer-contact span { font-size: 12.5px; color: var(--gray-500); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
                 gap: 14px; padding-top: 22px; margin-top: 34px; border-top: 1px solid var(--gray-200); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a { font-size: 13px; color: var(--gray-500); text-decoration: none; }
.footer-legal a:hover { color: var(--red); }
.footer-copy { font-size: 13px; color: var(--gray-500); }
.footer-copy a { color: var(--gray-700); }

@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}



.hero-points { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.hero-point { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--gray-700); }
.hero-point svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--red); margin-top: 2px; }
.hero-point b { color: var(--black); font-weight: 700; }

/* ── Fotogalerie a snímky e-shopů ─────────────────────────────── */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); background: #fff; }
.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot figcaption { padding: 12px 16px; font-size: 13px; color: var(--gray-600); }




/* ── Zvýrazněný blok výhod ────────────────────────────────────── */
.wins { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.win { flex: 0 1 300px; min-width: 260px; max-width: 360px; background: #fff; border: 1px solid var(--gray-200);
       border-radius: 16px; padding: 22px 24px; }
.win b { display: block; font-size: 17px; font-weight: 800; color: var(--black); margin-bottom: 6px; }
.win span { font-size: 14.5px; color: var(--gray-600); }
.win--hl { border-color: var(--red); background: var(--red-light); }

/* ── Loga konkurence ve srovnání ──────────────────────────────── */
.vs-head { display: flex; align-items: center; gap: 10px; }
.vs-logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
           font-weight: 900; font-size: 13px; color: #fff; flex-shrink: 0; }
.vs-logo--shoptet { background: #0a7cff; }
.vs-logo--upgates { background: #f5a623; }
.vs-logo--nas { background: var(--red); }

/* ── Kalkulačka: přehlednější rozložení ───────────────────────── */
.calc-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.calc-badges span { font-size: 12.5px; font-weight: 600; background: #fff; border: 1px solid var(--gray-200);
                    border-radius: 100px; padding: 6px 12px; color: var(--gray-700); }

/* Živé srovnání pod kalkulačkou */

/* Značky ve srovnání */
.vs-head b { font-size: 16px; font-weight: 800; color: var(--black); }
table.tbl th.ours { color: var(--red); }

/* ════════════════════════════════════════════════════════════════
   Oprava navigace

   Megamenu se dřív odvozovalo od položky v menu, a protože se
   roztahovalo na šířku okna trikem s -50vw, přetékalo doleva
   a rozbíjelo šířku stránky. Teď je jeho vztažným bodem celá
   hlavička, takže sedí přesně pod ní.
   ════════════════════════════════════════════════════════════════ */
.nav-item--mega { position: static; }
.mega { left: 0; right: 0; width: auto; margin-left: 0; top: 100%; }

/* Dvě tlačítka v hlavičce zabírají místo, proto se telefon skrývá
   dřív a odkazy se o kousek stáhnou. Jinak se lišta nevejde
   a stránka dostane vodorovné posouvání. */
@media (max-width: 1500px) {
  .nav-phone { display: none; }
}
@media (max-width: 1340px) {
  .nav-link { padding: 8px 7px; font-size: 13.5px; }
  .nav-cta { padding: 10px 13px; font-size: 13px; }
  .nav-logo__text { font-size: 16px; }
}
@media (max-width: 1120px) {
  .nav-logo__text i { display: none; }
  .nav-link { padding: 8px 5px; font-size: 13px; }
}

/* Pojistka proti vodorovnému posouvání celé stránky. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Plovoucí fotka v heru byla oříznutá rámem, tak ji necháme uvnitř. */
.hero-media { overflow: visible; }
.hero-media > img { border-radius: 20px; }
.hero-media__float { right: 12px; }
@media (max-width: 560px) { .hero-media__float { display: none; } }

/* Kalkulačka na úzkém displeji: pole i posuvník musí zůstat uvnitř
   karty, jinak přetečou a na mobilu se dá s obsahem posouvat do strany. */

/* ════════════════════════════════════════════════════════════════
   Třetí kolo úprav
   ════════════════════════════════════════════════════════════════ */

/* Druhé tlačítko v hlavičce bylo neviditelné: původní pravidlo
   pro .nav-cta má u barvy !important, takže text zůstal bílý
   na bílém pozadí. Proto se přebíjí stejnou silou. */
.nav-cta--ghost { background: #fff; border: 1.5px solid var(--red); }
.nav-cta--ghost, .nav-cta--ghost:hover { color: var(--red) !important; }
.nav-cta--ghost:hover { background: var(--red-light); border-color: var(--red-dark); }

/* ── Megamenu: čitelné a oddělené od hlavičky ─────────────────── */
/* Lišta s odkazy musí mít vlastní neprůhledné pozadí a být nad
   rozbalenou nabídkou, jinak se obsah nabídky propisuje do hlavičky
   a text se překrývá. */
.navbar { z-index: 200; }
.nav-inner { position: relative; z-index: 2; background: #fff; }
.mega { top: 100%; z-index: 1; background: #fff; box-shadow: 0 26px 60px rgba(17,17,17,.16); }
.mega-inner { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 26px 24px 20px; }
.mega-col { padding: 0 14px; border-left: 1px solid var(--gray-100); }
.mega-col:first-child { border-left: none; }
.mega-col__head { font-size: 11px; letter-spacing: 1.3px; margin-bottom: 10px;
                  padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.mega-col a { padding: 7px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13.5px;
              color: var(--gray-700); transition: background .15s ease, color .15s ease; }
.mega-col a:hover { background: var(--red-light); color: var(--red-dark); }
.mega-foot { padding: 13px 0; }
.mega-foot .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mega-foot a { margin-left: auto; }

.drop { box-shadow: 0 26px 60px rgba(17,17,17,.16); }


/* ════════════════════════════════════════════════════════════════
   Megamenu jako panel

   Celoobrazovkový pruh se opakovaně rozpadal: odvozoval šířku
   trikem s -50vw a v hlavičce se překrýval s odkazy. Teď je to
   obyčejný panel jako u Služeb, jen širší a rozdělený do sloupců.
   ════════════════════════════════════════════════════════════════ */
.nav-item--mega { position: relative; }

.mega {
  left: 0; right: auto; width: 760px; max-width: calc(100vw - 40px);
  margin-left: 0; top: calc(100% + 10px);
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  box-shadow: 0 26px 60px rgba(17,17,17,.16); overflow: hidden; z-index: 210;
}
.mega-inner {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px; padding: 18px 20px 14px; max-width: none; margin: 0;
}
.mega-col { padding: 0; border-left: none; margin-bottom: 10px; }
.mega-col__head {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--red); margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-200);
}
.mega-col a {
  display: block; padding: 6px 8px; margin: 0 -8px; border-radius: 8px;
  font-size: 13.5px; color: var(--gray-700); text-decoration: none;
}
.mega-col a:hover { background: var(--red-light); color: var(--red-dark); }

.mega-foot { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 12px 20px; }
.mega-foot .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  max-width: none; padding: 0; font-size: 13px; color: var(--gray-600);
}
.mega-foot a { margin-left: auto; color: var(--red); font-weight: 700; text-decoration: none; white-space: nowrap; }

@media (max-width: 860px) {
  .mega { width: auto; }
  .mega-inner { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   Čtvrté kolo úprav
   ════════════════════════════════════════════════════════════════ */

/* ── Megamenu: pevná výška z .navbar .container ho ořezávala ───── */
/* Vnitřek panelu už nepoužívá třídu `container`, ale pro jistotu
   necháváme výšku volnou i tady, kdyby ji někdo vrátil. */
.mega .container, .mega-inner, .mega-foot { height: auto; }

.mega { width: 940px; max-width: calc(100vw - 32px); }
.mega-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 20px;
              padding: 20px 22px 16px; }
.mega-col { margin-bottom: 0; }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
             padding: 12px 22px; font-size: 13px; color: var(--gray-600); }
.mega-foot span { flex: 1 1 320px; }
.mega-foot strong { color: var(--black); }
.mega-foot a { margin-left: auto; }

@media (max-width: 1040px) {
  .mega-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .mega { width: auto; max-width: none; }
  .mega-inner { grid-template-columns: 1fr; padding: 8px 0 0; }
  .mega-foot { display: none; }
}



/* ── Přepínač počítač / mobil u ukázek ────────────────────────── */
.sf-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.sf-switch button {
  border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700);
  font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 100px; transition: var(--transition);
}
.sf-switch button:hover { border-color: var(--black); color: var(--black); }
.sf-switch button.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.sf-switch a { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--red); text-decoration: none; }



/* ── Logo obchodu ─────────────────────────────────────────────── */
.shop-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.shop-logo { height: 46px; width: auto; max-width: 160px; object-fit: contain; }
.card__logo { height: 30px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 10px; }

/* ── Snímky s popiskem ve dvou sloupcích ──────────────────────── */
.shots--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .shots--2 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   Skutečný náhled e-shopu a karty s logem
   ════════════════════════════════════════════════════════════════ */

/* Logo místo fotky v hlavičce karty. */
.card__brand {
  display: grid; place-items: center; padding: 34px 24px;
  background: var(--gray-50); border-bottom: 1px solid var(--gray-200); min-height: 150px;
}
.card__brand img { max-height: 76px; max-width: 78%; width: auto; height: auto; object-fit: contain; }

/* ── Náhled e-shopu ───────────────────────────────────────────── */
.nahled { position: relative; }

.nahled__frame { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
                 overflow: hidden; box-shadow: 0 24px 60px rgba(17,17,17,.14); }
.nahled__frame[hidden] { display: none; }

.nahled__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
               background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }
.nahled__dots { display: flex; gap: 6px; }
.nahled__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
.nahled__url { flex: 1; background: #fff; border-radius: 100px; padding: 5px 14px;
               font-size: 12.5px; color: var(--gray-600); text-align: center; }

/* Snímek je vysoký, proto se v rámu posouvá. */
.nahled__view { max-height: 560px; overflow-y: auto; overflow-x: hidden;
                -webkit-overflow-scrolling: touch; background: #fff; scrollbar-width: thin; }
.nahled__view img { display: block; width: 100%; height: auto; }

.nahled__frame--mobil { max-width: 390px; margin: 0 auto; border-radius: 34px;
                        border: 10px solid var(--gray-900); padding-top: 4px; background: var(--gray-900); }
.nahled__frame--mobil .nahled__view { max-height: 620px; border-radius: 0 0 24px 24px; }
.nahled__notch { width: 110px; height: 20px; margin: 2px auto 8px; border-radius: 0 0 12px 12px;
                 background: var(--gray-900); }

.nahled__pozn { font-size: 13px; color: var(--gray-500); margin-top: 12px; }
.nahled__pozn a { color: var(--red); font-weight: 600; }

@media (max-width: 620px) {
  .nahled__view { max-height: 420px; }
  .nahled__frame--mobil .nahled__view { max-height: 480px; }
}

/* ════════════════════════════════════════════════════════════════
   Čtvrté kolo úprav
   ════════════════════════════════════════════════════════════════ */

/* ── Megamenu: pevná výška z .navbar .container ho ořezávala ───── */
/* Vnitřek panelu už nepoužívá třídu `container`, ale pro jistotu
   necháváme výšku volnou i tady, kdyby ji někdo vrátil. */
.mega .container, .mega-inner, .mega-foot { height: auto; }

.mega { width: 940px; max-width: calc(100vw - 32px); }
.mega-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 20px;
              padding: 20px 22px 16px; }
.mega-col { margin-bottom: 0; }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
             padding: 12px 22px; font-size: 13px; color: var(--gray-600); }
.mega-foot span { flex: 1 1 320px; }
.mega-foot strong { color: var(--black); }
.mega-foot a { margin-left: auto; }

@media (max-width: 1040px) {
  .mega-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .mega { width: auto; max-width: none; }
  .mega-inner { grid-template-columns: 1fr; padding: 8px 0 0; }
  .mega-foot { display: none; }
}



/* ════════════════════════════════════════════════════════════════
   Ukázka e-shopového řešení v heru

   Kreslená v HTML a CSS, ne snímek. Animace běží dokola: kurzor
   dojede k tlačítku, přidá zboží do košíku, počitadlo naskočí
   a vedle se odbaví objednávka.
   ════════════════════════════════════════════════════════════════ */
.mock { position: relative; }

.mock__frame {
  position: relative; background: #fff; border: 1px solid var(--gray-200);
  border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(17,17,17,.14);
  animation: mockFloat 7s ease-in-out infinite;
}
@keyframes mockFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.mock__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
             background: var(--gray-100); border-bottom: 1px solid var(--gray-200); }
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); }
.mock__url { flex: 1; background: #fff; border-radius: 100px; padding: 5px 14px;
             font-size: 12px; color: var(--gray-500); text-align: center; }

.mock__top { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
             border-bottom: 1px solid var(--gray-100); }
.mock__logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800;
              font-size: 14.5px; color: var(--black); white-space: nowrap; }
.mock__logo i { width: 24px; height: 24px; border-radius: 7px;
                background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.mock__search { flex: 1; height: 28px; border-radius: 100px; background: var(--gray-100); }
.mock__cart { position: relative; color: var(--gray-700); }
.mock__cart svg { width: 21px; height: 21px; display: block; }
.mock__count {
  position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px;
  border-radius: 100px; background: var(--red); color: #fff; font-size: 10.5px;
  font-weight: 800; display: grid; place-items: center; padding: 0 4px;
  transform: scale(0); animation: mockCount 6s cubic-bezier(.22,1,.36,1) 2.1s infinite;
}
@keyframes mockCount {
  0% { transform: scale(0); } 6% { transform: scale(1.35); }
  12%, 92% { transform: scale(1); } 100% { transform: scale(0); }
}

.mock__nav { display: flex; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--gray-100); }
.mock__nav span { font-size: 11px; font-weight: 600; color: var(--gray-500); }
.mock__nav span.is-on { color: var(--black); position: relative; }
.mock__nav span.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 2px; background: var(--red); }

.mock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px; }
.mock__item { position: relative; }
.mock__thumb { border-radius: 12px; aspect-ratio: 1 / 1; margin-bottom: 10px; position: relative; overflow: hidden; }
.mock__thumb { background: var(--gray-50); }
.mock__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mock__name { display: block; font-size: 11.5px; font-weight: 600; color: var(--gray-800); line-height: 1.3; margin-bottom: 4px; min-height: 2.6em; }
.mock__line { display: block; height: 8px; border-radius: 100px; background: var(--gray-200); margin-bottom: 6px; }
.mock__line--s { width: 60%; }
.mock__item em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--red); }

.mock__btn {
  position: absolute; left: 0; right: 0; bottom: -4px; text-align: center;
  background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700;
  border-radius: 8px; padding: 6px 0; opacity: 0;
  animation: mockBtn 6s ease 1.2s infinite;
}
@keyframes mockBtn {
  0%, 14% { opacity: 0; transform: translateY(6px); }
  20%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(6px); }
}

.mock__cursor { position: absolute; left: 42%; top: 78%; width: 22px; height: 22px; z-index: 4;
                animation: mockCursor 6s cubic-bezier(.4,0,.2,1) infinite; }
.mock__cursor svg { width: 100%; height: 100%; display: block;
                    filter: drop-shadow(0 3px 6px rgba(0,0,0,.28)); }
@keyframes mockCursor {
  0%   { transform: translate(60px, 40px) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  28%  { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(0, 0) scale(.82); }
  38%  { transform: translate(0, 0) scale(1); }
  70%  { transform: translate(-10px, -26px) scale(1); opacity: 1; }
  86%, 100% { transform: translate(-10px, -26px) scale(1); opacity: 0; }
}

/* Kroky, které systém udělá sám. Naskakují po sobě. */
.mock__flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mock__step {
  font-size: 12.5px; font-weight: 700; color: var(--black); background: #fff;
  border: 1px solid var(--gray-200); border-radius: 100px; padding: 7px 13px;
  box-shadow: 0 8px 22px rgba(17,17,17,.07); opacity: 0; transform: translateY(6px);
  animation: mockStep 6s ease infinite;
}
.mock__step::before { content: ""; display: inline-block; width: 6px; height: 6px;
                      border-radius: 50%; background: #16a34a; margin-right: 7px; vertical-align: middle; }
.mock__step--1 { animation-delay: 2.3s; }
.mock__step--2 { animation-delay: 2.9s; }
.mock__step--3 { animation-delay: 3.5s; }
.mock__step--4 { animation-delay: 4.1s; }
@keyframes mockStep {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  10%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 620px) {
  .mock__grid { grid-template-columns: repeat(2, 1fr); }
  .mock__item:last-child { display: none; }
  .mock__cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mock__frame, .mock__count, .mock__btn, .mock__cursor, .mock__step { animation: none; }
  .mock__count, .mock__btn, .mock__step { opacity: 1; transform: none; }
  .mock__cursor { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Ukázky: jen náhledy, nic navíc
   ════════════════════════════════════════════════════════════════ */
.nahled-list { display: flex; flex-direction: column; gap: 56px; }
.nahled-item__head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.nahled-item__logo { height: 46px; width: auto; max-width: 160px; object-fit: contain; }
.nahled-item__head h2 { font-size: 24px; font-weight: 900; letter-spacing: -.6px; color: var(--black); }
.nahled-item__head > div > a { font-size: 14px; font-weight: 700; color: var(--red); text-decoration: none; }
.nahled-item__more { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--gray-700);
                     text-decoration: none; border: 1px solid var(--gray-300); border-radius: 100px;
                     padding: 9px 16px; white-space: nowrap; }
.nahled-item__more:hover { border-color: var(--black); color: var(--black); }

/* Odkazy ve formulářích, hlavně v souhlasu s podmínkami.

   Dřív dědily barvu okolního textu a neměly podtržení, takže na ně
   nikdo neklikl: vypadaly jako obyčejná tučná slova. */
.f-check a,
.f-group a,
.modal__foot a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.f-check a:hover,
.f-group a:hover,
.modal__foot a:hover { color: var(--red-dark); }

/* Souhlas s podmínkami: odkazy musí být pohodlně klikatelné. */
.f-check { align-items: flex-start; line-height: 1.55; }
.f-check a { white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════
   MOBIL: spodní lišta, tlačítka, menu a rozpůlený modal

   Vše níže přebíjí starší pravidla výš v souboru, proto je to až na
   konci. Hranice 900 px je stejná jako u hamburgeru: pod ní je web
   „telefon a tablet na výšku", nad ní počítač.
   ════════════════════════════════════════════════════════════════ */

:root { --nav-h: 64px; --mbar-h: 66px; }

/* Zamknutí posunu stránky řeší třída na <body>, ne inline styl.
   Inline styl se dřív přepisoval mezi menu a modalem a stránka
   občas zůstala zamčená. */
body.modal-open, body.menu-open { overflow: hidden; }

/* ── Modal jako otočná karta ────────────────────────────────
   Jedna karta, dvě strany: vpředu registrace, vzadu přihlášení.
   Obě strany leží v téže buňce mřížky, takže karta má výšku té
   vyšší a při otočení neposkakuje. Strana vzadu dostává inert. */
.modal { padding: 16px; }
.modal__panel--card { max-width: 560px; border-radius: 22px; overflow: hidden;
                      box-shadow: 0 40px 90px rgba(17,17,17,.35), 0 0 0 1px rgba(255,255,255,.6) inset; }
.modal__panel--card::before { content: ""; display: block; height: 4px;
                              background: linear-gradient(90deg, var(--red-dark), var(--red), var(--red-bright)); }
.modal__head--card { text-align: center; padding: 26px 28px 0; }
.modal__mark { width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 14px;
               background: linear-gradient(135deg, #DC2626, #991B1B); color: #fff; display: grid; place-items: center;
               box-shadow: 0 10px 24px rgba(196,30,58,.30); }
.modal__mark svg { width: 22px; height: 22px; }
.modal__head--card h2 { font-size: 26px; font-weight: 900; letter-spacing: -.8px; color: var(--black); line-height: 1.15; }
.modal__head--card p { font-size: 14.5px; color: var(--gray-600); margin-top: 6px; }

/* Přepínač: dvě záložky, pod aktivní sjíždí bílý polštářek */
.modal__switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 20px auto 0;
                 padding: 4px; max-width: 400px; background: var(--gray-100); border-radius: 999px; }
.modal__switch button { position: relative; z-index: 1; min-height: 42px; border: none; background: transparent;
                        border-radius: 999px; font-family: var(--font); font-size: 14px; font-weight: 700;
                        color: var(--gray-600); cursor: pointer; transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.modal__switch button[aria-selected="true"] { color: var(--black); }
.modal__switch-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
                      background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.10);
                      transition: transform .35s cubic-bezier(.4,0,.2,1); }
.modal.is-login .modal__switch-pill { transform: translateX(100%); }

/* Otočení */
.flip { display: grid; perspective: 1600px; margin: 22px 0 0; }
.flip__face { grid-area: 1 / 1; padding: 0 28px 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
              transition: transform .6s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }
.flip__face--back { transform: rotateY(180deg); }
.flip.is-back .flip__face--front { transform: rotateY(-180deg); }
.flip.is-back .flip__face--back  { transform: rotateY(0); }
.flip__face[inert] { pointer-events: none; }
/* Zadní strana je kratší než přední; ať sedí k hornímu okraji. */
.flip__face { align-self: start; }

.modal__foot--card { padding: 6px 28px 24px; margin-top: 0; }
.modal__foot--card a { font-weight: 700; }

/* Pole v kartě: jemně tónované, s výraznějším zaostřením */
.modal__panel--card .f-group { margin-bottom: 13px; }
.modal__panel--card .f-group label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
                                     font-size: 13px; font-weight: 700; color: var(--gray-800); margin-bottom: 6px; }
.modal__panel--card .f-group label small { font-weight: 500; color: var(--gray-500); font-size: 12px; }
.modal__panel--card .f-link { font-size: 12.5px; font-weight: 600; color: var(--red); text-decoration: none; }
.modal__panel--card .f-group input { background: var(--gray-50); border-color: var(--gray-200); min-height: 48px;
                                     transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.modal__panel--card .f-group input::placeholder { color: var(--gray-400); }
.modal__panel--card .f-group input:focus { background: #fff; }
.modal__panel--card .f-check { font-size: 13px; line-height: 1.5; }
.modal__panel--card .f-submit { min-height: 54px; font-size: 16px; border-radius: 12px; margin-top: 4px;
                                box-shadow: 0 10px 24px rgba(196,30,58,.28); }
.modal__panel--card .f-submit:hover { box-shadow: 0 14px 30px rgba(196,30,58,.36); transform: translateY(-1px); }

/* Patka karty: druhá cesta pro toho, kdo si e-shop skládat nechce.
   Text se láme volně, odkazy nikdy: telefonní číslo se dřív trhalo
   uprostřed. Když se dlaždice vedle textu nevejdou, spadnou celé pod
   něj, protože obě strany jsou samostatné položky flexu. */
/* Zkratka přes Wopro ID nad přihlašovacím formulářem. Vypadá jako
   tlačítko poskytovatele přihlášení, protože to přesně dělá: kdo má
   na auth.wopro.cz živou relaci, projde bez hesla. */
.f-sso { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
         padding: 0 16px; border: 1.5px solid var(--gray-200); border-radius: 12px; background: #fff;
         font-size: 14.5px; font-weight: 700; color: var(--gray-800); text-decoration: none;
         transition: border-color .15s ease, background .15s ease; }
.f-sso svg { width: 19px; height: 19px; color: var(--red); }
.f-sso:hover { border-color: var(--red); background: var(--red-light); }
.f-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.f-or::before, .f-or::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }
.f-or span { font-size: 12px; font-weight: 600; color: var(--gray-500); }

.modal__help { padding: 14px 16px; text-align: left;
               background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; }
.modal__help-text { margin: 0 0 11px; font-size: 12.5px; line-height: 1.45; color: var(--gray-600); }
.modal__help-text b { display: block; font-size: 13.5px; font-weight: 800; color: var(--black); }
/* Dlaždice si rozdělí řádek napůl, dokud se na něj vejdou. Základ
   `auto` je tu podstatný: kdyby to bylo `0`, zúžily by se pod svůj
   text a číslo by z dlaždice vylezlo. Když se nevejdou, zalomí se
   celé pod sebe, ne uprostřed čísla. */
.modal__help-links { display: flex; flex-wrap: wrap; gap: 8px; }
.modal__help-links a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
                       min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px;
                       font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
                       transition: background .15s ease, border-color .15s ease; }
.modal__help-cta { background: var(--red-light); color: var(--red-dark); }
.modal__help-cta:hover { background: var(--red); color: #fff; }
.modal__help-tel { background: #fff; border-color: var(--gray-200); color: var(--gray-800);
                   font-variant-numeric: tabular-nums; }
.modal__help-tel:hover { border-color: var(--gray-300); background: var(--gray-50); }

.modal__steps { display: grid; gap: 10px; margin-top: 18px; padding: 16px; background: var(--gray-50);
                border: 1px solid var(--gray-200); border-radius: 14px; }
.modal__steps div { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--gray-700); line-height: 1.45; }
.modal__steps em { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff;
                   font-style: normal; font-weight: 800; font-size: 12px; display: grid; place-items: center; }

@media (max-width: 760px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel--card { max-width: none; max-height: 100dvh; border-radius: 22px 22px 0 0; }
  .modal__head--card { padding: 22px 18px 0; }
  .modal__head--card h2 { font-size: 23px; }
  .modal__mark { width: 40px; height: 40px; margin-bottom: 10px; }
  .modal__close { top: 14px; right: 12px; width: 38px; height: 38px; font-size: 20px; }
  .modal__switch { margin-top: 16px; }
  .modal__switch button { font-size: 13.5px; }
  .flip { margin-top: 18px; }
  .flip__face { padding: 0 18px 6px; }
  .modal__foot--card { padding: 4px 18px calc(20px + env(safe-area-inset-bottom)); }
  .modal__head--card p { font-size: 13.5px; }
  .modal__help { padding: 13px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .flip__face, .modal__switch-pill { transition: none !important; }
}

/* ── Tlačítka ───────────────────────────────────────────────────
   Pod 640 px jdou všechna velká tlačítka na celou šířku, jsou 52 px
   vysoká a stojí pod sebou s mezerou. Výjimku mají tlačítka uvnitř
   přepínačů a kalkulačky, kde mají zůstat malá. */
.btn-primary, .btn-secondary { min-height: 48px; -webkit-tap-highlight-color: transparent; }
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }

@media (max-width: 640px) {
  .btn-primary, .btn-secondary {
    display: flex; width: 100%; min-height: 52px; padding: 14px 20px; font-size: 16px; border-radius: 12px;
  }
  .btn-primary + .btn-primary, .btn-primary + .btn-secondary,
  .btn-secondary + .btn-primary, .btn-secondary + .btn-secondary { margin-top: 10px; }
  .hero-buttons { flex-direction: column; gap: 10px; }
  .hero-buttons .btn-primary, .hero-buttons .btn-secondary { margin-top: 0; }

  /* Kalkulačka: předvolby obratu jako větší štítky na dva sloupce */
  .sf-switch button { min-height: 42px; padding: 8px 16px; font-size: 14px; }
  .sf-switch a { width: 100%; margin-left: 0; text-align: center; padding: 10px 0; }

  /* Formuláře: pole nesmí na iPhonu spustit přiblížení (písmo < 16 px) */
  .f-group input, .f-group select, .f-group textarea { font-size: 16px; min-height: 50px; }
  .f-check input { width: 22px; height: 22px; }
  .faq__q { font-size: 15.5px; padding: 16px 40px 16px 0; }
  .faq__a { padding-right: 0; }
}

/* ── Tabulky: posuvné v rámu s náznakem, že pokračují ─────────── */
.table-wrap { position: relative; border: 1px solid var(--gray-200); border-radius: 12px; }
.table-wrap table.tbl { min-width: 560px; }
@media (max-width: 640px) {
  .table-wrap { border-radius: 10px;
                background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) 0 0 / 40px 100% no-repeat local,
                            linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) 100% 0 / 40px 100% no-repeat local,
                            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 0 0 / 14px 100% no-repeat scroll,
                            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0 / 14px 100% no-repeat scroll; }
  .table-wrap table.tbl { font-size: 14px; }
  .table-wrap table.tbl th, .table-wrap table.tbl td { padding: 11px 12px; }
}

/* ── Hlavička a menu na mobilu ───────────────────────────────── */
@media (max-width: 900px) {
  .navbar .container, .nav-inner { height: var(--nav-h); min-height: var(--nav-h); }
  /* backdrop-filter dělá z hlavičky kontejner pro position:fixed,
     rozbalené menu pak mělo výšku lišty místo celé obrazovky. */
  .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .mobile-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
                   border-radius: 10px; color: var(--gray-800);
                   -webkit-tap-highlight-color: transparent; }
  /* Obě značky leží v téže buňce mřížky, takže se prohodí bez poskočení. */
  .mobile-toggle__ico { grid-area: 1 / 1; width: 24px; height: 24px;
                        transition: opacity .2s ease, transform .25s cubic-bezier(.22,.75,.28,1); }
  .mobile-toggle__ico--close { opacity: 0; transform: rotate(-90deg); }
  .mobile-toggle.is-open .mobile-toggle__ico--menu { opacity: 0; transform: rotate(90deg); }
  .mobile-toggle.is-open .mobile-toggle__ico--close { opacity: 1; transform: none; }

  /* Starší pravidlo u 768 px dávalo otevřenému menu position:absolute
     bez spodní hrany, takže mělo výšku pár desítek pixelů a nedalo
     se v něm rolovat. Tady se to vrací na celou obrazovku. */
  /* ── Menu jako panel aplikace ─────────────────────────────────
     Panel má jedno tvarosloví: každá položka na každé úrovni je táž
     šedá dlaždice. Podnabídka se nerozbaluje pod položkou, ale
     **zanoří se** — zabere celou obrazovku, nahoře je „Zpět" a pod ním
     položky, které vypadají stejně jako o úroveň výš. Rozbalený
     akordeon dělal ze čtyř sekcí jeden dlouhý seznam, ve kterém nešlo
     poznat, kde člověk je.

     V DOMu se nic nepřesouvá, pořadí na mobilu je pořadí v DOMu,
     takže počítačová navigace zůstává nedotčená. */
  .nav-links, .nav-links.open { position: fixed; inset: var(--nav-h) 0 0; top: var(--nav-h); height: auto;
               flex-direction: column; align-items: stretch; gap: 7px;
               padding: 6px 18px calc(var(--mbar-h) + 18px); overflow-y: auto; overscroll-behavior: contain;
               background: #fff radial-gradient(130% 55% at 50% -12%, rgba(196,30,58,.07), rgba(255,255,255,0) 68%);
               box-shadow: none; border-bottom: none; z-index: 130; }
  .nav-links > * { width: 100%; }

  /* Panel najede jako celek, položky se pak vysunou po sobě podle
     `--i` ze šablony. Zpomalení je drobné (36 ms), aby to působilo
     svižně, ne jako čekání. `both` drží výchozí stav i před startem,
     jinak by položky problikly na svém místě.

     `:not(.is-drill)` má vedlejší účinek, na kterém tu stojí návrat
     z podnabídky: při zanoření pravidlo přestane platit, při návratu
     zase začne, a tím se běh animace spustí znovu. */
  .nav-links.open { animation: navPanelIn .2s ease both; }
  .nav-links.open:not(.is-drill) > * { animation: navItemIn .4s cubic-bezier(.22,.75,.28,1) both;
                                       animation-delay: calc(var(--i, 0) * 36ms + 50ms); }

  /* Jedna jediná podoba položky, na všech úrovních: šedá dlaždice
     s ikonou, názvem a u rozbalovacích i šipkou. */
  .nav-links > .nav-item > .nav-link,
  .nav-links > .nav-link,
  .nav-links .nav-back,
  .nav-links .nav-sub-all,
  .nav-links .mega-col a,
  .nav-links .drop a {
      display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; gap: 12px;
      justify-content: flex-start; text-align: left;
      font-family: var(--font); font-size: 15.5px; font-weight: 700; color: var(--black);
      text-decoration: none; cursor: pointer;
      background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 14px;
      transition: background .15s ease, border-color .15s ease, transform .12s ease; }
  .nav-links > .nav-item > .nav-link:active,
  .nav-links > .nav-link:active,
  .nav-links .nav-sub-all:active,
  .nav-links .mega-col a:active,
  .nav-links .drop a:active { transform: scale(.985); background: var(--gray-100); }
  .nav-links > .nav-item > .nav-link.active,
  .nav-links > .nav-link.active { background: var(--red-light); border-color: rgba(196,30,58,.22); color: var(--red-dark); }

  .nav-ico { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; color: var(--red); }
  .nav-ico svg { width: 20px; height: 20px; }

  .nav-caret { width: 14px; height: 14px; margin-left: auto; opacity: .55; }
  .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: none; }

  /* ── Zanoření ────────────────────────────────────────────────
     Ve druhé úrovni zůstane na obrazovce jen otevřená sekce a obě
     tlačítka dole. Ostatní položky se schovají, ne odsunou: panel
     nemá vodorovný posuvník a dva vedle sebe stojící sloupce by
     jen přidaly místo, kam se dá omylem odrolovat. */
  .nav-links.is-drill > *:not(.nav-item.is-open):not(.nav-actions) { display: none; }
  .nav-links.is-drill > .nav-item.is-open > .nav-link { display: none; }
  .nav-links.is-drill > .nav-item.is-open { display: flex; flex-direction: column; gap: 7px; }

  .nav-item .mega, .nav-item .drop { display: none; }
  .nav-item.is-open .mega, .nav-item.is-open .drop {
      display: flex; flex-direction: column; gap: 7px; padding: 0; margin: 0;
      animation: navDrillIn .28s cubic-bezier(.22,.75,.28,1) both; }

  /* Hlavička úrovně: šipka doleva a název sekce, ze které jsme přišli. */
  .nav-links .nav-back { background: #fff; border-color: var(--gray-200); color: var(--gray-700); }
  .nav-links .nav-back svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--red); }
  .nav-links .nav-back span { font-size: 15.5px; font-weight: 800; color: var(--black); }
  .nav-links .nav-back:active { transform: scale(.985); background: var(--gray-50); }

  .nav-links .nav-sub-all { color: var(--red); border-color: rgba(196,30,58,.22); background: var(--red-light); }

  /* Nadpisy skupin uvnitř Funkcí nejsou dlaždice, jsou to popisky. */
  .nav-links .mega-inner { display: flex; flex-direction: column; gap: 7px; }
  .nav-links .mega-col { display: flex; flex-direction: column; gap: 7px; margin: 0; }
  .nav-links .mega-col__head { margin: 6px 0 0; padding: 0 4px; font-size: 11.5px; letter-spacing: .6px; }
  .nav-links .drop a i { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700;
                         color: var(--red); white-space: nowrap; }
  .nav-links .drop a strong { font-weight: 800; }
  .nav-item .nav-link[aria-haspopup] { pointer-events: auto; }

  /* Telefon v menu na mobilu není. Zabíral řádek, kvůli kterému se
     položky nevešly, a zavolat jde ze všech stránek i ze spodní lišty. */
  .nav-links > .nav-phone { display: none; }

  /* Akce dole, kousek nad přichycenou spodní lištou. `margin-top: auto`
     je stlačí ke dnu panelu, dokud je nad nimi volné místo; když se
     rozbalí podnabídka a menu začne rolovat, odjedou s obsahem.
     Nováčkovi se sloupec obrací, aby „Vytvořit e-shop" stálo nahoře;
     kdo u nás účet má, dostane první „Do administrace" (web_visitor()). */
  .nav-links > .nav-actions { margin: auto 0 0; padding-top: 10px; flex-direction: column-reverse;
                              align-items: stretch; gap: 8px; border-top: 1px solid var(--gray-100); }
  .nav-links > .nav-actions--znamy { flex-direction: column; }
  .nav-cta { margin: 0; min-height: 48px; display: flex; align-items: center; justify-content: center;
             gap: 10px; font-size: 16px; border-radius: 14px; }
  .nav-cta .nav-ico { flex: 0 0 20px; width: 20px; height: 20px; color: inherit; }
  .nav-cta .nav-ico svg { width: 19px; height: 19px; }
  .nav-cta:not(.nav-cta--ghost) { background: linear-gradient(135deg, var(--red-bright), var(--red));
                                  box-shadow: 0 10px 22px rgba(196,30,58,.28); }
  .nav-cta:active { transform: scale(.985); }

  /* Stará plovoucí lišta s jedním tlačítkem nahrazena spodní navigací */
  .mobile-cta { display: none; }
  body { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
}

/* Nižší telefony (a hlavně starší Androidy 640 px na výšku) mají po
   odečtení hlavičky a spodní lišty jen ~570 px. Dlaždice se tam ve
   výchozích rozměrech nevejdou o poslední řádek, tak se o kousek
   stáhnou. Na běžném telefonu se nic nemění, tam je místa dost. */
@media (max-width: 900px) and (max-height: 680px) {
  .nav-links, .nav-links.open { gap: 5px; padding-top: 4px; }
  .nav-links > .nav-item > .nav-link,
  .nav-links > .nav-link,
  .nav-links .nav-back,
  .nav-links .nav-sub-all,
  .nav-links .mega-col a,
  .nav-links .drop a { min-height: 40px; font-size: 15px; }
  .nav-links.is-drill > .nav-item.is-open,
  .nav-item.is-open .mega, .nav-item.is-open .drop,
  .nav-links .mega-inner, .nav-links .mega-col { gap: 5px; }
  .nav-links > .nav-actions { padding-top: 8px; gap: 6px; }
  .nav-cta { min-height: 44px; }
}

@keyframes navPanelIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes navItemIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Zanoření přijíždí zprava, jako v mobilních aplikacích: je z toho
   vidět, že se jde o úroveň dovnitř, a „Zpět" pak dává smysl. */
@keyframes navDrillIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

/* ── Spodní lišta (vzor nafakturu.cz) ───────────────────────── */
.mbar { display: none; }

@media (max-width: 900px) {
  .mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    background: #fff; border-top: 1px solid var(--gray-200);
    box-shadow: 0 -8px 24px rgba(17,17,17,.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    align-items: stretch; justify-content: space-around; gap: 2px;
    transform: translateZ(0);
  }
  .mbar__item {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px; border-radius: 10px; color: var(--gray-500); text-decoration: none;
    font-size: 11.5px; font-weight: 600; line-height: 1.1; text-align: center; letter-spacing: -.1px;
    -webkit-tap-highlight-color: transparent; transition: color .15s ease, background .15s ease;
  }
  .mbar__item svg { width: 22px; height: 22px; }
  .mbar__item span { white-space: nowrap; }
  .mbar__item:active { background: var(--red-light); color: var(--red); }
  .mbar__item.is-active { color: var(--red); position: relative; }
  .mbar__item.is-active::before {
    content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; background: var(--red); border-radius: 0 0 3px 3px;
  }
  .mbar__cta {
    flex: 1.35 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 6px; position: relative; bottom: 8px; margin-top: -14px;
    border-radius: 14px; background: linear-gradient(135deg, var(--red-bright), var(--red)); color: #fff;
    text-decoration: none; font-size: 12.5px; font-weight: 800; line-height: 1.1; text-align: center;
    box-shadow: 0 10px 22px rgba(196,30,58,.38), 0 2px 6px rgba(196,30,58,.28);
    -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .15s ease;
  }
  .mbar__cta svg { width: 24px; height: 24px; }
  .mbar__cta:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(196,30,58,.35); }

  /* Modal a menu jsou nad lištou, lišta se pod nimi nemá prosvítat */
  body.modal-open .mbar { display: none; }
}

/* ── Drobnosti pro úzké displeje ────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .section { padding: 52px 0; }
  .section-title { font-size: 27px; letter-spacing: -.8px; }
  .page-hero { padding: 36px 0 32px; }
  .page-hero h1 { font-size: 28px; }
  .lead { font-size: 17px; }
  .hero { padding: 32px 0 40px; }
  .hero h1 { font-size: 33px; letter-spacing: -1.1px; }
  .cards, .cards--2 { grid-template-columns: 1fr; gap: 14px; }
  .card__body { padding: 18px 18px 20px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 16px; }
  .metric b { font-size: 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-col a { display: block; padding: 6px 0; font-size: 15px; }
  .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
  .footer-legal a { padding: 6px 0; }
  .crumbs { font-size: 12.5px; }
  .crumbs .container { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .crumbs .container::-webkit-scrollbar { display: none; }
  .badges li { font-size: 12.5px; padding: 7px 12px; }
}

/* ── Podnabídky v mobilním menu ───────────────────────────────
   Megamenu Funkce má 28 odkazů; trvale rozbalené dělalo z menu
   nekonečný seznam. Dřív se tu rozbalovalo do akordeonu, dnes se
   zanořuje na vlastní obrazovku (viz blok „Menu jako panel aplikace"
   výše). Zůstalo jen to, co s podobou dlaždic nesouvisí. */
.nav-sub-all, .nav-back { display: none; }
@media (max-width: 900px) {
  .nav-item > .nav-link { cursor: pointer; }
  /* Šipka míří doprava, protože se jde o úroveň dovnitř, ne dolů. */
  .nav-item > .nav-link .nav-caret { transform: rotate(-90deg); }
}

/* ════════════════════════════════════════════════════════════════
   MOBIL: jeden rytmus pro všechno

   Do 640 px platí: okraj stránky 20 px, vnitřek každé karty 20 px,
   text na střed. Vlevo zůstává jen to, co by na středu nedávalo
   smysl: formulářová pole, tabulky, akordeon otázek, seznamy
   s odrážkou a očíslované kroky. Blok je až úplně na konci, aby
   přebil všechna starší pravidla pro úzké displeje.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --pad: 20px; --pad-card: 20px; --gap: 14px; }

  .container { padding-left: var(--pad); padding-right: var(--pad); }
  .section { padding: 56px 0; }

  /* Zarovnání na střed */
  .hero, .hero-content, .page-hero, .cta-section, .section-header, .trust-bar,
  .section > .container, .card__body, .tier-card, .metric, .quote-card, .feature-card, .value-card,
  .int-card, .eco-card, .audience-card, .compare-card, .showcase-body, .calc, .footer,
  .footer-brand, .footer-col, .footer-bottom, .modal__foot { text-align: center; }

  .section-label, .badges, .hero-point, .calc-presets, .calc-badges, .footer-contact, .footer-legal,
  .sf-switch, .shop-head, .hero-buttons { justify-content: center; }
  .section-label { display: flex; }
  .hero-points { align-items: center; }
  .hero-point { text-align: left; }
  .section-sub, .lead, .hero p, .page-hero p, .prose, .card__text { margin-left: auto; margin-right: auto; }
  .card__body { align-items: center; }
  .card__media { align-self: stretch; }
  .footer-contact { flex-direction: column; align-items: center; gap: 4px; }
  .footer .nav-logo { justify-content: center; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .cards, .cards--2 { gap: var(--gap); }
  .cards > * { flex: 1 1 100%; min-width: 0; max-width: none; width: 100%; }

  /* Co zůstává vlevo */
  .prose, .prose *, .faq, .faq *, .table-wrap, .table-wrap *, .f-group, .f-group *, .f-check, .f-msg,
  ul.ticks, ul.ticks li, .flow, .flow-step, .flow-step *, .work-row, .work-row *, .calc-rows, .calc-row, .calc-row *,
  .crumbs, .crumbs *, .nav-links, .nav-links *, .mega, .drop, .modal__steps, .modal__steps *,
  .modal__help, .modal__help *, .vop-content, .vop-content *, .tier-card { text-align: left; }
  .prose h2, .prose h3 { text-align: left; }
  .flow-step { text-align: left; }
  .tier-card { text-align: left; }
  .calc-out { text-align: center; }

  /* Vnitřní odsazení karet: všude stejné */
  .card__body, .metric, .quote-card, .feature-card, .value-card, .int-card, .eco-card, .audience-card,
  .compare-card, .showcase-body, .tier-card, .flow-step, .modal__steps { padding: var(--pad-card); }
  .calc, .contact-form { padding: 22px var(--pad-card); }
  .contact-info { padding: 0; }
  .faq__q { padding: 16px 36px 16px 0; }
  .faq__a { padding: 0 0 18px; }
  .work-row { padding: 14px 0; }

  /* Mezery pod nadpisy a úvody stejné v každé sekci */
  .section-header { margin-bottom: 28px; }
  .section-title { margin-bottom: 10px; }
  .section-sub { font-size: 16px; margin-bottom: 22px; }
  .section-label { margin-bottom: 12px; }
  .lead { font-size: 17px; }
  .page-hero { padding: 32px 0 28px; }
  .hero { padding: 28px 0 40px; }
  .hero h1, .page-hero h1 { margin-bottom: 14px; }
  .hero-buttons { margin-top: 22px; }
  .cta-section { padding: 56px 0; }
  .cta-section h2 { font-size: 26px; }

  /* Modal a menu ve stejném okraji jako stránka */
  .modal__head--card { padding: 22px var(--pad) 0; }
  .flip__face { padding: 0 var(--pad) 6px; }
  .modal__foot--card { padding: 4px var(--pad) calc(20px + env(safe-area-inset-bottom)); }
  .nav-links { padding-left: var(--pad); padding-right: var(--pad); }

  /* Patička */
  .footer-grid { gap: 26px; }
  .footer-col h3 { margin-bottom: 8px; }
  .footer-col a { padding: 7px 0; }
  .footer-bottom { gap: 10px; }
}

/* Štítky jako odkazy (karty „Co dostanete" na úvodní stránce) */
.badges--links a { font-size: 12px; font-weight: 600; color: var(--gray-600); background: var(--gray-100);
                   border-radius: 100px; padding: 5px 11px; text-decoration: none; transition: var(--transition); }
.badges--links a:hover { background: var(--red-light); color: var(--red); }
@media (max-width: 640px) { .badges--links a { font-size: 12.5px; padding: 7px 12px; } }

/* ── Mobil: snímky jako pás, který se posouvá prstem ──────────
   Čtyři fotky pod sebou zabíraly na telefonu čtyři obrazovky.
   V pásu je vidět jedna a kousek další, takže je jasné, že se dá
   posouvat; zarážky drží vždy celou fotku v záběru. */
@media (max-width: 640px) {
  .shots { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
           -webkit-overflow-scrolling: touch; scrollbar-width: none;
           margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 8px; }
  .shots::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 82%; scroll-snap-align: center; }
  .shot figcaption { text-align: center; }

  /* Patička: odkazy ve dvou sloupcích místo jednoho dlouhého */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h3 { font-size: 12px; }
  .footer-col a { font-size: 14px; padding: 6px 0; }
}

/* ── Mobil: opravy po vizuální kontrole ───────────────────────── */
@media (max-width: 900px) {
  /* Hamburger do křížku: čárky absolutně, jinak se při otočení
     rozjedou do tvaru šipky. */
  .mobile-toggle { position: relative; }
  .mobile-toggle span { position: absolute; left: 11px; width: 22px; margin: 0; transform-origin: center; }
  .mobile-toggle span:nth-child(1) { top: 14px; }
  .mobile-toggle span:nth-child(2) { top: 21px; }
  .mobile-toggle span:nth-child(3) { top: 28px; }
  .mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Telefon v mobilním menu není. Zabíral řádek, kvůli kterému se
     položky nevešly na jednu obrazovku; zavolat jde ze všech stránek
     i ze spodní lišty. Dřív tu naopak stálo `display: flex`, protože
     ho schovávalo pravidlo pro 1500 px. */
  .nav-links .nav-phone { display: none; }

  /* Podnabídka nemá vlastní rám ani stín: po zanoření je to celá
     obrazovka, ne vyskakovací panel jako na počítači. Podobu položek
     uvnitř řeší blok „Menu jako panel aplikace", tady se jen shazuje,
     co si nese počítačová verze. */
  .nav-item .mega, .nav-item .drop { border: none; box-shadow: none; background: transparent; border-radius: 0;
                                     width: auto; max-width: none; }
  .mega-inner { padding: 0; }
  .mega-col__head { border: none; }
}

@media (max-width: 760px) {
  /* Text souhlasu dědil tučné písmo z popisků polí */
  .modal__panel--card .f-check { font-weight: 500; }
  /* Jméno a příjmení vedle sebe i na telefonu, ušetří jedno pole výšky */
  .modal__panel--card .f-row { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Na telefonu se karta neotáčí ve 3D, strany se jen prolnou.
     Karta je pak vysoká přesně podle zobrazené strany a přihlášení
     pod sebou netahá prázdné místo z delší registrace. */
  .flip { perspective: none; }
  .flip__face { display: none; transform: none !important; animation: fadeIn .25s ease both; }
  .flip__face.is-active { display: block; }
}
@media (max-width: 640px) {
  /* Ceníková pásma: karty přes celou šířku, sazba vlevo, popis vpravo */
  .tier-grid > * { flex: 1 1 100%; min-width: 0; max-width: none; width: 100%; }
  .tier-card { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .tier-card .note { font-size: 12.5px; }
}
@media (max-width: 640px) {
  /* Tabulky se na telefon vejdou bez posouvání, pokud mají tři
     sloupce; širší se posouvají dál. */
  .table-wrap table.tbl { min-width: 0; width: 100%; }
  .table-wrap table.tbl th, .table-wrap table.tbl td { padding: 10px 10px; font-size: 13.5px; }
  .table-wrap table.tbl th { font-size: 11px; letter-spacing: .5px; }
  .table-wrap table.tbl .num { white-space: normal; }
}

/* ── Mobil: rejstřík funkcí jako hustý seznam ──────────────────
   28 karet s velkým odsazením dalo na telefonu stránku dlouhou
   přes sedm obrazovek. Kompaktní karta je řádek s názvem, jednou
   větou a šipkou; odkaz „Jak to funguje" nahrazuje šipka. */
@media (max-width: 640px) {
  .cards--compact { gap: 8px; }
  .cards--compact .card { flex-direction: row; align-items: center; border-radius: 12px; }
  .cards--compact .card__body { padding: 13px 14px 13px 16px; align-items: flex-start; text-align: left; }
  .cards--compact .card__title { font-size: 15.5px; margin: 0 0 3px; }
  .cards--compact .card__text { font-size: 13px; line-height: 1.45; }
  .cards--compact .card__more { display: none; }
  .cards--compact .card::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; margin-right: 16px;
                                 border-right: 2px solid var(--red); border-top: 2px solid var(--red); transform: rotate(45deg); }
}
@media (max-width: 640px) {
  /* Tabulka se čtyřmi a více sloupci se do telefonu nevejde,
     zůstává posuvná; první sloupec přitom drží na místě. */
  .table-wrap table.tbl:has(th:nth-child(4)) { min-width: 600px; }
  .table-wrap table.tbl:has(th:nth-child(4)) th:first-child,
  .table-wrap table.tbl:has(th:nth-child(4)) td:first-child {
    position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--gray-200); }
  .table-wrap table.tbl:has(th:nth-child(4)) .ours:first-child { background: var(--red-light); }
}

/* Hlavička sekce zarovnaná vlevo (data-left); na telefonu je i ta na středu */
.section-header[data-left] { text-align: left; }
@media (max-width: 640px) { .section-header[data-left] { text-align: center; } .section-header[data-left] .section-label { justify-content: center; } .section-header[data-left] .section-sub { margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) {
  /* Posuvný pás fotek nesmí roztáhnout mřížku, ve které leží */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > * { min-width: 0; }
  .shots { max-width: calc(100vw - 0px); }
}


/* ════════════════════════════════════════════════════════════════
   Úvodní stránka na počítači: pás slibů pod herem a karty „Proč"
   ════════════════════════════════════════════════════════════════ */
.hero-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.hero-tile { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
             padding: 18px 20px; background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
             box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.hero-tile i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--red-light); color: var(--red);
               display: grid; place-items: center; }
.hero-tile i svg { width: 22px; height: 22px; }
.hero-tile b { font-size: 15.5px; font-weight: 800; color: var(--black); letter-spacing: -.2px; }
.hero-tile span { font-size: 13.5px; color: var(--gray-600); line-height: 1.45; }
@media (max-width: 900px) { .hero-strip { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; } }

.wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.win { flex: none; min-width: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden; padding: 0 0 22px; }
.win > b, .win > span { padding: 0 24px; }
.win > b { margin-top: 18px; }
.win__media { display: block; width: 100%; margin: 0; aspect-ratio: 16 / 9; object-fit: cover; }
.win__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--red-light); color: var(--red);
             display: grid; place-items: center; margin-bottom: 14px; }
.win__icon svg { width: 22px; height: 22px; }
.win--hl .win__icon { background: #fff; }
@media (max-width: 1024px) { .wins { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wins { grid-template-columns: 1fr; gap: 12px; }
  .win { padding: 0 0 20px; }
  .win > b, .win > span { padding: 0 20px; }
  .win__icon { margin: 0 auto 12px; } }


/* ── Jak to běží v provozu: kroky + přilepená fotka ─────────── */
.tok { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: stretch; }
.tok__kroky { gap: 8px; }
.tok__kroky .flow-step { padding: 12px 16px; gap: 12px; border-radius: 12px; }
.tok__kroky .flow-step em { width: 26px; height: 26px; font-size: 12px; }
.tok__kroky .flow-step strong { font-size: 14.5px; }
.tok__kroky .flow-step span { font-size: 13px; line-height: 1.45; }
.tok__foto { position: relative; min-height: 420px; }
.tok__ram { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: var(--gray-100);
            box-shadow: 0 30px 60px rgba(0,0,0,.12); }
.tok__snimek { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s ease; }
.tok__snimek.is-on { opacity: 1; }
.tok__snimek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tok__snimek figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px;
                          padding: 12px 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-radius: 12px;
                          font-size: 14px; font-weight: 600; color: var(--black); }
.tok__snimek figcaption em { font-style: normal; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--red);
                             color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.tok__kroky .flow-step { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; cursor: default; }
.tok__kroky .flow-step.is-on { border-color: var(--red); box-shadow: 0 14px 36px rgba(196,30,58,.12); transform: translateX(6px); }
.tok__kroky .flow-step.is-on em { background: var(--red); color: #fff; }
@media (max-width: 900px) {
  .tok { grid-template-columns: 1fr; gap: 20px; }
  .tok__foto { min-height: 0; aspect-ratio: 16 / 11; }
  .tok__kroky .flow-step.is-on { transform: none; }
  /* Na telefonu je fotka nad kroky, ať je hned vidět a přepíná se při rolování */
  .tok__foto { order: -1; }
}


/* ── Závěrečná výzva s fotkou ───────────────────────────────── */
.cta-section--foto { text-align: left; padding: 72px 0; }
.cta-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cta-split__text h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; }
.cta-split__text p { margin-left: 0; margin-right: 0; }
.cta-split__tel { margin-top: 18px !important; margin-bottom: 0 !important; font-size: 14px; opacity: .85; }
.cta-split__tel a { font-weight: 700; color: #fff; text-decoration: none; }
.cta-split__foto { margin: 0; position: relative; border-radius: 20px; overflow: hidden;
                   box-shadow: 0 40px 80px rgba(0,0,0,.45); transform: rotate(-1.5deg); }
.cta-split__foto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cta-split__foto figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 14px 18px;
                              background: rgba(255,255,255,.94); border-radius: 12px; color: var(--black); }
.cta-split__foto figcaption b { display: block; font-size: 15px; font-weight: 800; }
.cta-split__foto figcaption span { display: block; font-size: 13px; color: var(--gray-600); margin-top: 2px; }
@media (max-width: 900px) {
  .cta-section--foto { text-align: center; }
  .cta-split { grid-template-columns: 1fr; gap: 28px; }
  .cta-split__foto { order: -1; transform: none; }
  .cta-split__text .hero-buttons { justify-content: center; }
}

/* ── Tři platformy vedle sebe (úvodka, ceník, proč my) ───────── */
.vs3 { border: 1px solid var(--gray-200); border-radius: 18px; overflow: hidden; background: #fff; }
.vs3__head, .vs3__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.vs3__head { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.vs3__col { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.vs3__col i { font-style: normal; font-size: 12px; color: var(--gray-500); padding-left: 40px; }
.vs3__col--nas { background: #ecfdf5; }
.vs3__row { border-bottom: 1px solid var(--gray-100); }
.vs3__row:last-of-type { border-bottom: none; }
.vs3__co { padding: 16px 18px; font-weight: 700; color: var(--black); font-size: 14.5px; }
.vs3__cell { padding: 16px 18px; font-size: 14px; color: var(--gray-600); display: flex; align-items: center; gap: 8px; }
.vs3__cell--nas { background: #ecfdf5; color: #065f46; font-weight: 700; }
.vs3__cell--nas svg { width: 18px; height: 18px; flex-shrink: 0; color: #059669; }
.vs3__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 18px;
             border-top: 1px solid var(--gray-200); background: var(--gray-50); font-size: 12.5px; color: var(--gray-500); }
.vs3__foot a { color: var(--red); font-weight: 700; text-decoration: none; }
@media (max-width: 760px) {
  .vs3__head { display: none; }
  .vs3__row { grid-template-columns: 1fr; padding: 12px 0; }
  .vs3__co { padding: 4px 16px 6px; text-align: left; }
  .vs3__cell { padding: 7px 16px; justify-content: flex-start; }
  .vs3__cell::before { content: attr(data-kdo); flex: 0 0 84px; font-size: 12px; font-weight: 700; color: var(--gray-500); }
  .vs3__cell--nas { border-radius: 0; }
}


/* ── Srovnávací tabulka: náš sloupec zelený, cizí „Individuálně" ── */
.tbl--vs th.ours, .tbl--vs td.ours { background: #ecfdf5; }
.tbl--vs th.ours { color: #047857; }
.tbl--vs td.ours b { color: #065f46; font-size: 17px; }
.tbl--vs td small { font-size: 12px; color: var(--gray-500); line-height: 1.35; display: inline-block; }
.tbl--vs td.is-indiv b { color: var(--gray-700); font-size: 14px; }
.tbl-tag { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 100px; background: #059669; color: #fff;
           font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.tbl-note a { color: var(--red); font-weight: 600; }

/* ── Dvousloupcová hlavička sekce s fotkou ───────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-bottom: 36px; }
.split__foto { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.10); }
.split__foto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.split__text .section-header { margin-bottom: 0; }
.split--foto-vpravo .split__foto { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 22px; margin-bottom: 24px; }
  .split--foto-vpravo .split__foto { order: 0; }
}


/* ════════════════════════════════════════════════════════════════
   Kalkulačka ceny: jedna otázka, posuvník, tři velké výsledky
   ════════════════════════════════════════════════════════════════ */
.kalk { max-width: 980px; margin: 0 auto; padding: 36px 40px 28px; background: #fff; border: 1px solid var(--gray-200);
        border-radius: 24px; box-shadow: 0 24px 64px rgba(0,0,0,.07); text-align: center; }
.kalk__otazka label { display: block; font-size: 15px; font-weight: 700; color: var(--gray-600); margin-bottom: 10px; }
.kalk__pole { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 22px; border-radius: 16px;
              background: var(--gray-50); border: 2px solid var(--gray-200); transition: border-color .2s ease, box-shadow .2s ease; }
.kalk__pole:focus-within { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-glow); background: #fff; }
.kalk__pole input { width: 9ch; min-width: 0; border: 0; background: none; outline: none; text-align: right;
                    font-family: var(--font); font-size: 44px; font-weight: 900; letter-spacing: -1.5px; color: var(--black); }
.kalk__pole span { font-size: 22px; font-weight: 800; color: var(--gray-400); }

.kalk__slider { position: relative; margin: 22px auto 0; max-width: 720px; padding-bottom: 30px; }
.kalk__range { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; background: var(--gray-200); border-radius: 4px; cursor: pointer; outline: none; }
.kalk__range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red);
                                    border: 4px solid #fff; box-shadow: 0 4px 14px rgba(196,30,58,.4); cursor: grab; }
.kalk__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 4px solid #fff; box-shadow: 0 4px 14px rgba(196,30,58,.4); }
.kalk__range:focus-visible { box-shadow: 0 0 0 4px var(--red-glow); }
.kalk__ticks { position: absolute; left: 0; right: 0; top: 18px; height: 24px; }
.kalk__ticks button { position: absolute; left: var(--x); transform: translateX(-50%); padding: 3px 8px; border: 0; border-radius: 100px;
                      background: transparent; font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--gray-500); cursor: pointer; white-space: nowrap; }
.kalk__ticks button::before { content: ""; position: absolute; left: 50%; top: -10px; width: 2px; height: 6px; background: var(--gray-300); transform: translateX(-50%); }
.kalk__ticks button:hover { color: var(--red); }


.kalk__vysledky { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; margin-top: 26px; }
.kalk__dlazdice { padding: 22px 18px 18px; border-radius: 18px; background: var(--gray-50); border: 1px solid var(--gray-200);
                  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.kalk__dlazdice > span { font-size: 12px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--gray-500); }
.kalk__dlazdice > b { font-size: 22px; font-weight: 800; color: var(--gray-500); line-height: 1; letter-spacing: -.5px; }
.kalk__dlazdice > b em { font-style: normal; font-size: 48px; font-weight: 900; letter-spacing: -2px; color: var(--black); font-variant-numeric: tabular-nums; }
.kalk__dlazdice small { font-size: 12.5px; color: var(--gray-500); }
.kalk__dlazdice small em { font-style: normal; font-weight: 700; color: var(--gray-700); }
.kalk__dlazdice--fee { background: var(--red-light); border-color: #f5c2cb; }
.kalk__dlazdice--fee > b em { color: var(--red); font-size: 56px; }
.kalk__dlazdice--net { background: #ecfdf5; border-color: #a7f3d0; }
.kalk__dlazdice--net > b em { color: #047857; }
.kalk__kruh { position: relative; width: 96px; height: 96px; }
.kalk__kruh svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kalk__kruh circle { fill: none; stroke-width: 3.6; stroke: var(--gray-200); }
.kalk__kruh circle[data-ring] { stroke: var(--red); stroke-linecap: round; stroke-dasharray: var(--p, 0) 100; transition: stroke-dasharray .45s cubic-bezier(.4,0,.2,1); }
.kalk__kruh b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 900; letter-spacing: -.5px; color: var(--black); }

.kalk__pasma { margin-top: 22px; }
.kalk__pruh { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--gray-100); gap: 2px; }
.kalk__pruh i { flex: 0 0 var(--w, 0%); transition: flex-basis .45s cubic-bezier(.4,0,.2,1); }
.kalk__pruh i:nth-child(1) { background: #f1a3b0; } .kalk__pruh i:nth-child(2) { background: #e6687d; }
.kalk__pruh i:nth-child(3) { background: var(--red); } .kalk__pruh i:nth-child(4) { background: var(--red-dark); }
.kalk__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.kalk__legenda span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--gray-200);
                      font-size: 12.5px; color: var(--gray-400); background: #fff; transition: color .2s ease, border-color .2s ease; }
.kalk__legenda span b { font-weight: 800; color: var(--gray-400); }
.kalk__legenda span.is-on { color: var(--gray-700); border-color: var(--gray-300); }
.kalk__legenda span.is-on b { color: var(--red); }

.kalk__konk { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin-top: 22px; padding: 14px 18px;
              border-radius: 14px; background: var(--gray-50); font-size: 14px; color: var(--gray-600); }
.kalk__konk b { font-weight: 700; color: var(--gray-800); }
.kalk__konk b i { font-style: normal; font-weight: 900; color: var(--black); }
.kalk__konk small { flex-basis: 100%; font-size: 12px; color: var(--gray-500); }

.kalk__jak { margin-top: 14px; text-align: left; }
.kalk__jak summary { cursor: pointer; list-style: none; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--gray-500); padding: 8px; }
.kalk__jak summary::-webkit-details-marker { display: none; }
.kalk__jak summary::after { content: " +"; color: var(--red); }
.kalk__jak[open] summary::after { content: " \2212"; }
.kalk__jak p { font-size: 13.5px; color: var(--gray-600); max-width: 640px; margin: 6px auto 12px; text-align: center; }
.kalk__rows { max-width: 640px; margin: 0 auto; border-top: 1px solid var(--gray-100); }
.kalk__row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); font-size: 13.5px; color: var(--gray-600); }
.kalk__row b { color: var(--black); }
.kalk__row.is-empty { grid-template-columns: 1fr; text-align: center; color: var(--gray-400); }

@media (max-width: 760px) {
  .kalk { padding: 24px 18px 18px; border-radius: 20px; }
  .kalk__pole input { font-size: 34px; width: 8ch; }
  .kalk__ticks button { font-size: 11px; padding: 3px 4px; }
  .kalk__ticks button:nth-child(even) { display: none; }
  .kalk__vysledky { grid-template-columns: 1fr; gap: 10px; }
  .kalk__dlazdice { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: 16px 18px; }
  .kalk__dlazdice > span { flex-basis: 100%; }
  .kalk__dlazdice > b em, .kalk__dlazdice--fee > b em { font-size: 36px; }
  .kalk__kruh { width: 72px; height: 72px; }
  .kalk__kruh b { font-size: 15px; }
  .kalk__legenda span { font-size: 12px; padding: 5px 10px; }
  .kalk__konk { flex-direction: column; gap: 4px; }
  .kalk__row { grid-template-columns: 1fr auto; }
  .kalk__row span:nth-child(2) { grid-column: 1 / -1; font-size: 12px; color: var(--gray-400); }
}

/* Čtyři karty v řadě (Co dostanete na úvodce) */
.cards--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cards--4 > * { flex: none; min-width: 0; max-width: none; }
@media (max-width: 1024px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards--4 { grid-template-columns: 1fr; } }


/* ── Ekosystém Wopro: fotka + šest služeb s ikonou ───────────── */
.eko { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.eko__foto { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.10); }
.eko__foto img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.eko__sluzby { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eko__sluzba { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
               padding: 16px 18px; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; text-decoration: none; color: inherit;
               transition: var(--transition); }
.eko__sluzba:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.08); border-color: var(--gray-300); }
.eko__sluzba img { grid-row: span 2; width: 44px; height: 44px; border-radius: 11px; }
.eko__sluzba b { font-size: 15px; font-weight: 800; color: var(--black); }
.eko__sluzba span { font-size: 13px; color: var(--gray-600); line-height: 1.4; }
@media (max-width: 900px) {
  .eko { grid-template-columns: 1fr; gap: 20px; }
  .eko__foto img { aspect-ratio: 16 / 10; }
  .eko__sluzby { grid-template-columns: 1fr; gap: 10px; }
  .eko__sluzba { text-align: left; }
}


/* ── Sekce s fotkou: nárok a kontaktní řádky ─────────────────── */
.split__claim { font-size: 18px; font-weight: 800; color: var(--black); margin: 18px 0 20px; }
.split__text .hero-buttons { margin-top: 0; }
.kontakty { display: grid; gap: 10px; margin-top: 22px; }
.kontakt { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
           padding: 14px 16px; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; text-decoration: none; color: inherit;
           transition: var(--transition); text-align: left; }
.kontakt:hover { border-color: var(--red); box-shadow: 0 12px 28px rgba(196,30,58,.10); }
.kontakt i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--red-light); color: var(--red); display: grid; place-items: center; }
.kontakt i svg { width: 20px; height: 20px; }
.kontakt b { font-size: 16px; font-weight: 800; color: var(--black); }
.kontakt span { font-size: 13px; color: var(--gray-600); }
@media (max-width: 640px) { .split__claim { font-size: 16px; } }

/* ── Hlavička podstránky s fotkou ─────────────────────────────── */
.page-hero--foto { text-align: left; padding: 56px 0; }
.page-hero--foto .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.page-hero--foto .section-label { justify-content: flex-start; }
.page-hero--foto h1 { font-size: clamp(32px, 3.8vw, 46px); }
.page-hero--foto p { margin-left: 0; margin-right: 0; }
.page-hero--foto .badges { justify-content: flex-start; }
.page-hero__foto { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.12); transform: rotate(1.5deg); }
.page-hero__foto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 900px) {
  .page-hero--foto { text-align: center; padding: 32px 0 28px; }
  .page-hero--foto .container { grid-template-columns: 1fr; gap: 22px; }
  .page-hero--foto .section-label, .page-hero--foto .badges { justify-content: center; }
  .page-hero--foto p { margin-left: auto; margin-right: auto; }
  .page-hero__foto { transform: none; order: -1; }
}


/* ── Jednotné odsazení sekcí a šířky kontejnerů ──────────────── */
:root { --sec-pad: 96px; --sec-pad-tight: 44px; }
.section { padding: var(--sec-pad) 0; }
.section--tight { padding-top: var(--sec-pad-tight); }
.section--flush { padding-top: 0; }
.container--uzky { max-width: 840px; }
.container--text { max-width: 760px; }
.container--stred { text-align: center; }
@media (max-width: 768px) { :root { --sec-pad: 64px; --sec-pad-tight: 32px; } }
@media (max-width: 640px) { :root { --sec-pad: 56px; --sec-pad-tight: 28px; } .section { padding: var(--sec-pad) 0; } .section--tight { padding-top: var(--sec-pad-tight); } .section--flush { padding-top: 0; } }


/* ── Hlavička sekce: vzhled řídí jen třídy, žádné inline styly ── */
.section-header { text-align: center; margin-bottom: 48px; }
.section-header .section-label { justify-content: center; }
.section-header .section-sub { margin: 14px auto 0; max-width: 640px; }
.section-header .section-title { margin-bottom: 0; }
.section-header[data-left] { text-align: left; }
.section-header[data-left] .section-label { justify-content: flex-start; }
.section-header[data-left] .section-sub { margin-left: 0; margin-right: 0; }
@media (max-width: 640px) {
  .section-header, .section-header[data-left] { text-align: center; margin-bottom: 28px; }
  .section-header[data-left] .section-label { justify-content: center; }
  .section-header[data-left] .section-sub { margin-left: auto; margin-right: auto; }
}


/* ── Mapa stránek ─────────────────────────────────────────────── */
.mapa__hledani { position: relative; max-width: 640px; margin: 0 auto 32px; }
.mapa__hledani svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--gray-400); }
.mapa__hledani input { width: 100%; padding: 16px 120px 16px 50px; border: 2px solid var(--gray-200); border-radius: 16px; background: #fff;
                       font-family: var(--font); font-size: 16px; color: var(--black); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.mapa__hledani input:focus { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-glow); }
.mapa__pocet { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 700; color: var(--gray-500);
               background: var(--gray-100); border-radius: 100px; padding: 5px 10px; }
.mapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.mapa__karta { background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; }
.mapa__karta[hidden] { display: none; }
.mapa__hlava { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.mapa__hlava i { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; background: var(--red-light); color: var(--red); display: grid; place-items: center; }
.mapa__hlava i svg { width: 20px; height: 20px; }
.mapa__hlava b { font-size: 16.5px; font-weight: 800; color: var(--black); }
.mapa__hlava span { font-size: 12.5px; color: var(--gray-500); }
.mapa__hlava:hover b { color: var(--red); }
.mapa__seznam { margin-top: 12px; border-top: 1px solid var(--gray-100); }
.mapa__seznam a { display: block; padding: 8px 0; font-size: 14px; color: var(--gray-600); text-decoration: none; border-bottom: 1px solid var(--gray-100); }
.mapa__seznam a:hover { color: var(--red); }
.mapa__seznam a[hidden] { display: none; }
.mapa__seznam mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
.mapa__karta.is-dlouha .mapa__seznam { max-height: 300px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin;
                                       mask-image: linear-gradient(180deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent); }
.mapa__karta.is-dlouha.is-open .mapa__seznam, .mapa__karta.is-dlouha.is-hledani .mapa__seznam { max-height: none; mask-image: none; -webkit-mask-image: none; }
.mapa__vic { margin-top: 10px; align-self: flex-start; border: 0; background: none; font-family: var(--font); font-size: 13.5px; font-weight: 700; color: var(--red); cursor: pointer; padding: 4px 0; }
.mapa__karta.is-open .mapa__vic, .mapa__karta.is-hledani .mapa__vic { display: none; }
.mapa__nic { grid-column: 1 / -1; text-align: center; padding: 32px; color: var(--gray-500); }
.mapa__nic a { color: var(--red); font-weight: 700; }
@media (max-width: 1024px) { .mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .mapa { grid-template-columns: 1fr; gap: 12px; }
  .mapa__hledani input { padding-right: 16px; font-size: 16px; }
  .mapa__pocet { display: none; }
  .mapa__hlava { text-align: left; }
  .mapa__seznam a { text-align: left; }
  .mapa__karta.is-dlouha .mapa__seznam { max-height: 240px; }
  .mapa__vic { align-self: center; }
}


/* ════════════════════════════════════════════════════════════════
   Právní dokumenty: obsah vlevo, text vpravo
   ════════════════════════════════════════════════════════════════ */
.legal { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal__toc { position: sticky; top: calc(var(--nav-h, 64px) + 24px); }
.legal__toc-box { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; padding: 18px 20px; }
.legal__toc-box summary { list-style: none; cursor: default; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--red); pointer-events: none; }
.legal__toc-box summary::-webkit-details-marker { display: none; }
.legal__toc ol { list-style: none; margin: 12px 0 0; padding: 0; max-height: calc(100vh - var(--nav-h, 64px) - 200px); overflow-y: auto; scrollbar-width: thin; }
.legal__toc li a { display: block; padding: 7px 10px 7px 12px; margin-left: -12px; font-size: 13.5px; line-height: 1.35; color: var(--gray-600); text-decoration: none;
                   border-left: 2px solid transparent; border-radius: 0 8px 8px 0; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.legal__toc li a:hover { color: var(--black); background: #fff; }
.legal__toc li a.is-on { color: var(--red); border-left-color: var(--red); font-weight: 700; background: #fff; }
.legal__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-200); font-size: 12.5px; color: var(--gray-500); }
.legal__meta b { color: var(--gray-800); }
.legal__meta a { color: var(--red); font-weight: 700; text-decoration: none; }

.legal__text { max-width: 760px; min-width: 0; }
.legal__intro { padding: 16px 20px; background: var(--red-light); border-radius: 14px; font-size: 14.5px; color: var(--gray-700); margin-bottom: 12px; }
.legal__intro a { color: var(--red); font-weight: 700; }
.legal__text h2 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--black); margin: 44px 0 14px; padding-top: 8px; scroll-margin-top: calc(var(--nav-h, 64px) + 24px); }
.legal__text h2:first-of-type { margin-top: 28px; }
.legal__text h3 { font-size: 17px; font-weight: 800; color: var(--gray-900); margin: 24px 0 8px; }
.legal__text p { font-size: 15px; line-height: 1.75; color: var(--gray-700); margin: 0 0 12px; }
.legal__text ul { margin: 4px 0 14px; padding-left: 22px; }
.legal__text li { font-size: 15px; line-height: 1.7; color: var(--gray-700); margin-bottom: 6px; }
.legal__text li::marker { color: var(--red); }
.legal__text strong { color: var(--black); }
.legal__text a { color: var(--red); font-weight: 600; }
.legal__text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--gray-100); padding: 2px 6px; border-radius: 6px; color: var(--black); }
.legal__text .table-wrap { margin: 14px 0 18px; }
.tbl--cookies { min-width: 0; font-size: 13.5px; }
.tbl--cookies th, .tbl--cookies td { padding: 10px 12px; vertical-align: top; }
.tbl--cookies td:first-child { white-space: nowrap; }
.legal__firma { margin-top: 44px; padding: 20px 22px; border: 1px solid var(--gray-200); border-radius: 14px; font-size: 14px; line-height: 1.7; color: var(--gray-700); background: var(--gray-50); }
.legal__firma a { color: var(--red); font-weight: 600; text-decoration: none; }

@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .legal__toc { position: static; }
  .legal__toc-box summary { cursor: pointer; pointer-events: auto; display: flex; justify-content: space-between; align-items: center; }
  .legal__toc-box summary::after { content: "+"; font-size: 18px; color: var(--red); }
  .legal__toc-box[open] summary::after { content: "\2212"; }
  .legal__toc ol { max-height: none; }
  .legal__toc li a { margin-left: 0; padding-left: 10px; text-align: left; }
  .legal__text, .legal__text p, .legal__text li, .legal__text h2, .legal__text h3, .legal__intro, .legal__firma, .legal__meta { text-align: left; }
  .legal__text h2 { font-size: 21px; margin-top: 34px; }
  .tbl--cookies { min-width: 560px; }
}


/* ════════════════════════════════════════════════════════════════
   Živé demo: dva e-shopy vedle sebe v rámu
   ════════════════════════════════════════════════════════════════ */
.container--wide { max-width: 1320px; }
.demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.demo__shop { background: #fff; border: 1px solid var(--gray-200); border-radius: 22px; padding: 22px; box-shadow: 0 18px 48px rgba(0,0,0,.06); }
.demo__head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-bottom: 14px; }
.demo__logo { height: 40px; width: auto; max-width: 140px; object-fit: contain; }
.demo__meta b { display: block; font-size: 18px; font-weight: 800; color: var(--black); letter-spacing: -.3px; }
.demo__meta span { font-size: 13px; color: var(--gray-500); }
.demo__obrat { text-align: right; padding: 8px 14px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.demo__obrat small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #047857; }
.demo__obrat b { font-size: 15px; font-weight: 900; color: #065f46; white-space: nowrap; }
.demo__shop .sf-switch { margin-bottom: 12px; }

.demo__ram { border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; background: var(--gray-50); }
.demo__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--gray-200); }
.demo__dots { display: flex; gap: 5px; }
.demo__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); }
.demo__url { flex: 1; text-align: center; font-size: 12.5px; color: var(--gray-500); background: var(--gray-100); border-radius: 100px; padding: 5px 12px; }
.demo__okno { position: relative; height: 640px; background: #fff; }
.demo__okno iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.demo__cekam { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; background: var(--gray-50);
               font-size: 14px; color: var(--gray-500); pointer-events: none; transition: opacity .3s ease; }
.demo__cekam span { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--gray-200); border-top-color: var(--red); animation: spinSlow .9s linear infinite; }
.demo__shop.is-nacteno .demo__cekam { opacity: 0; }

/* Mobilní podoba: rám úzký jako telefon, s výřezem */
.demo__shop.is-mobil .demo__ram { max-width: 400px; margin: 0 auto; border-radius: 34px; border-width: 6px; border-color: var(--black); background: var(--black); }
.demo__shop.is-mobil .demo__bar { display: none; }
.demo__shop.is-mobil .demo__okno { height: 720px; border-radius: 28px; overflow: hidden; }

.demo__zaloha[hidden] { display: none; }
.demo__perex { margin-top: 16px; font-size: 14.5px; line-height: 1.65; color: var(--gray-600); }
.demo__akce { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.demo__pozn { text-align: center; margin-top: 16px; font-size: 14px; color: var(--gray-500); }
.demo__pozn a { color: var(--red); font-weight: 600; }

@media (max-width: 1100px) { .demo { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .demo__shop { padding: 14px; border-radius: 18px; }
  .demo__head { grid-template-columns: 1fr auto; }
  .demo__logo { grid-column: 1 / -1; justify-self: center; }
  .demo__meta { text-align: left; }
  .demo__okno { height: 70vh; }
  .demo__shop.is-mobil .demo__okno { height: 70vh; }
  .demo__akce { flex-direction: column; }
  .demo__akce a { width: 100%; }
}

.faq__vic { text-align: center; margin-top: 18px; }
.faq__vic a { color: var(--red); font-weight: 700; text-decoration: none; }


/* ── Nápověda: rozcestník kategorií a sekce s akordeony ───────── */
.napo__hledani { margin-bottom: 28px; }
.napo__kategorie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 48px; }
.napo__kat { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: start;
             padding: 16px 18px; background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; text-decoration: none; color: inherit; transition: var(--transition); }
.napo__kat:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(196,30,58,.10); }
.napo__kat i { grid-row: span 3; width: 40px; height: 40px; border-radius: 11px; background: var(--red-light); color: var(--red); display: grid; place-items: center; }
.napo__kat i svg { width: 20px; height: 20px; }
.napo__kat b { font-size: 15px; font-weight: 800; color: var(--black); }
.napo__kat span { font-size: 12.5px; color: var(--gray-600); line-height: 1.4; margin-top: 2px; }
.napo__kat small { font-size: 11.5px; font-weight: 700; color: var(--red); margin-top: 6px; }
.napo { display: grid; gap: 40px; max-width: 900px; margin: 0 auto; }
.napo__sekce[hidden] { display: none; }
.napo__sekce { scroll-margin-top: calc(var(--nav-h, 64px) + 20px); }
.napo__hlava { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.napo__hlava i { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--red); color: #fff; display: grid; place-items: center; }
.napo__hlava i svg { width: 22px; height: 22px; }
.napo__hlava h2 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--black); margin: 0; }
.napo__hlava p { font-size: 13.5px; color: var(--gray-500); margin: 2px 0 0; }
.napo .faq__item[hidden] { display: none; }
.napo .faq__q mark, .napo .faq__a mark { background: #fde68a; border-radius: 3px; padding: 0 1px; }
@media (max-width: 1024px) { .napo__kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .napo__kategorie { grid-template-columns: 1fr; gap: 8px; margin-bottom: 32px; }
  .napo__kat { text-align: left; padding: 12px 14px; }
  .napo__hlava { text-align: left; }
  .napo__hlava h2 { font-size: 19px; }
  .napo { gap: 28px; }
}


/* ── Ukázky: jeden živý e-shop přes šířku, bloky „Co jsme postavili" ── */
.demo--jeden { grid-template-columns: 1fr; }
.demo--jeden .demo__okno { height: 560px; }
.reseni { margin-top: 56px; }
.reseni__blok { margin-bottom: 56px; }
.reseni__blok:last-child { margin-bottom: 0; }
.reseni__cislo { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-bottom: 14px; }
.reseni__blok h3 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--black); margin-bottom: 10px; }
.reseni__blok p { font-size: 15.5px; line-height: 1.7; color: var(--gray-600); margin-bottom: 10px; }
.reseni__blok .ticks { margin-top: 8px; }
@media (max-width: 640px) { .reseni { margin-top: 36px; } .reseni__blok { margin-bottom: 32px; } .reseni__cislo { margin: 0 auto 12px; } .reseni__blok h3 { font-size: 20px; } }

/* Zarážky posuvníku střídavě nad a pod dráhou, aby se nemačkaly */
.kalk__slider { padding: 30px 0; }
.kalk__ticks { inset: 0; top: 0; height: auto; pointer-events: none; }
.kalk__ticks button { top: 50px; pointer-events: auto; }
.kalk__ticks button::before { top: -12px; height: 8px; }
.kalk__ticks button:first-child, .kalk__ticks button:last-child { transform: translateX(-50%); }
.kalk__ticks button:last-child { transform: translateX(-80%); }
@media (max-width: 760px) { .kalk__ticks button:nth-child(even) { display: block; } .kalk__ticks button { font-size: 10.5px; padding: 3px 2px; } }


/* Závěrečná výzva: nadpis a telefonní věta drží tvar na každé šířce */
.cta-split__text h2 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.8px; }
.cta-split__text p { font-size: clamp(14px, 1.2vw, 17px); }
.cta-split__tel { white-space: nowrap; font-size: clamp(12px, 1vw, 14px) !important; }
@media (max-width: 900px) { .cta-split__tel { white-space: normal; font-size: 14px !important; } }


/* ── Nápověda: hledání s animacemi ─────────────────────────────── */
.napo__hledani input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.napo__hledani input { padding-right: 150px; }
.napo__smazat { position: absolute; right: 104px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%;
                background: var(--red); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(196,30,58,.35);
                animation: napoPop .25s cubic-bezier(.34,1.56,.64,1) both; }
.napo__smazat[hidden] { display: none; }
.napo__smazat svg { position: static; transform: none; width: 14px; height: 14px; color: #fff; }
.napo__smazat:hover { background: var(--red-dark); }
@keyframes napoPop { from { transform: translateY(-50%) scale(.4); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }
.mapa__pocet.is-pulse { animation: napoPulse .35s ease; }
@keyframes napoPulse { 0% { transform: translateY(-50%) scale(1); } 40% { transform: translateY(-50%) scale(1.15); background: var(--red-light); color: var(--red); } 100% { transform: translateY(-50%) scale(1); } }

/* Rozcestník se při hledání složí a zmizí, místo skoku je to sjezd */
.napo__kategorie { transition: opacity .3s ease, transform .3s ease, max-height .4s cubic-bezier(.4,0,.2,1), margin .4s ease; max-height: 1200px; overflow: hidden; }
.napo__kategorie.is-skryty { opacity: 0; transform: translateY(-10px); max-height: 0; margin-bottom: 0; pointer-events: none; }

/* Výsledky přijedou zespodu, jeden po druhém */
.napo .faq__item.is-in { animation: napoIn .35s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes napoIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.napo.is-hledani .faq__item { border-left: 3px solid var(--red); padding-left: 14px; border-radius: 0 12px 12px 0; background: #fff; }
.napo.is-hledani .faq__item .faq__a { animation: fadeIn .4s ease both; }
.napo .napo__hlava { transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .napo__kategorie, .napo .faq__item.is-in, .napo__smazat, .mapa__pocet.is-pulse { animation: none !important; transition: none !important; } }
@media (max-width: 640px) { .napo__smazat { right: 12px; } .napo__hledani input { padding-right: 52px; } }

/* Hlavička karty živého e-shopu: obor se nezalamuje do dvou řádků */
.demo__meta span { font-size: 12.5px; white-space: nowrap; }
.demo__obrat b { font-size: 13.5px; }
.demo__obrat { padding: 6px 12px; }
@media (max-width: 640px) { .demo__meta span { white-space: normal; } }

/* Živé e-shopy pod sebou na plnou šířku: v polovičním sloupci se
   storefront přepnul do mobilní podoby a vypadal divně. */
.demo { grid-template-columns: 1fr; gap: 40px; }
.demo__okno { height: 820px; }
.demo--jeden .demo__okno { height: 820px; }
@media (max-width: 640px) { .demo { gap: 24px; } .demo__okno, .demo--jeden .demo__okno { height: 70vh; } }

/* Patička má tmavší šedou než sekce častých dotazů nad ní, ať se
   obě plochy neslijí do jedné. */
.footer { background: var(--gray-100); border-top: 1px solid var(--gray-200); }
.footer .footer-bottom { border-top-color: var(--gray-300); }