/*
  Arunachal eServices — v2 theme
  Layered on top of the existing Bootstrap 3 / jQuery stack.
  Only adds new selectors / new classes — nothing here overrides
  or removes styles the old theme (resources/homePage/12) needs.
*/

/* Self-hosted fonts (no Google Fonts CDN — the production server has no
   internet access, so runtime requests to an external host are not an
   option). Variable-font files, latin subset only. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Inter-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-var-latin.woff2') format('woff2');
}

:root {
  --brand: #800000;
  --brand-600: #6b1a1a;
  --brand-700: #5c1414;
  --accent: #c98a2b;
  --ring: rgba(128, 0, 0, .35);

  /* theme tokens — light (default) */
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-alt: #fdf5f5;
  --text: #1f2328;
  --text-soft: #5b6168;
  --border: #ece7e2;
  --nav-bg: rgba(250, 249, 247, .96);
  --nav-bg-scrolled: rgba(250, 249, 247, .97);
  --shadow-color: 31, 35, 40;
  --scrollbar-track: var(--bg);
  --scrollbar-thumb: #d8cfc9;
  --icon-bg: var(--surface-alt);
  --icon-fg: var(--brand);
}

:root[data-theme="dark"] {
  --bg: #16181c;
  --surface: #1e2126;
  --surface-alt: #262023;
  --text: #f1efe9;
  --text-soft: #a6a29c;
  --border: #33363b;
  --nav-bg: rgba(22, 24, 28, .96);
  --nav-bg-scrolled: rgba(22, 24, 28, .95);
  --shadow-color: 0, 0, 0;
  --scrollbar-track: var(--bg);
  --scrollbar-thumb: #3a3d43;
  --accent: #dba54a;
  --icon-bg: rgba(255, 255, 255, .07);
  --icon-fg: #e5595f;
}

/* resources/homePage/12/css/bootstrap.min.css unconditionally sets
   html{font-size:10px} instead of the browser default 16px. Nothing in
   the legacy theme's own CSS uses rem units, so that rule does nothing
   for it — but every Tailwind size (icons, text, padding, gaps) is in
   rem, so without this fix the whole redesign renders at 62.5% scale. */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body.v2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  transition: background-color .35s ease, color .35s ease;
}

