/* ============================================================
   DESIGN SYSTEM — พรรคเศรษฐกิจชาติ
   Aesthetic: Political Premium Dark
   ============================================================ */

:root {
    --navy:        #12172b;
    --navy-mid:    #1e2540;
    --navy-light:  #2d3660;
    --purple:      #c9b8f0;
    --purple-mid:  #a898d8;
    --purple-pale: #f0ecfc;
    --purple-deep: #6b5aa8;
    --gold:        #f5c842;
    --white:       #ffffff;
    --off-white:   #f7f6fc;
    --text:        #12172b;
    --text-mid:    #475080;
    --text-muted:  #8890b8;
    --border:      rgba(201,184,240,0.18);
    --border-dark: rgba(201,184,240,0.08);
    --shadow-sm:   0 2px 10px rgba(18,23,43,0.07);
    --shadow-md:   0 8px 30px rgba(18,23,43,0.11);
    --shadow-lg:   0 20px 60px rgba(18,23,43,0.16);
    --ease:        cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
    font-family:'IBM Plex Sans Thai',sans-serif;
    background:var(--off-white);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    line-height:1.65;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
}

input,textarea,[contenteditable] {
    -webkit-user-select:text;
    -moz-user-select:text;
    user-select:text;
}

a { color:inherit; text-decoration:none; }

/* ============================================================
   HEADER
   ============================================================ */
header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 72px;
    height:68px;
    background:var(--navy);
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid var(--border-dark);
    box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
header::after {
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,transparent 0%,var(--purple) 40%,var(--gold) 60%,transparent 100%);
    opacity:0.6;
}

.logo-link { display:flex; align-items:center; }
.logo { height:2.5rem; filter:drop-shadow(0 0 10px rgba(201,184,240,0.25)); transition:filter 0.3s; }
.logo:hover { filter:drop-shadow(0 0 16px rgba(201,184,240,0.5)); }

