/* ═══════════════════════════════════════════════════════
   Defend.bg — v2 skin for the inner pages
   Loaded after main.css + v2.css. Re-maps the legacy design
   tokens onto the v2 system and restyles the shared blocks
   (page heroes, cards, forms, tables) without touching markup.
   ═══════════════════════════════════════════════════════ */

:root {
    /* Brand — mint family. --accent is the interactive colour on LIGHT
       surfaces, so it must stay ≥4.5:1 on white; dark surfaces scope it
       to the bright mint further down. */
    --accent: #08795A;
    --accent-dark: #05614A;
    --accent-light: #35E8B4;
    --accent-glow: rgba(35, 217, 165, .16);
    --accent-subtle: rgba(35, 217, 165, .10);

    --navy-900: #060B14;
    --navy-800: #0A1220;
    --navy-700: #111C2E;
    --navy-600: #1B2A40;
    --navy-500: #2A3B52;
    --navy-400: #4A5A6E;
    --navy-300: #8A9AB0;

    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F7FA;
    --bg-tertiary: #EEF2F6;
    --bg-card: #FFFFFF;

    --text-primary: #0F1A2B;
    --text-secondary: #4A5A6E;
    --text-muted: #7A8797;

    --border: #E2E8EF;
    --border-hover: #D5DDE6;

    --success: #17B889;
    --danger: #E0433C;
    --warning: #F5B342;

    --shadow-sm: 0 1px 2px rgba(15,26,43,.05);
    --shadow-md: 0 8px 20px -12px rgba(15,26,43,.28);
    --shadow-lg: 0 14px 30px -18px rgba(15,26,43,.35);
    --shadow-xl: 0 24px 50px -24px rgba(15,26,43,.4);
    --shadow-accent: 0 8px 24px -10px rgba(35,217,165,.5);

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --max-width: 1280px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
}

body { font-family: var(--font-body); color: var(--text); }

/* Legacy teal leftovers that were hardcoded in main.css */
.tr-summary--info { background: rgba(35,217,165,.06); border-left-color: var(--accent); }
.tr-row--info .tr-row__status { color: var(--accent); }
.skip-link { background: var(--ink-900); color: #fff; }

/* ─── Buttons ───────────────────────────────────────── */
.btn {
    border-radius: var(--r-sm); border-width: 1px; font-family: var(--v2-font);
    font-size: .9375rem; padding: 12px 22px; letter-spacing: -.005em;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 14px 26px; font-size: .9375rem; }
.btn--primary { background: var(--mint-500); color: var(--ink-950); border-color: transparent; }
.btn--primary:hover { background: var(--mint-400); color: var(--ink-950); box-shadow: 0 6px 20px -6px var(--mint-glow); transform: none; }
.btn--outline { background: #fff; color: var(--text); border-color: var(--line-2); }
.btn--outline:hover { background: #fff; color: var(--text); border-color: var(--text); transform: none; }

/* ─── Section scaffolding ───────────────────────────── */
.section__container { max-width: var(--container); padding: 64px var(--gutter); }
.section__header { margin-bottom: 36px; text-align: left; }
.section__subtitle { margin-left: 0; margin-right: 0; }
.service-benefits__title, .service-process__title, .service-related__title,
.tools-dir-section h2, .tool-faq h2, .tool-related h2 { text-align: left; letter-spacing: -.03em; }
.faq-section .section__container, .tool-faq .section__container { max-width: var(--container); }
.faq-section .faq-item, .tool-faq .tool-faq__item, .faq-section .section__header { max-width: 940px; }
.section__tag {
    background: none; padding: 0; border-radius: 0;
    color: var(--text-3); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px;
}
.section__title { font-size: clamp(1.7rem, 3vw, 2.25rem); color: var(--text); letter-spacing: -.03em; line-height: 1.14; }
.section__subtitle { font-size: 1rem; color: var(--text-2); }

/* ═══════════════════════════════════════════════════════
   PAGE HEROES — one dark band for every inner page
   ═══════════════════════════════════════════════════════ */
.page-hero,
.service-hero,
.tools-hero,
.tp-hero,
.apply-hero,
.ai-hero {
    position: relative;
    background: var(--ink-900);
    color: #fff;
    overflow: hidden;
    /* bright mint for descendants that paint with var(--accent) */
    --accent: var(--mint-500);
    --accent-dark: var(--mint-400);
    --accent-subtle: rgba(35,217,165,.12);
}
.page-hero::before,
.service-hero::before,
.tools-hero::before,
.tp-hero::before,
.apply-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(700px 320px at 72% 30%, rgba(35,217,165,.16), transparent 62%),
        radial-gradient(520px 300px at 8% 110%, rgba(35,120,217,.10), transparent 60%);
}
.page-hero::after,
.service-hero::after,
.tools-hero::after,
.tp-hero::after,
.apply-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse at 60% 40%, #000 10%, transparent 72%);
}
.page-hero > *, .service-hero > *, .tools-hero > *, .tp-hero > *, .apply-hero > * { position: relative; z-index: 1; }

.page-hero { padding: calc(var(--nav-height) + 52px) var(--gutter) 52px; text-align: left; }
.page-hero__container { max-width: var(--container); }
.page-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.page-hero p { color: var(--ink-200); margin-top: 10px; max-width: 60ch; font-size: .9375rem; }
.page-hero--blog { padding: calc(var(--nav-height) + 52px) var(--gutter) 52px; }

.service-hero { background: var(--ink-900); padding: calc(var(--nav-height) + 52px) var(--gutter) 52px; text-align: left; }
.service-hero__bg, .service-hero__glow, .service-hero__grid { display: none; }
.service-hero__container { max-width: var(--container); margin: 0; }
.service-hero__breadcrumb { justify-content: flex-start; color: var(--ink-300); font-size: .75rem; margin-bottom: 18px; }
.service-hero__breadcrumb a { color: var(--ink-200); }
.service-hero__breadcrumb a:hover { color: var(--mint-500); }
.service-hero__icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(35,217,165,.10); border: 1.5px solid rgba(35,217,165,.5);
    color: var(--mint-500); margin-bottom: 18px;
}
.service-hero__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; }
.service-hero__subtitle { color: var(--ink-200); font-size: 1rem; max-width: 56ch; margin: 0 0 22px; }
.service-hero__cta.btn--lg { margin-top: 4px; }

