/* ============================================
   HOME — main page styles (cyberyozh-data-en1_2.html)
   Depends on: base.css (CSS variables + shared header/footer/btn/etc.)
   Round 2: common rules extracted to base.css
============================================ */


/* ============================================
   HERO
============================================ */
.hero {
    padding: 80px 0 120px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--violet-glow) 0%, transparent 60%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-dark) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 48px; }
    /* Single-column grid items default to min-width:auto — a wide child (the
       mockup's min-content) would blow the column past the viewport and clip the
       mockup on the right. min-width:0 lets the column shrink to the screen. */
    .hero-inner > * { min-width: 0; }
}
@media (max-width: 768px) {
    /* The hero keeps a 120px bottom padding from its own rule; on mobile that
       stacks with #features' 64px top padding into a 184px void. Drop it to the
       standard mobile section rhythm (64px) so the gap matches every other
       section break. */
    .hero { padding-bottom: 64px; }
}

.hero h1 {
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 24px 0 24px;
}

.hero h1 .highlight {
    background: linear-gradient(135deg, var(--violet-light) 0%, var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 540px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.hero-meta {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-meta-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-meta-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    /* Three meta items (73 / MIT / v2.1) overflow 430px at the 32px gap and the
       third wraps alone. Tighten the gap + type so all three sit on one row.
       (Placed after the base rules above so it actually wins the cascade.) */
    .hero-meta { gap: 14px; flex-wrap: nowrap; }
    .hero-meta-value { font-size: 17px; }
    .hero-meta-label { font-size: 10px; letter-spacing: 0.03em; white-space: nowrap; }
}

/* MOCKUP */
/* ============================================
   HERO MOCKUP — faithful to real Open Scraper Tester UI
   (drops Mac chrome; mirrors header strip, pill tabs,
    Crawl Parameters panel and live Result feed)
============================================ */
.hero-mockup {
    position: relative;
    border-radius: var(--radius);
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 56px -16px rgba(24, 24, 27, 0.18), 0 8px 24px -8px rgba(24, 24, 27, 0.08);
    transition: filter 0.25s;
}

/* ---- Header strip (brand + scraper/crawler health) ---- */
.mockup-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-dark);
}
.mockup-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.01em;
    color: var(--text);
    flex: 0 0 auto;
}
/* No background image: logo_test.png has never existed in this repository — the
   reference dates to the initial commit and points at a file that was never
   committed. It is not free to leave in place. A 404 cannot be cached, so every
   single page view re-requests it; measured on Slow 4G it cost 906 ms, landing in
   the middle of the LCP window, and it was the one entry in the console error log.
   If a brand mark is wanted in the mockup header, add the asset and restore the
   rule — do not restore the rule first. */
.mockup-brand-mark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
/* Server-bar: live inputs + Check buttons + ok badges + API/Key links */
.mockup-server-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.mockup-server-label {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text-muted);
    font-size: 5px;
    letter-spacing: -0.01em;
}
.mockup-server-label-spaced { margin-left: 6px; }
.mockup-server-input {
    padding: 3px 6px;
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 5px;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
}
.mockup-server-btn {
    padding: 3px 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    font-size: 5px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.2;
}
.mockup-server-badge {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 5px;
    font-weight: 600;
    background: var(--bg-3);
    color: var(--text-muted);
    line-height: 1.2;
    text-transform: lowercase;
}
.mockup-server-badge.is-ok {
    background: #eafaef;
    color: #08493f;
}
.mockup-server-link {
    padding: 3px 8px;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border-dark);
    font-size: 5px;
    font-weight: 500;
    margin-left: 4px;
    line-height: 1.2;
    white-space: nowrap;
}
/* Group wrappers are transparent to layout on desktop (display:contents), so the
   server bar still reads as one flat flex row exactly as before. On mobile each
   group becomes its own tidy row — see the max-width:600px block below. */
.mockup-server-group { display: contents; }

/* ---- Tabs (pill-shaped, matching real product) ---- */
.mockup-tabs-row {
    padding: 8px 12px 0;
}
.mockup-tabs {
    display: inline-flex;     /* shrinks to content, sits left, doesn't steal width */
    gap: 2px;
    padding: 0;
    background: transparent;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.mockup-tab {
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    /* adaptive: 6.5px on narrow viewport, up to 9px on wide */
    font-size: clamp(6.5px, 0.7vw, 9px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
}
.mockup-tab.active {
    background: #18181b;
    color: white;
}
.mockup-tab.active.is-pulsing {
    animation: mockup-tab-pulse 0.7s ease-out 1;
}
@keyframes mockup-tab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(24, 24, 27, 0.45); }
    50%  { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(24, 24, 27, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(24, 24, 27, 0); }
}

/* ---- Body: two panels side by side ---- */
.mockup-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: var(--bg-3);
}
.mockup-panel {
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    max-height: 320px;
    overflow-y: hidden;            /* JS drives scrollTop */
    scrollbar-width: none;          /* hide native scrollbar (Firefox) */
}
.mockup-panel::-webkit-scrollbar { width: 0; height: 0; }  /* Chrome/Safari */
.mockup-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mockup-panel-h3 {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mockup-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--text-muted);
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 9px;
    flex-shrink: 0;
    cursor: help;
    text-transform: none;
    letter-spacing: 0;
}
.mockup-textarea {
    align-items: flex-start;
    padding: 6px 10px;
    line-height: 1.5;
    white-space: normal;
    min-height: 38px;
}
.mockup-proxy-warning {
    margin-left: auto;
    color: #c77400;
    font-size: 5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    font-family: var(--font-display);
}

/* Floating cursor pointer + click ripple — drives the demo "click" on Start Crawl */
.mockup-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    will-change: transform, opacity;
}
.mockup-cursor.is-active { opacity: 1; }
.mockup-cursor.is-pressing svg { transform: scale(0.85); }
.mockup-cursor svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    transition: transform 0.12s ease-out;
}
.mockup-cursor-ripple {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    border: 2px solid var(--violet);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.4);
}
.mockup-cursor.is-clicking .mockup-cursor-ripple {
    animation: mockup-cursor-ripple 0.55s ease-out 1;
}
@keyframes mockup-cursor-ripple {
    0%   { opacity: 0.8; transform: scale(0.4); }
    100% { opacity: 0;   transform: scale(3.2); }
}

/* Enable-scraping checkbox row (decorative — boxed like real UI) */
.mockup-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xs);
    margin: 4px 0 2px;
}
.mockup-checkbox {
    width: 12px;
    height: 12px;
    border: 1px solid var(--border-dark);
    border-radius: 3px;
    background: var(--bg-2);
    flex-shrink: 0;
}
.mockup-checkbox-label {
    font-size: 10px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.3;
}
.mockup-checkbox-hint {
    font-weight: 400;
    color: var(--text-muted);
}