.v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 .font-display {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.v2 ::selection {
  background: var(--brand);
  color: #fff;
}

/* Preloader ------------------------------------------------------------ */
/* resources/homePage/12/css/style.css's own .preloader is a solid blue
   gradient with a z-index far beyond the 32-bit integer range (browsers
   just clamp it) — overridden here rather than edited there, since other
   pages share that file. main.js still does the one thing that matters
   ($(window).on("load", () => $('.preloader').fadeOut(500))) — untouched,
   it only ever selects by this same .preloader class. */
.v2 .preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.v2 .preloader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.v2 .preloader-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(128, 0, 0, .2), transparent 70%);
  transform: translate(-50%, -50%) scale(1);
  animation: v2-preloader-pulse 2.2s ease-in-out infinite;
  z-index: 0;
}
.v2 .preloader-logo {
  position: relative;
  z-index: 1;
  width: 76px;
  height: auto;
  animation: v2-preloader-float 2.4s ease-in-out infinite;
}
.v2 .preloader-wordmark {
  position: relative;
  z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--text);
}
.v2 .preloader-dots {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.v2 .preloader-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  animation: v2-preloader-bounce 1.1s ease-in-out infinite;
}
.v2 .preloader-dots span:nth-child(2) {
  background: var(--accent);
  animation-delay: .15s;
}
.v2 .preloader-dots span:nth-child(3) {
  background: var(--brand-600);
  animation-delay: .3s;
}
@keyframes v2-preloader-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: .35; }
}
@keyframes v2-preloader-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes v2-preloader-bounce {
  0%, 80%, 100% { transform: scale(.55); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .preloader-glow,
  .v2 .preloader-logo,
  .v2 .preloader-dots span {
    animation: none;
  }
}

.v2 a:focus-visible,
.v2 button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Wider, more modern content column. Bootstrap's own .container caps at
   1200px total (990/750px below that), which on any screen wider than
   ~1250px leaves large dead margins either side — combined with the
   max-w-* wrappers this redesign used inside it, sections like About Us
   and the FAQ ended up sitting in a narrow column in the middle of an
   already-narrow column. Widened here, scoped to this page only. */
.v2 .container {
  width: 100% !important;
  max-width: 1360px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 768px) {
  .v2 .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
/* The navbar's own container stays full-bleed (no 1360px cap) so the
   logo/menu hug the real edges of the window instead of sitting inside
   a centered block with large empty margins on wide screens. */
.v2 .mainmenu-area .container {
  max-width: 100% !important;
}

/* In-page nav scroll offset ------------------------------------------ */
/* resources/homePage/12/js/main.js's click handler animates
   $('html,body').scrollTop to each target's raw offset().top — which,
   with a sticky navbar, would land the section's heading right behind
   the nav. padding-top + an equal negative margin-top is a no-op on
   normal layout (they cancel out) but shifts what offset().top reports,
   so the animated scroll stops with the section clear of the navbar. */
.v2 #home-page,
.v2 #price-page,
.v2 #team-page,
.v2 #faq-page,
.v2 #how-it-works {
  scroll-margin-top: 96px;
  padding-top: 96px;
  margin-top: -96px;
}

/* Scroll reveal --------------------------------------------------- */
/* Previously faded content in on scroll (opacity 0 -> 1 + a slide-up).
   Removed: confirmed via computed styles that the DOM/CSS state was
   always correct (opacity:1, is-visible present, no JS errors) but the
   browser's painted pixels kept showing the pre-animation faded frame
   regardless — a real compositing bug, not a logic bug, and not worth
   the risk of content looking broken/half-invisible on a government
   site. Content now simply renders normally, no animation. */
.v2 [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Navbar ------------------------------------------------------------ */
/* bootstrap.min.css has "@media (min-width:768px){.navbar-header{float:left}}".
   This build's markup nests logo + toggle + nav ALL inside one
   .navbar-header (rather than Bootstrap's usual sibling .navbar-header /
   .navbar-collapse split), and the intended right-alignment of the menu
   relies on Tailwind's flex `justify-between` on that same element. Once
   Bootstrap floats it left, it shrink-wraps to its content width and the
   whole block (logo + nav together) hugs the left edge, leaving no room
   for justify-between to push the menu to the right. Neutralised here so
   the flex row spans the full header width as intended. */
.v2 .mainmenu-area .navbar-header {
  float: none !important;
  width: 100% !important;
}
/* Markup also relies on Tailwind's `md:hidden` to hide the mobile toggle
   button at desktop widths, but that utility isn't present in this
   project's trimmed Tailwind build, so the hamburger button stayed
   visible (and took up a flex slot) on desktop too. Hidden explicitly. */
@media (min-width: 768px) {
  .v2 .mainmenu-area .navbar-toggle {
    display: none !important;
  }
}
/* Mobile expanded menu ------------------------------------------------ */
/* .navbar-header is one flex row (logo + toggle + nav together, see the
   float:none note above), and that row defaults to flex-wrap:nowrap. When
   the hamburger opens #primary-menu, its expanded <ul> is tall but the row
   only wraps on horizontal overflow — so the menu ended up squeezed beside
   the logo (shrunk to ~140px wide) instead of dropping below it as a
   full-width panel. It also inherited responsive.css's old solid-blue
   (#138FC2) mobile dropdown background, left over from the pre-redesign
   template and clashing with the v2 palette. Both fixed below. */
@media (max-width: 767px) {
  .v2 .mainmenu-area .navbar-header {
    flex-wrap: wrap !important;
  }
  .v2 .mainmenu-area #primary-menu {
    background-color: var(--surface) !important;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 24px -16px rgba(var(--shadow-color), .3);
    overflow: hidden;
  }
  .v2 .mainmenu-area #primary-menu > ul {
    padding: 6px;
  }
}
/* No backdrop-filter here deliberately: position:sticky + backdrop-filter
   is a known source of browsers failing to repaint the element on
   scroll (it can appear to vanish or freeze mid-scroll) in a range of
   browser versions. A solid-enough background avoids that risk
   entirely — the navbar staying reliably visible matters more than the
   frosted-glass look. */