.tools-hero { padding: calc(var(--nav-height) + 52px) var(--gutter) 44px; text-align: left; }
.tools-hero__container { max-width: var(--container); margin: 0; }
.tools-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; }
.tools-hero__container > p, .tools-hero > p { color: var(--ink-200); font-size: .9375rem; }
.tools-hero__free { color: var(--mint-500); }
.tools-hero__meta { justify-content: flex-start; color: var(--ink-300); }
.tools-hero__meta strong { color: #fff; }
.tools-breadcrumb, .tp-bc { color: var(--ink-300); }
.tools-breadcrumb a, .tp-bc a { color: var(--ink-200); }
.tools-breadcrumb a:hover, .tp-bc a:hover { color: var(--mint-500); }

.tp-hero { padding: calc(var(--nav-height) + 48px) var(--gutter) 0; }
.tp-hero h1 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -.03em; }
.tp-hero .tp-sub { color: var(--ink-200); }
.tp-icon { background: rgba(35,217,165,.10); border: 1.5px solid rgba(35,217,165,.5); color: var(--mint-500); }

.apply-hero { padding: calc(var(--nav-height) + 44px) var(--gutter) 44px; }

/* ═══════════════════════════════════════════════════════
   CARDS, FORMS, TABLES — shared polish
   ═══════════════════════════════════════════════════════ */