/* ---- Form fields ---- */
.mockup-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.mockup-field-narrow { flex: 0 0 56px; }
.mockup-field-row {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}
.mockup-flabel {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: -0.01em;
}
.mockup-req { color: var(--violet); }
.mockup-input {
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xs);
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text);
    font-family: var(--font-mono);
    min-height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mockup-input-typed { gap: 1px; }

/* Select-like inputs get a chevron pushed to the right */
.mockup-input-select {
    justify-content: space-between;
    gap: 8px;
    padding-right: 6px;
}
.mockup-chevron {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Typing caret on the URL input */
.mockup-caret {
    display: inline-block;
    width: 1.5px;
    height: 12px;
    background: var(--violet);
    opacity: 0;
    flex-shrink: 0;
}
.hero-mockup[data-mockup-state="typing"] .mockup-caret {
    opacity: 1;
    animation: mockup-caret-blink 0.9s steps(2, start) infinite;
}
@keyframes mockup-caret-blink { to { visibility: hidden; } }

/* ---- Primary action button ---- */
.mockup-actions {
    margin-top: 6px;
    display: flex;
    gap: 6px;
}
.mockup-btn {
    padding: 7px 14px;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-display);
    cursor: default;
    transition: transform 0.1s, background 0.15s, box-shadow 0.2s;
}
.mockup-btn-primary {
    background: #18181b;
    color: white;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.mockup-btn-primary.is-pressing {
    transform: scale(0.97);
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.18);
}
.mockup-btn-primary.is-running {
    background: var(--bg);
    border-color: var(--border-dark);
    color: var(--text-muted);
}

/* ---- Result panel: status bar + live feed ---- */
[data-mockup-result-pane] {
    transition: box-shadow 0.4s;
}
.hero-mockup[data-mockup-state="done"] [data-mockup-result-pane] {
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}
.mockup-status-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.mockup-status-bar {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xs);
    background: var(--bg);
    font-size: 10px;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}
.mockup-cancel-btn {
    padding: 5px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xs);
    font-size: 5px;
    font-weight: 500;
    color: var(--text);
    font-family: var(--font-display);
    cursor: default;
    white-space: nowrap;
    align-self: stretch;
}
.mockup-cancel-btn[hidden] { display: none; }
.mockup-status-bar span { font-size: 5px; }
.mockup-status-bar[data-status="running"] {
    background: #e6effc;
    border-color: #0059df;
    color: #0059df;
}
.mockup-status-bar[data-status="done"] {
    background: #eafaef;
    border-color: #26cd58;
    color: #08493f;
    animation: mockup-status-flash 0.6s ease-out 1;
}
@keyframes mockup-status-flash {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}

/* Rich metrics line — crawl_id · status · visited · queued · failed · dedup */
.mockup-status-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.mockup-status-id {
    font-family: var(--font-mono);
    font-weight: 700;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.mockup-status-sep {
    opacity: 0.4;
}
.mockup-status-meta b {
    font-weight: 700;
    color: inherit;
}
.mockup-spinner {
    width: 11px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0;
}
.mockup-status-bar[data-status="running"] .mockup-spinner {
    opacity: 1;
    animation: mockup-spin 0.7s linear infinite;
}
@keyframes mockup-spin { to { transform: rotate(360deg); } }

.mockup-result-area {
    flex: 1;
    background: var(--bg-3);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xs);
    padding: 8px;
    overflow: hidden;
    min-height: 200px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mockup-placeholder {
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 10px;
    padding: 6px;
}

/* Site Map (collapsed details mirror) */
.mockup-sitemap {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xs);
    background: var(--bg-2);
    overflow: hidden;
    flex-shrink: 0;
}
.mockup-sitemap-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border-dark);
    font-family: var(--font-display);
    font-size: 9px;
    color: var(--text-muted);
}
.mockup-sitemap-chevron {
    font-size: 6px;
    color: var(--text-muted);
    display: inline-block;
}
.mockup-sitemap-summary b { color: var(--text); font-weight: 700; }
.mockup-sitemap-summary > span:nth-child(2) { flex: 1; min-width: 0; }
.mockup-sitemap-copy {
    padding: 2px 6px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    font-size: 7px;
    font-weight: 500;
    color: var(--text);
    border-radius: 3px;
    white-space: nowrap;
}
.mockup-sitemap-tree {
    margin: 0;
    padding: 4px 6px;
    font-family: var(--font-mono);
    font-size: 7px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre;
    max-height: 60px;
    overflow: hidden;
    background: var(--bg);
}

