/* Spardha Pragathi public website — premium visual upgrade */
:root {
  --sp-navy: #071d49;
  --sp-navy-2: #0b2f72;
  --sp-blue: #2457e6;
  --sp-blue-dark: #1744c6;
  --sp-cyan: #19b8c8;
  --sp-green: #078568;
  --sp-green-dark: #056b55;
  --sp-gold: #f4b740;
  --sp-text: #101828;
  --sp-muted: #667085;
  --sp-line: #dfe7f2;
  --sp-soft: #f3f7fc;
  --sp-card: #ffffff;
  --sp-shadow: 0 12px 36px rgba(7, 29, 73, .08);
  --sp-shadow-lg: 0 28px 70px rgba(7, 29, 73, .16);
  --sp-radius: 18px;
}

html { scroll-padding-top: 92px; }

body.sp-home-body,
body.sp-public-body {
  color: var(--sp-text);
  background:
    radial-gradient(circle at 8% 4%, rgba(36, 87, 230, .08), transparent 27rem),
    radial-gradient(circle at 94% 12%, rgba(25, 184, 200, .07), transparent 24rem),
    #f7f9fd;
}

body.sp-home-body::selection,
body.sp-public-body::selection { color: #fff; background: var(--sp-blue); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(36, 87, 230, .26) !important;
  outline-offset: 3px;
}