.blog-card, .faq-item, .job-card, .team-card, .timeline__card, .pricing-card,
.about-mvv__card, .careers-why__card, .service-benefit-card, .service-related-card,
.tools-dir-card, .tool-related__card, .tp-related__card, .ai-showcase__card, .tp-facts, .tp-tips, .tp-help {
    border-color: var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.blog-card:hover, .job-card:hover, .team-card:hover, .about-mvv__card:hover,
.careers-why__card:hover, .service-benefit-card:hover, .service-related-card:hover,
.tools-dir-card:hover, .tool-related__card:hover, .tp-related__card:hover {
    border-color: var(--line-2);
    box-shadow: 0 14px 30px -18px rgba(15,26,43,.35);
    transform: translateY(-2px);
}
.blog-card__title, .team-card__name, .job-card__info h3, .about-mvv__card h3,
.careers-why__card h3, .service-benefit-card h3, .service-related-card h3 {
    letter-spacing: -.02em; color: var(--text);
}
.blog-card__link, .service-related-card__link, .article__service-link,
.tool-related__card span, .tp-related__card span, .careers-general a {
    color: var(--accent); font-weight: 600;
}
.blog-card__date { color: var(--text-3); letter-spacing: .04em; }
.blog-filter { border-radius: 999px; border-color: var(--line-2); font-weight: 500; }
.blog-filter--active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.blog-filter:hover:not(.blog-filter--active) { background: var(--paper-2); border-color: var(--line-2); color: var(--text); }

/* Icon chips that used a teal tint */
.about-mvv__icon, .careers-why__card i, .service-benefit-card__icon,
.service-related-card__icon, .tools-dir-card__icon, .tp-related__card-icon,
.ai-showcase__icon, .why-us__feature-icon, .consult-modal__icon {
    background: rgba(35,217,165,.10); color: var(--accent);
}

/* Forms */
.form-group label, .apply-form label, .gen-field label { font-weight: 600; font-size: .8125rem; color: var(--text); letter-spacing: -.005em; }
.form-group input, .form-group textarea, .apply-form input, .apply-form select,
.apply-form textarea, .gen-field input, .gen-field select, .gen-field textarea, .tp-field, .tp-input input {
    border-radius: var(--r-sm); border-color: var(--line-2); font-family: var(--v2-font); background: #fff;
}
.form-group input:focus, .form-group textarea:focus, .apply-form input:focus,
.apply-form select:focus, .apply-form textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,217,165,.18); outline: none;
}

/* Tables */
.comparison-table, .result-table { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.comparison-table th, .result-table th { background: var(--paper-2); color: var(--text); font-weight: 600; letter-spacing: -.01em; }
.comparison-table td, .result-table td { border-color: var(--line); }
.comparison-table .fa-check { color: var(--accent); }

/* FAQ / accordions */
.faq-item { margin-bottom: 10px; }
.faq-question { font-size: .9375rem; color: var(--text); }
.faq-question i, .job-card__toggle i, .tool-faq__item summary::-webkit-details-marker { color: var(--text-3); }
.faq-item--open, .job-card--open { border-color: var(--line-2); }
.tool-faq__item { border-color: var(--line); border-radius: var(--radius); }

/* Dark CTA strips */
.service-cta, .tools-bottom-cta, .tp-cta, .blog-cta {
    position: relative; overflow: hidden;
    background: var(--ink-900); color: #fff;
    --accent: var(--mint-500); --accent-dark: var(--mint-400);
}
.service-cta::before, .tools-bottom-cta::before, .tp-cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(600px 300px at 78% 40%, rgba(35,217,165,.16), transparent 60%);
}
.service-cta > *, .tools-bottom-cta > *, .tp-cta > * { position: relative; z-index: 1; }
.service-cta__content h2, .tools-bottom-cta h2, .tp-cta h3 { letter-spacing: -.03em; }
.service-cta__content p, .tools-bottom-cta p, .tp-cta p { color: var(--ink-200); }
.service-cta .btn--outline, .tools-bottom-cta__outline, .tp-cta .btn--outline, .blog-cta a.btn--outline {
    background: rgba(255,255,255,.03); color: #fff; border-color: rgba(255,255,255,.28);
}
.service-cta .btn--outline:hover, .tools-bottom-cta__outline:hover, .tp-cta .btn--outline:hover {
    background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5);
}

/* ─── Article / blog post ───────────────────────────── */
.article__title { letter-spacing: -.03em; line-height: 1.12; }
.article__content { font-size: 1.0625rem; line-height: 1.75; }
.article__content h2, .article__content h3 { letter-spacing: -.02em; }
.article__content a { color: var(--accent); }
.article__content blockquote { border-left-color: var(--accent); background: var(--paper-2); }
.article__content code, .tp-code code, .gen-record code { background: var(--paper-3); color: var(--text); }
.article__content pre { background: var(--ink-900); border-radius: var(--radius); }
.article__breadcrumb { color: var(--text-3); }
.article__breadcrumb a:hover { color: var(--accent); }
.article__cover img { border-radius: var(--radius); }