/* Result table (URL / Depth / Status / Took) */
.mockup-result-table {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xs);
}
.mockup-table-head,
.mockup-table-row {
    display: grid;
    grid-template-columns: 1fr 18px 30px 38px;
    gap: 4px;
    padding: 3px 6px;
    align-items: center;
    font-size: 8px;
}
.mockup-table-head {
    background: var(--bg-3);
    border-bottom: 1px solid var(--border-dark);
    font-family: var(--font-display);
    font-size: 7px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mockup-table-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.mockup-table-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translateY(3px);
    animation: mockup-line-in 0.28s ease-out forwards;
}
@keyframes mockup-line-in {
    to { opacity: 1; transform: translateY(0); }
}
.mockup-table-row .url {
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.mockup-table-row .depth { text-align: center; color: var(--text-muted); }
.mockup-table-row .status { text-align: center; font-weight: 700; color: #26cd58; }
.mockup-table-row .status.is-redirect { color: #f59e0b; }
.mockup-table-row .status.is-error { color: #ef4444; }
.mockup-table-row .took { text-align: right; color: var(--text-muted); font-family: var(--font-mono); }

@media (max-width: 600px) {
    .mockup-body { grid-template-columns: 1fr; }
    .mockup-servers { display: none; }

    /* Mobile topbar: stack the brand above the server-health row so the tiny
       inputs / Check buttons / ok badges get the full width and wrap into tidy,
       left-aligned rows with even spacing — instead of crowding ragged beside
       the brand. Brand font dialled down so it sits in proportion to the row. */
    .mockup-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 14px;
    }
    .mockup-brand { font-size: 9px; gap: 6px; }
    .mockup-brand-mark { width: 14px; height: 14px; }
    /* Two-column topbar: the Scraper + Crawler rows stack in the left column;
       the two links sit in a right-hand column, one above the other, spanning
       both rows — filling the otherwise-empty right gutter. */
    .mockup-server-bar {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 12px;
        row-gap: 6px;
        align-items: center;
    }
    .mockup-server-group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 6px;
    }
    /* Equal-width labels so the two URL inputs line up into a clean column. */
    .mockup-server-group > .mockup-server-label { min-width: 52px; }
    /* Links → right column, stacked (API Docs over Get API Key), right-aligned,
       vertically centred against the two URL rows. */
    .mockup-server-links {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        align-items: stretch;     /* both links take the wider one's width */
        justify-content: center;
        gap: 4px;
    }
    .mockup-server-links > .mockup-server-link {
        box-sizing: border-box;
        text-align: center;
    }
    /* Drop the desktop nudges that throw the rows off-grid. */
    .mockup-server-label-spaced { margin-left: 0; }
    .mockup-server-link { margin-left: 0; }

    /* One panel at a time: the Crawl Parameters form types first, then the
       Result pane swaps into its place once the crawl starts streaming — keeps
       the mobile hero compact instead of stacking a long static result strip. */
    .hero-mockup .mockup-panel[data-mockup-result-pane] { display: none; }
    .hero-mockup[data-mockup-state="streaming"] .mockup-body > .mockup-panel:not([data-mockup-result-pane]),
    .hero-mockup[data-mockup-state="done"]      .mockup-body > .mockup-panel:not([data-mockup-result-pane]) { display: none; }
    .hero-mockup[data-mockup-state="streaming"] .mockup-panel[data-mockup-result-pane],
    .hero-mockup[data-mockup-state="done"]      .mockup-panel[data-mockup-result-pane] {
        display: flex;
        animation: mockup-result-in .45s cubic-bezier(.22, 1, .36, 1) both;
    }
}
@keyframes mockup-result-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Honor reduced-motion: kill all animations, show final state */
@media (prefers-reduced-motion: reduce) {
    .hero-mockup *, .hero-mockup *::before, .hero-mockup *::after {
        animation: none !important;
        transition: none !important;
    }
    .mockup-caret { display: none; }
    .mockup-table-row { opacity: 1; transform: none; }
}

/* ============================================
   FEATURES GRID
============================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-card {
    padding: 28px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    position: relative;
    display: flex;
    flex-direction: column;
}

.feature-card.wide { grid-column: span 2; }

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.feature-icon svg { width: 22px; height: 22px; }

.feature-card h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;          /* badge wraps onto a new line if needed */
    gap: 6px 8px;
    line-height: 1.3;
    min-height: 2.6em;        /* reserve 2 lines so descriptions align across the grid */
}

.feature-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
    flex: 1;                  /* pad remaining vertical space — cards line up by height */
}

.badge-new {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(16, 185, 129, .18);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .3);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Inside .feature-card, pull the NEW badge out of the title flow into the
   top-right corner so a long title (e.g. "Authenticated sessions") never
   pushes the badge to a second line. */
.feature-card .badge-new {
    position: absolute;
    top: 18px;
    right: 18px;
    animation: badge-new-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
/* The expanding ring is the effect; the opacity dip was incidental and it was
   fading the LABEL along with the box. Measured: at the 0.78 trough the text
   computed to #0a7b5b on #d5f3e9 = 4.45:1, so the badge failed contrast for part
   of every 2.4 s cycle — a failure that only shows up if the audit happens to
   sample mid-pulse, which is the worst kind. The ring alone reads the same and
   the label now holds a steady 4.66:1. */
@keyframes badge-new-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .feature-card .badge-new { animation: none; }
}

@media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-card.wide { grid-column: span 2; }
}

@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr; }
    .feature-card.wide { grid-column: span 1; }
}

/* ============================================
   DEMO POINTS
============================================ */
.demo-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.demo-point {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: 14px;
}

.demo-point-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--violet);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.demo-point h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.demo-point p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .demo-points { grid-template-columns: 1fr; }
}

/* ============================================
   MCP SECTION
============================================ */
.mcp-section {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    position: relative;
    overflow: hidden;
}

.mcp-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--violet-glow) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
}

.mcp-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.mcp-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 32px;
}

.mcp-benefit {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.mcp-benefit-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.15);
    color: var(--violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcp-benefit-icon svg { width: 18px; height: 18px; }

.mcp-benefit h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.mcp-benefit p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* CSS-only tabs */
.tabs {
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
}

.tabs-list {
    display: flex;
    border-bottom: 1px solid var(--border-dark);
    background: var(--bg-3);
    overflow-x: auto;
}

.tabs-list .mcp-tab-btn {
    padding: 14px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tabs-list .mcp-tab-btn:hover { color: var(--text); }

.tabs-list .mcp-tab-btn.active {
    color: var(--violet-light);
    border-bottom-color: var(--violet);
    background: var(--bg-2);
}

.tab-panel { display: none; }

.tab-panel.active {
    display: block;
}

.code-block {
    background: var(--bg);
    padding: 24px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    position: relative;
    color: var(--text-muted);
}

.code-block pre { margin: 0; }

/* JSON syntax highlighting — used by .code-block (light bg) and .market-example-code (dark bg) */
.code-key    { color: #c4b5fd; }
.code-string { color: #86efac; }
.code-num    { color: #fbbf24; }
.code-bracket { color: var(--text-dim); }

.code-copy {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    background: var(--bg-3);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
}

.code-copy:hover {
    background: var(--violet);
    color: white;
    border-color: var(--violet);
}

.code-copy.copied {
    background: var(--success);
    color: var(--bg);
    border-color: var(--success);
}

@media (max-width: 1024px) {
    .mcp-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   FLOW (Crawler + Scraper)
============================================ */
.flow-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 48px;
    background: var(--bg-light-2);
    border-radius: var(--radius);
    margin: 48px 0;
}

.flow-step {
    text-align: center;
    padding: 28px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 14px;
}

.flow-step-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: var(--violet);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.flow-step-icon svg { width: 24px; height: 24px; }

.flow-step h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.flow-step p {
    font-size: 13px;
    color: var(--text-dark-muted);
}

.flow-arrow {
    color: var(--violet);
    width: 32px;
    height: 32px;
}

@media (max-width: 1024px) {
    .flow-diagram { grid-template-columns: 1fr; gap: 12px; }
    .flow-arrow { transform: rotate(90deg); margin: 0 auto; }
}

.use-cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.use-case {
    padding: 28px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

.use-case h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.use-case p {
    font-size: 14px;
    color: var(--text-dark-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-light-3);
    color: var(--text-dark-muted);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.tag-violet {
    background: rgba(124, 58, 237, .10);
    color: var(--violet-deep);
    border-color: rgba(124, 58, 237, .22);
}

@media (max-width: 1024px) {
    .use-cases { grid-template-columns: 1fr; }
}

/* ============================================
   MARKETPLACE PRESETS (REDESIGNED)
============================================ */
.market-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin: 32px 0 56px;
}

.market-chip {
    padding: 14px 18px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1.2;
}

.market-chip-region {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.market-chip:hover {
    border-color: var(--violet);
    color: var(--text);
}

.market-chip.coming {
    border-style: dashed;
    color: var(--text-dim);
    cursor: default;
    justify-content: center;
}

.market-chip.coming:hover {
    transform: none;
    border-color: var(--border-dark);
    color: var(--text-dim);
}

.market-presets-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-dark);
    font-size: 13px;
    color: var(--text-muted);
}

.market-presets-meta strong {
    color: var(--text);
    font-weight: 700;
}

.market-example {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 56px;
}

.market-example-code {
    background: #0a0a0f;
    color: var(--text-on-dark);
    padding: 28px 32px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    overflow-x: auto;
    position: relative;
}
.market-example-code pre { color: inherit; }
/* On the dark code panel, brackets read better with a lighter dim */
.market-example-code .code-bracket { color: var(--text-dim-on-dark); }

.market-example-code::before {
    content: 'Sample output · Amazon UK';
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 600;
}

.market-example-fields {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.market-example-fields h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.field-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-dark);
}

.field-item:last-child { border-bottom: none; }

.field-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.field-check svg { width: 11px; height: 11px; }

.field-item div { flex: 1; }

.field-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    color: var(--text);
}

.field-desc {
    font-size: 12px;
    color: var(--text-dim);
}

.feature-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
}

.feature-table th,
.feature-table td {
    padding: 16px 24px;
    text-align: left;
    border-bottom: 1px solid var(--border-dark);
}

.feature-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
    background: var(--bg-3);
}

.feature-table tr:last-child td { border-bottom: none; }

.feature-table td:first-child {
    font-weight: 600;
    width: 32%;
}

.feature-table td:last-child {
    color: var(--text-muted);
    font-size: 14px;
}

.market-cta {
    margin-top: 32px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.02) 100%);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.market-cta-text h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.market-cta-text p {
    font-size: 14px;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .market-example { grid-template-columns: 1fr; }
}

