/*
 * ============================================================
 * DESIGN SYSTEM — Fenara  (fnr-core.css)
 * ============================================================
 * PRIMARY:   #1b4ddb  — deep cobalt blue
 * PRIMARY-DK:#143aaa  — navy blue
 * ACCENT:    #f59e0b  — amber gold
 * SUCCESS:   #059669  — emerald
 * INK:       #0d1f2d  — near-black (blue tint)
 * MUTED:     #4e6277  — slate gray
 * BORDER:    #dde5ef  — cool gray border
 * SURFACE:   #f2f6fb  — light cool surface
 * WHITE:     #ffffff
 *
 * BODY FONT: 'Palatino Linotype', 'Book Antiqua', Palatino, serif
 * UI FONT:   'Segoe UI', 'Helvetica Neue', Arial, sans-serif
 *
 * RADIUS:    --r-xs:4px  --r-sm:8px  --r-md:12px  --r-lg:18px  --r-xl:28px
 * SHADOW L1: 0 2px 8px rgba(13,31,45,.07)
 * SHADOW L2: 0 6px 20px rgba(13,31,45,.10), 0 1px 4px rgba(13,31,45,.05)
 * SHADOW L3: 0 12px 40px rgba(13,31,45,.14), 0 4px 12px rgba(13,31,45,.07)
 * ============================================================
 */

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== CSS VARIABLES ===== */
:root {
    --c-primary:   #1b4ddb;
    --c-primary-dk:#143aaa;
    --c-accent:    #f59e0b;
    --c-success:   #059669;
    --c-ink:       #0d1f2d;
    --c-muted:     #4e6277;
    --c-border:    #dde5ef;
    --c-surface:   #f2f6fb;
    --c-white:     #ffffff;

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 28px;

    --sh-1: 0 2px 8px rgba(13,31,45,.07);
    --sh-2: 0 6px 20px rgba(13,31,45,.10), 0 1px 4px rgba(13,31,45,.05);
    --sh-3: 0 12px 40px rgba(13,31,45,.14), 0 4px 12px rgba(13,31,45,.07);

    --font-body: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    --font-ui:   'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--c-surface);
    color: var(--c-ink);
    line-height: 1.75;
    font-size: 16px;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== TOPBAR (SITE HEADER) ===== */
.topbar {
    background: linear-gradient(90deg, var(--c-primary-dk) 0%, var(--c-primary) 100%);
    color: #fff;
    padding: 13px 0;
    text-align: center;
    letter-spacing: .04em;
    font-size: 14px;
    font-family: var(--font-ui);
    position: relative;
}
.topbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent) 0%, #fcd34d 100%);
}
.topbar__brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-ui);
}

/* ===== HERO BAND (PAGE HERO) ===== */
.hero-band {
    background: linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 60%, #2563eb 100%);
    color: #fff;
    padding: 64px 20px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.hero-band__pill {
    display: inline-block;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50px;
    padding: 5px 18px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-family: var(--font-ui);
    position: relative;
}
.hero-band__h {
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    max-width: 700px;
    margin: 0 auto 16px;
    position: relative;
}
.hero-band__sub {
    font-size: 16px;
    opacity: .82;
    max-width: 520px;
    margin: 0 auto;
    font-family: var(--font-ui);
    position: relative;
}

/* ===== PAGE BODY (CONTENT WRAP) ===== */
.pg-body {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 20px 80px;
}

/* ===== PROSE PANEL (ARTICLE CARD) ===== */
.prose-panel {
    background: var(--c-white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    padding: 48px 52px;
    border-top: 4px solid var(--c-primary);
}
@media (max-width: 600px) {
    .prose-panel { padding: 28px 18px; }
}

/* ===== TYPOGRAPHY inside prose-panel ===== */
.prose-panel h2 {
    font-size: clamp(19px, 3vw, 26px);
    color: var(--c-primary);
    margin: 36px 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-border);
    font-family: var(--font-ui);
    font-weight: 700;
}
.prose-panel h2:first-child { margin-top: 0; }

.prose-panel h3 {
    font-size: 17px;
    color: var(--c-ink);
    margin: 22px 0 8px;
    font-family: var(--font-ui);
    font-weight: 700;
}

.prose-panel p {
    color: var(--c-muted);
    margin-bottom: 14px;
}

.prose-panel ul,
.prose-panel ol {
    padding-left: 22px;
    color: var(--c-muted);
    margin-bottom: 16px;
}
.prose-panel li { margin-bottom: 6px; }

.prose-panel strong { color: var(--c-ink); }

/* ===== FEATURE GRID (INFO GRID) ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin: 24px 0;
}
.feature-card {
    background: var(--c-surface);
    border-radius: var(--r-md);
    padding: 22px 18px;
    border-left: 4px solid var(--c-primary);
    box-shadow: var(--sh-1);
}
.feature-card__ico { font-size: 28px; margin-bottom: 10px; }
.feature-card__name {
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: 6px;
    font-size: 15px;
    font-family: var(--font-ui);
}
.feature-card__desc { color: var(--c-muted); font-size: 14px; }

/* ===== CALLOUT (HIGHLIGHT BOX) ===== */
.callout {
    background: linear-gradient(135deg, #fffbeb 0%, #fef9ec 100%);
    border: 2px solid var(--c-accent);
    border-radius: var(--r-md);
    padding: 20px 24px;
    margin: 24px 0;
}
.callout p { color: var(--c-ink); margin: 0; }

/* ===== DATA TABLE (STYLED TABLE) ===== */
.dt {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    font-family: var(--font-ui);
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--sh-1);
}
.dt th {
    background: var(--c-primary);
    color: #fff;
    padding: 13px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
}
.dt td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-muted);
}
.dt tr:last-child td { border-bottom: none; }
.dt tr:nth-child(even) td { background: rgba(242,246,251,.6); }