/* ─── About page ────────────────────────────────────── */
.about-numbers { background: var(--ink-900); color: #fff; --accent: var(--mint-500); }
.about-numbers__value { color: var(--mint-500); letter-spacing: -.03em; }
.about-numbers__label { color: var(--ink-200); }
.timeline__badge { background: var(--accent); color: #fff; }
.team-card__role { color: var(--accent); font-weight: 600; }
.cert-badge { border-color: var(--line); border-radius: 999px; }
.cert-badge i { color: var(--accent); }

/* ─── Pricing ───────────────────────────────────────── */
.pricing-card--popular { border-color: var(--accent); box-shadow: 0 18px 40px -24px rgba(8,121,90,.45); }
.pricing-card__badge { background: var(--mint-500); color: var(--ink-950); font-weight: 700; }
.pricing-card__amount, .pricing-card__currency { letter-spacing: -.03em; }
.pricing-card__features li i { color: var(--accent); }
.pricing-toggle__switch--annual { background: var(--accent); }
.pricing-toggle__save { color: var(--accent); font-weight: 600; }
.configurator__option--selected, .ca-opt--selected { border-color: var(--accent); background: rgba(35,217,165,.08); }
.config-line--total { color: var(--text); }

/* ─── Tools directory & tool pages ──────────────────── */
.tools-dir-section h2 i, .tools-category--featured h3 i { color: var(--accent); }
.tools-dir-card__arrow { color: var(--text-3); }
.tools-dir-card:hover .tools-dir-card__arrow { color: var(--accent); }
.tools-hero__input, .tp-input input { border-radius: var(--r-sm); font-family: var(--v2-font); }
.tools-hero__scan { margin: 18px 0 0; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.tools-hero__intro { margin: 16px 0 0; color: var(--ink-200); }
.tools-hero__meta { justify-content: flex-start; }
.tp-fact span { color: var(--text); font-weight: 600; }
.tp-tips h4 i, .tp-facts h4 i { color: var(--accent); }
.tp-how-step__num { background: var(--paper-3); color: var(--text); }
.tp-how-step__num--ok { background: var(--accent); color: #fff; }
.tp-blog-link, .tool-service-link { color: var(--accent); }
.tr-summary--pass { background: rgba(35,217,165,.08); border-left-color: var(--accent); }
.result-score--good { color: var(--accent); }

/* ─── AI audit page ─────────────────────────────────── */
.ai-hero { background: var(--ink-900); }
.ai-hero-badge { background: rgba(35,217,165,.12); border-color: rgba(35,217,165,.35); }
.ai-hero-badge-dot { background: var(--mint-500); }
.ai-hero-badge-text, .ai-hero-icon i { color: var(--mint-500); }
.ai-hero-btn { background: var(--mint-500); color: var(--ink-950); font-weight: 600; }
.ai-hero-btn:hover { background: var(--mint-400); }
.ai-r-card, .ai-r-sec, .ai-r-plan-item, .ai-r-passed-item { border-color: var(--line); border-radius: var(--radius); }
.ai-r-cta { background: var(--ink-900); --accent: var(--mint-500); }
.ai-r-cta-btn { background: var(--mint-500); color: var(--ink-950); }

/* ─── 404 ───────────────────────────────────────────── */
.page-hero--404 { padding: calc(var(--nav-height) + 96px) var(--gutter) 110px; }
.page-hero__eyebrow {
    display: block; font-family: var(--v2-font); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--mint-500); margin-bottom: 14px;
}
.page-hero__actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.page-hero__actions .btn--outline { background: rgba(255,255,255,.03); color: #fff; border-color: rgba(255,255,255,.28); }
.page-hero__actions .btn--outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }

/* ─── Featured (AI) tool chips ──────────────────────── */
.tools-category--featured { background: var(--ink-900); border-color: rgba(255,255,255,.08); }
.tools-category--featured h3 i { color: var(--mint-500); }
.tool-chip--featured { background: var(--mint-500) !important; color: var(--ink-950) !important; border-color: transparent !important; }
.tool-chip--featured:hover { background: var(--mint-400) !important; box-shadow: 0 6px 20px -6px var(--mint-glow); }

/* ─── Legal pages ───────────────────────────────────── */
.legal-page h2, .article__content h2 { color: var(--text); }

/* ─── Responsive trims ──────────────────────────────── */
@media (max-width: 960px) {
    .section__container { padding: 48px var(--gutter); }
    .page-hero, .page-hero--blog, .service-hero, .tools-hero, .apply-hero {
        padding-top: calc(var(--nav-height) + 36px); padding-bottom: 36px;
    }
    .tp-hero { padding-top: calc(var(--nav-height) + 32px); }
}

/* ═══════════════════════════════════════════════════════
   ALIGNMENT PASS — every page shares one container edge
   ═══════════════════════════════════════════════════════ */
.service-hero__container, .tools-hero__container, .page-hero__container { margin: 0 auto; }

/* Reading columns start at the container edge instead of floating mid-page */
.article__container { max-width: var(--container); margin: 0 auto; padding: 44px var(--gutter) 72px; }
.article__container > * { max-width: 820px; }
.service-content__container { max-width: var(--container); }
.service-content__body { max-width: 820px; }
.service-cta__container { max-width: var(--container); text-align: left; }
.service-cta__actions { justify-content: flex-start; }
.tp-content__inner { padding: 34px var(--gutter) 40px; }
.tp-related { padding: 30px var(--gutter) 38px; }
.tool-service-cta .section__container, .tool-faq .section__container, .tool-related .section__container { max-width: var(--container); }

/* Blog listing */
.blog-page { padding-top: 0; }
.blog-page .section__container { padding-top: 44px; }
.blog-page__filters { justify-content: flex-start; margin-bottom: 28px; }

/* Article header now lives in the dark hero */
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: .8125rem; color: var(--ink-300); }
.page-hero__meta i { margin-right: 6px; opacity: .7; }
.page-hero--blog h1 { margin-top: 14px; max-width: 24ch; }
.article__header { margin-bottom: 8px; }

/* Cards: left-aligned like the rest of the system */
.about-mvv__card, .careers-why__card, .service-benefit-card { text-align: left; }
.about-mvv__icon, .service-benefit-card__icon { margin: 0 0 14px; }
.careers-why__card i {
    display: inline-flex; width: 44px; height: 44px; border-radius: 50%;
    align-items: center; justify-content: center; font-size: 1.05rem;
    background: rgba(35,217,165,.10); color: var(--accent); margin: 0 0 14px;
}
.timeline__item--left .timeline__card { text-align: left; }
.team-card__photo { margin-left: auto; margin-right: auto; }

/* Tool page hero legibility */
.tp-hero .tp-sub { color: var(--ink-200); }
.tp-hero .tp-how { color: rgba(255,255,255,.55); }
.tp-ex { color: rgba(255,255,255,.5); }
.tp-ex a { color: var(--mint-500); }

/* Pricing: mono font made "По заявка" look double-spaced */
.pricing-card__custom { font-family: var(--v2-font); font-size: 1.75rem; letter-spacing: -.02em; }
.pricing-card__amount { font-family: var(--v2-font); }

/* ── One shared left edge: heroes drop their own side padding and let the
      container carry the gutter, exactly like .section__container does ── */
.page-hero, .service-hero, .tools-hero, .apply-hero { padding-left: 0; padding-right: 0; }
.page-hero__container, .service-hero__container, .tools-hero__container { padding: 0 var(--gutter); }

/* Tool detail pages keep a centred utility layout — but consistently centred */
.tp-hero { text-align: center; }
.tp-hero-title { justify-content: center; }
.tp-ex, .tp-hero .tp-how, .tp-hero .tp-sub { text-align: center; }
.tp-content__inner { max-width: 1000px; }
.tp-related h3 { text-align: center; }

/* Article/legal pages: tighter lead-in under the hero */
.article { padding-top: 0; }
.article__container { padding-top: 36px; }

/* Secondary action buttons that painted themselves with --accent */
.tp-help-btn, .gen-copy, .tp-myip__copy, .ca-result .btn--primary, .blog-cta a.btn--primary {
    background: var(--mint-500); color: var(--ink-950) !important; border-color: transparent;
}
.tp-help-btn:hover, .gen-copy:hover, .tp-myip__copy:hover, .ca-result .btn--primary:hover {
    background: var(--mint-400); color: var(--ink-950) !important;
}
.tp-hero .tp-how { color: rgba(255,255,255,.62); }

/* Wrappers that used to be capped with an inline max-width — keep the reading
   width, but start it at the container edge like every other block */
.faq-section__container, .service-body__container { max-width: var(--container); }
.service-body__container > * { max-width: 900px; }