/* ============================================
   PROXIES
============================================ */
.proxy-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.proxy-type {
    padding: 28px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    position: relative;
    display: flex;
    flex-direction: column;
    /* Клипим snizu/спарава/слева, top расширен на 24px чтобы badge "Recommended"
       (top: -12px) остался виден. Slide-up panel снизу больше не торчит за border. */
    clip-path: inset(-24px 0 0 0 round 0 0 var(--radius) var(--radius));
}

.proxy-type.recommended {
    border-color: var(--violet);
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, var(--bg-2) 100%);
}

.proxy-recommended-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--violet);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 15;
}

.proxy-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.proxy-type h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.proxy-type-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.proxy-subtype {
    padding: 14px 16px;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    margin-bottom: 8px;
}

.proxy-subtype:last-of-type { margin-bottom: 16px; }

.proxy-subtype-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.proxy-subtype-name {
    font-size: 14px;
    font-weight: 600;
}

.proxy-subtype-price {
    font-size: 13px;
    color: var(--violet);
    font-weight: 600;
}

.proxy-subtype-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Learn more (details) — opaque slide-up overlay panel */
.proxy-learn {
    margin-top: auto;
}

/* When open the summary becomes an absolute corner ×, leaving the flow. Reserve its
   row height so the card footprint NEVER changes between closed/open (no layout jump,
   even when the tallest card is the one opened). Matches the closed summary height. */
.proxy-learn[open] {
    min-height: 44px;
}

.proxy-learn summary {
    list-style: none;
    cursor: pointer;
    height: 44px;
    box-sizing: border-box;
    padding: 0 16px;
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
    position: relative;
    z-index: 12;
}

.proxy-learn summary::-webkit-details-marker { display: none; }

.proxy-learn summary:hover {
    color: var(--text);
    border-color: var(--violet);
}

.proxy-learn[open] summary {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 13;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;                 /* hide the "Learn more…" label, leave only the × */
    background: #fff;
    border-color: var(--border-dark);
    color: var(--violet);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}
.proxy-learn[open] summary:hover {
    background: var(--violet);
    border-color: var(--violet);
}

.proxy-learn summary::after {
    content: '+';
    font-size: 18px;
    line-height: 1;
    color: var(--violet-light);
    transform: rotate(0deg) translateY(-0.16em);   /* -0.16em centers the '+' ink — its baseline sits low in the line-box */
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}

.proxy-learn[open] summary::after {
    transform: rotate(45deg) translateY(-0.16em);
    color: var(--violet);
    font-size: 22px;              /* restore glyph size (summary is font-size:0 when open) */
}
.proxy-learn[open] summary:hover::after { color: #fff; }

.proxy-learn-content {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-image: none;
    border-radius: var(--radius);
    padding: 28px 28px 76px;
    font-size: 13px;
    line-height: 1.6;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(14px) scale(.99);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform .44s cubic-bezier(.16, 1, .3, 1),
        opacity .3s ease,
        visibility 0s linear .44s;
    will-change: transform, opacity;
    z-index: 10;
}

.proxy-learn[open] .proxy-learn-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-bottom: 28px;         /* close bar moved to a corner × — reclaim the bottom space */
    transition:
        transform .44s cubic-bezier(.16, 1, .3, 1),
        opacity .34s ease,
        visibility 0s linear 0s;
}

.proxy-type.recommended .proxy-learn-content {
    background-color: #ffffff;
    background-image: linear-gradient(180deg, rgba(124, 58, 237, 0.06), rgba(255, 255, 255, 0.95));
}

.proxy-learn-content::-webkit-scrollbar { width: 6px; }
/* inset the track by the corner radius so the thumb never pokes past the
   card's rounded corners (webkit doesn't clip the scrollbar to border-radius) */
.proxy-learn-content::-webkit-scrollbar-track { margin: 16px 0; background: transparent; }
.proxy-learn-content::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.25); border-radius: 3px; }
.proxy-learn-content::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.5); }
/* Firefox: thin overlay scrollbar, tinted */
.proxy-learn-content { scrollbar-width: thin; scrollbar-color: rgba(124, 58, 237, 0.35) transparent; }

.proxy-learn-content h5 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    margin-top: 16px;
}

.proxy-learn-content h5:first-child { margin-top: 0; }

.proxy-learn-content p {
    color: var(--text-muted);
    margin-bottom: 10px;
}