.v2 .mainmenu-area {
  /* resources/homePage/12/css/style.css has its own unconditional
     .mainmenu-area{position:fixed;left:0;top:0;width:100%;z-index:2;...}.
     Relying on a Tailwind utility class (.sticky/.z-50) to out-cascade
     that by loading later was the fragile setup likely behind the
     original "disappears on scroll" bug — a small change anywhere could
     flip which one wins. Pinned here explicitly with !important instead,
     so this is the one place that controls it. */
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: auto !important;
  z-index: 50 !important;
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.v2 .mainmenu-area.is-scrolled {
  background: var(--nav-bg-scrolled);
  border-color: var(--border);
  box-shadow: 0 6px 24px -12px rgba(var(--shadow-color), .18);
}
/* resources/homePage/12/css/style.css targets #primary-menu > ul > li > a
   with an ID selector (fixed 30px/15px padding, a hover/active triangle
   pointer, a 3px white top border) which beats plain Tailwind utility
   classes on specificity. It isn't being edited here since other pages
   share it, so its effects are neutralised below with !important instead. */
.v2 .mainmenu-area #primary-menu > ul > li > a.nav-link,
.v2 .mainmenu-area #primary-menu > ul > li > a.nav-cta {
  border-top: none !important;
  text-align: left !important;
}
.v2 .mainmenu-area #primary-menu > ul > li > a.nav-link {
  padding: 8px 10px !important;
  font-size: 13.5px;
  white-space: nowrap;
}
@media (min-width: 1300px) {
  .v2 .mainmenu-area #primary-menu > ul > li > a.nav-link {
    padding: 8px 13px !important;
    font-size: 14.5px;
  }
}
.v2 .mainmenu-area #primary-menu > ul > li > a.nav-cta {
  padding: 8px 20px !important;
}
/* Tailwind's CDN build injects its own <style> early in <head> (before
   bootstrap.min.css), so single-class utilities like .bg-ink/.w-6 lose to
   Bootstrap's 2-class ".navbar-toggle .icon-bar" selector on specificity
   alone, regardless of source order. Forced back to the intended look. */
.v2 .navbar-toggle {
  background: transparent !important;
  border-color: transparent !important;
}
.v2 .navbar-toggle .icon-bar {
  background-color: var(--text) !important;
}
.v2 .navbar-toggle:hover .icon-bar {
  background-color: var(--brand) !important;
}

.v2 .mainmenu-area #primary-menu > ul > li > a.nav-link:before,
.v2 .mainmenu-area #primary-menu > ul > li > a.nav-cta:before {
  display: none !important;
}

.v2 .nav-link {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--text) !important;
  font-weight: 500;
  border-radius: 999px;
}
.v2 .nav-link::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: 4px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.v2 .nav-link:hover::after,
.v2 li.active > .nav-link::after {
  transform: scaleX(1);
}
.v2 .nav-link:hover,
.v2 li.active > .nav-link {
  color: var(--brand) !important;
}

/* Login button — same recipe as the "Browse Services" hero CTA (solid
   brand fill, full pill, generous fit) just sized down for the navbar. */
.v2 .nav-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 20px !important;
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(128, 0, 0, .5);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.v2 .nav-cta:hover {
  color: #fff !important;
  background-color: var(--brand-600) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(128, 0, 0, .55);
}
.v2 .nav-cta:active {
  transform: translateY(0);
}
.v2 .nav-cta svg {
  transition: transform .25s ease;
}
.v2 .nav-cta:hover svg {
  transform: translateX(2px);
}

/* Theme toggle --------------------------------------------------------- */
.v2 .theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.v2 .theme-toggle:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}
.v2 .theme-toggle .icon-sun,
.v2 .theme-toggle .icon-moon {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity .2s ease, transform .3s ease;
}
.v2 .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0); }
.v2 .theme-toggle .icon-sun { opacity: 0; transform: scale(.4) rotate(-90deg); }
:root[data-theme="dark"] .v2 .theme-toggle .icon-moon { opacity: 0; transform: scale(.4) rotate(90deg); }
:root[data-theme="dark"] .v2 .theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0); }

