/* ==========================================================================
   COMBINED STYLES - RWSEC Website
   Generated from individual CSS files in rwsec-react/src/styles/
   ========================================================================== */

/* ==========================================================================
   Local Fonts (no external requests)
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Inter-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Latin.woff2') format('woff2');
}

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

:root {
  --red:       #bc1c14;
  --red-dark:  #9a1710;
  --red-light: #d42b22;
  --black:     #111111;
  --dark:      #1A1A1A;
  --mid:       #2C2C2C;
  --gray:      #555;
  --light:     #F5F5F5;
  --white:     #FFFFFF;
  --gold:      #C9A84C;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* -- TOP BAR -- */
.topbar {
  background: var(--dark);
  padding: 8px 0;
  font-size: 12px;
  color: #b0b0b0;
}
.topbar .inner {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar a { color: #c0c0c0; text-decoration: none; transition: color .2s; }
.topbar a:hover { color: var(--red-light); }
.topbar-links { display: flex; gap: 5px; flex-wrap: wrap; }
.topbar-links a {
  padding: 4px 8px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* -- HEADER -- */
header {
  background: var(--white);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0,0,0,.10);
}
.header-inner {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
/* 1.4.1 - Non-color link indicator for content areas */
main a:not(.btn-primary):not(.btn-outline):not(.btn-login):not(.product-link):not(.ps-learn-more):not(.read-more):not(.info-card a):not(.step-item a) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
main a:not(.btn-primary):not(.btn-outline):not(.btn-login):not(.product-link):not(.ps-learn-more):not(.read-more):not(.info-card a):not(.step-item a):hover {
  text-decoration-thickness: 2px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.logo-text { line-height: 1.1; }
.logo-text .brand {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
}
.logo-text .brand span { color: var(--red); }
.logo-text .sub { font-size: 10.5px; color: var(--gray); letter-spacing: .5px; }

nav { display: flex; align-items: center; }
nav a {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
nav a:hover { background: var(--light); color: var(--red); }
.login-dropdown { position: relative; margin-left: 8px; }
.btn-login {
  background: var(--red);
  color: var(--white) !important;
  padding: 9px 22px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: background .2s !important;
}
.btn-login:hover { background: var(--red-dark) !important; color: #fff !important; }
.login-menu {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 10px;
  min-width: 180px;
  z-index: 1000;
}
.login-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
}
.login-menu-inner {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}
.login-menu-inner a {
  display: block;
  padding: 10px 18px !important;
  color: var(--black) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s;
}
.login-menu-inner a:hover {
  background: var(--red);
  color: #fff !important;
}

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--black); border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- HERO -- */
.hero {
  position: relative;
  background: #e8e8e8;
  overflow: hidden;
  min-height: auto;
  display: flex;
  flex-direction: column;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(188,28,20,.06) 0%, transparent 65%);
}
.hero-lines {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  pointer-events: none;
}
.hero-lines::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(188,28,20,.08);
  border-radius: 50%;
}
.hero-lines::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(188,28,20,.06);
  border-radius: 50%;
}

.hero-inner {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  flex: 1;
  z-index: 1;
  width: 100%;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(188,28,20,.1);
  border: 1px solid rgba(188,28,20,.25);
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 10px;
  margin-top: 14px;
}
.hero-tag::before { content: '\25CF'; font-size: 8px; }
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.1;
  margin-bottom: 10px;
}
.hero h1 em { color: var(--red); font-style: normal; }
.hero p {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: 440px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  background: var(--red);
  color: var(--white);
  padding: 14px 30px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s, transform .2s;
  font-family: var(--font-body);
}
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); }
.btn-outline {
  border: 1.5px solid rgba(0,0,0,.2);
  color: #2a2a2a;
  padding: 13px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .25s, background .25s;
}
.btn-outline:hover { border-color: var(--red); background: rgba(188,28,20,.08); }