.proxy-learn-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.proxy-learn-content li {
    padding: 4px 0;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.proxy-learn-content li::before {
    content: '·';
    color: var(--violet-light);
    font-weight: 700;
    margin-top: -2px;
}

@media (max-width: 1024px) {
    .proxy-types { grid-template-columns: 1fr; }
}

/* ============ Learn-more: ACCORDION mode (admin opt-in via prx_learn_mode) ============
   Default is the overlay panel above. When the Proxies section is set to "Accordion"
   (data-prx-learn="accordion"), the panel becomes a normal flow element that smoothly
   expands the card to fit the text (JS animates its height). The grid stops stretching
   so neighbouring cards keep their size when one opens. */
.proxy-types[data-prx-learn="accordion"] {
    align-items: start;
}
.proxy-types[data-prx-learn="accordion"] .proxy-learn[open] {
    min-height: 0;                       /* flow mode — no need to reserve the summary row */
}
.proxy-types[data-prx-learn="accordion"] .proxy-learn-content {
    position: static;
    inset: auto;
    width: auto;
    height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    transition: height .45s cubic-bezier(.16, 1, .3, 1);
    will-change: height;
}
.proxy-types[data-prx-learn="accordion"] .proxy-type.recommended .proxy-learn-content {
    background: none;
}
.proxy-types[data-prx-learn="accordion"] .proxy-learn-content-inner {
    padding: 14px 2px 2px;
}
/* Summary stays a normal full-width bar when open (not the overlay's corner ×). */
.proxy-types[data-prx-learn="accordion"] .proxy-learn[open] summary {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: 44px;
    min-width: 0;
    padding: 0 16px;
    border-radius: 10px;
    justify-content: space-between;
    font-size: 13px;
    background: var(--bg);
    border-color: var(--violet);
    color: var(--text);
    box-shadow: none;
}
.proxy-types[data-prx-learn="accordion"] .proxy-learn[open] summary::after {
    font-size: 18px;                     /* summary keeps its label, so keep the normal marker size */
}

/* ============================================
   ETHICS (NEW)
============================================ */
.ethics-section {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    position: relative;
    overflow: hidden;
}

.ethics-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

/* Ethics scoped overrides — section stays dark in a light-first page */
.ethics-section .eyebrow {
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
    border-color: rgba(124, 58, 237, 0.35);
}
.ethics-section h1,
.ethics-section h2,
.ethics-section h3,
.ethics-section h4 { color: var(--text-on-dark); }
.ethics-section > .container > p { color: var(--text-muted-on-dark); }

.ethics-content {
    position: relative;
    z-index: 1;
}

.ethics-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.ethics-pillar {
    padding: 32px;
    background: var(--bg-dark-2);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius);
    position: relative;
}

.ethics-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(124, 58, 237, 0.08) 100%);
    border: 1px solid rgba(124, 58, 237, 0.35);
    color: var(--violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.ethics-icon svg { width: 24px; height: 24px; }

.ethics-pillar h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--text-on-dark);
}

.ethics-pillar > p {
    font-size: 14px;
    color: var(--text-muted-on-dark);
    line-height: 1.6;
    margin-bottom: 16px;
}

.ethics-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ethics-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted-on-dark);
    line-height: 1.5;
}

.ethics-list li svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--success);
    margin-top: 2px;
}

.abuse-callout {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 10px;
}

.abuse-email {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--violet);
    font-weight: 600;
    margin-bottom: 4px;
}

.abuse-time {
    font-size: 12px;
    color: var(--text-muted-on-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.abuse-time strong {
    color: var(--success);
    font-weight: 700;
}

.ethics-statement {
    padding: 32px 40px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0.06) 100%);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: var(--radius);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.ethics-statement::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 32px;
    font-size: 80px;
    line-height: 1;
    font-family: Georgia, serif;
    color: var(--violet);
    opacity: 0.4;
}

.ethics-statement p {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-on-dark);
    letter-spacing: -0.01em;
}

.ethics-statement-footer {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted-on-dark);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .ethics-pillars { grid-template-columns: 1fr; }
}

/* ============================================
   USE CASES (light)
============================================ */
.uc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.uc-card {
    padding: 32px;
    background: var(--bg-light-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.uc-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 8px 24px rgba(24, 24, 27, 0.06);
}

.uc-illustration {
    aspect-ratio: 16/10;
    border-radius: 14px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    background: var(--bg-light-3);
}

.uc-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.uc-card:hover .uc-illustration img {
    transform: scale(1.04);
}

.uc-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.uc-card p {
    font-size: 14px;
    color: var(--text-dark-muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 20px;
}

.uc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    align-self: flex-start;
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: 100px;
    transition: all 0.2s ease;
}

.uc-link:hover {
    background: var(--text-dark);
    border-color: var(--text-dark);
    color: white;
}

@media (max-width: 1024px) {
    .uc-grid { grid-template-columns: 1fr; }
}

/* ============================================
   MEDIA MENTIONS (light)
============================================ */
.media-wrap,
.uc-wrap {
    background: var(--bg-light-2);
    border-radius: 24px;
    padding: 48px;
    margin-top: 32px;
}

.media-head,
.uc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.media-head h3,
.uc-head h3 {
    font-size: 22px;
    font-weight: 700;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.media-card {
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.media-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 8px 24px rgba(24, 24, 27, 0.06);
}

.media-img {
    aspect-ratio: 16/10;
    border-radius: 12px;
    margin-bottom: 20px;
    background: var(--bg-light-3);
    position: relative;
    overflow: hidden;
}

.media-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.media-card:hover .media-img img {
    transform: scale(1.04);
}

.media-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    min-height: 2.6em;
}

.media-card blockquote {
    font-size: 14px;
    color: var(--text-dark-muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 20px;
    font-style: normal;
}

.media-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(124, 58, 237, .10);
    color: var(--violet-deep);
    border: 1px solid rgba(124, 58, 237, .22);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .media-grid { grid-template-columns: 1fr; }
    .media-wrap { padding: 32px 24px; }
}

/* ============================================
   BLOG ARTICLES — mirrors app.cyberyozh.com pattern
============================================ */
.blog-wrap {
    background: var(--bg-light);
    border: 1px solid var(--border-dark);
    border-radius: 28px;
    padding: 40px;
    margin-top: 32px;
}

.blog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.blog-head h3 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

.blog-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-dark);
    color: var(--text-on-dark);
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--bg-dark);
    transition: background-color .18s ease, border-color .18s ease;
    line-height: 1;
}
.blog-all-btn:hover { background: #27272a; border-color: #27272a; }
.blog-all-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-card {
    background: white;
    border: 1px solid var(--border-dark);
    border-radius: 20px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 8px 24px rgba(24, 24, 27, 0.06);
}

.blog-card-img {
    aspect-ratio: 16/10;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}

.blog-card-img-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.blog-card-img-tag {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #18181b;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.blog-card-img-brand {
    position: absolute;
    bottom: 12px;
    left: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.01em;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}
.blog-card-img-brand::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}

.blog-card-img-deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.55;
}

/* Real featured image (or category fallback SVG) fills the card image box.
   Tags/brand overlays sit above it (z-index 2). */