/* Hero ---------------------------------------------------------------- */
.v2 .hero-mesh {
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(128,0,0,.12), transparent 60%),
    radial-gradient(50% 50% at 85% 15%, rgba(201,138,43,.16), transparent 60%),
    radial-gradient(70% 70% at 50% 100%, rgba(128,0,0,.08), transparent 60%);
}
:root[data-theme="dark"] .v2 .hero-mesh {
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(168,50,50,.22), transparent 60%),
    radial-gradient(50% 50% at 85% 15%, rgba(219,165,74,.16), transparent 60%),
    radial-gradient(70% 70% at 50% 100%, rgba(128,0,0,.18), transparent 60%);
}
.v2 .hero-eyebrow {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(128,0,0,.18);
  color: var(--brand);
}
:root[data-theme="dark"] .v2 .hero-eyebrow {
  background: rgba(255,255,255,.06);
  border-color: rgba(219,165,74,.3);
  color: var(--accent);
}
.v2 .hero-secondary-cta {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.v2 .hero-secondary-cta:hover {
  background: var(--surface-alt);
  border-color: rgba(128,0,0,.25);
}
.v2 .blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(50px);
  opacity: .55;
  animation: v2-float 16s ease-in-out infinite;
  pointer-events: none;
}
.v2 .blob-1 { background: radial-gradient(circle at 30% 30%, #c98a2b, transparent 70%); width: 420px; height: 420px; top: -120px; left: -100px; }
.v2 .blob-2 { background: radial-gradient(circle at 70% 70%, #800000, transparent 70%); width: 380px; height: 380px; bottom: -140px; right: -80px; animation-delay: -6s; }
.v2 .blob-3 { background: radial-gradient(circle at 50% 50%, #a33f3f, transparent 70%); width: 260px; height: 260px; top: 40%; right: 12%; animation-delay: -10s; opacity: .35; }

@keyframes v2-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -18px) scale(1.06); }
  66% { transform: translate(-18px, 20px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .v2 .blob { animation: none; }
}

.v2 .hero-grid-pattern {
  background-image: linear-gradient(rgba(128,0,0,.06) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(128,0,0,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
}
:root[data-theme="dark"] .v2 .hero-grid-pattern {
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* Cards --------------------------------------------------------------- */
.v2 .action-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.v2 .action-card:hover {
  transform: translateY(-6px);
  border-color: rgba(128,0,0,.25);
  box-shadow: 0 24px 48px -20px rgba(128,0,0,.28);
}
/* Vertically centers each card's content so cards stretched to equal
   row height (the default CSS Grid behaviour) don't end up with all
   their slack space dumped below a shorter description. */
.v2 .action-card > a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
/* Hover: a colour "wave" rises from the card's base and fills it. Uses
   clip-path (not a scaled/translated element) specifically so it can
   never paint outside the card regardless of its aspect ratio. */
.v2 .action-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  clip-path: circle(0% at 50% 100%);
  transition: clip-path .6s cubic-bezier(.22, .61, .36, 1);
  z-index: 0;
  pointer-events: none;
}
.v2 .action-card:hover::before {
  clip-path: circle(150% at 50% 100%);
}
.v2 .action-card h3,
.v2 .action-card p {
  transition: color .35s ease;
}
.v2 .action-card:hover h3,
.v2 .action-card:hover p {
  color: #fff;
}
.v2 .action-card .icon-wrap {
  background: var(--icon-bg);
  color: var(--icon-fg);
  transition: transform .35s ease, background-color .35s ease, color .35s ease;
}
.v2 .action-card:hover .icon-wrap {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .v2 .action-card::before { transition: none; }
}

/* "How It Works" carousel ------------------------------------------------ */
.v2 .carousel-viewport {
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.v2 .carousel-track {
  transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.v2 .carousel-slide {
  min-width: 100%;
  /* Own compositing layer for each slide's text, independent of the
     track's translateX layer — without this, Chromium/Windows can drop
     ClearType subpixel AA for any slide that isn't at the identity
     transform, rendering its text much paler/thinner than slide 1
     (which sits at translateX(0) and never gets layer-promoted). */
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Hero carousel reuses the same track/slide/dot mechanics as the "How
   It Works" carousel, but sits directly on the hero background — no
   card chrome — and skips the arrow buttons for a more minimal feel. */
.v2 .hero-carousel .carousel-viewport {
  background: none;
  border: none;
  overflow: hidden;
}
.v2 .carousel-icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--icon-fg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -18px rgba(128,0,0,.3);
}
.v2 .carousel-step-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--accent);
  opacity: .55;
}
.v2 .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px -8px rgba(var(--shadow-color), .25);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.v2 .carousel-arrow:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.v2 .carousel-arrow-prev { left: -14px; }
.v2 .carousel-arrow-next { right: -14px; }
@media (max-width: 640px) {
  .v2 .carousel-arrow { display: none; }
}
.v2 .carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--border);
  padding: 0;
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, width .25s ease;
}
.v2 .carousel-dot.is-active {
  background: var(--brand);
  width: 26px;
}

.v2 .info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background-color .3s ease, border-color .3s ease;
}

/* About Us ---------------------------------------------------------------- */
.v2 .about-highlight {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .3s ease;
}
.v2 .about-highlight:hover {
  transform: translateY(-4px);
  border-color: rgba(128,0,0,.22);
  box-shadow: 0 16px 32px -16px rgba(128,0,0,.25);
}
.v2 .about-highlight .icon-wrap {
  background: var(--icon-bg);
  color: var(--icon-fg);
}
.v2 .about-quote {
  background: var(--surface-alt);
  border-left: 4px solid var(--accent);
}

/* FAQ accordion --------------------------------------------------------- */
/* resources/homePage/12/css/style.css has its own accordion rules from
   the original (pre-redesign) FAQ layout:
     #accordion .panel .panel-title { padding: 30px 0 30px 60px; }
     #accordion .panel .panel-collapse { padding-left: 60px; }
   That #accordion ID selector outranks anything below on specificity,
   so it was silently adding ~60px of padding around both the question
   and the answer on top of this redesign's own spacing — the FAQ cards
   were rendering far taller than their visible content. Neutralised
   with !important since style.css is shared with other pages. */
.v2 #accordion .panel .panel-title,
.v2 #accordion .panel .panel-collapse {
  padding: 0 !important;
}

.v2 #accordion .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--shadow-color), .04);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .2s ease, transform .2s ease;
}
.v2 #accordion .panel:hover {
  box-shadow: 0 12px 24px -16px rgba(var(--shadow-color), .3);
}
.v2 #accordion .panel-title a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.v2 #accordion .panel-title a:hover {
  color: var(--brand);
  background: var(--surface-alt);
}
/* main.js prepends an empty <span> as the first child of each trigger link */
.v2 #accordion .panel-title a > span:first-child {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand);
  position: relative;
  transition: transform .3s ease, background .3s ease;
}
.v2 #accordion .panel-title a > span:first-child::before,
.v2 #accordion .panel-title a > span:first-child::after {
  content: "";
  position: absolute;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.v2 #accordion .panel-title a > span:first-child::before { width: 13px; height: 2px; }
