/* ==========================================================
   strucnjaci.rs — Design System 2026 v2 (Soft Structuralism)
   Refactor: Emil Kowalski + Impeccable + Taste-Skill + Redesign
   - Geist-first font stack with robust system fallback
   - Single accent (warm gold), desaturated category hues
   - Custom cubic-bezier easing tokens (no Material default)
   - Diffusion shadows tinted to background hue
   - Inline-SVG icons replace emoji ::before content
   - :active scale, @media (hover:hover) gates, reduced-motion
   - Staggered grid reveals, focus-visible rings
   ========================================================== */

:root {
    /* --- Typography stack (Inter banned, Geist preferred, system fallback) --- */
    --font-display: 'Geist', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-body:    'Geist', system-ui, -apple-system, 'SF Pro Text', 'Segoe UI', sans-serif;
    --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Consolas, Monaco, monospace;

    /* --- Brand: Soft Structuralism — warmer navy + single desat gold --- */
    --primary:        #0e1a3a;
    --primary-700:    #182b5e;
    --primary-500:    #2a4585;
    --primary-100:    #e9eff7;
    --primary-50:     #f4f6fb;
    --accent:         #c79a3e;
    --accent-soft:    #f5edd6;
    --accent-dark:    #a07e2f;
    /* Legacy aliases for old PHP references */
    --gold:           var(--accent);
    --gold-soft:      var(--accent-soft);

    /* --- Semantic --- */
    --success:        #1f9e6f;
    --success-soft:   #d8efe4;
    --warning:        #c98b1c;
    --warning-soft:   #fbeacb;
    --danger:         #c93838;
    --danger-soft:    #fadbdb;
    --ai:             #6740c7;
    --ai-soft:        #ebe3f9;

    /* --- Neutrals: warm-tinted (away from cool blue-gray cliché) --- */
    --ink:            #0d1117;
    --ink-2:          #1c2330;
    --ink-3:          #2e3845;
    --ink-1:          var(--ink);
    --muted:          #5f6b7d;
    --muted-2:        #8a96a8;
    --line:           #e7e8ec;
    --line-2:         #d4d7df;
    --bg:             #f8f8f6;     /* warm bone, replaces cool #f5f7fb */
    --bg-2:           #fcfcfb;
    --panel:          #ffffff;

    /* --- Category hues: desaturated for less rainbow chaos --- */
    --lekari:         #2d8a6a;
    --apoteke:        #b03838;
    --advokati:       var(--accent-dark);
    --inzenjeri:      #c97a1c;
    --zanatlije:      #6c7480;
    --crkve:          #8c6020;
    --hoteli:         #1d6da6;
    --restorani:      #c0531c;

    /* --- Easing tokens (Emil/Taste — replaces Material .4,0,.2,1) --- */
    --ease-out:       cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);
    --ease-soft:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap:      cubic-bezier(0.32, 0.72, 0, 1);

    /* --- Diffusion shadows: tinted to bg, ultra-soft --- */
    --shadow-xs:      0 1px 2px rgba(13, 17, 23, .04);
    --shadow-sm:      0 1px 2px rgba(13, 17, 23, .04), 0 1px 3px rgba(13, 17, 23, .03);
    --shadow-md:      0 4px 16px -4px rgba(13, 17, 23, .07), 0 2px 6px rgba(13, 17, 23, .04);
    --shadow-lg:      0 20px 40px -16px rgba(13, 17, 23, .12), 0 8px 16px -8px rgba(13, 17, 23, .06);
    --shadow-card:    0 1px 2px rgba(13, 17, 23, .04), 0 4px 12px -2px rgba(13, 17, 23, .03);
    --shadow-focus:   0 0 0 3px rgba(42, 69, 133, .18);

    /* --- Radius hierarchy (tighter inner, softer outer) --- */
    --r-xs:           4px;
    --r-sm:           6px;
    --r-md:           8px;
    --r-lg:           12px;
    --r-xl:           18px;
    --r-2xl:          24px;
    --r-full:         9999px;

    /* --- Spacing --- */
    --space-1:        4px;
    --space-2:        8px;
    --space-3:        12px;
    --space-4:        16px;
    --space-5:        20px;
    --space-6:        24px;
    --space-7:        32px;
    --space-8:        32px;
    --space-10:       40px;
    --space-12:       48px;
    --space-16:       64px;
    --space-20:       80px;
    --space-24:       96px;

    /* --- Inline SVG icon data URIs (replace emojis) --- */
    --icon-pin: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f6b7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='3'/></svg>");
    --icon-phone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c2330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
    --icon-mail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c2330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
    --icon-globe: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c2330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
    --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    --icon-spark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v6m0 8v6m10-10h-6M8 12H2m15.07-7.07-4.24 4.24M9.17 14.83l-4.24 4.24m0-14.14 4.24 4.24m5.66 5.66 4.24 4.24'/></svg>");
    --icon-clinic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c2330' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16'/><line x1='3' y1='21' x2='21' y2='21'/><line x1='12' y1='8' x2='12' y2='14'/><line x1='9' y1='11' x2='15' y2='11'/></svg>");
}

/* ==================== Base ==================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-100); color: var(--primary); }
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--r-sm);
}

a { color: var(--primary-500); text-decoration: none; transition: color .15s var(--ease-out); }
a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

img { max-width: 100%; height: auto; }
button { font-family: inherit; }

/* ==================== Top Nav ==================== */