.blog-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-img img { transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
.blog-card-img .cyz-cover-fallback { z-index: 1; }

.blog-card-body {
    padding: 4px 10px 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.blog-card-category { font-size: 13px; color: var(--text-dim); }
.blog-card-date     { font-size: 13px; color: var(--text-dim); }

.blog-card h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-excerpt {
    font-size: 14px;
    color: var(--text-dark-muted);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border-dark);
}

.blog-card-stats {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 13px;
    color: var(--text-dim);
}
.blog-card-stat { display: inline-flex; align-items: center; gap: 5px; }
.blog-card-stat svg { width: 14px; height: 14px; flex-shrink: 0; }

.blog-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dark);
    font-weight: 500;
}

.blog-card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
}
.blog-card-avatar.av-1 { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.blog-card-avatar.av-2 { background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%); }
.blog-card-avatar.av-3 { background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%); }
/* Real author photo (cyz_avatar_url) — fill the round 24px chip. */
img.blog-card-avatar { object-fit: cover; }

/* Card image themes — gradient + decorative pattern */
.blog-card-img.theme-antibot {
    background:
        radial-gradient(circle at 20% 30%, rgba(239, 68, 68, 0.4) 0%, transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.45) 0%, transparent 55%),
        linear-gradient(135deg, #1e1b4b 0%, #0a0a0f 100%);
}

.blog-card-img.theme-crawl {
    background:
        radial-gradient(circle at 75% 25%, rgba(99, 102, 241, 0.5) 0%, transparent 55%),
        radial-gradient(circle at 25% 80%, rgba(34, 211, 238, 0.35) 0%, transparent 55%),
        linear-gradient(135deg, #082f49 0%, #0a0a0f 100%);
}

.blog-card-img.theme-mcp {
    background:
        radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.55) 0%, transparent 60%),
        radial-gradient(circle at 85% 90%, rgba(236, 72, 153, 0.35) 0%, transparent 55%),
        linear-gradient(135deg, #2e1065 0%, #18181b 100%);
}

@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-wrap { padding: 28px 20px; }
    .blog-head h3 { font-size: 22px; }
}

/* ============================================
   CHANGELOG (NEW)
============================================ */
.changelog {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 2px solid var(--border-dark);
    padding-left: 32px;
    position: relative;
}

.changelog-entry {
    position: relative;
    padding-bottom: 48px;
}

.changelog-entry:last-child { padding-bottom: 0; }

.changelog-entry::before {
    content: '';
    position: absolute;
    left: -41px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--violet);
}

.changelog-entry.latest::before {
    background: var(--violet);
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.22), 0 0 0 6px rgba(124, 58, 237, 0.5);
    animation: changelog-dot-pulse 1.9s ease-out infinite;
}

@keyframes changelog-dot-pulse {
    0%   { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.22), 0 0 0 6px rgba(124, 58, 237, 0.5); }
    100% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.22), 0 0 0 18px rgba(124, 58, 237, 0); }
}

.changelog-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.changelog-version {
    padding: 4px 12px;
    background: var(--violet);
    color: white;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
}

.changelog-entry:not(.latest) .changelog-version {
    background: var(--bg-3);
    color: var(--text-muted);
    border: 1px solid var(--border-dark);
}

.changelog-date {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}

.changelog-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    background: rgba(16, 185, 129, .15);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .25);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: changelog-tag-pulse 2.2s ease-in-out infinite;
}

.changelog-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: changelog-tag-dot-pulse 1.6s ease-out infinite;
}

/* "First release" pin — same pill, deliberately quiet: it marks where the project
   started, not something new, so it drops the green and the attention-seeking pulse. */
.changelog-tag.is-first {
    background: rgba(148, 163, 184, .12);
    color: var(--text-muted);
    border-color: rgba(148, 163, 184, .22);
    animation: none;
}

.changelog-tag.is-first::before {
    background: var(--text-muted);
    box-shadow: none;
    animation: none;
}

@keyframes changelog-tag-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); border-color: rgba(16, 185, 129, .25); }
    50%      { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, .55); }
}

@keyframes changelog-tag-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65); }
    100% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .changelog-entry.latest::before,
    .changelog-tag,
    .changelog-tag::before {
        animation: none;
    }
}

.changelog-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.changelog-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.changelog-list li {
    position: relative;
    padding-left: 18px;          /* room for the absolutely-placed bullet */
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Bullet is absolute (not a flex item) so inline <strong>/<code> in the text
   flow as one wrapping paragraph. As flex items each inline child became its
   own non-wrapping column, which blew past the viewport on mobile. */
.changelog-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--violet-light);
}

.changelog-list li strong {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

/* Inline code chips inside changelog bullets. The built-in/manual entries carry an
   inline style attribute; GitHub-Releases-sourced bullets emit a plain <code>, so this
   rule gives them the same chip look. (For the inline-styled ones the attribute wins on
   identical values → no visual change.) */
.changelog-list li code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-3);
    padding: 1px 6px;
    border-radius: 4px;
}

.changelog-cta {
    margin-top: 48px;
    text-align: center;
}

@media (max-width: 600px) {
    .changelog { padding-left: 24px; }
    .changelog-entry::before { left: -33px; width: 14px; height: 14px; }
    .changelog-title { font-size: 18px; }
}

/* ============================================
   QUICK START
============================================ */
.quick-start-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.qs-step {
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
    /* Flex column so the grey code block stretches to the bottom — keeps
       all 3 cards visually identical regardless of how many command lines
       each one contains. */
    display: flex;
    flex-direction: column;
}

.qs-step-head {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-dark);
}

.qs-step-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--violet);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.qs-step-title {
    font-weight: 600;
    font-size: 15px;
}

.qs-step-code {
    padding: 20px 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg);
    position: relative;
    overflow-x: auto;
    /* Fill the rest of the card so the grey background reaches the bottom */
    flex: 1;
}

.qs-step-code .code-copy { top: 16px; right: 16px; }
/* Keep long shell commands from sliding under the absolute Copy button.
   `white-space: pre` (the pre default) ignores padding-right because the
   line never wraps — we switch to pre-wrap and allow long tokens (URLs) to
   break so padding-right actually carves out space for the Copy chip. */
.qs-step-code pre {
    margin: 0;
    padding-right: 18px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
    .quick-start-steps { grid-template-columns: 1fr; }
}


/* ============================================
   CRAWLER SECTION (NEW)
============================================ */
.crawler-section {
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.crawler-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.2) 0%, transparent 60%);
    filter: blur(80px);
    transform: translateY(-50%);
    pointer-events: none;
}

.crawler-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;     /* equal-height columns — mockup grows/shrinks with features list */
    position: relative;
    z-index: 1;
}

.crawler-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.crawler-feat {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 22px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: 14px;
}

.crawler-feat-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.15);
    color: var(--violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crawler-feat-icon svg { width: 18px; height: 18px; }

.crawler-feat h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.crawler-feat p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.crawler-feat code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--violet-light);
}