.v2 #accordion .panel-title a > span:first-child::after { width: 2px; height: 13px; transition: opacity .25s ease; }
.v2 #accordion .panel-title a.collapsed > span:first-child { background: var(--text-soft); }
.v2 #accordion .panel-title a:not(.collapsed) > span:first-child::after { opacity: 0; }
.v2 #accordion .panel-collapse .panel-body-text {
  padding: 0 22px 22px 66px;
  color: var(--text-soft);
  line-height: 1.7;
}
.v2 #accordion .panel-body-text > p {
  margin: 0 0 14px;
}
.v2 .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: faq-step;
}
.v2 .faq-steps li {
  counter-increment: faq-step;
  position: relative;
  padding-left: 36px;
}
.v2 .faq-steps li + li {
  margin-top: 12px;
}
.v2 .faq-steps li::before {
  content: counter(faq-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--icon-bg);
  color: var(--icon-fg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
}
.v2 .faq-steps strong {
  color: var(--text);
  font-weight: 700;
}

/* Services directory (services.html) ------------------------------------- */
/* style.css's legacy "#accordion .panel .panel-title a span" rule (see
   above) assumes a single span child — the plus/x toggle main.js prepends
   — and absolutely-positions ANY span at top:0/left:0 as a filled 36px
   blue circle. Its extra "a span" element selectors out-specify plain
   .v2-scoped classes, so the badge/name/count spans added below inherited
   that styling and rendered stacked on top of the toggle icon instead of
   flowing in the row. Reset with !important, then re-declared after. */
.v2 #accordion .dept-icon-badge,
.v2 #accordion .dept-name,
.v2 #accordion .dept-count {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
}
/* Each department gets its own badge colour, cycling through a small
   palette so the accordion reads as a directory of distinct departments
   rather than four identical rows. */
.v2 #accordion .dept-icon-badge {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: var(--brand) !important;
  transition: transform .3s ease;
}
.v2 #accordion .panel:nth-child(4n+2) .dept-icon-badge { background: var(--accent) !important; }
.v2 #accordion .panel:nth-child(4n+3) .dept-icon-badge { background: #2f7d6b !important; }
.v2 #accordion .panel:nth-child(4n+4) .dept-icon-badge { background: #3b6ea5 !important; }
.v2 #accordion .panel-title a:hover .dept-icon-badge {
  transform: scale(1.08) rotate(-4deg);
}
.v2 #accordion .dept-icon {
  flex: none;
  width: 19px;
  height: 19px;
  color: #fff;
}
.v2 #accordion .dept-name {
  flex: 1 1 auto;
  min-width: 0;
}
.v2 #accordion .dept-count {
  flex: none;
  display: inline-block !important;
  padding: 3px 11px;
  border-radius: 999px !important;
  background: var(--surface-alt) !important;
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .v2 #accordion .dept-count {
    display: none !important;
  }
}
.v2 .service-list {
  list-style: none;
  margin: 0;
  padding: 6px 22px 22px 66px;
}
.v2 .service-list li {
  border-top: 1px solid var(--border);
}
.v2 .service-list li:first-child {
  border-top: none;
}
.v2 .service-list li > a[data-toggle="modal"] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  color: var(--text-soft);
  text-decoration: none;
  line-height: 1.5;
  transition: color .2s ease;
}
.v2 .service-list li > a[data-toggle="modal"]:hover {
  color: var(--brand);
}
.v2 .service-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-soft);
  transition: color .2s ease;
}
.v2 .service-list li > a[data-toggle="modal"]:hover .service-icon {
  color: var(--brand);
}
.v2 .service-note {
  display: inline-block;
  margin: -4px 0 10px 30px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
}

