/* ==========================================================================
   EV Charge Flows — shared stylesheet for the long-form pages
   (why-evchargeflows.html, product.html, investors.html)

   The original pages (index/about/features/team/sustainability/privacy) keep
   their own inline <style> blocks. This file reuses the exact same design
   tokens so the new pages read as part of the same site, and adds the extra
   components the long-form pages need: KPI grids, data tables, timelines,
   personas, SWOT boards and chart frames.
   ========================================================================== */

:root {
    --primary: #059669;
    --primary-dark: #047857;
    --primary-light: #d1fae5;
    --primary-tint: #ecfdf5;
    --accent: #0ea5e9;
    --accent-light: #e0f2fe;
    --dark: #0f172a;
    --gray-900: #0b1220;
    --gray-800: #1e293b;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-400: #94a3b8;
    --gray-200: #e2e8f0;
    --gray-100: #f1f5f9;
    --gray-50: #f8fafc;
    --white: #ffffff;
    --warn: #b45309;
    --warn-light: #fef3c7;
    --danger: #dc2626;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.25);
    --radius: 12px;
    --radius-lg: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    color: var(--gray-800);
    line-height: 1.6;
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--dark); line-height: 1.2; }

/* Multilingual wrapping guard.
   Finnish and Lithuanian compounds ("vertaislatauspalvelua", "takuuvarauksesta")
   and long Russian words are single unbreakable runs. Without this they paint
   outside their box — the box keeps its width, so nothing looks wrong in a
   layout probe, but the page picks up a horizontal scrollbar on narrow screens.
   The min-width:0 resets stop flex/grid children from refusing to shrink below
   their min-content width, which is what lets the wrap actually take effect. */
body { overflow-wrap: break-word; }
.bullet-list li, .bullet-list li > *,
.card, .split-panel, .kpi-card, .flow-step, .swot-box, .persona,
.econ-wrap > *, .split > *, .card-grid > *, .kpi-grid > *, .flow-strip > *,
.hero-metric, .lang-list li, .econ-line { min-width: 0; }

/* --- UTILITIES ----------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--primary);
    color: var(--white); padding: 12px 20px; z-index: 2000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 8px; font-weight: 600;
    transition: all 0.2s ease; cursor: pointer; border: none; font-size: 16px;
    font-family: inherit;
}
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--white); color: var(--primary); border: 2px solid var(--primary); }
.btn-secondary:hover { background: var(--primary-light); }
.btn-white { background: var(--white); color: var(--primary-dark); }
.btn-white:hover { background: var(--gray-100); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.08); color: var(--white); border: 1px solid rgba(255,255,255,0.28); }
.btn-ghost:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }

/* keep in-page anchor targets clear of the fixed header */
:target, section[id], [id^="main"] { scroll-margin-top: 92px; }

.section { padding: 88px 0; }
.section-tight { padding: 64px 0; }
.section-alt { background: var(--gray-50); }
.section-dark { background: var(--dark); color: var(--gray-400); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--primary-dark); background: var(--primary-light);
    padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
.section-dark .eyebrow { color: var(--primary-light); background: rgba(5,150,105,0.18); }

.section-title { font-size: 2.35rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; }
.section-title.center { text-align: center; }
.section-subtitle { font-size: 1.08rem; color: var(--gray-600); max-width: 720px; margin-bottom: 44px; }
.section-subtitle.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-dark .section-title { color: var(--white); }
.section-dark .section-subtitle { color: var(--gray-400); }

.lead { font-size: 1.12rem; color: var(--gray-600); }
.muted { color: var(--gray-600); }
.source-note {
    font-size: 0.85rem; color: var(--gray-400); margin-top: 20px; line-height: 1.7;
}
.section-dark .source-note { color: var(--gray-400); }