/* ============================================
   CRAWLER RESULT MOCKUP (#crawlerResultMockup)
   Faithful clone of Open Scraper Tester Result panel.
============================================ */
/* Wrapper takes the grid row height (driven by .crawler-features intrinsic height).
   .crawl-mockup is absolutely positioned to fill the wrapper — its own content height
   (sitemap + table) does NOT influence the grid row sizing. Sitemap and table scroll
   inside via the inner result-area. This is the bullet-proof "absolute-fill" pattern. */
.crawl-mockup-cell {
    position: relative;
    min-height: 0;
    min-width: 0;
}
.crawl-mockup {
    position: absolute;
    inset: 0;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.18), 0 4px 14px -8px rgba(0, 0, 0, 0.08);
    font-family: var(--font-display);
    color: var(--text);
    overflow: hidden;
}
@media (max-width: 1024px) {
    /* On single-column layouts the wrapper has no sibling to match — give it explicit height. */
    .crawl-mockup-cell {
        height: 560px;
    }
}

.crawl-mockup-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-dark);
    line-height: 1.2;
}

/* Status row: status-bar (flex:1) + Cancel button */
.crawl-mockup-status-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.crawl-mockup-status-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid var(--border-dark);
    background: var(--bg-2);
    color: var(--text-muted);
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
    min-width: 0;
}
.crawl-mockup-status-bar[data-state="running"] {
    background: #e6effc;
    border-color: #0059df;
    color: #0059df;
}
.crawl-mockup-status-bar[data-state="done"] {
    background: #eafaef;
    border-color: #26cd58;
    color: #08493f;
    animation: crawl-mockup-done-flash 0.45s ease;
}
@keyframes crawl-mockup-done-flash {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.012); }
    100% { transform: scale(1); }
}

/* Spinner — currentColor border, transparent top */
.crawl-mockup-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: crawl-mockup-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes crawl-mockup-spin {
    to { transform: rotate(360deg); }
}
.crawl-mockup-status-bar:not([data-state="running"]) .crawl-mockup-spinner { display: none; }

.crawl-mockup-status-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    font-size: 10px;
}
.crawl-mockup-status-meta strong { font-weight: 700; }
.crawl-mockup-status-meta .meta-sep { opacity: 0.55; }
.crawl-mockup-status-meta .meta-id strong { font-family: var(--font-mono); font-size: 10px; }

.crawl-mockup-cancel {
    cursor: pointer;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    padding: 6px 12px;
    background: var(--bg-2);
    color: var(--text);
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
    flex-shrink: 0;
}
.crawl-mockup-cancel:hover { border-color: var(--text); }
.crawl-mockup-cancel:active { transform: scale(0.98); }
.crawl-mockup-cancel[hidden] { display: none; }

/* Result area: light gray frame around sitemap + table.
   flex:1 + min-height:0 lets the area fill the remaining space inside the
   capped .crawl-mockup card and scroll internally as the table grows. */
.crawl-mockup-result-area {
    flex: 1;
    background: var(--bg-3);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 14px;
    overflow: auto;
    min-height: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
    min-width: 0;
}

/* Sitemap collapsible */
.crawl-mockup-sitemap { margin-bottom: 12px; }
.crawl-mockup-sitemap > summary {
    cursor: pointer;
    padding: 8px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    font-family: var(--font-display);
}
.crawl-mockup-sitemap > summary::-webkit-details-marker { display: none; }
.crawl-mockup-sitemap-chevron {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 10px;
    color: var(--text-dim);
}
.crawl-mockup-sitemap[open] .crawl-mockup-sitemap-chevron { transform: rotate(90deg); }
.crawl-mockup-sitemap-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crawl-mockup-sitemap-title b { color: var(--text); }
.crawl-mockup-sitemap-copy {
    cursor: pointer;
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    transition: border-color .15s ease;
    flex-shrink: 0;
}
.crawl-mockup-sitemap-copy:hover { border-color: var(--text); }

.crawl-mockup-sitemap-pre {
    max-height: 220px;
    overflow: auto;
    background: var(--bg-2);
    padding: 12px;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: var(--text);
    white-space: pre;
    margin: 0;
    font-family: var(--font-mono);
    border-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}
.crawl-mockup-sitemap-pre:empty::before {
    content: 'Waiting for SSE events…';
    color: var(--text-dim);
    font-style: italic;
}

/* Result table */
.crawl-mockup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    overflow: hidden;
    table-layout: fixed;
}
.crawl-mockup-table thead tr {
    background: var(--bg-3);
    color: var(--text-muted);
}
.crawl-mockup-table th {
    text-align: left;
    padding: 7px 10px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-display);
    border-bottom: 1px solid var(--border-dark);
}
.crawl-mockup-table th.center { text-align: center; }
.crawl-mockup-table th.right  { text-align: right; }
.crawl-mockup-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-dark);
    vertical-align: middle;
}
.crawl-mockup-table tr:last-child td { border-bottom: none; }
.crawl-mockup-table td.url,
.crawl-mockup-table td.parent {
    font-family: var(--font-mono);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crawl-mockup-table td.url    { color: var(--text); }
.crawl-mockup-table td.parent { color: var(--text-muted); }
.crawl-mockup-table td.depth  { text-align: center; color: var(--text-muted); }
.crawl-mockup-table td.status { text-align: center; font-weight: 700; color: var(--success); }
.crawl-mockup-table td.took   { text-align: right; color: var(--text-muted); white-space: nowrap; }

.crawl-mockup-table .c-url    { width: auto; }
.crawl-mockup-table .c-parent { width: 34%; }
.crawl-mockup-table .c-depth  { width: 56px; }
.crawl-mockup-table .c-status { width: 64px; }
.crawl-mockup-table .c-took   { width: 76px; }

/* Row appearance animation */
.crawl-mockup-table tbody tr {
    animation: crawl-mockup-row-in 0.28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes crawl-mockup-row-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
    .crawler-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
    .crawl-mockup { padding: 14px; }
    /* Status row: stop the wrapping meta from ballooning the box (which also
       stretched the Cancel button to its height). Smaller text + a fixed-height
       box that clips overflow; Cancel stays compact and vertically centred. */
    .crawl-mockup-status-row { align-items: center; gap: 6px; }
    .crawl-mockup-status-bar {
        min-height: 48px;        /* fits 2 lines; may grow to a 3rd on very narrow screens
                                    instead of clipping. The truncated id keeps a fixed width
                                    and the live numbers barely change width, so no jitter. */
        padding: 7px 10px;
        gap: 7px;
        align-items: flex-start;
        overflow: hidden;
    }
    .crawl-mockup-status-meta {
        font-size: 9px;
        column-gap: 6px;
        row-gap: 2px;
        align-content: flex-start;
    }
    .crawl-mockup-status-meta .meta-id strong { font-size: 9px; }
    /* The crawl-id is the longest token and its exact value is meaningless (a random
       hash) — cap + ellipsis it on mobile so the id shares line 1 with the first stats
       and everything fits the fixed 2-line box instead of spilling into a clipped 3rd
       row at ~390-414px. */
    .crawl-mockup-status-meta .meta-id {
        max-width: 86px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Drop the two always-zero, least-useful stats (out-of-scope · retries)
       on mobile so the id + remaining stats fit two tidy rows. */
    .crawl-mockup-status-meta > :nth-last-child(-n+4) { display: none; }
    .crawl-mockup-spinner { width: 11px; height: 11px; margin-top: 1px; }
    .crawl-mockup-cancel { padding: 5px 10px; font-size: 9px; }
    .crawl-mockup-table .c-parent { width: 0; }
    .crawl-mockup-table td.parent { display: none; }
    .crawl-mockup-table th:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .crawl-mockup *, .crawl-mockup *::before, .crawl-mockup *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================
   POLICIES (Trust & Safety)
============================================ */
.policies-block {
    margin-top: 56px;
    padding: 36px;
    background: var(--bg-dark-2);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius);
}

.policies-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.policies-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.18);
    color: var(--violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.policies-head-icon svg { width: 18px; height: 18px; }

.policies-head h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-on-dark);
}