.topnav {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%);
    color: #fff;
    padding: 0;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topnav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--space-2) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    flex-wrap: wrap;
}
.topnav-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.015em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.topnav-brand .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(199, 154, 62, .15);
}
.topnav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.topnav-links a {
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
    white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
    .topnav-links a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
}
.topnav-links a.cta {
    background: var(--accent);
    color: var(--primary);
    font-weight: 600;
    letter-spacing: -.005em;
    transition: background-color .15s var(--ease-out), transform .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .topnav-links a.cta:hover { background: #d4ab51; color: var(--primary); }
}
.topnav-links a.cta:active { transform: scale(.97); }
.topnav-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.18);
    margin: 0 4px;
}

/* ==================== Hero ==================== */

.hero {
    background:
        radial-gradient(ellipse at top right, rgba(199,154,62,.16) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(42,69,133,.22) 0%, transparent 50%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 50%, #1a2f64 100%);
    color: #fff;
    padding: var(--space-6) var(--space-5);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::after {
    /* Subtle film-grain overlay for depth (taste-skill: anti-flat) */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
    opacity: .035;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.hero h1 .accent { color: var(--accent); }
.hero .tag {
    font-size: clamp(.88rem, 1vw, 1rem);
    opacity: 0.82;
    margin: 0 auto var(--space-4);
    max-width: 640px;
    text-wrap: pretty;
}

/* Hero eyebrow */
.hero-eyebrow,
.hero .eyebrow,
.eyebrow {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .72;
    margin-bottom: var(--space-2);
    color: var(--accent);
}

/* Hero search action */
.hero-action {
    display: flex;
    max-width: 580px;
    margin: var(--space-4) auto var(--space-2);
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.28), 0 4px 12px -4px rgba(0,0,0,.16);
    overflow: hidden;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.hero-action:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 20px 48px -12px rgba(0,0,0,.36), 0 6px 16px -4px rgba(0,0,0,.18);
}
.hero-action input[type="text"] {
    flex: 1;
    border: 0;
    padding: 16px 18px;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
    color: var(--primary);
    outline: none;
}
.hero-action input::placeholder { color: #94a3b8; }
.hero-action button {
    border: 0;
    background: var(--accent);
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0 24px;
    cursor: pointer;
    line-height: 1;
    transition: background-color .15s var(--ease-out), transform .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .hero-action button:hover { background: #d4ab51; }
}
.hero-action button:active { transform: scale(.97); }
.hero-action-hint {
    text-align: center;
    font-size: .8rem;
    opacity: .72;
    margin: 0 0 var(--space-3);
}
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hero-stats {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-3);
}
.hero-stat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r-md);
    padding: var(--space-2) var(--space-3);
    min-width: 96px;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hero-stat .num {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.hero-stat .lbl {
    display: block;
    font-size: .65rem;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
}

/* ==================== Provider banner ==================== */

.provider-banner {
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
    padding: 10px 16px;
}
.provider-banner a {
    color: var(--primary-500);
    text-decoration: none;
    margin-left: 4px;
    font-weight: 500;
}
.provider-banner a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ==================== Hub Cards ==================== */

.hub-bar {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
}
.hub-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.hub-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent, var(--primary));
    transition: width .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .hub-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        text-decoration: none;
        border-color: var(--line-2);
    }
    .hub-card:hover::before { width: 6px; }
}
.hub-card:active { transform: scale(.99); transition-duration: 80ms; }