header nav { display:flex; align-items:center; gap:2px; }
header nav a {
    color:rgba(255,255,255,0.65);
    font-size:0.92rem;
    font-weight:400;
    padding:7px 15px;
    border-radius:7px;
    letter-spacing:0.01em;
    transition:all 0.2s var(--ease);
}
header nav a:hover { color:#fff; background:rgba(255,255,255,0.07); }
header nav a.active { color:var(--purple); background:rgba(201,184,240,0.1); font-weight:600; }

.menu-btn { display:none; font-size:1.75rem; color:#fff; cursor:pointer; }

/* Offcanvas */
.offcanvas {
    position:fixed;
    top:0;right:-290px;
    width:290px;height:100%;
    background:var(--navy);
    display:flex;flex-direction:column;
    padding-top:88px;
    transition:right 0.4s var(--ease);
    z-index:2000;
    box-shadow:-6px 0 40px rgba(0,0,0,0.5);
    border-left:1px solid var(--border-dark);
}
.offcanvas.active { right:0; }
.offcanvas a {
    color:rgba(255,255,255,0.65);
    padding:15px 32px;
    font-size:1.05rem;
    border-left:3px solid transparent;
    transition:all 0.2s;
}
.offcanvas a:hover { color:#fff; background:rgba(255,255,255,0.05); border-left-color:var(--purple); }
.offcanvas a.active { color:var(--purple); border-left-color:var(--purple); background:rgba(201,184,240,0.06); }
.close-btn { position:absolute;top:18px;right:18px;font-size:2rem;color:rgba(255,255,255,0.5);cursor:pointer; }
.close-btn:hover { color:#fff; }

/* ============================================================
   LAYOUT
   ============================================================ */
main { padding:0 72px; }
section { padding:52px 0; }

.section-header {
    display:flex;
    align-items:baseline;
    gap:16px;
    margin-bottom:32px;
}
.section-header .heading { margin-bottom:0; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.heading {
    font-family:'Sarabun',sans-serif;
    font-size:2.6rem;
    font-weight:800;
    color:var(--text);
    margin-bottom:2rem;
    letter-spacing:-0.02em;
    line-height:1.15;
    position:relative;
    padding-bottom:14px;
}
.heading::after {
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:48px;height:3px;
    background:linear-gradient(90deg,var(--purple),var(--purple-mid));
    border-radius:2px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    display:block;
    position:relative;
    overflow:hidden;
    background:var(--navy);
    margin-bottom:0;
}
.hero img {
    width:100%;
    aspect-ratio:20/9;
    object-fit:cover;
    display:block;
    opacity:0.75;
    transition:transform 0.7s var(--ease), opacity 0.4s;
}
.hero:hover img { transform:scale(1.02); opacity:0.8; }

.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(18,23,43,0.82) 0%,rgba(18,23,43,0.3) 100%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:56px 72px;
}
.hero-badge {
    display:inline-block;
    background:rgba(201,184,240,0.18);
    border:1px solid rgba(201,184,240,0.35);
    color:var(--purple);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    padding:5px 14px;
    border-radius:999px;
    margin-bottom:16px;
    width:fit-content;
    backdrop-filter:blur(4px);
}
.hero-title {
    font-family:'Sarabun',sans-serif;
    font-size:3.8rem;
    font-weight:900;
    color:#fff;
    line-height:1.1;
    margin-bottom:12px;
    letter-spacing:-0.02em;
}
.hero-sub {
    color:rgba(255,255,255,0.65);
    font-size:1rem;
    letter-spacing:0.06em;
}

/* ============================================================
   STAT STRIP
   ============================================================ */
.stat-strip {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    background:var(--navy);
    border-radius:16px;
    padding:28px 40px;
    box-shadow:var(--shadow-md);
    margin:32px 0 0;
    border:1px solid var(--border-dark);
}
.stat-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    flex:1;
}
.stat-num {
    font-family:'Sarabun',sans-serif;
    font-size:2.2rem;
    font-weight:900;
    color:var(--purple);
    line-height:1;
}
.stat-label {
    font-size:0.8rem;
    color:rgba(255,255,255,0.5);
    letter-spacing:0.04em;
}
.stat-divider {
    width:1px;
    height:48px;
    background:var(--border-dark);
    flex-shrink:0;
    margin:0 8px;
}

/* ============================================================
   NEWS CARDS
   ============================================================ */
.news { padding-top:52px; }
.news-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
}
.news-card {
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(18,23,43,0.06);
    box-shadow:var(--shadow-sm);
    transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.news-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.news-img-wrap { overflow:hidden; aspect-ratio:16/9; }
.news-card img { width:100%;height:100%;object-fit:cover;transition:transform 0.4s var(--ease); }
.news-card:hover img { transform:scale(1.05); }

.news-content { padding:20px 22px 24px;flex:1;display:flex;flex-direction:column; }
.news-content h3 {
    font-family:'Sarabun',sans-serif;
    font-size:1.1rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
    line-height:1.4;
}
.news-content p { color:var(--text-mid);font-size:0.88rem;flex:1;margin-bottom:14px;line-height:1.6; }
.news-content span {
    color:var(--text-muted);
    font-size:0.82rem;
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:auto;
}
.news-content i { opacity:0;transition:all 0.2s; }
.news-card:hover .news-content i { opacity:1;transform:translateX(4px); }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section { padding:52px 0; }
.cta-box {
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
    border-radius:20px;
    padding:52px 56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    border:1px solid var(--border-dark);
    box-shadow:var(--shadow-lg);
    position:relative;
    overflow:hidden;
}
.cta-box::before {
    content:'';
    position:absolute;
    top:-60px;right:-60px;
    width:240px;height:240px;
    background:radial-gradient(circle,rgba(201,184,240,0.12) 0%,transparent 70%);
    pointer-events:none;
}
.cta-text h2 {
    font-family:'Sarabun',sans-serif;
    font-size:1.8rem;
    font-weight:800;
    color:#fff;
    margin-bottom:10px;
    line-height:1.25;
}
.cta-text p { color:rgba(255,255,255,0.6);font-size:0.95rem;max-width:480px; }
.cta-actions { display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap; }

.btn-cta-primary {
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 28px;
    background:var(--purple);
    color:var(--navy);
    font-weight:700;
    font-size:0.95rem;
    border-radius:9px;
    border:none;cursor:pointer;
    transition:all 0.25s var(--ease);
    white-space:nowrap;
}
.btn-cta-primary:hover { background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,184,240,0.4); }

.btn-cta-secondary {
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 28px;
    background:transparent;
    color:rgba(255,255,255,0.75);
    font-weight:600;
    font-size:0.95rem;
    border-radius:9px;
    border:1.5px solid rgba(255,255,255,0.2);
    cursor:pointer;
    transition:all 0.25s var(--ease);
    white-space:nowrap;
}
.btn-cta-secondary:hover { color:#fff;border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.06);transform:translateY(-2px); }

/* ============================================================
   BOARD CARDS
   ============================================================ */
.board { padding:52px 0; border-top:1px solid rgba(18,23,43,0.06); }
.board:first-of-type { border-top:none; }

.board-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:28px;
}
.board-grid--center {
    display:flex;
    justify-content:center;
}
.board-grid--center .board-card {
    width:200px;
    max-width:200px;
    flex-shrink:0;
}
.board-grid--center .board-card img {
    width:200px;
    height:200px;
    aspect-ratio:1/1;
    object-fit:cover;
}

.board-card { text-align:left; }
.board-card img {
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:14px;
    background:linear-gradient(145deg,var(--purple-pale),var(--purple));
    box-shadow:var(--shadow-sm);
    transition:transform 0.35s var(--ease),box-shadow 0.35s;
    display:block;
}
.board-card:hover img { transform:scale(1.03);box-shadow:var(--shadow-md); }
.board-card h3 {
    font-family:'Sarabun',sans-serif;
    font-size:1.15rem;
    font-weight:700;
    color:var(--text);
    margin:14px 0 5px;
    line-height:1.3;
}
.board-card h3 span { font-size:0.98rem;font-weight:400;color:var(--text-mid); }
.board-card p {
    font-size:0.82rem;
    color:var(--purple-deep);
    font-weight:600;
    margin:0;
    display:flex;
    align-items:center;
    gap:6px;
    letter-spacing:0.01em;
}
.board-card p::before {
    content:'';
    width:5px;height:5px;
    background:var(--purple);
    border-radius:50%;
    flex-shrink:0;
}

/* badge count */
.badge-count {
    display:inline-flex;
    align-items:center;
    padding:3px 12px;
    background:var(--purple-pale);
    color:var(--purple-deep);
    font-size:0.8rem;
    font-weight:700;
    border-radius:999px;
    white-space:nowrap;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro { padding:56px 0 52px; }
.about-intro-grid { max-width:740px; }
.about-text .heading { margin-bottom:1.25rem; }
.about-lead {
    font-size:1.1rem;
    color:var(--text);
    margin-bottom:16px;
    line-height:1.75;
}
.about-text p { color:var(--text-mid);line-height:1.75;margin-bottom:24px; }

.about-values { display:flex;flex-wrap:wrap;gap:10px;margin-top:8px; }
.value-pill {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 18px;
    background:var(--navy);
    color:var(--purple);
    border-radius:999px;
    font-size:0.88rem;
    font-weight:600;
    letter-spacing:0.03em;
    border:1px solid var(--border-dark);
}
.value-pill i { font-size:0.85rem; }

/* ============================================================
   POLICY / ACCORDION
   ============================================================ */
.policy-grid { display:flex;flex-direction:column;gap:10px; }

.accordion-item {
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(18,23,43,0.07);
    box-shadow:var(--shadow-sm);
    transition:box-shadow 0.3s,border-color 0.3s;
}
.accordion-item:hover { box-shadow:var(--shadow-md); }
.accordion-item.active { border-color:rgba(201,184,240,0.4); box-shadow:var(--shadow-md); }

.accordion-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 26px;
    cursor:pointer;
    gap:16px;
    background:#fff;
    transition:background 0.25s;
}
.accordion-item.active .accordion-header { background:var(--navy); }

.accordion-header h3 {
    font-family:'Sarabun',sans-serif;
    margin:0;
    font-size:1.15rem;
    font-weight:700;
    color:var(--text);
    transition:color 0.25s;
}
.accordion-item.active .accordion-header h3 { color:var(--purple); }

.accordion-header .icon {
    font-size:1.1rem;
    color:var(--purple-deep);
    transition:transform 0.35s var(--ease),color 0.25s;
    flex-shrink:0;
}
.accordion-item.active .accordion-header .icon { transform:rotate(45deg);color:var(--purple); }

.accordion-content {
    max-height:0;
    overflow:hidden;
    padding:0 26px;
    background:var(--off-white);
    color:var(--text-mid);
    transition:max-height 0.42s var(--ease),padding 0.25s;
}
.accordion-item.active .accordion-content { max-height:2000px;padding:24px 26px; }

.accordion-content p { font-size:0.92rem;line-height:1.75;margin-bottom:14px; }
.accordion-content ol { padding-left:18px;margin:0; }
.accordion-content ol li { font-size:0.92rem;line-height:1.9;color:var(--text-mid);padding:1px 0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { max-width:640px;margin:auto; }
.contact-form { display:flex;flex-direction:column;gap:22px; }
.form-group { display:flex;flex-direction:column;gap:7px; }
.form-group label {
    font-weight:700;
    font-size:0.78rem;
    color:var(--text);
    text-transform:uppercase;
    letter-spacing:0.08em;
}
.form-group input,
.form-group textarea {
    padding:14px 16px;
    font-size:0.97rem;
    font-family:'IBM Plex Sans Thai',sans-serif;
    border-radius:9px;
    border:1.5px solid rgba(18,23,43,0.13);
    background:#fff;
    color:var(--text);
    box-shadow:var(--shadow-sm);
    transition:border-color 0.2s,box-shadow 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
    outline:none;
    border-color:var(--purple-mid);
    box-shadow:0 0 0 4px rgba(201,184,240,0.18);
}

.btn-submit {
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 32px;
    background:var(--navy);
    color:#fff;
    font-weight:700;
    font-size:0.97rem;
    border-radius:9px;
    border:none;cursor:pointer;
    letter-spacing:0.02em;
    transition:all 0.25s var(--ease);
}
.btn-submit:hover { background:var(--navy-light);transform:translateY(-2px);box-shadow:var(--shadow-md); }

/* ============================================================
   BUTTONS (misc)
   ============================================================ */
.btn-more,.btn-home,.btn-outline {
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 24px;
    background:var(--navy);
    color:#fff;
    font-weight:600;
    font-size:0.92rem;
    border-radius:9px;
    border:none;cursor:pointer;
    transition:all 0.25s var(--ease);
}
.btn-more:hover,.btn-home:hover,.btn-outline:hover {
    background:var(--navy-light);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
    color:#fff;
}
.btn-secondary {
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 24px;
    background:transparent;
    color:var(--text);
    font-weight:600;
    font-size:0.92rem;
    border-radius:9px;
    border:1.5px solid rgba(18,23,43,0.15);
    cursor:pointer;
    transition:all 0.25s;
}
.btn-secondary:hover { border-color:var(--purple-mid);background:var(--purple-pale);transform:translateY(-2px); }
.btn-more i,.btn-home i { transition:transform 0.2s; }
.btn-more:hover i,.btn-home:hover i { transform:translateX(4px); }

.news-more { text-align:center;margin-top:40px; }

/* ============================================================
   SHARE / POST
   ============================================================ */
.post-hero { position:relative;width:100%;height:420px;overflow:hidden; }
.post-hero img { width:100%;height:100%;object-fit:cover; }
.post-hero .overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(18,23,43,0.85) 0%,rgba(18,23,43,0.2) 60%,transparent 100%); }
.hero-text { position:absolute;bottom:48px;left:72px;color:#fff; }
.hero-text h1 { font-family:'Sarabun',sans-serif;font-size:2.8rem;font-weight:800;line-height:1.2;margin:8px 0 0; }
.hero-text p { font-size:0.9rem;opacity:0.7;margin-top:8px; }
.post-container { display:flex;justify-content:center;padding:60px 20px; }
.post-box { max-width:760px;width:100%;line-height:1.85;font-size:1.02rem; }
.post-box h2 { font-family:'Sarabun',sans-serif;font-size:1.65rem;font-weight:700;margin:36px 0 12px; }
.post-image { width:100%;border-radius:14px;margin:24px 0;box-shadow:var(--shadow-md); }
.lead { font-size:1.12rem;color:var(--text-mid); }
.quote { border-left:4px solid var(--purple);padding:8px 0 8px 20px;margin:24px 0;color:var(--text-mid);font-style:italic;background:var(--purple-pale);border-radius:0 9px 9px 0; }
.highlight { background:var(--purple-pale);padding:2px 7px;border-radius:4px;font-weight:600; }
.list-icon i { color:var(--purple-mid);margin-right:8px; }
.share-title { font-weight:700;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px; }
.share-buttons { display:flex;gap:10px;flex-wrap:wrap; }
.share-btn { padding:10px 20px;border-radius:8px;font-size:0.88rem;font-weight:600;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;transition:all 0.2s; }
.share-btn.fb { background:#1877f2;color:#fff; }
.share-btn.tw { background:#000;color:#fff; }
.share-btn.copy { background:var(--off-white);color:var(--text);border:1.5px solid rgba(18,23,43,0.1); }
.share-btn:hover { opacity:0.85;transform:translateY(-1px); }
.copy-status { display:block;margin-top:8px;color:#16a34a;font-size:0.82rem;opacity:0;transition:opacity 0.3s; }
.copy-status.show { opacity:1; }

/* ============================================================
   ALERTS / 404
   ============================================================ */
.alert { width:100%;background:#dc2626;color:#fff;font-weight:500;padding:12px 20px;text-align:center;font-size:0.92rem; }
.notfound { text-align:center;padding:100px 20px; }
.notfound h1 { font-family:'Sarabun',sans-serif;font-size:9rem;font-weight:900;color:var(--purple);opacity:0.35;line-height:1;margin:0; }
.notfound h2 { font-family:'Sarabun',sans-serif;font-size:1.9rem;font-weight:800;margin:16px 0 12px; }
.notfound p { font-size:1rem;color:var(--text-mid);max-width:500px;margin:auto;line-height:1.65; }
.notfound-actions { margin-top:40px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background:var(--navy);
    border-top:1px solid var(--border-dark);
    margin-top:72px;
}
.footer-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    padding:48px 72px;
}
.footer-logo img { height:2.2rem;opacity:0.7;filter:grayscale(0.3); }
.footer-links { display:flex;gap:4px;flex-wrap:wrap;justify-content:center; }
.footer-links a {
    color:rgba(255,255,255,0.45);
    font-size:0.85rem;
    padding:5px 14px;
    border-radius:6px;
    transition:all 0.2s;
}
.footer-links a:hover { color:#fff;background:rgba(255,255,255,0.06); }
.footer-copy { color:rgba(255,255,255,0.25);font-size:0.78rem;letter-spacing:0.02em; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

header { animation:fadeIn 0.3s ease both; }
.hero-overlay > * { animation:fadeUp 0.6s var(--ease) both; }
.hero-badge { animation-delay:0.1s; }
.hero-title { animation-delay:0.2s; }
.hero-sub { animation-delay:0.3s; }
.stat-strip { animation:fadeUp 0.5s 0.2s var(--ease) both; }
main > section { animation:fadeUp 0.5s 0.1s var(--ease) both; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px) {
    header { padding:0 32px; }
    main { padding:0 32px; }
    .hero-overlay { padding:40px 32px; }
    .hero-text { left:32px; }
    .cta-box { flex-direction:column;align-items:flex-start;padding:40px 36px; }
    .hero-title { font-size:3rem; }
    .heading { font-size:2.2rem; }
    .stat-strip { gap:0;padding:24px 20px; }
    .stat-num { font-size:1.8rem; }
    .footer-inner { padding:40px 32px; }
}

@media(max-width:600px) {
    header { padding:0 20px; }
    header nav { display:none; }
    .menu-btn { display:block; }

    main { padding:0 20px; }
    section { padding:36px 0; }

    .hero img { aspect-ratio:4/3; }
    .hero-overlay { padding:28px 20px; }
    .hero-title { font-size:2rem; }
    .hero-sub { font-size:0.85rem; }

    .stat-strip { flex-wrap:wrap;gap:16px;padding:24px 20px;border-radius:12px; }
    .stat-divider { display:none; }
    .stat-item { flex:1 1 40%; }

    .heading { font-size:1.8rem; }
    .heading::after { width:36px; }

    .board-grid { grid-template-columns:repeat(2,1fr);gap:16px; }
    .board-card h3 { font-size:0.95rem; }
    .board-card h3 span { font-size:0.82rem; }

    .accordion-header { padding:16px 18px; }
    .accordion-header h3 { font-size:0.97rem; }
    .accordion-item.active .accordion-content { padding:16px 18px; }

    .cta-box { padding:32px 24px; }
    .cta-text h2 { font-size:1.4rem; }

    .notfound h1 { font-size:6rem; }

    .hero-text { left:20px;bottom:20px; }
    .hero-text h1 { font-size:1.6rem; }

    .footer-inner { padding:32px 20px; }
    .footer-links { gap:2px; }
}