.policies-block > p {
    font-size: 14px;
    color: var(--text-muted-on-dark);
    margin-bottom: 24px;
    line-height: 1.55;
    max-width: 640px;
}

.policies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.policy-card {
    padding: 18px 20px;
    background: var(--bg-dark);
    border: 1px solid var(--border-on-dark);
    border-radius: 12px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.policy-card:hover {
    border-color: var(--violet);
    background: var(--bg-dark-3);
}

.policy-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.policy-card h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text-on-dark);
}

.policy-card-head svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted-on-dark);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.policy-card:hover .policy-card-head svg {
    color: var(--violet-light);
    transform: translate(2px, -2px);
}

.policy-card p {
    font-size: 12.5px;
    color: var(--text-muted-on-dark);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .policies-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CONTACT SECTION
============================================ */
.contact-section {
    background: var(--bg-light);
    color: var(--text-dark);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
    align-items: stretch;
}

.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    padding: 28px 32px;
    background: var(--bg-light-2);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.contact-card.address {
    flex: 0 0 auto;
}

.contact-card-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.contact-card-address {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

.contact-card-city {
    font-size: 15px;
    color: var(--text-dark-muted);
}

.contact-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    background: var(--bg-light-2);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    color: var(--text-dark);
}

.contact-link-card:hover {
    background: white;
    transform: translateX(4px);
    box-shadow: var(--shadow-card);
}

.contact-link-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.contact-link-card:hover .contact-link-icon {
    background: var(--violet);
    color: white;
}

.contact-link-card.tg .contact-link-icon { color: #0088cc; }
.contact-link-card.email .contact-link-icon { color: var(--violet); }
.contact-link-card.abuse .contact-link-icon { color: #f59e0b; }

.contact-link-card.tg:hover .contact-link-icon,
.contact-link-card.email:hover .contact-link-icon,
.contact-link-card.abuse:hover .contact-link-icon {
    color: white;
}

.contact-link-icon svg { width: 22px; height: 22px; }

.contact-link-text {
    flex: 1;
    min-width: 0;
}

.contact-link-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.contact-link-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    word-break: break-all;
}

.contact-link-card.tg .contact-link-value,
.contact-link-card.email .contact-link-value,
.contact-link-card.abuse .contact-link-value {
    font-family: var(--font-mono);
    font-size: 14px;
}

.contact-link-arrow {
    flex-shrink: 0;
    color: var(--text-dark-muted);
    transition: all 0.2s ease;
}

.contact-link-card:hover .contact-link-arrow {
    color: var(--violet);
    transform: translateX(4px);
}

.contact-map {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-light-2);
    border: 1px solid var(--border-light);
    min-height: 480px;
    position: relative;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-hours {
    margin-top: 28px;
    padding: 20px 24px;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-hours-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: white;
    color: var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-hours-icon svg { width: 18px; height: 18px; }

.contact-hours-text {
    flex: 1;
}

.contact-hours-text strong {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.contact-hours-text span {
    font-size: 13px;
    color: var(--text-dark-muted);
}

@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-map { min-height: 380px; }
}

/* ============================================
   PRESET PICKER — interactive
============================================ */
.preset-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: center;
}
.preset-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.preset-tab svg {
    color: var(--violet-light);
    flex-shrink: 0;
}
.preset-tab:hover {
    border-color: var(--violet);
    color: var(--text);
}
.preset-tab.active {
    background: rgba(124, 58, 237, 0.15);
    border-color: var(--violet);
    color: var(--text);
}
.preset-tab-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--bg-3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.preset-tab.active .preset-tab-tag {
    background: var(--violet);
    color: #fff;
}
@media (max-width: 720px) {
    .preset-tab-tag { display: none; }
    .preset-tab { padding: 9px 13px; font-size: 13px; }
}

/* Smooth fade transition for preset content */
.market-example-code pre,
.market-example-fields {
    transition: opacity 0.15s ease;
}
.market-example.switching .market-example-code pre,
.market-example.switching .market-example-fields {
    opacity: 0.3;
}

/* ============================================
   MOBILE POLISH — trim the roughest desktop card/block paddings so content
   isn't crammed into a narrow column on phones. Appended at end-of-file so it
   wins the cascade over the base rules above (media queries add no specificity).
============================================ */
@media (max-width: 600px) {
    .ethics-statement { padding: 24px 20px; }
    .ethics-statement::before { left: 16px; font-size: 56px; }
    .policies-block { padding: 22px 20px; }
    .contact-card { padding: 22px 20px; }
    .contact-link-card { padding: 16px 18px; gap: 12px; }
    .market-cta { padding: 22px 20px; }

    /* Card consistency: make the Use-cases + Media cards match the Blog cards
       (same wrapper width, card chrome, image radius/margin) so the three card
       sections read identically on mobile. uc-wrap had no mobile padding (stayed
       48px → narrow cards); media-wrap was 32/24 — align both to blog-wrap's. */
    .media-wrap, .uc-wrap { padding: 28px 20px; }
    .media-card, .uc-card { padding: 12px; border-radius: 20px; background: #fff; }
    .media-img, .uc-illustration { border-radius: 14px; margin-bottom: 14px; }

    /* Preset picker: ragged wrap → tidy equal-width 2-column grid. */
    .preset-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .preset-tab { width: 100%; justify-content: center; }
}