/* Homepage-only color system aligned with the IKIZAME admin portal. */
:root {
  --home-primary-dark: #0D47A1;
  --home-primary: #1565C0;
  --home-accent: #1976D2;
  --home-page: #EAF0F6;
  --home-section: #F2F6FA;
  --home-alt: #E3EBF3;
  --home-card: #F8FAFC;
  --home-white: #FFFFFF;
  --home-border: #D7E1EA;
  --home-text: #1F2937;
  --home-muted: #64748B;
  --home-subtle: #94A3B8;
  --home-success: #15803D;
  --home-error: #DC2626;

  /* Keep shared component variables in step with the homepage palette. */
  --primary: #0D47A1;
  --primary-dark: #0B3D91;
  --primary-light: #E3EFFA;
  --primary-soft: #E3EFFA;
  --secondary: #1565C0;
  --accent-teal: #0D47A1;
  --accent-teal-hover: #0B3D91;
  --accent-cyan: #1976D2;
  --navy: #0D47A1;
  --background: #EAF0F6;
  --surface: #F8FAFC;
  --text-primary: #1F2937;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --border: #D7E1EA;
  --success: #15803D;
  --success-emerald: #15803D;
  --error-crimson: #DC2626;
  --danger: #DC2626;
  --site-ink: #1F2937;
  --site-green: #0D47A1;
  --site-green-dark: #0B3D91;
  --site-green-strong: #0D47A1;
  --site-green-soft: #E3EFFA;
  --site-bg: #EAF0F6;
  --site-surface: #F8FAFC;
  --site-border: #D7E1EA;
  --site-muted: #64748B;
  --site-shadow: 0 8px 24px rgba(31, 60, 90, .08);
}