/* ===== CHIP (BADGE) ===== */
.chip {
    display: inline-block;
    background: var(--c-accent);
    color: #111;
    font-weight: 700;
    border-radius: var(--r-sm);
    padding: 3px 10px;
    font-size: 12px;
    font-family: var(--font-ui);
}
.chip--yes { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.chip--no  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ===== FLOW (STEPS) ===== */
.flow { counter-reset: fstep; margin: 20px 0; }
.flow__item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}
.flow__num {
    counter-increment: fstep;
    flex-shrink: 0;
    width: 40px; height: 40px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    font-family: var(--font-ui);
    box-shadow: 0 4px 12px rgba(27,77,219,.3);
}
.flow__num::before { content: counter(fstep); }
.flow__body { padding-top: 6px; }
.flow__name {
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: 4px;
    font-family: var(--font-ui);
    font-size: 15px;
}
.flow__desc { color: var(--c-muted); font-size: 14px; line-height: 1.6; }

/* ===== CONSENT BAR (COOKIE BANNER) ===== */
.consent-strip {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(13,31,45,.97);
    color: #fff;
    z-index: 999;
    padding: 18px 24px;
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.08);
}
.consent-strip__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.consent-strip__msg { font-size: 14px; color: #c8d4e0; flex: 1; min-width: 200px; font-family: var(--font-ui); }
.consent-strip__msg a { color: var(--c-accent); }
.consent-strip__actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-strip__yes,
.consent-strip__skip {
    padding: 9px 22px;
    border-radius: var(--r-sm);
    border: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--font-ui);
    transition: opacity .2s;
}
.consent-strip__yes  { background: var(--c-primary); color: #fff; }
.consent-strip__skip { background: transparent; color: #8a95a4; border: 1px solid #2e3f52; }
.consent-strip__yes:hover, .consent-strip__skip:hover { opacity: .85; }

/* ===== SITE FOOTER ===== */
.site-foot {
    background: #091827;
    color: #7a8fa3;
    padding: 60px 20px 30px;
    position: relative;
    overflow: hidden;
    font-family: var(--font-ui);
}
.site-foot .container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.site-foot__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
@media (max-width: 900px) { .site-foot__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .site-foot__row { grid-template-columns: 1fr; gap: 28px; } }

.site-foot__about h3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: .08em;
}
.site-foot__about p { font-size: 14px; line-height: 1.7; }

.site-foot__col h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #fff;
    margin-bottom: 16px;
    font-weight: 700;
}
.site-foot__nav,
.site-foot__legal { display: flex; flex-direction: column; gap: 9px; }
.site-foot__nav a,
.site-foot__legal a {
    color: #7a8fa3;
    font-size: 14px;
    text-decoration: none;
    transition: color .2s;
}
.site-foot__nav a:hover,
.site-foot__legal a:hover { color: #fff; }
.site-foot__contacts p { font-size: 14px; margin-bottom: 8px; }

/* Footer notice (disclaimer) */
.site-foot__notice {
    border-top: 1px solid #172535;
    margin-bottom: 28px;
    padding-top: 24px;
}
.site-foot__notice-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-sm);
    padding: 18px 22px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.site-foot__notice-text { font-size: 12px; line-height: 1.75; color: #5e7285; }
.site-foot__notice-text strong { color: #8faabb; font-weight: 700; }

.site-foot__line { border: none; border-top: 1px solid #172535; margin-bottom: 24px; }
.site-foot__base { text-align: center; }
.site-foot__copy { font-size: 13px; }

/* Deco glows */
.site-foot__glow-a {
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27,77,219,.2) 0%, transparent 70%);
    top: -100px; right: -80px;
    pointer-events: none;
}
.site-foot__glow-b {
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 70%);
    bottom: -60px; left: 8%;
    pointer-events: none;
}