.hub-icon {
    font-size: 1.9rem;
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft, var(--primary-100));
    border-radius: var(--r-md);
    color: var(--accent, var(--primary));
}
.hub-text strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: var(--space-1);
    letter-spacing: -.01em;
}
.hub-text small {
    display: block;
    font-size: .82rem;
    color: var(--muted);
}
.hub-lekari    { --accent: var(--lekari);    --accent-soft: var(--success-soft); }
.hub-apoteke   { --accent: var(--apoteke);   --accent-soft: #f3dada; }
.hub-advokati  { --accent: var(--advokati);  --accent-soft: var(--accent-soft); }
.hub-inzenjeri { --accent: var(--inzenjeri); --accent-soft: var(--warning-soft); }
.hub-zanatlije { --accent: var(--zanatlije); --accent-soft: #e5e7eb; }
.hub-crkve     { --accent: var(--crkve);     --accent-soft: #f0e6d2; }
.hub-hoteli    { --accent: var(--hoteli);    --accent-soft: #cfe2f0; }
.hub-restorani { --accent: var(--restorani); --accent-soft: #fbdbc6; }

/* ==================== Pills Section ==================== */

.pills-section {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: var(--space-5);
}
.pills-section-inner {
    max-width: 1320px;
    margin: 0 auto;
}
.pills-section h3 {
    margin: 0 0 var(--space-3);
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-display);
}
.pills-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.pills-row:last-child { margin-bottom: 0; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    color: var(--ink-2);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .pill:hover { background: var(--primary-100); border-color: var(--primary-500); color: var(--primary); text-decoration: none; }
}
.pill:active { transform: scale(.97); }
.pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.pill .ct {
    font-size: .76rem;
    opacity: .72;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.pill.active .ct { opacity: .9; }
@media (hover: hover) and (pointer: fine) {
    .pills-lekari .pill:hover, .pills-lekari .pill.active { background: var(--lekari); color: #fff; border-color: var(--lekari); }
    .pills-apoteke .pill:hover, .pills-apoteke .pill.active { background: var(--apoteke); color: #fff; border-color: var(--apoteke); }
    .pills-advokati .pill:hover, .pills-advokati .pill.active { background: var(--advokati); color: #fff; border-color: var(--advokati); }
    .pills-inzenjeri .pill:hover, .pills-inzenjeri .pill.active { background: var(--inzenjeri); color: #fff; border-color: var(--inzenjeri); }
    .pills-zanatlije .pill:hover, .pills-zanatlije .pill.active { background: var(--zanatlije); color: #fff; border-color: var(--zanatlije); }
    .pills-crkve .pill:hover, .pills-crkve .pill.active { background: var(--crkve); color: #fff; border-color: var(--crkve); }
    .pills-hoteli .pill:hover, .pills-hoteli .pill.active { background: var(--hoteli); color: #fff; border-color: var(--hoteli); }
    .pills-restorani .pill:hover, .pills-restorani .pill.active { background: var(--restorani); color: #fff; border-color: var(--restorani); }
}
.pills-lekari .pill.active    { background: var(--lekari);    color: #fff; border-color: var(--lekari); }
.pills-apoteke .pill.active   { background: var(--apoteke);   color: #fff; border-color: var(--apoteke); }
.pills-advokati .pill.active  { background: var(--advokati);  color: #fff; border-color: var(--advokati); }
.pills-inzenjeri .pill.active { background: var(--inzenjeri); color: #fff; border-color: var(--inzenjeri); }
.pills-zanatlije .pill.active { background: var(--zanatlije); color: #fff; border-color: var(--zanatlije); }
.pills-crkve .pill.active     { background: var(--crkve);     color: #fff; border-color: var(--crkve); }
.pills-hoteli .pill.active    { background: var(--hoteli);    color: #fff; border-color: var(--hoteli); }
.pills-restorani .pill.active { background: var(--restorani); color: #fff; border-color: var(--restorani); }

/* ==================== Filter Bar ==================== */

.filter-bar {
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: var(--space-5);
}
.filter-bar-inner {
    max-width: 1320px;
    margin: 0 auto;
}
.filter-bar form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}
.filter-bar label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 180px;
}
.filter-bar label > span {
    font-size: .76rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-display);
}
.filter-bar input, .filter-bar select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: .98rem;
    background: var(--panel);
    color: var(--ink);
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
    font-family: inherit;
}
.filter-bar input:focus, .filter-bar select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-focus);
}

/* ==================== Buttons ==================== */

.btn {
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--r-md);
    font-size: .98rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out), box-shadow .15s var(--ease-out);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    letter-spacing: -.005em;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(13,17,23,.06); }
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { background: var(--primary-700); box-shadow: 0 4px 12px -2px rgba(13,17,23,.16); }
}
.btn-primary:active { transform: scale(.97); }
.btn-gold { background: var(--accent); color: var(--primary); box-shadow: 0 1px 2px rgba(199,154,62,.18); }
@media (hover: hover) and (pointer: fine) {
    .btn-gold:hover { background: #d4ab51; box-shadow: 0 4px 12px -2px rgba(199,154,62,.32); }
}
.btn-gold:active { transform: scale(.97); }

/* ==================== Results Header ==================== */

.results-header {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
.results-count {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--primary);
    font-size: 1.05rem;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.results-meta { font-size: .88rem; color: var(--muted); }

/* ==================== Cards Grid ==================== */

.results-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--space-5);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--space-4);
}

/* Stagger animation for grids (Emil/Taste) */
.results-grid > .card,
.cards > .company-card {
    opacity: 0;
    transform: translateY(8px);
    animation: cardEnter 420ms var(--ease-soft) forwards;
}
.results-grid > .card:nth-child(1),   .cards > .company-card:nth-child(1)  { animation-delay: 0ms; }
.results-grid > .card:nth-child(2),   .cards > .company-card:nth-child(2)  { animation-delay: 40ms; }
.results-grid > .card:nth-child(3),   .cards > .company-card:nth-child(3)  { animation-delay: 80ms; }
.results-grid > .card:nth-child(4),   .cards > .company-card:nth-child(4)  { animation-delay: 120ms; }
.results-grid > .card:nth-child(5),   .cards > .company-card:nth-child(5)  { animation-delay: 150ms; }
.results-grid > .card:nth-child(6),   .cards > .company-card:nth-child(6)  { animation-delay: 175ms; }
.results-grid > .card:nth-child(n+7), .cards > .company-card:nth-child(n+7){ animation-delay: 200ms; }
@keyframes cardEnter {
    to { opacity: 1; transform: translateY(0); }
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
    box-shadow: var(--shadow-card);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--line-2);
    }
}
.card-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.card-name a { color: inherit; text-decoration: none; transition: color .15s var(--ease-out); }
.card-name a:hover { color: var(--primary); text-decoration: none; }
.card-title { font-size: .88rem; color: var(--muted); font-style: italic; }
.card-spec {
    display: inline-block;
    align-self: flex-start;
    padding: 2px var(--space-2);
    border-radius: var(--r-xs);
    font-size: .76rem;
    font-weight: 600;
    background: var(--primary-100);
    color: var(--primary);
    letter-spacing: .01em;
}
.card-city {
    color: var(--muted);
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.card-city::before {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    background-image: var(--icon-pin);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.card-meta-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.card-phone, .card-email, .card-web {
    font-size: .85rem;
    color: var(--ink-2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: color .15s var(--ease-out);
}
.card-phone::before {
    content: ""; display: inline-block; width: 12px; height: 12px;
    background-image: var(--icon-phone);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
}
.card-email::before {
    content: ""; display: inline-block; width: 12px; height: 12px;
    background-image: var(--icon-mail);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
}
.card-web::before {
    content: ""; display: inline-block; width: 12px; height: 12px;
    background-image: var(--icon-globe);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
}
.card-phone:hover, .card-email:hover, .card-web:hover { color: var(--primary); }
.card-lic { font-size: .7rem; color: var(--muted-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.card-areas {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.5;
    padding: var(--space-1) 0;
    border-left: 2px solid var(--lekari, var(--primary));
    padding-left: var(--space-3);
    margin: var(--space-1) 0;
}
.card-workplace {
    font-size: .88rem;
    color: var(--primary);
    font-weight: 600;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.card-workplace::before {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    background-image: var(--icon-clinic);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    opacity: .85;
}
.card-address {
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.45;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.card-address::before {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    background-image: var(--icon-pin);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Section wrappers — constrain heading + grid together (lekari.php clinic-section bug fix) */
.clinic-section,
.results-section {
    max-width: 1320px;
    margin: 0 auto var(--space-6);
    padding: 0 var(--space-5);
}
.clinic-section > h3,
.results-section > h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.015em;
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}
.clinic-section .results-grid,
.results-section .results-grid {
    max-width: none;
    margin: 0;
    padding: 0;
}
.card-bio {
    font-size: .82rem;
    color: var(--ink-2);
    line-height: 1.55;
    font-style: italic;
    opacity: .88;
    text-wrap: pretty;
}
.card-footer {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

/* ==================== Badges ==================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--r-xs);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-family: var(--font-display);
}
.badge-verified { background: var(--success-soft); color: #066b4e; }
.badge-verified::before {
    content: ""; display: inline-block; width: 10px; height: 10px;
    background-image: var(--icon-check);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
}
.badge-gold { background: var(--accent-soft); color: #7d5e1a; }
.badge-info { background: var(--primary-100); color: var(--primary); }
.badge-hotel { background: #d5e6f1; color: #1e4f73; }

/* ==================== Social icons ==================== */

.social-row {
    display: flex;
    gap: 6px;
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
.social-icon {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
    color: #fff;
}
@media (hover: hover) and (pointer: fine) {
    .social-icon:hover { transform: scale(1.1); text-decoration: none; box-shadow: 0 4px 10px -2px rgba(0,0,0,.18); }
}
.social-icon:active { transform: scale(.95); }
.social-facebook  { background: #1877f2; }
.social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-linkedin  { background: #0a66c2; }
.social-twitter   { background: #0d0d0d; }
.social-youtube   { background: #ee2727; }
.social-tiktok    { background: #0d0d0d; }
.social-whatsapp  { background: #1ebe5a; }
.social-viber     { background: #6e57e0; }
.social-telegram  { background: #229ed9; }

/* ==================== Pagination ==================== */

.pager {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--space-5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.pager .pager-info {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: .9rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pager .pager-info strong { color: var(--ink); font-weight: 600; }
.pager .pager-pages {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.pager .pager-pages a, .pager .pager-pages span {
    min-width: 38px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink-2);
    font-size: .9rem;
    text-align: center;
    transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out);
    display: inline-block;
    font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
    .pager .pager-pages a:hover { background: var(--primary-100); border-color: var(--primary-500); text-decoration: none; }
}
.pager .pager-pages a:active { transform: scale(.96); }
.pager .pager-pages .current {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 600;
}
.pager .pager-pages .dots {
    border: 0;
    background: transparent;
    color: var(--muted);
}

/* ==================== Empty State ==================== */

.empty-state {
    max-width: 600px;
    margin: var(--space-16) auto;
    text-align: center;
    padding: var(--space-8);
}
.empty-state h3 {
    font-family: var(--font-display);
    color: var(--ink-2);
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.015em;
}
.empty-state p { color: var(--muted); text-wrap: pretty; }

/* ==================== Trust footer ==================== */

.trust-footer {
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    padding: var(--space-5);
    color: var(--muted);
    font-size: .82rem;
    text-align: center;
}
.trust-footer strong { color: var(--ink-2); font-weight: 600; }

/* ==================== App Header (legacy) ==================== */

.app-header {
    background:
        radial-gradient(ellipse at top right, rgba(199,154,62,.16) 0%, transparent 50%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%);
    color: #fff;
    padding: var(--space-12) var(--space-5);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.app-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.app-header h1 {
    font-family: var(--font-display);
    margin: var(--space-1) 0 0;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    text-wrap: balance;
}
.app-header .eyebrow {
    margin: 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--accent);
    font-weight: 500;
}
.app-header .lede {
    margin: var(--space-3) 0 0;
    color: rgba(255,255,255,.85);
    max-width: 620px;
    line-height: 1.55;
    text-wrap: pretty;
}
.header-link {
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,.18);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s var(--ease-out), transform .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .header-link:hover { background: rgba(255,255,255,.18); text-decoration: none; }
}
.header-link:active { transform: scale(.97); }

/* ==================== App Layout (legacy sidebars) ==================== */

.app-layout {
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    gap: var(--space-5);
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--space-5);
}
.app-layout.no-sidebar {
    grid-template-columns: 1fr;
    max-width: 1200px;
}
@media (max-width: 1200px) {
    .app-layout { grid-template-columns: 1fr; padding: var(--space-3); }
    .ad-slot { display: none; }
}
main { min-width: 0; }
.ad-slot { display: flex; flex-direction: column; gap: var(--space-3); align-self: start; }
.ad-slot:empty { display: none; }
.ad-placeholder {
    background: var(--panel);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-md);
    padding: var(--space-5);
    text-align: center;
    color: var(--muted-2);
    font-size: .78rem;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==================== Stats row (new + legacy) ==================== */

.stats-row,
.stats {
    background: var(--panel);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-3);
    border: 1px solid var(--line);
}
.stat-item,
.stats article {
    text-align: center;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .stat-item:hover,
    .stats article:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
}
.stat-item .stat-num,
.stats article strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
}
.stat-item .stat-lbl,
.stats article span {
    display: block;
    margin-top: var(--space-2);
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
}
.stat-item.stat-ai .stat-num { color: var(--ai); }
.stat-item.stat-persons .stat-num { color: var(--success); }

/* ==================== Search Form (legacy) ==================== */

.search-form {
    background: var(--panel);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    align-items: end;
}
.search-form .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.search-form .field label {
    font-size: .76rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--font-display);
}
.search-form input, .search-form select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: .95rem;
    font-family: inherit;
    background: var(--panel);
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.search-form input:focus, .search-form select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-focus);
}
.search-form .check-group {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.search-form .check-group label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    font-size: .88rem;
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.search-form button[type=submit] {
    padding: var(--space-3) var(--space-6);
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: var(--r-md);
    font-size: .98rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-display);
    letter-spacing: -.005em;
    transition: background-color .15s var(--ease-out), transform .12s var(--ease-out), box-shadow .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .search-form button[type=submit]:hover { background: var(--primary-700); box-shadow: 0 4px 12px -2px rgba(13,17,23,.16); }
}
.search-form button[type=submit]:active { transform: scale(.97); }

/* ==================== Firm Card (legacy list) ==================== */

.firm-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-card);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .firm-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--line-2);
    }
}
.firm-card.enriched {
    border-left: 4px solid var(--ai);
    background: linear-gradient(to right, var(--ai-soft), var(--panel) 12%);
}
.firm-card h2 {
    font-family: var(--font-display);
    margin: 0 0 var(--space-2);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -.015em;
}
.firm-card h2 a { color: var(--ink); text-decoration: none; transition: color .15s var(--ease-out); }
.firm-card h2 a:hover { color: var(--primary); text-decoration: none; }
.firm-card .industry {
    font-size: .88rem;
    color: var(--muted);
    margin: 0 0 var(--space-3);
}
.firm-card .meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.firm-card .meta-tags .tag {
    font-size: .76rem;
    padding: 2px var(--space-2);
    background: var(--bg);
    border-radius: var(--r-xs);
    color: var(--ink-2);
    border: 1px solid var(--line);
}
.firm-card .contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: .88rem;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    align-items: center;
}
.firm-card .contact-row a { color: var(--primary); text-decoration: none; transition: color .15s var(--ease-out); }
.firm-card .contact-row a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ==================== Detail page ==================== */

.detail {
    background: var(--panel);
    border-radius: var(--r-lg);
    padding: var(--space-8);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
}
.detail h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    letter-spacing: -.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.detail .industry { color: var(--muted); margin-bottom: var(--space-5); }
.back-link a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: color .15s var(--ease-out), transform .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .back-link a:hover { text-decoration: underline; text-underline-offset: 2px; transform: translateX(-2px); }
}

/* Legacy pager wrapper */
.legacy-pager {
    background: var(--panel);
    border-radius: var(--r-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* ==================== Search panel (legacy) ==================== */

.search-panel {
    background: var(--panel);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    align-items: end;
}
.search-panel label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: .82rem;
    color: var(--muted);
    font-weight: 500;
}
.search-panel label span { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-display); font-weight: 600; }
.search-panel input[type="text"],
.search-panel input[type="search"],
.search-panel input:not([type]),
.search-panel select {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: .92rem;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.search-panel input:focus,
.search-panel select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}
.search-panel label.check {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-2);
    padding: 9px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .search-panel label.check:hover { background: var(--primary-50); border-color: var(--primary-100); }
}
.search-panel label.check input { margin: 0; }
.search-panel button {
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    font-family: var(--font-display);
    letter-spacing: -.005em;
    transition: background-color .15s var(--ease-out), transform .12s var(--ease-out), box-shadow .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .search-panel button:hover { background: var(--primary-700); box-shadow: 0 4px 12px -2px rgba(13,17,23,.16); }
}
.search-panel button:active { transform: scale(.97); }

/* Result head (legacy) */
.result-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    padding: 0 var(--space-1);
}
.result-head h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.02em;
}
.result-head p {
    font-size: .82rem;
    color: var(--muted);
    margin: 0;
}

/* ==================== Cards (legacy company-card grid) ==================== */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    align-items: start;
}
.company-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    min-width: 0;
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .company-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--line-2);
    }
}
.company-card.enriched { border-left: 3px solid var(--ai, #6740c7); }

.company-card .card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.company-card h3 {
    font-family: var(--font-display);
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -.01em;
}
.company-card h3 a { color: inherit; text-decoration: none; transition: color .15s var(--ease-out); }
.company-card h3 a:hover { color: var(--primary); }
.company-card .industry {
    font-size: .82rem;
    color: var(--muted);
    margin: 0;
}
.company-card .address {
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.45;
}
.company-card .description {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.55;
    font-style: italic;
    margin: 0;
    text-wrap: pretty;
}
.company-card .contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: .85rem;
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.company-card .contacts .phones,
.company-card .contacts .emails,
.company-card .contacts .sites {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
}
.company-card .contacts a {
    color: var(--ink-2);
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    transition: color .15s var(--ease-out);
}
.company-card .contacts a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.company-card .tags,
.company-card .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--space-1);
}
.company-card .tags span,
.company-card .badges span {
    font-size: .68rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--muted);
    border: 1px solid var(--line);
    font-weight: 500;
}
.company-card .badge-ai {
    background: linear-gradient(135deg, var(--ai-soft), #d8c9f3);
    color: #4a2eaa;
    border-color: #c4b5fd;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.company-card .b2b { background: var(--primary-100); color: var(--primary); border-color: var(--primary-100); }
.company-card .b2c { background: var(--warning-soft); color: #7a4f10; border-color: #f0d99a; }
.company-card .badge-ai::before {
    content: ""; display: inline-block; width: 10px; height: 10px;
    background-image: var(--icon-spark);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
}

.company-card .card-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.company-card .card-actions a {
    font-size: .8rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s var(--ease-out);
}
.company-card .card-actions a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ==================== Detail view (legacy) ==================== */

.detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}
.detail-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.detail-head .industry { color: var(--muted); margin: var(--space-1) 0 0; }
.detail-head .year { color: var(--accent-dark); font-weight: 500; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-badges span {
    font-size: .72rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--muted);
    border: 1px solid var(--line);
    font-weight: 500;
}

.detail-section { margin-bottom: var(--space-6); }
.detail-section h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
    letter-spacing: -.01em;
}

.kv { display: grid; gap: var(--space-2); margin: 0; }
.kv > div { display: grid; grid-template-columns: 170px 1fr; gap: var(--space-4); align-items: start; }
.kv dt {
    font-size: .76rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
    font-family: var(--font-display);
}
.kv dd {
    margin: 0;
    font-size: .92rem;
    color: var(--ink-2);
    line-height: 1.55;
}
.kv dd a { color: var(--primary); text-decoration: none; transition: color .15s var(--ease-out); }
.kv dd a:hover { text-decoration: underline; text-underline-offset: 2px; }

.persons-detail { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.persons-detail li {
    padding: var(--space-3);
    background: var(--bg-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    font-size: .9rem;
    line-height: 1.5;
}
.persons-detail li strong { color: var(--ink); font-weight: 600; }
.persons-detail li em { color: var(--muted); font-style: normal; }

.detail-section section { margin-bottom: var(--space-4); }
.detail-section section h4 {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 var(--space-2);
}
.detail-section section p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.6; }

/* ==================== Claim form ==================== */

.claim-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.claim-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: .82rem;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-family: var(--font-display);
}
.claim-form label.full { grid-column: 1 / -1; }
.claim-form input, .claim-form textarea {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: .92rem;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.claim-form input:focus, .claim-form textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-focus);
}
.claim-form button {
    grid-column: 1 / -1;
    padding: 11px 22px;
    background: var(--accent);
    color: var(--primary);
    border: none;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: -.005em;
    cursor: pointer;
    text-transform: none;
    font-size: .95rem;
    transition: background-color .15s var(--ease-out), transform .12s var(--ease-out), box-shadow .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .claim-form button:hover { background: #d4ab51; box-shadow: 0 4px 12px -2px rgba(199,154,62,.32); }
}
.claim-form button:active { transform: scale(.97); }
.msg.success {
    padding: var(--space-3) var(--space-4);
    background: var(--success-soft);
    color: #066b4e;
    border-radius: var(--r-sm);
    border: 1px solid #a7d9c4;
    font-size: .9rem;
}
.msg.error {
    padding: var(--space-3) var(--space-4);
    background: var(--danger-soft);
    color: #872929;
    border-radius: var(--r-sm);
    border: 1px solid #e6b7b7;
    font-size: .9rem;
}

/* Legacy pager dots */
.dots { color: var(--muted-2); padding: 0 var(--space-1); }

/* Disclaimer / tip boxes */
.muted { color: var(--muted); font-size: .85rem; }
.info-tip {
    background: var(--primary-50);
    border-left: 3px solid var(--primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-sm);
    font-size: .9rem;
    color: var(--ink-2);
    margin-bottom: var(--space-3);
    line-height: 1.55;
}

/* Inline tooltip — when used as a "?" badge inside h3 (resets block-style) */
h3 > .info-tip,
h2 > .info-tip,
.detail-section h3 .info-tip,
.detail-section h2 .info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0 0 0 6px;
    background: #e2e8f0;
    color: #475569;
    border: none;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    position: relative;
    vertical-align: middle;
    user-select: none;
}
h3 > .info-tip:hover,
h2 > .info-tip:hover,
.detail-section h3 .info-tip:hover,
.detail-section h2 .info-tip:hover { background: #cbd5e1 }

/* The tooltip-bubble itself — hidden by default, shows on hover of parent */
.info-tip-bubble {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
    width: 300px;
    max-width: 92vw;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 100;
    white-space: normal;
}
.info-tip-bubble strong { color: #fff }
.info-tip:hover > .info-tip-bubble,
.info-tip:focus > .info-tip-bubble,
.info-tip:focus-within > .info-tip-bubble { display: block }

/* ==================== Legal footer ==================== */

.legal-footer {
    background: #0a1226;
    color: #94a3b8;
    padding: var(--space-12) var(--space-6) var(--space-6);
    font-size: 14px;
    border-top: 1px solid #1c2842;
    margin-top: var(--space-12);
}
.legal-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 28px 24px;
}
@media (max-width: 900px) {
    .legal-footer-inner { grid-template-columns: 1fr 1fr 1fr; }
    .legal-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .legal-footer-inner { grid-template-columns: 1fr 1fr; }
}
.legal-col { display: flex; flex-direction: column; gap: 6px; }
.legal-col-title {
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: var(--space-2);
    font-size: 14px;
    font-family: var(--font-display);
    letter-spacing: -.005em;
}
.legal-col a {
    color: #94a3b8;
    text-decoration: none;
    padding: 2px 0;
    transition: color .15s var(--ease-out);
}
.legal-col a:hover { color: var(--accent); }
.legal-brand-title {
    color: var(--accent);
    font-weight: 600;
    margin-bottom: var(--space-2);
    font-size: 15px;
    font-family: var(--font-display);
    letter-spacing: -.005em;
}
.legal-brand-text {
    color: #94a3b8;
    line-height: 1.6;
    max-width: 280px;
    text-wrap: pretty;
}
.legal-footer-bottom {
    max-width: 1100px;
    margin: var(--space-8) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid #1c2842;
    font-size: 12px;
    color: #64748b;
    text-align: center;
}
.legal-address { line-height: 1.6; }

/* ==================== Portfolio grid ==================== */

.portfolio-section { margin-top: var(--space-5); }
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: var(--space-2);
}
.portfolio-item {
    display: block;
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 1;
    background: #f1f5f9;
    text-decoration: none;
}
.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .portfolio-item:hover img { transform: scale(1.06); }
}
.portfolio-item .caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.72));
    color: #fff;
    font-size: .76rem;
    padding: 14px 8px 8px;
    line-height: 1.4;
}

/* ==================== How it works ==================== */

.how-it-works {
    background: #fff;
    padding: var(--space-16) var(--space-5) var(--space-12);
    border-top: 1px solid var(--line);
}
.how-inner { max-width: 1100px; margin: 0 auto; }
.how-it-works h2 {
    font-family: var(--font-display);
    text-align: center;
    color: var(--primary);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    margin: 0 0 var(--space-8);
    letter-spacing: -.025em;
    line-height: 1.15;
    text-wrap: balance;
    font-weight: 700;
}
.how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
}
.how-step {
    text-align: center;
    padding: 0 var(--space-3);
}
.how-step .how-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--r-xl);
    transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.how-step .how-icon svg { display: block; width: 32px; height: 32px; }