/* Hero topbar stats – full-width independent line at top of hero */
.hero-topbar-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: nowrap;
  position: relative;
  z-index: 2;
}
.topbar-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  position: relative;
  flex: 1;
  padding: 16px 10px;
  background: rgba(0,0,0,.03);
  border-right: 1px solid rgba(0,0,0,.06);
  transition: background .3s;
}
.topbar-stat:first-child { border-radius: 0; }
.topbar-stat:last-child { border-right: none; }
.topbar-stat:hover { background: rgba(188,28,20,.06); }
.topbar-stat:not(:last-child)::after { display: none; }
.topbar-num {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}
.topbar-num span { color: #1a1a1a; }
.topbar-lbl {
  font-size: 10px;
  color: #555;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Hero stats (legacy) */
.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.stat-num span { color: var(--red-light); }
.stat-lbl { font-size: 12px; color: #999; margin-top: 4px; letter-spacing: .5px; }

/* Hero cards panel */
.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.hero-card {
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .3s, background .3s;
  cursor: default;
}
.hero-card:hover { border-color: rgba(188,28,20,.3); background: rgba(188,28,20,.05); }
.hero-card-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-card-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
}
.hero-card-body .title { font-size: 13px; font-weight: 600; color: var(--red); margin-bottom: 2px; }
.hero-card-body .desc { font-size: 11px; color: #1a1a1a; line-height: 1.4; }

/* -- MARQUEE TICKER -- */
.ticker {
  display: none;
}
.ticker-pause {
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  margin-left: 12px;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
}
.ticker-pause:hover, .ticker-pause:focus-visible {
  background: rgba(255,255,255,.15);
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.ticker-inner {
  display: inline-flex;
  animation: ticker 30s linear infinite;
  gap: 0;
}
.ticker-inner span { padding: 0 40px; }
.ticker-sep { color: rgba(255,255,255,.6); padding: 0 10px !important; }
.ticker-stock { font-variant-numeric: tabular-nums; }
.ticker-up { color: #fff; }
.ticker-down { color: #ffcdd2; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-inner {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-inner {
    animation: none !important;
  }
}

/* -- SECTION BASE -- */
section { padding: 40px 24px; }
.container { max-width: 1200px; margin: auto; }
.section-label {
  font-size: 15px; /* CAI++ 21042026 - increased from 11px to 15px */
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 14px;
}
.section-sub { font-size: 15px; color: var(--gray); max-width: 520px; line-height: 1.7; }
.section-header { margin-bottom: 24px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-sub { margin: 0 auto; }

/* -- PRODUCTS -- */
.products { background: var(--light); }
.products-carousel {
  position: relative;
  padding: 0 30px;
}
.products-grid {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
  flex-wrap: nowrap;
}
.products-grid::-webkit-scrollbar { display: none; }
.products-grid .product-card {
  width: calc(33.333% - 15px);
  min-width: calc(33.333% - 15px);
  max-width: calc(33.333% - 15px);
  flex-shrink: 0;
  flex-shrink: 0;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(188,28,20,.25);
  transition: background .2s, transform .2s;
}
.carousel-arrow:hover { background: var(--red-dark); transform: translateY(-50%) scale(1.1); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }
.product-card {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
  opacity: 0;
  transform: translateY(25px);
}
.product-card.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all .6s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.product-card-img {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-card-img img {
  transform: scale(1.06);
}
.product-card-body { padding: 22px; }
.product-card-body h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.product-card-body p { font-size: 13.5px; color: var(--gray); line-height: 1.6; margin-bottom: 16px; }
.product-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-link::after { content: '\2192'; transition: transform .2s; }
.product-link:hover::after { transform: translateX(4px); }

/* -- WHY US -- */
.why { background: var(--white); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.why-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(25px);
}
.why-visual.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all .7s ease;
}
.why-circle {
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(188,28,20,.06), rgba(188,28,20,.14));
  border: 2px solid rgba(188,28,20,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.why-circle-inner {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 20px 60px rgba(188,28,20,.35);
}
.why-circle-inner .big {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.why-circle-inner .sm { font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: 1px; margin-top: 4px; }
.orbit {
  position: absolute;
  width: 56px;
  height: 56px;
  background: var(--white);
  border: 2px solid rgba(188,28,20,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  top: 50%;
  left: 50%;
  margin: -28px 0 0 -28px;
  animation: orbit-spin 12s linear infinite;
}
.orbit-1 { animation-delay: 0s; }
.orbit-2 { animation-delay: -3s; }
.orbit-3 { animation-delay: -6s; }
.orbit-4 { animation-delay: -9s; }

@keyframes orbit-spin {
  from { transform: rotate(0deg)   translateX(170px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(170px) rotate(-360deg); }
}

.why-features { display: flex; flex-direction: column; gap: 24px; }
.feature-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: border-color .3s, background .3s;
  opacity: 0;
  transform: translateY(15px);
}
.feature-row.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s ease;
}
.feature-row:hover { border-color: rgba(188,28,20,.15); background: #fff7f7; }
.feature-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(188,28,20,.25);
}
.feature-text h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 5px; }
.feature-text p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }

.why-features-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .why-features-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .why-features-bottom { grid-template-columns: 1fr; }
}

/* -- STEPS -- */
/* CAI++ 21042026 - changed from dark to light grey theme */
.steps { background: #f0f0f0; }
.steps .section-title { color: var(--black); }
.steps .section-sub { color: #555; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  margin-top: 50px;
  background: rgba(0,0,0,.05);
  border-radius: 16px;
  overflow: hidden;
}
.step-item {
  padding: 36px 28px;
  background: rgba(255,255,255,.7);
  position: relative;
  transition: background .3s;
  opacity: 0;
  transform: translateY(20px);
}
.step-item.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s ease;
}
.step-item:hover { background: rgba(188,28,20,.08); }
.step-num {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 14px;
}
.step-icon { font-size: 28px; color: var(--black); margin-bottom: 12px; }
.step-item h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.step-item p { font-size: 13px; color: #555; line-height: 1.6; }


/* -- CTA BANNER -- */
.cta-banner {
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  padding: 40px 24px;
  text-align: center;
}
.cta-banner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 14px;
}
.cta-banner p { font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 34px; }
.btn-white {
  background: var(--white);
  color: var(--red);
  padding: 14px 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.btn-white-outline {
  border: 2px solid rgba(255,255,255,.5);
  color: var(--white);
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-left: 14px;
  transition: border-color .2s, background .2s;
}
.btn-white-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* -- CONTACT SECTION -- */
.contact-section { background: var(--white); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  opacity: 0;
  transform: translateY(25px);
}
.contact-grid.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all .6s ease;
}
.contact-info h3,
.contact-form-wrapper h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 24px;
}
.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.contact-icon {
  width: 44px;
  height: 44px;
  background: rgba(188,28,20,.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.contact-item h4 { font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.contact-item p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }

/* Contact Form */
.contact-form-wrapper {
  background: var(--light);
  border-radius: 14px;
  padding: 32px;
  max-width: 700px;
  margin: 0 auto;
}
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 18px;
  border: 1.5px solid rgba(0,0,0,.4);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  color: var(--black);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(188,28,20,.1);
}
.contact-form textarea { resize: vertical; }

/* -- ADVISORY -- */
/* -- ATTENTION INVESTORS -- */
.attention-investors {
  background: #e8e8e8;
  padding: 48px 24px;
  color: #555;
}
.attention-investors .container {
  max-width: 1200px;
  margin: auto;
}
.attention-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.attention-header h3 {
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.btn-advisory {
  display: inline-block;
  background: var(--red);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.btn-advisory:hover {
  background: var(--red-light);
}
.attention-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attention-list li {
  font-size: 13px;
  line-height: 1.7;
  color: #555;
}

/* -- CORPORATE OFFICE -- */
.corporate-office {
  background: #e8e8e8;
  padding: 12px 24px;
  color: #555;
  border-top: 1px solid rgba(0,0,0,.1);
}
.corporate-office .container {
  max-width: 1200px;
  margin: auto;
}
.office-grid {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: 10px;
  align-items: start;
}
.office-map {
  position: relative;
}
.office-map iframe {
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 8px;
  display: block;
}
@media (max-width: 600px) {
  .office-map iframe { height: 150px; }
}
.map-link {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  background: rgba(255,255,255,.1);
  padding: 4px 12px;
  border-radius: 4px;
}
.map-link { background: rgba(0,0,0,.08); color: #333; }
.map-link:hover { background: rgba(0,0,0,.15); }
.office-details h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.office-info {
  display: flex;
  gap: 48px;
  margin-top: 0;
}
.office-info h5 {
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.office-info p {
  font-size: 12px;
  line-height: 1.6;
  color: #555;
}
.office-info a {
  color: #555;
  text-decoration: none;
}
.office-info a:hover {
  color: var(--red);
}
.office-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.office-social {
  display: none;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff !important;
  font-size: 18px;
  transition: opacity .2s;
  text-decoration: none;
}
.social-icon:hover { opacity: .8; }
.social-icon.fb { background: #1877F2; }
.social-icon.tw { background: #000; }
.social-icon.ln { background: #0A66C2; }
.social-icon.yt { background: #FF0000; }
.social-icon.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-icon.wa { background: #25D366; }
.social-icon svg { width: 20px; height: 20px; }

.advisory {
  background: #fff8e1;
  padding: 16px 24px;
}
.advisory p {
  font-size: 12.5px;
  color: #6d5c00;
  line-height: 1.6;
  max-width: 1200px;
  margin: auto;
}

/* Social links */
.social-links { display: flex; gap: 10px; }
.social-link {
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  color: #555;
  transition: border-color .2s, background .2s, color .2s;
}
.social-link:hover { border-color: var(--red); background: rgba(188,28,20,.1); color: var(--red); }

.contact-section .social-link {
  background: var(--light);
  border-color: rgba(0,0,0,.08);
  color: var(--gray);
}
.contact-section .social-link:hover {
  background: rgba(188,28,20,.1);
  border-color: var(--red);
  color: var(--red);
}
.whatsapp-social:hover {
  background: rgba(37,211,102,.1) !important;
  border-color: #25D366 !important;
  color: #25D366 !important;
}

/* -- FOOTER -- */
footer { background: #e8e8e8; color: #555; }
.footer-top {
  max-width: 1200px;
  margin: auto;
  padding: 40px 24px 30px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
  gap: 32px;
}
.footer-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}
.footer-brand .logo-text .brand { color: #1a1a1a; }
.footer-brand p { font-size: 13.5px; line-height: 1.8; margin-top: 16px; color: #555; }
.footer-brand .member { font-size: 10.5px; color: #666; margin-top: 12px; line-height: 1.6; }
.footer-col h5 { font-size: 13px; font-weight: 700; color: #1a1a1a; letter-spacing: .5px; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 13px; color: #555; text-decoration: none; transition: color .2s; }
.footer-col ul li a:hover { color: var(--red); }

/* Footer Regulatory Links Row */
.footer-regulatory {
  border-top: 1px solid rgba(0,0,0,.1);
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  text-align: center;
}
.footer-regulatory .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.footer-regulatory a {
  font-size: 12px;
  color: #555;
  text-decoration: none;
  padding: 4px 10px;
  transition: color .2s;
}
.footer-regulatory a:hover { color: var(--red); }
.footer-regulatory a:not(:last-child)::after {
  content: '|';
  margin-left: 10px;
  color: #bbb;
}

/* Footer Registration & Compliance */
.footer-registration {
  border-top: 1px solid rgba(0,0,0,.1);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px;
  text-align: center;
}
.footer-registration p {
  font-size: 11.5px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 6px;
}
.footer-registration a {
  color: #333;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.footer-registration a:hover { color: var(--red); }
.footer-registration .disclaimer-text {
  font-size: 11px;
  color: #777;
  line-height: 1.7;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Footer Bottom / Copyright */
.footer-bottom {
  border-top: 1px solid rgba(0,0,0,.1);
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 12px; color: #666; }
.footer-bottom a { color: #555; text-decoration: none; }
.footer-bottom a:hover { color: var(--red); }

/* -- WHATSAPP FLOAT -- */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  z-index: 999;
  transition: transform .2s, box-shadow .2s;
  animation: whatsapp-pulse 2s infinite;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37,211,102,.5);
}
@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); }
  50% { box-shadow: 0 4px 30px rgba(37,211,102,.6); }
}

/* -- BACK TO TOP -- */
.back-to-top {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 46px;
  height: 46px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(188,28,20,.35);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all .3s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--red-dark);
  transform: translateY(-3px);
}

/* -- MOBILE NAV OVERLAY -- */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 1001;
  flex-direction: column;
  padding: 16px 24px 40px;
  gap: 8px;
  overflow-y: auto;
}
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--light);
  margin-bottom: 8px;
}
.mobile-nav .mobile-nav-close {
  background: none;
  border: 2px solid var(--light);
  font-size: 24px;
  cursor: pointer;
  color: var(--black);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mobile-nav .mobile-nav-close:hover {
  background: var(--light);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--light);
}
.mobile-nav a.red { color: var(--red); }

/* -- RESPONSIVE -- */
@media (max-width: 1280px) {
  nav a {
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .btn-login {
    padding: 8px 16px !important;
    font-size: 12.5px;
  }
  .header-inner {
    padding: 0 16px;
  }
  .topbar-links a {
    padding: 4px 5px;
    font-size: 11px;
  }
  .topbar { font-size: 11px; }
}

@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .office-grid {
    grid-template-columns: 1fr;
  }
  .office-social {
    grid-column: 1 / -1;
    justify-content: center;
  }
  nav a {
    padding: 8px 8px;
    font-size: 12px;
  }
  .btn-login {
    padding: 7px 14px !important;
    font-size: 12px;
  }
  .logo-text .brand { font-size: 19px; }
  .logo-text .sub { font-size: 9.5px; }
  .logo-img { height: 42px; }
  .header-inner { height: 68px; }
}

@media (max-width: 900px) {
  .hero-topbar-stats { flex-wrap: wrap; gap: 0; }
  .topbar-stat { padding: 10px 6px; flex: 1 1 33.33%; }
  .topbar-num { font-size: 18px; }
  .topbar-lbl { font-size: 8px; letter-spacing: .5px; }
  nav { display: none; }
  .hamburger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-panel { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .why-visual { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .office-grid { grid-template-columns: 1fr; }
  .products-grid .product-card {
    width: calc(50% - 11px);
    min-width: calc(50% - 11px);
    max-width: calc(50% - 11px);
  }
}

@media (max-width: 480px) {
  .products-grid {
    scroll-snap-type: x mandatory;
    padding: 4px 16px 8px;
  }
  .products-grid .product-card {
    width: 75%;
    min-width: 75%;
    max-width: 75%;
    scroll-snap-align: start;
  }
  .carousel-prev, .carousel-next { display: none; }
  .products-carousel { padding: 0; }
}

@media (max-width: 600px) {
  section { padding: 30px 16px; }
  .topbar-links { display: none; }
  .topbar .inner { flex-direction: column; gap: 4px; }
  .topbar .inner > div:first-child { flex-wrap: wrap; justify-content: center; font-size: 11px; gap: 4px; }
  .footer-top { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: 1fr; }
  .office-info { flex-wrap: wrap; }
  .office-social { justify-content: flex-start; }
  .attention-header { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-banner .btn-white-outline { display: none; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .carousel-prev { left: 4px; }
  .carousel-next { right: 4px; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .logo-text .brand { font-size: 18px; }
  .logo-text .sub { font-size: 9px; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 14px; }
  .stat-num { font-size: 22px; }
  .hero-cta { flex-direction: column; }
  .hero-cta a { width: 100%; text-align: center; justify-content: center; }
  .btn-primary, .btn-outline { width: 100%; text-align: center; justify-content: center; }
  .cta-banner { padding: 30px 16px; }
  .cta-banner h2 { font-size: 24px; }
  .cta-banner .btn-white { width: 100%; text-align: center; }
  .section-title { font-size: 26px; }
  .topbar .inner { justify-content: center; text-align: center; }
  .header-inner { padding: 0 16px; height: 64px; }
  .logo-img { height: 40px; }
  .footer-bottom p { font-size: 11px; text-align: center; }
  .ticker { font-size: 11px; }
  .advisory p { font-size: 11px; }
  .whatsapp-float {
    bottom: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
  }
  .back-to-top {
    bottom: 80px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  /* Global mobile overflow protection */
  main { overflow-x: clip; }
  table:not([class]) { display: block; overflow-x: auto; }
  img { max-width: 100%; height: auto; }
  .container { padding: 0 16px; }
  .section-header, .section-title, .section-sub { word-wrap: break-word; }
  .why-circle { width: 260px; height: 260px; }
  .why-circle-inner { width: 170px; height: 170px; }
  .featured-img::before, .featured-img::after { display: none; }
}

/* -- PAGE HERO BANNER (shared across inner pages) -- */
.page-hero {
  position: relative;
  background: #e8e8e8;
  padding: 20px 24px 14px;
  text-align: center;
  overflow: visible;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(188,28,20,.06) 0%, transparent 65%);
}
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 900;
  color: #2a2a2a;
  margin-bottom: 6px;
}
.page-hero h1 em { color: var(--red); font-style: normal; }
.breadcrumb {
  display: none;
}
.breadcrumb a {
  color: #555;
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { color: #999; }

/* -- SCROLL REVEAL -- */
.reveal-item {
  opacity: 0;
  transform: translateY(25px);
  transition: none;
}
.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all .6s ease;
}

@media (max-width: 600px) {
  .page-hero { padding: 16px 16px 10px; }
}

/* -- FORM ACCESSIBILITY -- */
.form-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 14px;
}
.form-success {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 14px;
}

/* -- FOCUS NOT OBSCURED (WCAG 2.4.11) -- */
*:focus {
  scroll-margin-top: 100px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .hero-stats .stat-item { width: 45%; }
  .header-inner { height: 56px; }
  .logo-img { height: 36px; }
  .why-circle { width: 220px; height: 220px; }
  .why-circle-inner { width: 150px; height: 150px; }
}

@media (max-width: 320px) {
  body { font-size: 13px; }
  .hero h1 { font-size: 26px; }
  .hero-cta a { padding: 12px 20px; font-size: 13px; }
  .section-title { font-size: 22px; }
  .page-hero h1 { font-size: 16px; }
  .page-hero { padding: 14px 12px 8px; }
  .breadcrumb { font-size: 12px; }
  .container { padding: 0 12px; }
  section { padding: 24px 12px; }
  .cta-banner { padding: 24px 12px; }
  .cta-banner h2 { font-size: 20px; }
  .footer-top { padding: 40px 12px 30px; }
}


/* ==========================================================================
   Home.css
   ========================================================================== */
/* Home-specific overrides if needed */

/* -- GLOBAL IMAGE RESPONSIVENESS -- */
img {
  max-width: 100%;
  height: auto;
}

/* -- TABLE OVERFLOW PROTECTION -- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   About.css
   ========================================================================== */
/* -- OVERVIEW SECTION -- */
.overview { background: var(--white); }
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.overview-img {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
.overview-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overview-text p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.8;
  margin-bottom: 18px;
}
.overview-text p strong { color: var(--black); }
.reg-info {
  margin-top: 24px;
  padding: 20px;
  background: var(--light);
  border-radius: 10px;
  border-left: 4px solid var(--red);
}
.reg-info p {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.8;
  margin-bottom: 0;
}
.reg-info p span { display: block; }

/* -- MISSION & VISION CARDS -- */
.mv-section { background: var(--light); }
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.mv-card {
  background: var(--white);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.mv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
.mv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--red-dark));
}
.mv-card .mv-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(188,28,20,.25);
}
.mv-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 14px;
}
.mv-card p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.8;
}
.mv-card blockquote {
  font-size: 16px;
  color: var(--black);
  font-style: italic;
  line-height: 1.7;
  border-left: 3px solid var(--red);
  padding-left: 18px;
  margin-top: 12px;
}

/* -- TIMELINE / MILESTONES -- */
/* CAI++ 21042026 - changed from dark to light grey theme */
.timeline-section { background: #f0f0f0; }
.timeline-section .section-title { color: var(--black); }
.timeline-section .section-sub { color: #555; }
.timeline {
  position: relative;
  margin-top: 50px;
  padding: 0 20px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(188,28,20,.3);
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
  position: relative;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item:nth-child(odd) { flex-direction: row; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-content {
  width: calc(50% - 40px);
  background: rgba(255,255,255,.7); /* CAI++ 21042026 */
  border: 1px solid rgba(0,0,0,.08); /* CAI++ 21042026 */
  border-radius: 12px;
  padding: 28px;
  transition: border-color .3s, background .3s;
}
.timeline-content:hover {
  border-color: rgba(188,28,20,.35);
  background: rgba(188,28,20,.05);
}
.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background: var(--red);
  border: 3px solid #f0f0f0; /* CAI++ 21042026 */
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(188,28,20,.2);
}
.timeline-year {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--red); /* CAI++ 21042026 */
  margin-bottom: 8px;
  line-height: 1;
}
.timeline-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--black); /* CAI++ 21042026 */
  margin-bottom: 8px;
}
.timeline-content p {
  font-size: 13.5px;
  color: #555; /* CAI++ 21042026 */
  line-height: 1.7;
}

/* -- STRENGTHS & PHILOSOPHY -- */
.strengths-section { background: var(--white); }
.strengths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.strengths-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.strength-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  background: var(--light);
  border-radius: 12px;
  border: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.strength-item:hover {
  border-color: rgba(188,28,20,.15);
  background: #fff7f7;
}
.strength-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(188,28,20,.25);
}
.strength-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 5px;
}
.strength-item p {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.6;
}
.philosophy-box {
  background: var(--light);
  border-radius: 16px;
  padding: 36px;
  border: 1px solid rgba(0,0,0,.05);
}
.philosophy-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 18px;
}
.philosophy-box p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.8;
  margin-bottom: 18px;
}
.philosophy-box p:last-child { margin-bottom: 0; }
.clientele-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.clientele-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(188,28,20,.08);
  border: 1px solid rgba(188,28,20,.15);
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
}

/* -- RESPONSIVE (About page-specific) -- */
@media (max-width: 900px) {
  .overview-grid { grid-template-columns: 1fr; }
  .overview-img { max-height: 350px; }
  .mv-grid { grid-template-columns: 1fr; }
  .strengths-grid { grid-template-columns: 1fr; }

  .timeline::before { left: 20px; }
  .timeline-item,
  .timeline-item:nth-child(even) { flex-direction: row; }
  .timeline-dot {
    left: 20px;
    transform: translateX(-50%);
  }
  .timeline-content { width: calc(100% - 60px); margin-left: 40px; }
}
@media (max-width: 600px) {
  .timeline-content { padding: 20px; }
  .mv-card { padding: 28px 22px; }
  .philosophy-box { padding: 24px; }
  .strength-item { padding: 16px; }
  .clientele-tag { font-size: 12px; padding: 6px 12px; }
}


/* ==========================================================================
   Products.css
   ========================================================================== */
.ps-section { background: var(--light); padding: 80px 24px; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; max-width: 1200px; margin: 0 auto; }
.ps-card { background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; }
.ps-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.ps-card-img { height: 200px; overflow: hidden; position: relative; }
.ps-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ps-card:hover .ps-card-img img { transform: scale(1.06); }
.ps-card-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.ps-card-body h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 12px; }
.ps-card-body > p { font-size: 13.5px; color: var(--gray); line-height: 1.7; margin-bottom: 14px; }
.ps-tag-group { margin-bottom: 14px; }
.ps-tag-group h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--red); margin-bottom: 8px; }
.ps-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-tag { background: rgba(188,28,20,.08); color: var(--red-dark); font-size: 11.5px; font-weight: 500; padding: 4px 12px; border-radius: 100px; border: 1px solid rgba(188,28,20,.12); }
.ps-benefits { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; padding: 0; }
.ps-benefits li { font-size: 12.5px; color: var(--gray); position: relative; padding-left: 14px; }
.ps-benefits li::before { content: '\2713'; position: absolute; left: 0; color: var(--red); font-weight: 700; font-size: 11px; }
.ps-card-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--light); }
.ps-learn-more { font-size: 13px; font-weight: 600; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; }
.ps-learn-more::after { content: '\2192'; transition: transform .2s; }
.ps-learn-more:hover::after { transform: translateX(4px); }
.ps-app-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ps-app-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--dark); color: var(--white); padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 500; }
.ps-app-badge .app-label { font-size: 10px; color: #aaa; display: block; }
.ps-app-badge .app-name { font-size: 13px; font-weight: 600; color: #fff; }
.sebi-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(188,28,20,.06); border: 1px solid rgba(188,28,20,.15); color: var(--red-dark); font-size: 11px; font-weight: 600; letter-spacing: .5px; padding: 5px 12px; border-radius: 6px; margin-bottom: 14px; }

@media (max-width: 900px) { .ps-grid { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1024px) { .ps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ps-grid { grid-template-columns: 1fr; } .ps-card-img { height: 160px; } .ps-card-body { padding: 20px; } .ps-app-badges { flex-direction: column; } .ps-app-badge { width: 100%; justify-content: center; } .ps-section { padding: 56px 16px; } }


/* ==========================================================================
   ProductDetail.css
   ========================================================================== */
.pd-overview { background: var(--white); }
.pd-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.pd-overview-img { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.1); }
.pd-overview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-overview-text p { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 18px; }
.pd-features { background: var(--light); }
.pd-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.pd-feature-card { background: var(--white); border-radius: 14px; padding: 28px; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; }
.pd-feature-card > div:last-child { margin-top: auto; }
.pd-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.pd-feature-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(188,28,20,.25); }
.pd-feature-card h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.pd-feature-card p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
/* CAI++ 21042026 - changed from dark to light grey theme */
.pd-how-it-works { background: #f0f0f0; }
.pd-how-it-works .section-title { color: var(--black); }
.pd-how-it-works .section-sub { color: #555; }
.pd-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.pd-step { padding: 28px; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; transition: border-color .3s; }
.pd-step:hover { border-color: rgba(188,28,20,.4); }
.pd-step-num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; color: var(--red); margin-bottom: 12px; }
.pd-step h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.pd-step p { font-size: 13px; color: #555; line-height: 1.6; }
.pd-benefits { background: var(--white); }
.pd-benefits-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.pd-benefit-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--light); border-radius: 12px; border: 1px solid transparent; transition: border-color .3s; }
.pd-benefit-item:hover { border-color: rgba(188,28,20,.15); }
.pd-benefit-check { width: 28px; height: 28px; flex-shrink: 0; background: rgba(188,28,20,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 14px; font-weight: 700; }
.pd-benefit-item h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.pd-benefit-item p { font-size: 13px; color: var(--gray); line-height: 1.5; }
.pd-faq { background: var(--light); }
.pd-faq-list { max-width: 800px; margin: 0 auto; }
.pd-faq-item { background: var(--white); border-radius: 10px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.pd-faq-question { width: 100%; padding: 18px 22px; background: none; border: none; text-align: left; font-size: 15px; font-weight: 600; color: var(--black); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.pd-faq-question:hover { color: var(--red); }
.pd-faq-answer { padding: 0 22px 18px; font-size: 14px; color: var(--gray); line-height: 1.7; }
.pd-reg-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(188,28,20,.08); border: 1px solid rgba(188,28,20,.15); color: var(--red); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 100px; margin-bottom: 20px; }
.pd-app-store-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--dark); color: var(--white); padding: 10px 20px; border-radius: 10px; text-decoration: none; transition: background .2s, transform .2s; border: 1px solid #333; }
.pd-app-store-btn:hover { background: var(--black); transform: translateY(-2px); }
.pd-app-store-btn small { display: block; font-size: 9px; color: #aaa; letter-spacing: 0.5px; line-height: 1; }
.pd-app-store-btn strong { display: block; font-size: 15px; color: #fff; line-height: 1.2; }

@media (max-width: 900px) { .pd-overview-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pd-features-grid, .pd-steps-grid, .pd-benefits-list { grid-template-columns: 1fr; } .pd-faq-question { font-size: 14px; padding: 14px 16px; } .pd-feature-card { padding: 22px; } .pd-step { padding: 22px; } .pd-overview-img { max-height: 280px; } .pd-overview-img img { max-height: 280px; } .pd-overview-text p { font-size: 14px; } .pd-faq-answer { padding: 0 16px 14px; } .pd-app-store-btn { width: 100%; justify-content: center; } }


/* ==========================================================================
   Contact.css
   ========================================================================== */
.info-cards { background: var(--light); }
.info-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.info-card { background: var(--white); border-radius: 14px; padding: 32px 28px; box-shadow: 0 2px 16px rgba(0,0,0,.06); text-align: center; transition: transform .3s, box-shadow .3s; }
.info-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.info-card-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 18px; box-shadow: 0 6px 20px rgba(188,28,20,.25); }
.info-card h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.info-card p { font-size: 13.5px; color: var(--gray); line-height: 1.7; }
.info-card a { color: var(--red); text-decoration: none; font-weight: 500; }
.info-card a:hover { text-decoration: underline; }
.form-map-section { background: var(--white); }
.form-map-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; align-items: stretch; }
.contact-map-wrapper { border-radius: 12px; overflow: hidden; min-height: 400px; }
.contact-map-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; }
.form-map-grid .contact-form-wrapper { background: var(--light); border-radius: 14px; padding: 32px; }
.form-map-grid .contact-form-wrapper h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.form-map-grid .contact-form-wrapper .form-sub { font-size: 13.5px; color: var(--gray); margin-bottom: 22px; line-height: 1.6; }
.office-details { display: flex; flex-direction: column; gap: 24px; }
.office-details h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.office-detail-item { display: flex; gap: 14px; align-items: flex-start; }
.office-detail-icon { width: 40px; height: 40px; background: rgba(188,28,20,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.office-detail-item h4 { font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 2px; }
.office-detail-item p { font-size: 13px; color: var(--gray); line-height: 1.6; }
.office-detail-item a { color: var(--red); text-decoration: none; }
.office-detail-item a:hover { text-decoration: underline; }
.map-wrapper { margin-top: 24px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(0,0,0,.06); }
.map-wrapper iframe { width: 100%; height: 280px; border: 0; display: block; }
.email-directory { background: var(--light); }
.email-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.email-card { background: var(--white); border-radius: 14px; padding: 32px 28px; box-shadow: 0 2px 16px rgba(0,0,0,.06); text-align: center; transition: transform .3s, box-shadow .3s; border-top: 4px solid var(--red); }
.email-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.email-card-icon { width: 56px; height: 56px; background: rgba(188,28,20,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px; }
.email-card h4 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.email-card p { font-size: 13px; color: var(--gray); margin-bottom: 12px; line-height: 1.6; }
.email-card a.email-link { font-size: 14px; font-weight: 600; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.email-card a.email-link:hover { text-decoration: underline; }
/* CAI++ 21042026 - changed from dark to light grey theme */
.quick-access { background: #f0f0f0; }
.quick-access .section-title { color: var(--black); }
.quick-access .section-sub { color: #555; }
.quick-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.quick-link-card { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 28px 22px; text-align: center; text-decoration: none; transition: border-color .3s, background .3s, transform .3s; display: block; }
.quick-link-card:hover { border-color: rgba(188,28,20,.4); background: rgba(188,28,20,.06); transform: translateY(-4px); }
.quick-link-icon { font-size: 28px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-left: auto; margin-right: auto; border-radius: 14px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); color: #3b82f6; transition: background .3s, border-color .3s, color .3s; }
.quick-link-card:hover .quick-link-icon { background: rgba(188,28,20,.12); border-color: rgba(188,28,20,.3); color: var(--red); }
.quick-link-card:nth-child(1) .quick-link-icon { color: #60a5fa; }
.quick-link-card:nth-child(2) .quick-link-icon { color: #a78bfa; }
.quick-link-card:nth-child(3) .quick-link-icon { color: #34d399; }
.quick-link-card:nth-child(4) .quick-link-icon { color: #fbbf24; }
.quick-link-card:nth-child(5) .quick-link-icon { color: #25D366; }
.quick-link-card h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; } /* CAI++ 21042026 */
.quick-link-card p { font-size: 12px; color: #555; line-height: 1.5; } /* CAI++ 21042026 */
.social-section { background: var(--white); }
.social-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.social-card { width: 120px; height: 120px; background: var(--light); border: 2px solid rgba(0,0,0,.06); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: border-color .3s, background .3s, transform .3s; }
.social-card:hover { border-color: var(--red); background: rgba(188,28,20,.05); transform: translateY(-4px); }
.social-card .social-icon { font-size: 28px; color: var(--gray) !important; transition: color .3s; background: none; } /* CAI++ 21042026 - override white !important from footer .social-icon */
.social-card:hover .social-icon { color: var(--red) !important; } /* CAI++ 21042026 */
.social-card span:last-child { font-size: 12px; font-weight: 600; color: var(--gray); }
.social-card:hover span:last-child { color: var(--red); }

@media (max-width: 900px) { .form-map-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .info-cards-grid { grid-template-columns: 1fr; } .email-cards-grid { grid-template-columns: 1fr; } .quick-links-grid { grid-template-columns: 1fr 1fr; } .social-card { width: 100px; height: 100px; } .info-card { padding: 24px 20px; } .email-card { padding: 24px 20px; } .form-map-grid .contact-form-wrapper { padding: 24px; } .quick-link-card { padding: 20px 16px; } .office-details { gap: 18px; } }
@media (max-width: 400px) { .quick-links-grid { grid-template-columns: 1fr; } .social-card { width: 80px; height: 80px; } }


/* ==========================================================================
   Blog.css
   ========================================================================== */
.blog-filters { background: var(--light); padding: 28px 24px; border-bottom: 1px solid rgba(0,0,0,.06); }
.blog-filters .container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-label { font-size: 13px; font-weight: 700; color: var(--black); margin-right: 8px; }
.filter-tag { display: inline-block; padding: 7px 18px; border-radius: 100px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1.5px solid rgba(0,0,0,.1); color: var(--gray); background: var(--white); transition: all .25s; cursor: pointer; }
.filter-tag:hover, .filter-tag.active { background: var(--red); color: var(--white); border-color: var(--red); }
.blog-section { background: var(--white); padding: 60px 24px 80px; }
.featured-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 30px rgba(0,0,0,.08); margin-bottom: 56px; transition: transform .3s, box-shadow .3s; }
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.featured-img { min-height: 340px; background: linear-gradient(135deg, #bc1c14 0%, #1a1a1a 100%); display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; overflow: hidden; }
.featured-img::before { content: ''; position: absolute; width: 300px; height: 300px; border: 2px solid rgba(255,255,255,.08); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.featured-img::after { content: ''; position: absolute; width: 200px; height: 200px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.featured-img-icon { font-size: 64px; opacity: .7; position: relative; z-index: 1; }
.featured-body { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(188,28,20,.1); color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 16px; width: fit-content; }
.featured-badge::before { content: '\2605'; font-size: 10px; }
.featured-meta { font-size: 12.5px; color: #999; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; }
.featured-meta .cat-tag { background: rgba(188,28,20,.08); color: var(--red); padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.featured-body h2 { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--black); line-height: 1.3; margin-bottom: 16px; }
.featured-body p { font-size: 14.5px; color: var(--gray); line-height: 1.8; margin-bottom: 28px; }
.read-more { font-size: 14px; font-weight: 600; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: gap .2s; }
.read-more::after { content: '\2192'; transition: transform .2s; }
.read-more:hover::after { transform: translateX(5px); }
.blog-grid-heading { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: var(--black); margin-bottom: 32px; padding-bottom: 14px; border-bottom: 2px solid var(--light); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.blog-card { background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.blog-card-img { height: 190px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.blog-card-img-icon { font-size: 40px; opacity: .5; position: relative; z-index: 1; }
.bg-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.bg-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.bg-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.bg-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.bg-6 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.blog-card-body { padding: 24px; }
.blog-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.blog-card-date { font-size: 12px; color: #999; }
.blog-card-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(188,28,20,.08); color: var(--red); padding: 3px 10px; border-radius: 4px; }
.blog-card-body h3 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--black); line-height: 1.35; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-body h3 a { text-decoration: none; color: inherit; transition: color .2s; }
.blog-card-body h3 a:hover { color: var(--red); }

@media (max-width: 900px) { .featured-card { grid-template-columns: 1fr; } .featured-img { min-height: 220px; } .featured-body { padding: 28px 24px; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } .blog-section { padding: 40px 16px 56px; } }


/* ==========================================================================
   BlogArticle.css
   ========================================================================== */
.blog-article { max-width: 800px; margin: 0 auto; padding: 40px 20px 60px; }
.blog-meta { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.blog-meta-date, .blog-meta-category { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #666; }
.blog-meta-category { background: #f0f4ff; color: #1a3c8d; padding: 4px 12px; border-radius: 20px; font-weight: 500; }
.blog-content { margin-bottom: 40px; }
.blog-content p { font-size: 16px; line-height: 1.8; color: #444; margin-bottom: 20px; }
.blog-content p strong { color: #222; }
.blog-content h3 { font-size: 22px; font-weight: 600; color: #1a1a2e; margin-top: 32px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #e8ecf4; }
.blog-content ul { list-style: none; padding: 0; margin: 0 0 24px; }
.blog-content ul li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 16px; line-height: 1.7; color: #444; }
.blog-content ul li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: #1a3c8d; font-weight: 700; font-size: 16px; }
.blog-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: #1a3c8d; text-decoration: none; margin-bottom: 48px; transition: color 0.2s; }
.blog-back-link:hover { color: #0d2463; }
.blog-cta-banner { background: linear-gradient(135deg, #1a3c8d 0%, #0d2463 100%); color: #fff; padding: 40px; border-radius: 12px; text-align: center; }
.blog-cta-banner h3 { font-size: 24px; margin-bottom: 12px; }
.blog-cta-banner p { font-size: 15px; line-height: 1.6; opacity: 0.9; margin-bottom: 24px; max-width: 520px; margin-left: auto; margin-right: auto; }
.blog-cta-btn { display: inline-block; background: #fff; color: #1a3c8d; padding: 12px 32px; border-radius: 6px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.blog-cta-btn:hover { background: #e8ecf4; transform: translateY(-1px); }

@media (max-width: 600px) { .blog-article { padding: 24px 16px 40px; } .blog-meta { flex-direction: column; align-items: flex-start; gap: 12px; } .blog-content h3 { font-size: 19px; } .blog-content p, .blog-content ul li { font-size: 15px; } .blog-cta-banner { padding: 28px 20px; } .blog-cta-banner h3 { font-size: 20px; } }


/* ==========================================================================
   Careers.css
   ========================================================================== */
.life-section { background: var(--white); }
.life-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.life-content p { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 18px; }
.life-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.life-stat { text-align: center; padding: 24px 16px; background: var(--light); border-radius: 12px; }
.life-stat .num { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 900; color: var(--red); line-height: 1; }
.life-stat .lbl { font-size: 12px; color: var(--gray); margin-top: 6px; letter-spacing: .5px; }
.life-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.life-circle { width: 320px; height: 320px; border-radius: 50%; background: linear-gradient(135deg, rgba(188,28,20,.06), rgba(188,28,20,.14)); border: 2px solid rgba(188,28,20,.15); display: flex; align-items: center; justify-content: center; position: relative; }
.life-circle-inner { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 20px 60px rgba(188,28,20,.35); }
.life-circle-inner .big { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 900; color: #fff; line-height: 1.1; }
.life-circle-inner .sm { font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: 1px; margin-top: 4px; }
.life-orbit { position: absolute; width: 52px; height: 52px; background: var(--white); border: 2px solid rgba(188,28,20,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.life-orbit-1 { top: 10px; right: 20px; }
.life-orbit-2 { bottom: 10px; right: 10px; }
.life-orbit-3 { bottom: 20px; left: 20px; }
.life-orbit-4 { top: 20px; left: 10px; }
.values-section { background: var(--light); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.value-card { background: var(--white); border-radius: 14px; padding: 32px 24px; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden; }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red), var(--red-dark)); }
.value-icon { width: 60px; height: 60px; margin: 0 auto 18px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 6px 20px rgba(188,28,20,.25); }
.value-card h3 { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 10px; letter-spacing: .5px; }
.value-card p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
.environment-section { background: var(--white); }
.env-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.env-features { display: flex; flex-direction: column; gap: 18px; }
.env-feature { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 12px; border: 1px solid transparent; transition: border-color .3s, background .3s; }
.env-feature:hover { border-color: rgba(188,28,20,.15); background: #fff7f7; }
.env-check { width: 36px; height: 36px; flex-shrink: 0; background: rgba(188,28,20,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--red); }
.env-feature p { font-size: 14px; color: var(--gray); line-height: 1.6; }
.env-feature p strong { color: var(--black); }
.env-visual-block { background: linear-gradient(135deg, #0d0d0d, #1a1a1a); border-radius: 16px; padding: 48px 36px; text-align: center; }
.env-visual-block .env-quote { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--white); line-height: 1.4; margin-bottom: 16px; }
.env-visual-block .env-quote em { color: var(--red-light); font-style: normal; }
.env-visual-block .env-attr { font-size: 13px; color: #aaa; }
/* CAI++ 21042026 - changed from dark to light grey theme */
.benefits-section { background: #f0f0f0; }
.benefits-section .section-title { color: var(--black); }
.benefits-section .section-sub { color: #555; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 10px; }
.benefit-card { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 32px 26px; transition: border-color .3s, background .3s; }
.benefit-card:hover { border-color: rgba(188,28,20,.4); background: rgba(188,28,20,.05); }
.benefit-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; box-shadow: 0 4px 12px rgba(188,28,20,.25); }
.benefit-card h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; } /* CAI++ 21042026 */
.benefit-card p { font-size: 13.5px; color: #555; line-height: 1.6; } /* CAI++ 21042026 */
.openings-section { background: var(--light); }
.opening-placeholder { text-align: center; padding: 60px 24px; background: var(--white); border-radius: 14px; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
.opening-placeholder .placeholder-icon { font-size: 48px; margin-bottom: 16px; }
.opening-placeholder h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.opening-placeholder p { font-size: 14px; color: var(--gray); line-height: 1.7; max-width: 460px; margin: 0 auto 24px; }
.application-section { background: var(--white); }
.application-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: flex-start; }
.application-info h3 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--black); margin-bottom: 16px; line-height: 1.3; }
.application-info p { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 20px; }
.application-info .info-list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.application-info .info-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray); }
.application-info .info-list li .li-icon { width: 32px; height: 32px; flex-shrink: 0; background: rgba(188,28,20,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.application-form-wrapper { background: var(--light); border-radius: 14px; padding: 36px; }
.application-form-wrapper h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 24px; }
.app-form { display: flex; flex-direction: column; gap: 14px; }
.app-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.app-form input, .app-form select, .app-form textarea { width: 100%; padding: 13px 18px; border: 1.5px solid rgba(0,0,0,.4); border-radius: 8px; font-family: var(--font-body); font-size: 14px; background: var(--white); transition: border-color .2s, box-shadow .2s; color: var(--black); }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(188,28,20,.1); }
.app-form textarea { resize: vertical; }
.app-form select { cursor: pointer; appearance: auto; }
.file-upload-area { border: 2px dashed rgba(0,0,0,.12); border-radius: 10px; padding: 28px; text-align: center; background: var(--white); transition: border-color .2s; cursor: pointer; }
.file-upload-area:hover { border-color: var(--red); }
.file-upload-area .upload-icon { font-size: 28px; margin-bottom: 8px; }
.file-upload-area p { font-size: 13px; color: var(--gray); }
.file-upload-area p strong { color: var(--red); }
.file-upload-area .file-hint { font-size: 11px; color: #999; margin-top: 4px; }

@media (max-width: 900px) { .life-grid, .env-grid, .application-wrapper { grid-template-columns: 1fr; } .life-visual { display: none; } .env-visual-block { order: -1; } }
@media (max-width: 600px) { .life-stats { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .app-form .form-row { grid-template-columns: 1fr; } .life-circle { width: 240px; height: 240px; } .life-circle-inner { width: 160px; height: 160px; } }
@media (max-width: 400px) { .life-circle { width: 200px; height: 200px; } .life-circle-inner { width: 140px; height: 140px; } }


/* ==========================================================================
   Downloads.css
   ========================================================================== */
.downloads-section { background: var(--light); padding: 40px 24px 80px; }
.downloads-layout { max-width: 1200px; margin: auto; display: flex; gap: 32px; align-items: flex-start; }
.downloads-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 90px; }
.sidebar-tab { padding: 13px 18px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--black); background: #e8e8e8; border: none; border-bottom: 1px solid rgba(0,0,0,.08); cursor: pointer; text-align: left; transition: all .2s; }
.sidebar-tab:first-child { border-radius: 6px 6px 0 0; }
.sidebar-tab:last-child { border-radius: 0 0 6px 6px; border-bottom: none; }
.sidebar-tab:hover { background: #ddd; }
.sidebar-tab.active { background: var(--red); color: var(--white); }
.downloads-content { flex: 1; min-width: 0; }
.downloads-heading { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--red); margin-bottom: 28px; letter-spacing: 0.5px; }
.dl-category { margin-bottom: 36px; }
.dl-category:last-child { margin-bottom: 0; }
.dl-category-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.dl-category-title .cat-icon { width: 34px; height: 34px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; color: #fff; box-shadow: 0 3px 10px rgba(188,28,20,.25); }
.dl-table-wrapper { overflow-x: auto; }
.dl-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.dl-table thead th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; background: #fafafa; border-bottom: 2px solid #e5e7eb; white-space: nowrap; }
.dl-table tbody tr { transition: background .2s; }
.dl-table tbody tr:hover { background: #f9fafb; }
.dl-table td { padding: 12px 16px; font-size: 14px; color: var(--black); border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.dl-form-no { font-weight: 700; color: var(--red); white-space: nowrap; width: 80px; }
.dl-name { font-weight: 500; }
.file-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; line-height: 1.5; }
.file-badge.pdf { background: rgba(220,53,69,.1); color: #dc3545; }
.file-badge.xlsx { background: rgba(40,167,69,.1); color: #28a745; }
.file-badge.zip { background: rgba(253,126,20,.1); color: #fd7e14; }
.dl-btn { width: 36px; height: 36px; background: var(--red); color: var(--white); border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; flex-shrink: 0; transition: background .25s, transform .2s; box-shadow: 0 2px 8px rgba(188,28,20,.2); }
.dl-btn:hover { background: var(--red-dark); transform: translateY(-2px); }
.dl-btn svg { width: 16px; height: 16px; fill: var(--white); }

@media (max-width: 900px) { .downloads-layout { flex-direction: column; gap: 20px; } .downloads-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; position: static; } .sidebar-tab { padding: 10px 16px; font-size: 13px; border-radius: 100px !important; border-bottom: none; background: var(--white); border: 1.5px solid rgba(0,0,0,.08); } .sidebar-tab.active { background: var(--red); color: var(--white); border-color: var(--red); } }
@media (max-width: 600px) { .downloads-section { padding: 30px 16px 60px; } .downloads-heading { font-size: 22px; } .dl-category-title { font-size: 17px; } .dl-table td, .dl-table thead th { padding: 10px 12px; font-size: 13px; } .sidebar-tab { padding: 8px 14px; font-size: 12px; } }


/* ==========================================================================
   Faqs.css
   ========================================================================== */
.faq-section { padding: 80px 24px; background: var(--light); }
.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.05); overflow: hidden; transition: box-shadow .3s; }
.faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; gap: 16px; user-select: none; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-body); }
.faq-question:focus { outline: none; }
.faq-question:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 12px; }
.faq-q-text { font-size: 15px; font-weight: 600; color: var(--black); line-height: 1.5; }
.faq-q-num { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--red); margin-right: 12px; flex-shrink: 0; min-width: 28px; }
.faq-toggle { width: 32px; height: 32px; flex-shrink: 0; background: rgba(188,28,20,.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .3s, transform .3s; }
.faq-toggle svg { width: 14px; height: 14px; fill: var(--red); transition: transform .3s; }
.faq-item.active .faq-toggle { background: var(--red); transform: rotate(180deg); }
.faq-item.active .faq-toggle svg { fill: var(--white); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s ease; }
.faq-answer-inner { padding: 0 24px 0 64px; font-size: 14px; color: var(--gray); line-height: 1.8; }
.faq-item.active .faq-answer { max-height: 1000px; }
.faq-item.active .faq-answer .faq-answer-inner { padding-bottom: 22px; }
.faq-section-heading { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--black); max-width: 860px; margin: 32px auto 16px; padding-left: 4px; }
.faq-section-heading:first-of-type { margin-top: 0; }
.faq-vpa-box { max-width: 860px; margin: 0 auto 40px; background: var(--white); border-radius: 14px; padding: 32px; text-align: center; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.faq-vpa-box h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.faq-vpa-box p { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 18px; }
.faq-vpa-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.faq-vpa-tag { background: rgba(188,28,20,.08); color: var(--red); font-size: 13px; font-weight: 600; padding: 8px 20px; border-radius: 100px; border: 1px solid rgba(188,28,20,.15); }
.faq-download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 860px; margin: 0 auto; }
.faq-download-card { background: var(--white); border-radius: 12px; padding: 28px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px rgba(0,0,0,.05); text-align: center; transition: border-color .3s, box-shadow .3s; }
.faq-download-card:hover { border-color: rgba(188,28,20,.2); box-shadow: 0 6px 24px rgba(188,28,20,.08); }
.faq-download-icon { font-size: 36px; color: var(--red); margin-bottom: 14px; }
.faq-download-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.faq-download-card p { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 16px; }
.faq-download-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s; }
.faq-download-btn:hover { background: var(--red-dark); transform: translateY(-2px); }
.faq-contact { padding: 70px 24px; background: var(--white); text-align: center; }
.faq-contact-inner { max-width: 600px; margin: auto; }
.faq-contact h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; color: var(--black); margin-bottom: 12px; }
.faq-contact > .faq-contact-inner > p { font-size: 15px; color: var(--gray); line-height: 1.7; margin-bottom: 32px; }
.faq-contact-cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.faq-contact-card { background: var(--light); border-radius: 14px; padding: 28px 32px; flex: 1; min-width: 220px; max-width: 280px; text-align: center; transition: box-shadow .3s, transform .3s; }
.faq-contact-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.08); transform: translateY(-3px); }
.faq-contact-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(188,28,20,.25); }
.faq-contact-card h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.faq-contact-card p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
.faq-contact-card a { color: var(--red); text-decoration: none; font-weight: 600; }
.faq-contact-card a:hover { color: var(--red-dark); }

@media (max-width: 600px) { .faq-section { padding: 56px 16px; } .faq-question { padding: 16px 18px; } .faq-answer-inner { padding-left: 48px; } .faq-q-num { min-width: 24px; font-size: 12px; } .faq-q-text { font-size: 14px; } .faq-contact { padding: 50px 16px; } .faq-contact-cards { flex-direction: column; align-items: center; } .faq-contact-card { max-width: 100%; } }


/* ==========================================================================
   InvestorCharter.css
   ========================================================================== */
.charter-page { padding: 80px 24px; background: var(--white); }
.charter-vision-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 50px; }
.vision-box, .mission-box { background: var(--light); border-radius: 14px; padding: 36px; border: 1px solid rgba(0,0,0,.06); }
.vision-box { border-top: 4px solid var(--red); }
.mission-box { border-top: 4px solid var(--gold); }
.vm-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
.mission-box .vm-icon { background: linear-gradient(135deg, var(--gold), #c49b00); }
.vision-box h3, .mission-box h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 14px; }
.vision-box p { font-size: 14px; color: #555; line-height: 1.8; font-style: italic; }
.mission-box ul { list-style: none; padding: 0; }
.mission-box li { font-size: 13.5px; color: #444; line-height: 1.7; margin-bottom: 10px; padding-left: 22px; position: relative; }
.mission-box li::before { content: '\2022'; position: absolute; left: 0; color: var(--gold); font-weight: 700; font-size: 18px; line-height: 1.4; }
.charter-section { margin-bottom: 50px; }
.charter-section-title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--black); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--light); display: flex; align-items: center; gap: 12px; }
.charter-section-title .title-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.charter-list-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.charter-list-card { background: var(--white); border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 20px 24px; display: flex; gap: 16px; align-items: flex-start; transition: border-color .3s, box-shadow .3s; }
.charter-list-card:hover { border-color: rgba(188,28,20,.2); box-shadow: 0 4px 20px rgba(188,28,20,.06); }
.charter-list-card .card-num { width: 32px; height: 32px; background: rgba(188,28,20,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--red); flex-shrink: 0; }
.charter-list-card p { font-size: 14px; color: #444; line-height: 1.75; }
.charter-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(0,0,0,.06); }
.charter-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.charter-table thead { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.charter-table th { color: #fff; font-weight: 600; padding: 14px 18px; text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.charter-table th:first-child { width: 70px; }
.charter-table td { padding: 14px 18px; color: #444; line-height: 1.6; border-bottom: 1px solid rgba(0,0,0,.05); }
.charter-table tbody tr:hover { background: rgba(188,28,20,.02); }
.charter-table tbody tr:last-child td { border-bottom: none; }
.charter-table td:first-child { font-weight: 700; color: var(--red); text-align: center; }
.charter-page .do-dont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.charter-page .do-card, .charter-page .dont-card { border-radius: 12px; padding: 28px; }
.charter-page .do-card { background: #f0faf0; border: 1px solid rgba(34,139,34,.15); }
.charter-page .dont-card { background: #fff5f5; border: 1px solid rgba(188,28,20,.15); }
.charter-page .do-card h4 { font-size: 16px; font-weight: 700; color: #228B22; margin-bottom: 16px; }
.charter-page .dont-card h4 { font-size: 16px; font-weight: 700; color: var(--red); margin-bottom: 16px; }
.charter-page .do-card li, .charter-page .dont-card li { font-size: 13.5px; line-height: 1.7; color: #444; margin-bottom: 10px; padding-left: 22px; position: relative; list-style: none; }
.charter-page .do-card li::before { content: '\2713'; position: absolute; left: 0; color: #228B22; font-weight: 700; }
.charter-page .dont-card li::before { content: '\2717'; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.charter-grievance { background: var(--light); padding: 60px 24px; }
.grievance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; margin-bottom: 40px; }
.grievance-card { background: var(--white); border-radius: 12px; padding: 28px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: border-color .3s, box-shadow .3s; }
.grievance-card:hover { border-color: rgba(188,28,20,.2); box-shadow: 0 6px 24px rgba(188,28,20,.08); }
.grievance-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px; }
.grievance-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.grievance-card p { font-size: 13.5px; color: #555; line-height: 1.7; margin-bottom: 14px; }
.grievance-card a { font-size: 13px; font-weight: 600; color: var(--red); text-decoration: none; }
.grievance-card a:hover { text-decoration: underline; }
.odr-steps { background: var(--white); border-radius: 14px; padding: 36px; border: 1px solid rgba(0,0,0,.06); }
.odr-steps h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 24px; }
.odr-timeline { position: relative; padding-left: 32px; }
.odr-timeline::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: rgba(188,28,20,.15); }
.odr-step { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; position: relative; }
.odr-step:last-child { margin-bottom: 0; }
.odr-step-num { width: 28px; height: 28px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; position: relative; z-index: 1; }
.odr-step p { font-size: 13.5px; color: #444; line-height: 1.7; padding-top: 4px; }
/* CAI++ 21042026 - changed from dark to light grey theme */
.charter-default-section { background: #f0f0f0; padding: 60px 24px; }
.default-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.default-card { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 28px; }
.default-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 16px; }
.default-card ul { list-style: none; padding: 0; }
.default-card li { font-size: 13px; color: #555; line-height: 1.7; margin-bottom: 10px; padding-left: 18px; position: relative; }
.default-card li::before { content: '\2022'; position: absolute; left: 0; color: var(--red); font-weight: 700; }

@media (max-width: 768px) { .charter-vision-mission { grid-template-columns: 1fr; } .charter-page .do-dont-grid { grid-template-columns: 1fr; } .default-grid { grid-template-columns: 1fr; } .grievance-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .charter-page { padding: 56px 16px; } .charter-grievance { padding: 40px 16px; } .charter-default-section { padding: 40px 16px; } .charter-section-title { font-size: 20px; } .vision-box, .mission-box { padding: 24px; } .charter-list-card { flex-direction: column; padding: 16px; } .odr-steps { padding: 24px; } .charter-page .do-card, .charter-page .dont-card { padding: 20px; } .charter-table { font-size: 12px; } .charter-table th, .charter-table td { padding: 10px 12px; } }


/* ==========================================================================
   Location.css
   ========================================================================== */
.office-section { background: var(--light); }
.office-card { background: var(--white); border-radius: 16px; box-shadow: 0 4px 30px rgba(0,0,0,.07); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.office-details { padding: 44px 40px; }
.office-details h2 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.office-badge { display: inline-block; background: rgba(188,28,20,.1); color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 28px; }
.office-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.office-item-icon { width: 40px; height: 40px; background: rgba(188,28,20,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.office-item h4 { font-size: 12.5px; font-weight: 700; color: var(--black); margin-bottom: 3px; letter-spacing: .3px; }
.office-item p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
.office-item a { color: var(--red); text-decoration: none; transition: color .2s; }
.office-item a:hover { color: var(--red-dark); }
.office-card .office-map { min-height: 420px; background: #eee; }
.office-card .office-map iframe { width: 100%; height: 100%; border: none; display: block; }
.network-section { background: linear-gradient(135deg, var(--red-dark), var(--red)); padding: 80px 24px; text-align: center; color: var(--white); }
.network-inner { max-width: 800px; margin: auto; }
.network-big { font-family: 'Playfair Display', serif; font-size: clamp(56px, 8vw, 96px); font-weight: 900; line-height: 1; margin-bottom: 8px; }
.network-big span { opacity: .6; }
.network-section h2 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 4vw, 36px); font-weight: 700; margin-bottom: 18px; }
.network-section p { font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.8; max-width: 600px; margin: 0 auto 36px; }
.network-highlights { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 30px; }
.network-stat { text-align: center; }
.network-stat-num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; line-height: 1; }
.network-stat-lbl { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 6px; letter-spacing: .5px; }
.branch-services { background: var(--white); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.service-card { background: var(--light); border-radius: 14px; padding: 28px 24px; text-align: center; border: 1.5px solid transparent; transition: border-color .3s, transform .3s, box-shadow .3s; }
.service-card:hover { border-color: rgba(188,28,20,.25); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.service-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px; box-shadow: 0 4px 14px rgba(188,28,20,.25); }
.service-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.service-card p { font-size: 13px; color: var(--gray); line-height: 1.6; }
.location-cta { background: var(--light); padding: 70px 24px; }
.cta-card { max-width: 800px; margin: auto; background: var(--white); border-radius: 16px; padding: 48px 44px; box-shadow: 0 4px 30px rgba(0,0,0,.06); text-align: center; }
.cta-card h2 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 3.5vw, 34px); font-weight: 700; color: var(--black); margin-bottom: 12px; }
.cta-card > p { font-size: 15px; color: var(--gray); line-height: 1.7; max-width: 520px; margin: 0 auto 32px; }
.cta-contact-row { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; }
.cta-contact-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--black); }
.cta-contact-item .icon { width: 40px; height: 40px; background: rgba(188,28,20,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.cta-contact-item a { color: var(--red); text-decoration: none; font-weight: 600; transition: color .2s; }
.cta-contact-item a:hover { color: var(--red-dark); }
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) { .office-card { grid-template-columns: 1fr; } .office-card .office-map { min-height: 300px; } }
@media (max-width: 600px) { .office-details { padding: 28px 20px; } .cta-card { padding: 32px 20px; } .network-highlights { gap: 24px; } .services-grid { grid-template-columns: 1fr; } .service-card { padding: 22px 18px; } .cta-contact-row { flex-direction: column; gap: 16px; } .cta-buttons { flex-direction: column; } .cta-buttons .btn-primary, .cta-buttons .btn-outline { width: 100%; text-align: center; justify-content: center; } .office-card .office-map { min-height: 250px; } }


/* ==========================================================================
   NriFpi.css
   ========================================================================== */
.overview-section { background: var(--white); }
.overview-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; }
.overview-text p { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 16px; }
.overview-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 380px; }
.highlight-card { background: var(--light); border-radius: 10px; padding: 18px 14px; text-align: center; border: 1px solid transparent; transition: border-color .3s, transform .3s; }
.highlight-card:hover { border-color: rgba(188,28,20,.2); transform: translateY(-4px); }
.highlight-icon { font-size: 22px; margin-bottom: 6px; }
.highlight-icon svg { width: 22px; height: 22px; }
.highlight-card h4 { font-size: 13.5px; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.highlight-card p { font-size: 12px; color: var(--gray); line-height: 1.5; }
.comparison-section { background: var(--light); }
.comparison-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; margin-top: 10px; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
.comparison-table thead th { background: var(--dark); color: var(--white); font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; padding: 18px 24px; text-align: left; }
.comparison-table thead th:first-child { background: var(--black); }
.comparison-table thead th.nre-col { background: var(--red); }
.comparison-table thead th.nro-col { background: var(--red-dark); }
.comparison-table tbody td { padding: 16px 24px; font-size: 14px; color: var(--gray); line-height: 1.5; background: var(--white); border-bottom: 1px solid rgba(0,0,0,.05); }
.comparison-table tbody td:first-child { font-weight: 600; color: var(--black); background: #fafafa; width: 200px; }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover td { background: #fff7f7; }
.comparison-table tbody tr:hover td:first-child { background: #fff0f0; }
.pis-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 36px; }
.pis-card { background: var(--white); border-radius: 12px; padding: 28px; border-left: 4px solid var(--red); box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: transform .3s; }
.pis-card:hover { transform: translateY(-4px); }
.pis-card h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.pis-card p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
/* CAI++ 21042026 - changed from dark to light grey theme */
.process-section { background: #f0f0f0; }
.process-section .section-title { color: var(--black); }
.process-section .section-sub { color: #555; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; margin-top: 50px; background: rgba(0,0,0,.05); border-radius: 16px; overflow: hidden; }
.process-step { padding: 36px 28px; background: rgba(255,255,255,.7); position: relative; transition: background .3s; }
.process-step:hover { background: rgba(188,28,20,.08); }
.process-step .step-num { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 900; color: var(--red); line-height: 1; margin-bottom: 14px; }
.process-step .step-icon { font-size: 28px; color: var(--black); margin-bottom: 12px; }
.process-step h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.process-step p { font-size: 13px; color: #555; line-height: 1.6; }
.trading-section { background: var(--white); }
.info-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; }
.info-box { background: var(--light); border-radius: 14px; padding: 32px; }
.info-box h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--red); display: inline-block; }
.info-box ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.info-box ul li { font-size: 14px; color: var(--gray); line-height: 1.6; padding-left: 22px; position: relative; }
.info-box ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.taxation-section { background: var(--light); }
.tax-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 10px; }
.tax-card { background: var(--white); border-radius: 14px; padding: 32px; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s; }
.tax-card:hover { transform: translateY(-4px); }
.tax-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.tax-card-icon { width: 46px; height: 46px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(188,28,20,.25); flex-shrink: 0; }
.tax-card-header h4 { font-size: 16px; font-weight: 700; color: var(--black); }
.tax-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px; }
.tax-row:last-child { border-bottom: none; }
.tax-label { color: var(--gray); }
.tax-value { font-weight: 700; color: var(--black); }
.tax-value.green { color: #2e7d32; }
.tax-value.red-text { color: var(--red); }
.docs-section { background: var(--white); }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 10px; }
.doc-item { background: var(--light); border-radius: 12px; padding: 22px 24px; display: flex; align-items: center; gap: 14px; transition: border-color .3s, transform .3s; border: 1px solid transparent; }
.doc-item:hover { border-color: rgba(188,28,20,.2); transform: translateY(-3px); }
.doc-check { width: 36px; height: 36px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 16px; font-weight: 700; flex-shrink: 0; }
.doc-item span { font-size: 14px; font-weight: 500; color: var(--black); }
.faq-section { background: var(--light); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.06); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--black); transition: color .2s; user-select: none; }
.faq-question:hover { color: var(--red); }
.faq-toggle { width: 28px; height: 28px; border-radius: 50%; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--red); flex-shrink: 0; transition: transform .3s, background .3s; }
.faq-item.active .faq-toggle { transform: rotate(45deg); background: var(--red); color: var(--white); }
.faq-section .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.faq-section .faq-item.active .faq-answer { max-height: 1000px; }
.faq-section .faq-answer-inner { padding: 0 24px 20px; font-size: 14px; color: var(--gray); line-height: 1.7; }
.table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }

@media (max-width: 900px) { .overview-grid { grid-template-columns: 1fr; } .overview-highlights { width: 100%; max-width: 360px; } .info-columns { grid-template-columns: 1fr; } .nri-highlights-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .overview-highlights { grid-template-columns: 1fr 1fr; } .comparison-table { font-size: 13px; min-width: 500px; } .comparison-table tbody td:first-child { width: auto; min-width: 120px; } .comparison-table thead th, .comparison-table tbody td { padding: 12px 14px; } .docs-grid { grid-template-columns: 1fr; } .pis-points { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .tax-grid { grid-template-columns: 1fr; } .faq-list { max-width: 100%; } .faq-question { padding: 16px 18px; font-size: 14px; } .info-box { padding: 24px; } .highlight-card { padding: 18px; } }


/* ==========================================================================
   Partner.css
   ========================================================================== */
.partner-page .overview { background: var(--white); }
.partner-page .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.partner-page .overview-img { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.1); }
.partner-page .overview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-page .overview-content p { font-size: 14.5px; color: var(--gray); line-height: 1.8; margin-bottom: 18px; }
.benefits { background: var(--light); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.benefit-card { background: var(--white); border-radius: 14px; padding: 32px 28px; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; border: 1px solid transparent; }
.benefit-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); border-color: rgba(188,28,20,.15); }
.benefit-icon { width: 54px; height: 54px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; box-shadow: 0 4px 16px rgba(188,28,20,.25); }
.benefit-card h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.benefit-card p { font-size: 13.5px; color: var(--gray); line-height: 1.7; }
.services-offer { background: var(--white); }
.services-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 36px; }
.service-item { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--light); border-radius: 12px; border: 1px solid transparent; transition: border-color .3s, background .3s; }
.service-item:hover { border-color: rgba(188,28,20,.2); background: #fff7f7; }
.service-dot { width: 10px; height: 10px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
.service-item span { font-size: 14px; font-weight: 600; color: var(--black); }
/* CAI++ 21042026 - changed from dark to light grey theme */
.support-section { background: #f0f0f0; }
.support-section .section-title { color: var(--black); }
.support-section .section-sub { color: #555; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 40px; }
.support-card { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 28px 24px; transition: border-color .3s, background .3s; }
.support-card:hover { border-color: rgba(188,28,20,.4); background: rgba(188,28,20,.06); }
.support-card-icon { font-size: 28px; margin-bottom: 14px; }
.support-card h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; } /* CAI++ 21042026 */
.support-card p { font-size: 13px; color: #555; line-height: 1.7; } /* CAI++ 21042026 */
.inquiry-section { background: var(--light); }
.inquiry-grid { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: flex-start; }
.inquiry-form-wrapper { background: var(--white); border-radius: 14px; padding: 36px; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
.inquiry-form-wrapper h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.inquiry-form-wrapper > p { font-size: 13.5px; color: var(--gray); margin-bottom: 24px; line-height: 1.6; }
.inquiry-form { display: flex; flex-direction: column; gap: 14px; }
.inquiry-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inquiry-form input, .inquiry-form textarea { width: 100%; padding: 13px 18px; border: 1.5px solid rgba(0,0,0,.4); border-radius: 8px; font-family: var(--font-body); font-size: 14px; background: var(--light); transition: border-color .2s, box-shadow .2s; color: var(--black); }
.inquiry-form input:focus, .inquiry-form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(188,28,20,.1); }
.inquiry-form textarea { resize: vertical; }
.coordinator-card { background: var(--white); border-radius: 14px; padding: 24px 28px; box-shadow: 0 2px 16px rgba(0,0,0,.06); display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; }
.coordinator-card h3 { display: none; }
.coordinator-card > p.subtitle { display: none; }
.coordinator-profile { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: none; flex-shrink: 0; }
.coordinator-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; box-shadow: 0 4px 16px rgba(188,28,20,.3); }
.coordinator-name { font-size: 15px; font-weight: 700; color: var(--black); }
.coordinator-role { font-size: 11px; color: var(--gray); margin-top: 2px; }
.coordinator-details { display: flex; gap: 24px; flex: 1; align-items: center; }
.coordinator-item { display: flex; gap: 10px; align-items: center; }
.coordinator-icon { width: 34px; height: 34px; background: rgba(188,28,20,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.coordinator-item h4 { font-size: 10px; font-weight: 700; color: var(--black); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 1px; }
.coordinator-item p { font-size: 14px; color: var(--gray); }
.coordinator-item a { color: var(--red); text-decoration: none; font-weight: 500; transition: color .2s; }
.coordinator-item a:hover { color: var(--red-dark); }

@media (max-width: 900px) { .partner-page .overview-grid { grid-template-columns: 1fr; } .partner-page .overview-img { max-height: 350px; } .inquiry-grid { grid-template-columns: 1fr; } .benefits-grid { grid-template-columns: 1fr 1fr; } .support-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .coordinator-card { flex-wrap: wrap; } .coordinator-details { flex-wrap: wrap; } }
@media (max-width: 600px) { .benefits-grid { grid-template-columns: 1fr; } .services-list { grid-template-columns: 1fr; } .support-grid { grid-template-columns: 1fr; } .inquiry-form .form-row { grid-template-columns: 1fr; } .inquiry-form-wrapper, .coordinator-card { padding: 20px; } .benefit-card { padding: 24px 20px; } .coordinator-card { flex-direction: column; align-items: flex-start; } .coordinator-details { flex-direction: column; gap: 12px; } }


/* ==========================================================================
   Research.css
   ========================================================================== */
.research-page .overview { background: var(--white); }
.research-page .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.research-page .overview-content .section-sub { max-width: 100%; margin-bottom: 20px; }
.research-page .overview-highlights { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.overview-highlight { display: flex; gap: 14px; align-items: flex-start; }
.overview-highlight-icon { width: 40px; height: 40px; flex-shrink: 0; background: rgba(188,28,20,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.overview-highlight h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.overview-highlight p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
.research-highlights-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.philosophy-card { background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 40%, #2a0a0a 100%); border-radius: 16px; padding: 40px; position: relative; overflow: hidden; max-width: 480px; }
.philosophy-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(188,28,20,.15) 0%, transparent 65%); }
.philosophy-card-inner { position: relative; z-index: 1; }
.philosophy-card h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--white); margin-bottom: 16px; }
.philosophy-card p { font-size: 14px; color: #aaa; line-height: 1.8; margin-bottom: 14px; }
.philosophy-card .philosophy-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(188,28,20,.15); border: 1px solid rgba(188,28,20,.3); color: #f08080; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; }
.reports { background: var(--light); }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.report-card { background: var(--white); border-radius: 14px; padding: 32px 28px; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden; }
.report-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.report-card-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; box-shadow: 0 6px 20px rgba(188,28,20,.25); }
.report-card h3 { font-size: 17px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.report-card p { font-size: 13.5px; color: var(--gray); line-height: 1.7; margin-bottom: 16px; }
.report-card .report-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--red); background: rgba(188,28,20,.08); padding: 4px 12px; border-radius: 100px; }
/* CAI++ 21042026 - changed from dark to light grey theme */
.research-features { background: #f0f0f0; }
.research-features .section-title { color: var(--black); }
.research-features .section-sub { color: #555; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; margin-top: 50px; background: rgba(0,0,0,.05); border-radius: 16px; overflow: hidden; }
.res-feature-item { padding: 40px 28px; background: rgba(255,255,255,.7); text-align: center; transition: background .3s; }
.res-feature-item:hover { background: rgba(188,28,20,.08); }
.res-feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 18px; box-shadow: 0 6px 20px rgba(188,28,20,.3); }
.res-feature-item h4 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 10px; } /* CAI++ 21042026 */
.res-feature-item p { font-size: 13.5px; color: #555; line-height: 1.7; } /* CAI++ 21042026 */
.tools-section { background: var(--white); }
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 50px; }
.tool-card { background: var(--light); border-radius: 16px; padding: 40px 36px; border: 1.5px solid rgba(0,0,0,.04); transition: border-color .3s, box-shadow .3s; }
.tool-card:hover { border-color: rgba(188,28,20,.2); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.tool-card-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; box-shadow: 0 6px 20px rgba(188,28,20,.25); }
.tool-card h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 12px; }
.tool-card p { font-size: 14px; color: var(--gray); line-height: 1.7; margin-bottom: 18px; }
.tool-features { display: flex; flex-direction: column; gap: 10px; }
.tool-features li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gray); list-style: none; }
.tool-features li::before { content: '\2713'; color: var(--red); font-weight: 700; font-size: 14px; }

@media (max-width: 900px) { .research-page .overview-grid { grid-template-columns: 1fr; gap: 40px; } .tools-grid { grid-template-columns: 1fr; } .research-highlights-row { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .reports-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } .tool-card { padding: 28px 22px; } .report-card { padding: 24px 20px; } .philosophy-card { padding: 28px 20px; } .res-feature-item { padding: 28px 20px; } }


/* ==========================================================================
   Sitemap.css
   ========================================================================== */
.sitemap-section { padding: 60px 24px; background: var(--white); }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }
.sitemap-card { background: var(--light); border-radius: 12px; padding: 28px; border: 1px solid #e0e0e0; transition: transform .3s, box-shadow .3s; }
.sitemap-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.sitemap-card h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--red); }
.sitemap-card ul { list-style: none; padding: 0; margin: 0; }
.sitemap-card li { margin-bottom: 10px; }
.sitemap-card a, .sitemap-card .sitemap-link { font-size: 15px; color: var(--gray); text-decoration: none; transition: color .2s, padding-left .2s; display: block; padding: 4px 0; }
.sitemap-card a:hover, .sitemap-card .sitemap-link:hover { color: var(--red); padding-left: 6px; }
.sitemap-card a::before, .sitemap-card .sitemap-link::before { content: '\203A'; margin-right: 8px; color: var(--red); font-weight: 700; }

@media (max-width: 600px) { .sitemap-grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   Tools.css
   ========================================================================== */
.tools-section { background: var(--light); }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.tool-card { background: var(--white); border-radius: 16px; padding: 36px 28px; box-shadow: 0 2px 16px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; text-align: center; border: 1px solid rgba(0,0,0,.04); }
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); border-color: rgba(188,28,20,.15); }
.tool-card-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; margin: 0 auto 20px; box-shadow: 0 6px 24px rgba(188,28,20,.25); }
.tool-card h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.tool-card p { font-size: 14px; color: var(--gray); line-height: 1.7; margin-bottom: 20px; }
.tool-card-link { font-size: 14px; font-weight: 600; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; }
.tool-card-link:hover { gap: 10px; }
.calc-section { background: var(--white); }
.calc-container { max-width: 720px; margin: 0 auto; }
.calc-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--red); text-decoration: none; font-weight: 600; margin-bottom: 24px; transition: gap .2s; }
.calc-back:hover { gap: 10px; }
.calc-card { background: var(--light); border-radius: 18px; padding: 40px; border: 1px solid rgba(0,0,0,.04); }
.calc-card h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
.calc-card .calc-desc { font-size: 14.5px; color: var(--gray); margin-bottom: 28px; line-height: 1.7; }
.calc-form { display: flex; flex-direction: column; gap: 18px; }
.calc-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.calc-field label { font-size: 13.5px; font-weight: 600; color: var(--black); letter-spacing: 0.2px; }
.calc-field input, .calc-field select { padding: 13px 16px; border: 1.5px solid rgba(0,0,0,.4); border-radius: 10px; font-size: 16px; font-family: var(--font-body); font-weight: 500; color: var(--black); background: var(--white); transition: border-color .2s, box-shadow .2s; -moz-appearance: textfield; min-width: 0; width: 100%; box-sizing: border-box; }
.calc-field input::-webkit-outer-spin-button, .calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field input:focus, .calc-field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(188,28,20,.1); }
.calc-field input::placeholder { color: #aaa; font-weight: 400; }
.calc-field select { cursor: pointer; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.calc-buttons { display: flex; gap: 14px; margin-top: 10px; }
.calc-buttons .btn-primary { flex: 1; border: none; cursor: pointer; justify-content: center; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.3px; }
.calc-btn-reset { flex: 1; padding: 14px; border: 1.5px solid rgba(0,0,0,.4); border-radius: 8px; background: var(--white); color: var(--gray); font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: border-color .2s, color .2s, background .2s; }
.calc-btn-reset:hover { border-color: var(--red); color: var(--red); background: rgba(188,28,20,.03); }
.calc-result { margin-top: 28px; padding: 28px; background: var(--white); border-radius: 14px; border: 2px solid var(--red); box-shadow: 0 4px 20px rgba(188,28,20,.08); }
.calc-result h4 { font-size: 12px; color: var(--red); margin-bottom: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.calc-result-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.calc-result-row:last-child { border-bottom: none; }
.calc-result-label { font-size: 14.5px; color: var(--gray); font-weight: 500; }
.calc-result-value { font-family: var(--font-body); font-size: 22px; font-weight: 700; color: var(--black); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.calc-result-value.highlight { color: var(--red); font-size: 28px; font-weight: 800; }
.calc-result-value::before { content: '\20B9 '; font-weight: 600; font-size: 0.8em; opacity: 0.7; }
.calc-result-value.no-rupee::before { content: none; }

@media (max-width: 900px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .calc-card { padding: 24px 18px; } .calc-card h3 { font-size: 20px; } .calc-row, .calc-row-3 { grid-template-columns: 1fr; } .calc-buttons { flex-direction: column; } .calc-result { padding: 22px 18px; } .calc-result-value { font-size: 19px; } .calc-result-value.highlight { font-size: 23px; } .calc-result-row { flex-direction: column; align-items: flex-start; gap: 4px; } .tools-grid { grid-template-columns: 1fr; } .tool-card { padding: 28px 22px; } }


/* ==========================================================================
   SubNav.css
   ========================================================================== */
.sub-nav { background: var(--white); border-bottom: 1px solid rgba(0,0,0,.08); z-index: 90; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.sub-nav-inner { max-width: 100%; margin: 0 auto; display: flex; align-items: stretch; padding: 0 24px; }
.sub-nav-inner::-webkit-scrollbar { display: none; }
.sub-nav-link { display: flex; align-items: center; gap: 6px; padding: 14px 16px; font-size: 13px; font-weight: 500; color: #666; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .25s, border-color .25s, background .25s; position: relative; }
.sub-nav-link:hover { color: var(--red); background: rgba(188,28,20,.03); }
.sub-nav-link.active { color: var(--red); font-weight: 600; border-bottom-color: var(--red); background: rgba(188,28,20,.04); }
.sub-nav-icon { display: flex; align-items: center; font-size: 16px; flex-shrink: 0; }
.sub-nav-link.active .sub-nav-icon { color: var(--red); }
.sub-nav-label { line-height: 1.3; }

@media (max-width: 1280px) { .sub-nav-link { padding: 14px 18px; font-size: 13px; } }
@media (max-width: 1024px) { .sub-nav-link { padding: 12px 16px; font-size: 12.5px; gap: 6px; } }
@media (max-width: 900px) { .sub-nav-link { padding: 12px 14px; font-size: 12px; gap: 5px; } }
@media (max-width: 600px) { .sub-nav-link { padding: 10px 12px; font-size: 11.5px; } .sub-nav-icon { font-size: 14px; } }


/* ==========================================================================
   NotFound.css
   ========================================================================== */
.not-found { min-height: 75vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; background: var(--light); }
.not-found-icon { margin-bottom: 24px; }
.not-found-content h1 { font-family: 'Playfair Display', serif; font-size: 5rem; font-weight: 700; color: var(--red); margin: 0; line-height: 1; }
.not-found-content h2 { font-size: 1.5rem; font-weight: 700; margin: 12px 0 12px; color: var(--black); }
.not-found-content p { color: var(--gray); font-size: 15px; margin-bottom: 28px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.not-found-btn { display: inline-block; padding: 12px 32px; background: var(--red); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s, transform .2s; }
.not-found-btn:hover { background: var(--red-dark); transform: translateY(-2px); }
.not-found-links { margin-top: 28px; display: flex; gap: 24px; justify-content: center; }
.not-found-links a { color: var(--red); text-decoration: none; font-size: 13px; font-weight: 600; transition: color .2s; }
.not-found-links a:hover { color: var(--red-dark); text-decoration: underline; }


/* ==========================================================================
   AdvisoryInvestors.css
   ========================================================================== */
.advisory-page { padding: 80px 24px; background: var(--white); }
.alert-box { background: linear-gradient(135deg, #fff5f5, #fff0f0); border: 1px solid rgba(188,28,20,.2); border-left: 4px solid var(--red); border-radius: 12px; padding: 28px 32px; margin-bottom: 40px; display: flex; gap: 16px; align-items: flex-start; }
.alert-box .alert-icon { width: 48px; height: 48px; background: var(--red); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.alert-box h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--red); margin-bottom: 8px; }
.alert-box p { font-size: 14px; color: #555; line-height: 1.7; }
.advisory-section { margin-bottom: 50px; }
.advisory-section-title { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--black); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--light); display: flex; align-items: center; gap: 12px; }
.advisory-section-title .title-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.advisory-card { background: var(--white); border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 24px 28px; margin-bottom: 16px; transition: border-color .3s, box-shadow .3s; display: flex; gap: 16px; align-items: flex-start; }
.advisory-card:hover { border-color: rgba(188,28,20,.2); box-shadow: 0 4px 20px rgba(188,28,20,.06); }
.advisory-card .card-num { width: 32px; height: 32px; background: rgba(188,28,20,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--red); flex-shrink: 0; }
.advisory-card p { font-size: 14px; color: #444; line-height: 1.75; }
.advisory-card strong { color: var(--black); }
.do-dont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.do-card, .dont-card { border-radius: 12px; padding: 28px; }
.do-card { background: #f0faf0; border: 1px solid rgba(34,139,34,.15); }
.dont-card { background: #fff5f5; border: 1px solid rgba(188,28,20,.15); }
.do-card h4 { font-size: 16px; font-weight: 700; color: #228B22; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.dont-card h4 { font-size: 16px; font-weight: 700; color: var(--red); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.do-card li, .dont-card li { font-size: 13.5px; line-height: 1.7; color: #444; margin-bottom: 10px; padding-left: 22px; position: relative; list-style: none; }
.do-card li::before { content: '\2713'; position: absolute; left: 0; color: #228B22; font-weight: 700; }
.dont-card li::before { content: '\2717'; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.kyc-section { background: var(--light); padding: 60px 24px; }
.kyc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
.kyc-card { background: var(--white); border-radius: 12px; padding: 24px; border-left: 4px solid var(--red); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.kyc-card .kyc-num { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 900; color: rgba(188,28,20,.2); margin-bottom: 8px; }
.kyc-card p { font-size: 13.5px; color: #444; line-height: 1.7; }
/* CAI++ 21042026 - changed from dark to light grey theme */
.exchange-links { background: #f0f0f0; padding: 50px 24px; }
.exchange-links .section-title { color: var(--black); }
.exchange-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; }
.exchange-card { background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 22px; transition: border-color .3s, background .3s; }
.exchange-card:hover { border-color: rgba(188,28,20,.4); background: rgba(188,28,20,.05); }
.exchange-card h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.exchange-card p { font-size: 12.5px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.exchange-card a { font-size: 12.5px; font-weight: 600; color: var(--red); text-decoration: none; word-break: break-all; }
.exchange-card a:hover { text-decoration: underline; }
.scores-section { background: var(--white); padding: 60px 24px; }
.scores-box { max-width: 700px; margin: 0 auto; background: var(--light); border-radius: 14px; padding: 40px; text-align: center; }
.scores-box h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 12px; }
.scores-box p { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 20px; }
.scores-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 24px; }
.scores-tag { background: rgba(188,28,20,.08); color: var(--red); font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-radius: 100px; border: 1px solid rgba(188,28,20,.15); }
.scores-benefits { display: flex; justify-content: center; gap: 30px; margin-top: 16px; margin-bottom: 24px; }
.scores-benefit { text-align: center; }
.scores-benefit .icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 8px; }
.scores-benefit span { font-size: 12.5px; color: #555; font-weight: 500; }
.btn-scores { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; padding: 13px 28px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s; }
.btn-scores:hover { background: var(--red-dark); transform: translateY(-2px); }
.disclaimer-section { background: var(--light); padding: 50px 24px; }
.disclaimer-box { max-width: 1200px; margin: auto; background: var(--white); border-radius: 12px; padding: 32px; border: 1px solid rgba(0,0,0,.06); }
.disclaimer-box h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--black); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.disclaimer-box p { font-size: 13.5px; color: #555; line-height: 1.8; margin-bottom: 12px; }

@media (max-width: 768px) { .do-dont-grid { grid-template-columns: 1fr; } .alert-box { flex-direction: column; } .scores-benefits { flex-direction: column; align-items: center; gap: 16px; } }
@media (max-width: 600px) { .advisory-page { padding: 56px 16px; } .kyc-grid { grid-template-columns: 1fr; } .exchange-grid { grid-template-columns: 1fr; } .advisory-card { flex-direction: column; padding: 20px; } .alert-box { padding: 20px; } .scores-box { padding: 28px 20px; } .disclaimer-box { padding: 24px; } .do-card, .dont-card { padding: 20px; } .advisory-section-title { font-size: 20px; } .kyc-section { padding: 40px 16px; } .exchange-links { padding: 40px 16px; } .scores-section { padding: 40px 16px; } .disclaimer-section { padding: 40px 16px; } }
/* ============================================================
   Accessibility Widget - CSS
   WCAG 2.1 AA / GIGW / Disabilities Act compliance styles
   Covers ALL 56 compliance points
   ============================================================ */

/* ----------------------------------------------------------
   0. SVG Filters (hidden)
   ---------------------------------------------------------- */
.a11y-svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ----------------------------------------------------------
   1. Skip to Content Link
   ---------------------------------------------------------- */
.a11y-skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  outline: 3px solid #ff0;
  outline-offset: 2px;
  transition: top 0.15s ease;
}

.a11y-skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------
   2. Widget Toggle Button
   ---------------------------------------------------------- */
.a11y-widget-toggle {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 10000;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 2px 6px rgba(0,0,0,.15);
  animation: a11y-pulse 2.5s infinite;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  line-height: 1;
}

.a11y-widget-toggle:hover,
.a11y-widget-toggle:focus-visible {
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.6), 0 2px 8px rgba(0,0,0,.2);
}

.a11y-widget-toggle:focus-visible {
  outline: 3px solid #ff0;
  outline-offset: 3px;
}

@keyframes a11y-pulse {
  0%   { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 0 0 0 rgba(99, 102, 241, 0.4); }
  70%  { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 0 0 14px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ----------------------------------------------------------
   3. Backdrop
   ---------------------------------------------------------- */
.a11y-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.a11y-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------
   4. Panel
   ---------------------------------------------------------- */
.a11y-panel {
  position: fixed;
  top: 0;
  right: -400px;
  bottom: 0;
  z-index: 10002;
  width: 380px;
  background: #1e1e2e;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
  transition: right 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.a11y-panel.open {
  right: 0;
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #15151f;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.a11y-panel-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.a11y-panel-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 26px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.a11y-panel-close:hover,
.a11y-panel-close:focus-visible {
  background: #333;
  color: #fff;
}

.a11y-panel-close:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   4a. Tab Bar
   ---------------------------------------------------------- */
.a11y-tab-bar {
  display: flex;
  background: #15151f;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
  overflow-x: auto;
}

.a11y-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #aaa;
  font-size: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  min-width: 0;
}

.a11y-tab-btn:hover {
  color: #ccc;
  background: #262638;
}

.a11y-tab-btn.active {
  color: #fff;
  border-bottom-color: #2563eb;
  background: #1e1e2e;
}

.a11y-tab-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: -2px;
}

.a11y-tab-icon {
  font-size: 18px;
  line-height: 1;
}

.a11y-tab-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

/* ----------------------------------------------------------
   4b. Panel Body
   ---------------------------------------------------------- */
.a11y-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
}

/* Section groups */
.a11y-section {
  margin-bottom: 18px;
}

.a11y-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b8ba0;
  margin: 0 0 10px 4px;
}

/* Control row */
.a11y-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: #262638;
  transition: background 0.15s;
}

.a11y-control:hover {
  background: #2e2e44;
}

.a11y-control-label {
  font-size: 13px;
  color: #d0d0e0;
  user-select: none;
  flex: 1;
  margin-right: 8px;
}

/* Toggle switch */
.a11y-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: #444;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  flex-shrink: 0;
}

.a11y-switch[aria-checked="true"] {
  background: #2563eb;
}

.a11y-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.a11y-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

.a11y-switch:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Font size buttons */
.a11y-font-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.a11y-font-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #333;
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}

.a11y-font-btn:hover {
  background: #444;
  border-color: #2563eb;
}

.a11y-font-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.a11y-font-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.a11y-font-level {
  font-size: 12px;
  color: #8b8ba0;
  min-width: 36px;
  text-align: center;
  line-height: 32px;
}

/* Select dropdown */
.a11y-select {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  min-width: 130px;
}

.a11y-select:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Range input */
.a11y-range {
  width: 120px;
  accent-color: #2563eb;
  cursor: pointer;
}

.a11y-range:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Action buttons */
.a11y-action-btn {
  padding: 6px 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.a11y-action-btn:hover {
  background: #1d4ed8;
}

.a11y-action-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.a11y-full-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 13px;
}

.a11y-small-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.a11y-small-btn:hover {
  background: #333;
  color: #fff;
}

/* TTS control row */
.a11y-tts-controls {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

/* Badge info/ok */
.a11y-badge-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: #16a34a;
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.a11y-badge-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: #2563eb;
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

/* Reset button */
.a11y-reset-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.a11y-reset-btn:hover {
  background: #b91c1c;
}

.a11y-reset-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Profile buttons */
.a11y-profile-desc {
  font-size: 12px;
  color: #8b8ba0;
  margin: 0 0 12px 4px;
}

.a11y-profile-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  background: #262638;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0e0e0;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.a11y-profile-btn:hover {
  background: #2e2e44;
  border-color: #2563eb;
}

.a11y-profile-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.a11y-profile-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.a11y-profile-btn strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.a11y-profile-btn small {
  display: block;
  font-size: 11px;
  color: #8b8ba0;
  line-height: 1.4;
}

/* Status region (visually hidden but announced) */
.a11y-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   5. Reading Guide
   ---------------------------------------------------------- */
.a11y-reading-guide-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 0, 0.5);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.3);
  transition: top 0.05s linear;
}

/* ----------------------------------------------------------
   5a. Line Focus / Reading Mask
   ---------------------------------------------------------- */
.a11y-line-focus-top,
.a11y-line-focus-bottom {
  position: fixed;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 9998;
  transition: height 0.05s linear, top 0.05s linear;
}

.a11y-line-focus-top {
  top: 0;
}

.a11y-line-focus-bottom {
  bottom: 0;
}

/* ----------------------------------------------------------
   5b. Structure Badges (Page Structure Overlay)
   ---------------------------------------------------------- */
.a11y-structure-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(37, 99, 235, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  font-family: monospace;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   5c. Reading Order Badges
   ---------------------------------------------------------- */
.a11y-reading-order-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(234, 88, 12, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: monospace;
}

/* ----------------------------------------------------------
   5d. Tab Order Badges
   ---------------------------------------------------------- */
.a11y-tab-order-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(139, 92, 246, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: monospace;
}

.a11y-tab-order-badge.a11y-target-small {
  background: rgba(220, 38, 38, 0.9);
}

/* ----------------------------------------------------------
   5e. Target Size Boxes
   ---------------------------------------------------------- */
.a11y-target-size-box {
  position: absolute;
  z-index: 9996;
  border: 2px solid rgba(34, 197, 94, 0.7);
  pointer-events: none;
  box-sizing: border-box;
}

.a11y-target-size-box.a11y-target-too-small {
  border-color: rgba(220, 38, 38, 0.9);
  background: rgba(220, 38, 38, 0.1);
}

/* ----------------------------------------------------------
   5f. ARIA Info Badges
   ---------------------------------------------------------- */
.a11y-aria-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(168, 85, 247, 0.9);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  pointer-events: none;
  font-family: monospace;
  white-space: nowrap;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   5g. Keyboard Navigation Guide
   ---------------------------------------------------------- */
.a11y-keyboard-guide {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  pointer-events: none;
}

.a11y-keyboard-guide-inner {
  background: rgba(30, 30, 46, 0.95);
  color: #e0e0e0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.8;
  border: 1px solid #444;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.a11y-keyboard-guide-inner strong {
  display: block;
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
}

.a11y-keyboard-guide-inner kbd {
  display: inline-block;
  background: #444;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
  margin-right: 6px;
  border: 1px solid #666;
}

/* ----------------------------------------------------------
   5h. Keyboard Shortcuts Overlay
   ---------------------------------------------------------- */
.a11y-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.a11y-shortcuts-panel {
  background: #1e1e2e;
  color: #e0e0e0;
  border-radius: 12px;
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #444;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.a11y-shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #333;
}

.a11y-shortcuts-header h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
}

.a11y-shortcuts-body {
  padding: 16px 20px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 2;
}

.a11y-shortcuts-body kbd {
  display: inline-block;
  background: #444;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
  margin-right: 8px;
  border: 1px solid #666;
}

/* ----------------------------------------------------------
   5i. Help FAB & Panel (3.2.6)
   ---------------------------------------------------------- */
.a11y-help-fab {
  position: fixed;
  left: 20px;
  bottom: 90px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #16a34a;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
  transition: background 0.15s, transform 0.15s;
}

.a11y-help-fab:hover {
  background: #15803d;
  transform: scale(1.1);
}

.a11y-help-fab:focus-visible {
  outline: 3px solid #ff0;
  outline-offset: 3px;
}

.a11y-help-panel {
  position: fixed;
  left: 20px;
  bottom: 150px;
  z-index: 10003;
  width: 340px;
  max-height: 60vh;
  background: #1e1e2e;
  color: #e0e0e0;
  border-radius: 12px;
  border: 1px solid #444;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.a11y-help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #333;
}

.a11y-help-panel-header h3 {
  margin: 0;
  font-size: 15px;
  color: #fff;
}

.a11y-help-panel-body {
  padding: 12px 16px;
  overflow-y: auto;
}

.a11y-help-panel-body details {
  margin-bottom: 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
}

.a11y-help-panel-body summary {
  font-size: 13px;
  font-weight: 600;
  color: #d0d0e0;
  cursor: pointer;
  padding: 4px 0;
}

.a11y-help-panel-body summary:hover {
  color: #fff;
}

.a11y-help-panel-body p {
  font-size: 12px;
  color: #999;
  margin: 6px 0 0;
  line-height: 1.5;
}

/* ----------------------------------------------------------
   5j. Validator Results
   ---------------------------------------------------------- */
.a11y-validator-results {
  margin-top: 8px;
  background: #1a1a2a;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
}

.a11y-validator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #15151f;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.a11y-validator-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.a11y-validator-list li {
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid #262638;
  line-height: 1.4;
}

.a11y-result-issue {
  color: #f87171;
}

.a11y-result-ok {
  color: #4ade80;
}

/* ----------------------------------------------------------
   5k. Status Log
   ---------------------------------------------------------- */
.a11y-status-log {
  margin-top: 8px;
  background: #1a1a2a;
  border: 1px solid #333;
  border-radius: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.a11y-log-empty {
  padding: 12px;
  font-size: 12px;
  color: #666;
  text-align: center;
  margin: 0;
}

.a11y-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.a11y-log-list li {
  padding: 4px 12px;
  font-size: 11px;
  color: #aaa;
  border-bottom: 1px solid #262638;
  font-family: monospace;
}

/* ----------------------------------------------------------
   5l. Dictionary Tooltip
   ---------------------------------------------------------- */
.a11y-dictionary-tooltip {
  position: fixed;
  z-index: 10004;
  background: #1e1e2e;
  color: #e0e0e0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 300px;
  border: 1px solid #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* ----------------------------------------------------------
   5m. Form Helper
   ---------------------------------------------------------- */
.a11y-form-help-text {
  display: block;
  font-size: 11px;
  color: #8b8ba0;
  margin-top: 2px;
  font-style: italic;
}

.a11y-form-error {
  display: block;
  font-size: 11px;
  color: #f87171;
  margin-top: 2px;
  font-weight: 600;
}

/* ----------------------------------------------------------
   6. Accessibility Mode Classes (applied to <html>)
   ---------------------------------------------------------- */

/* --- Font Size Scaling --- */
/* Uses zoom since the site uses fixed px values that don't respond to root font-size changes */
html.a11y-font-size-2 { zoom: 1.25 !important; }
html.a11y-font-size-3 { zoom: 1.5 !important; }
html.a11y-font-size-4 { zoom: 1.75 !important; }
html.a11y-font-size-5 { zoom: 2 !important; }

/* Prevent the widget itself from being zoomed (keep it at normal size) */
html.a11y-font-size-2 .a11y-widget-toggle,
html.a11y-font-size-2 .a11y-panel,
html.a11y-font-size-2 .a11y-backdrop,
html.a11y-font-size-2 .a11y-skip-link,
html.a11y-font-size-2 .a11y-help-fab,
html.a11y-font-size-2 .a11y-help-panel,
html.a11y-font-size-3 .a11y-widget-toggle,
html.a11y-font-size-3 .a11y-panel,
html.a11y-font-size-3 .a11y-backdrop,
html.a11y-font-size-3 .a11y-skip-link,
html.a11y-font-size-3 .a11y-help-fab,
html.a11y-font-size-3 .a11y-help-panel,
html.a11y-font-size-4 .a11y-widget-toggle,
html.a11y-font-size-4 .a11y-panel,
html.a11y-font-size-4 .a11y-backdrop,
html.a11y-font-size-4 .a11y-skip-link,
html.a11y-font-size-4 .a11y-help-fab,
html.a11y-font-size-4 .a11y-help-panel,
html.a11y-font-size-5 .a11y-widget-toggle,
html.a11y-font-size-5 .a11y-panel,
html.a11y-font-size-5 .a11y-backdrop,
html.a11y-font-size-5 .a11y-skip-link,
html.a11y-font-size-5 .a11y-help-fab,
html.a11y-font-size-5 .a11y-help-panel {
  zoom: 1 !important;
}

/* --- High Contrast (1.4.3, 1.4.11) --- */
/* Widget exclusion helper */
.a11y-panel, .a11y-panel *, .a11y-widget-toggle, .a11y-backdrop,
.a11y-help-fab, .a11y-help-panel, .a11y-help-panel *,
.a11y-keyboard-guide, .a11y-keyboard-guide *,
.a11y-shortcuts-overlay, .a11y-shortcuts-overlay *,
.a11y-reading-guide-line, .a11y-skip-link,
.a11y-svg-filters {
  /* These elements are never affected by high contrast */
}

html.a11y-high-contrast,
html.a11y-high-contrast body {
  background: #000 !important;
  color: #fff !important;
}

/* Main structural elements get dark bg */
html.a11y-high-contrast header:not(.a11y-panel header),
html.a11y-high-contrast footer:not(.a11y-panel footer),
html.a11y-high-contrast main,
html.a11y-high-contrast section:not(.a11y-panel section),
html.a11y-high-contrast div:not(.a11y-panel):not(.a11y-panel *):not(.a11y-widget-toggle):not(.a11y-backdrop):not(.a11y-help-fab):not(.a11y-help-panel):not(.a11y-help-panel *):not(.a11y-keyboard-guide):not(.a11y-keyboard-guide *):not(.a11y-shortcuts-overlay):not(.a11y-shortcuts-overlay *):not(.a11y-reading-guide-line):not(.a11y-line-focus-top):not(.a11y-line-focus-bottom),
html.a11y-high-contrast nav:not(.a11y-panel nav),
html.a11y-high-contrast aside:not(.a11y-panel aside),
html.a11y-high-contrast article:not(.a11y-panel article),
html.a11y-high-contrast form:not(.a11y-panel form),
html.a11y-high-contrast ul:not(.a11y-panel ul),
html.a11y-high-contrast ol:not(.a11y-panel ol),
html.a11y-high-contrast li:not(.a11y-panel li),
html.a11y-high-contrast table:not(.a11y-panel table),
html.a11y-high-contrast tr:not(.a11y-panel tr),
html.a11y-high-contrast td:not(.a11y-panel td),
html.a11y-high-contrast th:not(.a11y-panel th) {
  background-color: #000 !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* All text elements get white color */
html.a11y-high-contrast h1:not(.a11y-panel h1),
html.a11y-high-contrast h2:not(.a11y-panel h2),
html.a11y-high-contrast h3:not(.a11y-panel h3),
html.a11y-high-contrast h4:not(.a11y-panel h4),
html.a11y-high-contrast h5:not(.a11y-panel h5),
html.a11y-high-contrast h6:not(.a11y-panel h6),
html.a11y-high-contrast p:not(.a11y-panel p),
html.a11y-high-contrast span:not(.a11y-panel span):not(.a11y-widget-toggle span),
html.a11y-high-contrast label:not(.a11y-panel label),
html.a11y-high-contrast li:not(.a11y-panel li),
html.a11y-high-contrast td:not(.a11y-panel td),
html.a11y-high-contrast th:not(.a11y-panel th),
html.a11y-high-contrast blockquote:not(.a11y-panel blockquote),
html.a11y-high-contrast em:not(.a11y-panel em),
html.a11y-high-contrast strong:not(.a11y-panel strong),
html.a11y-high-contrast small:not(.a11y-panel small) {
  color: #fff !important;
}

/* Links get bright yellow for visibility */
html.a11y-high-contrast a:not(.a11y-panel a):not(.a11y-skip-link):not(.a11y-help-fab):not(.a11y-widget-toggle):not(.whatsapp-float):not(.back-to-top) {
  color: #ff0 !important;
  text-decoration: underline !important;
}

/* Borders for structure visibility */
html.a11y-high-contrast section:not(.a11y-panel section),
html.a11y-high-contrast article:not(.a11y-panel article) {
  border: 1px solid #444 !important;
}

/* Cards and distinct boxes get subtle border */
html.a11y-high-contrast [class*="card"]:not(.a11y-panel *),
html.a11y-high-contrast [class*="item"]:not(.a11y-panel *),
html.a11y-high-contrast [class*="box"]:not(.a11y-panel *),
html.a11y-high-contrast [class*="wrapper"]:not(.a11y-panel *) {
  border: 1px solid #555 !important;
}

/* Images get white border */
html.a11y-high-contrast img:not(.a11y-panel img) {
  border: 2px solid #fff !important;
}

/* Form controls get high-contrast borders */
html.a11y-high-contrast input:not(.a11y-panel input),
html.a11y-high-contrast select:not(.a11y-panel select),
html.a11y-high-contrast textarea:not(.a11y-panel textarea) {
  background-color: #111 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

html.a11y-high-contrast input::placeholder,
html.a11y-high-contrast textarea::placeholder {
  color: #999 !important;
}

/* Buttons get distinct styling */
html.a11y-high-contrast button:not(.a11y-panel button):not(.a11y-widget-toggle):not(.a11y-help-fab):not(.hamburger),
html.a11y-high-contrast [class*="btn"]:not(.a11y-panel *):not(.a11y-widget-toggle):not(.a11y-help-fab) {
  background-color: #222 !important;
  color: #fff !important;
  border: 2px solid #ff0 !important;
}

/* CTA/Primary buttons stand out more */
html.a11y-high-contrast .btn-primary:not(.a11y-panel *),
html.a11y-high-contrast .btn-white:not(.a11y-panel *) {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
}

/* The ticker */
html.a11y-high-contrast .ticker {
  background: #111 !important;
  border-top: 1px solid #444 !important;
  border-bottom: 1px solid #444 !important;
}

/* Topbar */
html.a11y-high-contrast .topbar {
  background: #0a0a0a !important;
  border-bottom: 1px solid #333 !important;
}

/* Header */
html.a11y-high-contrast header {
  background: #000 !important;
  border-bottom: 3px solid #ff0 !important;
}

/* Footer */
html.a11y-high-contrast footer {
  background: #0a0a0a !important;
  border-top: 1px solid #444 !important;
}

/* --- Dyslexia Friendly --- */
html.a11y-dyslexia *:not(.a11y-panel):not(.a11y-panel *) {
  font-family: Arial, Verdana, Helvetica, sans-serif !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

/* --- Text Spacing (1.4.12) --- */
html.a11y-text-spacing *:not(.a11y-panel):not(.a11y-panel *) {
  line-height: 2 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

html.a11y-text-spacing p:not(.a11y-panel p) {
  margin-bottom: 1.5em !important;
}

/* --- Highlight Links (2.4.4) --- */
html.a11y-highlight-links a:not(.a11y-panel a):not(.a11y-skip-link) {
  background-color: #ff0 !important;
  color: #000 !important;
  text-decoration: underline !important;
  outline: 2px solid #ff0 !important;
  outline-offset: 2px !important;
  padding: 1px 3px !important;
  border-radius: 2px !important;
}

/* --- Big Cursor (2.5.8) --- */
html.a11y-big-cursor,
html.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l28 20H20l8 16-5 2-8-16-7 7z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* --- Pause Animations (2.2.2, 2.3.1) --- */
html.a11y-pause-animations *,
html.a11y-pause-animations *::before,
html.a11y-pause-animations *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* --- Grayscale --- */
html.a11y-grayscale {
  filter: grayscale(100%) !important;
}

html.a11y-grayscale .a11y-widget-toggle,
html.a11y-grayscale .a11y-panel,
html.a11y-grayscale .a11y-backdrop,
html.a11y-grayscale .a11y-help-fab,
html.a11y-grayscale .a11y-help-panel {
  filter: grayscale(0%) !important;
}

/* --- Invert Colors --- */
html.a11y-invert {
  filter: invert(100%) hue-rotate(180deg) !important;
}

html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert picture,
html.a11y-invert svg:not(.a11y-svg-filters),
html.a11y-invert canvas,
html.a11y-invert [style*="background-image"] {
  filter: invert(100%) hue-rotate(180deg) !important;
}

html.a11y-invert .a11y-widget-toggle,
html.a11y-invert .a11y-panel,
html.a11y-invert .a11y-backdrop,
html.a11y-invert .a11y-help-fab,
html.a11y-invert .a11y-help-panel {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* --- Focus Highlight (2.4.7) --- */
html.a11y-focus-highlight *:focus {
  outline: 3px solid #ff0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.4) !important;
}

/* --- Combined filter handling --- */
html.a11y-grayscale.a11y-invert {
  filter: grayscale(100%) invert(100%) hue-rotate(180deg) !important;
}

/* --- Show Alt Text (1.1.1) --- */
html.a11y-show-alt-text img[alt]:not(.a11y-panel img)::after {
  content: attr(alt);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
}

html.a11y-show-alt-text img[alt]:not(.a11y-panel img) {
  position: relative !important;
  outline: 2px solid #2563eb !important;
}

/* Fallback: show alt via data attribute overlay for replaced elements */
html.a11y-show-alt-text img[alt]:not([alt=""]):not(.a11y-panel img) {
  outline: 3px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* --- Hide Images (1.4.5) --- */
html.a11y-hide-images img:not(.a11y-panel img):not(.a11y-widget-toggle img),
html.a11y-hide-images picture:not(.a11y-panel picture),
html.a11y-hide-images svg:not(.a11y-panel svg):not(.a11y-svg-filters):not(.a11y-widget-toggle svg) {
  opacity: 0.05 !important;
  filter: blur(4px) !important;
}

/* --- Content Scaling (1.4.10) --- */
html.a11y-content-scaling body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html.a11y-content-scaling *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-widget-toggle):not(.a11y-backdrop) {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

html.a11y-content-scaling img:not(.a11y-panel img),
html.a11y-content-scaling video:not(.a11y-panel video),
html.a11y-content-scaling iframe:not(.a11y-panel iframe) {
  max-width: 100% !important;
  height: auto !important;
}

html.a11y-content-scaling table:not(.a11y-panel table) {
  display: block !important;
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* --- Hover Persist (1.4.13) --- */
html.a11y-hover-persist [title]:hover::after,
html.a11y-hover-persist [data-tooltip]:hover::after {
  content: attr(title);
  position: absolute;
  z-index: 9999;
  background: #1e1e2e;
  color: #e0e0e0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  max-width: 300px;
  border: 1px solid #444;
  pointer-events: auto !important;
}

html.a11y-hover-persist *:hover > [role="tooltip"],
html.a11y-hover-persist *:focus-within > [role="tooltip"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* --- Highlight Headings (2.4.6) --- */
html.a11y-highlight-headings h1:not(.a11y-panel h1) {
  outline: 3px solid #ef4444 !important;
  outline-offset: 4px !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
}

html.a11y-highlight-headings h2:not(.a11y-panel h2) {
  outline: 3px solid #f97316 !important;
  outline-offset: 4px !important;
  background-color: rgba(249, 115, 22, 0.08) !important;
}

html.a11y-highlight-headings h3:not(.a11y-panel h3) {
  outline: 3px solid #eab308 !important;
  outline-offset: 4px !important;
  background-color: rgba(234, 179, 8, 0.08) !important;
}

html.a11y-highlight-headings h4:not(.a11y-panel h4) {
  outline: 3px solid #22c55e !important;
  outline-offset: 4px !important;
  background-color: rgba(34, 197, 94, 0.08) !important;
}

html.a11y-highlight-headings h5:not(.a11y-panel h5) {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 4px !important;
  background-color: rgba(59, 130, 246, 0.08) !important;
}

html.a11y-highlight-headings h6:not(.a11y-panel h6) {
  outline: 3px solid #8b5cf6 !important;
  outline-offset: 4px !important;
  background-color: rgba(139, 92, 246, 0.08) !important;
}

/* --- Color Blind Simulation (1.4.1) --- */
html.a11y-color-blind-protanopia {
  filter: url(#a11y-protanopia) !important;
}

html.a11y-color-blind-deuteranopia {
  filter: url(#a11y-deuteranopia) !important;
}

html.a11y-color-blind-tritanopia {
  filter: url(#a11y-tritanopia) !important;
}

/* Exclude widget from color blind filters */
html.a11y-color-blind-protanopia .a11y-panel,
html.a11y-color-blind-protanopia .a11y-widget-toggle,
html.a11y-color-blind-protanopia .a11y-backdrop,
html.a11y-color-blind-deuteranopia .a11y-panel,
html.a11y-color-blind-deuteranopia .a11y-widget-toggle,
html.a11y-color-blind-deuteranopia .a11y-backdrop,
html.a11y-color-blind-tritanopia .a11y-panel,
html.a11y-color-blind-tritanopia .a11y-widget-toggle,
html.a11y-color-blind-tritanopia .a11y-backdrop {
  filter: none !important;
}

/* --- Line Focus dim class (for body) --- */
html.a11y-line-focus body {
  /* The JS handles the mask overlays, this just ensures the base is set */
}

/* --- Focus Not Obscured (2.4.11) --- */
html *:focus {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 80px;
}

/* ----------------------------------------------------------
   7. Responsive / Mobile
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .a11y-panel {
    width: 100%;
    right: -100%;
  }

  .a11y-widget-toggle {
    right: 16px;
    bottom: 20px;
  }

  .a11y-help-panel {
    width: calc(100vw - 40px);
    left: 10px;
    right: 10px;
  }

  .a11y-keyboard-guide {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .a11y-shortcuts-panel {
    width: 95vw;
  }

  .a11y-tab-label {
    font-size: 8px;
    max-width: 50px;
  }
}

@media (max-width: 360px) {
  .a11y-panel-body {
    padding: 8px 10px 20px;
  }

  .a11y-control {
    padding: 8px 10px;
  }
}

/* ----------------------------------------------------------
   8. Print: hide widget
   ---------------------------------------------------------- */
@media print {
  .a11y-widget-toggle,
  .a11y-panel,
  .a11y-backdrop,
  .a11y-reading-guide-line,
  .a11y-skip-link,
  .a11y-line-focus-top,
  .a11y-line-focus-bottom,
  .a11y-structure-badge,
  .a11y-reading-order-badge,
  .a11y-tab-order-badge,
  .a11y-target-size-box,
  .a11y-aria-badge,
  .a11y-keyboard-guide,
  .a11y-help-fab,
  .a11y-help-panel,
  .a11y-shortcuts-overlay,
  .a11y-dictionary-tooltip,
  .a11y-svg-filters {
    display: none !important;
  }
}
/* ============================================================
   Accessibility Widget - CSS
   WCAG 2.1 AA / GIGW / Disabilities Act compliance styles
   Covers ALL 56 compliance points
   ============================================================ */

/* ----------------------------------------------------------
   0. SVG Filters (hidden)
   ---------------------------------------------------------- */
.a11y-svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ----------------------------------------------------------
   1. Skip to Content Link
   ---------------------------------------------------------- */
.a11y-skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  outline: 3px solid #ff0;
  outline-offset: 2px;
  transition: top 0.15s ease;
}

.a11y-skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------
   2. Widget Toggle Button
   ---------------------------------------------------------- */
.a11y-widget-toggle {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 10000;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 2px 6px rgba(0,0,0,.15);
  animation: a11y-pulse 2.5s infinite;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  line-height: 1;
}

.a11y-widget-toggle:hover,
.a11y-widget-toggle:focus-visible {
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  transform: scale(1.12);
  box-shadow: 0 8px 28px rgba(99, 102, 241, 0.6), 0 2px 8px rgba(0,0,0,.2);
}

.a11y-widget-toggle:focus-visible {
  outline: 3px solid #ff0;
  outline-offset: 3px;
}

@keyframes a11y-pulse {
  0%   { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 0 0 0 rgba(99, 102, 241, 0.4); }
  70%  { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 0 0 14px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5), 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ----------------------------------------------------------
   3. Backdrop
   ---------------------------------------------------------- */
.a11y-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.a11y-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------
   4. Panel
   ---------------------------------------------------------- */
.a11y-panel {
  position: fixed;
  top: 0;
  right: -400px;
  bottom: 0;
  z-index: 10002;
  width: 380px;
  background: #1e1e2e;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
  transition: right 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.a11y-panel.open {
  right: 0;
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #15151f;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.a11y-panel-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.a11y-panel-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 26px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.a11y-panel-close:hover,
.a11y-panel-close:focus-visible {
  background: #333;
  color: #fff;
}

.a11y-panel-close:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   4a. Tab Bar
   ---------------------------------------------------------- */
.a11y-tab-bar {
  display: flex;
  background: #15151f;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
  overflow-x: auto;
}

.a11y-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #aaa;
  font-size: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  min-width: 0;
}

.a11y-tab-btn:hover {
  color: #ccc;
  background: #262638;
}

.a11y-tab-btn.active {
  color: #fff;
  border-bottom-color: #2563eb;
  background: #1e1e2e;
}

.a11y-tab-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: -2px;
}

.a11y-tab-icon {
  font-size: 18px;
  line-height: 1;
}

.a11y-tab-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

/* ----------------------------------------------------------
   4b. Panel Body
   ---------------------------------------------------------- */
.a11y-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
}

/* Section groups */
.a11y-section {
  margin-bottom: 18px;
}

.a11y-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b8ba0;
  margin: 0 0 10px 4px;
}

/* Control row */
.a11y-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: #262638;
  transition: background 0.15s;
}

.a11y-control:hover {
  background: #2e2e44;
}

.a11y-control-label {
  font-size: 13px;
  color: #d0d0e0;
  user-select: none;
  flex: 1;
  margin-right: 8px;
}

/* Toggle switch */
.a11y-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: #444;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  flex-shrink: 0;
}

.a11y-switch[aria-checked="true"] {
  background: #2563eb;
}

.a11y-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.a11y-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

.a11y-switch:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Font size buttons */
.a11y-font-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.a11y-font-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #333;
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}

.a11y-font-btn:hover {
  background: #444;
  border-color: #2563eb;
}

.a11y-font-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.a11y-font-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.a11y-font-level {
  font-size: 12px;
  color: #8b8ba0;
  min-width: 36px;
  text-align: center;
  line-height: 32px;
}

/* Select dropdown */
.a11y-select {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  min-width: 130px;
}

.a11y-select:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Range input */
.a11y-range {
  width: 120px;
  accent-color: #2563eb;
  cursor: pointer;
}

.a11y-range:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Action buttons */
.a11y-action-btn {
  padding: 6px 12px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.a11y-action-btn:hover {
  background: #1d4ed8;
}

.a11y-action-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.a11y-full-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 13px;
}

.a11y-small-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.a11y-small-btn:hover {
  background: #333;
  color: #fff;
}

/* TTS control row */
.a11y-tts-controls {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

/* Badge info/ok */
.a11y-badge-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: #16a34a;
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.a11y-badge-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: #2563eb;
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

/* Reset button */
.a11y-reset-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.a11y-reset-btn:hover {
  background: #b91c1c;
}

.a11y-reset-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

/* Profile buttons */
.a11y-profile-desc {
  font-size: 12px;
  color: #8b8ba0;
  margin: 0 0 12px 4px;
}

.a11y-profile-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  background: #262638;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0e0e0;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.a11y-profile-btn:hover {
  background: #2e2e44;
  border-color: #2563eb;
}

.a11y-profile-btn:focus-visible {
  outline: 2px solid #ff0;
  outline-offset: 2px;
}

.a11y-profile-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.a11y-profile-btn strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.a11y-profile-btn small {
  display: block;
  font-size: 11px;
  color: #8b8ba0;
  line-height: 1.4;
}

/* Status region (visually hidden but announced) */
.a11y-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   5. Reading Guide
   ---------------------------------------------------------- */
.a11y-reading-guide-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 0, 0.5);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.3);
  transition: top 0.05s linear;
}

/* ----------------------------------------------------------
   5a. Line Focus / Reading Mask
   ---------------------------------------------------------- */
.a11y-line-focus-top,
.a11y-line-focus-bottom {
  position: fixed;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 9998;
  transition: height 0.05s linear, top 0.05s linear;
}

.a11y-line-focus-top {
  top: 0;
}

.a11y-line-focus-bottom {
  bottom: 0;
}

/* ----------------------------------------------------------
   5b. Structure Badges (Page Structure Overlay)
   ---------------------------------------------------------- */
.a11y-structure-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(37, 99, 235, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  font-family: monospace;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   5c. Reading Order Badges
   ---------------------------------------------------------- */
.a11y-reading-order-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(234, 88, 12, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: monospace;
}

/* ----------------------------------------------------------
   5d. Tab Order Badges
   ---------------------------------------------------------- */
.a11y-tab-order-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(139, 92, 246, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: monospace;
}

.a11y-tab-order-badge.a11y-target-small {
  background: rgba(220, 38, 38, 0.9);
}

/* ----------------------------------------------------------
   5e. Target Size Boxes
   ---------------------------------------------------------- */
.a11y-target-size-box {
  position: absolute;
  z-index: 9996;
  border: 2px solid rgba(34, 197, 94, 0.7);
  pointer-events: none;
  box-sizing: border-box;
}

.a11y-target-size-box.a11y-target-too-small {
  border-color: rgba(220, 38, 38, 0.9);
  background: rgba(220, 38, 38, 0.1);
}

/* ----------------------------------------------------------
   5f. ARIA Info Badges
   ---------------------------------------------------------- */
.a11y-aria-badge {
  position: absolute;
  z-index: 9997;
  background: rgba(168, 85, 247, 0.9);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  pointer-events: none;
  font-family: monospace;
  white-space: nowrap;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   5g. Keyboard Navigation Guide
   ---------------------------------------------------------- */
.a11y-keyboard-guide {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  pointer-events: none;
}

.a11y-keyboard-guide-inner {
  background: rgba(30, 30, 46, 0.95);
  color: #e0e0e0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.8;
  border: 1px solid #444;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.a11y-keyboard-guide-inner strong {
  display: block;
  font-size: 13px;
  color: #fff;
  margin-bottom: 4px;
}

.a11y-keyboard-guide-inner kbd {
  display: inline-block;
  background: #444;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
  margin-right: 6px;
  border: 1px solid #666;
}

/* ----------------------------------------------------------
   5h. Keyboard Shortcuts Overlay
   ---------------------------------------------------------- */
.a11y-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.a11y-shortcuts-panel {
  background: #1e1e2e;
  color: #e0e0e0;
  border-radius: 12px;
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #444;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.a11y-shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #333;
}

.a11y-shortcuts-header h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
}

.a11y-shortcuts-body {
  padding: 16px 20px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 2;
}

.a11y-shortcuts-body kbd {
  display: inline-block;
  background: #444;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
  margin-right: 8px;
  border: 1px solid #666;
}

/* ----------------------------------------------------------
   5i. Help FAB & Panel (3.2.6)
   ---------------------------------------------------------- */
.a11y-help-fab {
  position: fixed;
  left: 20px;
  bottom: 90px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #16a34a;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
  transition: background 0.15s, transform 0.15s;
}

.a11y-help-fab:hover {
  background: #15803d;
  transform: scale(1.1);
}

.a11y-help-fab:focus-visible {
  outline: 3px solid #ff0;
  outline-offset: 3px;
}

.a11y-help-panel {
  position: fixed;
  left: 20px;
  bottom: 150px;
  z-index: 10003;
  width: 340px;
  max-height: 60vh;
  background: #1e1e2e;
  color: #e0e0e0;
  border-radius: 12px;
  border: 1px solid #444;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.a11y-help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #333;
}

.a11y-help-panel-header h3 {
  margin: 0;
  font-size: 15px;
  color: #fff;
}

.a11y-help-panel-body {
  padding: 12px 16px;
  overflow-y: auto;
}

.a11y-help-panel-body details {
  margin-bottom: 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
}

.a11y-help-panel-body summary {
  font-size: 13px;
  font-weight: 600;
  color: #d0d0e0;
  cursor: pointer;
  padding: 4px 0;
}

.a11y-help-panel-body summary:hover {
  color: #fff;
}

.a11y-help-panel-body p {
  font-size: 12px;
  color: #999;
  margin: 6px 0 0;
  line-height: 1.5;
}

/* ----------------------------------------------------------
   5j. Validator Results
   ---------------------------------------------------------- */
.a11y-validator-results {
  margin-top: 8px;
  background: #1a1a2a;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
}

.a11y-validator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #15151f;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.a11y-validator-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.a11y-validator-list li {
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid #262638;
  line-height: 1.4;
}

.a11y-result-issue {
  color: #f87171;
}

.a11y-result-ok {
  color: #4ade80;
}

/* ----------------------------------------------------------
   5k. Status Log
   ---------------------------------------------------------- */
.a11y-status-log {
  margin-top: 8px;
  background: #1a1a2a;
  border: 1px solid #333;
  border-radius: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.a11y-log-empty {
  padding: 12px;
  font-size: 12px;
  color: #666;
  text-align: center;
  margin: 0;
}

.a11y-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.a11y-log-list li {
  padding: 4px 12px;
  font-size: 11px;
  color: #aaa;
  border-bottom: 1px solid #262638;
  font-family: monospace;
}

/* ----------------------------------------------------------
   5l. Dictionary Tooltip
   ---------------------------------------------------------- */
.a11y-dictionary-tooltip {
  position: fixed;
  z-index: 10004;
  background: #1e1e2e;
  color: #e0e0e0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 300px;
  border: 1px solid #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* ----------------------------------------------------------
   5m. Form Helper
   ---------------------------------------------------------- */
.a11y-form-help-text {
  display: block;
  font-size: 11px;
  color: #8b8ba0;
  margin-top: 2px;
  font-style: italic;
}

.a11y-form-error {
  display: block;
  font-size: 11px;
  color: #f87171;
  margin-top: 2px;
  font-weight: 600;
}

/* ----------------------------------------------------------
   6. Accessibility Mode Classes (applied to <html>)
   ---------------------------------------------------------- */

/* --- Font Size Scaling --- */
/* Uses zoom since the site uses fixed px values that don't respond to root font-size changes */
html.a11y-font-size-2 { zoom: 1.25 !important; }
html.a11y-font-size-3 { zoom: 1.5 !important; }
html.a11y-font-size-4 { zoom: 1.75 !important; }
html.a11y-font-size-5 { zoom: 2 !important; }

/* Prevent the widget itself from being zoomed (keep it at normal size) */
html.a11y-font-size-2 .a11y-widget-toggle,
html.a11y-font-size-2 .a11y-panel,
html.a11y-font-size-2 .a11y-backdrop,
html.a11y-font-size-2 .a11y-skip-link,
html.a11y-font-size-2 .a11y-help-fab,
html.a11y-font-size-2 .a11y-help-panel,
html.a11y-font-size-3 .a11y-widget-toggle,
html.a11y-font-size-3 .a11y-panel,
html.a11y-font-size-3 .a11y-backdrop,
html.a11y-font-size-3 .a11y-skip-link,
html.a11y-font-size-3 .a11y-help-fab,
html.a11y-font-size-3 .a11y-help-panel,
html.a11y-font-size-4 .a11y-widget-toggle,
html.a11y-font-size-4 .a11y-panel,
html.a11y-font-size-4 .a11y-backdrop,
html.a11y-font-size-4 .a11y-skip-link,
html.a11y-font-size-4 .a11y-help-fab,
html.a11y-font-size-4 .a11y-help-panel,
html.a11y-font-size-5 .a11y-widget-toggle,
html.a11y-font-size-5 .a11y-panel,
html.a11y-font-size-5 .a11y-backdrop,
html.a11y-font-size-5 .a11y-skip-link,
html.a11y-font-size-5 .a11y-help-fab,
html.a11y-font-size-5 .a11y-help-panel {
  zoom: 1 !important;
}

/* --- High Contrast (1.4.3, 1.4.11) --- */
/* Widget exclusion helper */
.a11y-panel, .a11y-panel *, .a11y-widget-toggle, .a11y-backdrop,
.a11y-help-fab, .a11y-help-panel, .a11y-help-panel *,
.a11y-keyboard-guide, .a11y-keyboard-guide *,
.a11y-shortcuts-overlay, .a11y-shortcuts-overlay *,
.a11y-reading-guide-line, .a11y-skip-link,
.a11y-svg-filters {
  /* These elements are never affected by high contrast */
}

html.a11y-high-contrast,
html.a11y-high-contrast body {
  background: #000 !important;
  color: #fff !important;
}

/* Main structural elements get dark bg */
html.a11y-high-contrast header:not(.a11y-panel header),
html.a11y-high-contrast footer:not(.a11y-panel footer),
html.a11y-high-contrast main,
html.a11y-high-contrast section:not(.a11y-panel section),
html.a11y-high-contrast div:not(.a11y-panel):not(.a11y-panel *):not(.a11y-widget-toggle):not(.a11y-backdrop):not(.a11y-help-fab):not(.a11y-help-panel):not(.a11y-help-panel *):not(.a11y-keyboard-guide):not(.a11y-keyboard-guide *):not(.a11y-shortcuts-overlay):not(.a11y-shortcuts-overlay *):not(.a11y-reading-guide-line):not(.a11y-line-focus-top):not(.a11y-line-focus-bottom),
html.a11y-high-contrast nav:not(.a11y-panel nav),
html.a11y-high-contrast aside:not(.a11y-panel aside),
html.a11y-high-contrast article:not(.a11y-panel article),
html.a11y-high-contrast form:not(.a11y-panel form),
html.a11y-high-contrast ul:not(.a11y-panel ul),
html.a11y-high-contrast ol:not(.a11y-panel ol),
html.a11y-high-contrast li:not(.a11y-panel li),
html.a11y-high-contrast table:not(.a11y-panel table),
html.a11y-high-contrast tr:not(.a11y-panel tr),
html.a11y-high-contrast td:not(.a11y-panel td),
html.a11y-high-contrast th:not(.a11y-panel th) {
  background-color: #000 !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* All text elements get white color */
html.a11y-high-contrast h1:not(.a11y-panel h1),
html.a11y-high-contrast h2:not(.a11y-panel h2),
html.a11y-high-contrast h3:not(.a11y-panel h3),
html.a11y-high-contrast h4:not(.a11y-panel h4),
html.a11y-high-contrast h5:not(.a11y-panel h5),
html.a11y-high-contrast h6:not(.a11y-panel h6),
html.a11y-high-contrast p:not(.a11y-panel p),
html.a11y-high-contrast span:not(.a11y-panel span):not(.a11y-widget-toggle span),
html.a11y-high-contrast label:not(.a11y-panel label),
html.a11y-high-contrast li:not(.a11y-panel li),
html.a11y-high-contrast td:not(.a11y-panel td),
html.a11y-high-contrast th:not(.a11y-panel th),
html.a11y-high-contrast blockquote:not(.a11y-panel blockquote),
html.a11y-high-contrast em:not(.a11y-panel em),
html.a11y-high-contrast strong:not(.a11y-panel strong),
html.a11y-high-contrast small:not(.a11y-panel small) {
  color: #fff !important;
}

/* Links get bright yellow for visibility */
html.a11y-high-contrast a:not(.a11y-panel a):not(.a11y-skip-link):not(.a11y-help-fab):not(.a11y-widget-toggle):not(.whatsapp-float):not(.back-to-top) {
  color: #ff0 !important;
  text-decoration: underline !important;
}

/* Borders for structure visibility */
html.a11y-high-contrast section:not(.a11y-panel section),
html.a11y-high-contrast article:not(.a11y-panel article) {
  border: 1px solid #444 !important;
}

/* Cards and distinct boxes get subtle border */
html.a11y-high-contrast [class*="card"]:not(.a11y-panel *),
html.a11y-high-contrast [class*="item"]:not(.a11y-panel *),
html.a11y-high-contrast [class*="box"]:not(.a11y-panel *),
html.a11y-high-contrast [class*="wrapper"]:not(.a11y-panel *) {
  border: 1px solid #555 !important;
}

/* Images get white border */
html.a11y-high-contrast img:not(.a11y-panel img) {
  border: 2px solid #fff !important;
}

/* Form controls get high-contrast borders */
html.a11y-high-contrast input:not(.a11y-panel input),
html.a11y-high-contrast select:not(.a11y-panel select),
html.a11y-high-contrast textarea:not(.a11y-panel textarea) {
  background-color: #111 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

html.a11y-high-contrast input::placeholder,
html.a11y-high-contrast textarea::placeholder {
  color: #999 !important;
}

/* Buttons get distinct styling */
html.a11y-high-contrast button:not(.a11y-panel button):not(.a11y-widget-toggle):not(.a11y-help-fab):not(.hamburger),
html.a11y-high-contrast [class*="btn"]:not(.a11y-panel *):not(.a11y-widget-toggle):not(.a11y-help-fab) {
  background-color: #222 !important;
  color: #fff !important;
  border: 2px solid #ff0 !important;
}

/* CTA/Primary buttons stand out more */
html.a11y-high-contrast .btn-primary:not(.a11y-panel *),
html.a11y-high-contrast .btn-white:not(.a11y-panel *) {
  background-color: #ff0 !important;
  color: #000 !important;
  border: 2px solid #ff0 !important;
}

/* The ticker */
html.a11y-high-contrast .ticker {
  background: #111 !important;
  border-top: 1px solid #444 !important;
  border-bottom: 1px solid #444 !important;
}

/* Topbar */
html.a11y-high-contrast .topbar {
  background: #0a0a0a !important;
  border-bottom: 1px solid #333 !important;
}

/* Header */
html.a11y-high-contrast header {
  background: #000 !important;
  border-bottom: 3px solid #ff0 !important;
}

/* Footer */
html.a11y-high-contrast footer {
  background: #0a0a0a !important;
  border-top: 1px solid #444 !important;
}

/* --- Dyslexia Friendly --- */
html.a11y-dyslexia *:not(.a11y-panel):not(.a11y-panel *) {
  font-family: Arial, Verdana, Helvetica, sans-serif !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

/* --- Text Spacing (1.4.12) --- */
html.a11y-text-spacing *:not(.a11y-panel):not(.a11y-panel *) {
  line-height: 2 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

html.a11y-text-spacing p:not(.a11y-panel p) {
  margin-bottom: 1.5em !important;
}

/* --- Highlight Links (2.4.4) --- */
html.a11y-highlight-links a:not(.a11y-panel a):not(.a11y-skip-link) {
  background-color: #ff0 !important;
  color: #000 !important;
  text-decoration: underline !important;
  outline: 2px solid #ff0 !important;
  outline-offset: 2px !important;
  padding: 1px 3px !important;
  border-radius: 2px !important;
}

/* --- Big Cursor (2.5.8) --- */
html.a11y-big-cursor,
html.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l28 20H20l8 16-5 2-8-16-7 7z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* --- Pause Animations (2.2.2, 2.3.1) --- */
html.a11y-pause-animations *,
html.a11y-pause-animations *::before,
html.a11y-pause-animations *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* --- Grayscale --- */
html.a11y-grayscale {
  filter: grayscale(100%) !important;
}

html.a11y-grayscale .a11y-widget-toggle,
html.a11y-grayscale .a11y-panel,
html.a11y-grayscale .a11y-backdrop,
html.a11y-grayscale .a11y-help-fab,
html.a11y-grayscale .a11y-help-panel {
  filter: grayscale(0%) !important;
}

/* --- Invert Colors --- */
html.a11y-invert {
  filter: invert(100%) hue-rotate(180deg) !important;
}

html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert picture,
html.a11y-invert svg:not(.a11y-svg-filters),
html.a11y-invert canvas,
html.a11y-invert [style*="background-image"] {
  filter: invert(100%) hue-rotate(180deg) !important;
}

html.a11y-invert .a11y-widget-toggle,
html.a11y-invert .a11y-panel,
html.a11y-invert .a11y-backdrop,
html.a11y-invert .a11y-help-fab,
html.a11y-invert .a11y-help-panel {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* --- Focus Highlight (2.4.7) --- */
html.a11y-focus-highlight *:focus {
  outline: 3px solid #ff0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.4) !important;
}

/* --- Combined filter handling --- */
html.a11y-grayscale.a11y-invert {
  filter: grayscale(100%) invert(100%) hue-rotate(180deg) !important;
}

/* --- Show Alt Text (1.1.1) --- */
html.a11y-show-alt-text img[alt]:not(.a11y-panel img)::after {
  content: attr(alt);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
}

html.a11y-show-alt-text img[alt]:not(.a11y-panel img) {
  position: relative !important;
  outline: 2px solid #2563eb !important;
}

/* Fallback: show alt via data attribute overlay for replaced elements */
html.a11y-show-alt-text img[alt]:not([alt=""]):not(.a11y-panel img) {
  outline: 3px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* --- Hide Images (1.4.5) --- */
html.a11y-hide-images img:not(.a11y-panel img):not(.a11y-widget-toggle img),
html.a11y-hide-images picture:not(.a11y-panel picture),
html.a11y-hide-images svg:not(.a11y-panel svg):not(.a11y-svg-filters):not(.a11y-widget-toggle svg) {
  opacity: 0.05 !important;
  filter: blur(4px) !important;
}

/* --- Content Scaling (1.4.10) --- */
html.a11y-content-scaling body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html.a11y-content-scaling *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-widget-toggle):not(.a11y-backdrop) {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

html.a11y-content-scaling img:not(.a11y-panel img),
html.a11y-content-scaling video:not(.a11y-panel video),
html.a11y-content-scaling iframe:not(.a11y-panel iframe) {
  max-width: 100% !important;
  height: auto !important;
}

html.a11y-content-scaling table:not(.a11y-panel table) {
  display: block !important;
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* --- Hover Persist (1.4.13) --- */
html.a11y-hover-persist [title]:hover::after,
html.a11y-hover-persist [data-tooltip]:hover::after {
  content: attr(title);
  position: absolute;
  z-index: 9999;
  background: #1e1e2e;
  color: #e0e0e0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  max-width: 300px;
  border: 1px solid #444;
  pointer-events: auto !important;
}

html.a11y-hover-persist *:hover > [role="tooltip"],
html.a11y-hover-persist *:focus-within > [role="tooltip"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* --- Highlight Headings (2.4.6) --- */
html.a11y-highlight-headings h1:not(.a11y-panel h1) {
  outline: 3px solid #ef4444 !important;
  outline-offset: 4px !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
}

html.a11y-highlight-headings h2:not(.a11y-panel h2) {
  outline: 3px solid #f97316 !important;
  outline-offset: 4px !important;
  background-color: rgba(249, 115, 22, 0.08) !important;
}

html.a11y-highlight-headings h3:not(.a11y-panel h3) {
  outline: 3px solid #eab308 !important;
  outline-offset: 4px !important;
  background-color: rgba(234, 179, 8, 0.08) !important;
}

html.a11y-highlight-headings h4:not(.a11y-panel h4) {
  outline: 3px solid #22c55e !important;
  outline-offset: 4px !important;
  background-color: rgba(34, 197, 94, 0.08) !important;
}

html.a11y-highlight-headings h5:not(.a11y-panel h5) {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 4px !important;
  background-color: rgba(59, 130, 246, 0.08) !important;
}

html.a11y-highlight-headings h6:not(.a11y-panel h6) {
  outline: 3px solid #8b5cf6 !important;
  outline-offset: 4px !important;
  background-color: rgba(139, 92, 246, 0.08) !important;
}

/* --- Color Blind Simulation (1.4.1) --- */
html.a11y-color-blind-protanopia {
  filter: url(#a11y-protanopia) !important;
}

html.a11y-color-blind-deuteranopia {
  filter: url(#a11y-deuteranopia) !important;
}

html.a11y-color-blind-tritanopia {
  filter: url(#a11y-tritanopia) !important;
}

/* Exclude widget from color blind filters */
html.a11y-color-blind-protanopia .a11y-panel,
html.a11y-color-blind-protanopia .a11y-widget-toggle,
html.a11y-color-blind-protanopia .a11y-backdrop,
html.a11y-color-blind-deuteranopia .a11y-panel,
html.a11y-color-blind-deuteranopia .a11y-widget-toggle,
html.a11y-color-blind-deuteranopia .a11y-backdrop,
html.a11y-color-blind-tritanopia .a11y-panel,
html.a11y-color-blind-tritanopia .a11y-widget-toggle,
html.a11y-color-blind-tritanopia .a11y-backdrop {
  filter: none !important;
}

/* --- Line Focus dim class (for body) --- */
html.a11y-line-focus body {
  /* The JS handles the mask overlays, this just ensures the base is set */
}

/* --- Focus Not Obscured (2.4.11) --- */
html *:focus {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 80px;
}

/* ----------------------------------------------------------
   7. Responsive / Mobile
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .a11y-panel {
    width: 100%;
    right: -100%;
  }

  .a11y-widget-toggle {
    right: 16px;
    bottom: 20px;
  }

  .a11y-help-panel {
    width: calc(100vw - 40px);
    left: 10px;
    right: 10px;
  }

  .a11y-keyboard-guide {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .a11y-shortcuts-panel {
    width: 95vw;
  }

  .a11y-tab-label {
    font-size: 8px;
    max-width: 50px;
  }
}

@media (max-width: 360px) {
  .a11y-panel-body {
    padding: 8px 10px 20px;
  }

  .a11y-control {
    padding: 8px 10px;
  }
}

/* ----------------------------------------------------------
   8. Print: hide widget
   ---------------------------------------------------------- */
@media print {
  .a11y-widget-toggle,
  .a11y-panel,
  .a11y-backdrop,
  .a11y-reading-guide-line,
  .a11y-skip-link,
  .a11y-line-focus-top,
  .a11y-line-focus-bottom,
  .a11y-structure-badge,
  .a11y-reading-order-badge,
  .a11y-tab-order-badge,
  .a11y-target-size-box,
  .a11y-aria-badge,
  .a11y-keyboard-guide,
  .a11y-help-fab,
  .a11y-help-panel,
  .a11y-shortcuts-overlay,
  .a11y-dictionary-tooltip,
  .a11y-svg-filters {
    display: none !important;
  }
}

/* 3.3.2 - Visible form labels */
.contact-form label, .mini-form label, .inquiry-form label, .app-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
}
.contact-form .required, .mini-form .required, .inquiry-form .required, .app-form .required {
  color: var(--red);
  margin-left: 2px;
}

/* Form labels on dark backgrounds */
.dark-bg label {
  color: #fff;
}

/* Preserve file-upload-area label styling */
.app-form .file-upload-area {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin-bottom: inherit;
}