/* ═══════════════════════════════════════════
       DESIGN TOKENS
    ═══════════════════════════════════════════ */
    :root {
      --white:         #ffffff;
      --off-white:     #fafaf8;
      --primary:       #8cbf3a;
      --primary-dark:  #69a040;
      --primary-light: rgba(140,191,58,.12);
      --secondary:     #2B803E;
      --secondary-dk:  #1d5c2b;
      --gold:          #c9a227;
      --gold-light:    rgba(201,162,39,.14);
      --text:          #141414;
      --text-mid:      #3c3c3c;
      --text-muted:    #6b7280;
      --bg-tint:       #f4f9ec;
      --bg-dark:       #0e1f12;
      --bg-mid:        #1a3a22;
      --border:        #e0edd0;
      --border-dark:   #c7dba0;
      --radius-sm:     6px;
      --radius:        12px;
      --radius-lg:     20px;
      --shadow-sm:     0 2px 8px rgba(0,0,0,.07);
      --shadow-md:     0 8px 30px rgba(0,0,0,.10);
      --shadow-lg:     0 20px 60px rgba(0,0,0,.13);
      --t:             .28s cubic-bezier(.4,0,.2,1);
      --font-display:  'Fraunces', Georgia, serif;
      --font-body:     'Instrument Sans', system-ui, sans-serif;

      /* ── Fluid type scale (min@375px → max@1440px) ── */
      --text-xs:   clamp(.68rem,  .65rem + .16vw,  .78rem);
      --text-sm:   clamp(.8rem,   .76rem + .2vw,   .9rem);
      --text-base: clamp(.95rem,  .88rem + .3vw,   1.05rem);
      --text-md:   clamp(1.05rem, .95rem + .44vw,  1.2rem);
      --text-lg:   clamp(1.2rem,  1.05rem + .66vw, 1.45rem);
      --text-xl:   clamp(1.4rem,  1.1rem + 1.3vw,  1.9rem);
      --text-2xl:  clamp(1.75rem, 1.2rem + 2.3vw,  2.6rem);
      --text-3xl:  clamp(2.2rem,  1.3rem + 3.8vw,  3.5rem);
      --text-4xl:  clamp(2.8rem,  1.4rem + 5.8vw,  5rem);
      --text-hero: clamp(3.2rem,  1.2rem + 8.5vw,  6.5rem);
    }

    /* ═══════════════════════════════════════════
       RESET & BASE
    ═══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 100%; }
    body {
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.72;
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
      /* Improved rendering */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }

    /* ═══════════════════════════════════════════
       LAYOUT
    ═══════════════════════════════════════════ */
    .shell {
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 clamp(1.2rem, 5vw, 3rem);
    }
    .shell--wide {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(1.2rem, 5vw, 3rem);
    }

    /* ═══════════════════════════════════════════
       TYPOGRAPHY — HIERARCHY
    ═══════════════════════════════════════════ */
    h1, h2, h3, h4, h5 {
      font-family: var(--font-display);
      font-weight: 700;
      line-height: 1.06;
      letter-spacing: -.03em;
      font-variant-numeric: oldstyle-nums;
      /* Optical sizing for variable font */
      font-optical-sizing: auto;
    }
    /* Contextual weight adjustments */
    h1 { font-weight: 800; }
    h2 { font-weight: 700; letter-spacing: -.035em; }
    h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
    h4 { font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }

    /* Tighter tracking for very large display text */
    .display-tight { letter-spacing: -.055em; }

    /* The editorial italic accent — Fraunces italic is beautiful */
    em.accent {
      font-style: italic;
      font-weight: 300;
      color: var(--secondary);
    }

    p {
      font-size: var(--text-base);
      line-height: 1.78;
      /* Optimal measure */
      max-width: 72ch;
    }
    /* Narrow measure for pull quotes / captions */
    .measure-narrow { max-width: 45ch; }
    .measure-wide   { max-width: 90ch; }

    strong { font-weight: 700; color: var(--text); }

    /* Superscript / fraction styling */
    sup {
      font-size: .55em;
      vertical-align: super;
      font-feature-settings: 'sups' 1;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--secondary);
      margin-bottom: 1.1rem;
    }
    .eyebrow::before {
      content: '';
      display: block;
      width: 24px; height: 1.5px;
      background: var(--primary);
      border-radius: 2px;
      flex-shrink: 0;
    }
    .eyebrow--gold { color: var(--gold); }
    .eyebrow--gold::before { background: var(--gold); }
    .eyebrow--white { color: rgba(140,191,58,.75); }
    .eyebrow--white::before { background: var(--primary); }

    /* ═══════════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: .82rem 1.8rem;
      border-radius: var(--radius-sm);
      transition: var(--t);
      cursor: pointer;
      border: 1.5px solid transparent;
    }
    .btn-primary {
      background: var(--primary);
      color: var(--white);
      border-color: var(--primary);
    }
    .btn-primary:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(140,191,58,.38);
    }
    .btn-dark {
      background: var(--bg-dark);
      color: var(--white);
      border-color: var(--bg-dark);
    }
    .btn-dark:hover {
      background: var(--bg-mid);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0,0,0,.22);
    }
    .btn-outline {
      background: transparent;
      color: var(--secondary);
      border-color: var(--secondary);
    }
    .btn-outline:hover {
      background: var(--secondary);
      color: var(--white);
      transform: translateY(-2px);
    }
    .btn-ghost {
      background: transparent;
      color: var(--white);
      border-color: rgba(255,255,255,.45);
    }
    .btn-ghost:hover {
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.8);
      transform: translateY(-2px);
    }
    .btn i { font-size: .9em; }

    /* ═══════════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }
    .reveal-delay-5 { transition-delay: .5s; }

    /* ═══════════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════════ */
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 200;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      height: 80px;
      gap: 2rem;
    }
    .nav-brand {
      display: flex;
      align-items: center;
      gap: .65rem;
      flex-shrink: 0;
    }
    .nav-brand-logo {
      height: 68px;
      width: auto;
    }
    .nav-brand-text {
      font-family: var(--font-display);
      font-size: var(--text-md);
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.03em;
      line-height: 1.2;
    }
    .nav-brand-text span { display: block; color: var(--secondary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0;
      margin-left: auto;
    }
    .nav-links a {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 500;
      letter-spacing: .02em;
      padding: .4rem .75rem;
      border-radius: var(--radius-sm);
      color: var(--text-mid);
      transition: var(--t);
    }
    .nav-links a:hover { color: var(--secondary); background: var(--bg-tint); }
    .nav-cta { margin-left: 1rem; flex-shrink: 0; color: white !important;}
    .nav-cta-item { margin-left: .5rem; display: flex; align-items: center; }

    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: .3rem;
      flex-direction: column;
      gap: 5px;
      margin-left: auto;
    }
    .nav-toggle span {
      display: block;
      width: 22px; height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: var(--t);
    }

    /* ═══════════════════════════════════════════
       HERO — EDITORIAL SPLIT
    ═══════════════════════════════════════════ */
    .hero {
      min-height: calc(100vh - 80px);
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 0;
      position: relative;
      overflow: hidden;
      background: var(--white);
    }

    /* left column */
    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 6rem) clamp(1.5rem, 7vw, 5rem);
      position: relative;
      z-index: 2;
    }
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--primary-dark);
      background: var(--primary-light);
      border: 1px solid rgba(140,191,58,.3);
      padding: .32rem 1rem;
      border-radius: 100px;
      margin-bottom: 1.6rem;
    }
    .hero-tag::before {
      content: '';
      width: 7px; height: 7px;
      background: var(--primary);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(140,191,58,.5); }
      50%      { box-shadow: 0 0 0 6px rgba(140,191,58,0); }
    }
    .hero-h1 {
      font-size: var(--text-hero);
      line-height: 1.0;
      letter-spacing: -.05em;
      color: var(--text);
      margin-bottom: 1.5rem;
      max-width: 14ch;
      /* Optical size: Fraunces at large sizes looks best with these settings */
      font-optical-sizing: auto;
      font-variation-settings: 'opsz' 144, 'WONK' 0;
    }
    .hero-h1 em {
      font-style: italic;
      font-weight: 400;
      /* Fraunces italic at low weight is breathtaking at display scale */
      font-variation-settings: 'opsz' 144, 'WONK' 1;
      color: var(--secondary);
      position: relative;
    }
    .hero-h1 em::after {
      content: '';
      position: absolute;
      bottom: .04em;
      left: 0; right: 0;
      height: .06em;
      background: var(--primary);
      border-radius: 2px;
    }
    .hero-lead {
      font-size: var(--text-md);
      font-weight: 400;
      color: var(--text-muted);
      line-height: 1.75;
      max-width: 50ch;
      margin-bottom: 2.2rem;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
      align-items: center;
      margin-bottom: 2.8rem;
    }
    .hero-phone {
      display: flex;
      align-items: center;
      gap: .55rem;
      font-family: var(--font-body);
      font-size: var(--text-md);
      font-weight: 600;
      color: var(--text);
      letter-spacing: -.01em;
    }
    .hero-phone i { color: var(--primary-dark); font-size: .95rem; }

    .trust-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid var(--border);
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: .45rem;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--text-mid);
    }
    .trust-item i { color: var(--primary-dark); font-size: .8rem; }

    /* right column — dark panel */
    .hero-right {
      background: var(--bg-dark);
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 3rem 2.5rem;
      overflow: hidden;
    }
    .hero-right::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 340px; height: 340px;
      background: radial-gradient(circle, rgba(140,191,58,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-right::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -60px;
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(201,162,39,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
      margin-bottom: 2rem;
      position: relative;
      z-index: 2;
    }
    .stat-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      padding: 1.4rem 1.2rem;
      transition: var(--t);
    }
    .stat-card:hover {
      background: rgba(255,255,255,.09);
      border-color: rgba(140,191,58,.35);
      transform: translateY(-2px);
    }
    .stat-card-num {
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-weight: 800;
      letter-spacing: -.05em;
      color: var(--primary);
      line-height: 1;
      margin-bottom: .3rem;
      font-optical-sizing: auto;
      font-variant-numeric: tabular-nums;
    }
    .stat-card-num .unit { font-size: .55em; font-weight: 600; vertical-align: super; }
    .stat-card-label {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 500;
      color: rgba(255,255,255,.5);
      line-height: 1.4;
      letter-spacing: .03em;
    }
    .hero-certif {
      position: relative;
      z-index: 2;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      padding: 1.2rem 1.4rem;
    }
    .hero-certif-label {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.38);
      margin-bottom: .8rem;
    }
    .certif-badges {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }
    .certif-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .03em;
      color: rgba(255,255,255,.75);
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.14);
      padding: .28rem .75rem;
      border-radius: 100px;
    }
    .certif-badge i { color: var(--primary); font-size: .75rem; }

    /* ═══════════════════════════════════════════
       SECTION DIVIDER
    ═══════════════════════════════════════════ */
    .clip-top { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); margin-top: -4%; padding-top: 8%; }
    .clip-both { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

    /* ═══════════════════════════════════════════
       SECTION GENERIC
    ═══════════════════════════════════════════ */
    .sec { padding: clamp(4.5rem, 8vw, 8rem) 0; }
    .sec-light { background: var(--bg-tint); }
    .sec-dark {
      background: var(--bg-dark);
      color: var(--white);
    }
    .sec-mid {
      background: var(--bg-mid);
      color: var(--white);
    }
    .sec-header { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
    .sec-title {
      font-size: var(--text-3xl);
      color: inherit;
      margin-bottom: .85rem;
      letter-spacing: -.04em;
      line-height: 1.06;
    }
    .sec-lead {
      font-size: var(--text-md);
      font-weight: 400;
      color: var(--text-muted);
      max-width: 55ch;
      line-height: 1.78;
    }
    .sec-lead--white { color: rgba(255,255,255,.6); }

    /* section number watermark */
    .sec-num {
      font-family: var(--font-display);
      font-size: clamp(5rem, 10vw, 9rem);
      font-weight: 800;
      color: rgba(0,0,0,.04);
      line-height: 1;
      letter-spacing: -.08em;
      position: absolute;
      top: -2rem; right: 2rem;
      pointer-events: none;
      user-select: none;
      font-optical-sizing: auto;
      font-variation-settings: 'opsz' 144;
    }
    .sec-num--light { color: rgba(255,255,255,.04); }

    /* ═══════════════════════════════════════════
       O NÁS — SPLIT LAYOUT
    ═══════════════════════════════════════════ */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 6rem);
      align-items: center;
    }
    .about-visual {
      position: relative;
    }
    .about-img-wrap {
      border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, var(--secondary-dk) 0%, #0e2614 50%, #1a4028 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .about-img-icon {
      font-size: 5rem;
      color: rgba(255,255,255,.12);
    }
    /* decorative line frame */
    .about-img-wrap::after {
      content: '';
      position: absolute;
      inset: 16px;
      border: 1px solid rgba(140,191,58,.2);
      border-radius: calc(var(--radius-lg) - 4px);
      pointer-events: none;
    }
    .about-badge {
      position: absolute;
      bottom: -18px; right: -18px;
      background: var(--primary);
      color: var(--white);
      border-radius: var(--radius);
      padding: 1.1rem 1.4rem;
      box-shadow: var(--shadow-lg);
      text-align: center;
    }
    .about-badge-num {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.04em;
    }
    .about-badge-text {
      font-size: .78rem;
      font-weight: 600;
      opacity: .9;
      line-height: 1.3;
      margin-top: .15rem;
    }
    .about-text h2 { margin-bottom: 1.1rem; }
    .about-text p { font-size: var(--text-base); color: var(--text-mid); margin-bottom: 1rem; line-height: 1.8; max-width: 60ch; }
    .about-text p:last-of-type { margin-bottom: 1.6rem; }
    .about-pills {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-bottom: 1.8rem;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--secondary);
      background: var(--primary-light);
      border: 1px solid rgba(140,191,58,.25);
      padding: .3rem .85rem;
      border-radius: 100px;
    }
    .pill i { font-size: .75rem; }

    /* ═══════════════════════════════════════════
       HOW IT WORKS — NUMBERED STEPS
    ═══════════════════════════════════════════ */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
    .step {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      padding: 2rem 1.6rem;
      position: relative;
      overflow: hidden;
      transition: var(--t);
    }
    .step:hover {
      background: rgba(255,255,255,.09);
      border-color: rgba(140,191,58,.35);
      transform: translateY(-4px);
    }
    .step::before {
      content: attr(data-num);
      position: absolute;
      top: -0.6rem; right: .8rem;
      font-family: var(--font-display);
      font-size: 5.5rem;
      font-weight: 800;
      color: rgba(255,255,255,.04);
      line-height: 1;
      letter-spacing: -.06em;
    }
    .step-icon {
      width: 48px; height: 48px;
      background: rgba(140,191,58,.15);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.2rem;
    }
    .step-icon i { color: var(--primary); font-size: 1.2rem; }
    .step-num-badge {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .18em;
      color: rgba(255,255,255,.3);
      text-transform: uppercase;
      margin-bottom: .5rem;
    }
    .step h3 {
      font-size: var(--text-lg);
      font-weight: 600;
      letter-spacing: -.025em;
      color: var(--white);
      margin-bottom: .65rem;
    }
    .step p {
      font-size: var(--text-sm);
      color: rgba(255,255,255,.55);
      line-height: 1.7;
    }
    /* connector arrows */
    .steps-grid .step:not(:last-child)::after {
      content: '\f061';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      top: 50%; right: -1.1rem;
      transform: translateY(-50%);
      font-size: .85rem;
      color: rgba(140,191,58,.35);
      z-index: 10;
    }

    /* ═══════════════════════════════════════════
       NAŠE ČINNOST — SERVICE CARDS
    ═══════════════════════════════════════════ */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    .svc-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2rem 2rem 1.8rem;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: var(--t);
      position: relative;
      overflow: hidden;
    }
    .svc-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      height: 4px;
      width: 100%;
      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s ease;
    }
    .svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-dark); }
    .svc-card:hover::before { transform: scaleX(1); }
    .svc-icon {
      width: 52px; height: 52px;
      background: var(--primary-light);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.3rem;
    }
    .svc-icon i { font-size: 1.35rem; color: var(--primary-dark); }
    .svc-card h3 {
      font-size: var(--text-lg);
      font-weight: 600;
      letter-spacing: -.025em;
      color: var(--text);
      margin-bottom: .7rem;
    }
    .svc-card p { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 1.2rem; line-height: 1.72; }
    .svc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      margin-top: auto;
    }
    .svc-tag {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .22rem .65rem;
      border-radius: 100px;
      background: var(--primary-light);
      color: var(--secondary);
      border: 1px solid rgba(140,191,58,.2);
    }

    /* accepted items list */
    .accepts-section { margin-top: 3.5rem; }
    .accepts-section h3 {
      font-size: var(--text-xl);
      letter-spacing: -.03em;
      margin-bottom: 1.2rem;
    }
    .accepts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: .55rem;
    }
    .accept-item {
      display: flex;
      align-items: center;
      gap: .55rem;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--text-mid);
      padding: .5rem .8rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      transition: var(--t);
    }
    .accept-item:hover { border-color: var(--border-dark); background: var(--bg-tint); }
    .accept-item i { color: var(--primary-dark); font-size: .75rem; flex-shrink: 0; }

    /* ═══════════════════════════════════════════
       CENÍK — TABLE
    ═══════════════════════════════════════════ */
    .cenik-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    .cenik-table-wrap {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .cenik-table-title {
      background: rgba(140,191,58,.1);
      padding: .9rem 1.4rem;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--primary);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .cenik-table {
      width: 100%;
      border-collapse: collapse;
    }
    .cenik-table tr {
      border-bottom: 1px solid rgba(255,255,255,.06);
      transition: var(--t);
    }
    .cenik-table tr:last-child { border-bottom: none; }
    .cenik-table tr:hover { background: rgba(255,255,255,.04); }
    .cenik-table td {
      padding: .8rem 1.4rem;
      font-size: var(--text-sm);
      color: rgba(255,255,255,.7);
    }
    .cenik-table td:last-child {
      text-align: right;
      font-family: var(--font-display);
      font-weight: 600;
      letter-spacing: -.02em;
      color: var(--primary);
      font-variant-numeric: tabular-nums;
    }
    .cenik-note {
      display: flex;
      align-items: flex-start;
      gap: .7rem;
      background: var(--gold-light);
      border: 1px solid rgba(201,162,39,.22);
      border-radius: var(--radius-sm);
      padding: 1rem 1.2rem;
      margin-top: 1.8rem;
      font-size: var(--text-xs);
      line-height: 1.7;
      color: rgba(255,255,255,.65);
    }
    .cenik-note i { color: var(--gold); flex-shrink: 0; margin-top: .2rem; }

    /* ═══════════════════════════════════════════
       FOTOGALERIE
    ═══════════════════════════════════════════ */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 1rem;
    }
    .gallery-item {
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 4/3;
      cursor: pointer;
      position: relative;
      background: var(--bg-tint);
    }
    .gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .gallery-item:hover img { transform: scale(1.06); }
    .gallery-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(14,31,18,.7) 0%, transparent 50%);
      opacity: 0;
      transition: var(--t);
      display: flex;
      align-items: flex-end;
      padding: 1.2rem;
    }
    .gallery-item:hover .gallery-item-overlay { opacity: 1; }
    .gallery-item-caption {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--white);
    }
    /* placeholder gallery items */
    .gallery-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: .8rem;
      color: var(--text-muted);
      background: var(--bg-tint);
      border: 2px dashed var(--border-dark);
    }
    .gallery-placeholder i { font-size: 2rem; color: var(--border-dark); }
    .gallery-placeholder span { font-size: .8rem; }

    /* ═══════════════════════════════════════════
       POPTÁVKA — FORM
    ═══════════════════════════════════════════ */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: start;
    }
    .form-info h2 { margin-bottom: .9rem; }
    .form-info .sec-lead { margin-bottom: 2rem; }
    .form-feature {
      display: flex;
      align-items: flex-start;
      gap: .9rem;
      padding: .9rem 0;
      border-bottom: 1px solid var(--border);
    }
    .form-feature:first-of-type { border-top: 1px solid var(--border); }
    .form-feature-icon {
      width: 38px; height: 38px;
      background: var(--primary-light);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .form-feature-icon i { color: var(--primary-dark); font-size: .9rem; }
    .form-feature-text strong {
      display: block;
      font-size: var(--text-base);
      font-weight: 600;
      color: var(--text);
      margin-bottom: .15rem;
    }
    .form-feature-text span { font-size: var(--text-sm); color: var(--text-muted); }
    .form-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2.2rem;
      box-shadow: var(--shadow-sm);
    }
    .form-card h3 {
      font-size: var(--text-xl);
      letter-spacing: -.03em;
      margin-bottom: 1.4rem;
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: 1rem;
    }
    .form-group label {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-mid);
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--text);
      background: var(--off-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: .72rem 1rem;
      transition: var(--t);
      width: 100%;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--primary-dark);
      box-shadow: 0 0 0 3px rgba(140,191,58,.2);
    }
    .form-group textarea { resize: vertical; min-height: 110px; }
    .form-note { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem; }
    .form-note a { color: var(--secondary); text-decoration: underline; }

    /* ═══════════════════════════════════════════
       KLIENTELA / REFERENCE — light mode overrides
    ═══════════════════════════════════════════ */
    .sec-green-light {
      background: var(--bg-tint);
    }
    .sec-green-light .client-sector {
      background: var(--white);
      border-color: var(--border-dark);
    }
    .sec-green-light .client-sector:hover {
      background: #fff;
      border-color: var(--primary);
      box-shadow: var(--shadow-sm);
    }
    .sec-green-light .client-sector-name { color: var(--text); }
    .sec-green-light .client-sector-desc { color: var(--text-muted); }
    .sec-green-light .clients-brands { border-top-color: var(--border-dark); }
    .sec-green-light .clients-brands-label { color: var(--text-muted); }
    .sec-green-light .brand-pill {
      background: var(--white);
      border-color: var(--border-dark);
      color: var(--text-mid);
    }
    .sec-green-light .brand-pill:hover {
      background: var(--primary-light);
      border-color: var(--primary);
      color: var(--secondary);
    }
    .sec-green-light .sec-num { color: rgba(0,0,0,.04); }

    /* ═══════════════════════════════════════════
       KLIENTELA / REFERENCE
    ═══════════════════════════════════════════ */
    .clients-sectors {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
      margin-bottom: 3rem;
    }
    .client-sector {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      padding: 1.4rem 1.6rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      transition: var(--t);
    }
    .client-sector:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(140,191,58,.35);
      transform: translateY(-2px);
    }
    .client-sector-icon {
      width: 44px; height: 44px;
      background: rgba(140,191,58,.15);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .client-sector-icon i { color: var(--primary); font-size: 1.1rem; }
    .client-sector-name {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 700;
      color: rgba(255,255,255,.9);
      line-height: 1.4;
      margin-bottom: .3rem;
    }
    .client-sector-desc {
      font-size: var(--text-xs);
      color: rgba(255,255,255,.45);
      line-height: 1.5;
    }
    .clients-brands {
      border-top: 1px solid rgba(255,255,255,.1);
      padding-top: 2.5rem;
    }
    .clients-brands-label {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.35);
      margin-bottom: 1.2rem;
    }
    .clients-brands-row {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
    }
    .brand-pill {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 600;
      color: rgba(255,255,255,.7);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      padding: .42rem 1rem;
      border-radius: 100px;
      transition: var(--t);
    }
    .brand-pill:hover {
      background: rgba(255,255,255,.12);
      color: rgba(255,255,255,.95);
      border-color: rgba(140,191,58,.4);
    }
    .brand-pill i { color: var(--primary); font-size: .78rem; }

    /* ═══════════════════════════════════════════
       TÝM / KONTAKTNÍ OSOBY
    ═══════════════════════════════════════════ */
    .team-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 1.5rem;
      align-items: start;
    }
    .team-card {
      position: relative;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: var(--t);
      display: flex;
      flex-direction: column;
    }
    .team-card::before {
      content: '';
      display: block;
      height: 5px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
    }
    .team-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: var(--border-dark);
    }
    .team-card-body {
      padding: 1.8rem 1.6rem 1.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      flex: 1;
    }
    .team-card--primary .team-card-body { padding: 2.4rem 2rem 2rem; }
    .team-card--primary .team-photo { width: 120px; height: 120px; border-width: 4px; margin-bottom: 1.4rem; }
    .team-card--primary .team-photo-icon { font-size: 3.2rem; }
    .team-card--primary .team-name { font-size: var(--text-xl); }
    .team-card--primary .team-role { font-size: var(--text-xs); margin-bottom: 1.8rem; }
    .team-card--primary .team-phone { font-size: var(--text-base); padding: .72rem 1.4rem; }
    .team-photo {
      width: 90px; height: 90px;
      border-radius: 50%;
      background: var(--bg-tint);
      border: 3px solid var(--border-dark);
      margin-bottom: 1.1rem;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .team-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .team-photo-icon { font-size: 2.4rem; color: var(--primary); opacity: .35; }
    .team-name {
      font-family: var(--font-display);
      font-size: var(--text-md);
      font-weight: 700;
      letter-spacing: -.03em;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: .3rem;
    }
    .team-role {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--secondary);
      margin-bottom: 1.4rem;
    }
    .team-phone {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--white);
      background: var(--secondary);
      border-radius: var(--radius-sm);
      padding: .58rem 1.1rem;
      transition: var(--t);
      white-space: nowrap;
      width: 100%;
      justify-content: center;
    }
    .team-phone i { font-size: .8rem; }
    .team-phone:hover { background: var(--primary-dark); }

    /* ═══════════════════════════════════════════
       KONTAKT
    ═══════════════════════════════════════════ */
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .contact-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2rem 1.8rem;
      transition: var(--t);
    }
    .contact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .contact-card-icon {
      width: 48px; height: 48px;
      background: var(--primary-light);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.2rem;
    }
    .contact-card-icon i { color: var(--primary-dark); font-size: 1.2rem; }
    .contact-card h3 { font-size: var(--text-md); letter-spacing: -.02em; margin-bottom: .8rem; }
    .contact-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; }
    .contact-card a { color: var(--secondary); font-weight: 600; }
    .contact-card a:hover { text-decoration: underline; }
    .hours-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
    .hours-table tr td { font-size: var(--text-sm); color: var(--text-muted); padding: .2rem 0; }
    .hours-table tr td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-mid); }
    .hours-today td { color: var(--secondary) !important; }

    /* ═══════════════════════════════════════════
       FAQ
    ═══════════════════════════════════════════ */
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .faq-q {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      padding: 1.1rem 1.4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      font-family: var(--font-body);
      font-size: var(--text-base);
      font-weight: 600;
      color: var(--text);
      transition: var(--t);
    }
    .faq-q:hover { background: var(--bg-tint); }
    .faq-q.open { background: var(--primary-light); color: var(--secondary); }
    .faq-q i { flex-shrink: 0; color: var(--primary-dark); font-size: .85rem; transition: transform .25s; }
    .faq-q.open i { transform: rotate(45deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .35s ease;
      padding: 0 1.4rem;
    }
    .faq-a.open { max-height: 500px; padding: 0 1.4rem 1.2rem; }
    .faq-a p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.75; }

    /* ═══════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════ */
    .footer {
      background: var(--bg-dark);
      color: var(--white);
      padding: clamp(3rem, 6vw, 5rem) 0 0;
    }
    .footer-main {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 2.5rem;
      padding-bottom: 3rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .footer-brand img { height: 60px; margin-bottom: .8rem; filter: brightness(0) invert(1); opacity: .8; }
    .footer-brand p { font-size: var(--text-sm); color: rgba(255,255,255,.48); line-height: 1.75; max-width: 28ch; }
    .footer-col h4 {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.32);
      margin-bottom: 1rem;
    }
    .footer-col ul li { margin-bottom: .5rem; }
    .footer-col ul a {
      font-size: var(--text-sm);
      font-weight: 400;
      color: rgba(255,255,255,.55);
      transition: var(--t);
    }
    .footer-col ul a:hover { color: var(--primary); }
    .footer-social {
      display: flex;
      gap: .65rem;
      margin-top: 1rem;
    }
    .footer-social a {
      width: 36px; height: 36px;
      background: rgba(255,255,255,.08);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,.6);
      font-size: .9rem;
      transition: var(--t);
    }
    .footer-social a:hover { background: var(--primary); color: var(--white); }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1.4rem 0;
      font-size: var(--text-xs);
      letter-spacing: .02em;
      color: rgba(255,255,255,.28);
    }
    .footer-bottom a { color: rgba(255,255,255,.4); }
    .footer-bottom a:hover { color: var(--primary); }

    /* ═══════════════════════════════════════════
       MOBILE
    ═══════════════════════════════════════════ */
    @media (max-width: 1140px) {
      .nav-links, .nav-cta-item { display: none; }
      .nav-toggle { display: flex; }
      .nav-open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0; right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--border);
        padding: 1.2rem clamp(1.2rem, 5vw, 3rem);
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
        z-index: 199;
      }
      .nav-open .nav-cta-item {
        display: flex;
        padding: .4rem 0 .8rem;
      }
      .nav-open .nav-cta-item .nav-cta {
        width: 100%;
        justify-content: center;
        margin: 0;
      }
    }
    @media (max-width: 1100px) {
      .hero { grid-template-columns: 1fr; }
      .hero-right { display: none; }
      .steps-grid { grid-template-columns: 1fr 1fr; }
      .steps-grid .step::after { display: none; }
      .footer-main { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 860px) {
      .about-grid { grid-template-columns: 1fr; }
      .about-visual { order: -1; }
      .services-grid { grid-template-columns: 1fr; }
      .cenik-grid { grid-template-columns: 1fr; }
      .form-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .team-grid { grid-template-columns: 1fr 1fr; }
      .team-card--primary { grid-column: span 2; }
      .clients-sectors { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 700px) {
      .steps-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: 1fr 1fr; }
      .footer-main { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; align-items: flex-start; }
      .team-grid { grid-template-columns: 1fr 1fr; }
      .clients-sectors { grid-template-columns: 1fr; }
    }