@media (hover: hover) and (pointer: fine) {
    .how-step:hover .how-icon { transform: scale(1.04); background: var(--accent); color: var(--primary); }
}
.how-step .how-label {
    font-family: var(--font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.how-step h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--primary);
    margin: 0 0 var(--space-2);
    letter-spacing: -.015em;
    font-weight: 600;
}
.how-step p {
    font-size: .92rem;
    color: var(--ink-3);
    line-height: 1.6;
    margin: 0;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
}
.how-cta { text-align: center; margin-top: var(--space-8); }

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent);
    color: var(--primary);
    padding: 14px 32px;
    border-radius: var(--r-md);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: -.005em;
    box-shadow: 0 4px 14px -2px rgba(199,154,62,.32);
    transition: background-color .15s var(--ease-out), transform .12s var(--ease-out), box-shadow .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .btn-cta:hover {
        background: #d4ab51;
        box-shadow: 0 8px 22px -4px rgba(199,154,62,.42);
        transform: translateY(-1px);
    }
}
.btn-cta:active { transform: scale(.97); }

/* ==================== SEO footer ==================== */

.seo-footer {
    background: #1d243f;
    color: #cbd5e1;
    padding: var(--space-16) var(--space-5);
}
.seo-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}
@media (max-width: 720px) {
    .seo-footer-inner { grid-template-columns: 1fr; }
}
.seo-block h3 {
    font-family: var(--font-display);
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid #2e3855;
    letter-spacing: -.015em;
    font-weight: 600;
}
.seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 14px;
}
.seo-grid a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: .9rem;
    padding: 4px 0;
    transition: color .15s var(--ease-out);
}
.seo-grid a:hover { color: var(--accent); }