/* Partner logos ---------------------------------------------------------- */
.v2 .partner-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .3s ease;
}
.v2 .partner-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -12px rgba(var(--shadow-color), .25);
  border-color: rgba(128,0,0,.2);
}
.v2 .partner-tile img {
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .25s ease, opacity .25s ease;
}
:root[data-theme="dark"] .v2 .partner-tile img {
  filter: grayscale(100%) invert(.9);
  opacity: .7;
}
.v2 .partner-tile:hover img {
  filter: none;
  opacity: 1;
}
:root[data-theme="dark"] .v2 .partner-tile:hover img {
  filter: none;
  opacity: 1;
}

/* Footer ------------------------------------------------------------------ */
.v2 .footer-v2 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-700), #3a0d0d);
}
:root[data-theme="dark"] .v2 .footer-v2 {
  background: linear-gradient(180deg, #401010, #200a0a);
}
.v2 .footer-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(600px 300px at 12% -10%, rgba(201,138,43,.16), transparent 60%),
    radial-gradient(500px 260px at 100% 10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, auto, 38px 38px, 38px 38px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
}
.v2 .footer-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
}
.v2 .footer-heading {
  color: rgba(255, 255, 255, .55);
  letter-spacing: .08em;
}
.v2 .nic-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 20px 8px 10px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}
.v2 .nic-badge img {
  height: 28px;
  width: auto;
}
.v2 .footer-bottom-bar {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Modals -------------------------------------------------------------------- */
/* index.html's own inline <style> sets .modal-dialog{width:70%} at
   768px+; sized up here for the roomier popups, and the iframes inside
   (which carry their own inline min-height) sized up to match. */
.v2 .modal-dialog {
  width: 94% !important;
  max-width: 1140px !important;
  margin: 30px auto !important;
}
@media (min-width: 768px) {
  .v2 .modal-dialog {
    margin: 50px auto !important;
  }
}
.v2 #customPopup iframe {
  min-height: 640px !important;
}
.v2 #loginPopup iframe {
  min-height: 460px !important;
}
.v2 #reportsPopup iframe {
  min-height: 620px !important;
}
.v2 .modal-content {
  background: var(--surface);
  color: var(--text);
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(var(--shadow-color), .45);
}
.v2 .modal-header {
  background: var(--brand);
  border-bottom: none;
  padding: 18px 22px;
}
.v2 .modal-header .modal-title,
.v2 .modal-header strong {
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.v2 .modal-header .close {
  color: #fff;
  opacity: .85;
  text-shadow: none;
}
.v2 .modal-header .close:hover { opacity: 1; }
.v2 .modal-body { padding: 26px; color: var(--text); }
.v2 .modal-body .control-label { color: var(--text); }
.v2 .modal-body .form-control {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}
.v2 .modal-body .form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
.v2 .modal-body .btn-success {
  background: #1f9d55;
  border-color: #1f9d55;
  border-radius: 999px;
  padding: 10px 26px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
}
.v2 .modal-body .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(31,157,85,.55);
}

/* Back to top ---------------------------------------------------------------- */
.v2 .back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px -8px rgba(128, 0, 0, .5);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease, box-shadow .2s ease;
}
.v2 .back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.v2 .back-to-top:hover {
  background: var(--brand-600);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(128, 0, 0, .6);
}
.v2 .back-to-top:active {
  transform: translateY(0);
}
@media (max-width: 640px) {
  .v2 .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

/* Scrollbar (webkit) --------------------------------------------------------- */
.v2::-webkit-scrollbar { width: 10px; }
.v2::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.v2::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
.v2::-webkit-scrollbar-thumb:hover { background: var(--brand); }