:root {
  --brand:#C8102E; --brand-dark:#a00d24; --brand-deep:#7a0a1b;
  --brand-light:#fde8ec; --brand-50:#fff1f3; --gold:#F59E0B;
  --dark:#0f172a; --muted:#64748b; --border:#e2e8f0; --bg:#f8fafc;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:Inter,sans-serif;color:#1e293b;background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none} img{max-width:100%}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25}

/* ── TOP BAR ─────────────────────────────────────────────────────── */
.site-topbar {
  background: #0f1f3d;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar-contact {
  display: flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.65); font-size: .78rem;
  text-decoration: none; transition: color .15s;
}
.topbar-contact i { font-size: .72rem; color: var(--gold); }
.topbar-contact:hover { color: #fff; }
.topbar-badge {
  display: flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.55); font-size: .72rem;
  font-weight: 600; letter-spacing: .04em;
}
.topbar-signin {
  display: flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.65); font-size: .75rem; font-weight: 600;
  text-decoration: none; padding: .25rem .75rem;
  border: 1px solid rgba(255,255,255,.15); border-radius: 999px;
  transition: all .15s;
}
.topbar-signin:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── MAIN NAVBAR ─────────────────────────────────────────────────── */
.app-navbar {
  background: #162040;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .6rem 0;
  position: sticky; top: 0; z-index: 1030;
  transition: background .25s, box-shadow .25s;
}
.app-navbar.scrolled {
  background: rgba(22,32,64,.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.navbar-logo-img { height: 52px; }

/* Nav links */
.nav-link-main {
  display: block; padding: .45rem .875rem;
  font-size: .875rem; font-weight: 500;
  color: rgba(255,255,255,.75);
  text-decoration: none; position: relative;
  transition: color .15s;
  white-space: nowrap;
}
.nav-link-main::after {
  content: ''; position: absolute;
  bottom: -2px; left: .875rem; right: .875rem;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transition: transform .2s;
  border-radius: 1px;
}
.nav-link-main:hover { color: #fff; }
.nav-link-main:hover::after { transform: scaleX(1); }
.nav-link-main.active { color: var(--gold); font-weight: 600; }
.nav-link-main.active::after { transform: scaleX(1); }

/* CTA buttons */
.btn-nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand); color: #fff;
  font-size: .82rem; font-weight: 700;
  padding: .5rem 1.25rem; border-radius: .375rem;
  text-decoration: none; border: 0;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.btn-nav-cta:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.btn-nav-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: .375rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.2);
  transition: all .15s;
}
.btn-nav-ghost:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* Mobile toggler */
.navbar-toggler-custom {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8); padding: .4rem .7rem;
  border-radius: .375rem; font-size: 1rem; cursor: pointer;
  transition: background .15s;
}
.navbar-toggler-custom:hover { background: rgba(255,255,255,.15); }

/* Mobile menu */
@media (max-width: 991.98px) {
  #mainNav {
    background: #162040;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .75rem 0;
    margin-top: .5rem;
  }
  .nav-link-main { padding: .6rem 1rem; border-radius: .375rem; }
  .nav-link-main:hover { background: rgba(255,255,255,.06); }
  .nav-link-main::after { display: none; }
  .nav-link-main.active { background: rgba(245,158,11,.1); }
}