/* --- NAVBAR -------------------------------------------------------------- */
header.site-header {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-100);
}
header.site-header nav { display: flex; justify-content: space-between; align-items: center; height: 72px; position: relative; }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; }
.logo-mark { height: 32px; width: auto; display: block; }
.nav-links { display: flex; gap: 13px; align-items: center; }
.nav-links a { font-weight: 500; color: var(--gray-600); transition: color 0.2s; font-size: 0.9rem; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-links a.active { font-weight: 600; }

.lang-switcher { display: flex; gap: 3px; align-items: center; background: var(--gray-100); padding: 4px; border-radius: 8px; }
.lang-btn {
    padding: 5px 7px; border: none; background: transparent; border-radius: 6px;
    cursor: pointer; font-weight: 600; color: var(--gray-600); transition: all 0.2s;
    font-family: inherit; font-size: 0.8rem;
}
.lang-btn.active { background: var(--white); color: var(--primary); box-shadow: var(--shadow-sm); }
.lang-btn:hover:not(.active) { color: var(--primary); }
.mobile-menu-btn { display: none; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: var(--dark); }

/* --- HERO ---------------------------------------------------------------- */
.page-hero {
    position: relative; overflow: hidden; color: var(--white);
    background: radial-gradient(1000px 520px at 12% -10%, rgba(5,150,105,0.55) 0%, rgba(15,23,42,0) 62%),
                radial-gradient(900px 480px at 92% 8%, rgba(14,165,233,0.42) 0%, rgba(15,23,42,0) 60%),
                linear-gradient(160deg, #0f172a 0%, #111f36 55%, #0b1220 100%);
    padding: 148px 0 84px;
}
.page-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(680px 380px at 50% 20%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(680px 380px at 50% 20%, #000 0%, transparent 78%);
}
.page-hero > .container { position: relative; z-index: 1; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
    color: #e2e8f0; font-size: 0.8rem; font-weight: 600;
    padding: 7px 14px; border-radius: 20px;
}
.hero-badge i { color: var(--primary-light); }
.hero-badge.badge-live i { color: #34d399; }
.page-hero h1 {
    font-size: 3.4rem; font-weight: 800; color: var(--white);
    letter-spacing: -0.02em; margin-bottom: 22px; max-width: 17ch;
}
.page-hero h1 .hl { color: #34d399; }
.page-hero h1 .hl-blue { color: #7dd3fc; }
.page-hero .hero-sub { font-size: 1.2rem; color: #cbd5e1; max-width: 62ch; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-metrics {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg); overflow: hidden;
}
.hero-metric { background: rgba(15,23,42,0.55); padding: 22px 20px; }
.hero-metric .val { font-size: 1.75rem; font-weight: 800; color: var(--white); line-height: 1.15; }
.hero-metric .lbl { font-size: 0.82rem; color: #94a3b8; margin-top: 6px; }

/* --- KPI / STAT GRIDS ---------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kpi-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-card {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 24px; transition: all 0.25s ease;
}
.kpi-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.kpi-card .val { font-size: 2rem; font-weight: 800; color: var(--primary-dark); line-height: 1.1; }
.kpi-card .lbl { font-size: 0.9rem; color: var(--gray-600); margin-top: 8px; }
.kpi-card .ref { font-size: 0.75rem; color: var(--gray-400); margin-top: 8px; display: block; }
.kpi-card.accent .val { color: var(--accent); }
.kpi-card.dark { background: var(--dark); border-color: var(--gray-800); }
.kpi-card.dark .val { color: #34d399; }
.kpi-card.dark .lbl { color: var(--gray-400); }

/* --- CARD GRIDS ---------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 28px; transition: all 0.25s ease;
}
/* Equal heights only for cards sitting directly in a grid row. Scoping this
   matters: a bare height:100% also applies to cards stacked inside a grid
   COLUMN, where each one then resolves to the full column height and the
   stack overflows its section. */
.card-grid > .card, .split > .card { height: 100%; }
/* a column of stacked cards */
.card-stack { display: flex; flex-direction: column; gap: 20px; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.card h3 { font-size: 1.14rem; font-weight: 700; margin-bottom: 10px; }
.card p { color: var(--gray-600); font-size: 0.96rem; }
.card-icon {
    width: 50px; height: 50px; border-radius: 12px;
    background: var(--primary-light); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 18px;
}
.card-icon.blue { background: var(--accent-light); color: #0369a1; }
.card-icon.amber { background: var(--warn-light); color: var(--warn); }
.card-icon.slate { background: var(--gray-100); color: var(--gray-700); }
.section-dark .card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.section-dark .card:hover { border-color: rgba(52,211,153,0.4); }
.section-dark .card p { color: var(--gray-400); }

/* --- LANGUAGE STATUS LIST ------------------------------------------------ */
.lang-list {
    list-style: none; margin: 18px 0 16px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.lang-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 9px;
    background: var(--gray-50);
}
.lang-name { font-weight: 600; color: var(--gray-800); font-size: 0.92rem; }
.lang-note { font-size: 0.85rem; color: var(--gray-600); }
.section-dark .lang-list li { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.section-dark .lang-name { color: #e2e8f0; }
.section-dark .lang-note { color: var(--gray-400); }
@media (max-width: 480px) { .lang-list { grid-template-columns: 1fr; } }

/* --- SPLIT (two-column narrative) ---------------------------------------- */
/* min-width:0 stops a wide table or SVG from forcing the grid column wider than
   its track — without it the column grows and the page scrolls sideways instead
   of the .table-wrap / .chart-scroll scrolling internally. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.split > * { min-width: 0; }
.card-grid > *, .kpi-grid > *, .flow-strip > *, .swot-grid > * { min-width: 0; }
.split-panel {
    border-radius: var(--radius-lg); padding: 34px; border: 1px solid var(--gray-200);
    background: var(--white);
}
.split-panel.tint-green { background: var(--primary-tint); border-color: #a7f3d0; }
.split-panel.tint-blue { background: var(--accent-light); border-color: #bae6fd; }
.split-panel h3 { font-size: 1.4rem; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.split-panel .panel-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 6px; }
.bullet-list { list-style: none; margin-top: 18px; }
.bullet-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; color: var(--gray-700); font-size: 0.97rem; }
.bullet-list li i { color: var(--primary); margin-top: 5px; flex-shrink: 0; }
.bullet-list li i.fa-xmark { color: var(--danger); }
.bullet-list.on-dark li { color: var(--gray-400); }

/* --- NUMBERED FLOW ------------------------------------------------------- */
.flow-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.flow-step {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 26px 22px; position: relative; transition: all .25s ease;
}
.flow-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.flow-step .num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--white);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
    margin-bottom: 16px;
}
.flow-step.blue .num { background: var(--accent); }
.flow-step h4 { font-size: 1.05rem; margin-bottom: 8px; }
.flow-step p { font-size: 0.9rem; color: var(--gray-600); }

/* --- DATA TABLES --------------------------------------------------------- */
/* position:relative makes this the containing block for the absolutely
   positioned .sr-only labels inside the cells — without it they escape the
   overflow clip and stretch the document's scroll width. */
.table-wrap {
    position: relative;
    overflow-x: auto; background: var(--white); border-radius: var(--radius);
    border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
    min-width: 0; max-width: 100%;
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
table.data { width: 100%; border-collapse: collapse; min-width: 620px; }
table.data th, table.data td { padding: 14px 20px; text-align: left; font-size: 0.94rem; }
table.data thead th {
    background: var(--dark); color: var(--white); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; white-space: nowrap;
}
table.data tbody tr { border-bottom: 1px solid var(--gray-100); }
table.data tbody tr:last-child { border-bottom: none; }
table.data tbody tr:hover { background: var(--gray-50); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td.center, table.data th.center { text-align: center; }
table.data .row-highlight { background: var(--primary-light); }
table.data .row-highlight:hover { background: #bbf7d0; }
table.data .row-total { background: var(--gray-50); font-weight: 700; }
table.data .fa-check { color: var(--primary); }
table.data .fa-xmark { color: var(--gray-400); }
.pos { color: var(--primary-dark); font-weight: 700; }
.neg { color: var(--danger); font-weight: 700; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.pill-done { background: var(--primary-light); color: var(--primary-dark); }
.pill-progress { background: var(--accent-light); color: #0369a1; }
.pill-todo { background: var(--warn-light); color: var(--warn); }
.pill-low { background: var(--gray-100); color: var(--gray-700); }

/* --- CALL-OUT ------------------------------------------------------------ */
.callout {
    border-left: 4px solid var(--primary); background: var(--primary-tint);
    padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--gray-700); font-size: 0.97rem;
}
.callout.amber { border-left-color: var(--warn); background: #fffbeb; }
.callout.blue { border-left-color: var(--accent); background: var(--accent-light); }
.callout strong { color: var(--dark); }

/* --- ECONOMICS PANEL ----------------------------------------------------- */
.econ-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: start; }
.econ-summary {
    background: var(--dark); color: var(--gray-400); border-radius: var(--radius-lg); padding: 32px;
}
.econ-summary h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 6px; }
.econ-summary .big { font-size: 3rem; font-weight: 800; color: #34d399; line-height: 1.1; margin: 18px 0 6px; }
.econ-summary .big-label { font-size: 0.95rem; color: var(--gray-400); }
.econ-summary hr { border: none; border-top: 1px solid var(--gray-800); margin: 24px 0; }
.econ-line { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 0.93rem; }
.econ-line span:last-child { font-variant-numeric: tabular-nums; color: var(--white); font-weight: 600; }

/* --- TIMELINE ------------------------------------------------------------ */
.timeline { position: relative; margin-top: 12px; }
.timeline::before {
    content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px;
    width: 2px; background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%); opacity: 0.35;
}
.tl-item { position: relative; padding: 0 0 30px 60px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
    position: absolute; left: 8px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--white); border: 3px solid var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 0.62rem; color: var(--primary);
}
.tl-item.future .tl-dot { border-color: var(--gray-400); color: var(--gray-400); }
.tl-period { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 4px; }
.tl-item.future .tl-period { color: var(--gray-600); }
.tl-item h4 { font-size: 1.08rem; margin-bottom: 6px; }
.tl-item p { color: var(--gray-600); font-size: 0.95rem; }
.section-dark .timeline .tl-dot { background: var(--dark); }
.section-dark .tl-item p { color: var(--gray-400); }
.section-dark .tl-period { color: #34d399; }

/* --- PERSONAS ------------------------------------------------------------ */
.persona {
    display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start;
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 30px;
}
.persona-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 2.3rem;
}
.persona.driver .persona-avatar { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); }
.persona h3 { font-size: 1.25rem; margin-bottom: 2px; }
.persona .persona-role { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 14px; }
.persona.driver .persona-role { color: #0369a1; }
.persona dl { margin-top: 6px; }
.persona dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); margin-top: 14px; }
.persona dd { color: var(--gray-700); font-size: 0.95rem; margin-top: 3px; }

/* --- SWOT ---------------------------------------------------------------- */
.swot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.swot-box { border-radius: var(--radius); padding: 26px; border: 1px solid var(--gray-200); background: var(--white); }
.swot-box h3 { font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.swot-box ul { list-style: none; }
.swot-box li { font-size: 0.93rem; color: var(--gray-700); padding: 7px 0 7px 20px; position: relative; }
.swot-box li::before { content: "▪"; position: absolute; left: 0; color: var(--gray-400); }
.swot-box.s { background: var(--primary-tint); border-color: #a7f3d0; }
.swot-box.w { background: var(--gray-50); }
.swot-box.o { background: var(--accent-light); border-color: #bae6fd; }
.swot-box.t { background: #fffbeb; border-color: #fde68a; }

/* --- CHART FRAME --------------------------------------------------------- */
.chart-frame {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
    padding: 28px; box-shadow: var(--shadow-sm); min-width: 0;
}
.chart-frame h3 { font-size: 1.1rem; margin-bottom: 4px; }
.chart-frame .chart-note { font-size: 0.85rem; color: var(--gray-400); margin-top: 14px; }
.chart-scroll { overflow-x: auto; }
.chart-scroll svg { min-width: 460px; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 0.85rem; color: var(--gray-600); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* --- ARCHITECTURE DIAGRAM ------------------------------------------------ */
.diagram-frame {
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); padding: 28px; overflow-x: auto;
}
.diagram-frame svg { min-width: 640px; height: auto; display: block; margin: 0 auto; }

/* --- LOGO / BRAND CHIPS -------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.brand-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px;
    padding: 12px 18px; font-weight: 600; color: var(--gray-700); font-size: 0.95rem;
}
.brand-chip i { color: var(--primary); }

/* --- CTA BAND ------------------------------------------------------------ */
.cta-band {
    padding: 84px 0; text-align: center; color: var(--white);
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}
.cta-band h2 { font-size: 2.3rem; font-weight: 800; margin-bottom: 14px; color: var(--white); }
.cta-band p { font-size: 1.15rem; opacity: 0.92; max-width: 640px; margin: 0 auto 30px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- FOOTER -------------------------------------------------------------- */
footer.site-footer { background: var(--dark); color: var(--gray-400); padding: 76px 0 36px; }
footer.site-footer .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 44px; }
footer.site-footer .footer-brand .logo { margin-bottom: 18px; color: var(--white); }
footer.site-footer .footer-brand p { font-size: 0.95rem; line-height: 1.8; max-width: 400px; margin-bottom: 20px; }
footer.site-footer h4 { color: var(--white); font-size: 1.02rem; margin-bottom: 18px; }
footer.site-footer ul { list-style: none; }
footer.site-footer .footer-col ul li { margin-bottom: 11px; }
footer.site-footer .footer-col ul li a { color: var(--gray-400); font-size: 0.94rem; transition: color 0.2s; }
footer.site-footer .footer-col ul li a:hover { color: var(--primary); }
footer.site-footer .footer-contact ul li { margin-bottom: 11px; display: flex; align-items: center; gap: 12px; }
footer.site-footer .footer-contact ul li i { color: var(--primary); width: 20px; }
footer.site-footer .footer-contact ul li a:hover { color: var(--primary); }
footer.site-footer .footer-bottom {
    border-top: 1px solid var(--gray-800); padding-top: 28px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 0.88rem; color: var(--gray-400);
}

/* --- RESPONSIVE ---------------------------------------------------------- */
/* The full menu (7 links + language switcher + CTA) needs roughly 1040px beside the
   logo. Collapsing to the hamburger below that keeps the brand from being squeezed
   onto three lines, which is what happened when it shared the 768px breakpoint. */
@media (max-width: 1080px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    .nav-links.open {
        display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
        position: absolute; top: 72px; left: 0; width: 100%;
        background: var(--white); padding: 22px; box-shadow: var(--shadow-md);
        animation: navSlideDown 0.2s ease; max-height: calc(100vh - 72px); overflow-y: auto;
    }
    .nav-links.open .lang-switcher { align-self: flex-start; }
    .nav-links.open .btn { width: 100%; }
}
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .flow-strip { grid-template-columns: repeat(3, 1fr); }
    .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .econ-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 992px) {
    .page-hero h1 { font-size: 2.6rem; }
    .hero-metrics { grid-template-columns: repeat(2, 1fr); }
    .card-grid, .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
    .split { grid-template-columns: 1fr; }
    .swot-grid { grid-template-columns: 1fr; }
    footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .page-hero { padding: 120px 0 64px; }
    .page-hero h1 { font-size: 2.1rem; max-width: none; }
    .page-hero .hero-sub { font-size: 1.05rem; }
    .section, .section-tight { padding: 60px 0; }
    .section-title { font-size: 1.8rem; }
    .kpi-grid, .kpi-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .flow-strip { grid-template-columns: 1fr; }
    .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
    .persona { grid-template-columns: 1fr; }
    .persona-avatar { width: 72px; height: 72px; font-size: 1.8rem; }
    footer.site-footer .footer-grid { grid-template-columns: 1fr; }
    .cta-band h2 { font-size: 1.85rem; }
}
@media (max-width: 480px) {
    .container, .container-narrow { padding: 0 16px; }
    .page-hero h1 { font-size: 1.8rem; }
    .hero-metrics { grid-template-columns: 1fr; }
    .kpi-grid, .kpi-grid.cols-3 { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-buttons .btn { width: 100%; max-width: 300px; }
    .split-panel, .card, .chart-frame, .persona { padding: 22px; }
    .lang-btn { padding: 6px 9px; font-size: 0.8rem; }
}

@keyframes navSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media print {
    header.site-header, .cta-band, .mobile-menu-btn, .lang-switcher { display: none !important; }
    .page-hero { background: var(--dark) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .section, .section-tight { padding: 24px 0; page-break-inside: avoid; }
}