/* Homepage: first-view direction */
.sp-home-backdrop > div:first-child {
  background: linear-gradient(135deg, #f1f5ff 0%, #fff 48%, #eefbfd 100%) !important;
}

.sp-home-header {
  border: 0 !important;
  border-bottom: 1px solid rgba(196, 209, 227, .72) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 10px 36px rgba(7, 29, 73, .045);
}
.sp-home-header .sp-container { min-height: 76px; }
.sp-home-header .brand-logo { width: 46px; }
.sp-home-header .leading-tight .font-extrabold {
  color: var(--sp-navy);
  font-size: 17px;
  letter-spacing: -.025em;
}
.sp-home-header .leading-tight .text-xs {
  margin-top: 3px;
  color: #63708a;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sp-home-catalog-nav a { position: relative; color: #344054 !important; }
.sp-home-catalog-nav a::after {
  position: absolute;
  right: 10px;
  bottom: 4px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--sp-blue);
  content: "";
  opacity: 0;
  transform: scaleX(.5);
  transition: opacity .2s ease, transform .2s ease;
}
.sp-home-catalog-nav a:hover::after { opacity: 1; transform: scaleX(1); }

.sp-home-hero { padding-top: 30px !important; padding-bottom: 54px !important; }
.sp-home-hero-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(45, 212, 191, .30), transparent 22rem),
    radial-gradient(circle at 52% 115%, rgba(59, 130, 246, .42), transparent 26rem),
    linear-gradient(125deg, #061a43 0%, #0a2d6c 50%, #075c80 100%) !important;
  box-shadow: 0 30px 80px rgba(7, 29, 73, .26) !important;
}
.sp-home-hero-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, #000, transparent 75%);
  content: "";
}
.sp-home-hero-card > .relative { padding: clamp(28px, 4.4vw, 64px) !important; }
.sp-home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #dffbff;
  background: rgba(255,255,255,.09);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
}
.sp-home-eyebrow .sp-icon { color: #65e4ec; font-size: 16px; }
.sp-home-hero-title {
  max-width: 660px;
  font-size: clamp(2.35rem, 4.2vw, 4.6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}
.sp-home-hero-lede {
  max-width: 610px;
  color: rgba(236, 247, 255, .82) !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
}
.sp-home-hero-actions { gap: 10px !important; }
.sp-home-cta {
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 12px !important;
  padding: 0 19px !important;
  font-size: 13px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sp-home-cta:hover { transform: translateY(-2px); }
.sp-home-cta-primary {
  color: var(--sp-navy) !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .17) !important;
}
.sp-home-cta-whatsapp {
  color: #fff !important;
  border-color: rgba(116, 245, 203, .40) !important;
  background: rgba(7, 133, 104, .66) !important;
  box-shadow: none !important;
}
.sp-home-cta-whatsapp .sp-icon { color: #8cf5d3 !important; }
.sp-home-cta-login {
  color: #fff !important;
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
.sp-home-cta-login .sp-icon { color: #93c5fd !important; }
.sp-home-quick-panel {
  border-color: rgba(255,255,255,.16) !important;
  border-radius: 22px !important;
  background: linear-gradient(150deg, rgba(255,255,255,.15), rgba(255,255,255,.065)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.20) !important;
}
.sp-home-quick-panel > .font-extrabold {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sp-home-quick-panel > .font-extrabold::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 0 5px rgba(103,232,249,.12);
  content: "";
}
.sp-home-quick-card {
  min-height: 114px;
  border-color: rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.075) !important;
}
.sp-home-quick-card:hover {
  border-color: rgba(125, 211, 252, .42) !important;
  background: rgba(255,255,255,.14) !important;
}
.sp-home-quick-card .sp-icon { color: #67e8f9; font-size: 20px; }
.sp-home-quick-card .text-sm { color: rgba(231, 244, 255, .68) !important; font-weight: 500 !important; }

@media (max-width: 1023px) {
  .sp-home-header .sp-container { min-height: 68px; }
  .sp-home-hero-card > .relative { padding: 36px !important; }
  .sp-home-hero-title { max-width: 780px; }
}

@media (max-width: 639px) {
  .sp-home-hero { padding-top: 14px !important; padding-bottom: 38px !important; }
  .sp-home-hero-card { border-radius: 20px !important; }
  .sp-home-hero-card > .relative { padding: 26px 20px !important; }
  .sp-home-eyebrow { margin-bottom: 14px; font-size: 9px; }
  .sp-home-hero-title { font-size: 2.35rem !important; line-height: 1.08 !important; }
  .sp-home-hero-lede { font-size: 14px !important; line-height: 1.65 !important; }
  .sp-home-cta { width: 100%; }
  .sp-home-quick-panel { padding: 18px !important; }
  .sp-home-quick-card { min-height: 94px; padding: 16px !important; }
}

/* Homepage sections */
.sp-home-proof { padding-bottom: 90px !important; }
.sp-home-proof > .grid { gap: 48px; }
.sp-home-proof > .grid > div:first-child .h-full > div:first-child > .inline-flex {
  border: 1px solid #d7e3f3 !important;
  border-radius: 999px !important;
  color: #2452a7 !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 8px 22px rgba(7,29,73,.06) !important;
  font-size: 11px;
  letter-spacing: .015em;
}
.sp-home-proof > .grid > div:first-child h2 {
  max-width: 680px;
  color: var(--sp-navy) !important;
  font-size: clamp(2.35rem, 4.5vw, 4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.055em !important;
}
.sp-home-proof > .grid > div:first-child h2 span {
  background-image: linear-gradient(100deg, var(--sp-blue), #0d9ca9) !important;
}
.sp-home-proof > .grid > div:first-child p {
  max-width: 650px;
  color: #647087 !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
}
.sp-home-proof > .grid > div:first-child .mt-7 a,
.sp-home-about .pt-6 a {
  min-height: 50px;
  border-radius: 11px !important;
  padding: 0 20px !important;
  font-size: 13px;
}
.sp-home-proof > .grid > div:first-child .mt-7 a:first-child,
.sp-home-about .pt-6 a:first-child { background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important; box-shadow: 0 12px 26px rgba(36,87,230,.18) !important; }
.sp-home-proof > .grid > div:first-child .mt-7 a:last-child,
.sp-home-about .pt-6 a:last-child { background: linear-gradient(135deg, #0d8d90, #08718d) !important; box-shadow: 0 12px 26px rgba(13,141,144,.16) !important; }
.sp-home-proof > .grid > div:first-child .grid-cols-3 { gap: 12px !important; }
.sp-home-proof > .grid > div:first-child .grid-cols-3 > div {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe7f2 !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 10px 28px rgba(7,29,73,.06) !important;
}
.sp-home-proof > .grid > div:first-child .grid-cols-3 > div::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sp-blue), var(--sp-cyan));
  content: "";
}
.sp-home-proof > .grid > div:first-child .grid-cols-3 .text-2xl { color: var(--sp-navy) !important; font-size: 25px; }
.sp-home-proof > .grid > div:last-child > .relative {
  border: 1px solid #dfe7f2 !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 24px 60px rgba(7,29,73,.11) !important;
}
.sp-home-proof > .grid > div:last-child > .relative > .absolute {
  background: linear-gradient(145deg, rgba(36,87,230,.07), rgba(255,255,255,.80) 44%, rgba(25,184,200,.07)) !important;
}
.sp-home-proof > .grid > div:last-child > .relative .text-lg { color: var(--sp-navy) !important; }
.sp-home-proof a.group {
  border-color: #dfe7f1 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(7,29,73,.05) !important;
}
.sp-home-proof a.group:hover { border-color: #b9cae1 !important; box-shadow: 0 17px 38px rgba(7,29,73,.11) !important; }
.sp-home-proof a.group > div:first-child { border-radius: 11px !important; box-shadow: none !important; }
.sp-home-proof a.group .mt-3 { color: #172033 !important; }
.sp-home-proof a.group .text-sm { color: #69768a !important; font-weight: 500 !important; }
.sp-home-proof > .grid > div:last-child .mt-6.rounded-3xl {
  border-color: #dfe7f2 !important;
  border-radius: 14px !important;
  background: #f8faff !important;
}
.sp-home-proof > .grid > div:last-child .mt-6.rounded-3xl .rounded-2xl { border-color: #e2e8f1 !important; border-radius: 10px !important; background: #fff !important; }

.sp-home-about { padding-top: 82px !important; padding-bottom: 90px !important; }
#about-space,
#why-space { scroll-margin-top: 100px; }
#about-space h2,
#why-space h2 {
  color: var(--sp-navy) !important;
  font-size: clamp(30px, 3.7vw, 45px) !important;
  letter-spacing: -.045em !important;
}
#about-space p,
#why-space p { color: #66748a !important; font-weight: 500 !important; line-height: 1.8 !important; }
.sp-home-about > .mt-10 { margin-top: 44px !important; gap: 34px !important; }
.sp-home-about-image {
  position: relative;
  border: 1px solid #d9e3ef;
  border-radius: 20px !important;
  box-shadow: 0 24px 56px rgba(7,29,73,.13);
}
.sp-home-about-image::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 58%, rgba(7,29,73,.26));
  content: "";
  pointer-events: none;
}
.sp-home-about .space-y-4 > div {
  border-color: #dfe7f2 !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 9px 25px rgba(7,29,73,.055) !important;
}
.sp-home-about .space-y-4 > div > div:first-child { border-radius: 10px !important; background: #edf3ff !important; }
.sp-home-about .space-y-4 .font-extrabold { color: var(--sp-navy) !important; }
.sp-home-about .space-y-4 .text-sm { color: #657188 !important; }
#why-space { margin-top: 100px !important; }
#why-space + .mt-10 { gap: 16px !important; }
#why-space + .mt-10 > div {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border: 1px solid #dfe7f2 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(7,29,73,.06) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#why-space + .mt-10 > div::after {
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,87,230,.10), transparent 67%);
  content: "";
}
#why-space + .mt-10 > div:hover { transform: translateY(-4px); border-color: #becde2 !important; box-shadow: 0 18px 42px rgba(7,29,73,.10) !important; }
#why-space + .mt-10 > div > div:first-child { border-radius: 11px !important; background: linear-gradient(135deg, var(--sp-navy-2), var(--sp-blue)) !important; }
#why-space + .mt-10 > div .font-extrabold { color: var(--sp-navy); }
#why-space + .mt-10 > div .text-sm { color: #68758a !important; font-weight: 500 !important; }

.sp-home-results { padding-bottom: 74px !important; }
.sp-home-results > .grid { gap: 22px; }
.sp-home-results > .grid > div:first-child,
.sp-home-results > .grid > div:last-child > div {
  border: 1px solid #dfe7f2 !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 18px 48px rgba(7,29,73,.085) !important;
}
.sp-home-results .text-xl { color: var(--sp-navy) !important; }
.sp-home-results > .grid > div:first-child > p { color: #68758a !important; font-weight: 500 !important; }
.sp-home-results > .grid > div:first-child .rounded-3xl { border-color: #e0e7f1 !important; border-radius: 13px !important; background: #f8faff !important; }
.sp-home-results > .grid > div:first-child .rounded-2xl { border-radius: 10px !important; }
.sp-home-results > .grid > div:first-child .mt-6 a { min-height: 48px; border-radius: 11px !important; padding: 0 20px !important; font-size: 13px; }
.sp-home-results > .grid > div:first-child .mt-6 a:first-child { background: var(--sp-navy) !important; }
.sp-home-results > .grid > div:first-child .mt-6 a:last-child { background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important; }
.sp-home-results .testimonial-slide-right > div {
  border: 1px solid #e1e8f2;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(7,29,73,.06) !important;
}
.sp-home-results .testimonial-slide-right p { color: #5e6b80 !important; font-style: normal !important; line-height: 1.75; }

.spv4-app-section { padding-top: 24px; padding-bottom: 80px; }
.spv4-play-card { border-color: #dce5f1; border-radius: 20px; box-shadow: 0 24px 60px rgba(7,29,73,.10); }
.spv4-play-header { background: #fbfcfe; }
.spv4-play-content { max-width: none; }
.spv4-app-title-wrap h2 { color: var(--sp-navy); font-weight: 650; letter-spacing: -.035em; }
.spv4-play-install { border-radius: 10px; background: linear-gradient(135deg, #0a8e70, #056b55); box-shadow: 0 10px 24px rgba(7,133,104,.16); }
.spv4-play-screens { border-color: #dfe7f2; }

.sp-home-faq { padding-bottom: 88px !important; }
.sp-home-faq > div {
  border: 1px solid #dfe7f2 !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 20px 52px rgba(7,29,73,.09) !important;
}
.sp-home-faq .text-2xl { color: var(--sp-navy) !important; font-size: 30px !important; letter-spacing: -.035em; }
.sp-home-faq details { border-color: #dfe7f2 !important; border-radius: 13px !important; background: #fbfcfe !important; }
.sp-home-faq details[open] { border-color: #bfd0e8 !important; background: #f5f8ff !important; }
.sp-home-faq summary { color: #172033 !important; }
.sp-home-faq summary::marker { color: var(--sp-blue); }
.sp-home-faq details p { color: #657188 !important; font-weight: 500 !important; }

.sp-home-footer {
  border: 0 !important;
  color: #fff;
  background: #061735 !important;
  box-shadow: none;
}
.sp-home-footer .font-extrabold { color: #fff !important; }
.sp-home-footer .text-slate-500,
.sp-home-footer .text-slate-600 { color: #9fb1cc !important; }
.sp-home-footer .footer-link:hover { color: #fff !important; }
.sp-home-footer .social-btn { border-color: rgba(255,255,255,.10); background: #fff; }
.sp-home-footer .border-white\/60 { border-color: rgba(255,255,255,.10) !important; }

@media (max-width: 1023px) {
  .sp-home-proof { padding-bottom: 68px !important; }
  .sp-home-proof > .grid { gap: 34px; }
  .sp-home-about { padding-top: 60px !important; }
  .sp-home-about .space-y-4 { margin-top: 0 !important; }
}

@media (max-width: 639px) {
  .sp-home-proof > .grid > div:first-child h2 { font-size: 2.5rem !important; }
  .sp-home-proof > .grid > div:first-child .grid-cols-3 > div { border-radius: 11px !important; padding: 15px 10px !important; }
  .sp-home-proof > .grid > div:first-child .grid-cols-3 .text-2xl { font-size: 20px; }
  .sp-home-proof > .grid > div:last-child > .relative { border-radius: 17px !important; }
  .sp-home-proof > .grid > div:last-child > .relative > .relative { padding: 19px !important; }
  .sp-home-proof a.group { border-radius: 12px !important; }
  .sp-home-about { padding-top: 48px !important; padding-bottom: 68px !important; }
  .sp-home-about-image { border-radius: 15px !important; }
  #why-space { margin-top: 72px !important; }
  #why-space + .mt-10 > div { min-height: 0; border-radius: 14px !important; }
  #why-space + .mt-10 > div:hover { transform: none; }
  .sp-home-results > .grid > div:first-child,
  .sp-home-results > .grid > div:last-child > div { border-radius: 16px !important; padding: 20px !important; }
  .spv4-play-card { border-radius: 16px; }
  .sp-home-faq > div { border-radius: 16px !important; padding: 20px !important; }
  .sp-home-faq .text-2xl { font-size: 25px !important; }
}

/* Shared catalogue pages */
.spv3-shell { width: min(1240px, calc(100% - 48px)); }
.spv3-site-header {
  border-bottom: 1px solid rgba(203, 214, 230, .76);
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 10px 36px rgba(7, 29, 73, .045);
}
.spv3-head-inner { height: 80px; gap: 18px; }
.spv3-brand { gap: 11px; min-width: 225px; }
.spv3-brand img { width: 45px; height: 45px; }
.spv3-brand-name { color: var(--sp-navy); font-size: 17px; letter-spacing: -.025em; }
.spv3-brand-sub {
  margin-top: 4px;
  color: #63708a;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spv3-nav { gap: 1px; }
.spv3-nav a {
  position: relative;
  padding: 11px 10px;
  border-radius: 8px;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}
.spv3-nav a::after {
  position: absolute;
  right: 10px;
  bottom: 4px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--sp-blue);
  content: "";
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .2s ease, transform .2s ease;
}
.spv3-nav a:hover,
.spv3-nav a.active { color: var(--sp-blue); background: transparent; }
.spv3-nav a:hover::after,
.spv3-nav a.active::after { opacity: 1; transform: scaleX(1); }
.spv3-btn {
  min-height: 43px;
  border-radius: 10px;
  font-weight: 750;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.spv3-btn-primary {
  background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark));
  box-shadow: 0 10px 24px rgba(36, 87, 230, .20);
}
.spv3-btn-primary:hover { background: linear-gradient(135deg, #1e4fd5, #123cae); }
.spv3-btn-app {
  background: linear-gradient(135deg, #0a8e70, #056b55);
  box-shadow: 0 10px 24px rgba(7, 133, 104, .18);
}
.spv3-btn-ghost { border-color: #d8e2ef; color: #344054 !important; }
.spv3-btn-ghost:hover { border-color: #bfcde0; background: #f7f9fd; }
.spv3-menu-btn { border-color: #d7e1ee; border-radius: 10px; color: var(--sp-navy); }
.spv3-mobile-nav { border-top-color: #e4eaf3; background: rgba(255,255,255,.97); }
.spv3-mobile-grid a { border-color: #e0e7f1; border-radius: 9px; background: #f9fbfe; }

.spv3-page-hero { padding: 34px 0 22px; }
.spv3-page-hero-card {
  min-height: 195px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 31px 34px;
  background:
    radial-gradient(circle at 84% 6%, rgba(52, 211, 153, .24), transparent 17rem),
    radial-gradient(circle at 62% 120%, rgba(59, 130, 246, .42), transparent 22rem),
    linear-gradient(125deg, #071d49 0%, #0d3378 60%, #0b6c85 100%);
  box-shadow: 0 22px 55px rgba(7, 29, 73, .18);
}
.spv3-page-hero-card::before {
  width: 340px;
  height: 340px;
  right: -70px;
  top: -190px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}
.spv3-page-hero-card::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
  content: "";
  pointer-events: none;
}
.spv3-breadcrumb { font-size: 10px; letter-spacing: .02em; }
.spv3-page-title { margin-top: 11px; font-size: clamp(29px, 3.4vw, 42px); letter-spacing: -.045em; }
.spv3-page-copy { max-width: 720px; margin-top: 9px; font-size: 13px; line-height: 1.7; }

.spv3-content { padding-bottom: 76px; }
.spv3-toolbar {
  border-color: #dfe7f2;
  border-radius: 14px;
  padding: 16px 17px;
  box-shadow: 0 10px 28px rgba(7, 29, 73, .055);
}
.spv3-toolbar-title { color: var(--sp-navy); font-size: 15px; letter-spacing: -.015em; }
.spv3-toolbar-sub { color: #7a869a; font-size: 10px; }
.spv3-filter-form { gap: 9px; }
.spv3-filter-control {
  height: 43px;
  border-color: #d8e2ef;
  border-radius: 9px;
  color: #344054;
  background: #fbfcfe;
  font-size: 11px;
}
.spv3-filter-control:hover { border-color: #bdcadc; }
.spv3-filter-control:focus { border-color: var(--sp-blue); box-shadow: 0 0 0 4px rgba(36, 87, 230, .10); background: #fff; }
.spv3-filter-button {
  height: 43px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark));
  box-shadow: 0 9px 20px rgba(36, 87, 230, .17);
}
.spv3-filter-button:hover { filter: brightness(.96); }
.spv3-grid-course,
.spv3-grid-prep,
.spv3-grid-book,
.spv3-grid-ebook { gap: 20px; }
.spv3-card {
  border-color: #dfe7f1;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(7, 29, 73, .065);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.spv3-card:hover {
  transform: translateY(-5px);
  border-color: #bfd0e7;
  box-shadow: 0 22px 48px rgba(7, 29, 73, .12);
}
.spv3-card-media { margin: 9px; border-radius: 11px; background: linear-gradient(135deg, var(--sp-navy-2), var(--sp-cyan)); }
.spv3-card-media::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  content: "";
  pointer-events: none;
}
.spv3-card-media img { transition: transform .38s ease; }
.spv3-card:hover .spv3-card-media img { transform: scale(1.035); }
.spv3-category-badge,
.spv3-badge { border-radius: 999px; padding: 6px 8px; }
.spv3-card-body { padding: 9px 15px 16px; }
.spv3-card-title { color: #172033; font-weight: 750; letter-spacing: -.015em; }
.spv3-course-title,
.spv3-prep-title { font-size: 16px; }
.spv3-card-desc { color: #6d788b; line-height: 1.65; }
.spv3-meta-row { color: #728096; }
.spv3-meta-row .sp-icon { color: var(--sp-blue); }
.spv3-price-row { padding-top: 13px; border-top-color: #e8edf4; }
.spv3-price-label { color: #8b95a7; }
.spv3-price-main { color: var(--sp-navy); font-size: 18px; }
.spv3-card-actions { gap: 8px; margin-top: 12px; }
.spv3-card-actions .spv3-btn { min-height: 41px; border-radius: 9px; }
.spv3-empty { border-color: #dfe7f2; border-radius: 16px; box-shadow: var(--sp-shadow); }

.spv3-ca-list { gap: 12px; }
.spv3-ca-row {
  border-color: #dfe7f2;
  border-radius: 15px;
  padding: 10px 13px 10px 10px;
  box-shadow: 0 9px 26px rgba(7, 29, 73, .05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.spv3-ca-row:hover { transform: translateY(-2px); border-color: #bfd0e7; box-shadow: 0 15px 36px rgba(7, 29, 73, .09); }
.spv3-ca-thumb { border-radius: 10px; }
.spv3-ca-title { color: #172033; letter-spacing: -.01em; }
.spv3-ca-tag { border-radius: 999px; color: var(--sp-blue); background: #eef3ff; }
.spv3-tabs { border-radius: 11px; }
.spv3-tab { border-radius: 8px; }

/* Product detail pages */
.spv3-detail-wrap { padding: 32px 0 84px; }
.spv3-detail-grid { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); gap: 24px; }
.spv3-detail-media-card,
.spv3-detail-main-card {
  border-color: #dfe7f2;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(7, 29, 73, .075);
}
.spv3-detail-media-card { top: 100px; padding: 11px; }
.spv3-detail-media { border-radius: 13px; }
.spv3-detail-main-card { padding: 30px; }
.spv3-detail-kicker { color: var(--sp-blue); font-weight: 800; letter-spacing: .11em; }
.spv3-detail-title { color: var(--sp-navy); font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.spv3-detail-sub { margin-top: 10px; color: #6c778b; }
.spv3-detail-price-card {
  margin-top: 23px;
  border-color: #dce6f2;
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(135deg, #f8faff, #f0fbfb);
}
.spv3-detail-price,
.spv3-detail-price .spv3-price-main { color: var(--sp-navy); font-size: 24px; }
.spv3-section { margin-top: 24px; padding-top: 24px; }
.spv3-section h2 { color: var(--sp-navy); font-size: 18px; }
.spv3-prose { color: #5f6c82; font-size: 13px; }
.spv3-info { border-color: #e0e7f1; border-radius: 11px; background: #fbfcfe; }
.spv3-info-label { color: var(--sp-blue); }
.spv3-feature { border-color: #d8e5f7; border-radius: 11px; background: linear-gradient(180deg, #f9fbff, #edf4ff); }
.spv3-feature .sp-icon { color: var(--sp-blue); }

/* Course overview */
.spcv-page { padding: 26px 0 68px; background: transparent; }
.spcv-page-shell { width: min(1140px, calc(100% - 48px)); }
.spcv-container {
  border: 1px solid #dfe7f2;
  border-radius: 24px;
  box-shadow: 0 24px 65px rgba(7, 29, 73, .12);
}
.spcv-header-card { min-height: 450px; max-height: 520px; aspect-ratio: 16 / 7.5; border-radius: 24px 24px 30px 30px; }
.spcv-overlay { background: linear-gradient(180deg, rgba(3,13,35,.18), rgba(3,13,35,.08) 34%, rgba(3,13,35,.82) 100%); }
.spcv-icon-btn { border: 1px solid rgba(255,255,255,.18); background: rgba(3,13,35,.38); }
.spcv-course-title { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.04em; }
.spcv-course-subtitle { color: rgba(255,255,255,.82); }
.spcv-floating-strip { left: 28px; right: 28px; border-color: #e0e7f1; padding: 8px; box-shadow: 0 18px 42px rgba(7,29,73,.16); }
.spcv-validity-icon { color: var(--sp-blue); background: #edf3ff; }
.spcv-action-pill { background: linear-gradient(135deg, var(--sp-blue), #3978f3); box-shadow: 0 10px 24px rgba(36,87,230,.27); }
.spcv-tab-wrap { padding-top: 52px; }
.spcv-tab-switcher { border-color: #d8e5f7; background: #f5f8fe; box-shadow: none; }
.spcv-tab { background: linear-gradient(135deg, var(--sp-navy-2), var(--sp-blue)); box-shadow: 0 8px 20px rgba(36,87,230,.17); }
.spcv-section-title { color: var(--sp-navy); letter-spacing: -.02em; }
.spcv-feature-card { border-color: #d9e6f8; background: linear-gradient(180deg, #fbfcff, #eef5ff); }
.spcv-feature-card .sp-icon { color: var(--sp-blue); }
.spcv-feature-card span { color: #24457d; }
.spcv-highlights-box { border: 1px solid #e0e7f1; background: #f7f9fc; }
.spcv-highlight-item .sp-icon { color: var(--sp-blue); }
.spcv-desc-btn { background: linear-gradient(135deg, var(--sp-navy-2), var(--sp-blue)); box-shadow: 0 10px 24px rgba(36,87,230,.15); }
.spcv-info-card { border-color: #e0e7f1; background: #fbfcfe; }
.spcv-info-card span,
.spcv-plan-box label { color: var(--sp-blue); }
.spcv-plan-box select:focus { border-color: var(--sp-blue); box-shadow: 0 0 0 4px rgba(36,87,230,.10); }
.spcv-price-details-box { border-color: #e0e7f1; background: linear-gradient(135deg, #f9faff, #f3fafb); }
.spcv-bottom-bar { border-color: #dce5f1; border-radius: 17px; box-shadow: 0 16px 40px rgba(7,29,73,.14); }
.spcv-download-btn { border-radius: 11px; background: linear-gradient(135deg, #0a8e70, #056b55); }
.spcv-modal { backdrop-filter: blur(6px); }
.spcv-modal-box { border-radius: 18px; }

/* Shared dark footer */
.spv3-footer { margin-top: 0; border-top: 0; color: #fff; background: #061735; }
.spv3-footer-grid { padding-top: 44px; padding-bottom: 34px; }
.spv3-footer-brand strong,
.spv3-footer h4 { color: #fff; }
.spv3-footer-brand span { color: #9fb1cc; }
.spv3-footer p,
.spv3-footer-links a,
.spv3-footer-bottom { color: #9fb1cc; }
.spv3-footer-links a:hover { color: #fff; }
.spv3-footer-app { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.spv3-footer-bottom { border-top-color: rgba(255,255,255,.10); }

@media (max-width: 1160px) {
  .spv3-nav { display: none; }
  .spv3-menu-btn { display: flex; }
}

@media (max-width: 900px) {
  .spv3-shell { width: min(100% - 30px, 1240px); }
  .spv3-head-inner { height: 70px; }
  .spv3-page-hero { padding-top: 22px; }
  .spv3-page-hero-card { min-height: 170px; padding: 26px; border-radius: 18px; }
  .spv3-toolbar { align-items: stretch; }
  .spv3-filter-form { width: 100%; }
  .spv3-detail-grid { grid-template-columns: 1fr; }
  .spv3-detail-media-card { position: static; }
  .spcv-page-shell { width: min(100% - 28px, 1140px); }
  .spcv-header-card { min-height: 390px; aspect-ratio: 16 / 8.5; }
}

@media (max-width: 640px) {
  .spv3-shell { width: calc(100% - 22px); }
  .spv3-head-inner { height: 64px; }
  .spv3-brand img { width: 37px; height: 37px; }
  .spv3-brand-name { font-size: 14px; }
  .spv3-brand-sub { font-size: 7.5px; }
  .spv3-page-hero { padding: 14px 0 15px; }
  .spv3-page-hero-card { min-height: 160px; padding: 21px 18px; border-radius: 15px; }
  .spv3-page-title { font-size: 28px; }
  .spv3-page-copy { font-size: 11px; }
  .spv3-toolbar { border-radius: 12px; padding: 13px; }
  .spv3-filter-form { display: grid; grid-template-columns: 1fr 1fr; }
  .spv3-filter-form .spv3-filter-control:first-child { grid-column: 1 / -1; }
  .spv3-filter-button { width: 100%; }
  .spv3-grid-course,
  .spv3-grid-prep,
  .spv3-grid-book,
  .spv3-grid-ebook { gap: 14px; }
  .spv3-card { border-radius: 14px; }
  .spv3-card:hover { transform: none; }
  .spv3-detail-wrap { padding-top: 18px; }
  .spv3-detail-main-card { padding: 19px; }
  .spv3-detail-title { font-size: 25px; }
  .spv3-ca-row:hover { transform: none; }
  .spcv-page { padding: 0; background: #fff; }
  .spcv-page-shell { width: 100%; }
  .spcv-container { border: 0; border-radius: 0; box-shadow: none; }
  .spcv-header-card { min-height: 255px; aspect-ratio: 16 / 10; border-radius: 0 0 24px 24px; }
  .spcv-course-title { font-size: 21px; }
  .spcv-floating-strip { left: 10px; right: 10px; }
  .spcv-bottom-bar { border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}