body:has(.workspace) {
  background-color: var(--home-page);
  background-image: linear-gradient(180deg, #EAF1F7 0%, #F3F7FA 52%, #E8EFF5 100%);
  color: var(--home-text);
}

/* Header matches the admin portal; preserve its existing dimensions and behavior. */
body:has(.workspace) .navbar {
  border-bottom-color: rgba(255,255,255,.14);
  background: #0D47A1;
  box-shadow: 0 2px 12px rgba(13,71,161,.12);
}
body:has(.workspace) .navbar-brand,
body:has(.workspace) .navbar-brand-wrap,
body:has(.workspace) .navbar-links a { color: #FFFFFF; }
body:has(.workspace) .navbar-links a i { color: #D6E4F2; }
body:has(.workspace) .navbar-links a:hover:not(.active):not(.navbar-cta) {
  border-color: rgba(147, 197, 255, 0.22);
  background: rgba(30, 96, 190, 0.28);
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 rgba(90, 160, 255, 0.95);
}
body:has(.workspace) .navbar-links a:hover:not(.active):not(.navbar-cta) i { color: #FFFFFF; }
body:has(.workspace) .navbar-links a.active {
  border-color: rgba(154, 205, 255, 0.3);
  background: rgba(36, 109, 220, 0.34);
  color: #FFFFFF;
  box-shadow: inset 0 -3px 0 #5ba8ff;
}
body:has(.workspace) .navbar-links a.active i { color: #FFFFFF; }
body:has(.workspace) .navbar-links a:focus-visible { outline-color: #BBDEFB; }
body:has(.workspace) .navbar-links a.navbar-cta,
body:has(.workspace) .navbar-links a.navbar-cta:hover {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.2);
}
body:has(.workspace) .navbar-links a.navbar-cta i { color: #fff; }
body:has(.workspace) .lang-badge {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #D6E4F2;
}
body:has(.workspace) .mobile-menu-toggle { color: #FFFFFF; }
body:has(.workspace) .mobile-menu-toggle {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
}

/* Keep the existing hero geometry while trading the deep teal field for soft blue-gray. */
body:has(.workspace) .workspace {
  background: linear-gradient(135deg, #E7EFF6 0%, #F3F7FA 55%, #E1EAF3 100%);
}
body:has(.workspace) .workspace::before {
  opacity: .05;
  background-image:
    url('../images/imigongo-pattern.svg'),
    linear-gradient(135deg, transparent 49.8%, rgba(13,71,161,.12) 49.95%, rgba(13,71,161,.12) 50.05%, transparent 50.2%),
    linear-gradient(45deg, transparent 49.85%, rgba(21,101,192,.10) 49.96%, rgba(21,101,192,.10) 50.04%, transparent 50.15%),
    radial-gradient(circle, rgba(100,130,160,.18) 1px, transparent 1.7px);
  background-size: 180px 180px, 144px 144px, 144px 144px, 96px 96px;
  background-position: left 3% top 8%, left 0 top 0, left 72px top 72px, left 24px top 24px;
  background-repeat: repeat, repeat, repeat, repeat;
  mask-image: linear-gradient(90deg, #000 0%, #000 26%, transparent 72%);
}
body:has(.workspace) .hero-copy .hero-copy-panel {
  border-color: #D7E1EA;
  background: rgba(248,250,252,.93);
  box-shadow: 0 8px 24px rgba(31,60,90,.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:has(.workspace) .hero-h1,
body:has(.workspace) .hero-h1 em { color: #1F2937; text-shadow: none; }
body:has(.workspace) .hero-desc { color: #64748B; }
body:has(.workspace) .hero-copy-panel .hero-h1,
body:has(.workspace) .hero-copy-panel .hero-h1 em { color: #1F2937 !important; }
body:has(.workspace) .hero-copy-panel .hero-desc { color: #64748B !important; }
body:has(.workspace) .hero-support-pill {
  border-color: #D7E1EA;
  background: #E3EFFA;
  color: #335D7E;
}
body:has(.workspace) .hero-support-pill i { color: #1565C0; }
body:has(.workspace) .hero-actions .pill { color: #64748B; }
body:has(.workspace) .workspace a:not(.hero-cta) { color: #1565C0; }
body:has(.workspace) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(21,101,192,.38);
  outline-offset: 3px;
}

/* Cards and metrics share one neutral surface, border, and restrained shadow. */
body:has(.workspace) .quick-action-card,
body:has(.workspace) .reg-card,
body:has(.workspace) .hero-live-stat {
  border-color: #D7E1EA;
  background: #F8FAFC;
  color: #1F2937;
  box-shadow: 0 8px 24px rgba(31,60,90,.08);
}
body:has(.workspace) .quick-action-card:hover { border-color: #BFCFDF; }
body:has(.workspace) .quick-actions { background: #F2F6FA; }
body:has(.workspace) .quick-action-icon,
body:has(.workspace) .hero-live-icon {
  background: #E3EFFA;
  color: #0D47A1;
}
body:has(.workspace) .quick-action-card h3,
body:has(.workspace) .card-body h2,
body:has(.workspace) .hero-live-value { color: #1F2937; }
body:has(.workspace) .quick-action-card p,
body:has(.workspace) .hero-live-heading,
body:has(.workspace) .hero-live-detail,
body:has(.workspace) .card-body .sub { color: #64748B; }
body:has(.workspace) .card-body h2 {
  width: 100%;
  padding: 13px 15px;
  border-radius: 9px;
  background: #0D47A1;
  color: #FFFFFF;
  font-size: 1.05rem;
  letter-spacing: .035em;
  text-align: left;
  text-transform: uppercase;
}
body:has(.workspace) .card-body h2::before {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  color: #FFFFFF;
  box-shadow: none;
}
body:has(.workspace) .hero-live-stat::before,
body:has(.workspace) .hero-live-stat:nth-child(2)::before,
body:has(.workspace) .hero-live-stat:nth-child(3)::before { background: #1976D2; }
body:has(.workspace) .quick-action-card a { color: #1565C0; }
body:has(.workspace) .quick-action-card a:hover { color: #0D47A1; }

/* Forms, focus states, links, and action buttons use the shared blue palette. */
body:has(.workspace) .reg-card { border-top-color: #0D47A1; }
body:has(.workspace) .reg-card.registration-anchor-highlight {
  border-color: #1565C0;
  box-shadow: 0 0 0 4px rgba(21,101,192,.12), 0 8px 24px rgba(31,60,90,.08);
}
body:has(.workspace) .field-group label { color: #334155; }
body:has(.workspace) .input-wrap input,
body:has(.workspace) .otp-input-wrap input {
  border-color: #D7E1EA;
  background: #FFFFFF;
  color: #1F2937;
}
body:has(.workspace) .input-wrap input::placeholder,
body:has(.workspace) .otp-input-wrap input::placeholder { color: #94A3B8; }
body:has(.workspace) .input-wrap input:focus,
body:has(.workspace) .otp-input-wrap input:focus {
  border-color: #1565C0;
  box-shadow: 0 0 0 3px rgba(21,101,192,.10);
  outline: none;
}
body:has(.workspace) .hint { color: #64748B; }
body:has(#candidateRegistrationInteractiveForm) .hint.error,
body:has(#candidateRegistrationInteractiveForm) .otp-hint.hint.error {
  color: #DC2626 !important;
  font-weight: 700;
}
body:has(.workspace) .phone-prefix { border-color: #D7E1EA; background: #E9EEF3; color: #334155; }
body:has(.workspace) .btn-submit,
body:has(.workspace) .hero-cta:not(.secondary),
body:has(.workspace) .btn-otp-verify {
  border-color: #0D47A1;
  background: #0D47A1;
  color: #FFFFFF;
  box-shadow: none;
}
body:has(.workspace) .btn-submit:hover,
body:has(.workspace) .hero-cta:not(.secondary):hover,
body:has(.workspace) .btn-otp-verify:hover { background: #0B3D91; }
body:has(.workspace) .btn-submit:active,
body:has(.workspace) .hero-cta:not(.secondary):active,
body:has(.workspace) .btn-otp-verify:active { background: #082F78; }
body:has(.workspace) .hero-cta.secondary {
  border-color: #0D47A1;
  background: transparent;
  color: #0D47A1;
}
body:has(.workspace) .hero-cta.secondary:hover { background: #E3EFFA; }
body:has(.workspace) .forgot-link,
body:has(.workspace) .back-link { color: #1565C0; }

/* Preserve existing modal behavior and set readable, consistent surfaces. */
body:has(.workspace) .guide-overlay,
body:has(.workspace) .otp-overlay,
body:has(.workspace) .pay-modal-overlay,
body:has(.workspace) .payment-modal-overlay { background: rgba(15,35,60,.45); }
body:has(.workspace) .guide-modal,
body:has(.workspace) .otp-modal,
body:has(.workspace) .payment-modal,
body:has(.workspace) .pay-modal,
body:has(.workspace) .pay-modal-box {
  border-color: #D7E1EA;
  background: #F8FAFC;
  color: #1F2937;
  box-shadow: 0 8px 24px rgba(31,60,90,.12);
}
body:has(.workspace) .guide-modal h3,
body:has(.workspace) .otp-modal h3 { color: #1F2937; }
body:has(.workspace) .guide-modal p,
body:has(.workspace) .otp-modal p { color: #64748B; }
body:has(.workspace) .guide-modal .step-icon { background: #E3EFFA !important; color: #0D47A1 !important; }
body:has(.workspace) .guide-modal .step-tag { background: #E3EFFA !important; color: #0D47A1 !important; }
body:has(.workspace) .guide-modal .guide-step { border-color: #D7E1EA; background: #FFFFFF; color: #1F2937; }
body:has(.workspace) .guide-modal .guide-step h4 { color: #1F2937; }
body:has(.workspace) .guide-modal .guide-step p { color: #64748B; }
body:has(.workspace) #ownerOtpOverlay .otp-modal > div:first-child { background: #0D47A1 !important; }
body:has(.workspace) #ownerOtpOverlay .btn-otp-cancel { color: #64748B; }
body:has(.workspace) .pay-modal-actions .btn-pay,
body:has(.workspace) .btn-pay { border-color: #0D47A1; background: #0D47A1; color: #FFFFFF; }
body:has(.workspace) .pay-modal-actions .btn-pay:hover,
body:has(.workspace) .btn-pay:hover { background: #0B3D91; }

/* Give the homepage introduction clear separation from the two-row mobile navigation. */
@media (max-width: 900px) {
  body:has(.workspace) .workspace { padding-top: clamp(40px, 7vw, 52px) !important; }
}

/* Keep the footer's existing content and layout, matching the admin-login footer. */
body:has(.workspace) .site-footer { background: #0D47A1; color: #FFFFFF; }
body:has(.workspace) .site-footer h2,
body:has(.workspace) .site-footer h3,
body:has(.workspace) .site-footer-brand { color: #FFFFFF; }
body:has(.workspace) .site-footer p,
body:has(.workspace) .site-footer a { color: #C9D9EA; }
body:has(.workspace) .site-footer a:hover { color: #FFFFFF; }
body:has(.workspace) .site-footer-bottom { border-top-color: rgba(214,228,242,.22); color: #C9D9EA; }

/* Align the transient premium brand curtain with the IKIZAME technology palette. */
#fullScreenAppLauncherSplashCurtain {
  background:
    radial-gradient(circle at 50% 30%, rgba(125, 211, 252, 0.22), transparent 30%),
    linear-gradient(135deg, #0b57b7 0%, #07366f 32%, #061f45 68%, #020b18 100%) !important;
}
#fullScreenAppLauncherSplashCurtain .ikizame-loader__wordmark {
  color: #F8FBFF !important;
  text-shadow: 0 0 24px rgba(125, 211, 252, 0.22) !important;
}
#fullScreenAppLauncherSplashCurtain .ikizame-loader__status {
  color: rgba(224, 242, 254, 0.9) !important;
}
#fullScreenAppLauncherSplashCurtain .ikizame-loader__progress-fill {
  background: linear-gradient(90deg, #7dd3fc 0%, #38bdf8 32%, #e0f2fe 100%) !important;
}

@media (max-width: 1050px) {
  body:has(.workspace) .navbar.home-visible-nav { grid-template-columns: minmax(0,1fr); }
  body:has(.workspace) .navbar.home-visible-nav nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  body:has(.workspace) .navbar.home-visible-nav .mobile-menu-toggle { display: none !important; }
}

@media (max-width: 900px) {
  body:has(.workspace) .navbar-links a,
  body:has(.workspace) .navbar-links a i { color: #FFFFFF; }
  body:has(.workspace) .navbar-links a.active { background: rgba(255,255,255,.14); }
  body:has(.workspace) .navbar-links a:hover:not(.active):not(.navbar-cta),
  body:has(.workspace) .navbar-links a:hover:not(.active):not(.navbar-cta) i { color: #0D47A1; }
}

@media (max-width: 600px) {
  body:has(.workspace) .navbar.home-visible-nav nav[hidden] { display: block !important; }
  body:has(.workspace) .navbar.home-visible-nav .navbar-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body:has(.workspace) .navbar.home-visible-nav .navbar-links .nav-cta-item { grid-column: 1 / -1; }
  body:has(.workspace) .workspace { padding-top: 12px; }
  body:has(.workspace) .card-body h2 { padding: 11px 12px; font-size: 1rem; }
}

@media (max-width: 600px) {
  body:has(.workspace) .workspace::before {
    opacity: .035;
    mask-image: linear-gradient(90deg, #000 0%, transparent 82%);
  }
}

/* Home introduction: stronger editorial hierarchy on the existing light surface. */
body:has(.workspace) .hero-copy .hero-copy-panel {
  background: rgba(255, 255, 255, .96);
  border-color: #dce7f2;
  box-shadow: 0 16px 40px rgba(24, 57, 92, .08);
  gap: 0;
}
body:has(.workspace) .hero-copy-panel .hero-h1 {
  max-width: 100%;
  margin: 0 0 26px;
  color: #10253f !important;
  font-family: "Plus Jakarta Sans", Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(48px, 4.35vw, 64px);
  font-weight: 800;
  line-height: 1.025;
  letter-spacing: -.042em;
}
body:has(.workspace) .hero-copy-panel .hero-headline-line { display: block; }
body:has(.workspace) .hero-copy-panel .hero-headline-accent { color: #1557ae; }
body:has(.workspace) .hero-copy-panel .hero-desc {
  max-width: 70ch;
  margin: 0 0 24px;
  color: #40546b !important;
  font-family: "Plus Jakarta Sans", Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(17px, 1.28vw, 20px);
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: -.01em;
}
body:has(.workspace) .hero-copy-panel .hero-support-row { gap: 14px 24px; }
body:has(.workspace) .hero-copy-panel .hero-support-pill {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #203e62;
  font-family: "Plus Jakarta Sans", Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
body:has(.workspace) .hero-copy-panel .hero-support-pill i {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8f2ff;
  color: #1767b7;
  font-size: 16px;
}

@media (max-width: 900px) {
  body:has(.workspace) .hero-copy-panel .hero-h1 {
    margin-bottom: 22px;
    font-size: clamp(32px, 10vw, 48px);
    line-height: 1.055;
    letter-spacing: -.038em;
    text-wrap: balance;
  }
  body:has(.workspace) .hero-copy-panel .hero-headline-line { display: inline; }
  body:has(.workspace) .hero-copy-panel .hero-desc {
    margin-bottom: 22px;
    font-size: clamp(16px, 2.1vw, 17px);
    line-height: 1.6;
  }
  body:has(.workspace) .hero-copy-panel .hero-support-row { gap: 12px 20px; }
}

@media (max-width: 420px) {
  body:has(.workspace) .hero-copy-panel .hero-support-row { flex-direction: column; align-items: flex-start; }
  body:has(.workspace) .hero-copy-panel .hero-support-pill { font-size: 14px; }
}

/* Contact action: quiet depth and a real keyboard-operable control. */
body:has(.workspace) .wa-float {
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: linear-gradient(145deg, #31da70, #128c49);
  box-shadow: 0 10px 26px rgba(4, 87, 46, .26), 0 3px 8px rgba(5, 42, 45, .16);
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
body:has(.workspace) .wa-float::before { display: none; }
body:has(.workspace) .wa-float svg { width: 29px; height: 29px; }
body:has(.workspace) .wa-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 30px rgba(4, 87, 46, .31), 0 3px 8px rgba(5, 42, 45, .16);
}
body:has(.workspace) .wa-float:active { transform: translateY(0) scale(.97); }
body:has(.workspace) .wa-float:focus-visible { outline: 3px solid #0d47a1; outline-offset: 4px; }

@media (max-width: 900px) {
  body:has(.workspace) .wa-float {
    display: flex !important;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }
  body:has(.workspace) .wa-inline { display: none !important; }
  body:has(.workspace) .wa-popup {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.workspace) .wa-float { transition: none; }
}