/* ==================== Responsive ==================== */

@media (max-width: 720px) {
    .hero { padding: var(--space-10) var(--space-4); }
    .filter-bar form { flex-direction: column; align-items: stretch; }
    .filter-bar label { width: 100%; }
    .results-grid { grid-template-columns: 1fr; padding: var(--space-3); }
    .topnav-links { font-size: .85rem; gap: var(--space-2); }
    .stats-row, .search-form, .stats, .search-panel { grid-template-columns: repeat(2, 1fr); padding: var(--space-3); }
    .cards { grid-template-columns: 1fr; }
    .kv > div { grid-template-columns: 1fr; gap: var(--space-1); }
    .claim-form { grid-template-columns: 1fr; }
    .detail { padding: var(--space-5); }
    .hub-bar { padding: var(--space-5) var(--space-4); }
    .app-header { padding: var(--space-10) var(--space-4); }
}

/* ==================== Reduced motion ==================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .results-grid > .card,
    .cards > .company-card {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hub-card:hover,
    .card:hover,
    .firm-card:hover,
    .company-card:hover,
    .stat-item:hover,
    .btn-cta:hover {
        transform: none;
    }
    .portfolio-item:hover img {
        transform: none;
    }
}

/* ==================== Print ==================== */

@media print {
    .topnav, .filter-bar, .pager, .pills-section, .hero-action, .seo-footer, .legal-footer, .how-it-works, .ad-slot { display: none !important; }
    body { background: #fff; }
    .card, .firm-card, .company-card, .detail { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* B2B-Dropdown im Topnav */
.topnav-more { position: relative; }
.topnav-more summary { cursor: pointer; padding: 6px 10px; border-radius: 4px; list-style: none; user-select: none; }
.topnav-more summary::-webkit-details-marker { display: none; }
.topnav-more summary:hover { background: rgba(255,255,255,0.08); }
.topnav-more[open] summary { background: rgba(255,255,255,0.08); }
/* Active group: matches .cta visual treatment */
.topnav-more.is-active > summary {
    background: var(--accent);
    color: var(--primary);
    font-weight: 600;
    letter-spacing: -.005em;
}
@media (hover: hover) and (pointer: fine) {
    .topnav-more.is-active > summary:hover { background: #d4ab51; color: var(--primary); }
}
.topnav-more .topnav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #0a1f47;
    border: 1px solid #1f4280;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 180px;
}
.topnav-more .topnav-dropdown a {
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
}
.topnav-more .topnav-dropdown a:hover { background: rgba(255,255,255,0.1); }


/* ==================== Mobile UI Polish (Emil-Style) ==================== */
/* Touch targets, mobile-first responsive overrides, motion guards */

/* Topnav: mobile layout — brand stays compact, links scroll horizontally on next row */
@media (max-width: 760px) {
    .topnav-inner {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 12px;
    }
    .topnav-brand {
        font-size: .95rem;
        padding: 4px 0;
        align-self: flex-start;
    }
    .topnav-links {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 6px;
        scroll-snap-type: x proximity;
        gap: 2px;
        justify-content: flex-start;
        /* Fade-right hint that content scrolls */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }
    .topnav-links::-webkit-scrollbar { display: none; }
    .topnav-links > * {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .topnav-links > a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
        font-size: .82rem;
    }
    .topnav-links a.cta {
        font-size: .82rem;
    }
    .topnav-sep { display: none; }
    /* B2B dropdown summary keeps min height */
    .topnav-more summary {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        font-size: .82rem;
    }
    /* Position dropdown closer to summary on mobile */
    .topnav-more .topnav-dropdown {
        right: auto;
        left: 0;
        max-width: 80vw;
    }
}

/* On very narrow screens, brand text becomes tighter */
@media (max-width: 380px) {
    .topnav-brand { font-size: .85rem; }
    .topnav-inner { padding: 6px 10px; }
}

/* Hero search: stack on small screens, larger touch zones */
@media (max-width: 540px) {
    .hero-action {
        flex-direction: column;
        margin-left: 16px;
        margin-right: 16px;
    }
    .hero-action input[type="text"],
    .hero-action input[type="search"],
    .hero-action input[type="tel"] {
        padding: 14px 18px;
        font-size: 1rem;
        min-height: 48px;
        box-sizing: border-box;
    }
    .hero-action button {
        width: 100%;
        min-height: 48px;
        padding: 14px;
        font-size: 1rem;
    }
}

/* Filter pills: more touchable on mobile */
@media (max-width: 540px) {
    .pill {
        min-height: 38px;
        padding: 8px 14px;
        font-size: .92rem;
    }
    /* Pills containers (B2B filter rows etc) — allow horizontal scroll if many */
    .pills-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 4px;
        margin-right: -16px;
        padding-right: 16px;
    }
    .pills-row > * { flex-shrink: 0; }
}

/* Hub cards: tighter on mobile, bigger touch targets for links/buttons */
@media (max-width: 540px) {
    .results-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 12px;
    }
    .card {
        padding: 14px;
    }
    .card-name a {
        display: block;
        padding: 2px 0;
        min-height: 32px;
    }
    .card-phone, .card-web {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 4px 0;
    }
}

/* Detail page: better spacing on mobile */
@media (max-width: 540px) {
    .detail-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .detail h1 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
}

/* Reduce stagger on mobile (avoids feeling sluggish on cell connections) */
@media (max-width: 540px) {
    .results-grid > .card { animation-duration: 240ms; }
    .results-grid > .card:nth-child(n+4) { animation-delay: 90ms; }
}

/* Reduced motion: respect user preferences */
@media (prefers-reduced-motion: reduce) {
    .results-grid > .card,
    .cards > .company-card,
    .tel-card,
    .pill,
    .hero-action {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .hero-action:focus-within { transform: none; }
    .pill:active { transform: none; }
    .hero-action button:active { transform: none; }
}

/* Improve focus rings — invisible details that compound */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.pill:focus-visible { outline-offset: 3px; }

/* Tap highlights on iOS — make them tasteful */
* { -webkit-tap-highlight-color: rgba(10, 31, 71, 0.08); }