@keyframes blobFloat {
  0%,
  to {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(22px, -26px) scale(1.06);
  }
  66% {
    transform: translate(-18px, 18px) scale(0.95);
  }
}
@keyframes inkFloat {
  0%,
  to {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(16px, -22px) rotate(9deg);
  }
}
@keyframes rvFade {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes navSalePulse {
  0%,
  to {
    box-shadow: 0 0 0 0 rgba(249, 162, 11, 0.45);
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}
@keyframes ntScrollRTL {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes ntScrollLTR {
  0% {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes sabRise {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sabZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sabFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sabPulse {
  0%,
  to {
    box-shadow: 0 0 0 0 rgba(107, 114, 44, 0.35);
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}
@keyframes otpPop {
  0%,
  to {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
}
@keyframes otpShake {
  0%,
  to {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@keyframes motionCircleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes motionDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes formSuccessIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes formFadeOut {
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}
:root {
  --cloud: #dce6f5;
  --cream: #f7f0e7;
  --cloud-lighter: #f6f9fe;
  --sand: #e4d6c4;
  --brand: #144d9e;
  --brand-dark: #0f3b7a;
  --brand-deep: #0a2c5c;
  --brand-soft: #3e6fbe;
  --heading: #0f3b7a;
  --body: #46506a;
  --muted: #6b7793;
  --logo: #144d9e;
  --mustard: #f9a20b;
  --royal: #144d9e;
  --card: #ffffff;
  --card-soft: #eaf1fb;
  --border: rgba(20, 77, 158, 0.14);
  --border-strong: rgba(20, 77, 158, 0.28);
  --shadow: 0 14px 34px rgba(20, 77, 158, 0.14);
  --shadow-sm: 0 6px 16px rgba(20, 77, 158, 0.1);
  --grad: linear-gradient(135deg, #f0e6da 0%, #f7f0e7 55%, #ece2d2 100%);
  --radius: 18px;
  --radius-lg: 24px;
  --maxw: 1180px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  background: #fff;
}
body,
h1,
h2,
h3,
h4 {
  font-family: "Poppins", sans-serif;
}
body,
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  background: 0 0;
  background-attachment: fixed;
  color: var(--body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  position: relative;
  transition: padding-top 0.48s ease !important;
}
h1,
h2,
h3,
h4 {
  color: var(--heading);
  font-weight: 700;
  line-height: 1.2;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
}
.ar,
.basmala,
.ded-ar,
.mark,
.tl-arabic {
  font-family: "Aref Ruqaa", serif;
}
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-blobs span {
  position: absolute;
  filter: blur(54px);
  opacity: 0.32;
  animation: blobFloat 26s ease-in-out infinite;
}
.bg-blobs span:nth-child(1) {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at 32% 30%, #5e86d0, #144d9e);
  border-radius: 42% 58% 63% 37%/45% 42% 58% 55%;
  top: -150px;
  left: -130px;
}
.bg-blobs span:nth-child(2) {
  width: 430px;
  height: 430px;
  background: radial-gradient(
    circle at 60% 40%,
    #f9a20b,
    rgba(249, 162, 11, 0)
  );
  border-radius: 60% 40% 47% 53%/55% 58% 42% 45%;
  bottom: -130px;
  right: -110px;
  opacity: 0.35;
  animation-delay: -7s;
}
.bg-blobs span:nth-child(3) {
  width: 380px;
  height: 380px;
  background: radial-gradient(
    circle at 50% 50%,
    #3e6fbe,
    rgba(62, 111, 190, 0)
  );
  border-radius: 50% 50% 55% 45%/52% 48% 52% 48%;
  top: 42%;
  right: 26%;
  opacity: 0.3;
  animation-delay: -13s;
}
.bg-blobs .ink-wrap {
  position: absolute;
  will-change: transform;
  pointer-events: none;
}
.bg-blobs .ink {
  display: block;
  width: 100%;
  height: auto;
  animation: inkFloat 26s ease-in-out infinite;
}
.bg-blobs .ink-a {
  width: 230px;
  color: var(--mustard);
  opacity: 0.24;
  top: 9%;
  left: -46px;
}
.bg-blobs .ink-b {
  width: 320px;
  color: #3e6fbe;
  opacity: 0.22;
  bottom: -70px;
  right: -56px;
}
.bg-blobs .ink-b .ink {
  animation-delay: -9s;
}
.bg-blobs .ink-c {
  width: 150px;
  color: var(--mustard);
  opacity: 0.2;
  top: 44%;
  right: 13%;
}
.bg-blobs .ink-c .ink {
  animation-delay: -15s;
}
@media (max-width: 760px) {
  .bg-blobs span {
    filter: blur(38px);
    animation: none;
  }
  .bg-blobs .ink {
    animation: none;
  }
}
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.section {
  padding: 84px 0;
  position: relative;
}
.section-head {
  max-width: 720px;
  margin: 0 auto 52px;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--card-soft);
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 14px;
}
.section-head p {
  color: var(--muted);
  font-size: 16px;
}
.basmala {
  font-size: 24px;
  color: var(--brand);
  margin: 10px 0;
  direction: rtl;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  padding: 10px 32px;
  border-radius: 30px;
  border: 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
}
.btn.light,
.btn.primary,
.btn.secondary,
.btn.solid {
  background: 0 0;
  color: var(--royal);
  border: 1.4px solid var(--royal);
  box-shadow: none;
}
.btn.light:hover,
.btn.primary:hover,
.btn.secondary:hover,
.btn.solid:hover {
  background: var(--royal);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn.fill-royal {
  background: var(--royal);
  color: #fff;
  border: 1.4px solid var(--royal);
  box-shadow: 0 4px 14px rgba(20, 77, 158, 0.25);
}
.btn.fill-royal:hover {
  background: #0f3b7a;
  border-color: #0f3b7a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 59, 122, 0.32);
}
.btn.block {
  width: 100%;
}
.btn.on-blue {
  background: 0 0;
  color: #fff;
  border-color: #fff;
}
.btn.on-blue:hover {
  background: #fff;
  color: var(--royal);
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 180;
  transition: 0.3s ease;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 18px 12px 14px;
}
.nav.scrolled .nav-inner {
  padding: 8px 30px 8px 18px;
}
.hamburger.open span,
.nav,
.nav.scrolled {
  background: var(--royal);
}
.nav {
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 20px rgba(10, 44, 92, 0.28);
}
.brand,
.nav-links > li > a {
  align-items: center;
  color: #fff;
}
.brand {
  display: flex;
  gap: 9px;
  font-weight: 700;
  font-size: 18px;
}
.brand-logo {
  height: 46px;
  width: auto;
  display: block;
  transition: 0.3s ease;
}
.nav.scrolled .brand-logo {
  height: 40px;
}
.footer .brand-logo {
  height: 46px;
  margin: 0 auto;
}
.brand .mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--royal);
  color: #fff;
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 2px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-links > li > a {
  display: inline-flex;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1.3px solid transparent;
  background: 0 0;
  transition: 0.2s ease;
}
.nav-links > li > a:hover {
  color: #fff;
  background: 0 0;
  border-color: rgba(255, 255, 255, 0.9);
}
.nav-cta,
.nav-cta:hover {
  box-shadow: none !important;
}
.nav-cta {
  background: var(--mustard) !important;
  color: var(--royal) !important;
  padding: 7px 13px !important;
  border-radius: 30px !important;
  border: 1.3px solid var(--mustard) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.nav-cta:hover {
  background: #ffb22e !important;
  border-color: #ffb22e !important;
}
.dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  list-style: none;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.22s ease;
}
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li a {
  display: block;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
}
.dropdown-menu li a:hover {
  background: var(--card-soft);
  color: var(--brand);
}
.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.hamburger span {
  width: 23px;
  height: 2.5px;
  background: #fff;
  border-radius: 999px;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.18s ease,
    width 0.2s ease;
  transform-origin: center;
}
.hamburger:active {
  transform: scale(0.96);
}
.hamburger.open {
  background: linear-gradient(
    135deg,
    rgba(249, 162, 11, 0.95),
    rgba(255, 209, 102, 0.95)
  );
  box-shadow: 0 10px 24px rgba(249, 162, 11, 0.28);
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
.hero {
  padding: 152px 0 80px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 54px;
  align-items: center;
}
.hero-title {
  font-size: clamp(48px, 7.2vw, 90px);
  line-height: 0.95;
  margin-bottom: 18px;
  color: var(--heading);
}
.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 20px;
}
.chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: var(--card-soft);
  padding: 7px 14px;
  border-radius: 30px;
  transition: 0.3s ease;
}
.hero-sub {
  font-size: 16.5px;
  color: var(--body);
  max-width: 540px;
  margin-bottom: 26px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}
.socials {
  display: flex;
  gap: 12px;
}
.social-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--brand);
}
.social-icon svg {
  width: 20px;
  height: 20px;
}
.social-icon:hover {
  background: var(--brand);
  color: var(--cloud-lighter);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-frame {
  position: relative;
  width: 100%;
  max-width: 410px;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 6px solid var(--card);
  box-shadow: var(--shadow);
  background: var(--card-soft);
}
.hero-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-frame img.active {
  opacity: 1;
}
.float-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(252, 248, 242, 0.92);
  backdrop-filter: blur(6px);
  padding: 9px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.float-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
}
.float-chip.tl {
  top: 16px;
  left: 16px;
}
.float-chip.br {
  bottom: 16px;
  right: 16px;
}
.hero-frame-wrap {
  position: relative;
  width: 100%;
  max-width: 410px;
  aspect-ratio: 1/1;
  align-self: center;
}
.btn-ico {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  flex: 0 0 auto;
}
.tag-ico {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
}
.footer .heart {
  display: inline-flex;
  align-items: center;
}
.footer .heart svg {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: 0.25s ease;
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.stat-num {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.about-wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.about-quote {
  font-size: 18px;
  color: var(--body);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius);
  padding: 30px 34px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.card-grid {
  display: grid;
  gap: 22px;
}
.card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.card-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.soft-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.soft-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.soft-card .ic {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  margin-bottom: 16px;
}
.soft-card .ic svg {
  width: 30px;
  height: 30px;
}
.soft-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.edu-item p,
.soft-card p {
  color: var(--body);
}
.soft-card p {
  font-size: 14.5px;
}
.ach-card {
  position: relative;
}
.ach-medal,
.ach-year,
.maqam-list span,
.soft-card .ic {
  color: var(--brand);
  background: var(--card-soft);
}
.ach-year {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.ach-medal,
.maqam-list span {
  font-size: 13px;
}
.ach-medal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-top: 14px;
  padding: 8px 15px;
  border-radius: 24px;
}
.ach-medal svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--brand);
}
.about-cta {
  text-align: center;
  margin-top: 30px;
}
.voice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.voice-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: 0.25s ease;
}
.voice-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.maqam-list,
.vname {
  display: flex;
  gap: 9px;
}
.vname {
  align-items: center;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 12px;
  font-size: 16px;
}
.vname .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
}
.voice-card audio {
  width: 100%;
  height: 38px;
}
.maqam-list {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}
.maqam-list span {
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 30px;
}
.edu-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.edu-item {
  display: flex;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: 0.25s ease;
}
.edu-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
}
.edu-year {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--brand);
  font-size: 16px;
  min-width: 60px;
}
.edu-item p {
  font-size: 15px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 34px;
  align-items: start;
}
.contact-info .row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.contact-info .row:last-child {
  border-bottom: 0;
}
.contact-info .ic {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--card-soft);
  color: var(--brand);
  border-radius: 12px;
}
.contact-info .ic svg {
  width: 20px;
  height: 20px;
}
.contact-info .row b,
.field label {
  color: var(--heading);
  display: block;
  font-size: 14px;
}
.field label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.contact-info .row span {
  font-size: 14px;
  color: var(--muted);
  word-break: break-word;
}
.form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.field {
  margin-bottom: 15px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--cloud-lighter);
  color: var(--body);
  transition: 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 77, 158, 0.12);
}
.field textarea {
  min-height: 100px;
  resize: vertical;
}
.form-note {
  font-size: 14px;
  margin-top: 10px;
  font-weight: 600;
}
.footer {
  background: var(--brand);
  color: var(--cloud);
  padding: 54px 0 34px;
  text-align: center;
  margin-top: 40px;
}
.footer .brand {
  color: var(--cloud-lighter);
  justify-content: center;
  margin-bottom: 14px;
  font-size: 20px;
}
.footer .brand .mark,
.footer .footer-socials a:hover {
  background: var(--cloud-lighter);
  color: var(--brand);
}
.footer p {
  font-size: 14px;
  color: rgba(240, 230, 218, 0.82);
  margin: 4px 0;
}
.footer .footer-socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
}
.footer .footer-socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 230, 218, 0.4);
  color: var(--cloud);
  transition: 0.25s;
}
.footer .footer-socials a svg {
  width: 19px;
  height: 19px;
}
.footer .footer-socials a:hover {
  transform: translateY(-3px);
}
.footer .heart {
  color: #e5484d;
  font-weight: 900;
  font-size: 1.14em;
  line-height: 1;
  display: inline-block;
  vertical-align: -1px;
}
.timeline {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding-left: 8px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 6px;
  bottom: 6px;
  width: 2.5px;
  background: linear-gradient(var(--brand), rgba(20, 77, 158, 0.15));
}
.tl-item {
  position: relative;
  padding-left: 64px;
  margin-bottom: 34px;
}
.tl-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--cloud-lighter);
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 0 0 5px var(--cloud);
}
.tl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  transition: 0.25s ease;
}
.tl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.tl-arabic {
  font-size: 26px;
  color: var(--brand);
  direction: rtl;
  margin-bottom: 4px;
}
.tl-era {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-soft);
  margin-bottom: 8px;
}
.tl-card h3 {
  font-size: 19px;
  margin-bottom: 10px;
}
.tl-card p {
  font-size: 15px;
  color: var(--body);
  margin-bottom: 8px;
}
.tl-sub {
  font-size: 14.5px;
  color: var(--body);
  margin: 4px 0;
}
.tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.tl-chips span {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--card-soft);
  padding: 5px 12px;
  border-radius: 20px;
}
.tl-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 220px;
  border-radius: 14px;
  margin-top: 14px;
  border: 1px solid var(--border);
}
.dedication {
  max-width: 720px;
  margin: 64px auto 0;
  text-align: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border: 0;
  border-radius: var(--radius-lg);
  padding: 50px 40px;
  box-shadow: 0 22px 48px rgba(20, 77, 158, 0.32);
  position: relative;
  overflow: hidden;
}
.dedication::before {
  content: "❝";
  position: absolute;
  top: 8px;
  left: 26px;
  font-size: 96px;
  color: rgba(252, 248, 242, 0.13);
  line-height: 1;
}
.dedication .ded-ar {
  font-size: 34px;
  direction: rtl;
  margin-bottom: 14px;
}
.dedication .ded-ar,
.dedication h3,
.feature-list li {
  color: var(--cloud-lighter);
  position: relative;
}
.feature-list li {
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 14.5px;
  color: var(--body);
}
.dedication p {
  color: rgba(247, 240, 231, 0.92);
  font-size: 16px;
  position: relative;
}
.journey-name {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 0.98;
  color: var(--brand);
  margin: 4px 0 6px;
  text-shadow: 0 2px 0 rgba(20, 77, 158, 0.06);
}
.journey-name::after {
  content: "";
  display: block;
  width: 84px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  border-radius: 4px;
  margin: 16px auto 4px;
}
.price-group {
  margin-bottom: 50px;
}
.price-group h3 {
  font-size: 22px;
  text-align: center;
  margin-bottom: 26px;
  color: var(--heading);
}
.btn:active {
  transform: translateY(0) !important;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
.ach-card,
.price-card,
.soft-card,
.tl-card {
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.nav-links > li > a {
  letter-spacing: 0.2px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.price-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.price-card.popular {
  border: 2px solid var(--brand);
}
.price-card.unavailable {
  opacity: 0.72;
  filter: saturate(0.78);
}
.price-card.unavailable::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}
.price-card.unavailable .book-btn,
.price-card.unavailable button[disabled] {
  cursor: not-allowed;
  opacity: 0.86;
  background: #d9e1ee !important;
  color: #62708a !important;
  box-shadow: none !important;
  border-color: #d9e1ee !important;
}
.unavailable-ribbon {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 13px;
  max-width: 70%;
  background: linear-gradient(135deg, #334155, #64748b);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  text-align: center;
}
.master-card .master-unavailable {
  position: static;
  display: inline-block;
  max-width: 100%;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #f59e0b, #facc15);
  color: #09214a;
}
.feature-list li::before,
.pop-tag {
  font-size: 11px;
  background: var(--brand);
  color: var(--cloud-lighter);
}
.pop-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.pname {
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 6px;
}
.psub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  min-height: 40px;
}
.price {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.08;
}
.price .price-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.price,
.price .price-cur {
  font-weight: 700;
  color: var(--brand);
}
.price .price-cur {
  font-size: 32px;
}
.feature-list {
  list-style: none;
  margin-bottom: 22px;
  flex-grow: 1;
}
.feature-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.master-wrap {
  margin: 6px 0 50px;
}
.master-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 40px 38px;
  color: #fff;
  background: linear-gradient(135deg, #0d3470 0, #144d9e 55%, #1f63c6 100%);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 34px;
  align-items: center;
}
.master-card::before,
.master-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.master-card::before {
  content: "";
  right: -70px;
  top: -70px;
  width: 260px;
  height: 260px;
  background: radial-gradient(
    circle,
    rgba(249, 162, 11, 0.32),
    transparent 70%
  );
}
.master-glow {
  left: -50px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1),
    transparent 70%
  );
}
.master-info {
  position: relative;
  z-index: 1;
}
.master-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(90deg, #f6c14b, #f9a20b);
  color: #0d3470;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 16px;
}
.master-badge svg {
  width: 15px;
  height: 15px;
}
.master-card h3 {
  font-size: 27px;
  color: #fff;
  margin: 0 0 9px;
  text-align: left;
}
.master-card .m-sub {
  font-size: 14.5px;
  color: #cddcf3;
  margin-bottom: 20px;
  line-height: 1.65;
  max-width: 560px;
}
.master-feats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 20px;
  margin: 0;
  padding: 0;
}
.master-feats li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: #eaf1fb;
  line-height: 1.45;
}
.feature-list li::before,
.master-feats li svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
}
.master-right {
  position: relative;
  z-index: 1;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 28px 22px;
}
.master-right .mp-num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.04;
  background: linear-gradient(90deg, #f9d77e, #f9a20b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.master-right .mp-per {
  font-size: 14px;
  color: #cddcf3;
  margin: 8px 0 2px;
}
.master-right .mp-meta {
  font-size: 13px;
  color: #aebfdc;
  margin-bottom: 20px;
}
@media (max-width: 760px) {
  .master-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 22px;
  }
  .master-card h3 {
    font-size: 23px;
  }
  .master-card .m-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .master-card h3,
  .master-info {
    text-align: center;
  }
  .master-feats {
    grid-template-columns: 1fr;
    text-align: left;
    max-width: 330px;
    margin: 0 auto;
  }
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 44, 92, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal.open {
  display: flex;
}
.modal-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  position: relative;
}
.modal-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
}
.modal-close,
.month-step button:hover,
.sel-service {
  background: var(--card-soft);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--heading);
  cursor: pointer;
  transition: 0.2s;
}
.modal-close:hover {
  background: var(--brand);
  color: var(--cloud-lighter);
}
.sel-service {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.sel-service .sp {
  font-size: 20px;
  margin-top: 4px;
}
.receipt {
  background: var(--cloud-lighter);
  border: 1px dashed var(--border-strong);
}
.rno,
.sel-service .sp {
  font-weight: 700;
  color: var(--brand);
}
.rno {
  letter-spacing: 0.5px;
}
.rrow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--body);
}
.rrow span:first-child {
  color: var(--muted);
}
.rtotal {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  border-top: 1.5px solid var(--border);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
}
.status-pill.unpaid {
  background: rgba(176, 58, 46, 0.12);
  color: #a8392e;
}
.status-pill.paid {
  background: rgba(22, 125, 60, 0.14);
  color: #15803d;
}
.status-pill.free {
  background: rgba(245, 158, 11, 0.16);
}
.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.receipt-actions .btn {
  flex: 1;
  min-width: 130px;
  font-size: 14px;
  padding: 11px 14px;
}
.verify-box {
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.verify-row {
  display: flex;
  gap: 10px;
}
.verify-row input {
  flex: 1;
}
.coming-soon,
.verify-result {
  border: 1px solid var(--border);
}
.verify-result {
  margin-top: 20px;
  padding: 20px;
  border-radius: 14px;
  background: var(--cloud-lighter);
  display: none;
}
.verify-result.show {
  display: block;
}
.verify-result .big {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.coming-soon {
  max-width: 620px;
  margin: 120px auto;
  text-align: center;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  box-shadow: var(--shadow);
}
.coming-soon .emoji {
  margin-bottom: 20px;
  color: var(--brand);
  display: flex;
  justify-content: center;
}
.coming-soon .emoji svg {
  width: 96px;
  height: 96px;
}
.coming-soon h1 {
  font-size: clamp(32px, 5vw, 46px);
  margin-bottom: 14px;
}
.coming-soon p {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 26px;
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  background: var(--mustard);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(249, 162, 11, 0.45);
  z-index: 300;
  transition: width 0.1s linear;
}
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js .reveal.sab-up {
  transform: translateY(36px);
}
html.js .reveal.sab-left {
  transform: translateX(-44px);
}
html.js .reveal.sab-right {
  transform: translateX(44px);
}
html.js .reveal.sab-zoom {
  transform: scale(0.92);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (max-width: 960px) {
  .nav-inner {
    justify-content: flex-start;
    position: relative;
  }
  .hamburger {
    display: flex;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 260;
  }
  .hamburger:active {
    transform: translateY(-50%) scale(0.96);
  }
  .nav-links {
    position: fixed;
    top: var(
      --sab-menu-top,
      calc(var(--sab-top-offset, 0px) + var(--sab-nav-height, 68px) + 0px)
    );
    left: 50%;
    right: auto;
    width: min(360px, calc(100vw - 34px));
    max-height: calc(
      100vh -
        var(
          --sab-menu-top,
          calc(var(--sab-top-offset, 0px) + var(--sab-nav-height, 68px) + 0px)
        ) -
        18px
    );
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.99),
      rgba(247, 250, 254, 0.97)
    );
    padding: 15px;
    border-radius: 24px;
    border: 1px solid rgba(223, 231, 243, 0.96);
    box-shadow:
      0 26px 66px rgba(8, 37, 82, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform-origin: top center;
    transform: translate3d(-50%, -12px, 0) scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform, opacity;
    transition:
      transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.16s ease,
      visibility 0.22s;
    z-index: 240;
  }
  .nav.menu-open::after {
    content: "";
    position: fixed;
    inset: var(
        --sab-menu-backdrop-top,
        calc(var(--sab-top-offset, 0px) + var(--sab-nav-height, 68px))
      )
      0 0;
    background: rgba(8, 37, 82, 0.26);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 220;
  }
  .nav-links.open {
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links > li > a {
    color: var(--heading);
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 3px 10px rgba(15, 59, 122, 0.04);
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 11px 13px;
    border-radius: 14px;
    font-weight: 750;
  }
  .nav-links > li > a.active,
  .nav-links > li > a:focus,
  .nav-links > li > a:hover,
  .nav-links > li > a[aria-current="page"],
  .nav-links > li > a[aria-current="true"] {
    color: var(--royal);
    border-color: rgba(20, 77, 158, 0.18);
    background: #eef5ff;
    box-shadow:
      inset 0 0 0 1px rgba(20, 77, 158, 0.06),
      0 7px 16px rgba(20, 77, 158, 0.09);
  }
  .nav-links > li > a.active::before,
  .nav-links > li > a[aria-current="page"]::before,
  .nav-links > li > a[aria-current="true"]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mustard);
    box-shadow: 0 0 0 4px rgba(249, 162, 11, 0.16);
  }
  .nav-cta {
    background: linear-gradient(135deg, var(--mustard), #ffd166) !important;
    color: var(--royal) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(249, 162, 11, 0.22) !important;
  }
  .brand-logo {
    height: 36px;
  }
  .nav-links > li {
    width: 100%;
    text-align: center;
  }
  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 6px;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: 0 0;
  }
  .dropdown.open .dropdown-menu {
    max-height: 320px;
    margin-top: 5px;
  }
  .dropdown-menu li a {
    background: rgba(20, 77, 158, 0.06);
    margin: 5px 0;
    border-radius: 12px;
    color: #26344f;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .cta-row,
  .role-chips,
  .hero-typer,
  .socials {
    justify-content: center;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-media {
    order: -1;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid.cols-2,
  .card-grid.cols-3,
  .price-grid {
    grid-template-columns: 1fr 1fr;
  }
  .voice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .section {
    padding: 60px 0;
  }
  .container {
    padding: 0 20px;
  }
  .card-grid.cols-2,
  .card-grid.cols-3,
  .price-grid,
  .stat-grid,
  .voice-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 110px 0 60px;
  }
  .float-chip.tl {
    top: 12px;
    left: 12px;
  }
  .float-chip.br {
    bottom: 12px;
    right: 12px;
  }
  .edu-item {
    flex-direction: column;
    gap: 6px;
  }
  .receipt-actions .btn {
    min-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
.master-card .master-btn {
  background: 0 0;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 800;
  box-shadow: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.master-card .master-btn:active,
.master-card .master-btn:focus,
.master-card .master-btn:hover {
  background: #0d3470;
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}
.sale-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 190;
  display: none;
  background: linear-gradient(90deg, #7a1020, #b3122b 45%, #e0123c);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
body.has-sale .sale-bar {
  display: block;
}
.sale-bar-inner,
.trial-card .trial-feats li::before {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sale-bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5px 16px;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.sale-text {
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 12.5px;
  text-transform: uppercase;
}
.flip-clock {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.sale-cta {
  background: #fff;
  color: #b3122b;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 13px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.sale-cta:hover {
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .sale-text {
    font-size: 12px;
  }
  .sale-bar-inner {
    gap: 8px;
    padding: 5px 12px;
  }
  .sale-badge,
  .sale-cta {
    font-size: 11.5px;
  }
  .sale-cta {
    padding: 5px 12px;
  }
}
#pricing-top .container,
.price-card.on-sale {
  position: relative;
}
.price-card.on-sale .sale-ribbon {
  position: absolute;
  top: 12px;
  right: -2px;
  background: #e0123c;
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
  padding: 6px 17px 6px 19px;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 4px 11px rgba(224, 18, 60, 0.42);
  letter-spacing: 0.5px;
}
.master-card .mp-num .mp-old {
  text-decoration: line-through;
  font-weight: 600;
  opacity: 0.85;
  font-size: 19px;
  -webkit-text-fill-color: #cdd8ee;
  color: #cdd8ee;
}
.price .price-old {
  text-decoration: line-through;
  color: #9aa6bd;
  font-size: 17px;
  font-weight: 600;
}
.price .price-new {
  color: #e0123c;
  font-size: 32px;
  font-weight: 800;
}
.master-card .mp-num .mp-new {
  -webkit-text-fill-color: #ffd77e;
  color: #ffd77e;
  font-size: 44px;
  white-space: nowrap;
}
.bill-wrap {
  text-align: center;
  margin: 6px auto 26px;
}
.bill-head {
  font-family: var(--display, inherit);
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 800;
  color: var(--heading, #0b2447);
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}
.bill-head .bh-accent {
  color: var(--royal, #0b3d8f);
}
.bill-toggle,
.bt-opt {
  display: inline-flex;
  justify-content: center;
}
.bill-toggle {
  width: max-content;
  max-width: 100%;
  margin: 14px auto 10px;
  gap: 5px;
  padding: 6px;
  background: linear-gradient(180deg, #f4f7fc, #e9eff8);
  border: 1px solid #dde6f3;
  border-radius: 16px;
  flex-wrap: wrap;
  box-shadow:
    inset 0 1px 2px rgba(15, 59, 122, 0.06),
    0 6px 18px rgba(15, 59, 122, 0.07);
}
.bt-opt {
  position: relative;
  border: 0;
  background: 0 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  color: #46546e;
  padding: 9px 20px;
  min-height: 50px;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.15;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.bt-opt .bt-main {
  font-weight: 800;
}
.bt-opt .bt-save {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #0f7a37;
  background: #dcf3e3;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.bt-opt .bt-save-sale {
  color: #fff;
  background: #e0123c;
}
.bt-opt:hover {
  color: #0b3d8f;
  transform: translateY(-1px);
}
.bt-opt.active {
  background: #fff;
  color: #0b3d8f;
  box-shadow: 0 4px 14px rgba(15, 59, 122, 0.18);
}
.bt-opt.active .bt-save {
  background: #0f7a37;
  color: #fff;
}
.bt-opt.active .bt-save-sale {
  background: #e0123c;
  color: #fff;
}
.bill-note-line {
  font-size: 13px;
  color: #6b7891;
  margin: 4px auto 0;
  max-width: 520px;
}
.price .price-per {
  color: #9aa6bd;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.bill-save,
.master-right .mp-savenote {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 8px;
}
.bill-save {
  color: #0f7a37;
  margin-top: 2px;
  background: rgba(21, 128, 61, 0.1);
  padding: 3px 10px;
}
.master-card .mp-per .mp-save {
  color: #f9c04b;
  font-weight: 800;
  margin-left: 4px;
}
.master-right .mp-savenote {
  margin-top: 9px;
  color: #7cf0a8;
  background: rgba(124, 240, 168, 0.15);
  padding: 4px 11px;
}
@media (max-width: 600px) {
  .bt-opt {
    padding: 8px 13px;
    font-size: 13px;
  }
  .bt-opt i {
    font-size: 10px;
  }
}
.sale-badge {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: none;
}
.cd-ended {
  font-weight: 800;
  font-size: 12.5px;
  text-transform: none;
}
@media (max-width: 600px) {
  .sale-bar-inner {
    gap: 8px;
    padding: 7px 12px;
  }
  .sale-text {
    font-size: 11px;
  }
  .sale-badge {
    font-size: 12px;
    padding: 2px 9px;
  }
}
.sel-service .sp .sp-old {
  text-decoration: line-through;
  color: #9aa6bd;
  font-size: 0.7em;
  font-weight: 600;
  margin-right: 6px;
}
.sel-service .sp .sp-new {
  color: #e0123c;
  font-size: 1em;
  font-weight: 800;
}
.coupon-row {
  display: flex;
  gap: 8px;
  margin: 4px 0 2px;
}
.coupon-row input {
  flex: 1;
  text-transform: uppercase;
}
.coupon-row .coupon-btn {
  white-space: nowrap;
  padding: 0 16px;
  border-radius: 12px;
  border: 2px solid var(--royal);
  background: #fff;
  color: var(--royal);
  font-weight: 700;
  cursor: pointer;
}
.coupon-row .coupon-btn:hover {
  background: var(--royal);
  color: #fff;
}
.coupon-note {
  font-size: 12.5px;
  margin: 2px 0 6px;
  min-height: 16px;
}
.coupon-note.ok {
  color: #15803d;
  font-weight: 600;
}
.coupon-note.bad {
  color: #a8392e;
  font-weight: 600;
}
.feat-permonth b,
.refer-note-id b {
  color: var(--royal);
}
.price-card .feat-permonth {
  font-weight: 600;
}
.trial-card {
  background: linear-gradient(135deg, #0f3b7a 0, #144d9e 48%, #3e6fbe 100%);
}
.gopt input,
.trial-card::after {
  position: absolute;
  pointer-events: none;
}
.trial-card::after {
  background: radial-gradient(
    circle,
    rgba(249, 162, 11, 0.55),
    rgba(249, 162, 11, 0) 70%
  );
  content: "";
  top: -70px;
  right: -60px;
  width: 250px;
  height: 250px;
  background: radial-gradient(
    circle,
    rgba(249, 162, 11, 0.4),
    rgba(249, 162, 11, 0) 70%
  );
}
.trial-card h3 {
  color: #fff;
  font-size: 26px;
  margin: 0 0 9px;
  text-align: left;
}
.trial-price {
  align-items: baseline;
  margin: 6px 0 12px;
}
.trial-card .trial-feats li {
  color: rgba(255, 255, 255, 0.95);
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: #eaf1fb;
  line-height: 1.45;
}
.trial-card .trial-feats li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--mustard);
  color: #3a2600;
  font-size: 12px;
  font-weight: 800;
  content: none;
}
.trial-card .book-btn.trial-btn {
  color: var(--brand-dark);
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  color: var(--royal, #144d9e);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.trial-card .book-btn.trial-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
}
.gender-opts,
.trial-price {
  display: flex;
  gap: 10px;
}
.gopt {
  flex: 1;
  position: relative;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--body);
  background: var(--card);
  transition: all 0.18s ease;
  user-select: none;
}
.gopt input {
  opacity: 0;
}
.gopt:has(input:checked),
.kopt:has(input:checked) {
  border-color: var(--royal);
  background: var(--card-soft);
  color: var(--heading);
  box-shadow: 0 6px 14px rgba(20, 77, 158, 0.16);
}
.gopt.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.avail-note {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.av-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.av-chip.on {
  background: rgba(47, 158, 95, 0.14);
  color: #2f9e5f;
}
.av-chip.off {
  background: rgba(196, 61, 107, 0.12);
  color: #c43d6b;
}
.month-step {
  display: flex;
  align-items: center;
  gap: 14px;
}
.month-step button {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1.5px solid var(--border-strong);
  background: var(--card);
  font-size: 22px;
  font-weight: 700;
  color: var(--royal);
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}
.month-step .ms-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--heading);
  min-width: 104px;
  text-align: center;
}
.ms-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
.wa-note {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--royal);
  margin-bottom: 5px;
}
.refer-card .field .req,
.wa-note .req {
  color: #c43d6b;
}
.opt-tag {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--muted);
}
.phone-err {
  color: #c43d6b;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
  min-height: 1px;
}
.status-pill.free {
  background: rgba(47, 158, 95, 0.14);
  color: #2f9e5f;
}
.sp-free {
  font-size: 13px;
  font-weight: 600;
  color: var(--mustard);
}
.reviews-section {
  margin-top: 18px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}
.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.rv-ava,
.rv-top {
  display: flex;
  align-items: center;
}
.rv-top {
  gap: 12px;
  margin-bottom: 10px;
}
.rv-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--royal), var(--brand-dark));
  font-size: 18px;
}
.rv-name {
  font-weight: 700;
  color: var(--heading);
  font-size: 14.5px;
}
.rv-loc {
  font-size: 12px;
  color: var(--muted);
}
.rv-stars {
  color: #d9d6e3;
  font-size: 16px;
  letter-spacing: 2px;
}
.rv-stars .on,
.star-input button.on {
  color: var(--mustard);
}
.rv-topic {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--royal);
  margin: 8px 0 4px;
}
.rv-text {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.6;
}
.reviews-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  padding: 10px 0 26px;
}
.review-form {
  max-width: 620px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.review-form h4 {
  font-size: 18px;
  margin-bottom: 4px;
  text-align: center;
}
.refer-card .field input,
.review-form input,
.review-form select,
.review-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--cloud-lighter);
  color: var(--body);
}
.review-form textarea {
  min-height: 96px;
  resize: vertical;
}
.star-input {
  display: flex;
  gap: 5px;
  margin: 4px 0 2px;
}
.star-input button {
  background: 0 0;
  border: 0;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: #d9d6e3;
  transition: color 0.12s ease;
  padding: 0;
}
.review-note {
  text-align: center;
  font-size: 13px;
  margin-top: 12px;
  min-height: 1px;
}
.rv-kind {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kopt {
  flex: 1;
  min-width: 92px;
  position: relative;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  padding: 11px 10px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--body);
  background: var(--card);
  transition: all 0.18s ease;
  user-select: none;
}
.kopt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rv-cond {
  animation: rvFade 0.2s ease;
}
.gopt,
.gopt-ico {
  align-items: center;
  justify-content: center;
}
.gopt {
  display: flex;
  gap: 7px;
}
.gopt-ico {
  display: inline-flex;
  color: var(--muted);
  transition: color 0.18s ease;
}
.gopt-ico svg {
  width: 19px;
  height: 19px;
  display: block;
}
.gopt:has(input[value="Female"]:checked) .gopt-ico {
  color: #c2477e;
}
.gopt:has(input[value="Male"]:checked) .gopt-ico {
  color: var(--royal);
}
.rv-ava svg {
  width: 24px;
  height: 24px;
  display: block;
}
.rv-ava.female {
  background: linear-gradient(135deg, #e06aa0, #b83d77);
}
.rv-ava.male {
  background: linear-gradient(135deg, var(--royal), var(--brand-dark));
}
.faq-section {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--heading);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--royal);
  font-weight: 400;
  flex: none;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item .faq-a {
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--body);
  line-height: 1.65;
}
.trial-wrap {
  max-width: 980px;
  margin: 6px auto 40px;
}
.trial-card {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 34px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 38px 36px;
  color: #fff;
  background: linear-gradient(135deg, #0d3470 0, #144d9e 52%, #2f6fcf 100%);
  box-shadow: 0 26px 60px rgba(20, 77, 158, 0.4);
  border: 1.6px solid rgba(249, 162, 11, 0.55);
}
.trial-info,
.trial-right {
  position: relative;
  z-index: 1;
}
.trial-right {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 26px 22px;
}
.trial-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(90deg, #f6c14b, #f9a20b);
  color: #0d3470;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 14px;
}
.trial-card .trial-sub {
  font-size: 14.5px;
  color: #cddcf3;
  margin: 0 0 16px;
  line-height: 1.6;
  max-width: 540px;
}
.trial-subjects {
  margin: 0 0 16px;
}
.trial-slabel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #aebfdc;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.trial-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trial-chip {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 13px;
  border-radius: 999px;
}
.trial-card .trial-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.trial-card .trial-feats li svg {
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: #eafaf0;
  border-radius: 50%;
  padding: 2px;
  box-sizing: border-box;
}
.trial-right .trial-price {
  display: block;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  background: linear-gradient(90deg, #f9d77e, #f9a20b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trial-right .trial-per {
  font-size: 14px;
  color: #cddcf3;
  margin: 8px 0 18px;
}
.trial-right .trial-note {
  font-size: 12px;
  color: #aebfdc;
  margin: 14px 0 0;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .trial-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 22px;
  }
  .trial-card h3 {
    font-size: 23px;
  }
  .trial-card .trial-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .trial-card h3,
  .trial-info {
    text-align: center;
  }
  .trial-chips {
    justify-content: center;
  }
  .trial-card .trial-feats {
    text-align: left;
    max-width: 340px;
    margin: 0 auto;
  }
}
.refer-section .section-head {
  margin-bottom: 8px;
}
.refer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  max-width: 980px;
  margin: 24px auto 0;
  align-items: start;
}
.refer-how {
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.refer-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.refer-steps li,
.so-feats li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.so-feats li {
  gap: 10px;
  color: var(--body);
  font-weight: 500;
}
.refer-steps .refn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--royal), var(--brand-dark));
  font-size: 15px;
}
.refer-steps li > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.refer-steps li b {
  color: var(--heading);
  font-size: 15px;
}
.book-tip span {
  color: var(--body);
  font-size: 12.7px;
  line-height: 1.5;
}
.refer-steps li span {
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
}
.refer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.refer-card .field {
  margin-bottom: 14px;
}
.refer-card .field > label {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--heading);
  margin-bottom: 7px;
}
.refer-row {
  display: flex;
  gap: 8px;
}
.refer-row input {
  flex: 1;
  text-transform: uppercase;
}
.refer-row .btn {
  white-space: nowrap;
}
.refer-status {
  font-size: 13px;
  margin-top: 10px;
  min-height: 1px;
  line-height: 1.5;
}
.refer-status.bad,
.refer-status.ok,
.refer-status.warn {
  font-weight: 600;
}
.refer-form {
  margin-top: 6px;
  display: grid;
  gap: 12px;
}
.refer-note {
  text-align: center;
  font-size: 13px;
  min-height: 1px;
}
.refer-fine {
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .refer-grid {
    grid-template-columns: 1fr;
  }
}
.nav-sale-dot {
  display: inline-block;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #e0123c, #f9a20b);
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  animation: navSalePulse 1.9s ease-in-out infinite;
}
.rcpt-foot b,
a.nav-sale-on {
  color: var(--royal);
  font-weight: 700;
}
.reviews-section .review-form-wrap,
.reviews-section .review-form-wrap h3 {
  text-align: center;
}
.reviews-section .review-form-wrap .review-form {
  text-align: left;
}
.so-section {
  padding-top: 10px;
}
.so-pricing {
  margin: 4px 0 30px;
}
.so-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(135deg, #fff 0%, var(--card-soft) 100%);
  border: 1.5px solid var(--mustard);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: 0 20px 50px -24px rgba(20, 77, 158, 0.5);
  overflow: hidden;
}
.so-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--mustard), rgba(20, 77, 158, 0.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.so-main {
  position: relative;
  z-index: 1;
}
.so-badge {
  display: inline-block;
  background: var(--mustard);
  color: #3a2a00;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
}
.so-title {
  color: var(--heading);
  margin: 0 0 8px;
  font-size: 1.7rem;
  line-height: 1.2;
}
.so-desc {
  color: var(--body);
  margin: 0 0 16px;
  max-width: 52ch;
}
.so-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.so-feats li svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
}
.so-side {
  position: relative;
  z-index: 1;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.so-price {
  color: var(--royal);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
}
.so-dur {
  color: var(--muted);
  font-weight: 600;
  margin-top: 8px;
}
.so-btn {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .so-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
  }
  .so-title {
    font-size: 1.4rem;
  }
  .so-side {
    padding: 20px 16px;
  }
}
.footer-contactcol span,
.plans-root {
  display: block;
}
.plans-loading,
.sid-otp #sidOtp {
  font-weight: 600;
  text-align: center;
}
.plans-loading {
  color: var(--muted);
  padding: 46px 0;
}
.so-gender,
.so-slots {
  font-weight: 700;
  color: var(--royal);
}
.so-slots {
  margin-top: 10px;
  font-size: 0.95rem;
}
.so-slots.sold-out {
  color: #c43d6b;
}
.so-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.reviews-section .review-form-wrap h3 {
  margin-bottom: 22px;
}
.so-gender {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: rgba(20, 77, 158, 0.08);
  border: 1px solid rgba(20, 77, 158, 0.22);
}
.so-gender svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.so-gender-females {
  color: #b03a76;
  background: rgba(196, 61, 107, 0.09);
  border-color: rgba(196, 61, 107, 0.25);
}
.so-gender-males {
  color: var(--royal);
  background: rgba(20, 77, 158, 0.08);
  border-color: rgba(20, 77, 158, 0.22);
}
.price-card.master-card {
  border: 0;
  display: grid;
  text-align: left;
}
.so-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.so-badges .so-badge {
  margin-bottom: 0;
}
.so-badges .so-gender {
  margin: 0;
}
.refer-note-id {
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
  background: rgba(20, 77, 158, 0.06);
  border: 1px solid rgba(20, 77, 158, 0.16);
  border-radius: 12px;
  padding: 11px 14px;
  margin: 14px 0 8px;
}
.rcpt-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.rcpt-flag,
.rcpt-ico {
  flex: 0 0 auto;
  color: var(--royal);
}
.rcpt-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--card-soft);
}
.rcpt-ico svg {
  width: 25px;
  height: 25px;
}
.rcpt-ico.sm {
  display: inline-grid;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  vertical-align: middle;
}
.rcpt-ico.sm svg {
  width: 18px;
  height: 18px;
}
.rcpt-head.confirmed .rcpt-ico,
.rcpt-ico.sm.confirmed {
  background: rgba(20, 77, 158, 0.12);
  color: var(--royal);
}
.rcpt-head.reserved .rcpt-ico,
.rcpt-ico.sm.reserved {
  background: rgba(249, 162, 11, 0.16);
  color: #b45309;
}
.rcpt-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(20, 77, 158, 0.1);
  border: 1px solid rgba(20, 77, 158, 0.22);
}
.rcpt-flag svg {
  width: 14px;
  height: 14px;
}
.rcpt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
}
@media (max-width: 560px) {
  .rcpt-head {
    flex-wrap: wrap;
  }
  .rcpt-flag {
    order: 3;
  }
}
.sid-box {
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 18px 44px rgba(20, 77, 158, 0.08);
}
.sid-row {
  display: flex;
  gap: 10px;
}
.sid-row input {
  flex: 1;
  min-width: 0;
}
.sid-otp {
  margin-top: 16px;
}
.sid-otp #sidOtp {
  letter-spacing: 8px;
  font-family: "Poppins", monospace;
}
.sid-resend {
  background: 0 0;
  border: 0;
  color: var(--royal);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  padding: 4px 2px;
  text-decoration: underline;
}
.sid-msg {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
}
.sid-msg.ok {
  color: #15803d;
}
.sid-msg.bad {
  color: #c43d6b;
}
.sid-result {
  margin-top: 6px;
}
.sid-card {
  margin-top: 18px;
  text-align: center;
  border: 2px dashed var(--mustard);
  border-radius: 18px;
  padding: 26px 20px;
  background: var(--card-soft);
}
.sid-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #15803d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.sid-ico svg {
  width: 24px;
  height: 24px;
}
.sid-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--royal);
  font-weight: 700;
}
.sid-value {
  font-family: "Poppins", monospace;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--heading);
  margin-top: 6px;
}
.sid-name {
  font-size: 14px;
  color: var(--body);
  margin-top: 4px;
}
.sid-emailed {
  font-size: 13px;
  color: #15803d;
  margin-top: 10px;
  font-weight: 600;
}
.rcpt-sidnote,
.sid-fine {
  font-size: 12px;
  line-height: 1.6;
}
.sid-fine {
  color: var(--muted);
  margin-top: 16px;
  text-align: center;
}
.rcpt-sidnote {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf6ee;
  color: #15803d;
}
@media (max-width: 560px) {
  .sid-row {
    flex-direction: column;
  }
  .sid-value {
    font-size: 26px;
    letter-spacing: 3px;
  }
}
.class-access-card {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto 34px;
  padding: 26px 28px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(20, 77, 158, 0.07),
    rgba(249, 162, 11, 0.07)
  );
  border: 1px solid rgba(20, 77, 158, 0.18);
  box-shadow: 0 16px 40px rgba(20, 77, 158, 0.1);
}
.cac-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(249, 162, 11, 0.22),
    transparent 70%
  );
  pointer-events: none;
}
.cac-head {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 10px;
}
.cac-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--royal);
  background: rgba(20, 77, 158, 0.12);
  border: 1px solid rgba(20, 77, 158, 0.22);
  padding: 6px 13px;
  border-radius: 999px;
}
.cac-badge svg {
  width: 15px;
  height: 15px;
}
.cac-title,
.svc-home-card h3 {
  line-height: 1.25;
  color: var(--heading);
}
.cac-title {
  font-size: 24px;
  margin: 0;
  font-weight: 800;
}
.cac-text b,
.cac-title b,
.so-feats li svg,
.svc-home-card p b {
  color: var(--royal);
}
.cac-text,
.svc-home-card p {
  line-height: 1.7;
  color: var(--body);
}
.cac-text {
  position: relative;
  font-size: 15px;
  margin: 0 0 18px;
  max-width: 620px;
}
.cac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cac-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(20, 77, 158, 0.06);
}
.cac-ico {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.cac-ico svg {
  width: 18px;
  height: 18px;
}
.cac-chip.female .cac-ico {
  background: rgba(216, 27, 96, 0.12);
  color: #c2185b;
}
.cac-chip.male .cac-ico {
  background: rgba(20, 77, 158, 0.12);
  color: var(--royal);
}
@media (max-width: 560px) {
  .class-access-card {
    padding: 22px 20px;
  }
  .cac-title {
    font-size: 21px;
  }
  .cac-chip {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.svc-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.svc-home-card {
  position: relative;
  padding: 30px 28px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(20, 77, 158, 0.08);
  display: flex;
  flex-direction: column;
}
.svc-home-card.quran {
  background: linear-gradient(
    160deg,
    rgba(20, 77, 158, 0.06),
    rgba(249, 162, 11, 0.05)
  );
  border-color: rgba(20, 77, 158, 0.18);
}
.svc-home-ic {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(20, 77, 158, 0.1);
  color: var(--royal);
  margin-bottom: 16px;
}
.svc-home-ic svg {
  width: 28px;
  height: 28px;
}
.svc-home-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 6px;
}
.svc-home-card h3 {
  font-size: 21px;
  margin: 0 0 10px;
}
.svc-home-card p {
  font-size: 14.5px;
  margin: 0 0 20px;
  flex: 1 1 auto;
}
.svc-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.svc-trial-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 14px;
  color: #7a4f02;
  background: linear-gradient(135deg, #fbc34a, #f9a20b);
  border: 0;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(249, 162, 11, 0.32);
}
.svc-trial-pill svg {
  width: 16px;
  height: 16px;
}
.svc-trial-pill:hover {
  filter: brightness(1.04);
}
@media (max-width: 760px) {
  .svc-home-grid {
    grid-template-columns: 1fr;
  }
}
.faq-link,
.legal-card a {
  color: var(--royal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.field input,
.field select,
.field textarea,
iframe,
img,
svg,
table,
video {
  max-width: 100%;
}
* {
  overflow-wrap: break-word;
}
.container {
  overflow-x: clip;
}
.book-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(20, 77, 158, 0.07);
  border: 1px solid rgba(20, 77, 158, 0.18);
  border-radius: 12px;
  padding: 11px 13px;
  margin: -4px 0 15px;
}
.book-tip svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.book-tip b,
.gen-link-tx b {
  color: var(--heading);
  font-weight: 700;
}
.gen-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  background: var(--card, #fff);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--mustard, #f9a20b);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 26px rgba(20, 77, 158, 0.08);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.gen-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(20, 77, 158, 0.14);
}
.book-tip svg,
.gen-link-ic {
  flex-shrink: 0;
  color: var(--royal);
}
.gen-link-ic {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(20, 77, 158, 0.1);
}
.gen-link-ic svg {
  width: 24px;
  height: 24px;
}
.gen-link-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gen-link-tx b {
  font-size: 15.5px;
}
.gen-link-tx small {
  font-size: 12.8px;
  color: var(--muted);
  line-height: 1.45;
}
.gen-link-arrow {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--royal);
}
.gen-link-arrow svg {
  width: 22px;
  height: 22px;
}
.gen-tool {
  max-width: 560px;
  margin: 8px auto 0;
  background: var(--card, #fff);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 14px 40px rgba(20, 77, 158, 0.1);
}
.gt-hint {
  display: block;
  font-size: 11.7px;
  color: var(--muted);
  margin-top: 5px;
}
.gt-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(249, 162, 11, 0.1);
  border: 1px solid rgba(249, 162, 11, 0.32);
  border-radius: 13px;
  padding: 14px 16px;
  margin: 6px 0 14px;
}
.gt-price-lbl {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gt-price-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand, #0f3b7a);
  line-height: 1;
}
.gt-price-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-left: auto;
}
.gt-price-empty {
  font-size: 13.5px;
  color: var(--muted);
}
.gt-err {
  color: #a8392e;
  font-size: 13px;
  font-weight: 600;
  min-height: 0;
  margin: 0 0 10px;
}
.gt-err:empty {
  display: none;
}
.gt-preview {
  margin-top: 24px;
}
.gt-receipt {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: var(--cloud-lighter, #fbf8f2);
}
.gt-rhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.gt-rtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.gt-rno {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand, #0f3b7a);
}
.gt-feat {
  margin: 10px 0 0;
  padding-left: 18px;
}
.gt-feat li {
  font-size: 13px;
  color: var(--body);
  margin-bottom: 3px;
}
.gt-rdate {
  font-size: 11.7px;
  color: var(--muted);
  text-align: right;
  margin-top: 12px;
}
.gt-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.gt-actions .btn {
  flex: 1;
  min-width: 150px;
  justify-content: center;
}
@media (max-width: 560px) {
  .gen-tool {
    padding: 18px;
  }
  .gt-actions .btn {
    min-width: 100%;
  }
  .gen-link {
    flex-wrap: wrap;
  }
  .gen-link-arrow {
    display: none;
  }
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: 0 0;
  border: 1.5px solid rgba(20, 77, 158, 0.35);
  color: var(--royal, #144d9e);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 1rem;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s;
  font-family: inherit;
  text-decoration: none;
}
.btn-back svg,
.site-footer .footer-socials a svg {
  width: 18px;
  height: 18px;
}
.btn-back:hover {
  background: rgba(20, 77, 158, 0.08);
  border-color: rgba(20, 77, 158, 0.6);
}
.btn-back:active {
  transform: translateY(1px);
}
.btn-back.wide {
  width: 100%;
  justify-content: center;
  margin-bottom: 0;
}
.portal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.4rem;
}
.portal-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(20, 77, 158, 0.07);
  border: 1.5px solid rgba(20, 77, 158, 0.22);
  color: var(--royal, #144d9e);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.1s;
}
.portal-chip:hover {
  background: rgba(20, 77, 158, 0.14);
  transform: translateY(-1px);
}
.news-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 195;
  background: linear-gradient(90deg, #0c2f63, #144d9e 50%, #0c2f63);
  color: #fff;
  box-shadow: 0 2px 10px rgba(12, 47, 99, 0.28);
  border-bottom: 1px solid rgba(249, 162, 11, 0.38);
}
.news-ticker::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(249, 162, 11, 0.55),
    transparent
  );
  pointer-events: none;
}
.news-ticker-inner {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  min-height: 22px;
}
.news-ticker.nt-label-right .nt-label {
  order: 2;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.13);
}
.news-ticker.nt-label-right .nt-viewport {
  order: 1;
}
.news-ticker.nt-label-hidden .nt-label {
  display: none !important;
}
.nt-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #f9a20b, #e08f00);
  color: #12305e;
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0 11px;
  white-space: nowrap;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.25);
}
.nt-track,
.nt-viewport {
  display: flex;
  align-items: center;
}
.nt-viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 2px 0;
  min-width: 0;
}
.nt-track {
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.nt-item,
.nt-segment {
  display: inline-flex;
  align-items: center;
}
.nt-segment {
  flex: 0 0 auto;
  min-width: max-content;
}
.news-ticker.nt-move-rtl .nt-track {
  animation-name: ntScrollRTL;
}
.news-ticker.nt-move-ltr .nt-track {
  animation-name: ntScrollLTR;
}
.nt-item {
  gap: 6px;
  padding: 0 7px;
  font-size: 11.5px;
  line-height: 1.18;
  color: #fff;
  font-weight: 600;
  text-shadow: none;
}
.nt-ico {
  font-size: 12px;
  line-height: 1;
}
.nt-title {
  font-weight: 600;
  color: #fff;
}
.nt-sep {
  opacity: 0.65;
  margin: 0 1px;
  color: rgba(255, 255, 255, 0.76);
}
.nt-msg {
  font-weight: 600;
  opacity: 0.96;
}
.nt-gap {
  opacity: 0.42;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.75);
}
.nt-link {
  color: #fff;
  text-decoration: none;
}
.nt-link:hover .nt-msg,
.nt-link:hover .nt-title {
  text-decoration: underline;
}
.nt-item[dir="rtl"] {
  font-family:
    "Sakkal Majalla", "Traditional Arabic", "Amiri", "Noto Naskh Arabic",
    "Geeza Pro", "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
}
.nt-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: 2px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.nt-date svg {
  width: 9px;
  height: 9px;
  opacity: 0.95;
}
.nt-item[dir="rtl"] .nt-date {
  font-family: Poppins, Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .news-ticker-inner {
    min-height: 19px;
  }
  .nt-viewport {
    padding: 1px 0;
  }
  .nt-item {
    font-size: 10.5px;
    gap: 5px;
    padding: 0 6px;
    line-height: 1.12;
    font-weight: 600;
  }
  .nt-item[dir="rtl"] {
    font-family:
      "Sakkal Majalla", "Traditional Arabic", "Amiri", "Noto Naskh Arabic",
      "Geeza Pro", "Times New Roman", serif;
    font-size: 12.2px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: 0;
  }
  .nt-label {
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 0.25px;
    font-weight: 600;
  }
  .nt-ico {
    font-size: 11px;
  }
  .nt-gap {
    padding: 0 14px;
  }
  .nt-date {
    font-size: 9px;
    padding: 1px 5px;
  }
  .nt-date svg {
    width: 8px;
    height: 8px;
  }
}
@media (max-width: 760px) {
  .bg-blobs {
    display: none !important;
  }
  .section {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
  .hero,
  .nav,
  .news-ticker,
  .sale-bar {
    transform: translateZ(0);
  }
  .contact-info,
  .faq-item,
  .form,
  .price-card,
  .review-card,
  .soft-card,
  .voice-card {
    box-shadow: 0 6px 16px rgba(20, 77, 158, 0.1);
  }
  .flip-clock.simple-cd {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: #fff;
  }
  .nt-track {
    will-change: auto;
  }
  #contact .container,
  .contact-info {
    overflow: visible;
  }
  .contact-info {
    width: 100%;
    padding-inline: 2px;
  }
  .contact-info .row {
    align-items: center;
    gap: 14px;
    padding: 16px 4px;
    margin: 0;
    background: 0 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible;
  }
  .contact-info .ic {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    margin-left: 0;
    border-radius: 13px;
    background: rgba(20, 77, 158, 0.07);
    overflow: visible;
    box-shadow: none;
  }
  .contact-info .ic svg {
    width: 19px;
    height: 19px;
    display: block;
  }
  .contact-info .row > div:last-child {
    min-width: 0;
  }
  .contact-info .row span {
    display: block;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
.legal-page {
  padding-top: 0;
}
.legal-hero {
  padding-top: 124px;
}
.legal-hero .section-head h1 {
  font-size: clamp(30px, 4vw, 46px);
}
.legal-card {
  max-width: 920px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 34px;
}
.legal-card h2 {
  font-size: 20px;
  margin: 24px 0 10px;
}
.legal-card h2:first-child {
  margin-top: 0;
}
.legal-card li,
.legal-card p {
  color: var(--body);
  font-size: 15px;
  line-height: 1.8;
}
.legal-card ul {
  margin: 8px 0 0 22px;
}
@media (max-width: 640px) {
  .legal-card {
    padding: 24px 20px;
  }
}
.site-footer {
  background: linear-gradient(180deg, #0f3b7a 0, #0a2c5c 100%);
  color: #eef5ff;
  padding: 38px 0 18px;
  text-align: left;
  margin-top: 28px;
  border-top: 1px solid rgba(249, 162, 11, 0.34);
}
.footer-wrap {
  max-width: var(--maxw);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr 1.05fr 1.05fr 1.25fr;
  gap: 18px 30px;
  align-items: start;
}
.footer-col h3 {
  color: #fff;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 0 0 8px;
  position: relative;
}
.footer-col h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  background: var(--mustard);
  border-radius: 999px;
}
.footer-col a {
  display: block;
  color: rgba(247, 250, 255, 0.82);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0;
  transition: 0.18s ease;
}
.footer-col a:hover {
  color: #ffd166;
  transform: translateX(2px);
}
.footer-brand {
  justify-content: flex-start !important;
  margin: 0 0 8px !important;
}
.footer-title {
  color: #fff !important;
  font-weight: 800;
  font-size: 16px !important;
  margin: 8px 0 4px !important;
}
.footer-tagline {
  color: rgba(238, 245, 255, 0.76) !important;
  font-size: 13.5px !important;
  line-height: 1.6;
  max-width: 280px;
}
.site-footer .footer-socials {
  display: flex;
  justify-content: flex-start;
  gap: 9px;
  margin: 12px 0 0;
}
.site-footer .footer-socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  margin: 0;
}
.site-footer .footer-socials a:hover {
  background: #fff;
  color: var(--royal);
  transform: translateY(-2px);
}
.footer-contactcol p {
  margin: 0 0 8px !important;
  color: rgba(247, 250, 255, 0.82) !important;
  font-size: 13px !important;
  line-height: 1.55;
}
.footer-contactcol b {
  display: block;
  color: #ffd166;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.footer-contactcol a {
  display: inline;
  color: rgba(247, 250, 255, 0.88);
  font-weight: 600;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(238, 245, 255, 0.7);
  font-size: 12.5px;
}
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer-contactcol {
    grid-column: 1/-1;
  }
}
@media (max-width: 640px) {
  .site-footer {
    text-align: left;
    padding: 42px 0 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
  }
  .footer-brandcol,
  .footer-contactcol {
    grid-column: 1/-1;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .footer-col a {
    font-size: 13px;
  }
}
.news-ticker,
.sale-bar {
  contain: layout paint;
}
.nav,
.news-ticker,
.sale-bar {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.news-ticker *,
.sale-bar * {
  text-rendering: optimizeSpeed;
}
@media (prefers-reduced-motion: reduce) {
  .nt-track {
    animation: none !important;
  }
}
@media (max-width: 760px) {
  .sale-bar {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  }
  .sale-bar-inner {
    gap: 7px;
    padding: 5px 10px;
  }
  .sale-text {
    letter-spacing: 0.15px;
  }
  .price-card:hover {
    transform: none;
  }
  .ach-card,
  .price-card,
  .soft-card,
  .tl-card {
    transition:
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }
}
.receipt {
  background: linear-gradient(180deg, #fff, #fbf8f2);
  border: 1px solid #dfe7f3;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 16px 34px rgba(20, 77, 158, 0.1);
  position: relative;
  overflow: hidden;
}
.receipt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #0f4fb3, #f9a20b);
}
.rcpt-head {
  background: linear-gradient(135deg, #f8fbff, #fff8e8);
  border: 1px solid #e5edf8;
  border-radius: 16px;
  padding: 14px 16px;
}
.rcpt-head.confirmed {
  background: linear-gradient(135deg, #f0f8ff, #eefbf3);
}
.rcpt-head.reserved {
  background: linear-gradient(135deg, #fff8e8, #fffdf6);
}
.rcpt-flag {
  margin-left: auto;
  background: #0f4fb3;
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 7px 12px;
  border-radius: 999px;
}
.rcpt-flag.warn {
  background: #f59e0b;
  color: #09214a;
}
.rrow {
  border-bottom: 1px dashed rgba(160, 174, 199, 0.38);
  padding: 8px 0;
}
.rrow:last-child {
  border-bottom: 0;
}
.rtotal {
  background: #f3f7fd;
  border: 0;
  border-left: 4px solid #f9a20b;
  border-radius: 12px;
  padding: 13px 16px;
  margin-top: 16px;
}
.lang-opts .gopt span:not(.gopt-ico) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}
.gt-price-sub s {
  color: #9aa6bd;
}
.hero-frame {
  border: 1.5px solid rgba(20, 77, 158, 0.55) !important;
  box-shadow: 0 18px 42px rgba(20, 77, 158, 0.16) !important;
  background: var(--card) !important;
}
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(20, 77, 158, 0.18);
  border-radius: calc(var(--radius-lg) - 7px);
  pointer-events: none;
  z-index: 2;
}
.modal,
.modal-card {
  overscroll-behavior: contain;
}
.modal {
  overflow: hidden;
  padding: 16px;
}
.modal-card {
  max-width: min(480px, calc(100vw - 32px));
  width: 100%;
  overflow-x: hidden !important;
  margin: 0 auto;
}
.modal-card,
.modal-card *,
.modal-card ::after,
.modal-card ::before {
  box-sizing: border-box;
}
#bookForm,
#step1,
#step2,
.sel-service {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.gender-opts {
  max-width: 100%;
  min-width: 0;
}
.gopt {
  min-width: 0;
}
.avail-note {
  display: block;
  margin-top: 10px;
  width: 100%;
}
.availability-panel {
  width: 100%;
  border: 1px solid rgba(20, 77, 158, 0.14);
  background: linear-gradient(
    180deg,
    rgba(20, 77, 158, 0.045),
    rgba(255, 255, 255, 0.9)
  );
  border-radius: 14px;
  padding: 10px;
}
.availability-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--heading);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.availability-head small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.availability-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(205, 214, 230, 0.72);
  margin-top: 7px;
}
.availability-role {
  font-size: 13px;
  font-weight: 800;
  color: var(--heading);
}
.availability-lang {
  grid-column: 1/-1;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
}
.availability-status {
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.availability-row.available .availability-status {
  background: rgba(47, 158, 95, 0.13);
  color: #167346;
}
.availability-row.unavailable .availability-status {
  background: rgba(196, 61, 107, 0.12);
  color: #a73562;
}
.availability-row.unavailable {
  background: rgba(196, 61, 107, 0.035);
}
.av-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .modal {
    padding: 10px;
    align-items: flex-start;
  }
  .modal-card {
    max-width: calc(100vw - 20px);
    padding: 24px 18px;
    max-height: 92vh;
  }
  .gender-opts {
    gap: 8px;
  }
  .gopt {
    padding: 11px 8px;
    font-size: 13px;
  }
  .availability-row {
    grid-template-columns: 1fr;
  }
  .availability-status {
    justify-self: start;
  }
}
.availability-head {
  justify-content: flex-start !important;
}
.availability-head small:empty {
  display: none !important;
}
.footer-made {
  text-align: center !important;
}
.footer-made .made-with-heart {
  color: rgba(238, 245, 255, 0.72);
}
.footer-made .heart {
  color: #ff4d6d;
  display: inline-block;
  margin: 0 3px;
}
.footer-made a {
  color: #ffd166;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 209, 102, 0.45);
  padding-bottom: 1px;
}
.footer-made a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.simple-cd {
  letter-spacing: 0.45px;
  word-spacing: 2px;
}
@media (min-width: 981px) {
  .hero-media {
    transform: translateY(-18px);
  }
}
.footer-made,
.footer-made .made-with-heart,
.footer-made a {
  text-transform: none !important;
  font-size: 11px !important;
  letter-spacing: 0.25px !important;
}
.footer-made a {
  font-weight: 700 !important;
}
.footer-made {
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
.footer-made .heart {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 14px !important;
  font-size: 12px !important;
  aspect-ratio: 1/1 !important;
  vertical-align: -2px !important;
}
@media (max-width: 640px) {
  .footer-made {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
}
.legal-intro {
  font-size: 16px !important;
  color: var(--heading) !important;
  background: rgba(20, 77, 158, 0.06);
  border: 1px solid rgba(20, 77, 158, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
}
.dash-grid div,
.policy-toc {
  border-radius: 14px;
  padding: 12px;
}
.policy-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 8px;
  background: rgba(15, 79, 179, 0.045);
  border: 1px solid rgba(15, 79, 179, 0.12);
}
.policy-toc a {
  text-decoration: none !important;
  font-size: 12.5px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(205, 214, 230, 0.8);
  color: var(--royal) !important;
}
.policy-toc a:hover {
  background: var(--royal);
  color: #fff !important;
}
.legal-note,
.next-steps {
  border-left: 4px solid var(--mustard);
}
.legal-note {
  background: #fff7df;
  border-radius: 12px;
  padding: 13px 15px;
}
.next-steps {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(20, 77, 158, 0.16);
  border-radius: 14px;
  background: #fffaf0;
  font-size: 12.5px;
  color: var(--body);
}
.dash-grid b,
.next-steps b {
  color: var(--heading);
}
.next-steps ol {
  margin: 8px 0 0 18px;
  padding: 0;
}
.next-steps li {
  margin: 4px 0;
}
.verify-link {
  display: inline-flex;
  margin-top: 12px;
  color: var(--royal);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.student-dashboard {
  margin-top: 18px;
}
.dash-card {
  background: linear-gradient(180deg, #fff, #f8fbff);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 22px;
}
.dash-card.loading {
  color: var(--muted);
  font-weight: 700;
}
.eyebrow.mini {
  font-size: 10px;
}
.sid-value.small {
  font-size: 18px;
  letter-spacing: 2px;
  margin: 4px 0 0;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.dash-grid div {
  background: #f3f7fd;
  border: 1px solid rgba(20, 77, 158, 0.1);
}
.dash-grid b {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}
.dash-grid span {
  font-size: 13px;
  color: var(--body);
  overflow-wrap: anywhere;
}
.btn,
.gen-tool,
.modal-card,
.price-card,
.review-card,
.sid-box,
.soft-card,
.verify-box {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.faq-item:hover,
.price-card:hover,
.review-card:hover,
.soft-card:hover {
  box-shadow: 0 18px 42px rgba(20, 77, 158, 0.16);
  border-color: rgba(20, 77, 158, 0.24);
}
@media (max-width: 760px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .modal-card {
    border-radius: 20px;
  }
  .section {
    padding-top: 62px;
    padding-bottom: 62px;
  }
}
.sab-hp,
[name="website_url"] {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
  visibility: hidden !important;
}
.refer-codebox {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed #144d9e;
  border-radius: 14px;
  background: #f7f9ff;
}
.refer-code-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #144d9e;
  margin-bottom: 6px;
}
.refer-code-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.refer-code-row code {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0f3f8f;
  background: #fff;
  border: 1px solid #cdd9f0;
  border-radius: 10px;
  padding: 8px 14px;
}
.refer-code-hint {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
}
.refer-count {
  margin-top: 8px;
  font-size: 0.92rem;
}
.refer-reward {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff6e5;
  border: 1px solid #f9a20b;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.refer-reward.muted {
  background: #f4f5f7;
  border-color: #d9dde4;
}
.refer-reward b {
  color: #7a4b00;
}
.refer-reward.muted b {
  color: #444;
}
.refer-reward span {
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.9;
}
.refer-status.ok {
  color: #1c7a3e;
}
.refer-status.bad {
  color: #c43d6b;
}
.refer-status.warn {
  color: #9a6b00;
}
.refer-otp {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #cdd9f0;
  border-radius: 14px;
  background: #f7f9ff;
}
.refer-otp > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.refer-resend {
  margin-top: 10px;
  background: 0 0;
  border: 0;
  color: #144d9e;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.88rem;
  padding: 0;
}
.field-hint {
  margin: 2px 0 9px;
  font-size: 13px;
  line-height: 1.55;
  color: #5b6b82;
}
.refer-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.refer-reward-card {
  border: 1px solid #e3ecfb;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.refer-reward-card.friend {
  background: linear-gradient(180deg, #fff, #fff7ec);
  border-color: #f3d9a4;
}
.refer-reward-card.you {
  background: linear-gradient(180deg, #fff, #eef4ff);
  border-color: #cfe0fb;
}
.refer-reward-card .rr-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0f4fb3;
}
.refer-reward-card.friend .rr-big,
.refer-reward-card.friend .rr-tag {
  color: #b9760a;
}
.refer-reward-card .rr-big {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1.1;
  color: #144d9e;
}
.refer-reward-card .rr-sub {
  font-size: 13.5px;
  line-height: 1.65;
  color: #3a4862;
}
@media (max-width: 640px) {
  .refer-rewards {
    grid-template-columns: 1fr;
  }
}
.coupon-note.warn {
  color: #9a6a00;
  font-weight: 600;
}
.field.discount-locked {
  position: relative;
  opacity: 0.78;
}
.field.discount-locked .coupon-row .coupon-btn,
.field.discount-locked .coupon-row input {
  cursor: not-allowed;
  background: #eef3fb;
  color: #7a8799;
  border-color: #d8e2f0;
}
.field.discount-locked label:after {
  content: " Locked";
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef3fb;
  color: #5b6b82;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.hero-title,
.journey-name {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@media (min-width: 981px) {
  .hero-grid {
    align-items: start;
  }
  .hero-media {
    align-self: start;
    transform: translateY(-54px) !important;
    padding-top: 0;
  }
  .hero-frame-wrap {
    max-width: 430px;
  }
}
html:not(.sab-anim) .reveal {
  filter: none !important;
  transition: none !important;
}
html:not(.sab-anim) .reveal.in,
html:not(.sab-anim) .reveal.sab-left,
html:not(.sab-anim) .reveal.sab-right,
html:not(.sab-anim) .reveal.sab-up,
html:not(.sab-anim) .reveal.sab-zoom {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.section {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}
@media (max-width: 760px) {
  .section {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }
}
.blog-article-body .blog-h {
  font-weight: 800;
  color: var(--heading, #0f3b7a);
  margin: 1.4em 0 0.5em;
  line-height: 1.3;
}
.blog-article-body h2.blog-h {
  font-size: 1.4rem;
}
.blog-article-body h3.blog-h {
  font-size: 1.15rem;
}
.blog-article-body .blog-ul {
  margin: 0.6em 0 1em;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.blog-article-body .blog-ul li {
  line-height: 1.7;
}
.blog-article-body strong,
.blog-faq-item summary {
  font-weight: 800;
  color: var(--heading, #0f3b7a);
}
.blog-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-weight: 700;
}
.blog-author,
.blog-readtime {
  color: var(--muted, #6b7793);
  font-size: 0.82rem;
  font-weight: 600;
}
.blog-faq {
  margin: 34px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blog-faq .blog-h {
  margin: 0 0 6px;
  font-size: 1.4rem;
}
.blog-faq-item {
  border: 1px solid var(--border, rgba(20, 77, 158, 0.14));
  border-radius: 14px;
  background: var(--card, #fff);
}
.blog-faq-item summary::-webkit-details-marker {
  display: none;
}
.blog-faq-item[open] summary {
  color: var(--royal, #144d9e);
}
.blog-faq-a {
  padding: 0 18px 16px;
  color: var(--body, #46506a);
  line-height: 1.7;
}
.blog-article[dir="rtl"] .blog-ul {
  padding-left: 0;
  padding-right: 1.3em;
}
html.sab-anim.js .hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
html.sab-anim .hero-title {
  animation: sabRise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html.sab-anim .role-chips .chip {
  animation: sabRise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html.sab-anim .role-chips .chip:nth-child(1) {
  animation-delay: 0.18s;
}
html.sab-anim .role-chips .chip:nth-child(2) {
  animation-delay: 0.24s;
}
html.sab-anim .role-chips .chip:nth-child(3) {
  animation-delay: 0.3s;
}
html.sab-anim .role-chips .chip:nth-child(4) {
  animation-delay: 0.36s;
}
html.sab-anim .role-chips .chip:nth-child(5) {
  animation-delay: 0.42s;
}
html.sab-anim .role-chips .chip:nth-child(6) {
  animation-delay: 0.48s;
}
html.sab-anim .role-chips .chip:nth-child(7) {
  animation-delay: 0.54s;
}
html.sab-anim .hero-sub {
  animation: sabRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.38s both;
}
html.sab-anim .hero .cta-row {
  animation: sabRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both;
}
html.sab-anim .hero .socials {
  animation: sabRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.62s both;
}
html.sab-anim .hero-frame-wrap {
  animation: sabZoomIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}
html.sab-anim .float-chip {
  animation: sabRise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.85s both;
}
html.sab-anim .float-chip.br {
  animation-delay: 1s;
}
@media (max-width: 760px) {
  html.sab-anim.js .reveal,
  html.sab-anim.js .reveal.sab-left,
  html.sab-anim.js .reveal.sab-right,
  html.sab-anim.js .reveal.sab-up,
  html.sab-anim.js .reveal.sab-zoom {
    transform: translateY(18px);
    transition-duration: 0.55s;
  }
  html.sab-anim.js .reveal.in {
    transform: none;
  }
}
:root {
  interpolate-size: allow-keywords;
}
html.sab-anim .faq-item::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition:
    height 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease,
    content-visibility 0.38s allow-discrete;
}
html.sab-anim .faq-item[open]::details-content {
  height: auto;
  opacity: 1;
}
html.sab-anim .faq-item[open] .faq-a {
  animation: sabFadeIn 0.4s ease both;
}
.faq-item summary {
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.faq-item summary:hover {
  color: var(--royal);
  background: rgba(20, 77, 158, 0.035);
}
.faq-item {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.faq-item[open] {
  border-color: rgba(20, 77, 158, 0.28);
  box-shadow: 0 8px 22px rgba(20, 77, 158, 0.1);
}
.drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.drop-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dropdown.open .drop-caret {
  transform: rotate(180deg);
}
@media (hover: hover) {
  .dropdown:hover .drop-caret {
    transform: rotate(180deg);
  }
}
.btn {
  position: relative;
  overflow: hidden;
}
html.sab-anim .btn.fill-royal::after,
html.sab-anim .btn.solid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 255, 255, 0.32),
    transparent
  );
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.55s ease;
}
html.sab-anim .btn.fill-royal:hover::after,
html.sab-anim .btn.solid:hover::after {
  left: 125%;
}
.btn .btn-ico {
  transition: transform 0.25s ease;
}
.btn:hover .btn-ico {
  transform: translateX(3px);
}
.chip {
  cursor: default;
}
.chip:hover {
  transform: translateY(-2px);
  background: rgba(249, 162, 11, 0.14);
  color: var(--royal);
  box-shadow: 0 4px 12px rgba(20, 77, 158, 0.1);
}
.soft-card .ic {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.3s ease,
    color 0.3s ease;
}
.soft-card:hover .ic {
  transform: scale(1.08) rotate(-4deg);
  background: var(--royal);
  color: #fff;
}
.stat:hover .stat-num {
  color: var(--royal);
}
.stat-num {
  transition: color 0.3s ease;
}
html.sab-anim .float-chip .dot {
  animation:
    sabRise 0.6s both,
    sabPulse 2.4s ease-in-out 1.6s infinite;
}
.social-icon {
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
.social-icon:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 16px rgba(20, 77, 158, 0.18);
}
.footer-socials a {
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}
.footer-socials a:hover {
  transform: translateY(-3px);
}
.nt-date {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.news-ticker .nt-viewport {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
}
.brand .logo-light,
.nav-cta-mobile {
  display: none;
}
.brand .brand-logo {
  margin: 0;
}
@media (min-width: 961px) {
  .brand .logo-dark {
    display: block;
  }
  .brand .logo-light {
    display: none;
  }
  .nav {
    padding-top: 13px;
  }
  .nav,
  .nav.scrolled {
    background: 0 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .nav-inner,
  .nav.scrolled .nav-inner {
    padding: 0 30px !important;
  }
  .nav .brand-logo {
    height: 44px;
    filter: drop-shadow(0 3px 10px rgba(15, 59, 122, 0.2));
    transition: height 0.3s ease;
  }
  .nav.scrolled .brand-logo {
    height: 40px;
  }
  .nav-blur {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 170;
    pointer-events: none;
    top: var(--sab-top-offset, 0px);
    height: 104px;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.92) 0,
      rgba(255, 255, 255, 0.72) 44%,
      rgba(255, 255, 255, 0.28) 76%,
      rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 56%,
      rgba(0, 0, 0, 0.42) 84%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 56%,
      rgba(0, 0, 0, 0.42) 84%,
      transparent 100%
    );
  }
  .nav-inner > nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }
  .nav-links {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 5px 7px;
    border-radius: 999px;
    isolation: isolate;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.68) 0,
      rgba(233, 242, 255, 0.42) 100%
    );
    -webkit-backdrop-filter: blur(26px) saturate(1.9);
    backdrop-filter: blur(26px) saturate(1.9);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      0 12px 36px rgba(15, 59, 122, 0.18),
      0 2px 6px rgba(15, 59, 122, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0-8px 18px rgba(15, 59, 122, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }
  .nav-links::after,
  .nav-links::before {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
  }
  .nav-links::before {
    inset: 1px 1px auto 1px;
    height: 52%;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0)
    );
  }
  .nav-links::after {
    left: 12%;
    right: 12%;
    bottom: 2px;
    height: 34%;
    background: radial-gradient(
      60% 100%at 50% 100%,
      rgba(120, 170, 240, 0.18),
      transparent 70%
    );
  }
  .nav-links,
  .nav-links > li {
    position: relative;
  }
  .nav-links > li > a {
    gap: 5px;
    color: #0f3b7a;
    background: 0 0;
    border: 0 !important;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    transition:
      background 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;
  }
  .nav-links > li > a:hover {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.85),
      rgba(224, 236, 255, 0.6)
    );
    color: var(--royal);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 3px 10px rgba(20, 77, 158, 0.14);
  }
  .nav-links .drop-caret {
    color: inherit;
  }
  .nav.scrolled .nav-links {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8),
      rgba(233, 242, 255, 0.55)
    );
  }
  .dropdown-menu {
    background: rgba(255, 255, 255, 0.99);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 46px rgba(15, 59, 122, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.9);
  }
  .nav-action,
  .nav-links > li > a {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    white-space: nowrap;
  }
  .nav-action {
    gap: 9px;
    flex: 0 0 auto;
    padding: 5px 5px 5px 16px;
    background: linear-gradient(135deg, #0f3b7a 0, #144d9e 46%, #3e6fbe 100%);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow:
      0 10px 26px rgba(15, 59, 122, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.32);
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  .nav-action:hover {
    transform: translateY(-2px);
    box-shadow:
      0 14px 32px rgba(15, 59, 122, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.36);
  }
  .nav-action .na-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--royal);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    transition:
      transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
      background 0.25s ease,
      color 0.25s ease;
    box-shadow: 0 3px 8px rgba(15, 59, 122, 0.18);
  }
  .nav-action .na-ico svg {
    width: 15px;
    height: 15px;
  }
  .nav-action:hover .na-ico {
    transform: rotate(-45deg);
    background: var(--mustard);
    color: #0f3b7a;
  }
}
@media (max-width: 960px) {
  .nav-action,
  .nav-blur {
    display: none !important;
  }
  .brand .logo-dark {
    display: none;
  }
  .brand .logo-light,
  .nav-cta-mobile {
    display: block;
  }
}
.wu-sec {
  padding: 74px 0;
}
.wu-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(182px, auto);
  gap: 20px;
}
.wu-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #fff, #f6faff);
  border: 1px solid rgba(20, 77, 158, 0.12);
  box-shadow: 0 10px 26px rgba(15, 59, 122, 0.08);
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}
.wu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15, 59, 122, 0.18);
  border-color: rgba(20, 77, 158, 0.22);
}
.wu-ic {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #eaf1fb, #dbe7fb);
  color: var(--royal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.wu-ic svg {
  width: 24px;
  height: 24px;
}
.wu-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 9px;
}
.wu-card h3,
.wu-num {
  font-size: 19px;
  margin-bottom: 7px;
  color: var(--heading);
  line-height: 1.25;
}
.wu-num {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--royal);
}
.wu-card p {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.62;
}
.wu-card .wu-ic + h3 {
  margin-top: 2px;
}
.wu-card.grad,
.wu-card.grad-alt,
.wu-card.grad-deep {
  color: #fff;
  border: 0;
}
.wu-card.grad {
  background: linear-gradient(145deg, #0a2c5c 0, #144d9e 52%, #3e6fbe 100%);
  box-shadow: 0 18px 44px rgba(15, 59, 122, 0.34);
}
.wu-card.grad-alt {
  background: linear-gradient(145deg, #123f86 0, #2f68bd 55%, #5e86d0 100%);
  box-shadow: 0 18px 44px rgba(15, 59, 122, 0.3);
}
.wu-card.grad-deep {
  background: linear-gradient(155deg, #061a3b 0, #0f3b7a 52%, #1e5aa8 100%);
  box-shadow: 0 20px 50px rgba(8, 30, 66, 0.42);
}
.wu-card.grad .wu-eyebrow,
.wu-card.grad-alt .wu-eyebrow,
.wu-card.grad-deep .wu-eyebrow {
  color: rgba(255, 255, 255, 0.9);
}
.wu-card.grad .wu-num,
.wu-card.grad h3,
.wu-card.grad p,
.wu-card.grad-alt .wu-num,
.wu-card.grad-alt h3,
.wu-card.grad-alt p,
.wu-card.grad-deep .wu-num,
.wu-card.grad-deep h3,
.wu-card.grad-deep p {
  color: #fff;
}
.wu-card.grad .wu-ic,
.wu-card.grad-alt .wu-ic,
.wu-card.grad-deep .wu-ic {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.wu-card.grad-deep::after,
.wu-card.grad::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -80px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(249, 162, 11, 0.34),
    transparent 68%
  );
  pointer-events: none;
}
.wu-card.grad-alt::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  left: -80px;
  bottom: -90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.26),
    transparent 70%
  );
  pointer-events: none;
}
.wu-card.grad-alt::before,
.wu-card.grad-deep::before,
.wu-card.grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.wu-card.big {
  grid-row: span 2;
}
.wu-card.big,
.wu-card.wide {
  grid-column: span 2;
}
.wu-card.tall {
  grid-row: span 2;
}
.wu-card.hero {
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 32px;
}
.wu-card.hero .wu-mark {
  font-family: "Aref Ruqaa", serif;
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 14px;
  color: #fff;
  opacity: 0.95;
  direction: rtl;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.wu-card.hero h3 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 10px;
}
.wu-card.hero p {
  font-size: 15px;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.94);
  margin-top: 0;
}
.wu-card.hero .btn {
  margin-top: 18px;
}
.wu-card.hero .btn.on-blue {
  background: #fff;
  color: var(--royal);
  border-color: #fff;
  font-weight: 700;
}
.wu-card.hero .btn.on-blue:hover {
  background: var(--mustard);
  color: #0f3b7a;
  border-color: var(--mustard);
}
.wu-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.wu-strip .wu-card {
  min-height: 160px;
  justify-content: center;
}
.wu-strip .wu-card p {
  margin-top: 0;
}
@media (max-width: 900px) {
  .wu-bento {
    grid-auto-rows: minmax(176px, auto);
  }
  .wu-card.big {
    grid-column: span 2;
    min-height: 230px;
  }
  .wu-card.big,
  .wu-card.tall {
    grid-row: span 1;
  }
  .wu-bento,
  .wu-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .wu-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .wu-strip {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .wu-card {
    min-height: auto;
    padding: 22px;
  }
  .wu-card.big,
  .wu-card.tall,
  .wu-card.wide {
    grid-column: auto;
    grid-row: auto;
  }
}
.otp-box,
.otp-boxes {
  min-width: 0;
  width: 100%;
}
.otp-boxes {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  margin: 4px 0;
}
.otp-box {
  flex: 1 1 0;
  box-sizing: border-box;
  max-width: 46px;
  height: 54px;
  padding: 0;
  line-height: 50px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  border: 2px solid var(--border, rgba(20, 77, 158, 0.22));
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--heading, #0f3b7a);
  outline: 0;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    background 0.25s,
    color 0.25s,
    transform 0.2s;
  -webkit-appearance: none;
}
.refer-row .otp-boxes,
.sid-row .otp-boxes {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 480px) {
  .refer-otp .refer-row,
  .sid-otp .sid-row {
    flex-wrap: wrap;
  }
  .refer-otp .refer-row .btn,
  .refer-otp .refer-row .otp-boxes,
  .sid-otp .sid-row .btn,
  .sid-otp .sid-row .otp-boxes {
    flex: 1 1 100%;
  }
}
@media (max-width: 340px) {
  .otp-box {
    font-size: 1.05rem;
  }
}
.otp-box:focus {
  border-color: var(--royal, #144d9e);
  box-shadow: 0 0 0 4px rgba(20, 77, 158, 0.14);
}
.otp-box.filled {
  transform: scale(1.05);
}
.otp-box.otp-ok {
  border-color: #2f9e5f;
  background: #2f9e5f;
  color: #fff;
  animation: otpPop 0.32s ease;
}
.otp-box.otp-bad {
  border-color: #c43d6b;
  background: #c43d6b;
  color: #fff;
  animation: otpShake 0.42s ease;
}
.motion-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-height: 34px;
}
.motion-inline-success {
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(47, 158, 95, 0.08);
}
.motion-inline-text {
  font-weight: 700;
  color: #2f9e5f;
}
.form-success,
.motion-circle {
  display: flex;
  align-items: center;
}
.motion-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  justify-content: center;
  flex: none;
  transform: scale(0);
  opacity: 0;
}
.motion-circle svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.motion-circle.show {
  animation: motionCircleIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.motion-circle.ok {
  background: #2f9e5f;
}
.motion-circle.bad {
  background: #c43d6b;
}
.motion-circle path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: motionDraw 0.3s 0.16s ease forwards;
}
.form-success {
  flex-direction: column;
  text-align: center;
  gap: 14px;
  padding: clamp(30px, 6vw, 52px) 14px;
  animation: formSuccessIn 0.4s ease;
}
.note-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.note-result .motion-circle {
  width: 24px;
  height: 24px;
}
.note-result .motion-circle svg {
  width: 13px;
  height: 13px;
  stroke-width: 3.4;
}
.note-result.ok .note-result-text {
  color: #2f9e5f;
  font-weight: 600;
}
.note-result.bad .note-result-text {
  color: #c43d6b;
  font-weight: 600;
}
.form-success .motion-circle {
  width: 66px;
  height: 66px;
  position: static;
}
.form-success .motion-circle svg {
  width: 34px;
  height: 34px;
  stroke-width: 3;
}
.form-confirm h3,
.form-success h3 {
  color: var(--heading, #0f3b7a);
}
.form-success h3 {
  margin: 0;
  font-size: 1.3rem;
}
.form-success p {
  margin: 0;
  color: var(--muted, #6b7793);
  max-width: 420px;
}
.form-fade-out {
  animation: formFadeOut 0.26s ease forwards;
}
.form-confirm {
  display: block;
  opacity: 0;
  animation: formSuccessIn 0.34s ease forwards;
}
.form-confirm.form-confirm-in {
  opacity: 1;
}
.form-confirm h3 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.form-confirm-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
  padding: 6px 14px;
  background: var(--card-soft, rgba(20, 77, 158, 0.05));
  border-radius: 12px;
}
.form-confirm-summary .rrow {
  font-size: 14px;
}
.form-confirm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.form-confirm-actions .btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
}
.form-confirm-actions .form-confirm-yes {
  background: var(--royal, #144d9e);
  color: #fff;
}
.form-confirm-actions .form-confirm-yes:hover {
  background: #0f3b7a;
}
.form-confirm-actions button:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
@media (min-width: 961px) {
  :root {
    --sab-nav-offset: 14px;
  }
  .nav {
    background: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-top: var(--sab-nav-offset) !important;
    transition:
      padding 0.28s ease,
      background 0.28s ease,
      box-shadow 0.28s ease,
      border-color 0.28s ease;
  }
  .nav-blur {
    display: none !important;
  }
  .nav-inner {
    max-width: min(1720px, calc(100vw - 96px));
    min-height: 66px;
    padding: 0 !important;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }
  .nav .brand {
    flex: 0 0 auto;
    min-width: 220px;
    color: #111;
  }
  .brand .logo-dark {
    display: block !important;
  }
  .brand .logo-light,
  .nav-links::after,
  .nav-links::before {
    display: none !important;
  }
  .nav .brand-logo {
    height: 46px !important;
  }
  .nav .brand-logo,
  .nav.scrolled .brand-logo {
    width: auto;
    filter: none !important;
    transition:
      height 0.28s ease,
      transform 0.28s ease;
  }
  .nav-inner > nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
  }
  .nav-links,
  .nav-links > li > a {
    display: inline-flex;
    align-items: center;
  }
  .nav-links {
    position: relative;
    justify-content: flex-end;
    gap: 7px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 6px;
    list-style: none;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow:
      0 18px 44px rgba(20, 31, 55, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }
  .nav-links > li > a {
    gap: 5px;
    padding: 11px 13px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: 0 0 !important;
    box-shadow: none !important;
    color: #171717 !important;
    font-family: "Poppins", sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
      background 0.18s ease,
      color 0.18s ease;
  }
  .nav-links > li > a.active,
  .nav-links > li > a:focus,
  .nav-links > li > a:hover,
  .nav-links > li > a[aria-current="page"],
  .nav-links > li > a[aria-current="true"] {
    background: rgba(0, 0, 0, 0.045) !important;
    color: #000 !important;
  }
  .nav-links .drop-caret {
    width: 13px;
    height: 13px;
    color: currentColor;
  }
  .dropdown-menu {
    top: calc(100% + 11px);
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.14) !important;
  }
  .dropdown-menu li a {
    color: #171717 !important;
    border-radius: 5px !important;
    text-transform: none;
    letter-spacing: 0;
  }
  .dropdown-menu li a:hover {
    background: rgba(0, 0, 0, 0.055) !important;
    color: #000 !important;
  }
  .nav-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 21px !important;
    border-radius: 7px !important;
    background: #050505 !important;
    color: #fff !important;
    border: 1px solid #050505 !important;
    box-shadow: none !important;
    font-family: "Poppins", sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
      transform 0.18s ease,
      background 0.18s ease,
      box-shadow 0.18s ease;
  }
  .nav-action:hover {
    transform: translateY(-1px) !important;
    background: #151515 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
  }
  .nav-action .na-ico {
    display: none !important;
  }
  .nav-action .na-label {
    display: inline-block;
  }
  .nav.force-scrolled,
  .nav.scrolled {
    padding-top: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.055) !important;
    box-shadow: 0 1px 18px rgba(0, 0, 0, 0.035) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
  }
  .nav.force-scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: min(1720px, calc(100vw - 96px));
    min-height: 76px;
    padding: 0 !important;
  }
  .nav.force-scrolled .nav-links,
  .nav.scrolled .nav-links {
    padding: 0;
    gap: 12px;
    background: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav.force-scrolled .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    padding: 14px 12px !important;
  }
  .nav.force-scrolled .nav-action,
  .nav.scrolled .nav-action {
    min-height: 44px;
    padding: 0 22px !important;
  }
  .nav.force-scrolled .brand-logo,
  .nav.scrolled .brand-logo {
    height: 44px !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner {
    max-width: calc(100vw - 44px);
    gap: 16px;
  }
  .nav .brand {
    min-width: 170px;
  }
  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.scrolled .brand-logo {
    height: 40px !important;
  }
  .nav-links {
    gap: 3px;
    padding: 8px 10px;
  }
  .nav-links > li > a {
    font-size: 11.5px !important;
    padding: 10px 8px !important;
    letter-spacing: 0.03em;
  }
  .nav-action {
    min-height: 39px;
    padding: 0 15px !important;
    font-size: 11.5px !important;
  }
}
@media (min-width: 961px) {
  .nav {
    position: fixed;
    isolation: isolate;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    background: linear-gradient(180deg, #0f3b7a 0, #0a2c5c 100%) !important;
    box-shadow:
      0 12px 30px rgba(10, 44, 92, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }
  .nav-action:hover,
  .nav.force-scrolled .nav-action:hover,
  .nav.inner-page .nav-action:hover,
  .nav.scrolled .nav-action:hover {
    background: linear-gradient(180deg, #144d9e 0, #0f3b7a 100%) !important;
    box-shadow:
      0 15px 34px rgba(10, 44, 92, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }
  body:not(.mobile-menu-open) .nav:not(.inner-page):not(.scrolled) .nav-links {
    border-radius: 6px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.54)
    ) !important;
    overflow: hidden;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.5)
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.85) !important;
    backdrop-filter: blur(30px) saturate(1.85) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0-1px 0 rgba(20, 77, 158, 0.045) !important;
  }
  .nav:not(.inner-page):not(.scrolled) .nav-links::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0)
    );
  }
  .nav:not(.inner-page):not(.scrolled) .nav-links::after {
    background: radial-gradient(
      65% 100%at 50% 100%,
      rgba(20, 77, 158, 0.11),
      transparent 72%
    );
  }
  .nav.inner-page:not(.scrolled) .nav-inner {
    max-width: min(1720px, calc(100vw - 96px));
    padding: 0 !important;
  }
  .nav.inner-page:not(.scrolled) .nav-links {
    overflow: visible;
  }
  .nav.inner-page:not(.scrolled) .nav-links > li > a {
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.38);
    padding: 14px 12px !important;
    background: 0 0 !important;
    color: #111 !important;
    text-shadow: none !important;
  }
  .nav.inner-page:not(.scrolled) .nav-links > li > a.active,
  .nav.inner-page:not(.scrolled) .nav-links > li > a:focus,
  .nav.inner-page:not(.scrolled) .nav-links > li > a:hover,
  .nav.inner-page:not(.scrolled) .nav-links > li > a[aria-current="page"],
  .nav.inner-page:not(.scrolled) .nav-links > li > a[aria-current="true"] {
    background: rgba(255, 255, 255, 0.38) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  }
  .nav.force-scrolled,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.84) 0,
      rgba(255, 255, 255, 0.66) 100%
    ) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.58) !important;
  }
  .nav.force-scrolled::before,
  .nav.inner-page.scrolled::before,
  .nav.scrolled::before {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.66),
        rgba(255, 255, 255, 0) 58%
      ),
      radial-gradient(70% 130%at 50%0, rgba(20, 77, 158, 0.08), transparent 70%);
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0) 65%
    );
  }
  .nav {
    --nav-glass-bg: rgba(255, 255, 255, 0.74);
    --nav-glass-bg-strong: rgba(255, 255, 255, 0.82);
    --nav-glass-border: rgba(255, 255, 255, 0.62);
    --nav-soft-line: rgba(255, 255, 255, 0.46);
    transition:
      background 0.48s ease,
      border-color 0.48s ease,
      box-shadow 0.48s ease,
      padding-top 0.48s ease,
      -webkit-backdrop-filter 0.48s ease,
      backdrop-filter 0.48s ease !important;
    will-change: background, backdrop-filter, padding-top;
  }
  .nav-inner {
    transition:
      min-height 0.48s ease,
      max-width 0.48s ease,
      gap 0.48s ease !important;
  }
  .nav-links {
    transition:
      background 0.48s ease,
      border-color 0.48s ease,
      box-shadow 0.48s ease,
      padding 0.48s ease,
      gap 0.48s ease,
      -webkit-backdrop-filter 0.48s ease,
      backdrop-filter 0.48s ease !important;
  }
  .nav-links > li > a {
    transition:
      background 0.24s ease,
      color 0.24s ease !important;
  }
  .nav:not(.inner-page):not(.scrolled) .nav-links::before {
    display: block !important;
    content: "";
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 45%;
    border-radius: 5px 5px 12px 12px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0)
    );
    pointer-events: none;
    z-index: -1;
  }
  .nav:not(.inner-page):not(.scrolled) .nav-links::after {
    display: block !important;
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 34%;
    border-radius: 999px;
    background: radial-gradient(
      70% 100%at 50% 100%,
      rgba(20, 77, 158, 0.1),
      transparent 72%
    );
    pointer-events: none;
    z-index: -1;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    background: var(--royal, #144d9e) !important;
    color: #fff !important;
    border: 1px solid rgba(20, 77, 158, 0.96) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .nav-action:hover,
  .nav.force-scrolled .nav-action:hover,
  .nav.inner-page .nav-action:hover,
  .nav.scrolled .nav-action:hover {
    background: #0f3b7a !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .nav.inner-page:not(.scrolled) {
    padding-top: 14px !important;
    border-bottom: 0 !important;
  }
  .nav.inner-page:not(.scrolled) .nav-inner {
    min-height: 66px;
  }
  .nav.inner-page:not(.scrolled),
  .nav.inner-page:not(.scrolled) .nav-links {
    background: 0 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav.inner-page:not(.scrolled) .nav-links {
    padding: 0 !important;
    gap: 12px;
    border: 0 !important;
  }
  .nav.inner-page:not(.scrolled) .nav-links::after,
  .nav.inner-page:not(.scrolled) .nav-links::before {
    display: none !important;
  }
  .nav.force-scrolled,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    padding-top: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.64)
    ) !important;
    border-bottom: 1px solid var(--nav-soft-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.95) !important;
    backdrop-filter: blur(32px) saturate(1.95) !important;
  }
  .nav.force-scrolled .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.scrolled .nav-links {
    padding: 0 !important;
    gap: 12px;
    background: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav-inner {
    max-width: min(1720px, calc(100vw - 76px));
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.inner-page:not(.scrolled) .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 26px) !important;
    gap: 8px !important;
    min-height: 62px !important;
  }
  .nav .brand {
    min-width: 132px !important;
    flex: 0 0 132px !important;
  }
  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.scrolled .brand-logo {
    height: 35px !important;
    max-width: 132px !important;
    object-fit: contain;
  }
  .nav-inner > nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center !important;
  }
  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.scrolled .nav-links {
    gap: 0 !important;
    padding: 7px 8px !important;
    max-width: 100% !important;
  }
  .nav.inner-page.scrolled .nav-links,
  .nav.inner-page:not(.scrolled) .nav-links,
  .nav.scrolled .nav-links {
    padding: 0 !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    font-size: 10.2px !important;
    letter-spacing: 0.018em !important;
    padding: 10px 5.5px !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.045em !important;
    border-radius: 6px !important;
  }
}
@media (min-width: 1181px) {
  .nav-action {
    border-radius: 7px !important;
  }
}
@media (min-width: 961px) {
  .nav {
    top: var(--sab-top-offset, 0px) !important;
    background: 0 0 !important;
    padding-top: 14px !important;
    transition:
      top 0.48s ease,
      background 0.48s ease,
      border-color 0.48s ease,
      padding-top 0.48s ease,
      -webkit-backdrop-filter 0.48s ease,
      backdrop-filter 0.48s ease !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav,
  .nav::after,
  .nav::before {
    box-shadow: none !important;
    border: 0 !important;
  }
  .nav,
  .nav .brand,
  .nav-inner {
    overflow: visible !important;
  }
  .nav-inner {
    width: auto !important;
    max-width: min(1720px, calc(100vw - 76px)) !important;
    min-height: 66px !important;
    padding: 0 !important;
    gap: 18px !important;
    transition:
      min-height 0.48s ease,
      max-width 0.48s ease,
      gap 0.48s ease !important;
  }
  .nav .brand {
    flex: 0 0 auto !important;
    min-width: 156px !important;
  }
  .nav .brand-logo {
    height: 42px !important;
    max-width: 156px !important;
    width: auto !important;
    filter: none !important;
    object-fit: contain !important;
  }
  .nav-inner > nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  .nav-links,
  .nav-links > li > a {
    align-items: center !important;
  }
  .nav-inner > nav,
  .nav-links,
  .nav-links > li {
    overflow: visible !important;
  }
  .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    margin: 0 !important;
    list-style: none !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.52)
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    gap: 3px !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.85) !important;
    backdrop-filter: blur(34px) saturate(1.85) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    transition:
      background 0.48s ease,
      border-color 0.48s ease,
      padding 0.48s ease,
      gap 0.48s ease,
      -webkit-backdrop-filter 0.48s ease,
      backdrop-filter 0.48s ease !important;
  }
  .nav-links::after,
  .nav-links::before {
    display: none !important;
    content: none !important;
  }
  .nav-links > li {
    flex: 0 0 auto !important;
    position: relative !important;
  }
  .nav-links > li > a {
    color: #111 !important;
    background: 0 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    display: inline-flex !important;
    gap: 4px !important;
    padding: 10px 9px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition:
      background 0.22s ease,
      color 0.22s ease !important;
  }
  .nav-links > li > a.active,
  .nav-links > li > a:focus,
  .nav-links > li > a:hover,
  .nav-links > li > a[aria-current="page"],
  .nav-links > li > a[aria-current="true"] {
    background: rgba(255, 255, 255, 0.44) !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 7px !important;
    background: #144d9e !important;
    color: #fff !important;
    border: 1px solid #144d9e !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition:
      background 0.22s ease,
      border-color 0.22s ease !important;
  }
  .nav-action:hover {
    background: #0f3b7a !important;
    border-color: #0f3b7a !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .nav-action .na-ico {
    display: none !important;
  }
  .nav.inner-page:not(.scrolled) .nav-links {
    background: 0 0 !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav.force-scrolled,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    padding-top: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0.68)
    ) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.95) !important;
    backdrop-filter: blur(34px) saturate(1.95) !important;
  }
  .nav.force-scrolled .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    min-height: 68px !important;
  }
  .nav.force-scrolled .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.scrolled .nav-links {
    background: 0 0 !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner {
    max-width: calc(100vw - 20px) !important;
    gap: 6px !important;
  }
  .nav .brand {
    min-width: 104px !important;
    flex-basis: 104px !important;
  }
  .nav .brand-logo {
    height: 30px !important;
    max-width: 104px !important;
  }
  .nav-links {
    gap: 0 !important;
    padding: 7px 6px !important;
  }
  .nav-links > li > a {
    font-size: 9.4px !important;
    padding: 9px 4.2px !important;
    letter-spacing: 0.01em !important;
  }
  .nav-action {
    min-height: 38px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.035em !important;
  }
}
@media (min-width: 961px) and (max-width: 1040px) {
  .nav-inner {
    max-width: calc(100vw - 14px) !important;
    gap: 4px !important;
  }
  .nav .brand {
    min-width: 88px !important;
    flex-basis: 88px !important;
  }
  .nav .brand-logo {
    height: 27px !important;
    max-width: 88px !important;
  }
  .nav-links > li > a {
    font-size: 8.8px !important;
    padding: 8px 3.2px !important;
  }
  .nav-action {
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 9.2px !important;
  }
}
@media (min-width: 761px) {
  .hero-grid {
    align-items: center !important;
  }
  .hero-media {
    transform: translateY(46px) !important;
    transition: none !important;
  }
  .hero-frame-wrap {
    margin-top: 0 !important;
  }
}
@media (min-width: 961px) {
  .nav {
    top: var(--sab-top-offset, 0px) !important;
    overflow: visible !important;
    transition: top 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  .nav::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.84) 0,
      rgba(255, 255, 255, 0.7) 72%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.9) !important;
    backdrop-filter: blur(34px) saturate(1.9) !important;
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  .nav-links::after,
  .nav-links::before,
  .nav::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .nav.force-scrolled::before,
  .nav.inner-page.scrolled::before,
  .nav.scrolled::before {
    opacity: 1 !important;
  }
  .nav,
  .nav.force-scrolled,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    height: 70px !important;
    min-height: 70px !important;
    padding-top: 0 !important;
    background: 0 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.scrolled .nav-inner {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    max-width: min(1720px, calc(100vw - 56px)) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 14px !important;
    align-items: center !important;
    overflow: visible !important;
    transition: none !important;
  }
  .nav .brand,
  .nav-inner > nav {
    display: flex !important;
    overflow: visible !important;
  }
  .nav .brand {
    flex: 0 0 145px !important;
    min-width: 145px !important;
    align-items: center !important;
  }
  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.scrolled .brand-logo {
    height: 39px !important;
    max-width: 145px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: none !important;
    transition: none !important;
  }
  .nav-inner > nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }
  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.scrolled .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    margin: 0 !important;
    list-style: none !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 8px !important;
    gap: 2px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition:
      background 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
      -webkit-backdrop-filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
      backdrop-filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  body:not(.mobile-menu-open) .nav:not(.inner-page):not(.scrolled) .nav-links {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0.54)
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.85) !important;
    backdrop-filter: blur(32px) saturate(1.85) !important;
  }
  .nav-links > li {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    padding: 0 8px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111 !important;
    background: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    transition:
      background 0.22s ease,
      color 0.22s ease !important;
  }
  .nav-links > li > a.active,
  .nav-links > li > a:focus,
  .nav-links > li > a:hover,
  .nav-links > li > a[aria-current="page"],
  .nav-links > li > a[aria-current="true"] {
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: none !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    flex: 0 0 auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 7px !important;
    background: #144d9e !important;
    border: 1px solid #144d9e !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.055em !important;
    transition:
      background 0.22s ease,
      border-color 0.22s ease !important;
  }
  .nav-action:hover {
    background: #0f3b7a !important;
    border-color: #0f3b7a !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .nav-action .na-ico {
    display: none !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 18px) !important;
    gap: 5px !important;
  }
  .nav .brand {
    flex-basis: 96px !important;
    min-width: 96px !important;
  }
  .nav .brand-logo {
    height: 29px !important;
    max-width: 96px !important;
  }
  .nav-links,
  .nav.inner-page .nav-links,
  .nav.scrolled .nav-links {
    padding: 0 4px !important;
    gap: 0 !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    font-size: 9.1px !important;
    padding: 0 3.4px !important;
    letter-spacing: 0.006em !important;
  }
  .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 9.4px !important;
    letter-spacing: 0.03em !important;
  }
  .hero-media {
    transform: translateY(58px) !important;
  }
}
@media (min-width: 1181px) {
  .hero-media {
    transform: translateY(38px) !important;
  }
}
.scroll-progress {
  height: 0 !important;
  opacity: 0 !important;
  background: 0 0 !important;
  box-shadow: none !important;
}
.nav-blur,
.scroll-progress {
  display: none !important;
}
.news-ticker,
.sale-bar {
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}
.news-ticker::after,
.news-ticker::before,
.sale-bar::after,
.sale-bar::before {
  display: none !important;
  content: none !important;
}
@media (min-width: 761px) {
  .hero-grid {
    align-items: center !important;
  }
  .hero-media {
    transform: translateY(76px) !important;
    transition: none !important;
    will-change: auto !important;
  }
  .hero-frame-wrap {
    margin-top: 0 !important;
  }
}
@media (min-width: 1181px) {
  .hero-media {
    transform: translateY(58px) !important;
  }
}
@media (min-width: 961px) {
  .nav,
  .nav.force-scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    top: var(--sab-top-offset, 0px) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: 0 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: top 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  .nav.inner-page.scrolled::after,
  .nav.inner-page::after,
  .nav.scrolled::after,
  .nav::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
  }
  .nav::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 98px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.84) 0,
      rgba(255, 255, 255, 0.7) 58%,
      rgba(255, 255, 255, 0.38) 78%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.9) !important;
    backdrop-filter: blur(34px) saturate(1.9) !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0,
      #000 64%,
      rgba(0, 0, 0, 0.35) 86%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      #000 0,
      #000 64%,
      rgba(0, 0, 0, 0.35) 86%,
      transparent 100%
    ) !important;
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  .nav.force-scrolled::before,
  .nav.inner-page.scrolled::before,
  .nav.scrolled::before {
    opacity: 1 !important;
  }
  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    max-width: min(1720px, calc(100vw - 56px)) !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    transition: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  .nav .brand,
  .nav-inner > nav {
    display: flex !important;
    overflow: visible !important;
  }
  .nav .brand {
    flex: 0 0 145px !important;
    min-width: 145px !important;
    align-items: center !important;
  }
  .nav .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.scrolled .brand-logo {
    height: 39px !important;
    max-width: 145px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: none !important;
    transition: none !important;
  }
  .nav-inner > nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }
  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.scrolled .nav-links {
    height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    padding: 0 8px !important;
    gap: 2px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition:
      background 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  body:not(.mobile-menu-open) .nav:not(.inner-page):not(.scrolled) .nav-links {
    background: rgba(255, 255, 255, 0.66) !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    border-bottom-color: rgba(255, 255, 255, 0.38) !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.85) !important;
    backdrop-filter: blur(32px) saturate(1.85) !important;
  }
  .nav-links::after,
  .nav-links::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
  }
  .nav-links > li {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    height: 42px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111 !important;
    background: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: 0 !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    transition:
      background 0.22s ease,
      color 0.22s ease !important;
  }
  .nav-links > li > a.active,
  .nav-links > li > a:focus,
  .nav-links > li > a:hover,
  .nav-links > li > a[aria-current="page"],
  .nav-links > li > a[aria-current="true"] {
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: none !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    flex: 0 0 auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 7px !important;
    background: #144d9e !important;
    border: 1px solid #144d9e !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.055em !important;
    transition:
      background 0.22s ease,
      border-color 0.22s ease !important;
  }
  .nav-action:hover {
    background: #0f3b7a !important;
    border-color: #0f3b7a !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .nav-action .na-ico {
    display: none !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 18px) !important;
    gap: 5px !important;
  }
  .nav .brand {
    flex-basis: 96px !important;
    min-width: 96px !important;
  }
  .nav .brand-logo {
    height: 29px !important;
    max-width: 96px !important;
  }
  .nav-links,
  .nav.inner-page .nav-links,
  .nav.scrolled .nav-links {
    padding: 0 4px !important;
    gap: 0 !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    font-size: 9.1px !important;
    padding: 0 3.4px !important;
    letter-spacing: 0.006em !important;
  }
  .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 9.4px !important;
    letter-spacing: 0.03em !important;
  }
  .hero-media {
    transform: translateY(88px) !important;
  }
}
@media (min-width: 961px) {
  .nav,
  .nav.force-scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
  }
  .nav::before {
    height: 86px !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.88) 0,
      rgba(255, 255, 255, 0.78) 72%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
    backdrop-filter: blur(30px) saturate(1.8) !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0,
      #000 72%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      #000 0,
      #000 72%,
      transparent 100%
    ) !important;
  }
  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    max-width: min(1720px, calc(100vw - 64px)) !important;
    gap: 18px !important;
  }
  .nav .brand {
    flex: 0 0 164px !important;
    min-width: 164px !important;
  }
  .nav .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.scrolled .brand-logo {
    height: 46px !important;
    max-width: 164px !important;
  }
  .nav-inner > nav {
    justify-content: flex-end !important;
  }
  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.scrolled .nav-links {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 14px !important;
    gap: 5px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
  }
  body:not(.mobile-menu-open) .nav:not(.inner-page):not(.scrolled) .nav-links {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    border-bottom-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.65) !important;
    backdrop-filter: blur(24px) saturate(1.65) !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    height: 48px !important;
    padding: 0 11px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.028em !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 22px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.06em !important;
    background: #144d9e !important;
    border-color: #144d9e !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .nav-action:hover {
    background: #0f3b7a !important;
    border-color: #0f3b7a !important;
    box-shadow: none !important;
    transform: none !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 34px) !important;
    gap: 10px !important;
  }
  .nav .brand {
    flex-basis: 128px !important;
    min-width: 128px !important;
  }
  .nav .brand-logo {
    height: 38px !important;
    max-width: 128px !important;
  }
  .nav-links,
  .nav.inner-page .nav-links,
  .nav.scrolled .nav-links {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 10px !important;
    gap: 2px !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    height: 46px !important;
    font-size: 10.8px !important;
    padding: 0 6px !important;
    letter-spacing: 0.012em !important;
  }
  .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 10.8px !important;
    letter-spacing: 0.04em !important;
  }
}
@media (min-width: 961px) and (max-width: 1040px) {
  .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 28px) !important;
    gap: 8px !important;
  }
  .nav .brand {
    flex-basis: 118px !important;
    min-width: 118px !important;
  }
  .nav .brand-logo {
    height: 36px !important;
    max-width: 118px !important;
  }
  .nav-links,
  .nav.inner-page .nav-links,
  .nav.scrolled .nav-links {
    padding: 0 8px !important;
    gap: 1px !important;
  }
  .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    font-size: 10.2px !important;
    padding: 0 4.8px !important;
  }
  .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 10.1px !important;
  }
}
@media (min-width: 961px) {
  .nav,
  .nav.force-scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    top: var(--sab-top-offset, 0px) !important;
    height: 78px !important;
    min-height: 78px !important;
    padding-top: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    position: relative !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    max-width: min(1720px, calc(100vw - 64px)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
  }
  .nav .brand,
  .nav.force-scrolled .brand,
  .nav.inner-page .brand,
  .nav.inner-page.scrolled .brand,
  .nav.scrolled .brand {
    position: relative !important;
    z-index: 3 !important;
    min-width: 156px !important;
    flex: 0 0 156px !important;
    margin-right: auto !important;
    align-items: center !important;
  }
  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.inner-page.scrolled .brand-logo,
  .nav.scrolled .brand-logo {
    height: 46px !important;
    max-width: 156px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: none !important;
    transform: none !important;
  }
  .nav-inner > nav,
  .nav.force-scrolled .nav-inner > nav,
  .nav.inner-page .nav-inner > nav,
  .nav.inner-page.scrolled .nav-inner > nav,
  .nav.scrolled .nav-inner > nav {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: calc(100% - 330px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2 !important;
    overflow: visible !important;
  }
  .nav .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.scrolled .nav-links,
  body:not(.mobile-menu-open) .nav:not(.inner-page):not(.scrolled) .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: 0 0 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }
  .nav .nav-links::after,
  .nav .nav-links::before,
  .nav.inner-page .nav-links::after,
  .nav.inner-page .nav-links::before,
  .nav.scrolled .nav-links::after,
  .nav.scrolled .nav-links::before {
    display: none !important;
    content: none !important;
  }
  .nav .nav-links > li > a,
  .nav.force-scrolled .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.inner-page.scrolled .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 40px !important;
    padding: 14px 9px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    color: #111 !important;
    background: 0 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .nav .nav-links > li > a.active,
  .nav .nav-links > li > a:focus,
  .nav .nav-links > li > a:hover,
  .nav .nav-links > li > a[aria-current="page"],
  .nav .nav-links > li > a[aria-current="true"] {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.inner-page.scrolled .nav-action,
  .nav.scrolled .nav-action {
    position: relative !important;
    z-index: 3 !important;
    margin-left: auto !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 7px !important;
    background: #144d9e !important;
    border: 1px solid #144d9e !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .nav.force-scrolled,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0.48)
    ) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
  }
  .nav:not(.scrolled):not(.force-scrolled) {
    background: 0 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 44px) !important;
    gap: 10px !important;
  }
  .nav .brand,
  .nav.force-scrolled .brand,
  .nav.inner-page .brand,
  .nav.inner-page.scrolled .brand,
  .nav.scrolled .brand {
    min-width: 132px !important;
    flex-basis: 132px !important;
  }
  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.inner-page.scrolled .brand-logo,
  .nav.scrolled .brand-logo {
    height: 40px !important;
    max-width: 132px !important;
  }
  .nav-inner > nav,
  .nav.force-scrolled .nav-inner > nav,
  .nav.inner-page .nav-inner > nav,
  .nav.inner-page.scrolled .nav-inner > nav,
  .nav.scrolled .nav-inner > nav {
    max-width: calc(100% - 300px) !important;
  }
  .nav .nav-links > li > a,
  .nav.force-scrolled .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.inner-page.scrolled .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    font-size: 10.4px !important;
    letter-spacing: 0.012em !important;
    padding: 13px 5.4px !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.inner-page.scrolled .nav-action,
  .nav.scrolled .nav-action {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 10.4px !important;
  }
}
@media (max-width: 960px) {
  .nav {
    top: var(--sab-top-offset, 0px) !important;
    z-index: 230 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(20, 77, 158, 0.12) !important;
    box-shadow: 0 4px 16px rgba(15, 59, 122, 0.1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav-inner {
    min-height: 62px !important;
    padding: 8px 14px !important;
    align-items: center !important;
  }
  .nav .brand .logo-dark {
    display: block !important;
  }
  .nav .brand .logo-light {
    display: none !important;
  }
  .nav .brand-logo {
    height: 38px !important;
    max-width: 120px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: none !important;
  }
  .hamburger {
    display: flex !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(20, 77, 158, 0.22) !important;
    box-shadow: 0 6px 16px rgba(15, 59, 122, 0.12) !important;
    transition:
      background 0.16s ease,
      transform 0.16s ease !important;
  }
  .hamburger span,
  .hamburger.open {
    background: var(--royal, #144d9e) !important;
  }
  .hamburger span {
    height: 2.6px !important;
    width: 23px !important;
    transition:
      transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.14s ease !important;
  }
  .hamburger.open {
    border-color: var(--royal, #144d9e) !important;
    box-shadow: 0 8px 20px rgba(20, 77, 158, 0.22) !important;
  }
  .hamburger,
  .hamburger.open span {
    background: #fff !important;
  }
  .nav-links {
    top: var(
      --sab-menu-top,
      calc(var(--sab-top-offset, 0px) + var(--sab-nav-height, 62px) + 0px)
    ) !important;
    left: 50% !important;
    right: auto !important;
    width: min(360px, calc(100vw - 28px)) !important;
    transform: translate3d(-50%, -8px, 0) !important;
    transform-origin: top center !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(20, 77, 158, 0.12) !important;
    box-shadow: 0 18px 44px rgba(15, 59, 122, 0.18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: transform, opacity !important;
    padding: 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.14s ease,
      visibility 0.18s !important;
  }
  .nav-links.open {
    transform: translate3d(-50%, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .nav-links > li > a {
    color: var(--heading, #0f3b7a) !important;
    background: rgba(246, 249, 254, 0.94) !important;
    border: 1px solid rgba(20, 77, 158, 0.1) !important;
    box-shadow: none !important;
  }
  .nav-links > li > a.active,
  .nav-links > li > a:focus,
  .nav-links > li > a:hover,
  .nav-links > li > a[aria-current="page"],
  .nav-links > li > a[aria-current="true"] {
    color: var(--royal, #144d9e) !important;
    background: #eaf1fb !important;
    border-color: rgba(20, 77, 158, 0.2) !important;
  }
}
.section-head .page-h1 {
  font-family: var(--heading-font, "Poppins", sans-serif);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.12;
  color: var(--heading);
  margin: 10px 0 14px;
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #f9a20b !important;
  outline-offset: 3px !important;
}
html:not(.sab-anim) .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
@media (prefers-reduced-motion: reduce) {
  html.sab-anim .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   v142 — Stable transparent-to-glass navigation
   Keeps identical geometry before/after scroll; only the
   full-width glass surface fades in.
   ========================================================= */
.nav,
.nav.scrolled,
.nav.inner-page,
.nav.inner-page.scrolled,
.nav.force-scrolled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom: 1px solid rgba(20, 77, 158, 0.1) !important;
  box-shadow: 0 8px 28px rgba(10, 44, 92, 0.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  transition: opacity 0.46s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.nav.scrolled::before,
.nav.inner-page.scrolled::before,
.nav.force-scrolled::before,
.nav.menu-open::before {
  opacity: 1 !important;
}

/* Disable the old lower-edge blur layer. */
.nav-blur {
  display: none !important;
}

@media (min-width: 961px) {
  .nav,
  .nav.scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.force-scrolled {
    top: var(--sab-top-offset, 0px) !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    padding: 0 !important;
    transition: top 0.46s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }

  .nav-inner,
  .nav.scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.force-scrolled .nav-inner {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    padding: 0 !important;
    gap: 14px !important;
  }

  .nav .brand-logo,
  .nav.scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.force-scrolled .brand-logo {
    height: 40px !important;
    transform: none !important;
  }

  .nav-links,
  .nav.scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.force-scrolled .nav-links {
    padding: 0 !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .nav-links > li > a,
  .nav.scrolled .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.force-scrolled .nav-links > li > a {
    padding: 12px 10px !important;
  }

  .nav-action,
  .nav.scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.force-scrolled .nav-action {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
  }
}

@media (max-width: 960px) {
  .nav,
  .nav.scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.force-scrolled {
    top: var(--sab-top-offset, 0px) !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 0 !important;
    transition: top 0.46s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }

  .nav-inner,
  .nav.scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.force-scrolled .nav-inner {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 0 14px !important;
  }

  .nav .brand-logo,
  .nav.scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.force-scrolled .brand-logo {
    height: 38px !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav::before,
  .nav,
  .nav.scrolled {
    transition: none !important;
  }
}


/* =========================================================
   v143 UI/UX stabilization
   - Flat, uniform desktop glass navigation
   - No layout jump between transparent and scrolled states
   - Stronger focus, contrast, hierarchy and responsive targets
   ========================================================= */

:root {
  --ui-focus: #0f4fb3;
  --ui-focus-ring: rgba(15, 79, 179, 0.28);
  --ui-glass: rgba(255, 255, 255, 0.82);
  --ui-glass-border: rgba(15, 59, 122, 0.12);
}

/* Accessible, visible keyboard navigation across links and controls. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--ui-focus-ring) !important;
}

/* Keep interactive controls comfortably tappable and visually consistent. */
:where(.btn, button, input[type="button"], input[type="submit"]) {
  min-height: 44px;
}
.btn {
  border-radius: 8px;
  font-weight: 700;
}
.btn.solid,
.btn.fill-royal {
  background: #0f4fb3;
  border-color: #0f4fb3;
  color: #fff;
}
.btn.solid:hover,
.btn.fill-royal:hover {
  background: #0a397f;
  border-color: #0a397f;
  color: #fff;
}

/* Stronger hierarchy and readable line lengths without changing content. */
.hero-title,
.section-head h2 {
  color: #0a2c5c;
  text-wrap: balance;
}
.hero-title {
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.hero-copy,
.section-head p {
  color: #42516b;
  max-width: 68ch;
}
.hero .btn.solid,
.hero .btn.fill-royal {
  box-shadow: 0 10px 24px rgba(15, 79, 179, 0.22);
}

@media (min-width: 961px) {
  :root {
    --sab-nav-offset: 14px;
    --sab-nav-height-stable: 66px;
  }

  /* Geometry is identical before and after scrolling. */
  .nav,
  .nav.force-scrolled,
  .nav.scrolled {
    padding-top: var(--sab-nav-offset) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .nav {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav::before,
  .nav::after,
  .nav.force-scrolled::before,
  .nav.force-scrolled::after,
  .nav.inner-page.scrolled::before,
  .nav.inner-page.scrolled::after,
  .nav.scrolled::before,
  .nav.scrolled::after {
    content: none !important;
    display: none !important;
    background: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .nav-blur {
    display: none !important;
  }

  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.scrolled .nav-inner,
  .nav.inner-page:not(.scrolled) .nav-inner {
    max-width: min(1720px, calc(100vw - 96px)) !important;
    min-height: var(--sab-nav-height-stable) !important;
    padding: 0 !important;
    gap: 28px !important;
  }
  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.scrolled .brand-logo {
    height: 46px !important;
    transform: none !important;
  }

  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.scrolled .nav-links,
  .nav.inner-page:not(.scrolled) .nav-links {
    gap: 7px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }
  .nav-links::before,
  .nav-links::after {
    content: none !important;
    display: none !important;
  }
  .nav-links > li > a,
  .nav.force-scrolled .nav-links > li > a,
  .nav.scrolled .nav-links > li > a,
  .nav.inner-page:not(.scrolled) .nav-links > li > a {
    min-height: 44px;
    padding: 11px 13px !important;
    border-radius: 6px !important;
    color: #111827 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.scrolled .nav-action {
    min-height: 44px !important;
    padding: 0 22px !important;
    transform: none;
  }

  /* Only the uniform glass background changes on scroll/inner pages. */
  .nav.force-scrolled,
  .nav.inner-page,
  .nav.scrolled {
    background: var(--ui-glass) !important;
    border-bottom: 1px solid var(--ui-glass-border) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
    backdrop-filter: blur(18px) saturate(1.35) !important;
    box-shadow: 0 6px 20px rgba(15, 59, 122, 0.08) !important;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 44px) !important;
    gap: 16px !important;
  }
  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.scrolled .brand-logo {
    height: 40px !important;
  }
  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.scrolled .nav-links {
    gap: 3px !important;
    padding: 8px 10px !important;
  }
  .nav-links > li > a,
  .nav.force-scrolled .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    padding: 10px 8px !important;
  }
}

@media (max-width: 960px) {
  .nav,
  .nav.scrolled,
  .nav.inner-page {
    background: rgba(15, 59, 122, 0.94) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
    backdrop-filter: blur(16px) saturate(1.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 5px 18px rgba(8, 35, 75, 0.18) !important;
  }
  .nav::before,
  .nav::after {
    content: none !important;
    display: none !important;
  }
  .nav-inner,
  .nav.scrolled .nav-inner {
    min-height: 64px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    min-height: 46px;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .hamburger {
    min-width: 44px;
    min-height: 44px;
  }
  .hero {
    padding-top: 128px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
    line-height: 1.58;
  }
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .hero-actions,
  .form-confirm-actions {
    gap: 12px;
  }
  .hero-actions .btn,
  .form-confirm-actions .btn {
    width: 100%;
  }
  .dash-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-grid > div {
    min-width: 0;
  }
  .dash-grid span,
  .rrow span {
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   v144 navbar vertical alignment hotfix
   Keep identical geometry with and without the glass background.
   ========================================================= */
@media (min-width: 961px) {
  :root {
    --sab-nav-offset: 0px;
    --sab-nav-height-stable: 66px;
  }

  .nav,
  .nav.force-scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    top: var(--sab-top-offset, 0px) !important;
    height: var(--sab-nav-height-stable) !important;
    min-height: var(--sab-nav-height-stable) !important;
    max-height: var(--sab-nav-height-stable) !important;
    padding: 0 !important;
  }

  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.scrolled .nav-inner {
    height: var(--sab-nav-height-stable) !important;
    min-height: var(--sab-nav-height-stable) !important;
    max-height: var(--sab-nav-height-stable) !important;
    padding: 0 !important;
    align-items: center !important;
  }

  .nav .brand,
  .nav-inner > nav,
  .nav-links,
  .nav-action {
    align-self: center !important;
  }

  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.scrolled .nav-links {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .nav .brand-logo,
  .nav.force-scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.scrolled .brand-logo {
    height: 42px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
}


/* =========================================================
   v145 navbar spacing + smooth glass-state transition
   Geometry never changes; only the visual background animates.
   ========================================================= */
@media (min-width: 961px) {
  .nav,
  .nav.force-scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.scrolled {
    padding: 0 !important;
    transition:
      background-color 260ms ease,
      border-color 260ms ease,
      box-shadow 260ms ease,
      -webkit-backdrop-filter 260ms ease,
      backdrop-filter 260ms ease !important;
    will-change: background-color, backdrop-filter;
  }

  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.inner-page.scrolled .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: min(1720px, calc(100vw - 96px)) !important;
    gap: 28px !important;
    transition: none !important;
  }

  .nav-inner > nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.inner-page.scrolled .nav-links,
  .nav.scrolled .nav-links {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    column-gap: 2px !important;
    row-gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    transition:
      background-color 260ms ease,
      border-color 260ms ease,
      box-shadow 260ms ease,
      -webkit-backdrop-filter 260ms ease,
      backdrop-filter 260ms ease !important;
  }

  .nav-links > li,
  .nav.force-scrolled .nav-links > li,
  .nav.inner-page .nav-links > li,
  .nav.inner-page.scrolled .nav-links > li,
  .nav.scrolled .nav-links > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-links > li > a,
  .nav.force-scrolled .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.inner-page.scrolled .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    min-height: 44px !important;
    padding: 11px 10px !important;
    margin: 0 !important;
    letter-spacing: 0.04em !important;
    transform: none !important;
    transition:
      background-color 180ms ease,
      color 180ms ease !important;
  }

  .nav .brand,
  .nav.force-scrolled .brand,
  .nav.inner-page .brand,
  .nav.scrolled .brand {
    flex: 0 0 auto !important;
    min-width: 220px !important;
    margin: 0 !important;
  }

  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.inner-page.scrolled .nav-action,
  .nav.scrolled .nav-action {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 22px !important;
    margin: 0 !important;
    transform: none !important;
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease !important;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .nav-inner,
  .nav.force-scrolled .nav-inner,
  .nav.inner-page .nav-inner,
  .nav.scrolled .nav-inner {
    max-width: calc(100vw - 44px) !important;
    gap: 16px !important;
  }
  .nav .brand,
  .nav.force-scrolled .brand,
  .nav.inner-page .brand,
  .nav.scrolled .brand {
    min-width: 170px !important;
  }
  .nav-links,
  .nav.force-scrolled .nav-links,
  .nav.inner-page .nav-links,
  .nav.scrolled .nav-links {
    gap: 1px !important;
    column-gap: 1px !important;
  }
  .nav-links > li > a,
  .nav.force-scrolled .nav-links > li > a,
  .nav.inner-page .nav-links > li > a,
  .nav.scrolled .nav-links > li > a {
    padding: 10px 8px !important;
  }
  .nav-action,
  .nav.force-scrolled .nav-action,
  .nav.inner-page .nav-action,
  .nav.scrolled .nav-action {
    padding: 0 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav-links,
  .nav-links > li > a,
  .nav-action {
    transition: none !important;
  }
}


/* v146 definitive state-neutral navbar geometry */
@media (min-width: 961px) {
  #nav .nav-inner,
  #nav.force-scrolled .nav-inner,
  #nav.inner-page .nav-inner,
  #nav.scrolled .nav-inner {
    transition: none !important;
  }

  #nav #navLinks,
  #nav.force-scrolled #navLinks,
  #nav.inner-page #navLinks,
  #nav.scrolled #navLinks {
    gap: 2px !important;
    column-gap: 2px !important;
    row-gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition:
      background-color 260ms ease,
      border-color 260ms ease,
      box-shadow 260ms ease,
      -webkit-backdrop-filter 260ms ease,
      backdrop-filter 260ms ease !important;
  }

  #nav #navLinks > li,
  #nav.force-scrolled #navLinks > li,
  #nav.inner-page #navLinks > li,
  #nav.scrolled #navLinks > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #nav #navLinks > li > a,
  #nav.force-scrolled #navLinks > li > a,
  #nav.inner-page #navLinks > li > a,
  #nav.scrolled #navLinks > li > a {
    padding: 11px 10px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    transform: none !important;
    transition:
      background-color 180ms ease,
      color 180ms ease !important;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  #nav #navLinks,
  #nav.force-scrolled #navLinks,
  #nav.inner-page #navLinks,
  #nav.scrolled #navLinks {
    gap: 1px !important;
    column-gap: 1px !important;
  }

  #nav #navLinks > li > a,
  #nav.force-scrolled #navLinks > li > a,
  #nav.inner-page #navLinks > li > a,
  #nav.scrolled #navLinks > li > a {
    padding: 10px 8px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.03em !important;
  }
}


/* v147 remove the final 1px state border-width shift */
@media (min-width: 961px) {
  #nav #navLinks,
  #nav.force-scrolled #navLinks,
  #nav.inner-page #navLinks,
  #nav.inner-page.scrolled #navLinks,
  #nav.scrolled #navLinks {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: max-content !important;
    border: 1px solid transparent !important;
  }
}


/* =========================================================
   v148 refined glass + searchable international phone fields
   ========================================================= */
:root {
  --ui-glass: rgba(255, 255, 255, 0.70);
  --ui-glass-border: rgba(255, 255, 255, 0.66);
}

@media (min-width: 961px) {
  .nav.force-scrolled,
  .nav.inner-page,
  .nav.scrolled {
    background: rgba(255, 255, 255, 0.70) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.52) !important;
    backdrop-filter: blur(24px) saturate(1.52) !important;
    box-shadow:
      0 6px 22px rgba(15, 59, 122, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }
}

.pc-field {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border, #dfe6f1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}
.pc-field:focus-within {
  border-color: #0f4fb3;
  box-shadow: 0 0 0 4px rgba(15, 79, 179, 0.13);
  background: #fff;
}
.pc-country-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 106px;
  min-height: 46px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid rgba(15, 59, 122, 0.12);
  border-radius: 9px 0 0 9px;
  background: rgba(236, 243, 253, 0.82);
  color: #102a50;
  font: 700 14px/1 "Poppins", sans-serif;
  cursor: pointer;
}
.pc-country-btn:hover {
  background: rgba(219, 233, 252, 0.95);
}
.pc-country-btn.is-locked {
  cursor: default;
  background: rgba(232, 240, 252, 0.92);
}
.pc-country-btn.is-locked .pc-chevron {
  opacity: 0.38;
}
.pc-flag,
.pc-option-flag {
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 19px;
  line-height: 1;
}
.pc-dial {
  direction: ltr;
  white-space: nowrap;
}
.pc-chevron {
  color: #64748b;
  font-size: 15px;
  transform: translateY(-1px);
}
.pc-local-input {
  width: 100% !important;
  min-width: 0;
  min-height: 46px;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 0 !important;
  border-radius: 0 9px 9px 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--heading, #102a50);
  font: 500 15px/1.45 "Poppins", sans-serif;
  direction: ltr;
}
.pc-local-input::placeholder {
  color: #8290a6;
  opacity: 1;
}
.pc-source-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}
.pc-panel {
  position: absolute;
  z-index: 1500;
  top: calc(100% + 8px);
  left: 0;
  width: min(390px, calc(100vw - 32px));
  max-height: 390px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  backdrop-filter: blur(24px) saturate(1.45);
  box-shadow: 0 20px 54px rgba(15, 41, 77, 0.2);
  overflow: hidden;
}
.pc-panel[hidden] {
  display: none !important;
}
.pc-search-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 8px;
}
.pc-search {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid rgba(15, 59, 122, 0.14);
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #102a50;
  font: 500 14px/1.4 "Poppins", sans-serif;
}
.pc-search:focus {
  border-color: #0f4fb3;
  box-shadow: 0 0 0 3px rgba(15, 79, 179, 0.12);
}
.pc-list {
  max-height: 310px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pc-option {
  appearance: none;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 45px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #233653;
  text-align: left;
  cursor: pointer;
}
.pc-option:hover,
.pc-option.is-selected {
  background: rgba(219, 233, 252, 0.74);
  color: #0f4fb3;
}
.pc-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 13.5px/1.3 "Poppins", sans-serif;
}
.pc-option-code {
  color: #53657e;
  font: 700 13px/1 "Poppins", sans-serif;
  direction: ltr;
}
.pc-empty {
  padding: 24px 12px;
  color: #6b7b91;
  text-align: center;
  font-size: 14px;
}

@media (max-width: 600px) {
  .pc-country-btn {
    min-width: 98px;
    padding: 0 10px;
  }
  .pc-panel {
    width: min(360px, calc(100vw - 40px));
    max-height: 360px;
  }
  .pc-list {
    max-height: 278px;
  }
}

.pc-country-btn:disabled {
  opacity: 1 !important;
  color: #102a50 !important;
  -webkit-text-fill-color: #102a50;
}

@media (max-width: 600px) {
  .pc-panel {
    left: 50%;
    right: auto;
    width: min(350px, calc(100vw - 32px));
    transform: translateX(-50%);
  }
}


/* v149 final-confirmation validation feedback */
.form-confirm-error {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(196, 61, 107, 0.22);
  border-radius: 10px;
  background: rgba(252, 233, 239, 0.9);
  color: #9f234d;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
}
.form-confirm-error.show {
  display: flex;
  animation: pcErrorIn 220ms ease both;
}
.form-confirm-error .motion-circle {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin: 0;
}
@keyframes pcErrorIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   v150 pricing badge alignment — badge-only change
   ========================================================= */
.pop-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  top: -15px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #0f4fb3 0%, #144d9e 55%, #0a3474 100%) !important;
  color: #fff !important;
  box-shadow:
    0 8px 20px rgba(15, 59, 122, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.09em !important;
  text-align: center !important;
}
.pop-tag .badge-crown {
  display: block !important;
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  color: #ffd166;
  transform: translateY(-0.25px);
}

.master-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  text-align: center !important;
}
.master-badge .badge-crown {
  display: block !important;
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: translateY(-0.25px);
}

.price-card.on-sale .sale-ribbon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* =========================================================
   v153 — Mobile navbar matches desktop glass + blue logo
   2026-07-12
   ========================================================= */
@media (max-width: 960px) {
  .nav,
  .nav.scrolled,
  .nav.inner-page,
  .nav.inner-page.scrolled,
  .nav.force-scrolled,
  .nav.menu-open {
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 1px solid rgba(20, 77, 158, 0.12) !important;
    box-shadow: 0 8px 28px rgba(10, 44, 92, 0.10) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
  }
  .nav::before,
  .nav::after {
    content: none !important;
    display: none !important;
  }
  .nav .brand .logo-dark,
  .nav.scrolled .brand .logo-dark,
  .nav.inner-page .brand .logo-dark,
  .nav.force-scrolled .brand .logo-dark {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .nav .brand .logo-light,
  .nav.scrolled .brand .logo-light,
  .nav.inner-page .brand .logo-light,
  .nav.force-scrolled .brand .logo-light {
    display: none !important;
  }
  .nav .brand-logo,
  .nav.scrolled .brand-logo,
  .nav.inner-page .brand-logo,
  .nav.force-scrolled .brand-logo {
    height: 40px !important;
    width: auto !important;
    max-width: 132px !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
  .hamburger,
  .hamburger.open {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(20, 77, 158, 0.20) !important;
    box-shadow: 0 6px 18px rgba(15, 59, 122, 0.12) !important;
  }
  .hamburger span,
  .hamburger.open span {
    background: var(--royal, #144d9e) !important;
  }
  .nav-links,
  .nav-links.open {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(20, 77, 158, 0.12) !important;
    box-shadow: 0 18px 48px rgba(15, 59, 122, 0.16) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
  }
}

/* v203 resilient plan badge */
.price-card.popular{padding-top:max(82px,calc(38px + 2.5em))!important;overflow:visible}.price-card .pop-tag{top:16px!important;left:16px!important;right:72px!important;transform:none!important;width:auto!important;max-width:none!important;min-height:34px!important;padding:8px 13px!important;border:1px solid rgba(255,255,255,.26)!important;border-radius:9px!important;background:linear-gradient(135deg,#144d9e,#1b65ba)!important;color:#fff!important;box-shadow:0 7px 18px rgba(20,77,158,.22)!important;font-size:.7rem!important;line-height:1.25!important;letter-spacing:.075em!important;white-space:normal!important;overflow-wrap:anywhere!important;text-wrap:balance;text-align:center!important}.price-card .pop-tag .badge-crown{width:17px!important;height:17px!important;flex:0 0 auto}.price-card.on-sale .sale-ribbon{top:18px!important;right:-2px!important;z-index:3}@media(max-width:480px){.price-card.popular{padding-top:94px!important}.price-card .pop-tag{right:62px!important}}


/* v205 professional centered plan badges */
.price-card.popular{padding-top:108px!important;overflow:visible!important}.price-card .pop-tag{top:14px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:max-content!important;max-width:calc(100% - 32px)!important;min-height:38px!important;padding:8px 16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;border:1px solid rgba(255,255,255,.3)!important;border-bottom:3px solid #f9a20b!important;border-radius:9px!important;background:linear-gradient(135deg,#0f3c7a,#1d63b6)!important;color:#fff!important;box-shadow:0 7px 18px rgba(20,77,158,.2)!important;font-size:.68rem!important;font-weight:800!important;line-height:1.25!important;letter-spacing:.07em!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;text-wrap:balance;z-index:4!important}.price-card .pop-tag .badge-crown{width:16px!important;height:16px!important;flex:0 0 16px!important;color:#ffd36a!important}.price-card.on-sale .sale-ribbon{top:66px!important;right:16px!important;left:auto!important;min-width:56px!important;min-height:28px!important;padding:5px 10px!important;border-radius:7px!important;box-shadow:0 5px 13px rgba(213,42,73,.2)!important;z-index:3!important}@media(max-width:760px){.price-card.popular{padding-top:108px!important}.price-card .pop-tag{max-width:calc(100% - 28px)!important}}


/* v207 final border-mounted plan badges: no content displacement */
.price-card.popular{
  padding-top:30px!important;
  overflow:visible!important;
}
.price-card .pop-tag{
  top:-15px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  max-width:calc(100% - 36px)!important;
  min-height:32px!important;
  padding:6px 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:2px solid #fff!important;
  border-bottom-color:#f9a20b!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#0d3a78 0%,#1761b8 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(20,77,158,.22)!important;
  font-size:.65rem!important;
  font-weight:850!important;
  line-height:1.15!important;
  letter-spacing:.065em!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
  text-wrap:balance;
  z-index:6!important;
}
.price-card .pop-tag .badge-crown{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  color:#ffd36a!important;
}
.price-card.on-sale .sale-ribbon{
  top:30px!important;
  right:14px!important;
  left:auto!important;
  min-width:54px!important;
  min-height:26px!important;
  padding:4px 9px!important;
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#d81f4a,#f13b61)!important;
  color:#fff!important;
  box-shadow:0 6px 15px rgba(216,31,74,.22)!important;
  font-size:.7rem!important;
  font-weight:900!important;
  line-height:1!important;
  z-index:5!important;
}
.price-card.on-sale .pname{padding-right:66px!important}
@media(max-width:760px){
  .price-card.popular{padding-top:30px!important}
  .price-card .pop-tag{top:-15px!important;max-width:calc(100% - 30px)!important}
  .price-card.on-sale .sale-ribbon{top:30px!important;right:12px!important}
}


/* v208 compact border-mounted plan tags: mustard is the only border accent. */
.price-card .pop-tag{
  top:-14px!important;
  width:max-content!important;
  max-width:68%!important;
  min-height:28px!important;
  padding:5px 11px!important;
  gap:5px!important;
  border:2px solid #f9a20b!important;
  border-radius:999px!important;
  background:#144d9e!important;
  box-shadow:0 5px 13px rgba(20,77,158,.18)!important;
  font-size:.58rem!important;
  line-height:1.12!important;
  letter-spacing:.055em!important;
}
.price-card .pop-tag .badge-crown{width:13px!important;height:13px!important;flex-basis:13px!important;color:#f9c04b!important}
.price-card.on-sale .sale-ribbon{top:28px!important;right:12px!important;min-width:50px!important;min-height:24px!important;padding:3px 8px!important;border:0!important;background:linear-gradient(135deg,#d81f4a,#f13b61)!important;box-shadow:0 5px 12px rgba(216,31,74,.2)!important;font-size:.66rem!important}
.price-card.on-sale .pname{padding-right:60px!important}

/* Journey line fills and reverses with the user's scroll position. */
.timeline{--journey-progress:0}
.timeline::before{background:#d8e3f0!important;width:3px!important;border-radius:999px;z-index:0}
.timeline::after{content:"";position:absolute;left:22px;top:6px;width:3px;height:calc((100% - 12px) * var(--journey-progress));max-height:calc(100% - 12px);border-radius:999px;background:linear-gradient(180deg,#144d9e 0%,#2783de 76%,#f9a20b 100%);box-shadow:0 0 10px rgba(20,77,158,.22);z-index:1;transition:height .1s linear}
.tl-item{z-index:2}.tl-marker{z-index:3;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}.tl-item.is-passed .tl-marker{background:#144d9e;box-shadow:0 0 0 5px var(--cloud),0 5px 14px rgba(20,77,158,.2);transform:scale(1.03)}

/* Existing-student extension/change verification card. */
.extension-gate{max-width:100%;text-align:left}
.extension-gate h3{margin:8px 0 8px;color:var(--heading);font-size:1.25rem}
.extension-gate-copy{margin:0 0 18px;color:var(--body);line-height:1.65}
.extension-gate .field{margin-bottom:12px}
.extension-gate-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch;margin-top:4px}
.extension-gate-actions .btn{width:100%;min-height:46px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.2;font-size:.78rem;font-weight:800}
.extension-gate #extOtpBox{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.extension-gate .auth-message{margin-top:12px}
@media(max-width:560px){.price-card .pop-tag{max-width:72%!important}.extension-gate-actions{grid-template-columns:1fr}.extension-gate-actions .btn{min-height:44px}}


/* ===== v225 universal optical centering ===== */
/* Every visual button keeps its label/icon centered on both axes. */
:where(
  button:not(.hamburger),
  .btn,
  .nav-action,
  .sale-cta,
  .blog-more,
  .btn-back,
  [role="button"]
){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  vertical-align:middle!important;
  line-height:1.2!important;
}
:where(input[type="submit"],input[type="button"],input[type="reset"]){
  text-align:center!important;
  line-height:normal!important;
}
:where(.btn,.nav-action,.sale-cta,.blog-more,.btn-back,button:not(.hamburger)) > :where(span,svg,i){
  align-self:center!important;
}

/* Equal-height visual cards: center the complete content block optically. */
.stat,.lp-stat{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-height:145px;
  box-sizing:border-box;
}
.soft-card,.ach-card,.voice-card,.svc-home-card,.wu-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  text-align:center!important;
}
.soft-card .ic,.svc-home-ic,.wu-ic{margin-left:auto!important;margin-right:auto!important}
.ach-medal,.vname{justify-content:center!important}
.voice-card audio{margin-left:auto!important;margin-right:auto!important}

/* Center card copy without moving card controls from their original positions. */
.price-card:not(.master-card){text-align:center!important}
.price-card:not(.master-card) :where(.feature-list,.trial-feats){width:100%!important;text-align:left!important}
.master-card .master-info,.master-card .master-right{text-align:center!important}
.master-card .master-feats{display:inline-block!important;text-align:left!important}

/* v226: parent rows keep their original alignment. Only text inside buttons is centered. */

/* =========================================================================
   v228 — DESIGN POLISH (headings, achievements, services, master card)
   ========================================================================= */
.section-head .page-h1 { text-wrap: balance; }

/* Achievements / awards cards — premium look */
.ach-card {
  background: linear-gradient(165deg, #ffffff 0%, #f3f7ff 100%) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--mustard) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.ach-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow) !important;
  border-color: var(--border-strong) !important;
}
.ach-card .ach-year {
  background: linear-gradient(135deg, var(--royal), #1f63c6) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(20, 77, 158, 0.24) !important;
}
.ach-card .ach-medal {
  background: linear-gradient(135deg, #fff6e3, #fceec6) !important;
  color: #7a4f02 !important;
  border: 1px solid #f2d78c !important;
}
.ach-card .ach-medal svg { color: var(--mustard) !important; }

/* Home services cards — cleaner, aligned, lifted */
.svc-home-grid { gap: 26px; align-items: stretch; }
.svc-home-card {
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(20, 77, 158, 0.1) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  overflow: hidden !important;
}
.svc-home-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--royal), var(--mustard));
}
.svc-home-card.quran::before { background: linear-gradient(90deg, var(--mustard), var(--royal)); }
.svc-home-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 28px 56px rgba(20, 77, 158, 0.16) !important;
}
.svc-home-ic {
  background: linear-gradient(135deg, var(--royal), #1f63c6) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(20, 77, 158, 0.28) !important;
}
.svc-home-actions { justify-content: center; }

/* Master Mentorship card — clean, intentional text alignment on desktop */
@media (min-width: 761px) {
  .master-card { align-items: center; }
  .master-card .master-info { text-align: left !important; }
  .master-card .master-badge { margin-right: auto !important; }
  .master-card h3 { text-align: left !important; }
  .master-card .m-sub { text-align: left !important; margin-left: 0 !important; }
  .master-card .master-feats { display: grid !important; grid-template-columns: 1fr 1fr; text-align: left !important; }
}


/* v229 FLUID RESPONSIVE SYSTEM */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, iframe, canvas { max-width: 100%; height: auto; }
section, header, footer, main { overflow-x: clip; }
@media (max-width: 900px) { .svc-home-grid, .ach-grid, [class*="card-grid"], [class*="cards-grid"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 620px) { .svc-home-grid, .ach-grid, [class*="card-grid"], [class*="cards-grid"] { grid-template-columns: minmax(0,1fr) !important; } h1, .page-h1 { overflow-wrap: anywhere; } .container, [class*="container"] { padding-left: 16px !important; padding-right: 16px !important; } }


/* Recognition & Awards — premium redesign v250 (ribbon banner) */
#achievements .award-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.award-card{position:relative;overflow:hidden;text-align:center;background:linear-gradient(152deg,#143f7c 0%,#0f2f5f 55%,#0b2247 100%);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:26px 18px 20px;box-shadow:0 12px 28px rgba(8,32,66,.28);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.award-card::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 72% at 50% -12%,rgba(249,162,11,.16),transparent 62%);pointer-events:none}
.award-card>*{position:relative;z-index:1}
.award-card:hover{transform:translateY(-7px);border-color:rgba(249,162,11,.42);box-shadow:0 26px 54px rgba(8,32,66,.46),0 0 0 1px rgba(249,162,11,.22)}
/* corner ribbon flag with sliding gold shine + jiggling label */
.award-ribbon{position:absolute;top:0;right:16px;z-index:3;width:36px;height:48px;margin:0;padding:7px 0 0;display:flex;align-items:flex-start;justify-content:center;background:linear-gradient(168deg,#ffdf95 0%,#f9a20b 52%,#cf7d08 100%);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);color:#4a2f00;font-size:.66rem;font-weight:900;letter-spacing:.01em;line-height:1;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.3)}
.award-ribbon.silver{background:linear-gradient(168deg,#f4f7fb 0%,#c7d2de 52%,#98a6b6 100%);color:#2b3542}
.award-ribbon::after{content:"";position:absolute;top:-10%;left:-140%;width:58%;height:130%;background:linear-gradient(104deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);animation:awardRibbonShine 6.5s ease-in-out infinite}
.award-ribbon b{display:inline-block;font-weight:900;animation:awardRibbonJiggle 6.5s ease-in-out infinite;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.award-card:nth-child(2) .award-ribbon::after,.award-card:nth-child(2) .award-ribbon b{animation-delay:.9s}
.award-card:nth-child(3) .award-ribbon::after,.award-card:nth-child(3) .award-ribbon b{animation-delay:1.8s}
.award-card:nth-child(4) .award-ribbon::after,.award-card:nth-child(4) .award-ribbon b{animation-delay:2.7s}
.award-card:nth-child(5) .award-ribbon::after,.award-card:nth-child(5) .award-ribbon b{animation-delay:3.6s}
.award-card:nth-child(6) .award-ribbon::after,.award-card:nth-child(6) .award-ribbon b{animation-delay:4.5s}
@keyframes awardRibbonShine{0%,58%{left:-140%}78%{left:150%}100%{left:150%}}
@keyframes awardRibbonJiggle{0%,63%{transform:translateY(0) rotate(0deg)}66%{transform:translateY(-1.6px) rotate(-7deg)}70%{transform:translateY(.4px) rotate(6deg)}74%{transform:translateY(-1px) rotate(-4deg)}78%{transform:translateY(0) rotate(2deg)}82%,100%{transform:translateY(0) rotate(0deg)}}
.award-medallion{width:50px;height:50px;margin:0 auto 11px;border-radius:50%;display:grid;place-items:center;color:#ffd88a;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.22),rgba(255,255,255,.05));border:2px solid rgba(249,162,11,.55);box-shadow:0 0 0 6px rgba(249,162,11,.09),inset 0 0 14px rgba(249,162,11,.16)}
.award-medallion svg{width:24px;height:24px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.award-year{display:block;font-size:.635rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,216,138,.9);margin:0 0 8px}
.award-title{color:#fff;font-size:.98rem;font-weight:800;line-height:1.3;margin:0 0 8px;text-wrap:balance}
.award-desc{color:rgba(255,255,255,.82);font-size:.795rem;line-height:1.55;margin:0 0 14px}
.award-tag{display:inline-block;margin-top:auto;color:#ffd88a;font-weight:700;font-size:.685rem;letter-spacing:.03em;border:1px solid rgba(249,162,11,.45);background:rgba(249,162,11,.12);padding:6px 13px;border-radius:999px}
/* highlights note card */
/* v250: light-background friendly highlights banner */
.award-note{grid-column:1/-1!important;position:relative;overflow:hidden;display:flex!important;align-items:center;gap:18px;text-align:left;background:linear-gradient(115deg,#fffaf0 0%,#f6f9ff 55%,#ffffff 100%)!important;border:1.5px solid rgba(16,53,107,.16)!important;border-left:6px solid #f9a20b!important;border-radius:18px;padding:22px 26px;box-shadow:0 12px 30px rgba(16,53,107,.09)!important}
.award-note::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(249,162,11,.16),transparent 70%);pointer-events:none}
.award-note-icon{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,#ffd36a 0%,#f9a20b 45%,#e08a00 100%);border:none;box-shadow:0 8px 18px rgba(249,162,11,.34)}
.award-note-icon svg{width:27px;height:27px}
.award-note h3{color:#0e2a52!important;font-size:1.1rem;font-weight:800;margin:0 0 6px;letter-spacing:.005em}
.award-note p{color:#3d4f68!important;font-size:.905rem;line-height:1.7;margin:0}
.award-note *{-webkit-text-fill-color:currentColor}
.award-note-body{position:relative;z-index:1}
@media (max-width:1024px){#achievements .award-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){#achievements .award-grid{grid-template-columns:1fr}.award-card{padding:24px 16px 18px}.award-ribbon{right:14px}.award-note{flex-direction:column;text-align:center;gap:12px;padding:22px 18px}}
@media (prefers-reduced-motion:reduce){.award-ribbon::after,.award-ribbon b{animation:none}.award-card{transition:none}}

/* v245 — branded plan heading and persistent Find Student ID verification state. */
.plan-switch-gate h3{max-width:620px;margin:10px 0 12px!important;color:#0a2c5c!important;font-family:Arial,sans-serif;font-size:clamp(1.45rem,3vw,2rem)!important;font-weight:900!important;line-height:.98!important;letter-spacing:-.035em;text-transform:uppercase}
@media(max-width:560px){.plan-switch-gate h3{font-size:1.55rem!important;line-height:1.02!important}}
.plan-switch-gate .switch-choice{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;margin:20px 0}
.plan-switch-gate .switch-choice .btn{width:100%;margin:0;white-space:normal}
.plan-switch-gate .switch-choice>span,.plan-switch-gate .switch-choice>b{text-align:center}
@media(max-width:640px){.plan-switch-gate .switch-choice{grid-template-columns:1fr}.plan-switch-gate .switch-choice>span{margin:-4px 0}.plan-switch-gate .switch-choice>b{padding:4px 0}}
/* v244 — persistent Find Student ID verification state. */
.sid-verified{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0 auto 10px;padding:7px 11px;border:1px solid rgba(29,110,66,.3);border-radius:8px;background:rgba(29,110,66,.1);color:#1d6e42;font-size:.78rem;font-weight:800;letter-spacing:.02em}
@media(prefers-color-scheme:dark){.sid-verified{border-color:rgba(114,188,143,.38);background:rgba(114,188,143,.12);color:#72bc8f}}

/* v246 — three-path existing student plan center */
.plan-action-intro{display:flex;flex-direction:column;gap:4px;margin:24px 0 12px}.plan-action-intro b{color:#082f73;font-size:1.12rem}.plan-action-intro span{color:#607089;font-size:.92rem}.plan-action-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:0 0 18px!important}.plan-action-card{appearance:none;border:1.5px solid #d8e2f0;background:#fff;border-radius:16px;padding:18px 15px;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:11px;text-align:left;cursor:pointer;color:#15345f;min-width:0;transition:.2s ease;box-shadow:0 8px 25px rgba(19,53,101,.06)}.plan-action-card:hover,.plan-action-card.active{border-color:#e8a31b;transform:translateY(-2px);box-shadow:0 12px 28px rgba(23,64,122,.12)}.plan-action-card.active{background:#fffaf0}.plan-action-icon{width:34px;height:34px;border-radius:10px;background:#eef4ff;color:#0b4aa2;display:grid;place-items:center;font-weight:900;font-size:1.2rem}.plan-action-card.active .plan-action-icon{background:#f4b01a;color:#092e68}.plan-action-card b,.plan-action-card small{display:block}.plan-action-card b{font-size:.98rem;line-height:1.35}.plan-action-card small{font-weight:500;color:#67758a;line-height:1.55;margin-top:5px}.plan-action-arrow{color:#d38b00;font-weight:900}.plan-action-form{margin-top:8px;padding:20px;border:1px solid #dfe7f2;border-radius:16px;background:#f8fbff}.plan-action-form .field{margin-top:15px}.action-summary{display:flex;flex-direction:column;gap:4px;border-left:4px solid #f4b01a;padding-left:12px}.action-summary small{color:#64748b;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:800}.action-summary b{color:#0a3c83}.action-summary span,.action-empty{color:#65748a;font-size:.9rem}.switch-current{padding:17px 19px;border-radius:15px;background:linear-gradient(135deg,#082e70,#0c55ae);color:#fff;margin-top:20px;box-shadow:0 12px 28px rgba(10,58,126,.2)}.switch-current small,.switch-current p{color:#dbe9ff}.switch-current h4{margin:6px 0 3px;font-size:1.13rem}.switch-current h4 span{color:#f7bd42;margin:0 4px}.switch-current p{margin:0}.switch-summary{margin-top:18px;border-radius:16px;padding:20px;background:#fff;border:1px solid #dbe5f2}.switch-summary h4{margin:0 0 15px;color:#0a397d}.switch-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.switch-compare section{padding:14px;border-radius:12px;background:#f4f7fb;display:flex;flex-direction:column;gap:4px}.switch-compare small{color:#63748b;text-transform:uppercase;font-weight:800;font-size:.7rem}.switch-compare b{color:#123f7b}.switch-compare span{font-size:.84rem;color:#64748b}.switch-summary dl{margin:15px 0 10px}.switch-summary dl div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e8edf4}.switch-summary dl .total{font-weight:900;color:#083e87;font-size:1.05rem}.switch-summary dt,.switch-summary dd{margin:0}.switch-notice{font-size:.84rem;color:#66758c;line-height:1.6}.switch-success,.switch-pending{margin-top:20px;padding:20px;border-radius:16px;background:#edfff4;border:1px solid #a8e5bf;color:#145b32}.extension-lock-banner{display:flex;flex-direction:column;gap:3px;padding:16px 18px;margin-bottom:14px;border-radius:14px;background:#edf5ff;border:1px solid #bed8f7;color:#0a3b79}.extension-lock-banner small{text-transform:uppercase;letter-spacing:.08em;font-weight:800}.extension-lock-banner b{font-size:1.06rem}.extension-lock-banner span{color:#5d6f86}.locked-plan-field{position:relative}.locked-plan-field:after{content:'Locked to your verified current plan';display:block;color:#13703d;font-size:.78rem;font-weight:700;margin-top:5px}.locked-plan-field select:disabled{opacity:1;color:#173e75;background:#eef4fb}#sidOtpWrap .sid-row{grid-template-columns:1fr!important}
@media(max-width:820px){.plan-action-grid{grid-template-columns:1fr!important}.switch-compare{grid-template-columns:1fr}.plan-action-card{padding:15px}.plan-action-form{padding:16px}}

/* v247 — coupon and referral inputs in all plan-center paths */
.plan-code-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}.plan-code-grid .field{margin-top:12px}.plan-code-grid input{text-transform:uppercase}.plan-code-note{margin:6px 0 14px;color:#68778c;font-size:.82rem;line-height:1.55}.switch-summary dd{font-variant-numeric:tabular-nums}
@media(max-width:620px){.plan-code-grid{grid-template-columns:1fr}}

/* v248 — force readable current-subscription summary on royal-blue panel */
.plan-switch-gate .switch-current,
.plan-switch-gate .switch-current small,
.plan-switch-gate .switch-current h4,
.plan-switch-gate .switch-current h4 *{color:#fff!important}
.plan-switch-gate .switch-current p,
.plan-switch-gate .switch-current p b{color:#dceaff!important}
.plan-switch-gate .switch-current h4>span{color:#f7c44f!important}


/* v249 — transparent credit breakdown */
.credit-reason{margin:10px 0 4px;padding:11px 13px;border-left:4px solid #1b8a50;border-radius:8px;background:#eefbf3;color:#285f42;font-size:.86rem;line-height:1.55}.credit-reason.neutral{border-left-color:#8aa0b8;background:#f2f5f8;color:#5f6f82}.success-breakdown{display:grid;gap:7px;margin:13px 0;padding:13px;border-radius:12px;background:rgba(255,255,255,.7)}.success-breakdown span{display:flex;justify-content:space-between;gap:14px}.success-breakdown .due{padding-top:8px;border-top:1px solid #b8dec7;color:#0d6535;font-size:1.02rem}

/* ===== Reviews — premium redesign (v250) ===== */
.reviews-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.review-card{position:relative;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff 0%,#fafbff 100%);border:1px solid rgba(20,77,158,.13);border-radius:20px;padding:24px 22px 20px;box-shadow:0 10px 30px rgba(16,53,107,.09)}
.review-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--royal),#f9a20b);opacity:.9}
.review-card:hover{box-shadow:0 20px 46px rgba(20,77,158,.17);border-color:rgba(20,77,158,.26)}
.rv-quote{position:absolute;top:2px;right:16px;font-family:Georgia,"Times New Roman",serif;font-size:74px;line-height:1;color:rgba(20,77,158,.07);pointer-events:none;user-select:none}
.rv-top{display:flex;align-items:center;gap:13px;margin-bottom:12px;position:relative;z-index:1}
.rv-who{min-width:0;flex:1}
.rv-ava{width:48px;height:48px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;box-shadow:0 8px 18px rgba(16,53,107,.22)}
.rv-ava svg{width:27px;height:27px;display:block}
.rv-ava.male{background:linear-gradient(140deg,#3f7fd6 0%,#1a56ad 55%,#10356b 100%);box-shadow:0 8px 18px rgba(20,77,158,.32),inset 0 1px 0 rgba(255,255,255,.28)}
.rv-ava.female{background:linear-gradient(140deg,#f188b8 0%,#d95a95 55%,#a83a70 100%);box-shadow:0 8px 18px rgba(183,60,116,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.rv-name{font-weight:800;color:var(--heading);font-size:15px;line-height:1.25}
.rv-loc{font-size:12px;color:var(--muted);margin-top:2px}
.rv-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rv-stars{color:#d9d6e3;font-size:15px;letter-spacing:1.5px}
.rv-stars .on{color:#f9a20b}
.rv-date{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.rv-topic{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--royal);background:rgba(20,77,158,.08);border:1px solid rgba(20,77,158,.16);padding:4px 11px;border-radius:999px;margin:0 0 10px}
.rv-text{font-size:13.8px;color:var(--body);line-height:1.68;margin:0}
.rv-reply{margin-top:15px;position:relative;background:linear-gradient(135deg,rgba(20,77,158,.07),rgba(249,162,11,.07));border:1px solid rgba(20,77,158,.15);border-left:3px solid var(--royal);border-radius:14px;padding:12px 14px}
.rv-reply-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.01em;color:var(--royal)}
.rv-reply-ico{display:inline-flex;width:20px;height:20px;flex:none;align-items:center;justify-content:center;border-radius:7px;background:rgba(20,77,158,.13)}
.rv-reply-ico svg{width:12px;height:12px}
.rv-reply-head b{font-weight:800}
.rv-verified{width:14px;height:14px;flex:none;color:#f9a20b}
.rv-reply p{margin:0;font-size:13px;line-height:1.65;color:var(--body)}
@media (max-width:560px){.review-card{padding:20px 17px 18px}.rv-quote{font-size:60px}}

/* ============================================================
   v250 — HERO ROLE TYPEWRITER (replaces the old .role-chips)
   ============================================================ */
.hero-typer{display:flex;align-items:center;flex-wrap:wrap;column-gap:14px;row-gap:8px;margin:2px 0 24px;min-height:46px;font-weight:900;letter-spacing:-.005em;font-size:clamp(20px,2.5vw,29px);line-height:1.2}
.hero-typer .ht-pre{flex:none;margin-right:2px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#6f83a3;padding:6px 13px;border:1px solid rgba(16,53,107,.16);border-radius:999px;background:linear-gradient(180deg,#fff,#f3f7fd);box-shadow:0 2px 8px rgba(16,53,107,.06);white-space:nowrap}
.hero-typer .ht-text{font-weight:900;background:linear-gradient(94deg,#0e2a52 0%,#144d9e 48%,#f9a20b 112%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0e2a52;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.hero-typer .ht-caret{display:inline-block;margin-left:3px;font-weight:900;font-size:1.02em;line-height:1;color:#f9a20b;text-shadow:0 0 12px rgba(249,162,11,.5);transform:translateY(-1px);animation:sabCaretBlink .9s steps(1,end) infinite}
.hero-typer.is-hold .ht-caret{animation-duration:.62s}
@keyframes sabCaretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
html.sab-anim .hero-typer{animation:sabRise .6s cubic-bezier(.22,.61,.36,1) .2s both}
@media (max-width:980px){.hero-typer{justify-content:center}}
@media (max-width:520px){.hero-typer{column-gap:10px;font-size:20px;min-height:38px}.hero-typer .ht-pre{font-size:10.5px;padding:5px 10px;letter-spacing:.14em}}
@media (prefers-reduced-motion:reduce){.hero-typer .ht-caret{animation:none;opacity:.9}html.sab-anim .hero-typer{animation:none}}

/* ============================================================
   v251 — REVIEWS SLIDER + refined review card design
   ============================================================ */
.rv-slider{position:relative;margin:6px 0 42px;outline:none}
.rv-slider:focus-visible{outline:2px solid rgba(20,77,158,.35);outline-offset:6px;border-radius:22px}
.rv-viewport{overflow:hidden;padding:10px 2px 16px;cursor:grab}
.rv-viewport.is-grabbing{cursor:grabbing}
.rv-track{display:flex;align-items:stretch;will-change:transform}
.rv-slide{box-sizing:border-box;padding:0 9px;display:flex}
.rv-slide>.review-card{width:100%;height:100%;margin:0}

/* --- refined card --- */
.reviews-section .review-card{position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;background:linear-gradient(168deg,#ffffff 0%,#fbfdff 58%,#f4f8fe 100%);border:1px solid rgba(16,53,107,.09);border-radius:20px;padding:26px 24px 24px;box-shadow:0 14px 34px rgba(16,53,107,.09);transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .35s ease}
.reviews-section .review-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,#10356b,#144d9e 45%,#f9a20b);opacity:.9}
.reviews-section .review-card::after{content:"";position:absolute;right:-46px;bottom:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(249,162,11,.11),transparent 70%);pointer-events:none}
.rv-slider .review-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(16,53,107,.15);border-color:rgba(249,162,11,.34)}
.reviews-section .rv-quote{position:absolute;right:20px;top:6px;font-family:Georgia,serif;font-size:78px;line-height:1;color:rgba(16,53,107,.07);pointer-events:none;user-select:none}
.reviews-section .rv-top{display:flex;align-items:center;gap:13px;position:relative;z-index:1;margin-bottom:14px}
.reviews-section .rv-ava{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.02rem;box-shadow:0 8px 18px rgba(16,53,107,.2);border:2px solid #fff}
.reviews-section .rv-ava svg{width:30px;height:30px}
.reviews-section .rv-ava.male{background:linear-gradient(150deg,#3f7fd6,#1a56ad 55%,#10356b)}
.reviews-section .rv-ava.female{background:linear-gradient(150deg,#f188b8,#d95a95 55%,#a83a70)}
.reviews-section .rv-name{font-weight:800;color:#0e2a52;font-size:1rem;line-height:1.25}
.reviews-section .rv-loc{font-size:.775rem;color:#8ba2c4;font-weight:600;margin-top:2px}
.reviews-section .rv-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;position:relative;z-index:1}
.reviews-section .rv-stars span{color:#dbe4f1;font-size:1rem;letter-spacing:1px}
.reviews-section .rv-stars span.on{color:#f9a20b;text-shadow:0 2px 6px rgba(249,162,11,.34)}
.reviews-section .rv-date{font-size:.72rem;font-weight:700;color:#94a6c0;letter-spacing:.03em}
.reviews-section .rv-topic{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#144d9e;background:rgba(20,77,158,.08);border:1px solid rgba(20,77,158,.16);padding:5px 11px;border-radius:999px;margin-bottom:12px;position:relative;z-index:1}
.reviews-section .rv-text{color:#3d4f68;font-size:.895rem;line-height:1.72;margin:0 0 4px;position:relative;z-index:1;flex:1 1 auto}
.reviews-section .rv-reply{position:relative;z-index:1;margin-top:16px;padding:14px 15px;border-radius:14px;background:linear-gradient(150deg,#fffaf0,#f6f9ff);border:1px solid rgba(249,162,11,.24);border-left:4px solid #f9a20b}
.reviews-section .rv-reply-head{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.reviews-section .rv-reply-head b{font-size:.735rem;font-weight:800;color:#0e2a52;letter-spacing:.01em}
.reviews-section .rv-reply-ico{display:grid;place-items:center;width:19px;height:19px;color:#e08a00}
.reviews-section .rv-reply-ico svg{width:15px;height:15px}
.reviews-section .rv-verified{width:15px;height:15px;color:#1a9d5c;flex:none}
.reviews-section .rv-reply p{margin:0;color:#44566f;font-size:.845rem;line-height:1.65}

/* --- nav (arrows + dots) --- */
.rv-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.rv-arrow{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#10356b;background:#fff;border:1px solid rgba(16,53,107,.14);box-shadow:0 6px 16px rgba(16,53,107,.1);transition:all .25s ease}
.rv-arrow svg{width:19px;height:19px}
.rv-arrow:hover{color:#fff;background:linear-gradient(150deg,#144d9e,#10356b);border-color:transparent;transform:translateY(-2px);box-shadow:0 10px 22px rgba(16,53,107,.24)}
.rv-arrow:active{transform:translateY(0)}
.rv-dots{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;max-width:260px}
.rv-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;cursor:pointer;background:rgba(16,53,107,.18);transition:all .3s ease}
.rv-dot:hover{background:rgba(16,53,107,.34)}
.rv-dot.on{width:26px;background:linear-gradient(90deg,#144d9e,#f9a20b)}

@media (max-width:700px){
  .rv-slide{padding:0 5px}
  .reviews-section .review-card{padding:22px 19px 20px}
  .rv-nav{gap:12px}
  .rv-arrow{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .rv-track{transition:none!important}
  .rv-slider .review-card:hover{transform:none}
}

/* ============================================================
   v251-B — REVIEWS: FINAL AUTHORITATIVE LAYOUT + CLEAN DESIGN
   (overrides every older/global rule that was breaking the cards)
   ============================================================ */
.rv-slider{position:relative;display:block!important;margin:4px 0 40px;outline:none}
.rv-slider.is-static .rv-track{justify-content:center}
.rv-viewport{overflow:hidden;padding:12px 0 18px;cursor:grab}
.rv-viewport.is-grabbing{cursor:grabbing}
.rv-track{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;text-align:left!important;will-change:transform}
.rv-slide{box-sizing:border-box;padding:0 10px;display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:left!important}
.rv-slide>.review-card{width:100%;margin:0}

/* --- the card: clean, calm, professional --- */
.rv-slider .review-card,
.reviews-section .review-card{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:flex-start!important;text-align:left!important;
  position:relative;overflow:hidden;box-sizing:border-box;height:100%;
  background:#fff!important;
  border:1px solid rgba(16,53,107,.10)!important;
  border-radius:18px!important;
  padding:24px 22px 22px!important;
  box-shadow:0 8px 24px rgba(16,53,107,.07)!important;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important;
}
.rv-slider .review-card::before,
.reviews-section .review-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;width:100%;background:linear-gradient(90deg,#10356b,#144d9e 50%,#f9a20b);opacity:1}
.rv-slider .review-card::after,
.reviews-section .review-card::after{content:none!important}
.rv-slider .review-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(16,53,107,.13)!important;border-color:rgba(249,162,11,.32)!important}

.reviews-section .rv-quote{position:absolute;right:18px;top:4px;font-family:Georgia,serif;font-size:64px;line-height:1;color:rgba(16,53,107,.06);pointer-events:none;user-select:none;z-index:0}

.reviews-section .rv-top{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px;margin:0 0 14px!important;position:relative;z-index:1;text-align:left!important}
.reviews-section .rv-ava{flex:none!important;width:46px!important;height:46px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff;font-weight:800;font-size:17px;border:2px solid #fff;box-shadow:0 6px 14px rgba(16,53,107,.18)}
.reviews-section .rv-ava svg{width:27px;height:27px;display:block}
.reviews-section .rv-who{min-width:0;flex:1 1 auto;text-align:left!important}
.reviews-section .rv-name{font-weight:800!important;color:#0e2a52!important;font-size:15.5px!important;line-height:1.25;text-align:left!important;margin:0}
.reviews-section .rv-loc{font-size:12.5px!important;color:#8ba2c4!important;font-weight:600;margin-top:2px;text-align:left!important}

.reviews-section .rv-meta{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px;margin:0 0 12px!important;position:relative;z-index:1}
.reviews-section .rv-stars{display:inline-flex;gap:1px;letter-spacing:0}
.reviews-section .rv-stars span{color:#dde5f0;font-size:15px}
.reviews-section .rv-stars span.on{color:#f9a20b}
.reviews-section .rv-date{font-size:11.5px!important;font-weight:700;color:#94a6c0!important;white-space:nowrap}

.reviews-section .rv-topic{display:inline-block!important;align-self:flex-start!important;width:auto!important;font-size:11px!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#144d9e!important;background:rgba(20,77,158,.07);border:1px solid rgba(20,77,158,.15);padding:5px 11px;border-radius:999px;margin:0 0 12px!important;position:relative;z-index:1}

.reviews-section .rv-text{color:#3d4f68!important;font-size:14px!important;line-height:1.7!important;margin:0!important;text-align:left!important;position:relative;z-index:1;flex:1 1 auto}

.reviews-section .rv-reply{position:relative;z-index:1;margin-top:16px!important;padding:13px 14px!important;border-radius:13px;text-align:left!important;background:linear-gradient(140deg,#fffaf0,#f7faff)!important;border:1px solid rgba(249,162,11,.22)!important;border-left:3px solid #f9a20b!important}
.reviews-section .rv-reply-head{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:7px;margin-bottom:6px}
.reviews-section .rv-reply-head b{font-size:11.5px!important;font-weight:800;color:#0e2a52!important;letter-spacing:.01em}
.reviews-section .rv-reply-ico{display:inline-flex!important;align-items:center;justify-content:center;width:19px;height:19px;flex:none;border-radius:6px;background:rgba(249,162,11,.16);color:#e08a00}
.reviews-section .rv-reply-ico svg{width:12px;height:12px}
.reviews-section .rv-verified{width:14px;height:14px;flex:none;color:#1a9d5c}
.reviews-section .rv-reply p{margin:0!important;color:#44566f!important;font-size:13.2px!important;line-height:1.65!important;text-align:left!important}

/* --- nav --- */
.rv-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2px}
.rv-slider.is-static .rv-nav{display:none}
.rv-arrow{flex:none;width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#10356b;background:#fff;border:1px solid rgba(16,53,107,.14);box-shadow:0 5px 14px rgba(16,53,107,.09);transition:all .25s ease}
.rv-arrow svg{width:18px;height:18px}
.rv-arrow:hover{color:#fff;background:linear-gradient(150deg,#144d9e,#10356b);border-color:transparent;transform:translateY(-2px)}
.rv-dots{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;max-width:230px}
.rv-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;cursor:pointer;background:rgba(16,53,107,.18);transition:all .3s ease}
.rv-dot.on{width:24px;background:linear-gradient(90deg,#144d9e,#f9a20b)}

@media (max-width:700px){
  .rv-slide{padding:0 6px}
  .rv-slider .review-card,.reviews-section .review-card{padding:21px 18px 19px!important}
  .reviews-section .rv-quote{font-size:54px}
}
@media (prefers-reduced-motion:reduce){
  .rv-track{transition:none!important}
  .rv-slider .review-card:hover{transform:none}
}