/* BUTTONS */
.btn{font-weight:600;font-size:.875rem;transition:all .2s}
.btn-brand{background:var(--brand);color:#fff;border:0;box-shadow:0 2px 8px rgba(200,16,46,.3)}
.btn-brand:hover{background:var(--brand-dark);color:#fff;box-shadow:0 4px 16px rgba(200,16,46,.4);transform:translateY(-1px)}
.btn-outline-brand{border:1.5px solid var(--brand);color:var(--brand);background:transparent}
.btn-outline-brand:hover{background:var(--brand);color:#fff}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}

/* CARDS */
.card-clean{background:#fff;border:1px solid var(--border);border-radius:.75rem;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.card-clean:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.glass-card{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.7);border-radius:1.25rem;box-shadow:var(--shadow-lg);backdrop-filter:blur(10px)}

/* KRA HERO */
.kra-hero{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#0f172a 0%,#1a0a0e 50%,#2d0a12 100%)}
.kra-hero-overlay{position:absolute;inset:0;background:url(../images/KRA-mascot2_etims.png) right bottom/contain no-repeat;opacity:.07;pointer-events:none}
.kra-hero-inner{position:relative;z-index:2;padding:3rem 0}
.kra-hero-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem}
.kra-hero-title{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.02em}
.kra-hero-title span{color:var(--brand)}
.kra-hero-search{display:flex;max-width:520px}
.kra-search-select{flex:1;padding:.7rem 1rem;border:0;border-radius:.375rem 0 0 .375rem;font-size:.875rem;color:#374151;background:#fff;outline:none}
.kra-search-btn{padding:.7rem 1.75rem;background:var(--brand);color:#fff;border:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:0 .375rem .375rem 0;cursor:pointer;transition:background .15s}
.kra-search-btn:hover{background:var(--brand-dark)}
.kra-hero-trust{display:flex;flex-wrap:wrap;gap:1.25rem;color:rgba(255,255,255,.55);font-size:.78rem}
.kra-hero-trust span{display:flex;align-items:center;gap:.4rem}
.kra-hero-trust i{color:#22c55e}
.kra-hero-mascot{max-height:340px;filter:drop-shadow(0 8px 32px rgba(0,0,0,.4))}

/* STATS BAR */
.kra-stats-bar{background:var(--brand);padding:.1rem 0}
.kra-stat-item{padding:.875rem .5rem;border-right:1px solid rgba(255,255,255,.15)}
.kra-stat-item:last-child{border-right:0}
.kra-stat-val{font-size:1.5rem;font-weight:800;color:#fff;line-height:1}
.kra-stat-lbl{font-size:.7rem;color:rgba(255,255,255,.7);margin-top:.2rem;text-transform:uppercase;letter-spacing:.05em}

/* SECTION HEADINGS */
.kra-section-head h2{font-size:1.6rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}
.kra-section-head h2::after{content:'';display:block;width:48px;height:3px;background:var(--brand);margin:.5rem auto 0}
.kra-section-head.text-start h2::after{margin-left:0}
.section-label{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-light);color:var(--brand);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .9rem;border-radius:999px}

/* NEWS CARDS */
.kra-news-card{border-radius:.625rem;overflow:hidden;border:1px solid var(--border);background:#fff;transition:box-shadow .2s,transform .2s}
.kra-news-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.kra-news-img{height:160px;background-size:cover;background-position:center}
.kra-news-body{padding:1rem}
.kra-news-title{font-size:.875rem;font-weight:700;color:#1e293b;margin-bottom:.4rem;line-height:1.4}
.kra-news-desc{font-size:.75rem;color:var(--muted);margin:0;line-height:1.6}

/* LINKS CARDS */
.kra-links-card{background:#fff;border:1px solid var(--border);border-radius:.625rem;overflow:hidden;height:100%}
.kra-links-img{height:140px;background-size:cover;background-position:center}
.kra-links-title{font-size:.9rem;font-weight:700;padding:.875rem 1rem .25rem;margin:0}
.kra-links-list{list-style:none;padding:0 1rem 1rem;margin:0;display:flex;flex-direction:column;gap:.3rem}
.kra-links-list li a{font-size:.78rem;color:#475569;display:flex;align-items:center;gap:.4rem;padding:.2rem 0;border-bottom:1px solid #f1f5f9;transition:color .15s}
.kra-links-list li:last-child a{border-bottom:0}
.kra-links-list li a:hover{color:var(--brand)}

/* SERVICE CARDS */
.kra-service-card{background:#fff;border:1px solid var(--border);border-radius:.75rem;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.kra-service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.kra-service-top{padding:1.25rem;display:flex;align-items:center;justify-content:space-between}
.kra-service-icon{width:48px;height:48px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.kra-service-badge{font-size:.65rem;font-weight:700;letter-spacing:.08em;padding:.25rem .7rem;border-radius:999px;background:rgba(0,0,0,.06)}
.kra-service-body{padding:0 1.25rem 1.25rem;display:flex;flex-direction:column;flex:1}
.kra-service-price{font-size:1.6rem;font-weight:800;color:var(--brand);line-height:1;margin-top:.5rem}
.kra-service-name{font-size:.95rem;font-weight:700;margin:.4rem 0 .75rem;color:#1e293b}
.kra-service-feats{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.kra-service-feats li{font-size:.78rem;color:#475569;display:flex;align-items:center;gap:.5rem}
.kra-service-feats li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0}

/* PERFORMANCE BANNER */
.kra-perf-banner{position:relative;min-height:320px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(rgba(15,23,42,.82),rgba(15,23,42,.82)),url(../images/about.png) center/cover no-repeat}
.kra-perf-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,16,46,.3) 0%,transparent 60%);pointer-events:none}
.kra-perf-inner{position:relative;z-index:2;padding:3rem 0;width:100%}
.kra-perf-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.kra-perf-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:#fff;margin-bottom:.75rem}
.kra-perf-sub{color:rgba(255,255,255,.65);font-size:.95rem;max-width:520px;margin:0 auto}

/* STEPS */
.kra-steps-row{border:1px solid var(--border);border-radius:.75rem;overflow:hidden}
.kra-step{padding:1.75rem 1.25rem;border-right:1px solid var(--border);height:100%;transition:background .2s}
.kra-step:last-child{border-right:0}
.kra-step:hover,.kra-step-active{background:var(--brand-50)}
.kra-step-num{font-size:.65rem;font-weight:800;letter-spacing:.1em;color:var(--brand);background:var(--brand-light);padding:.25rem .6rem;border-radius:999px;display:inline-block;margin-bottom:.75rem}
.kra-step-icon{width:44px;height:44px;border-radius:.625rem;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;margin-bottom:.875rem}
.kra-step-title{font-size:.875rem;font-weight:700;color:#1e293b;margin-bottom:.4rem}
.kra-step-desc{font-size:.75rem;color:var(--muted);line-height:1.6;margin:0}

/* ICON BAR */
.kra-icon-bar{background:#1e293b;padding:.25rem 0}
.kra-icon-bar-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.875rem .5rem;color:rgba(255,255,255,.6);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;transition:color .15s,background .15s;border-right:1px solid rgba(255,255,255,.07)}
.kra-icon-bar .col:last-child .kra-icon-bar-item{border-right:0}
.kra-icon-bar-item i{font-size:1.2rem}
.kra-icon-bar-item:hover{color:#fff;background:rgba(255,255,255,.06)}

/* FOOTER */
.site-footer{background:#0f172a;color:rgba(255,255,255,.65)}
.footer-link{color:rgba(255,255,255,.5);font-size:.82rem;display:block;transition:color .15s;padding:.15rem 0}
.footer-link:hover{color:var(--brand)}
.footer-social{width:32px;height:32px;border-radius:.375rem;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:.75rem;transition:background .15s,color .15s}
.footer-social:hover{background:var(--brand);color:#fff}

/* FLOATING BUTTONS */
.floating-whatsapp{position:fixed;bottom:1.5rem;left:1.5rem;z-index:9999;width:50px;height:50px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 4px 16px rgba(37,211,102,.4);transition:transform .2s}
.floating-whatsapp:hover{transform:scale(1.1);color:#fff}
.floating-chat-wrapper{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.floating-chat-btn{width:50px;height:50px;border-radius:50%;background:var(--brand);color:#fff;border:0;font-size:1.3rem;box-shadow:0 4px 16px rgba(200,16,46,.4);cursor:pointer;transition:transform .2s}
.floating-chat-btn:hover{transform:scale(1.08)}
.chat-window{width:330px;height:460px;background:#fff;border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden}
.chat-header{background:var(--brand);color:#fff;padding:.875rem 1rem;display:flex;align-items:center;justify-content:space-between}
.chat-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.chat-messages{flex:1;padding:1rem;overflow-y:auto;background:#f8fafc;display:flex;flex-direction:column;gap:.6rem}
.chat-msg{max-width:85%;padding:.5rem .875rem;border-radius:.75rem;font-size:.8rem;line-height:1.5}
.chat-msg.bot{background:#fff;border:1px solid #e2e8f0;color:#374151;border-bottom-left-radius:.2rem;align-self:flex-start}
.chat-msg.user{background:var(--brand);color:#fff;border-bottom-right-radius:.2rem;align-self:flex-end}
.chat-input-area{padding:.6rem;background:#fff;border-top:1px solid #f1f5f9}

/* AUTH */
.auth-body{background:linear-gradient(135deg,#0f172a 0%,#2d0a12 100%);min-height:100vh}
.auth-card{background:#fff;border-radius:1rem;box-shadow:0 24px 64px rgba(0,0,0,.2)}

/* FORMS */
.form-control,.form-select{border-radius:.375rem;border:1.5px solid #e2e8f0;padding:.65rem 1rem;font-size:.875rem;transition:border-color .15s,box-shadow .15s}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(200,16,46,.1);outline:0}
.form-label{font-size:.8rem;font-weight:600;color:#374151;margin-bottom:.4rem}
.input-group-text{border:1.5px solid #e2e8f0;background:#f8fafc;font-size:.875rem;color:var(--muted)}

/* ALERTS */
.alert{border-radius:.5rem;font-size:.875rem;border:0}
.alert-danger{background:#fef2f2;color:#991b1b}
.alert-success{background:#f0fdf4;color:#166534}
.alert-info{background:#eff6ff;color:#1e40af}
.alert-warning{background:#fffbeb;color:#92400e}

/* TABLES */
.table{font-size:.85rem}
.table th{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--border)!important;padding:.75rem 1rem}
.table td{padding:.75rem 1rem;vertical-align:middle;border-color:var(--border)}
.table tbody tr:hover{background:#fafbfc}

/* STATUS BADGES */
.badge-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:600;padding:.3rem .7rem;border-radius:999px}
.badge-pending{background:#fef3c7;color:#92400e}
.badge-paid{background:#dcfce7;color:#166534}
.badge-failed{background:#fee2e2;color:#991b1b}
.badge-processing{background:#dbeafe;color:#1e40af}
.badge-completed{background:#dcfce7;color:#166534}
.badge-filed{background:#ede9fe;color:#5b21b6}

/* STAT CARDS */
.stat-card{background:#fff;border:1px solid var(--border);border-radius:.75rem;padding:1.25rem;display:flex;align-items:center;gap:1rem}
.stat-icon{width:48px;height:48px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0}

/* SIDEBAR */
.sidebar{width:250px;min-height:100vh;background:#fff;border-right:1px solid var(--border);position:fixed;top:0;left:0;z-index:1040;display:flex;flex-direction:column;transition:transform .25s}
.sidebar-brand{padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.sidebar-nav{flex:1;padding:.75rem;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.sidebar-section-label{font-size:.65rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;padding:.5rem .75rem .25rem}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .875rem;border-radius:.5rem;font-size:.825rem;font-weight:500;color:#475569;text-decoration:none;transition:all .15s}
.sidebar-link i{width:16px;text-align:center;color:#94a3b8;font-size:.85rem}
.sidebar-link:hover{background:#f8fafc;color:#0f172a}
.sidebar-link:hover i{color:#475569}
.sidebar-link.active{background:var(--brand-light);color:var(--brand);font-weight:600}
.sidebar-link.active i{color:var(--brand)}
.sidebar-divider{height:1px;background:var(--border);margin:.5rem 0}
.sidebar-user{padding:.875rem 1.25rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.75rem}
.sidebar-avatar{width:34px;height:34px;border-radius:.5rem;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.main-content{margin-left:250px;min-height:100vh;background:var(--bg)}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1039}.sidebar-overlay.show{display:block}}

/* ADMIN SIDEBAR */
.admin-sidebar{background:#0f172a;border-right:0}
.admin-sidebar .sidebar-section-label{color:rgba(255,255,255,.3)}
.admin-sidebar .sidebar-link{color:rgba(255,255,255,.55)}
.admin-sidebar .sidebar-link i{color:rgba(255,255,255,.3)}
.admin-sidebar .sidebar-link:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-sidebar .sidebar-link:hover i{color:rgba(255,255,255,.7)}
.admin-sidebar .sidebar-link.active{background:rgba(200,16,46,.15);color:#fff}
.admin-sidebar .sidebar-link.active i{color:var(--brand)}
.admin-sidebar .sidebar-divider{background:rgba(255,255,255,.07)}
.admin-sidebar .sidebar-user{border-top-color:rgba(255,255,255,.07)}
.admin-sidebar .sidebar-brand{border-bottom-color:rgba(255,255,255,.07)}

/* TOPBAR */
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:.7rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.topbar-btn{width:34px;height:34px;border-radius:.5rem;background:#f8fafc;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:all .15s}
.topbar-btn:hover{background:#f1f5f9;color:#0f172a}
.notif-badge{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* UPLOAD / TYPE CARD / MISC */
.upload-zone{border:2px dashed #cbd5e1;border-radius:.75rem;padding:2rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--brand);background:var(--brand-50)}
.type-card{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.type-card:hover{border-color:rgba(200,16,46,.3)!important;box-shadow:0 4px 16px rgba(200,16,46,.1)}
.type-card.border-brand{border-color:var(--brand)!important;box-shadow:0 4px 16px rgba(200,16,46,.15)}
.border-brand{border:2px solid var(--brand)!important}
.msg-bubble{max-width:75%;padding:.6rem 1rem;border-radius:.75rem;font-size:.85rem;line-height:1.5}
.msg-bubble.sent{background:var(--brand);color:#fff;border-bottom-right-radius:.2rem;margin-left:auto}
.msg-bubble.received{background:#fff;border:1px solid var(--border);color:#374151;border-bottom-left-radius:.2rem}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--muted)}
.empty-state i{font-size:2.5rem;opacity:.25;margin-bottom:1rem;display:block}

/* UTILITIES */
.text-brand{color:var(--brand)!important}
.bg-brand{background:var(--brand)!important}
.bg-brand-light{background:var(--brand-light)!important}
.tracking-wide{letter-spacing:.05em}
.brightness-0{filter:brightness(0)}
.invert{filter:invert(1)}
.brightness-0.invert{filter:brightness(0) invert(1)}
.cursor-pointer{cursor:pointer}
.py-lg-6{padding-top:5rem!important;padding-bottom:5rem!important}
@media(min-width:992px){.py-lg-6{padding-top:6rem!important;padding-bottom:6rem!important}}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ═══ ABOUT PAGE ═══════════════════════════════════════════════════ */

/* Hero Banner */
.about-hero{
  position:relative;min-height:200px;display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(rgba(15,23,42,.65),rgba(15,23,42,.65)),url(../images/contact-centre.webp) center/cover no-repeat;
}
.about-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(200,16,46,.35) 0%,transparent 60%);pointer-events:none}
.about-hero-inner{position:relative;z-index:2;padding:2.5rem 0}
.about-hero-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:#fff;margin:0}
.breadcrumb-light .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.4)}

/* Tab Nav */
.about-tabs-bar{background:#fff;border-bottom:2px solid var(--border);position:sticky;top:62px;z-index:90}
.about-tabs{display:flex;gap:0;overflow-x:auto}
.about-tab{
  padding:.875rem 1.5rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;
  white-space:nowrap;transition:color .15s,border-color .15s;margin-bottom:-2px;
}
.about-tab:hover{color:var(--brand)}
.about-tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* Who We Are */
.about-big-title{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;color:#1e293b;line-height:1.05;margin-bottom:1.25rem}
.about-func-list{padding-left:1.25rem;display:flex;flex-direction:column;gap:.4rem}
.about-func-list li{font-size:.85rem;color:#475569;line-height:1.6}

/* Video / Image wrap */
.about-video-wrap{position:relative;border-radius:.75rem;overflow:hidden;box-shadow:var(--shadow-lg)}
.about-video-wrap img{display:block;width:100%;height:340px;object-fit:cover}
.about-video-badge{
  position:absolute;bottom:1.25rem;left:1.25rem;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1.25rem;border-radius:.5rem;
}
.about-video-badge i{font-size:1.75rem}
.about-video-badge span{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}

/* Core Business */
.about-core-item{padding:1.25rem .5rem}
.about-core-icon{
  width:72px;height:72px;border-radius:50%;
  border:2px solid var(--brand);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;font-size:1.5rem;color:var(--brand);
  transition:background .2s,color .2s;
}
.about-core-item:hover .about-core-icon{background:var(--brand);color:#fff}
.about-core-title{font-size:.85rem;font-weight:700;color:#1e293b;margin-bottom:.4rem}
.about-core-desc{font-size:.72rem;color:var(--muted);line-height:1.6;margin:0}

/* Mission / Vision / Values */
.about-mvv-card{
  background:#fff;border:1px solid var(--border);border-radius:.75rem;
  padding:2rem 1.5rem;text-align:center;height:100%;
  transition:box-shadow .2s,transform .2s;
}
.about-mvv-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.about-mvv-featured{border-color:var(--brand);box-shadow:0 8px 32px rgba(200,16,46,.12)}
.about-mvv-icon{
  width:72px;height:72px;border-radius:50%;
  border:2px solid var(--brand);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;font-size:1.5rem;color:var(--brand);
}
.about-mvv-featured .about-mvv-icon{background:var(--brand);color:#fff}
.about-mvv-title{font-size:1rem;font-weight:700;color:#1e293b;margin-bottom:.75rem}
.about-mvv-desc{font-size:.82rem;color:var(--muted);line-height:1.7;margin:0}

/* Timeline */
.about-timeline{position:relative;padding:2rem 0}
.about-timeline-line{
  position:absolute;left:0;right:0;top:50%;
  height:3px;background:var(--brand);transform:translateY(-50%);
}
.about-milestone{position:relative;text-align:center;padding:0 .5rem}
.about-milestone.above .about-milestone-content{padding-bottom:2.5rem}
.about-milestone.below .about-milestone-content{padding-top:2.5rem;order:2}
.about-milestone-dot{
  width:16px;height:16px;border-radius:50%;
  background:var(--brand);border:3px solid #fff;
  box-shadow:0 0 0 3px var(--brand);
  margin:0 auto;position:relative;z-index:2;flex-shrink:0;
}
.about-milestone.above{display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.about-milestone.below{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.about-milestone-year{
  font-size:.75rem;font-weight:800;color:var(--brand);
  letter-spacing:.08em;margin-bottom:.3rem;
}
.about-milestone-title{font-size:.8rem;font-weight:700;color:#1e293b;margin-bottom:.25rem}
.about-milestone-desc{font-size:.7rem;color:var(--muted);line-height:1.5;margin:0}

/* Why Choose */
.about-reason-card{
  display:flex;align-items:flex-start;gap:1rem;
  background:#fff;border:1px solid var(--border);border-radius:.75rem;
  padding:1.25rem;transition:box-shadow .2s,border-color .2s;
}
.about-reason-card:hover{box-shadow:var(--shadow);border-color:rgba(200,16,46,.15)}
.about-reason-icon{
  width:48px;height:48px;border-radius:.625rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.about-reason-title{font-size:.875rem;font-weight:700;color:#1e293b;margin-bottom:.3rem}
.about-reason-desc{font-size:.78rem;color:var(--muted);line-height:1.6;margin:0}

/* ═══ PROCESS PAGE ══════════════════════════════════════════════════ */
.process-hero{background-image:linear-gradient(rgba(15,23,42,.7),rgba(15,23,42,.7)),url(../images/online-services-for-you.webp)!important;background-size:cover!important;background-position:center!important}
.process-steps{display:flex;flex-direction:column;gap:2rem}
.process-step-row{display:grid;grid-template-columns:80px 1fr;gap:1.5rem;align-items:flex-start}
.process-step-num-col{display:flex;flex-direction:column;align-items:center}
.process-step-circle{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.process-step-connector{width:2px;flex:1;min-height:40px;background:var(--border);margin-top:.5rem}
.process-step-content{background:#fff;border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;transition:box-shadow .2s}
.process-step-content:hover{box-shadow:var(--shadow)}
.process-step-badge{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:.1em;padding:.25rem .75rem;border-radius:999px;margin-bottom:.75rem}
.process-step-title{font-size:1.1rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}
.process-step-desc{font-size:.875rem;color:var(--muted);line-height:1.7;margin-bottom:.75rem}
.process-step-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.process-step-points li{font-size:.8rem;color:#475569;display:flex;align-items:center;gap:.5rem}
.process-step-points li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0}
.docs-card{background:#fff;border:1px solid var(--border);border-radius:.75rem;overflow:hidden;height:100%}
.docs-card-head{padding:1.25rem}
.docs-card-title{font-size:1rem;font-weight:700;margin:0}
.docs-list{list-style:none;padding:.5rem 1.25rem;margin:0;display:flex;flex-direction:column;gap:.5rem}
.docs-list li{font-size:.8rem;color:#475569;display:flex;align-items:center;gap:.6rem;padding:.3rem 0;border-bottom:1px solid #f1f5f9}
.docs-list li:last-child{border-bottom:0}
.docs-list li i{font-size:.75rem;flex-shrink:0}
.faq-accordion{display:flex;flex-direction:column;gap:.5rem}
.faq-item{border:1px solid var(--border)!important;border-radius:.625rem!important;overflow:hidden}
.faq-btn{font-size:.875rem;font-weight:600;color:#1e293b;background:#fff;padding:1rem 1.25rem}
.faq-btn:not(.collapsed){color:var(--brand);background:var(--brand-50)}
.faq-btn::after{filter:none}
.faq-btn:not(.collapsed)::after{filter:none}
.faq-body{font-size:.85rem;color:var(--muted);line-height:1.7;padding:1rem 1.25rem;background:#fafbfc}

/* ═══ PRICING PAGE ══════════════════════════════════════════════════ */
.pricing-hero{background-image:linear-gradient(rgba(15,23,42,.7),rgba(15,23,42,.7)),url(../images/media-thumb-01.jpg)!important;background-size:cover!important;background-position:center!important}
.pricing-card-new{background:#fff;border:1px solid var(--border);border-radius:.875rem;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:box-shadow .2s,transform .2s;height:100%}
.pricing-card-new:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pricing-featured{border:2px solid var(--brand)!important;box-shadow:0 8px 32px rgba(200,16,46,.12)}
.pricing-featured-ribbon{position:absolute;top:1rem;right:-2rem;background:var(--brand);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.1em;padding:.3rem 2.5rem;transform:rotate(45deg);transform-origin:center}
.pricing-card-top{padding:1.25rem;display:flex;align-items:center;justify-content:space-between}
.pricing-icon{width:52px;height:52px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.pricing-badge{font-size:.65rem;font-weight:700;letter-spacing:.08em;padding:.25rem .75rem;border-radius:999px;background:rgba(0,0,0,.06)}
.pricing-card-body{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.pricing-title{font-size:1rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}
.pricing-amount{font-size:2rem;font-weight:800;line-height:1;margin-bottom:.2rem}
.pricing-period{font-size:.72rem;color:var(--muted);margin-bottom:1.25rem}
.pricing-features{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.pricing-features li{font-size:.8rem;color:#475569;display:flex;align-items:center;gap:.6rem}
.pricing-features li i{font-size:.75rem;flex-shrink:0}
.compare-table th{font-size:.8rem;padding:1rem .75rem;background:#f8fafc}
.compare-table td{font-size:.82rem;padding:.75rem;vertical-align:middle}
.compare-table tbody tr:hover{background:#fafbfc}
.deadline-card{background:#fff;border:1px solid var(--border);border-radius:.875rem;padding:2rem;display:flex;gap:1.5rem;align-items:flex-start}
.deadline-icon{width:56px;height:56px;border-radius:.75rem;background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--brand);flex-shrink:0}
.deadline-title{font-size:1.1rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}
.deadline-desc{font-size:.875rem;color:var(--muted);line-height:1.7;margin:0}
.deadline-item{background:#f8fafc;border:1px solid var(--border);border-radius:.625rem;padding:1rem;text-align:center}

/* ═══ CONTACT PAGE ══════════════════════════════════════════════════ */
.contact-hero{background-image:linear-gradient(rgba(15,23,42,.7),rgba(15,23,42,.7)),url(../images/contact-centre.webp)!important;background-size:cover!important;background-position:center!important}
.contact-info-strip{background:var(--brand)}
.contact-strip-item{display:flex;flex-direction:column;align-items:center;padding:1.25rem .75rem;color:#fff;text-decoration:none;border-right:1px solid rgba(255,255,255,.15);transition:background .15s}
.contact-strip-item:hover{background:var(--brand-dark);color:#fff}
.contact-strip-icon{font-size:1.3rem;margin-bottom:.3rem;opacity:.85}
.contact-strip-label{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:.15rem}
.contact-strip-value{font-size:.8rem;font-weight:600}
.contact-detail-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.contact-detail-item{display:flex;align-items:center;gap:1rem;text-decoration:none;color:#1e293b;padding:.75rem;border-radius:.625rem;border:1px solid var(--border);transition:border-color .15s,box-shadow .15s}
.contact-detail-item:hover{border-color:rgba(200,16,46,.2);box-shadow:var(--shadow-sm);color:#1e293b}
.contact-detail-icon{width:40px;height:40px;border-radius:.5rem;background:var(--brand-light);display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:1rem;flex-shrink:0}
.contact-detail-label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.contact-detail-value{font-size:.875rem;font-weight:600;color:#1e293b}
.contact-form-card{background:#fff;border:1px solid var(--border);border-radius:.875rem;overflow:hidden;box-shadow:var(--shadow)}
.contact-form-head{background:var(--brand);padding:1.5rem 2rem}
.contact-form-title{color:#fff;font-size:1.1rem;font-weight:700;margin:0}
.contact-form-sub{color:rgba(255,255,255,.7);font-size:.82rem;margin:.25rem 0 0}
.contact-form-body{padding:2rem}
.contact-success{text-align:center;padding:2rem}
.contact-success-icon{font-size:3rem;color:#16a34a;margin-bottom:1rem}
.support-card{background:#fff;border:1px solid var(--border);border-radius:.75rem;padding:1.75rem;text-align:center;height:100%;display:flex;flex-direction:column;align-items:center;transition:box-shadow .2s,transform .2s}
.support-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.support-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 1rem}
.support-title{font-size:1rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}
.support-desc{font-size:.8rem;color:var(--muted);line-height:1.6;margin-bottom:1.25rem;flex:1}

/* ═══ AUTH PAGES ════════════════════════════════════════════════════ */
.auth-body { background: #f1f5f9; margin: 0; padding: 0; }
.auth-wrap { display: flex; min-height: 100vh; }

/* Left panel */
.auth-left {
  width: 420px; flex-shrink: 0;
  background: linear-gradient(160deg, #0f172a 0%, #1a0a0e 50%, #2d0a12 100%);
  position: relative; overflow: hidden;
  flex-direction: column; justify-content: center;
}
.auth-left::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(200,16,46,.2) 0%, transparent 70%);
}
.auth-left-inner { position: relative; z-index: 2; padding: 3rem 2.5rem; }
.auth-trust { display: flex; flex-direction: column; gap: .6rem; }
.auth-trust-item { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.6); font-size: .82rem; }
.auth-trust-item i { color: #22c55e; font-size: .75rem; }
.auth-mascot { position: absolute; bottom: 0; right: -20px; height: 220px; opacity: .25; }

/* Right panel */
.auth-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: #f8fafc;
}
.auth-form-wrap { width: 100%; max-width: 420px; }
.auth-form-title { font-size: 1.6rem; font-weight: 800; color: #1e293b; margin-bottom: .25rem; }
.auth-form-sub { font-size: .875rem; color: #64748b; margin-bottom: 1.5rem; }
.auth-card {
  background: #fff; border: 1px solid #e8edf2;
  border-radius: .875rem; padding: 2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

/* ═══ BLOG ══════════════════════════════════════════════════════════ */

/* News card extras (home page) */
.kra-news-card a { text-decoration: none; color: inherit; }
.kra-news-tag {
  display: inline-block; font-size: .65rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-light);
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .4rem;
}
.kra-news-date { font-size: .7rem; color: #94a3b8; margin-top: .4rem; }
.kra-news-card:hover .kra-news-title { color: var(--brand); }

/* Blog hero */
.blog-hero {
  background-image: linear-gradient(rgba(15,23,42,.7),rgba(15,23,42,.7)),
    url(../images/media-thumb-01.jpg) !important;
  background-size: cover !important; background-position: center !important;
}

/* Filter bar */
.blog-filter-bar {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: .875rem 0; position: sticky; top: 62px; z-index: 90;
}
.blog-search-form {
  display: flex; align-items: center; gap: .5rem;
  background: #f8fafc; border: 1.5px solid var(--border);
  border-radius: .5rem; padding: .45rem .875rem;
  min-width: 220px;
}
.blog-search-form i { color: #94a3b8; font-size: .85rem; flex-shrink: 0; }
.blog-search-form input {
  border: 0; background: transparent; outline: none;
  font-size: .85rem; color: #1e293b; flex: 1; min-width: 0;
}
.blog-search-clear { color: #94a3b8; font-size: .8rem; text-decoration: none; }
.blog-search-clear:hover { color: var(--brand); }

/* Tag pills */
.blog-tag-pill {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .3rem .875rem; border-radius: 999px;
  background: #f1f5f9; color: #475569;
  text-decoration: none; transition: background .15s, color .15s;
  white-space: nowrap;
}
.blog-tag-pill:hover { background: var(--brand-light); color: var(--brand); }
.blog-tag-pill.active { background: var(--brand); color: #fff; }

/* Featured post */
.blog-featured {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow .2s;
}
.blog-featured:hover { box-shadow: var(--shadow-lg); }
.blog-featured-img {
  height: 100%; min-height: 280px;
  background-size: cover; background-position: center;
}
.blog-featured-placeholder {
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--brand); opacity: .3;
}
.blog-featured-body { padding: 2.5rem; }
.blog-featured-title {
  font-size: 1.5rem; font-weight: 800; color: #1e293b;
  line-height: 1.3; margin-bottom: .875rem;
  transition: color .15s;
}
.blog-featured:hover .blog-featured-title { color: var(--brand); }
.blog-featured-excerpt { font-size: .9rem; color: #64748b; line-height: 1.7; margin-bottom: 1.25rem; }
.blog-featured-meta { font-size: .8rem; color: #94a3b8; display: flex; gap: 1rem; }

/* Blog card */
.blog-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blog-card-img {
  height: 190px; background-size: cover; background-position: center;
  flex-shrink: 0;
}
.blog-card-placeholder {
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--brand); opacity: .3;
}
.blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-title {
  font-size: .95rem; font-weight: 700; color: #1e293b;
  line-height: 1.4; margin-bottom: .5rem;
  transition: color .15s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card:hover .blog-card-title { color: var(--brand); }
.blog-card-excerpt {
  font-size: .8rem; color: #64748b; line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: .875rem;
}
.blog-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; color: #94a3b8; border-top: 1px solid #f1f5f9; padding-top: .75rem;
}
.blog-card-read { color: var(--brand); font-weight: 600; }

/* Pagination */
.blog-pagination {
  display: flex; justify-content: center; align-items: center; gap: .5rem;
}
.blog-page-btn {
  width: 36px; height: 36px; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600;
  background: #f1f5f9; color: #475569;
  text-decoration: none; transition: background .15s, color .15s;
  border: 1px solid var(--border);
}
.blog-page-btn:hover { background: var(--brand-light); color: var(--brand); }
.blog-page-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Blog single content */
.blog-content { font-size: .95rem; line-height: 1.85; color: #374151; }
.blog-content h2,.blog-content h3,.blog-content h4 { font-weight: 700; margin: 1.75rem 0 .75rem; color: #1e293b; }
.blog-content p { margin-bottom: 1.25rem; }
.blog-content ul,.blog-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.blog-content li { margin-bottom: .4rem; }
.blog-content blockquote {
  border-left: 4px solid var(--brand); padding: 1rem 1.5rem;
  background: var(--brand-50); border-radius: 0 .5rem .5rem 0;
  margin: 1.5rem 0; font-style: italic; color: #475569;
}
.blog-content img { max-width: 100%; border-radius: .625rem; margin: 1rem 0; }
.blog-content a { color: var(--brand); }
.blog-content a:hover { text-decoration: underline; }
.blog-content code {
  background: #f1f5f9; padding: .15rem .4rem;
  border-radius: .25rem; font-size: .875em; color: var(--brand);
}

/* Blog single extras */
.blog-single-hero { background-image: linear-gradient(rgba(15,23,42,.75),rgba(15,23,42,.75)),url(../images/media-thumb-01.jpg) !important; background-size:cover!important; background-position:center!important; }
.blog-excerpt-lead { font-size: 1.05rem; color: #475569; line-height: 1.8; border-left: 4px solid var(--brand); padding-left: 1.25rem; margin-bottom: 2rem; font-style: italic; }

/* Sidebar CTA */
.blog-sidebar-cta { background: linear-gradient(135deg,var(--brand),var(--brand-deep)); border-radius: var(--radius); padding: 1.75rem; text-align: center; color: #fff; }
.blog-sidebar-cta-icon { width: 56px; height: 56px; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 1rem; }
.blog-sidebar-cta h5 { color: #fff; }
.blog-sidebar-cta p { color: rgba(255,255,255,.7); }
.blog-sidebar-cta .btn-brand { background: #fff; color: var(--brand); box-shadow: none; }
.blog-sidebar-cta .btn-brand:hover { background: #f1f5f9; color: var(--brand); }

/* Related posts */
.blog-related-item { display: flex; gap: .875rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; transition: color .15s; }
.blog-related-item:last-child { border-bottom: 0; padding-bottom: 0; }
.blog-related-item:hover .blog-related-title { color: var(--brand); }
.blog-related-img { width: 60px; height: 50px; border-radius: .375rem; background-size: cover; background-position: center; flex-shrink: 0; }
.blog-related-placeholder { background: var(--brand-light); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--brand); opacity: .4; }
.blog-related-title { font-size: .8rem; font-weight: 600; color: #1e293b; line-height: 1.4; margin-bottom: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-related-date { font-size: .7rem; color: #94a3b8; }

/* ── STICKY HEADER WRAP ──────────────────────────────────────────── */
.site-header-wrap {
  position: sticky; top: 0; z-index: 1030;
}
.site-header-wrap .app-navbar {
  position: static; /* navbar is inside the sticky wrapper */
}
/* Adjust about-tabs-bar and blog-filter-bar top offset */
.about-tabs-bar { top: 0; }
.blog-filter-bar { top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════════════════════════════ */
.hero-slider {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ── Slide backgrounds ─────────────────────────────────────────── */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  z-index: 0;
}
.hero-slide.active { opacity: 1; z-index: 1; }

.hero-slide-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 4s ease;
}
.hero-slide.active .hero-slide-bg { transform: scale(1); }

.hero-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,15,40,.88) 0%,
    rgba(10,15,40,.72) 50%,
    rgba(200,16,46,.18) 100%
  );
}

/* ── Content layer ─────────────────────────────────────────────── */
.hero-content {
  position: relative; z-index: 10;
  width: 100%; padding: 5rem 0 4rem;
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.25rem;
  opacity: 0; transform: translateY(16px);
  animation: heroFadeUp .6s .1s forwards;
}
.hero-eyebrow::before {
  content: ''; width: 28px; height: 2px;
  background: var(--gold); border-radius: 1px;
}

/* Heading */
.hero-heading {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: #fff;
  margin-bottom: 1.25rem;
}
.hero-line {
  display: inline-block;
  opacity: 0; transform: translateY(24px);
}
.hero-line:nth-child(1) { animation: heroFadeUp .6s .2s forwards; }
.hero-line:nth-child(3) { animation: heroFadeUp .6s .35s forwards; }
.hero-line:nth-child(5) { animation: heroFadeUp .6s .5s forwards; }
.hero-line-accent { color: var(--gold); }

/* Sub */
.hero-sub {
  font-size: 1rem; color: rgba(255,255,255,.65);
  line-height: 1.75; max-width: 520px;
  opacity: 0; transform: translateY(16px);
  animation: heroFadeUp .6s .6s forwards;
}

/* Search form */
.hero-search-wrap {
  opacity: 0; transform: translateY(16px);
  animation: heroFadeUp .6s .75s forwards;
}
.hero-search-form {
  display: flex; max-width: 500px;
  border-radius: .5rem; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.hero-select {
  flex: 1; padding: .85rem 1.1rem;
  border: 0; outline: none;
  font-size: .875rem; color: #374151;
  background: #fff; cursor: pointer;
}
.hero-search-btn {
  padding: .85rem 1.5rem;
  background: var(--brand); color: #fff;
  border: 0; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.hero-search-btn:hover { background: var(--brand-dark); }

/* Trust badges */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  color: rgba(255,255,255,.55); font-size: .78rem;
  opacity: 0; animation: heroFadeUp .6s .9s forwards;
}
.hero-trust span { display: flex; align-items: center; gap: .4rem; }
.hero-trust i { color: #22c55e; }

/* ── Mascot ────────────────────────────────────────────────────── */
.hero-mascot-wrap {
  position: relative;
  width: 340px; height: 380px;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; animation: heroFadeUp .8s .4s forwards;
}

/* Pulsing rings */
.hero-mascot-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(200,16,46,.25);
  animation: ringPulse 3s ease-in-out infinite;
}
.hero-mascot-ring-1 { width: 220px; height: 220px; bottom: 20px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.hero-mascot-ring-2 { width: 290px; height: 290px; bottom: -15px; left: 50%; transform: translateX(-50%); animation-delay: .6s; border-color: rgba(245,158,11,.15); }
.hero-mascot-ring-3 { width: 360px; height: 360px; bottom: -50px; left: 50%; transform: translateX(-50%); animation-delay: 1.2s; border-color: rgba(255,255,255,.06); }

.hero-mascot-img {
  position: relative; z-index: 2;
  height: 320px; object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.5));
  animation: mascotFloat 4s ease-in-out infinite;
}

/* Floating badges */
.hero-float-badge {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .72rem; font-weight: 700;
  padding: .45rem .875rem; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.hero-float-badge i { color: var(--gold); font-size: .75rem; }
.hero-float-1 { top: 40px; left: -10px; animation: floatBadge 3s ease-in-out infinite; }
.hero-float-2 { top: 120px; right: -20px; animation: floatBadge 3s ease-in-out infinite .8s; }
.hero-float-3 { bottom: 80px; left: -20px; animation: floatBadge 3s ease-in-out infinite 1.6s; }

/* ── Controls ──────────────────────────────────────────────────── */
.hero-controls {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex; align-items: center; gap: 1rem;
}
.hero-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
  backdrop-filter: blur(4px);
}
.hero-arrow:hover { background: var(--brand); transform: scale(1.1); }
.hero-dots { display: flex; gap: .5rem; }
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3); border: 0; cursor: pointer;
  transition: all .3s; padding: 0;
}
.hero-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }

/* Progress bar */
.hero-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,.1); z-index: 20;
}
.hero-progress-bar {
  height: 100%; background: var(--brand);
  width: 0%; transition: width linear;
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ringPulse {
  0%,100% { transform: translateX(-50%) scale(1); opacity: .6; }
  50%      { transform: translateX(-50%) scale(1.06); opacity: 1; }
}
@keyframes mascotFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
@keyframes floatBadge {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-8px) rotate(1deg); }
}

/* Text transition */
.hero-text-out { animation: heroTextOut .35s forwards !important; }
.hero-text-in  { animation: heroFadeUp .5s forwards !important; }
@keyframes heroTextOut {
  to { opacity: 0; transform: translateY(-12px); }
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .hero-slider { min-height: 75vh; }
  .hero-content { padding: 2.5rem 0 4rem; }
  .hero-heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-sub { font-size: .85rem; }
  .hero-eyebrow { font-size: .65rem; margin-bottom: .75rem; }
  .hero-search-form { flex-direction: column; border-radius: .5rem; }
  .hero-select { border-radius: .5rem .5rem 0 0; padding: .7rem 1rem; }
  .hero-search-btn { border-radius: 0 0 .5rem .5rem; text-align: center; padding: .7rem 1rem; }
  .hero-trust { gap: .75rem; font-size: .72rem; }
  .hero-controls { bottom: 1.25rem; }
  .hero-arrow { width: 32px; height: 32px; font-size: .75rem; }
  .hero-dot { width: 6px; height: 6px; }
  .hero-dot.active { width: 18px; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR MENU (Minimalist — white, centered)
═══════════════════════════════════════════════════════════════════ */
.mobile-menu-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(10,15,40,.55);
  backdrop-filter: blur(3px);
  z-index: 2000; opacity: 0;
  transition: opacity .3s;
}
.mobile-menu-overlay.open { display: block; opacity: 1; }

.mobile-menu {
  position: fixed; top: 0; right: -100%;
  width: min(320px, 88vw); height: 100vh;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid rgba(255,255,255,.3);
  z-index: 2001;
  display: flex; flex-direction: column;
  transition: right .32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
}
.mobile-menu.open { right: 0; }

/* Header */
.mm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mm-close {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.06); border: 0;
  color: #374151; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.mm-close:hover { background: var(--brand); color: #fff; }

/* Nav */
.mm-nav {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1rem 1.5rem; gap: .1rem;
}
.mm-link {
  display: block; width: 100%; text-align: center;
  padding: .65rem 1rem;
  font-size: 1.05rem; font-weight: 600; color: #1e293b;
  text-decoration: none; border-radius: .5rem;
  transition: color .15s, background .15s;
}
.mm-link:hover { color: var(--brand); background: var(--brand-50); }
.mm-active { color: var(--brand) !important; }

/* Divider */
.mm-divider { width: 40px; height: 1px; background: rgba(0,0,0,.08); margin: .75rem 0; border-radius: 1px; }

/* Dashboard link with avatar */
.mm-dashboard {
  display: flex !important; align-items: center; justify-content: center;
  gap: .6rem; color: var(--brand) !important;
}
.mm-user-img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--brand-light);
}
.mm-user-init {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0;
}

/* Sign out */
.mm-signout { color: #94a3b8 !important; font-size: .85rem !important; font-weight: 500 !important; }
.mm-signout:hover { color: #ef4444 !important; background: #fef2f2 !important; }

/* Sign in */
.mm-signin { color: #64748b !important; font-size: .9rem !important; }

/* CTA button */
.mm-cta-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .875rem 1.5rem;
  background: var(--brand); color: #fff;
  font-size: .95rem; font-weight: 700;
  border-radius: .5rem; text-decoration: none;
  transition: background .15s;
  margin-bottom: .25rem;
}
.mm-cta-btn:hover { background: var(--brand-dark); color: #fff; }

/* ── PUBLIC NAVBAR USER PILL ─────────────────────────────────────── */
.pub-user-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem .3rem .3rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  text-decoration: none; color: #fff;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.pub-user-pill:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.pub-avatar-img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.3);
}
.pub-avatar-init {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.pub-avatar-name {
  font-size: .8rem; font-weight: 600;
  max-width: 100px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ═══ BLOG SHARE BUTTONS ════════════════════════════════════════════ */
.blog-share { display: flex; flex-direction: column; gap: .875rem; }
.blog-share-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.blog-share-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-share-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem; border-radius: .375rem;
  font-size: .78rem; font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.blog-share-btn:hover { opacity: .88; transform: translateY(-1px); }
.share-copy { background: #f1f5f9; color: #475569; }
.share-wa   { background: #25D366; color: #fff; }
.share-tw   { background: #1DA1F2; color: #fff; }
.share-fb   { background: #1877F2; color: #fff; }
.share-li   { background: #0A66C2; color: #fff; }
.blog-copy-confirm {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: #16a34a; font-weight: 600;
  background: #dcfce7; padding: .35rem .875rem;
  border-radius: .375rem; width: fit-content;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — comprehensive fixes
═══════════════════════════════════════════════════════════════════ */

/* ── Base mobile ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Topbar — hide phone on very small screens */
  .site-topbar { padding: .35rem 0; }
  .topbar-badge { display: none; }

  /* Navbar */
  .app-navbar { padding: .5rem 0; }
  .navbar-logo-img { height: 38px; }

  /* Hero slider */
  .hero-slider { min-height: 72vh; }
  .hero-content { padding: 2rem 0 4.5rem; }
  .hero-heading { font-size: clamp(1.5rem, 6.5vw, 2rem); margin-bottom: .875rem; }
  .hero-sub { font-size: .82rem; line-height: 1.65; }
  .hero-eyebrow { font-size: .62rem; margin-bottom: .6rem; }
  .hero-search-form { flex-direction: column; }
  .hero-select { border-radius: .5rem .5rem 0 0; padding: .75rem 1rem; font-size: .875rem; }
  .hero-search-btn { border-radius: 0 0 .5rem .5rem; padding: .75rem; font-size: .8rem; }
  .hero-trust { gap: .75rem; font-size: .72rem; flex-wrap: wrap; }
  .hero-controls { bottom: 1rem; gap: .6rem; }
  .hero-arrow { width: 30px; height: 30px; font-size: .72rem; }

  /* Section headings */
  .kra-section-head h2 { font-size: 1.3rem; }
  .about-big-title { font-size: clamp(1.8rem, 8vw, 2.5rem); }

  /* News cards */
  .kra-news-img { height: 130px; }

  /* Links cards */
  .kra-links-img { height: 110px; }

  /* Service cards */
  .kra-service-price { font-size: 1.3rem; }

  /* Steps row — stack on mobile */
  .kra-steps-row { border: 0; }
  .kra-steps-row .col { flex: 0 0 100%; max-width: 100%; }
  .kra-step { border-right: 0; border-bottom: 1px solid var(--border); padding: 1.25rem; }
  .kra-step:last-child { border-bottom: 0; }

  /* Icon bar — 4 per row */
  .kra-icon-bar-item { font-size: .58rem; padding: .75rem .25rem; }
  .kra-icon-bar-item i { font-size: 1rem; }
  .kra-icon-bar .col { flex: 0 0 14.28%; }

  /* About page */
  .about-hero { min-height: 160px; }
  .about-hero-title { font-size: 1.5rem; }
  .about-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .about-tab { padding: .75rem 1rem; font-size: .68rem; white-space: nowrap; }
  .about-timeline-line { display: none; }
  .about-milestone { flex-direction: column !important; align-items: flex-start !important; padding: 0 0 1.5rem 1rem; border-left: 2px solid var(--brand); }
  .about-milestone-dot { position: absolute; left: -9px; top: 4px; }
  .about-milestone-content { padding: 0 !important; }

  /* Process page */
  .process-step-row { grid-template-columns: 48px 1fr; gap: 1rem; }
  .process-step-circle { width: 48px; height: 48px; font-size: 1.1rem; }

  /* Pricing */
  .deadline-card { flex-direction: column; }

  /* Contact */
  .contact-info-strip .col-6 { flex: 0 0 50%; }
  .contact-strip-item { padding: .875rem .5rem; }
  .contact-strip-value { font-size: .72rem; }

  /* Blog */
  .blog-featured { border-radius: .625rem; }
  .blog-featured-img { min-height: 200px; }
  .blog-featured-body { padding: 1.25rem; }
  .blog-featured-title { font-size: 1.1rem; }
  .blog-share-btns { gap: .4rem; }
  .blog-share-btn { padding: .4rem .75rem; font-size: .72rem; }
  .blog-share-btn span { display: none; }
  .blog-share-btn i { font-size: .9rem; }

  /* Auth */
  .auth-left { display: none !important; }
  .auth-right { padding: 1.25rem; }
  .auth-card { padding: 1.5rem; }

  /* Footer */
  .site-footer .row > div { margin-bottom: 1.5rem; }

  /* Tables — horizontal scroll */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .portal-table { min-width: 600px; }

  /* Floating buttons */
  .floating-whatsapp { width: 44px; height: 44px; font-size: 1.2rem; bottom: 1rem; left: 1rem; }
  .floating-chat-btn { width: 44px; height: 44px; font-size: 1.1rem; }
  .floating-chat-wrapper { bottom: 1rem; right: 1rem; }
  .chat-window { width: calc(100vw - 2rem); max-width: 320px; height: 420px; }

  /* Filing page */
  .type-card { padding: .75rem .5rem !important; }
  .type-card .fw-bold { font-size: .72rem; }
}

/* ── Small phones ────────────────────────────────────────────────── */
@media (max-width: 479.98px) {
  .hero-slider { min-height: 80vh; }
  .hero-heading { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  .hero-trust { display: none; }
  .kra-section-head h2 { font-size: 1.2rem; }
  .kra-icon-bar-item span { display: none; }
  .kra-icon-bar-item { padding: .875rem .4rem; }
  .kra-icon-bar-item i { font-size: 1.1rem; }
  .portal-stat-val { font-size: 1.2rem; }
  .portal-stat-label { font-size: .68rem; }
  .blog-share-btn span { display: none; }
}

/* ── Tablet ──────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-slider { min-height: 70vh; }
  .hero-heading { font-size: clamp(2rem, 4vw, 2.8rem); }
  .kra-steps-row .col { flex: 0 0 50%; max-width: 50%; }
  .kra-step { border-bottom: 1px solid var(--border); }
  .about-tabs { overflow-x: auto; }
}

/* ── Prevent horizontal overflow globally ────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }
.container { padding-left: 1rem; padding-right: 1rem; }

/* ═══ NEWS SLIDER ═══════════════════════════════════════════════════ */
.news-slider-wrap {
  overflow: hidden;
  position: relative;
}
.news-slider-track {
  display: flex;
  gap: 1rem;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.news-slide-card {
  flex: 0 0 calc(25% - .75rem);
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .75rem;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  color: inherit;
}
.news-slide-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  color: inherit;
}
.news-slide-img {
  height: 150px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.news-slide-placeholder {
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; color: var(--brand); opacity: .3;
}
.news-slide-body { padding: .875rem; }
.news-slide-title {
  font-size: .82rem; font-weight: 700; color: #1e293b;
  line-height: 1.4; margin-bottom: .3rem;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.news-slide-card:hover .news-slide-title { color: var(--brand); }
.news-slide-desc {
  font-size: .72rem; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: .4rem;
}
.news-slide-date { font-size: .68rem; color: #94a3b8; }

/* Arrow buttons */
.news-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: #f1f5f9; border: 1px solid var(--border);
  color: #475569; font-size: .72rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.news-arrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Dots */
.news-dots {
  display: flex; justify-content: center; gap: .4rem;
  margin-top: .875rem;
}
.news-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #e2e8f0; border: 0; cursor: pointer;
  padding: 0; transition: all .25s;
}
.news-dot.active { background: var(--brand); width: 18px; border-radius: 3px; }

/* Responsive */
@media (max-width: 991.98px) {
  .news-slide-card { flex: 0 0 calc(50% - .5rem); }
}
@media (max-width: 575.98px) {
  .news-slide-card { flex: 0 0 calc(85% - .5rem); }
  .news-slide-img { height: 130px; }
}

/* ═══ YEAR PICKER ═══════════════════════════════════════════════════ */
.year-picker {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .75rem; border: 1.5px solid #e2e8f0;
  border-radius: .5rem; background: #f8fafc;
}
.year-pill {
  padding: .35rem .875rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  background: #fff; border: 1.5px solid #e2e8f0;
  color: #475569; cursor: pointer;
  transition: all .15s; user-select: none;
}
.year-pill:hover { border-color: var(--brand); color: var(--brand); }
.year-pill.selected {
  background: var(--brand); border-color: var(--brand);
  color: #fff; box-shadow: 0 2px 8px rgba(200,16,46,.3);
}