:root {
  --green: #089c66;
  --darkgreen: #067a50;
  --gold: #dfb224;
  --gold-dark: #b88f12;
  --gold-soft: #fdf7e3;
  --green-soft: #e9f6ef;
  --green-line: #c5e7d6;
  --ink: #0b2f24;
  --navy: #12261f;
  --text: #2a3b35;
  --muted: #6b7c76;
  --line: #e3e9ef;
  --soft: #f5f8fa;
  --shadow: 0 9px 28px rgba(11, 47, 36, 0.07);
  --radius: 14px;
  --max: 1640px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 82px) + 4px);
  scrollbar-gutter: stable;
}
/* the career journey holds the page still while it steps (see initJourney) */
html.j-lock {
  overflow: hidden;
}
body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font:
    14px/1.5 "Plus Jakarta Sans",
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
.container {
  width: calc(100% - 88px);
  max-width: var(--max);
  margin-inline: auto;
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 10px;
  top: 10px;
  z-index: 200;
  background: white;
  padding: 12px;
}
.logo {
  font-size: 29px;
  font-weight: 800;
  display: flex;
  align-items: center;
  letter-spacing: -1.6px;
  color: var(--green);
  white-space: nowrap;
}
.logo i {
  font-size: 32px;
  margin-right: 7px;
}
.logo b {
  color: var(--gold-dark);
}
.logo-mark {
  height: 1.2em;
  width: auto;
  margin-right: 8px;
  flex: none;
}
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: 1.4px;
}
.btn {
  border-radius: 9px;
  padding: 11px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid transparent;
  transition: 0.2s;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn.green {
  background: var(--green);
  color: #fff;
}
.btn.green:hover {
  background: var(--darkgreen);
}
.btn.outline {
  border-color: var(--green-line);
  color: var(--darkgreen);
  background: white;
}
.btn.outline:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.market-section {
  padding-top: 39px;
  padding-bottom: 21px;
  border-bottom: 1px solid #f0f1f4;
}
.market-section:nth-of-type(even) {
  background: linear-gradient(180deg, #f7fbf9 0, #fff 100%);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 16px;
}
.heading-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.heading-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green-line);
  font-size: 21px;
  display: grid;
  place-items: center;
}
.heading-text h2 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.7px;
  margin: 1px 0;
}
.heading-text p {
  color: var(--muted);
  margin: 3px 0 0;
  font-size: 12px;
}
.section-link {
  white-space: nowrap;
  border: 0;
  background: none;
  color: var(--green);
  transition: 0.2s;
}
.section-link:hover {
  color: var(--gold-dark);
}
.section-link {
  font-weight: 800;
  font-size: 12px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}
.card {
  border: 1px solid #e4eaf0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.2s;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color: var(--green-line);
  box-shadow: 0 12px 30px #0b2f2414;
  transform: translateY(-2px);
}
.card-photo {
  aspect-ratio: 1.45;
  position: relative;
  background: var(--green-soft);
  overflow: hidden;
}
.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-photo .placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 42px;
  color: #8fc4ab;
}
.card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fffe;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 800;
  color: var(--darkgreen);
  border-left: 2px solid var(--gold);
  padding: 5px 8px;
  max-width: 90%;
}
.heart {
  position: absolute;
  right: 9px;
  top: 9px;
  border: 0;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background: white;
  color: #66788b;
  display: grid;
  place-items: center;
}
.heart.saved {
  color: #e24467;
}
.card-body {
  padding: 13px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-type {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
}
.card h3 {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 6px;
  font-weight: 800;
  min-height: 38px;
}
.card-desc {
  font-size: 10px;
  color: #778398;
  line-height: 1.7;
  margin: 0 0 12px;
  min-height: 30px;
}
.card-bottom {
  margin-top: auto;
  border-top: 1px solid #edf1f4;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.price small {
  display: block;
  color: #8290a1;
  font-size: 9px;
}
.price b {
  font-size: 14px;
  color: var(--ink);
}
.card-action {
  border: 0;
  background: var(--green);
  transition: 0.2s;
  color: white;
  border-radius: 7px;
  font-size: 10px;
  padding: 9px 11px;
  font-weight: 800;
  white-space: nowrap;
}
.card-action:hover {
  background: var(--ink);
}
.empty {
  border: 1px dashed #d9e1e8;
  padding: 36px;
  text-align: center;
  border-radius: 12px;
  color: var(--muted);
}
.search-notice {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: 10px;
  margin-top: 20px;
  padding: 13px 17px;
  color: var(--darkgreen);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.search-notice button {
  background: white;
  border: 1px solid var(--green-line);
  color: var(--darkgreen);
  border-radius: 7px;
  padding: 6px 10px;
}
.emi-box {
  margin-bottom: 20px;
  background: linear-gradient(110deg, #f1f9f5, #fdf9ec);
  border: 1px solid var(--green-line);
  border-radius: 13px;
  padding: 22px;
}
.emi-box h3 {
  font-size: 17px;
  margin: 0 0 5px;
}
.emi-box > p {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 20px;
}
.emi-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.3fr;
  gap: 20px;
  align-items: center;
}
.emi-field label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 7px;
}
.emi-field input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #dce3ea;
  border-radius: 7px;
  outline-color: var(--green);
}
.emi-field input[type="range"] {
  width: 100%;
  accent-color: var(--green);
  margin-top: 12px;
}
.emi-result {
  padding: 12px 17px;
  background: white;
  border-radius: 10px;
  border: 1px solid var(--green-line);
  border-left: 3px solid var(--gold);
}
.emi-result small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.emi-result strong {
  font-size: 25px;
  color: var(--green);
}
.emi-result span {
  display: block;
  font-size: 10px;
  color: #55647a;
  margin-top: 3px;
}
.end-banner {
  margin-top: 45px;
  margin-bottom: 50px;
  background: linear-gradient(105deg, #e6f5ed, #fbf3d6);
  border: 1px solid #e3eee6;
  border-radius: 18px;
  padding: 35px 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.end-banner h2 {
  font-size: 25px;
  margin: 6px 0;
}
.end-banner p {
  font-size: 12px;
  color: #55706a;
  margin: 0;
}
.footer {
  background: var(--ink);
  color: white;
  padding: 42px 0 16px;
  border-top: 4px solid var(--gold);
}
.foot-grid {
  display: grid;
  grid-template-columns: 2.5fr repeat(3, 1fr);
  gap: 36px;
}
.foot-grid > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 11px;
  color: #b4cbc2;
}
.foot-grid b {
  color: white;
}
.foot-grid a:hover {
  color: var(--gold);
}
.foot-logo {
  color: #fff;
}
.foot-logo b {
  color: var(--gold);
}
.foot-logo .logo-mark {
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  height: 1.5em;
}
.foot-grid p {
  max-width: 360px;
  color: #a9c3b9;
  line-height: 1.8;
}
.footer-last {
  font-size: 10px;
  color: #86a297;
  border-top: 1px solid #ffffff20;
  margin-top: 35px;
  padding-top: 14px;
}
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: white;
  background: var(--green);
  border: 0;
  box-shadow: var(--shadow);
  display: none;
}
.back-to-top.show {
  display: grid;
  place-items: center;
}
.back-to-top:hover {
  background: var(--ink);
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 25px);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  background: var(--ink);
  color: white;
  padding: 13px 19px;
  border-left: 4px solid var(--gold);
  border-radius: 9px;
  z-index: 101;
  max-width: calc(100% - 40px);
  text-align: center;
  font-size: 12px;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #0b2f248c;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal {
  background: white;
  border-radius: 15px;
  padding: 26px;
  width: min(520px, 100%);
  max-height: 85vh;
  overflow: auto;
  position: relative;
}
.close-modal {
  position: absolute;
  right: 17px;
  top: 15px;
  background: var(--green-soft);
  color: var(--green);
  border: 0;
  border-radius: 50%;
  width: 31px;
  height: 31px;
}
.modal h2 {
  font-size: 21px;
  margin: 2px 0 10px;
}
.modal p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.modal .modal-list {
  margin: 12px 0;
  padding-left: 19px;
  color: #4d6176;
  font-size: 12px;
  line-height: 2;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #f7c94e;
  outline-offset: 2px;
}
@media (max-width: 1250px) {
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .logo {
    font-size: 24px;
  }
  .logo i {
    font-size: 27px;
  }
}
@media (max-width: 920px) {
  .container,
  .top-inner {
    width: calc(100% - 40px);
  }
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .emi-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .container,
  .top-inner {
    width: calc(100% - 26px);
  }
  .logo {
    font-size: 22px;
  }
  .logo i {
    font-size: 25px;
  }
  .market-section {
    padding-top: 25px;
  }
  .heading-left {
    gap: 10px;
  }
  .heading-icon {
    width: 37px;
    height: 37px;
    font-size: 17px;
  }
  .heading-text h2 {
    font-size: 20px;
  }
  .heading-text p {
    font-size: 10px;
  }
  .section-link {
    font-size: 10px;
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .card-body {
    padding: 10px;
  }
  .card h3 {
    font-size: 11px;
    min-height: 34px;
  }
  .card-desc {
    font-size: 9px;
    min-height: 44px;
  }
  .card-bottom {
    align-items: flex-end;
  }
  .price b {
    font-size: 11px;
  }
  .card-action {
    font-size: 9px;
    padding: 8px;
  }
  .card-tag {
    font-size: 8px;
  }
  .emi-box {
    padding: 16px;
  }
  .emi-layout {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .emi-result {
    grid-column: span 2;
  }
  .end-banner {
    padding: 23px;
    display: block;
  }
  .end-banner h2 {
    font-size: 21px;
  }
  .end-banner .btn {
    margin-top: 17px;
  }
  .foot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .foot-grid > div:first-child {
    grid-column: span 2;
  }
}
@media (max-width: 360px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
  .hero-actions {
    gap: 6px;
  }
  .btn {
    padding: 10px;
  }
  .emi-layout {
    grid-template-columns: 1fr;
  }
  .emi-result {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}

body {
  overflow-x: clip;
}

/* ---------- InfrasofTech: header, hero and course-track strip ---------- */
:root {
  --cn-blue: #1769ff;
  --cn-blue-dark: #0b55e0;
  --cn-teal: #0e8a72;
  --cn-ink: #0b1530;
  --cn-text: #3c475f;
  --cn-line: #e4eaf3;
  --cn-hero: #f1f7fd;
  --top-max: 1760px;
  --tiles-overlap: 70px;
  --font-cn: "Figtree", "Plus Jakarta Sans", system-ui, sans-serif;
}
.topbar,
.hero,
.quick {
  font-family: var(--font-cn);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
body.scrolled .topbar,
body.nav-open .topbar {
  border-color: var(--cn-line);
  box-shadow: 0 6px 24px rgba(16, 42, 94, 0.08);
}
.top-inner {
  width: calc(100% - 88px);
  max-width: var(--top-max);
  margin: auto;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.brand-logo {
  display: block;
  width: auto;
  height: 54px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.1vw, 40px);
  margin-left: auto;
  margin-right: 0;
}
.main-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--cn-ink);
  white-space: nowrap;
  transition: color 0.2s;
}
.main-nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cn-blue);
  transform: scaleX(0);
  transition: transform 0.25s;
}
.main-nav a:hover {
  color: var(--cn-blue);
}
.main-nav a:hover:after {
  transform: scaleX(1);
}
.main-nav-dropdown { position: relative; }
.main-nav-dropdown > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  list-style: none;
  color: var(--cn-ink);
  font-size: 15.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.main-nav-dropdown > summary::-webkit-details-marker { display: none; }
.main-nav-dropdown > summary i { font-size: 11px; transition: transform .2s; }
.main-nav-dropdown[open] > summary i { transform: rotate(180deg); }
.main-nav-dropdown[open] > summary,
.main-nav-dropdown > summary:hover { color: var(--cn-blue); }
.main-nav-dropdown > summary:focus-visible { outline: 3px solid rgba(23, 105, 255, .45); outline-offset: 3px; }
.main-nav-submenu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  left: -16px;
  display: grid;
  gap: 2px;
  min-width: 290px;
  padding: 8px;
  border: 1px solid #dfe8f6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(16, 42, 94, .14);
}
.main-nav-dropdown:not([open]) > .main-nav-submenu { display: none; }
.main-nav-submenu a { padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: normal; }
.main-nav-submenu a:after { display: none; }
.main-nav-submenu a:hover { background: #f1f6ff; }
.nav-login {
  display: none;
}
.top-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}
.btn-login,
.btn-enroll,
.nav-toggle {
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  font-size: 16px;
  white-space: nowrap;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s,
    background-color 0.2s;
}
.btn-login {
  padding: 0 20px;
  border: 1px solid #dbe2ee;
  background: #fff;
  color: var(--cn-ink);
  font-weight: 600;
}
.btn-login i {
  font-size: 19px;
  color: var(--cn-blue);
}
.btn-login:hover {
  border-color: var(--cn-blue);
  box-shadow: 0 6px 16px rgba(23, 105, 255, 0.12);
}
.btn-enroll {
  padding: 0 26px;
  background: linear-gradient(180deg, #2b80ff, var(--cn-blue-dark));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(23, 105, 255, 0.3);
}
.btn-enroll:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(23, 105, 255, 0.38);
}
.btn-enroll:hover i,
.btn-hero.primary:hover i {
  animation: icon-nudge 0.65s ease both;
}
.nav-toggle {
  display: none;
  width: 48px;
  padding: 0;
  border: 1px solid #dbe2ee;
  background: #fff;
  color: var(--cn-ink);
  font-size: 24px;
  touch-action: manipulation;
}
.nav-toggle i {
  pointer-events: none;
}
.main-nav a:focus-visible,
.top-cta :focus-visible,
.brand:focus-visible,
.btn-hero:focus-visible,
.track-feature:focus-visible,
.track-card:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 3px;
}

/* Hero: copy on the left, classroom art bleeding off the right edge */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--tiles-overlap);
  background:
    radial-gradient(46% 64% at 16% 40%, #fff 0, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #f2f7fe 0, #edf4fd 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - 136px);
  max-width: var(--top-max);
  min-height: 28vw;
  display: flex;
  align-items: center;
  padding-block: clamp(24px, 2.2vw, 42px) clamp(10px, 0.95vw, 18px);
}
.hero-text {
  position: relative;
  min-width: 0;
  max-width: 47vw;
}
/* Shared grid sizing keeps the hero steady while copy rises and images glide across. */
.hero-text {
  display: grid;
}
.hero-text .hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.4s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.65s;
}
.hero-text .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.5s ease 0.12s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    visibility 0s linear;
}
.hero-text .hero-slide.is-leaving {
  transform: translate3d(0, -16px, 0);
}
.hero-scene .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(38px, 0, 0) scale(1.035);
  transition:
    opacity 0.6s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.85s;
}
.hero-scene .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.6s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear;
}
.hero-scene .hero-slide.is-leaving {
  transform: translate3d(-24px, 0, 0) scale(1.015);
}
.hero-dots {
  position: absolute;
  z-index: 4;
  right: clamp(10px, 1.5vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(219, 234, 255, 0.3));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 14px 32px rgba(31, 69, 133, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  pointer-events: none;
  /* Only the buttons catch clicks; the rail stays clear of the hero artwork. */
}
.hero-dots::before,
.hero-dots::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(-50%);
}
.hero-dots::before {
  z-index: 0;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: rgba(58, 111, 189, 0.28);
}
.hero-dots::after {
  z-index: 0;
  top: calc(26px + var(--hero-current, 0) * 36px);
  width: 4px;
  height: 36px;
  background: linear-gradient(180deg, #19c8e5, #2676ff 45%, #8658ff 78%, #ffbe52);
  box-shadow: 0 0 10px rgba(55, 117, 255, 0.35);
  clip-path: inset(0 0 100% 0);
}
.hero-dots.is-animating::after {
  animation: hero-progress-down 6s linear forwards;
}
.hero-dots.is-looping::after {
  top: 26px;
  height: calc((var(--hero-count, 3) - 1) * 36px);
  background: linear-gradient(0deg, #19c8e5, #2676ff 45%, #8658ff 78%, #ffbe52);
  clip-path: inset(100% 0 0 0);
}
.hero-dots.is-looping.is-animating::after {
  animation-name: hero-progress-up;
}
@keyframes hero-progress-down {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes hero-progress-up {
  to { clip-path: inset(0 0 0 0); }
}
.hero-dots .hero-dot {
  pointer-events: auto;
}
.hero-dots[hidden] {
  display: none;
}
.hero-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.hero-dot::before,
.hero-dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  box-sizing: border-box;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    opacity 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-dot::before {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(112, 145, 199, 0.35);
  background: #fff;
  box-shadow: 0 2px 6px rgba(19, 58, 116, 0.1);
}
.hero-dot::after {
  width: 24px;
  height: 24px;
  border: 2px solid #1769ff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}
.hero-dot:hover::before {
  border-color: #1769ff;
  background: #e7f0ff;
  transform: translate(-50%, -50%) scale(1.15);
}
.hero-dot.is-active::before {
  width: 8px;
  height: 8px;
  border-color: #1769ff;
  background: #1769ff;
  box-shadow: none;
  transform: translate(-50%, -50%);
}
.hero-dot.is-active::after {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(23, 105, 255, 0.08);
  transform: translate(-50%, -50%) scale(1);
}
.hero-dot:focus-visible {
  outline: 2px solid #1769ff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-text .hero-slide,
  .hero-text .hero-slide.is-active,
  .hero-text .hero-slide.is-leaving,
  .hero-scene .hero-slide,
  .hero-scene .hero-slide.is-active,
  .hero-scene .hero-slide.is-leaving {
    transform: none;
    transition: none;
  }
  .hero-dots::after {
    display: none;
  }
  .hero-dot::before,
  .hero-dot::after {
    transition: none;
  }
}
/* dotted accent beside the headline */
.hero-text:before {
  content: "";
  position: absolute;
  top: -6px;
  right: 6%;
  width: 66px;
  height: 54px;
  background: radial-gradient(circle, #b9c8e2 1.6px, transparent 2px) 0 0 / 13px
    13px;
  opacity: 0.8;
  pointer-events: none;
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0 0 clamp(10px, 0.9vw, 16px);
  font-size: clamp(12px, 0.82vw, 15px);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cn-blue);
}
.hero-kicker i {
  margin-left: -0.42em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.hero h1 {
  margin: 0;
  font-size: clamp(40px, 4.45vw, 84px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--cn-ink);
}
.hero h1 span {
  display: block;
  padding-bottom: 0.04em;
  white-space: nowrap;
}
.hero h1 .h1-blue,
.hero h1 .h1-teal {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .h1-blue {
  background-image: linear-gradient(90deg, #1667ff, #2b7bff 60%, #1a5ff0);
}
.hero h1 .h1-teal {
  background-image: linear-gradient(90deg, #0b7a66, #0f9a7f 55%, #0c8571);
}
/* short title variant: one line, colored per-slide via --slide-accent (set inline on .hero-slide)
   so each banner's heading matches that banner image's own dominant colour */
.hero h1.h1-short {
  font-size: clamp(34px, 3.6vw, 60px);
  white-space: nowrap;
  color: var(--slide-accent, var(--cn-blue));
}
/* the first slide keeps two colours on one line instead of a per-slide accent */
.hero h1.h1-compound {
  color: var(--cn-ink);
}
.hero h1.h1-compound span {
  display: block;
  white-space: nowrap;
}
.hero h1.h1-compound .h1-grad {
  background-image: linear-gradient(90deg, #1667ff, #2b7bff 45%, #0f9a7f 75%, #0c8571);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead {
  max-width: 30em;
  margin: clamp(12px, 1vw, 20px) 0 0;
  font-size: clamp(16px, 1.2vw, 22px);
  line-height: 1.45;
  color: var(--cn-text);
}
/* concise skill-point lines ("Core JAVA | Adv JAVA") in place of a full sentence */
.hero-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: clamp(14px, 1.2vw, 22px) 0 0;
  max-width: 34em;
}
.hero-points li {
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--cn-text);
}
.hero-points .hp-sep {
  margin: 0 0.55em;
  color: var(--slide-accent, var(--cn-blue));
  font-weight: 700;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.2vw, 22px);
  margin-top: clamp(18px, 1.4vw, 26px);
}
.btn-hero {
  height: clamp(52px, 3.45vw, 64px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 clamp(24px, 2.3vw, 42px);
  border-radius: 12px;
  font-size: clamp(15px, 1.03vw, 19px);
  font-weight: 700;
  white-space: nowrap;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
.btn-hero i {
  font-size: 1.15em;
}
.btn-hero.primary {
  background: linear-gradient(180deg, #2b80ff, var(--cn-blue-dark));
  color: #fff;
  box-shadow: 0 14px 28px rgba(23, 105, 255, 0.3);
}
.btn-hero.ghost {
  border: 2px solid var(--cn-teal);
  background: rgba(255, 255, 255, 0.7);
  color: var(--cn-ink);
}
.btn-hero.ghost i {
  color: var(--cn-teal);
  font-size: 1.3em;
}
.btn-hero:hover {
  transform: translateY(-2px);
}
.btn-hero.primary:hover {
  box-shadow: 0 18px 32px rgba(23, 105, 255, 0.38);
}
.btn-hero.ghost:hover {
  background: #fff;
  box-shadow: 0 12px 24px rgba(14, 138, 114, 0.14);
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  margin: clamp(20px, 1.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: clamp(14px, 1.5vw, 28px);
  font-size: clamp(14px, 0.88vw, 16px);
  font-weight: 600;
  color: var(--cn-ink);
}
.hero-trust li:first-child {
  padding-left: 0;
}
.hero-trust li + li {
  border-left: 1px solid #cfd8e6;
}
.hero-trust i {
  font-size: 1.4em;
  color: var(--cn-blue);
}
.hero-scene {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: calc(var(--tiles-overlap) - 18px);
  width: 58.4%;
}
.hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 100%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 15%),
    linear-gradient(0deg, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 15%),
    linear-gradient(0deg, transparent 0, #000 9%);
  mask-composite: intersect;
}
/* banner1/banner2 are centred tech-stack diagrams, not bottom-weighted photos like the
   classroom shot, so show the whole image (no cropping) instead of cover+bottom-anchor */
.hero-art-contain {
  object-fit: contain;
  object-position: center center;
}
/* Keep the complete technology diagram visible on desktop.  Scaling it past the
   scene bounds made the bottom row of cards disappear behind the course strip. */
@media (min-width: 901px) {
  .hero-art-contain {
    transform: none;
  }
}

/* Course tracks: featured programme plus five track cards in one panel overlapping the hero */
.quick.container {
  position: relative;
  z-index: 3;
  width: calc(100% - 88px);
  max-width: var(--top-max);
  margin-top: calc(-1 * var(--tiles-overlap));
}
/* Keep the course strip close to the hero without covering its artwork. */
@media (min-width: 901px) {
  .quick.container {
    margin-top: calc(-1 * var(--tiles-overlap) + clamp(8px, 0.7vw, 14px));
  }
}
.track-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr);
  align-items: center;
  gap: clamp(12px, 1vw, 18px);
  padding: clamp(18px, 1.55vw, 30px) 0 clamp(8px, 0.85vw, 16px);
}
.track-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 30px);
  align-self: stretch;
  margin-block: calc(-1 * clamp(18px, 1.55vw, 30px)) calc(-1 * clamp(8px, 0.85vw, 16px));
  padding: 12px clamp(16px, 1.4vw, 24px) 12px clamp(22px, 2.2vw, 40px);
  border: 4px solid #fff;
  border-radius: 20px;
  background:
    radial-gradient(60% 120% at 12% 50%, rgba(40, 130, 255, 0.55), transparent 70%),
    radial-gradient(50% 120% at 100% 50%, rgba(124, 77, 255, 0.75), transparent 70%),
    linear-gradient(100deg, #0c55ea 0%, #0b3cb8 30%, #172a78 58%, #2731a6 80%, #5b45f0 100%);
  background-clip: padding-box;
  box-shadow:
    0 14px 30px rgba(28, 64, 200, 0.28),
    0 0 0 1px rgba(150, 180, 255, 0.35);
  color: #fff;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
/* thin diagonal light streaks */
.track-feature:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, transparent 61%, rgba(130, 175, 255, 0.38) 61.3%, transparent 62.2%),
    linear-gradient(112deg, transparent 69%, rgba(130, 175, 255, 0.22) 69.3%, transparent 70%);
  pointer-events: none;
}
.tf-icon {
  flex: none;
  width: clamp(54px, 4.6vw, 80px);
  height: auto;
}
.tf-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tf-text b {
  max-width: 7.6em;
  font-size: clamp(19px, 1.6vw, 28px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.tf-text small {
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}
.tf-deco {
  flex: none;
  width: clamp(44px, 3.4vw, 60px);
  height: auto;
  margin-left: auto;
  opacity: 0.85;
}
.tf-go {
  flex: none;
  width: clamp(42px, 3vw, 52px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #16226a;
  font-size: clamp(18px, 1.3vw, 22px);
  box-shadow: 0 8px 18px rgba(8, 20, 80, 0.3);
  transition: transform 0.25s;
}
.track-feature:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 36px rgba(28, 64, 200, 0.36),
    0 0 0 1px rgba(150, 180, 255, 0.45);
}
.track-feature:hover .tf-go {
  transform: translateX(3px);
}
/* Track cards scroll sideways; edges fade where more cards are hidden */
.track-rail {
  position: relative;
  min-width: 0;
}
.track-rail .track-list {
  --fade-l: 0px;
  --fade-r: 72px;
  display: flex;
  gap: clamp(10px, 0.8vw, 14px);
  margin: -10px 0 -18px;
  padding: 10px 2px 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.track-rail .track-list::-webkit-scrollbar {
  display: none;
}
/* endless loop driven from script.js: both edges fade, it can be dragged, no snapping */
.track-rail.is-loop .track-list {
  --fade-l: 72px;
  scroll-snap-type: none;
  cursor: grab;
}
.track-rail.is-dragging .track-list {
  cursor: grabbing;
  user-select: none;
}
.track-rail.is-dragging .track-card {
  pointer-events: none;
}
.track-rail .track-list img {
  -webkit-user-drag: none;
}
.track-rail .track-list li {
  flex: 0 0 clamp(168px, 11.6vw, 230px);
  scroll-snap-align: start;
}
.track-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: clamp(40px, 2.6vw, 48px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #e3eaf5;
  border-radius: 50%;
  background: #fff;
  color: var(--cn-blue);
  font-size: 18px;
  -webkit-text-stroke: 0.6px;
  box-shadow: 0 8px 22px rgba(22, 52, 110, 0.16);
  transform: translateY(-50%);
  transition:
    opacity 0.25s,
    visibility 0.25s,
    background-color 0.2s,
    color 0.2s;
}
.track-nav.prev {
  left: -10px;
}
.track-nav.next {
  right: -10px;
}
.track-nav:hover {
  background: var(--cn-blue);
  color: #fff;
}
.track-nav:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 3px;
}
.track-nav:disabled {
  opacity: 0;
  visibility: hidden;
}
.track-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: clamp(5px, 0.45vw, 8px);
  padding: clamp(10px, 0.7vw, 14px) clamp(12px, 1vw, 18px);
  border: 1px solid #edf1f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(22, 52, 110, 0.08);
  color: var(--cn-ink);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.track-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 36%;
  background: linear-gradient(90deg, var(--tone, #e2e9ff) 0, var(--tone, #e2e9ff) 22%, rgba(255, 255, 255, 0) 100%);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.track-card:hover:before,
.track-card:focus-visible:before {
  width: 80%;
}
.track-card img {
  width: clamp(36px, 3vw, 52px);
  height: clamp(36px, 3vw, 52px);
  object-fit: contain;
}
.tc-go {
  width: clamp(30px, 2.2vw, 38px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf3ff;
  color: var(--cn-blue);
  font-size: clamp(14px, 1vw, 17px);
  transition:
    background-color 0.25s,
    color 0.25s;
}
.track-card b {
  grid-column: 1 / -1;
  font-size: clamp(13.5px, 1vw, 17px);
  font-weight: 700;
  line-height: 1.2;
}
.track-card:hover {
  transform: translateY(-3px);
  border-color: #cfe0ff;
  box-shadow: 0 14px 28px rgba(23, 105, 255, 0.12);
}
.track-card:hover .tc-go {
  background: var(--cn-blue);
  color: #fff;
}

@media (max-width: 1500px) {
  .main-nav a {
    font-size: 14.5px;
  }
  .main-nav-dropdown > summary { font-size: 14.5px; }
  .btn-login,
  .btn-enroll {
    height: 48px;
    font-size: 15px;
  }
  .btn-login {
    padding: 0 16px;
  }
  .btn-enroll {
    padding: 0 20px;
  }
  .top-cta {
    gap: 12px;
  }
  .brand-logo {
    height: 48px;
  }
}
/* Small laptop: the seven links no longer fit, so the menu collapses behind a toggle */
@media (max-width: 1320px) {
  .nav-toggle {
    display: inline-flex;
    height: 48px;
  }
  .top-cta {
    margin-left: auto;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 10px 44px 22px;
    max-height: calc(100vh - var(--header-h, 76px));
    max-height: calc(100dvh - var(--header-h, 76px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-bottom: 1px solid var(--cn-line);
    box-shadow: 0 22px 34px rgba(16, 42, 94, 0.12);
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    transition:
      opacity 0.25s,
      translate 0.25s,
      visibility 0.25s;
  }
  .nav-open .main-nav {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
  }
  .main-nav a {
    padding: 13px 12px;
    border-radius: 10px;
    font-size: 16px;
  }
  .main-nav a:after {
    display: none;
  }
  .main-nav a:hover {
    background: #f1f6ff;
  }
  .main-nav-dropdown > summary { padding: 13px 12px; border-radius: 10px; font-size: 16px; }
  .main-nav-dropdown[open] > summary { background: #f1f6ff; }
  .main-nav-submenu { position: static; min-width: 0; margin: 0 0 5px 16px; padding: 2px 0 2px 8px; border: 0; border-left: 2px solid #d8e6ff; border-radius: 0; box-shadow: none; }
  .main-nav-submenu a { padding: 10px 12px; font-size: 14px; }
}
/* Tablet: narrower art so the copy stays clear of it, tiles go to two rows of five */
@media (max-width: 1180px) {
  .top-inner {
    width: calc(100% - 64px);
    min-height: 76px;
  }
  .main-nav {
    padding-inline: 32px;
  }
  .hero-inner {
    width: calc(100% - 64px);
  }
  .hero-text {
    max-width: 50vw;
  }
  .hero-lead {
    max-width: 26em;
  }
  .hero-scene {
    width: 53%;
  }
  .quick.container {
    width: calc(100% - 64px);
  }
  .track-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  .track-feature {
    align-self: auto;
    min-height: 112px;
    margin: 0;
  }
}
/* Small tablet and phone: art moves under the copy */
@media (max-width: 900px) {
  :root {
    --tiles-overlap: 0px;
  }
  .hero {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
  }
  /* On phones the visual banner leads; copy follows beneath it. */
  .hero-scene {
    order: 1;
  }
  .hero-inner {
    order: 2;
  }
  .hero-inner {
    min-height: 0;
    padding-block: 26px 22px;
  }
  .hero-text {
    width: 100%;
    max-width: none;
  }
  .hero-text .hero-slide {
    min-width: 0;
  }
  .hero-text:before {
    right: 0;
  }
  .hero h1 {
    font-size: clamp(34px, 7.2vw, 60px);
  }
  .hero h1 span {
    white-space: normal;
  }
  .hero h1.h1-short {
    white-space: normal;
    line-height: 1.05;
  }
  .hero-lead {
    max-width: 36em;
    font-size: 17px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .btn-hero {
    min-width: 0;
    padding-inline: 16px;
  }
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-trust li,
  .hero-trust li:first-child {
    min-width: 0;
    justify-content: center;
    padding-inline: 10px;
    text-align: center;
  }
  .hero-scene {
    position: relative;
    inset: auto;
    width: auto;
    margin-inline: 32px;
    margin-bottom: 20px;
    aspect-ratio: 1076 / 584;
    border-radius: 22px;
    overflow: visible;
    box-shadow: 0 18px 40px rgba(22, 52, 110, 0.12);
  }
  .hero-scene .hero-art {
    border-radius: inherit;
  }
  .hero-art-contain {
    transform: scale(1.08);
    transform-origin: center center;
  }
  .hero-art {
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Place the indicator just below the banner with a slight overlap. */
  .hero-dots {
    position: absolute;
    inset: auto;
    left: 50%;
    bottom: -20px;
    top: auto;
    right: auto;
    flex-direction: row;
    justify-content: center;
    transform: translateX(-50%);
    width: max-content;
    margin: 0;
    padding: 4px 7px;
  }
  .hero-dots::before {
    top: 50%;
    bottom: auto;
    left: 28px;
    right: 28px;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }
  .hero-dots::after {
    top: 50%;
    left: calc(28px + var(--hero-current, 0) * 42px);
    width: 42px;
    height: 4px;
    background: linear-gradient(90deg, #19c8e5, #2676ff 45%, #8658ff 78%, #ffbe52);
    clip-path: inset(0 100% 0 0);
    transform: translateY(-50%);
  }
  .hero-dots.is-animating::after {
    animation-name: hero-progress-right;
  }
  .hero-dots.is-looping::after {
    top: 50%;
    left: 28px;
    width: calc((var(--hero-count, 3) - 1) * 42px);
    height: 4px;
    background: linear-gradient(270deg, #19c8e5, #2676ff 45%, #8658ff 78%, #ffbe52);
    clip-path: inset(0 0 0 100%);
  }
  .hero-dots.is-looping.is-animating::after {
    animation-name: hero-progress-left;
  }
}
@keyframes hero-progress-right {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes hero-progress-left {
  to { clip-path: inset(0 0 0 0); }
}
@media (max-width: 620px) {
  .top-inner,
  .hero-inner,
  .quick.container {
    width: calc(100% - 32px);
  }
  .top-inner {
    gap: 10px;
    min-height: 66px;
  }
  .brand {
    gap: 8px;
  }
  .brand-logo {
    height: 40px;
  }
  .top-cta {
    gap: 8px;
  }
  .btn-login {
    display: none;
  }
  .btn-enroll {
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px;
  }
  .btn-enroll i {
    display: none;
  }
  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 22px;
  }
  .main-nav {
    padding: 8px 16px 18px;
  }
  .nav-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    height: 48px;
    border: 1px solid #dbe2ee;
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: var(--cn-ink);
  }
  .nav-login i {
    font-size: 18px;
    color: var(--cn-blue);
  }
  .hero-inner {
    padding: 24px 0;
  }
  .hero h1 {
    font-size: clamp(28px, 6.5vw, 40px);
    line-height: 1.06;
  }
  .hero-kicker {
    letter-spacing: 0.32em;
  }
  .hero-lead {
    font-size: 15.5px;
  }
  .hero-actions {
    gap: 10px;
  }
  .btn-hero {
    height: 52px;
  }
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-trust li,
  .hero-trust li:first-child {
    flex-direction: column;
    gap: 5px;
    padding-inline: 6px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.25;
  }
  .hero-scene {
    margin-inline: 16px;
    border-radius: 16px;
  }
  .track-feature {
    min-height: 96px;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    border-width: 4px;
    border-radius: 16px;
  }
  .tf-icon {
    width: 44px;
  }
  .tf-text b {
    font-size: 18px;
  }
  .tf-text small {
    font-size: 13.5px;
  }
  .tf-deco {
    display: none;
  }
  .tf-go {
    width: 44px;
    margin-left: auto;
    font-size: 18px;
  }
  /* track cards: swipe only, edge to edge */
  .track-nav {
    display: none;
  }
  .track-rail .track-list {
    gap: 10px;
    margin: -10px -16px -12px;
    padding: 10px 16px 12px;
    scroll-padding-inline: 16px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .track-rail .track-list li {
    flex: 0 0 140px;
  }
  .track-card {
    padding: 12px;
    border-radius: 12px;
  }
  .track-card img {
    width: 34px;
    height: 34px;
  }
  .tc-go {
    width: 28px;
    font-size: 13px;
  }
  .track-card b {
    font-size: 13.5px;
  }
}
@media (max-width: 479px) {
  .hero-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-kicker {
    letter-spacing: 0.22em;
  }
  .hero-trust li,
  .hero-trust li:first-child {
    padding-inline: 4px;
    font-size: 12px;
  }
  .tf-icon {
    width: 36px;
  }
  .tf-text b {
    font-size: 17px;
  }
}

/* ---------- Choose your path: businesses vs students ---------- */
.paths.container {
  width: calc(100% - 88px);
  max-width: var(--top-max);
  margin-top: clamp(28px, 2.6vw, 48px);
  padding: clamp(26px, 2vw, 36px) clamp(14px, 1.1vw, 20px) clamp(16px, 1.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 2px, transparent 2px 15px),
    radial-gradient(60% 70% at 50% 0, #fbfdff 0, rgba(251, 253, 255, 0) 70%),
    linear-gradient(180deg, #f2f7fe, #e7effb);
  box-shadow: 0 18px 44px rgba(22, 52, 110, 0.08);
  font-family: var(--font-cn);
}
@media (min-width: 901px) {
  .quick.container + .paths.container {
    margin-top: clamp(12px, 1.2vw, 22px);
  }
}
.paths-head {
  text-align: center;
  margin-bottom: clamp(18px, 1.6vw, 30px);
}
.paths-head h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 30px);
  margin: 0;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cn-ink);
}
.paths-spark {
  flex: none;
  width: clamp(30px, 2.4vw, 46px);
  height: auto;
  fill: none;
  stroke: var(--cn-blue);
  stroke-width: 4;
  stroke-linecap: round;
  transform: scaleX(-1);
}
.paths-spark.flip {
  transform: none;
}
.paths-head p {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.1vw, 21px);
  color: var(--cn-text);
}
.paths-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1vw, 20px);
}
.path-card {
  /* art shrinks first so the two-column list keeps its room */
  --art-w: clamp(180px, calc(34vw - 260px), 400px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--art-w);
  align-items: end;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(22, 52, 110, 0.08);
}
.path-card.biz {
  --accent: var(--cn-blue);
  background: linear-gradient(135deg, #f5f8ff 0%, #ebeff8 70%);
}
.path-card.learn {
  --accent: #6c47ff;
  background: linear-gradient(135deg, #f7f5ff 0%, #ebe6fd 70%);
}
.path-copy {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 1.6vw, 30px) 0 clamp(22px, 1.6vw, 30px) clamp(22px, 1.8vw, 34px);
}
.path-top {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.4vw, 26px);
}
.path-icon {
  flex: none;
  width: clamp(72px, 5.6vw, 108px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(34px, 2.8vw, 54px);
  transition: transform 0.3s;
}
.biz .path-icon {
  background: #dbe7ff;
  color: var(--cn-blue);
}
.learn .path-icon {
  background: #e4dcff;
  color: #6c47ff;
}
.path-card:hover .path-icon {
  transform: translateY(-3px) rotate(-4deg);
}
.path-top h3 {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cn-ink);
}
.path-top p {
  max-width: 24em;
  margin: 8px 0 0;
  font-size: clamp(14.5px, 0.98vw, 18.5px);
  line-height: 1.45;
  color: var(--cn-text);
}
.path-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  justify-content: start;
  column-gap: clamp(16px, 1.5vw, 36px);
  row-gap: clamp(9px, 0.7vw, 13px);
  margin: clamp(20px, 1.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.path-list li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.6vw, 11px);
  font-size: clamp(13.5px, 0.92vw, 17.5px);
  font-weight: 500;
  color: var(--cn-ink);
  white-space: nowrap;
}
.path-list i {
  flex: none;
  width: clamp(22px, 1.45vw, 27px);
  height: clamp(22px, 1.45vw, 27px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(11.5px, 0.75vw, 14px);
}
.biz .path-list i {
  background: #dfe9ff;
  color: var(--cn-blue);
}
.learn .path-list i {
  background: #e6dfff;
  color: #5b3df5;
  -webkit-text-stroke: 0.5px;
}
.path-list li:hover i {
  animation: icon-pop 0.65s ease both;
}
.path-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: clamp(52px, 3.2vw, 62px);
  margin-top: clamp(22px, 1.7vw, 32px);
  padding: 0 clamp(24px, 2vw, 38px);
  border-radius: 14px;
  background: linear-gradient(180deg, #2b80ff, var(--cn-blue-dark));
  color: #fff;
  font-size: clamp(16px, 1.1vw, 21px);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(23, 105, 255, 0.28);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.learn .path-btn {
  background: linear-gradient(100deg, #1769ff, #6c47ff);
  box-shadow: 0 12px 24px rgba(108, 71, 255, 0.28);
}
.learn .path-btn:hover {
  box-shadow: 0 16px 30px rgba(108, 71, 255, 0.36);
}
.path-btn i {
  font-size: 1.15em;
  transition: transform 0.25s;
}
.path-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(23, 105, 255, 0.36);
}
.path-btn:hover i {
  transform: translateX(4px);
}
.path-btn:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 3px;
}
.path-art {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 100%;
  height: auto;
  margin: 10px 0 0;
}
/* Tablet: the two cards stack, each keeps its art on the right */
@media (max-width: 1279px) {
  .paths-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .path-card {
    --art-w: clamp(260px, 30vw, 400px);
    column-gap: 4%;
  }
}
@media (max-width: 1180px) {
  .paths.container {
    width: calc(100% - 64px);
  }
}
/* Tablet and phone: art sits under the copy */
@media (max-width: 900px) {
  .path-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .path-copy {
    padding: 24px 24px 4px;
  }
  .path-art {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 320px);
    margin: 4px auto 0;
  }
}
@media (max-width: 620px) {
  .paths.container {
    width: calc(100% - 32px);
    padding: 22px 10px 12px;
    border-radius: 22px;
  }
  .paths-head h2 {
    gap: 6px;
    font-size: 22px;
  }
  .paths-spark {
    width: 18px;
  }
  .paths-head p {
    font-size: 14.5px;
  }
  .path-card {
    border-radius: 18px;
  }
  .path-copy {
    padding: 20px 18px 2px;
  }
  .path-top {
    gap: 14px;
  }
  .path-icon {
    width: 60px;
    font-size: 28px;
  }
  .path-top h3 {
    font-size: 21px;
  }
  .path-top p {
    font-size: 14px;
  }
  .path-list {
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: 10px;
  }
  .path-list li {
    font-size: 15px;
  }
  .path-btn {
    align-self: stretch;
    justify-content: center;
    height: 52px;
    font-size: 16px;
  }
}
@media (max-width: 400px) {
  .paths-spark {
    display: none;
  }
}

/* ---------- Explore Programs: five folder-tab course cards ----------
   Every card is the same shape (382 x 450 in the reference) and is its own container,
   so --px is one reference pixel of that card and everything inside scales with it. */
.programs {
  margin-top: clamp(40px, 3.6vw, 72px);
  padding-bottom: clamp(8px, 0.8vw, 16px);
  font-family: var(--font-cn);
}
.programs-wrap.container {
  width: calc(100% - 88px);
  max-width: var(--top-max);
}
.programs-head {
  text-align: center;
}
.programs-eyebrow {
  margin: 0;
  font-size: clamp(12px, 0.86vw, 18px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #304afb;
}
.programs-head h2 {
  margin: 0.5em 0 0;
  font-size: clamp(26px, 2.2vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cn-ink);
}
.prog-defs {
  position: absolute;
  width: 0;
  height: 0;
}
.prog-scroller {
  position: relative;
  margin-top: clamp(20px, 1.6vw, 34px);
}
/* Slider: five cards per view; the row reaches 24px past the container on both sides so
   hover lifts and glows have room, and that strip fades out instead of clipping */
.prog-row {
  --gap: clamp(12px, 1.1vw, 22px);
  display: flex;
  gap: var(--gap);
  margin: 0 -24px;
  padding: 10px 24px clamp(24px, 2vw, 40px);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(24px - var(--gap)), #000 24px, #000 calc(100% - 24px), transparent calc(100% - 24px + var(--gap)));
  mask-image: linear-gradient(90deg, transparent calc(24px - var(--gap)), #000 24px, #000 calc(100% - 24px), transparent calc(100% - 24px + var(--gap)));
}
.prog-row::-webkit-scrollbar {
  display: none;
}
.prog-nav {
  position: absolute;
  z-index: 2;
  top: calc(50% - 8px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #e3e8f4;
  border-radius: 50%;
  background: #fff;
  color: var(--cn-ink);
  font-size: 18px;
  box-shadow: 0 8px 22px rgba(22, 52, 110, 0.14);
  translate: 0 -50%;
  transition:
    opacity 0.25s,
    visibility 0.25s,
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.prog-nav .bi {
  -webkit-text-stroke: 0.6px;
}
.prog-nav.prev {
  left: -23px;
}
.prog-nav.next {
  right: -23px;
}
.prog-nav:hover {
  border-color: var(--cn-blue);
  background: var(--cn-blue);
  color: #fff;
}
.prog-nav:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 3px;
}
.prog-nav:disabled {
  opacity: 0;
  visibility: hidden;
}
.prog-card {
  --bl: 20;
  --bt: 62;
  --bw: 342;
  --bh: 226;
  position: relative;
  flex: 0 0 calc((100% - 4 * var(--gap)) / 5);
  aspect-ratio: 382 / 450;
  container-type: inline-size;
  scroll-snap-align: start;
  transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-java {
  --line: #fba3b0;
  --glow: 251 113 133;
  --dot: #fe4a34;
  --dot-soft: #ffd3d5;
}
.pc-python {
  --line: #5da5fc;
  --glow: 59 130 246;
  --dot: #0760ff;
  --dot-soft: #aed1fe;
}
.pc-mern {
  --line: #6dd5ea;
  --glow: 45 200 210;
  --dot: #05d36f;
  --dot-soft: #b6efdc;
}
.pc-ai {
  --line: #ac9cfa;
  --glow: 139 92 246;
  --dot: #8409fd;
  --dot-soft: #d5c4fd;
}
.pc-ds {
  --line: #fb9faa;
  --glow: 244 63 94;
  --dot: #fe513c;
  --dot-soft: #fecdcf;
}
.pc-php {
  --line: #9a9de8;
  --glow: 99 102 241;
  --dot: #5b5fd6;
  --dot-soft: #d4d5fa;
  --badge: #5b5fd6;
  --art-a: #eceefe;
  --art-b: #cdd0f9;
}
.pc-da {
  --line: #f6b77d;
  --glow: 249 115 22;
  --dot: #f97316;
  --dot-soft: #fed7aa;
  --badge: #f2620f;
  --art-a: #fff3e6;
  --art-b: #ffd6ad;
}
.pc-dsa {
  --line: #79c7ef;
  --glow: 14 165 233;
  --dot: #0ea5e9;
  --dot-soft: #bae6fd;
  --badge: #0b8fd1;
  --art-a: #e8f7fe;
  --art-b: #c2e7fa;
}
.pc-dm {
  --line: #f19bd5;
  --glow: 219 39 119;
  --dot: #db2777;
  --dot-soft: #fbcfe8;
  --badge: #db2777;
  --art-a: #fde9f5;
  --art-b: #f8c6e3;
}
.pc-gd {
  --line: #f0c75e;
  --glow: 234 179 8;
  --dot: #e3a008;
  --dot-soft: #fde68a;
  --badge: #d99406;
  --art-a: #fff8e0;
  --art-b: #ffe49c;
}
.prog-link {
  --px: calc(100cqw / 382);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--cn-ink);
  border-radius: calc(22 * var(--px));
}
.prog-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(6 * var(--px)) calc(12 * var(--px)) rgb(var(--glow) / 0.1));
  transition: filter 0.35s ease;
}
.prog-frame path {
  fill: url(#progFill);
  stroke: var(--line);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.prog-cat {
  position: absolute;
  right: calc(30 * var(--px));
  top: calc(23 * var(--px));
  font-size: calc(18 * var(--px));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.prog-cat::before {
  content: "— ";
}
.prog-banner {
  position: absolute;
  left: calc(var(--bl) * var(--px));
  top: calc(var(--bt) * var(--px));
  width: calc(var(--bw) * var(--px));
  height: calc(var(--bh) * var(--px));
  border-radius: calc(12 * var(--px));
  object-fit: cover;
}
/* banners built from page text and an illustration, in the reference banners' layout */
.prog-art {
  position: absolute;
  left: calc(var(--bl) * var(--px));
  top: calc(var(--bt) * var(--px));
  width: calc(var(--bw) * var(--px));
  height: calc(var(--bh) * var(--px));
  overflow: hidden;
  border-radius: calc(12 * var(--px));
  background:
    radial-gradient(circle at 76% 60%, rgba(255, 255, 255, 0.5) 0 calc(104 * var(--px)), rgba(255, 255, 255, 0) calc(105 * var(--px))),
    linear-gradient(135deg, var(--art-a), var(--art-b));
}
.pa-illus {
  position: absolute;
  right: calc(2 * var(--px));
  bottom: calc(6 * var(--px));
  width: calc(178 * var(--px));
  height: calc(178 * var(--px));
}
.pa-badge {
  position: absolute;
  left: calc(13 * var(--px));
  top: calc(24 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--px));
  height: calc(26 * var(--px));
  padding: 0 calc(10 * var(--px));
  border-radius: calc(5 * var(--px));
  background: var(--badge);
  color: #fff;
  font-size: calc(13.5 * var(--px));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pa-badge .bi {
  font-size: calc(15 * var(--px));
}
.pa-title {
  position: absolute;
  left: calc(13 * var(--px));
  top: calc(70 * var(--px));
  font-size: calc(30 * var(--px));
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #151515;
}
.pa-chip {
  position: absolute;
  left: calc(12 * var(--px));
  top: calc(152 * var(--px));
  display: flex;
  align-items: center;
  height: calc(27 * var(--px));
  padding: 0 calc(11 * var(--px));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 calc(2 * var(--px)) calc(6 * var(--px)) rgba(30, 40, 80, 0.1);
  color: #262b3a;
  font-size: calc(12.5 * var(--px));
  font-weight: 600;
  white-space: nowrap;
}
.prog-body {
  position: absolute;
  left: calc((var(--bl) + 14) * var(--px));
  top: calc((var(--bt) + var(--bh)) * var(--px));
  display: flex;
  flex-direction: column;
}
.prog-title {
  margin-top: calc(12 * var(--px));
  font-size: calc(51 * var(--px) * var(--ts, 1));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.prog-sub {
  margin-top: calc(2 * var(--px));
  font-size: calc(22 * var(--px));
  font-weight: 500;
  line-height: 1.2;
  color: #616f96;
  white-space: nowrap;
}
.prog-badge {
  position: absolute;
  right: calc((382 - var(--bl) - var(--bw)) * var(--px));
  top: calc((var(--bt) + var(--bh) + 22) * var(--px));
  display: flex;
  align-items: center;
  height: calc(45 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: 999px;
  background: #fde6e7;
  color: #f2361f;
  font-size: calc(19.5 * var(--px));
  font-weight: 600;
  white-space: nowrap;
}
.prog-dots {
  position: absolute;
  left: calc((var(--bl) + 15) * var(--px));
  bottom: calc(20 * var(--px));
  display: flex;
  gap: calc(11 * var(--px));
}
.prog-dots i {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  border-radius: 50%;
  background: var(--dot-soft);
}
.prog-dots i:first-child {
  background: var(--dot);
}
/* hover: a small lift and the card's own colour glowing softly behind it */
.prog-card:hover {
  translate: 0 -6px;
}
.prog-card:hover .prog-frame {
  filter: drop-shadow(0 calc(14 * var(--px)) calc(24 * var(--px)) rgb(var(--glow) / 0.34));
}
.prog-link:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 4px;
}
/* Below 1200px five cards no longer fit: fixed-width cards, swiped or moved with the arrows */
@media (max-width: 1199px) {
  .programs-wrap.container {
    width: calc(100% - 64px);
  }
  .prog-row {
    gap: 14px;
    margin-inline: -32px;
    padding: 12px 32px 36px;
    scroll-padding-inline: 32px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .prog-card {
    flex: 0 0 300px;
  }
  .prog-nav.prev {
    left: -14px;
  }
  .prog-nav.next {
    right: -14px;
  }
}
@media (max-width: 620px) {
  .programs-wrap.container {
    width: calc(100% - 32px);
  }
  .prog-row {
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .prog-card {
    flex-basis: 282px;
  }
  .prog-nav {
    display: none;
  }
}

/* ---------- 6-month career journey (replaces the Property category) ----------
   Desktop: one canvas in the path artwork's 1832x800 proportions; everything inside is
   placed in % and sized in canvas cqw so the whole roadmap scales as a unit.
   Card internals use --u, which is 1 canvas cqw here and card-relative in the timeline view. */
.journey {
  margin-top: clamp(36px, 3.2vw, 60px);
  padding: clamp(30px, 2.8vw, 56px) 0;
  background: #fff;
  font-family: var(--font-cn);
}
.journey-wrap.container {
  width: calc(100% - 88px);
  max-width: var(--top-max);
}
.journey-canvas {
  --u: 1cqw;
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  aspect-ratio: 1832 / 800;
  container-type: inline-size;
}
.journey-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.jp-nodes circle {
  fill: #4f6bff;
  stroke: #fff;
  stroke-width: 4.5;
}
/* heading block: icon floats so the first title line sits beside it */
.journey-head {
  position: absolute;
  z-index: 2;
  left: 2.29%;
  top: 4.62%;
  width: 31%;
}
.jh-icon {
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.3cqw;
  aspect-ratio: 1;
  margin-right: 1cqw;
  border: 0.18cqw solid rgba(255, 255, 255, 0.85);
  border-radius: 0.9cqw;
  background: #dce8ff;
  color: var(--cn-blue);
  box-shadow: 0 0.5cqw 1.2cqw rgba(23, 105, 255, 0.12);
}
.jh-icon .bi-mortarboard-fill {
  font-size: 1.9cqw;
  line-height: 1;
}
.jh-icon .bi-code-slash {
  margin-top: -0.1cqw;
  font-size: 1.1cqw;
  line-height: 1;
}
.jh-eyebrow {
  margin: 0.85cqw 0 0;
  font-size: 0.88cqw;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cn-blue);
}
.journey-head h2 {
  margin: 0.45cqw 0 0;
  font-size: 2.5cqw;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--cn-ink);
}
.jh-desc {
  max-width: 22em;
  margin: 0.75cqw 0 0;
  font-size: max(13px, 1.08cqw);
  line-height: 1.45;
  color: var(--cn-text);
}
.jh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5cqw 0.6cqw;
  margin-top: 1.1cqw;
}
.jh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  height: 2.15cqw;
  padding: 0 1.15cqw;
  border: 0.1cqw solid var(--cn-blue);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--cn-blue);
  font-size: max(12px, 0.9cqw);
  font-weight: 700;
  transition:
    background-color 0.2s,
    color 0.2s,
    translate 0.2s;
}
.jh-btn:hover {
  background: var(--cn-blue);
  color: #fff;
  translate: 0 -1px;
}
.jh-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.45cqw;
  height: 2.15cqw;
  padding: 0 0.9cqw;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cn-text);
  font-size: max(12px, 0.88cqw);
  font-weight: 600;
  cursor: pointer;
  animation: jFadeUp 0.5s both;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.jh-replay i {
  transition: rotate 0.5s;
}
.jh-replay:hover {
  background: rgba(23, 105, 255, 0.08);
  color: var(--cn-blue);
}
.jh-replay[data-mode="replay"]:hover i {
  rotate: -180deg;
}
.jh-btn:focus-visible,
.jh-replay:focus-visible,
.j-start:focus-visible,
.j-open:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 3px;
}
/* handwritten notes */
.j-note {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: "Gochi Hand", "Comic Sans MS", cursive;
  font-size: 0.98cqw;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: #3a4380;
}
.j-note-a {
  left: 30.6%;
  top: 22.55%;
  transform: rotate(-14deg);
}
.j-note-b {
  left: 89.9%;
  top: 8.49%;
  transform: rotate(-12deg);
}
/* milestones along the path; the icon sits centred on its path marker */
.j-milestones {
  margin: 0;
  padding: 0;
  list-style: none;
}
.j-mile {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
}
.j-mile-ico {
  position: relative;
  z-index: 1;
  flex: none;
  width: 2.7cqw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0.18cqw solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #2b80ff, #6c47ff);
  color: #fff;
  font-size: 1.15cqw;
  box-shadow: 0 0.4cqw 0.9cqw rgba(23, 105, 255, 0.26);
  transition: scale 0.25s;
}
.j-mile-txt {
  display: flex;
  align-items: center;
  height: 1.95cqw;
  margin-left: -1.35cqw;
  padding: 0 1cqw 0 1.8cqw;
  border-radius: 0 999px 999px 0;
  background: #e1eaff;
  color: var(--cn-ink);
  font-size: max(11.5px, 0.88cqw);
  font-weight: 600;
  white-space: nowrap;
}
.j-start {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.j-start:hover .j-mile-ico {
  scale: 1.08;
}
.jmi-start {
  left: 3.67%;
  top: 45.41%;
}
.jmi-start .j-mile-txt {
  background: #d8e5ff;
  font-size: max(12px, 1.02cqw);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.jmi-mentor {
  left: 24.85%;
  top: 42.78%;
}
.jmi-hands {
  left: 49.85%;
  top: 49.16%;
}
.jmi-portfolio {
  left: 83.91%;
  top: 33.41%;
}
.jmi-career {
  left: 90.34%;
  top: 50.38%;
  height: 2.4cqw;
  gap: 0.55cqw;
  padding: 0 1.15cqw;
  border: 0.18cqw solid #fff;
  border-radius: 999px;
  background: linear-gradient(90deg, #1769ff, #6c47ff);
  box-shadow:
    0 0 0 0.12cqw #c3d3ff,
    0 0.55cqw 1.3cqw rgba(91, 61, 245, 0.28);
  color: #fff;
  font-size: max(11.5px, 1cqw);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
}
.jmi-career i {
  font-size: 1.1em;
}
/* month cards */
.j-months {
  margin: 0;
  padding: 0;
  list-style: none;
}
.j-card {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
}
.jm-1 {
  --x: 2.81%;
  --y: 56%;
  --w: 19%;
}
.jm-2 {
  --x: 26.23%;
  --y: 60%;
  --w: 19%;
}
.jm-3 {
  --x: 37.72%;
  --y: 7.38%;
  --w: 19%;
}
.jm-4 {
  --x: 49.83%;
  --y: 62.88%;
  --w: 19%;
}
.jm-5 {
  --x: 60.36%;
  --y: 7.38%;
  --w: 20.5%;
}
.jm-6 {
  --x: 73.84%;
  --y: 52.75%;
  --w: 23%;
}
.j-card-in {
  position: relative;
  padding: calc(0.33 * var(--u));
  border-radius: calc(1.15 * var(--u));
  background: #fff;
  box-shadow:
    0 calc(0.7 * var(--u)) calc(1.6 * var(--u)) rgba(22, 52, 110, 0.08),
    0 0 0 1px rgba(214, 226, 250, 0.7);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.j-card:hover .j-card-in {
  transform: translateY(-3px);
  box-shadow:
    0 calc(1 * var(--u)) calc(2.2 * var(--u)) rgba(22, 52, 110, 0.14),
    0 0 0 1px rgba(188, 208, 250, 0.9);
}
.j-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(0.85 * var(--u)) calc(0.85 * var(--u)) calc(0.45 * var(--u)) calc(0.45 * var(--u));
  background: #dfe8f8;
}
.j-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.jm-1 .j-photo img {
  object-position: 50% 35%;
}
.j-card:hover .j-photo img {
  transform: scale(1.04);
}
/* "View topics" chip on the photo; always shown on touch screens */
.j-peek {
  position: absolute;
  right: calc(0.5 * var(--u));
  bottom: calc(0.5 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(0.3 * var(--u));
  padding: calc(0.28 * var(--u)) calc(0.65 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--cn-blue);
  font-size: max(11px, calc(0.72 * var(--u)));
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(16, 32, 80, 0.18);
  opacity: 0;
  translate: 0 6px;
  transition:
    opacity 0.25s,
    translate 0.25s;
}
.j-card:hover .j-peek,
.j-card:focus-within .j-peek {
  opacity: 1;
  translate: 0 0;
}
@media (hover: none) {
  .j-peek {
    opacity: 1;
    translate: 0 0;
  }
}
.j-open {
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.j-num {
  position: absolute;
  left: calc(0.1 * var(--u));
  top: calc(-0.35 * var(--u));
  width: calc(2.85 * var(--u));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: calc(0.2 * var(--u)) solid #fff;
  border-radius: 50%;
  background: #dbe7ff;
  color: var(--cn-ink);
  font-size: calc(1.2 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 calc(0.3 * var(--u)) calc(0.7 * var(--u)) rgba(22, 52, 110, 0.14);
}
.j-num.hot {
  background: linear-gradient(135deg, #2b80ff, #6c47ff);
  color: #fff;
}
.j-month {
  position: absolute;
  left: calc(3.3 * var(--u));
  top: calc(0.55 * var(--u));
  display: flex;
  align-items: center;
  height: calc(1.55 * var(--u));
  padding: 0 calc(1.05 * var(--u));
  border: calc(0.1 * var(--u)) solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(227, 237, 255, 0.95);
  color: var(--cn-ink);
  font-size: max(11px, calc(0.78 * var(--u)));
  font-weight: 600;
}
.j-info {
  display: flex;
  align-items: center;
  gap: calc(0.7 * var(--u));
  min-height: calc(3.6 * var(--u));
  padding: calc(0.35 * var(--u)) calc(0.45 * var(--u)) calc(0.1 * var(--u));
}
.j-ico {
  flex: none;
  width: calc(2.55 * var(--u));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: calc(0.6 * var(--u));
  background: #e6eeff;
  color: var(--cn-blue);
  font-size: calc(1.2 * var(--u));
}
.j-info h3 {
  margin: 0;
  font-size: max(14px, calc(1.08 * var(--u)));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cn-ink);
}
.j-info p {
  margin: calc(0.2 * var(--u)) 0 0;
  font-size: max(11.5px, calc(0.74 * var(--u)));
  line-height: 1.35;
  color: #4a5478;
}

/* ---- Animated journey: script.js adds .is-armed (nothing is hidden without it),
   .is-launched once the journey starts (click or scroll), .is-done at Career Ready,
   and .is-on to each [data-step] piece as the line reaches it ---- */
.jp-dot {
  opacity: 0;
  transition: opacity 0.3s;
}
.journey.is-launched:not(.is-done) .jp-dot {
  opacity: 1;
  transition-delay: 0.6s;
}
.jp-dot-glow {
  fill: rgba(91, 108, 255, 0.28);
  transform-box: fill-box;
  transform-origin: center;
  animation: jDotPulse 1s ease-in-out infinite alternate;
}
.jp-dot-core {
  fill: #fff;
  stroke: #5b6cff;
  stroke-width: 5;
}
.journey.is-armed:not(.is-launched) .jp-line {
  opacity: 0;
}
/* Before the journey starts: a centred intro with a large Start Your Journey button.
   On desktop the intro keeps its roadmap layout; script.js measures where each .jh-piece
   sits in the centred version (.jh-probe) and parks it there with a transform, so starting
   (or rewinding to the start) slides every piece smoothly between the two. */
.jh-piece {
  transform-origin: 0 0;
}
:is(.jh-eyebrow, .journey-head h2, .jh-desc) > .jh-piece {
  display: inline-block;
}
.j-cta {
  display: none;
}
.journey.is-armed .j-cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 80.5%;
  translate: -50% -2cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
/* faint horizon curve either side of the button */
.j-cta-arc {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 2cqw;
  width: 40cqw;
  height: 5cqw;
  translate: -50% -100%;
  border-bottom: 2px solid rgba(23, 105, 255, 0.28);
  border-radius: 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.j-cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  height: 4cqw;
  padding: 0 1.7cqw 0 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #1769ff, #7b5cff);
  box-shadow: 0 1cqw 2.4cqw rgba(91, 61, 245, 0.3);
  color: #fff;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 0 0;
}
.j-cta-btn .j-mile-ico {
  width: 4.2cqw;
  border-width: 0.28cqw;
  background: linear-gradient(135deg, #2b80ff, #1257e6);
  font-size: 1.75cqw;
  box-shadow:
    0 0 0 0.6cqw rgba(23, 105, 255, 0.1),
    0 0.6cqw 1.4cqw rgba(23, 105, 255, 0.35);
}
.j-cta-btn .j-mile-ico::after {
  content: "";
  position: absolute;
  inset: -0.6cqw;
  border: 2px solid rgba(23, 105, 255, 0.45);
  border-radius: 50%;
  animation: jPulse 1.8s ease-out infinite;
}
.j-cta-txt {
  padding-left: 1.1cqw;
  font-size: max(14px, 1.22cqw);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.j-cta-btn:hover {
  box-shadow: 0 1.2cqw 2.8cqw rgba(91, 61, 245, 0.4);
}
.j-cta-btn:hover .j-mile-ico {
  scale: 1.08;
}
.j-cta-btn:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 4px;
}
.j-cta-hint {
  margin: 1.1cqw 0 0;
  font-size: max(12.5px, 0.98cqw);
  color: var(--cn-text);
}
/* starting: the big button flies down to the Start Here pill and hands over to it */
.journey.is-armed .j-cta-btn {
  transition:
    transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.25s ease,
    visibility 0s;
}
.journey.is-armed :is(.j-cta-hint, .j-cta-arc) {
  transition: opacity 0.35s ease 0.45s;
}
.journey.is-launched .j-cta-btn {
  transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(var(--cs, 0.6));
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.25s ease 0.45s,
    visibility 0s linear 0.7s;
}
.journey.is-launched :is(.j-cta-hint, .j-cta-arc) {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.jmi-start {
  transform-origin: 1.35cqw 50%;
}
.journey.is-armed .jmi-start {
  transition:
    opacity 0.25s ease 0.5s,
    scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s,
    visibility 0s;
}
.journey.is-armed:not(.is-launched) .jmi-start {
  opacity: 0;
  scale: 0.6;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    scale 0.2s ease,
    visibility 0s linear 0.2s;
}
@media (min-width: 1400px) {
  /* the section fills the screen under the header so it can stay pinned while it plays */
  .journey {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-h, 86px));
    padding-block: 22px;
  }
  .journey-canvas {
    max-width: min(1600px, max(1080px, calc((100vh - var(--header-h, 86px) - 44px) * 1832 / 800)));
  }
  .journey.is-armed .jh-piece {
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--jd, 0ms);
  }
  .journey.is-armed .jh-btn.jh-piece {
    transition:
      transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--jd, 0ms),
      translate 0.2s,
      background-color 0.2s,
      color 0.2s;
  }
  .journey.is-armed:not(.is-launched) .jh-piece {
    transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1));
  }
  /* measuring: .jh-flat drops every parking transform, .jh-probe also shows the centred layout */
  .journey:is(.jh-probe, .jh-flat, .jh-instant) :is(.jh-piece, .j-cta-btn, .jmi-start) {
    transition: none !important;
  }
  .journey:is(.jh-probe, .jh-flat) :is(.jh-piece, .j-cta-btn, .jmi-start) {
    transform: none !important;
    scale: none !important;
  }
  .journey.jh-probe .journey-head {
    left: 50%;
    top: 6.5%;
    width: 52%;
    translate: -50% 0;
    text-align: center;
  }
  .journey.jh-probe .jh-icon {
    float: none;
    width: 5.8cqw;
    margin: 0 auto;
  }
  .journey.jh-probe .jh-eyebrow {
    margin-top: 1.7cqw;
    font-size: 1.13cqw;
  }
  .journey.jh-probe .journey-head h2 {
    margin-top: 0.5cqw;
    font-size: 3.9cqw;
    line-height: 1.07;
  }
  .journey.jh-probe .jh-desc {
    max-width: 22em;
    margin: 1.1cqw auto 0;
    font-size: max(14px, 1.5cqw);
  }
  .journey.jh-probe .jh-actions {
    justify-content: center;
    margin-top: 1.7cqw;
  }
  .journey.jh-probe .jh-btn {
    gap: 0.75cqw;
    height: 2.85cqw;
    padding: 0 1.6cqw;
    font-size: max(13px, 1.12cqw);
  }
}
:is(.j-start, .j-cta-btn).is-pressed .j-mile-ico::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 50%;
  background: rgba(23, 105, 255, 0.35);
  animation: jRipple 0.6s ease-out forwards;
}
/* every step-tagged piece waits hidden until the line reaches it */
.journey.is-armed [data-step] {
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}
.journey.is-armed [data-step]:not(.is-on) {
  opacity: 0;
  visibility: hidden;
}
.journey.is-armed [data-step].is-on {
  transition-delay: 0s;
}
.journey.is-armed .j-mile[data-step] {
  transition:
    opacity 0.35s ease,
    scale 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0.35s;
}
.journey.is-armed .j-mile[data-step]:not(.is-on) {
  scale: 0.6;
}
.journey.is-armed .j-card {
  transition:
    opacity 0.5s ease,
    translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.5s;
}
.journey.is-armed .j-card:not(.is-on) {
  translate: 0 22px;
  scale: 0.92;
}
.journey.is-armed :is(.jm-3, .jm-5):not(.is-on) {
  translate: 0 -22px;
}
.journey.is-armed .j-card .j-num {
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.journey.is-armed .j-card:not(.is-on) .j-num {
  scale: 0;
}
.journey.is-armed .j-card .j-month {
  transition:
    opacity 0.4s ease 0.4s,
    translate 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.journey.is-armed .j-card:not(.is-on) .j-month {
  opacity: 0;
  translate: -10px 0;
}
.journey.is-armed .jp-nodes circle {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.3s,
    scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0.3s;
}
.journey.is-armed .jp-nodes circle:not(.is-on) {
  scale: 0;
}
.journey.is-armed .jp-arrow {
  transform-box: fill-box;
  transform-origin: 100% 0;
  transition:
    opacity 0.3s,
    scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0.3s;
}
.journey.is-armed .jp-arrow:not(.is-on) {
  scale: 0.2;
}
.journey.is-armed .j-note {
  transition:
    opacity 0.3s,
    clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0s linear 0.3s;
}
.journey.is-armed .j-note:not(.is-on) {
  clip-path: inset(0 100% 0 0);
}
.journey.is-armed .j-note.is-on {
  clip-path: inset(0 0 0 0);
  transition-delay: 0.4s;
}
/* finale: Career Ready glows and throws a ring */
.jmi-career::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #9d86ff;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}
.journey.is-armed .jmi-career.is-on {
  animation: jCareerGlow 1.4s ease-in-out 0.35s 2;
}
.journey.is-armed .jmi-career.is-on::after {
  animation: jBurst 0.9s ease-out 0.3s;
}
@keyframes jPulse {
  from {
    transform: scale(0.9);
    opacity: 1;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes jRipple {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}
@keyframes jDotPulse {
  from {
    scale: 0.75;
  }
  to {
    scale: 1.15;
  }
}
@keyframes jCareerGlow {
  50% {
    box-shadow:
      0 0 0 0.12cqw #c3d3ff,
      0 0 2.2cqw 0.5cqw rgba(123, 92, 255, 0.55);
  }
}
@keyframes jBurst {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.35, 1.9);
  }
}
@keyframes jFadeUp {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

/* Topic pop-up for a month (opened from the shared modal) */
.modal-backdrop.is-journey {
  background: rgba(11, 21, 48, 0.55);
}
.modal-backdrop.is-journey .modal {
  width: min(460px, 100%);
  padding: 26px 26px 22px;
  border-radius: 18px;
  font-family: var(--font-cn);
  box-shadow: 0 30px 60px rgba(11, 21, 48, 0.25);
  animation: jFadeUp 0.35s both;
}
.modal-backdrop.is-journey .close-modal {
  background: #eaf1ff;
  color: var(--cn-blue);
}
.modal-backdrop.is-journey .modal h2 {
  margin: 0 40px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--cn-ink);
}
.jd-sub {
  margin: 4px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cn-blue);
}
.jd-topics {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jd-topics li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cn-ink);
}
.jd-topics i {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6eeff;
  color: var(--cn-blue);
  font-size: 13px;
}
.jd-outcome {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(100deg, #eef3ff, #f1edff);
  font-size: 13.5px;
  color: var(--cn-ink);
}
.jd-outcome i {
  color: #6c47ff;
  font-size: 16px;
}

/* Below 1400px the canvas would get too small to read: intro, milestone row, then a
   vertical timeline (cards alternate either side of a centre line; one column on phones) */
@media (max-width: 1399px) {
  .journey-canvas {
    aspect-ratio: auto;
    container-type: normal;
  }
  .journey-path,
  .j-note {
    display: none;
  }
  .journey-head {
    position: static;
    width: auto;
    max-width: 640px;
  }
  .journey-head::after {
    content: "";
    display: block;
    clear: both;
  }
  .jh-icon {
    width: 54px;
    margin-right: 14px;
    border-width: 2px;
    border-radius: 14px;
  }
  .jh-icon .bi-mortarboard-fill {
    font-size: 24px;
  }
  .jh-icon .bi-code-slash {
    font-size: 14px;
  }
  .jh-eyebrow {
    margin-top: 6px;
    font-size: 12px;
  }
  .journey-head h2 {
    margin-top: 4px;
    font-size: clamp(24px, 3vw, 34px);
  }
  .jh-desc {
    margin-top: 10px;
    font-size: 15px;
  }
  .jh-actions {
    gap: 8px 10px;
    margin-top: 14px;
  }
  .jh-btn,
  .jh-replay {
    gap: 8px;
    height: 40px;
    font-size: 14px;
  }
  .jh-btn {
    padding: 0 18px;
    border-width: 1.5px;
  }
  .jh-replay {
    padding: 0 14px;
  }
  .j-milestones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 20px 0 26px;
  }
  .j-mile {
    position: static;
  }
  .j-mile-ico {
    width: 34px;
    border-width: 2px;
    font-size: 15px;
    box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22);
  }
  .j-mile-txt,
  .jmi-start .j-mile-txt {
    height: 28px;
    margin-left: -16px;
    padding: 0 12px 0 22px;
    font-size: 13px;
  }
  /* Career Ready sits where the timeline ends */
  .jmi-career {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 0;
    height: 34px;
    gap: 7px;
    padding: 0 14px;
    border-width: 2px;
    box-shadow: 0 6px 14px rgba(91, 61, 245, 0.24);
    font-size: 13px;
  }
  .j-months {
    --grow: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 72px;
    row-gap: 16px;
    padding: 4px 0 46px;
  }
  .j-months::before,
  .j-months::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    border-radius: 4px;
  }
  .j-months::before {
    bottom: 0;
    background: #d6e2fb;
  }
  .j-months::after {
    height: var(--grow);
    max-height: 100%;
    background: linear-gradient(180deg, #1769ff, #7b5cff);
    transition: height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .j-card {
    --u: calc(100cqw / 22);
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 400px);
    container-type: inline-size;
  }
  .j-card:nth-child(odd) {
    grid-column: 1;
    justify-self: end;
  }
  .j-card:nth-child(even) {
    grid-column: 2;
    justify-self: start;
  }
  .jm-1 {
    grid-row: 1 / span 2;
  }
  .jm-2 {
    grid-row: 2 / span 2;
  }
  .jm-3 {
    grid-row: 3 / span 2;
  }
  .jm-4 {
    grid-row: 4 / span 2;
  }
  .jm-5 {
    grid-row: 5 / span 2;
  }
  .jm-6 {
    grid-row: 6 / span 2;
  }
  /* marker where each card meets the line */
  .j-card::before {
    content: "";
    position: absolute;
    top: 26px;
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #4f6bff;
    box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.18);
  }
  .j-card:nth-child(odd)::before {
    right: -44px;
  }
  .j-card:nth-child(even)::before {
    left: -44px;
  }
  /* before the journey starts only the centred intro and its button show */
  .journey.is-armed:not(.is-launched) .j-milestones,
  .journey.is-armed:not(.is-launched) .j-months {
    display: none;
  }
  .journey.is-armed:not(.is-launched) .journey-head {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
  }
  .journey.is-armed:not(.is-launched) .jh-icon {
    float: none;
    width: 62px;
    margin: 0 auto;
    border-width: 2px;
    border-radius: 16px;
  }
  .journey.is-armed:not(.is-launched) .jh-icon .bi-mortarboard-fill {
    font-size: 27px;
  }
  .journey.is-armed:not(.is-launched) .jh-icon .bi-code-slash {
    font-size: 15px;
  }
  .journey.is-armed:not(.is-launched) .jh-eyebrow {
    margin-top: 14px;
    font-size: 12.5px;
  }
  .journey.is-armed:not(.is-launched) .journey-head h2 {
    margin-top: 6px;
    font-size: clamp(28px, 4.2vw, 40px);
  }
  .journey.is-armed:not(.is-launched) .jh-desc {
    margin: 10px auto 0;
    font-size: 15.5px;
  }
  .journey.is-armed:not(.is-launched) .jh-actions {
    justify-content: center;
    margin-top: 16px;
  }
  .journey.is-armed:not(.is-launched) .jh-btn {
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
  }
  .journey.is-armed .j-cta {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    margin-top: 26px;
  }
  .journey.is-armed.is-launched .j-cta {
    display: none;
  }
  .j-cta-arc {
    top: 26px;
    width: min(560px, 92vw);
    height: 36px;
  }
  .j-cta-btn {
    height: 52px;
    padding-right: 22px;
    box-shadow: 0 12px 26px rgba(91, 61, 245, 0.3);
  }
  .j-cta-btn .j-mile-ico {
    width: 54px;
    border-width: 3px;
    font-size: 22px;
    box-shadow:
      0 0 0 7px rgba(23, 105, 255, 0.1),
      0 8px 18px rgba(23, 105, 255, 0.35);
  }
  .j-cta-btn .j-mile-ico::after {
    inset: -8px;
  }
  .j-cta-txt {
    padding-left: 14px;
    font-size: 15px;
  }
  .j-cta-hint {
    margin-top: 12px;
    font-size: 13px;
  }
  /* once started, the intro and milestones settle in with a short fade */
  .journey.is-launched .journey-head,
  .journey.is-launched .j-milestones {
    animation: jFadeUp 0.5s both;
  }
  .jmi-start {
    transform-origin: 17px 50%;
  }
  .journey.is-armed .j-card:nth-child(odd):not(.is-on) {
    translate: -24px 0;
  }
  .journey.is-armed .j-card:nth-child(even):not(.is-on) {
    translate: 24px 0;
  }
}
@media (max-width: 1180px) {
  .journey-wrap.container {
    width: calc(100% - 64px);
  }
}
@media (max-width: 699px) {
  .j-months {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    padding-left: 36px;
  }
  .j-months::before,
  .j-months::after {
    left: 12px;
  }
  .j-card,
  .j-card:nth-child(odd),
  .j-card:nth-child(even) {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: auto;
  }
  .j-card:nth-child(odd)::before,
  .j-card:nth-child(even)::before {
    right: auto;
    left: -32px;
  }
  .jmi-career {
    left: 0;
    translate: none;
  }
  .journey.is-armed .j-card:nth-child(odd):not(.is-on),
  .journey.is-armed .j-card:nth-child(even):not(.is-on) {
    translate: 0 24px;
  }
}
@media (max-width: 620px) {
  .journey-wrap.container {
    width: calc(100% - 32px);
  }
  .j-mile-txt,
  .jmi-start .j-mile-txt {
    font-size: 12.5px;
  }
}

/* ---------- Certificate reveal: pinned scroll story after the 6-month journey ----------
   Without JS (or with reduced motion) this is a static section: four step cards and the
   student holding both certificates. script.js adds .is-animated, which turns the track into
   a tall scroll area with a sticky stage, and drives every layer from one progress value.
   Scene geometry lives in custom properties on .cr-scene (cq units of the scene), so the
   script only measures the boxes the CSS lays out. */
.cert-reveal {
  --cr-ar: 1.4147;
  font-family: var(--font-cn);
  color: var(--cn-ink);
  background: #fff;
  padding: clamp(40px, 4vw, 72px) 0;
}
.cr-wrap.container {
  width: calc(100% - 128px);
  max-width: 1440px;
}
.cr-title {
  margin: 0 0 18px;
  font-size: clamp(12px, 0.86vw, 15px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #304afb;
}
.cr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* ---- copy ---- */
.cr-tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(22, 52, 110, 0.07);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.cr-tag-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-right: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1769ff, #6c47ff);
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cr-tag-num::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 22px;
  height: 2px;
  margin-left: 6px;
  background: #6c47ff;
}
.cr-tag-name {
  padding-right: 18px;
}
.cr-step h3 {
  margin: 16px 0 0;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.cr-step h3 span {
  display: block;
  background: linear-gradient(90deg, #1769ff, #6c47ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cr-text {
  max-width: 30em;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cn-text);
}
.cr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.cr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background-color 0.2s,
    color 0.2s;
}
.cr-btn.primary {
  border: 0;
  background: linear-gradient(180deg, #2b80ff, var(--cn-blue-dark));
  color: #fff;
  box-shadow: 0 12px 24px rgba(23, 105, 255, 0.28);
}
.cr-btn.ghost {
  border: 1.5px solid var(--cn-blue);
  background: #fff;
  color: var(--cn-blue);
}
.cr-btn:hover {
  transform: translateY(-2px);
}
.cr-btn.ghost:hover {
  background: #f0f5ff;
}
.cr-btn i {
  transition: translate 0.25s;
}
.cr-btn:hover i {
  translate: 4px 0;
}
.cr-btn:focus-visible,
.cr-skip:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.45);
  outline-offset: 3px;
}
.cr-features {
  display: flex;
  gap: 26px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.cr-features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cn-text);
  text-align: center;
}
.cr-features i {
  font-size: 22px;
  color: var(--cn-blue);
}
/* ---- scene pieces (shared) ---- */
.cr-scene {
  position: relative;
  container-type: size;
  --d-h: 96cqh;
  --d-w: calc(var(--d-h) * 1488 / 1624);
  --d-left: calc(50cqw - var(--d-w) / 2);
  --d-top: calc(100cqh - var(--d-h));
}
.cr-person {
  position: absolute;
  margin: 0;
}
.cr-person img {
  display: block;
  width: 100%;
  height: 100%;
}
.cr-person-a {
  z-index: 1;
  left: var(--a-left);
  top: var(--a-top);
  width: var(--a-w);
  height: var(--a-h);
  transform-origin: 52.88% 15.89%;
}
.cr-person-d,
.cr-hands {
  left: var(--d-left);
  top: var(--d-top);
  width: var(--d-w);
  height: var(--d-h);
}
.cr-person-d {
  z-index: 1;
}
.cr-hands {
  z-index: 6;
}
.cr-cert {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 3px;
  box-shadow:
    0 2px 4px rgba(16, 32, 80, 0.08),
    0 16px 34px rgba(16, 32, 80, 0.2);
}
/* landing spots in the student's hands (measured on the pose image) */
.cr-mark-land {
  position: absolute;
  visibility: hidden;
  width: calc(var(--d-w) * 0.5632);
  height: calc(var(--d-w) * 0.5632 / var(--cr-ar));
  left: calc(var(--d-left) + var(--d-w) * 0.1106);
  top: calc(var(--d-top) + var(--d-h) * 0.3988);
}
.cr-course {
  z-index: 5;
  width: calc(var(--d-w) * 0.5632);
  left: calc(var(--d-left) + var(--d-w) * 0.1106);
  top: calc(var(--d-top) + var(--d-h) * 0.3988);
  transform: rotate(-7.2deg);
}
.cr-intern {
  z-index: 4;
  width: calc(var(--d-w) * 0.4516);
  left: calc(var(--d-left) + var(--d-w) * 0.5134);
  top: calc(var(--d-top) + var(--d-h) * 0.3230);
  transform: rotate(11.3deg);
}
.cr-check {
  position: absolute;
  z-index: 7;
  width: 54px;
  height: 54px;
  left: calc(var(--d-left) + var(--d-w) * 0.82 - 27px);
  top: calc(var(--d-top) + var(--d-h) * 0.15 - 27px);
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.35);
}
.cr-check .bi {
  -webkit-text-stroke: 1px;
}
/* ---------- static layout (no JS / reduced motion) ---------- */
.cert-reveal:not(.is-animated) .cr-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 3vw, 56px);
}
.cert-reveal:not(.is-animated) :is(.cr-rail, .cr-meter, .cr-skip, .cr-glow, .cr-mark-start, .cr-mark-land, .cr-shine, .cr-cue, .cr-person-a, .cr-phone, .cr-chips, .cr-unlock, .cr-confetti) {
  display: none;
}
.cert-reveal:not(.is-animated) .cr-copy {
  display: grid;
  gap: 14px;
}
.cert-reveal:not(.is-animated) .cr-step {
  padding: 18px 20px;
  border: 1px solid var(--cn-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(22, 52, 110, 0.06);
}
.cert-reveal:not(.is-animated) .cr-step h3 {
  font-size: clamp(20px, 1.6vw, 26px);
}
.cert-reveal:not(.is-animated) .cr-scene {
  height: clamp(420px, 40vw, 600px);
}
/* ---------- animated layout ---------- */
.cert-reveal.is-animated {
  --cr-stage-h: calc(100vh - var(--header-h, 86px));
  --cr-distance: 400vh;
  padding: 0;
  background: #fff;
}
@supports (height: 100svh) {
  .cert-reveal.is-animated {
    --cr-stage-h: calc(100svh - var(--header-h, 86px));
  }
}
.cert-reveal.is-animated .cr-track {
  position: relative;
  height: calc(var(--cr-stage-h) + var(--cr-distance));
}
.cert-reveal.is-animated .cr-sticky {
  position: sticky;
  top: var(--header-h, 86px);
  height: var(--cr-stage-h);
  overflow: hidden;
  background: #fff;
}
.cert-reveal.is-animated .cr-wrap {
  position: relative;
  height: 100%;
}
.cert-reveal.is-animated .cr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cert-reveal.is-animated .cr-copy {
  display: grid;
}
.cert-reveal.is-animated .cr-step {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition:
    opacity 0.35s ease,
    translate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.35s;
}
.cert-reveal.is-animated .cr-step.is-current {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
.cert-reveal.is-animated :is(.cr-actions, .cr-features) {
  opacity: 0;
}
/* progress rail (desktop) */
.cr-rail {
  --fill: 0;
  position: relative;
  display: grid;
  gap: clamp(22px, 5.5vh, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cr-rail::before,
.cr-rail::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
}
.cr-rail::before {
  bottom: 17px;
  background: #d7e1f1;
}
.cr-rail::after {
  height: calc((100% - 34px) * var(--fill));
  background: linear-gradient(180deg, #1769ff, #6c47ff);
}
.cr-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.25;
  color: #7a86a3;
}
.cr-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #cfd9eb;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.cr-dot b {
  font-weight: 700;
}
.cr-dot .bi {
  display: none;
  color: var(--cn-blue);
  -webkit-text-stroke: 0.8px;
}
.cr-rail-item.is-done .cr-dot {
  border-color: #9cb8f5;
}
.cr-rail-item.is-done .cr-dot b {
  display: none;
}
.cr-rail-item.is-done .cr-dot .bi {
  display: block;
}
.cr-rail-item.is-current {
  color: var(--cn-ink);
  font-weight: 700;
}
.cr-rail-item.is-current .cr-dot {
  border-color: var(--cn-blue);
  background: var(--cn-blue);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(23, 105, 255, 0.14);
}
.cr-rail-item.is-current .cr-rail-label {
  color: var(--cn-blue);
}
/* compact meter (tablet and phone) */
.cr-meter {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #8a96b2;
}
.cr-meter span {
  transition: color 0.3s;
}
.cr-meter span.is-done,
.cr-meter span.is-current {
  color: var(--cn-blue);
}
.cr-meter span.is-current {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  border-radius: 999px;
  background: var(--cn-blue);
  color: #fff;
}
.cr-meter i {
  flex: 1;
  max-width: 54px;
  height: 3px;
  border-radius: 3px;
  background: #d7e1f1;
  transition: background-color 0.3s;
}
.cr-meter i.is-done {
  background: linear-gradient(90deg, #1769ff, #6c47ff);
}
.cr-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--cn-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cr-skip:hover {
  color: var(--cn-blue);
}
/* glow, start mark and cue */
.cr-glow {
  position: absolute;
  z-index: 0;
  width: calc(var(--start-w) * 1.5);
  height: calc(var(--start-w) * 1.06);
  left: calc(var(--start-x) - var(--start-w) * 0.75);
  top: calc(var(--start-y) - var(--start-w) * 0.53);
  background: radial-gradient(closest-side, rgba(23, 105, 255, 0.26), rgba(108, 71, 255, 0.14) 55%, rgba(108, 71, 255, 0) 100%);
  opacity: 0;
}
.cr-mark-start {
  position: absolute;
  visibility: hidden;
  width: var(--start-w);
  height: calc(var(--start-w) / var(--cr-ar));
  left: calc(var(--start-x) - var(--start-w) / 2);
  top: calc(var(--start-y) - var(--start-w) / var(--cr-ar) / 2);
}
.cr-cue {
  position: absolute;
  z-index: 3;
  left: var(--start-x);
  top: calc(var(--start-y) + var(--start-w) / var(--cr-ar) / 2 + 16px);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  translate: -50% 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cn-text);
  white-space: nowrap;
  opacity: 0;
}
.cr-cue .bi-mouse {
  font-size: 18px;
  color: var(--cn-blue);
}
.cr-cue .bi-chevron-down {
  color: #6c47ff;
}
/* phone, built in HTML so the certificate can be seen moving into it */
.cr-phone {
  position: absolute;
  z-index: 2;
  width: var(--phone-w);
  height: var(--phone-h);
  left: calc(var(--phone-x) - var(--phone-w) / 2);
  top: calc(var(--phone-y) - var(--phone-h) / 2);
  border-radius: calc(var(--phone-w) * 0.16);
  background: linear-gradient(160deg, #2a3150, #0c1124 60%);
  box-shadow:
    inset 0 0 0 2px #39415f,
    0 28px 60px rgba(16, 32, 80, 0.22);
  container-type: inline-size;
  opacity: 0;
}
.cr-island {
  position: absolute;
  z-index: 2;
  left: 35%;
  top: 4.6cqw;
  width: 30%;
  height: 8.5cqw;
  border-radius: 99px;
  background: #05070f;
}
.cr-screen {
  position: absolute;
  inset: 3.6cqw;
  overflow: hidden;
  border-radius: 12.5cqw;
  background: linear-gradient(180deg, #f8fbff, #edf2fd);
}
.cr-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5cqw;
  text-align: center;
}
.cr-slot-preview {
  width: 100%;
  aspect-ratio: 1600 / 1131;
}
.cr-preview-label {
  margin: 6cqw 0 0;
  font-size: 5.6cqw;
  font-weight: 800;
}
.cr-preview-meta {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  margin: 2cqw 0 0;
  font-size: 4.6cqw;
  font-weight: 600;
  color: #059669;
}
.cr-wallet {
  position: absolute;
  inset: 0;
  padding: 22cqw 5cqw 0;
  opacity: 0;
}
.cr-wallet-head {
  margin: 0 0 4cqw;
  font-size: 6.6cqw;
  font-weight: 800;
  text-align: center;
}
.cr-wallet-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3.4cqw;
  border: 1px solid #e3e9f5;
  border-radius: 5cqw;
  background: #fff;
  box-shadow: 0 2cqw 6cqw rgba(22, 52, 110, 0.08);
}
.cr-slot-thumb {
  flex: none;
  width: 38%;
  aspect-ratio: 1600 / 1131;
  overflow: hidden;
  border-radius: 1.4cqw;
}
.cr-slot-thumb img,
.cr-unlock-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.cr-slot-thumb img {
  opacity: 0;
}
.cr-wallet-text {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  min-width: 0;
}
.cr-wallet-text b {
  font-size: 4.8cqw;
  line-height: 1.2;
}
.cr-wallet-text em {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 1.2cqw;
  padding: 0.8cqw 2.4cqw;
  border-radius: 99px;
  background: #e7f8ef;
  color: #059669;
  font-size: 4cqw;
  font-style: normal;
  font-weight: 700;
}
/* proof chips beside the phone */
.cr-chips {
  position: absolute;
  z-index: 3;
  left: calc(var(--phone-x) + var(--phone-w) / 2 + 2.2cqw);
  top: calc(var(--phone-y) - var(--phone-h) * 0.32);
  display: grid;
  gap: 12px;
  width: clamp(190px, 15.5cqw, 236px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cr-chips li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid #e3e9f5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 52, 110, 0.1);
  opacity: 0;
}
.cr-chips li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cr-chips b {
  font-size: 14px;
}
.cr-chips small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--cn-text);
}
.cr-chip-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
}
.cr-chip-ico.green {
  background: linear-gradient(135deg, #34d399, #10b981);
}
.cr-chip-ico.blue {
  background: linear-gradient(135deg, #3d8bff, #1257e6);
}
/* internship credential, rising out of the phone */
.cr-unlock {
  --uw: calc(var(--phone-w) * 1.22);
  position: absolute;
  z-index: 3;
  width: var(--uw);
  left: calc(var(--phone-x) - var(--uw) / 2);
  top: calc(var(--phone-y) - var(--phone-h) / 2 + var(--phone-h) * 0.43);
  display: flex;
  align-items: center;
  gap: calc(var(--uw) * 0.045);
  padding: calc(var(--uw) * 0.04);
  border: 2px solid #f4b942;
  border-radius: calc(var(--uw) * 0.06);
  background: linear-gradient(180deg, #fffdf6, #fff8e6);
  box-shadow:
    0 0 0 4px rgba(244, 185, 66, 0.16),
    0 18px 36px rgba(160, 110, 10, 0.16);
  font-size: calc(var(--uw) * 0.05);
  opacity: 0;
}
.cr-unlock.is-open {
  animation: crGold 1.1s ease-out 1;
}
.cr-unlock-thumb {
  flex: none;
  width: 36%;
  aspect-ratio: 1600 / 1131;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(120, 80, 0, 0.18);
}
.cr-unlock-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45em;
  min-width: 0;
}
.cr-unlock-text b {
  font-size: 1.05em;
  line-height: 1.2;
}
.cr-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.8em;
  border-radius: 99px;
  background: #fde9b8;
  color: #8a5a00;
  font-size: 0.88em;
  font-style: normal;
  font-weight: 700;
}
.cr-lock .bi-unlock-fill,
.cr-lock-on {
  display: none;
}
.cr-unlock.is-open .cr-lock {
  background: #f4b942;
  color: #3d2800;
}
.cr-unlock.is-open .cr-lock .bi-lock-fill,
.cr-unlock.is-open .cr-lock-off {
  display: none;
}
.cr-unlock.is-open .cr-lock .bi-unlock-fill,
.cr-unlock.is-open .cr-lock-on {
  display: inline;
}
.cr-unlock.is-open .cr-lock .bi-unlock-fill {
  animation: crPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes crGold {
  40% {
    box-shadow:
      0 0 0 10px rgba(244, 185, 66, 0.28),
      0 18px 40px rgba(200, 140, 10, 0.3);
  }
}
@keyframes crPopIn {
  from {
    transform: scale(0.4);
  }
}
/* a little confetti around the success check (plays once) */
.cr-confetti {
  position: absolute;
  z-index: 7;
  left: calc(var(--d-left) + var(--d-w) * 0.82);
  top: calc(var(--d-top) + var(--d-h) * 0.15);
}
.cr-confetti i {
  position: absolute;
  width: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
}
.cert-reveal.is-celebrating .cr-confetti i {
  animation: crConfetti 1.2s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.cr-confetti i:nth-child(1) { --c: #1769ff; --x: -150px; --y: -60px; --r: 200deg; }
.cr-confetti i:nth-child(2) { --c: #f4b942; --x: -96px; --y: 40px; --r: -160deg; }
.cr-confetti i:nth-child(3) { --c: #16b8b8; --x: -60px; --y: -96px; --r: 120deg; }
.cr-confetti i:nth-child(4) { --c: #6c47ff; --x: 70px; --y: -84px; --r: -220deg; }
.cr-confetti i:nth-child(5) { --c: #1769ff; --x: 110px; --y: 30px; --r: 180deg; }
.cr-confetti i:nth-child(6) { --c: #f4b942; --x: 30px; --y: -120px; --r: 90deg; }
.cr-confetti i:nth-child(7) { --c: #16b8b8; --x: -170px; --y: -10px; --r: -90deg; }
.cr-confetti i:nth-child(8) { --c: #6c47ff; --x: 140px; --y: -40px; --r: 260deg; }
.cr-confetti i:nth-child(9) { --c: #f4b942; --x: -120px; --y: -110px; --r: 140deg; }
.cr-confetti i:nth-child(10) { --c: #1769ff; --x: 60px; --y: 70px; --r: -140deg; }
.cr-confetti i:nth-child(11) { --c: #16b8b8; --x: 168px; --y: -100px; --r: 60deg; }
.cr-confetti i:nth-child(12) { --c: #6c47ff; --x: -30px; --y: 90px; --r: 300deg; }
@keyframes crConfetti {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0.85;
    transform: translate(var(--x), var(--y)) rotate(var(--r));
  }
}
.cert-reveal.is-animated :is(.cr-person, .cr-check) {
  opacity: 0;
}
.cert-reveal.is-moving :is(.cr-cert, .cr-person, .cr-phone, .cr-unlock) {
  will-change: transform, opacity;
}
.cert-reveal.is-animated .cr-cert {
  opacity: 0;
}
.cert-reveal.is-animated .cr-course {
  width: var(--start-w);
  left: calc(var(--start-x) - var(--start-w) / 2);
  top: calc(var(--start-y) - var(--start-w) / var(--cr-ar) / 2);
  transform: none;
}
/* one light sweep across the certificate when it settles in stage 1 */
.cr-shine {
  position: absolute;
  z-index: 6;
  width: var(--start-w);
  height: calc(var(--start-w) / var(--cr-ar));
  left: calc(var(--start-x) - var(--start-w) / 2);
  top: calc(var(--start-y) - var(--start-w) / var(--cr-ar) / 2);
  overflow: hidden;
  border-radius: 3px;
  pointer-events: none;
}
.cr-shine::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-12deg);
  opacity: 0;
}
.cert-reveal.is-shining .cr-shine::after {
  animation: crShine 1.1s cubic-bezier(0.45, 0, 0.25, 1) 1;
}
@keyframes crShine {
  0% {
    opacity: 1;
    transform: translateX(-120%) skewX(-12deg);
  }
  100% {
    opacity: 1;
    transform: translateX(330%) skewX(-12deg);
  }
}

/* Desktop (1200px+): progress and copy on the left, stage in the middle, student on the right */
@media (min-width: 1200px) {
  .cert-reveal.is-animated .cr-side {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36%;
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 26px;
    padding: clamp(20px, 4.5vh, 44px) 0 clamp(12px, 2.6vh, 26px);
  }
  .cert-reveal.is-animated .cr-rail {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: clamp(66px, 13vh, 104px);
  }
  .cert-reveal.is-animated .cr-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .cert-reveal.is-animated .cr-tag {
    margin-left: -150px;
  }
  .cert-reveal.is-animated .cr-step h3 {
    margin-top: clamp(16px, 3.6vh, 32px);
    font-size: clamp(26px, min(2.45vw, 5.6vh), 44px);
  }
  .cert-reveal.is-animated .cr-text {
    font-size: clamp(14px, min(1.05vw, 2.4vh), 17px);
  }
  .cert-reveal.is-animated .cr-skip {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }
  .cert-reveal.is-animated .cr-actions {
    flex-direction: column;
    align-items: flex-start;
    margin-top: clamp(14px, 3vh, 24px);
  }
  .cert-reveal.is-animated .cr-btn {
    min-width: 250px;
    height: clamp(42px, 6.6vh, 50px);
  }
  .cert-reveal.is-animated .cr-features {
    margin-top: clamp(14px, 3vh, 24px);
  }
  .cert-reveal.is-animated .cr-scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    --start-w: min(33cqw, 56cqh * 1.4147);
    --start-x: 54cqw;
    --start-y: 55cqh;
    --phone-h: min(84cqh, 46cqw);
    --phone-w: calc(var(--phone-h) * 0.49);
    --phone-x: 53cqw;
    --phone-y: 52cqh;
    --a-h: 96cqh;
    --a-w: calc(var(--a-h) * 954 / 1649);
    --a-left: calc(100cqw - var(--a-w));
    --a-top: calc(100cqh - var(--a-h));
    --d-h: 98cqh;
    --d-left: calc(100cqw - var(--d-w) + 1cqw);
  }
}
/* Landscape tablet (900-1199px): copy on the left, stage on the right */
@media (min-width: 900px) and (max-width: 1199px) {
  .cert-reveal.is-animated {
    --cr-distance: 350vh;
  }
  .cr-wrap.container {
    width: calc(100% - 64px);
  }
  .cert-reveal.is-animated .cr-side {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 0 16px;
  }
  .cert-reveal.is-animated .cr-rail {
    display: none;
  }
  .cert-reveal.is-animated .cr-meter {
    display: flex;
  }
  .cert-reveal.is-animated .cr-skip {
    margin-top: auto;
    align-self: flex-start;
  }
  .cert-reveal.is-animated .cr-step h3 {
    font-size: clamp(24px, min(3vw, 4.8vh), 34px);
  }
  .cert-reveal.is-animated .cr-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .cert-reveal.is-animated .cr-scene {
    position: absolute;
    inset: 0 0 0 40%;
    z-index: 1;
    --start-w: min(86cqw, 54cqh * 1.4147);
    --start-x: 50cqw;
    --start-y: 48cqh;
    --phone-h: min(78cqh, 72cqw);
    --phone-w: calc(var(--phone-h) * 0.49);
    --phone-x: 38cqw;
    --phone-y: 52cqh;
    --a-h: 74cqh;
    --a-w: calc(var(--a-h) * 954 / 1649);
    --a-left: calc(100cqw - var(--a-w));
    --a-top: calc(100cqh - var(--a-h));
    --d-h: 92cqh;
    --d-left: calc(100cqw - var(--d-w));
  }
  .cert-reveal.is-animated .cr-chips {
    width: clamp(170px, 34cqw, 220px);
  }
}
/* Phones and portrait tablets: progress, copy, then the stage */
@media (max-width: 899px) {
  .cert-reveal.is-animated {
    --cr-distance: 300vh;
  }
  .cr-wrap.container {
    width: calc(100% - 40px);
  }
  .cert-reveal:not(.is-animated) .cr-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .cert-reveal.is-animated .cr-wrap {
    display: flex;
    flex-direction: column;
  }
  .cert-reveal.is-animated .cr-side {
    position: relative;
    z-index: 4;
    flex: none;
    padding-top: 14px;
  }
  .cert-reveal.is-animated .cr-rail {
    display: none;
  }
  .cert-reveal.is-animated .cr-meter {
    display: flex;
    padding-right: 110px;
  }
  .cert-reveal.is-animated .cr-skip {
    position: absolute;
    right: 0;
    top: 10px;
    padding: 6px 0;
    font-size: 12.5px;
  }
  .cert-reveal.is-animated .cr-copy {
    margin-top: 12px;
  }
  .cert-reveal.is-animated .cr-tag {
    display: none;
  }
  .cert-reveal.is-animated .cr-step h3 {
    margin-top: 0;
    font-size: clamp(21px, 6.2vw, 30px);
  }
  .cert-reveal.is-animated .cr-text {
    margin-top: 8px;
    font-size: 14px;
  }
  .cert-reveal.is-animated .cr-actions {
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 12px;
  }
  .cert-reveal.is-animated .cr-btn {
    flex: 1;
    height: 42px;
    padding: 0 12px;
    font-size: 13.5px;
  }
  .cert-reveal.is-animated .cr-features {
    display: none;
  }
  .cert-reveal.is-animated .cr-scene {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    --start-w: min(92cqw, 78cqh * 1.4147);
    --start-x: 50cqw;
    --start-y: 48cqh;
    --phone-h: min(94cqh, 108cqw);
    --phone-w: calc(var(--phone-h) * 0.49);
    --phone-x: 50cqw;
    --phone-y: 50cqh;
    --a-h: 64cqh;
    --a-w: calc(var(--a-h) * 954 / 1649);
    --a-left: calc(100cqw - var(--a-w) + 4cqw);
    --a-top: calc(100cqh - var(--a-h));
    --d-h: 98cqh;
  }
  .cert-reveal.is-animated .cr-chips {
    left: 50cqw;
    top: auto;
    bottom: 2cqh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 96cqw;
    translate: -50% 0;
  }
  .cert-reveal.is-animated .cr-chips li {
    gap: 6px;
    padding: 6px 9px 6px 6px;
    border-radius: 99px;
  }
  .cert-reveal.is-animated .cr-chips small {
    display: none;
  }
  .cert-reveal.is-animated .cr-chips b {
    font-size: 11.5px;
    white-space: nowrap;
  }
  .cert-reveal.is-animated .cr-chip-ico {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .cert-reveal.is-animated .cr-cue {
    font-size: 12px;
  }
  .cr-check {
    width: 42px;
    height: 42px;
    left: calc(var(--d-left) + var(--d-w) * 0.82 - 21px);
    top: calc(var(--d-top) + var(--d-h) * 0.15 - 21px);
    font-size: 20px;
  }
}

/* ---------- Category sections: each category has its own layout ---------- */
.sec-body {
  display: grid;
  gap: 18px;
}
.sec-body.has-aside {
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
}
.items {
  min-width: 0;
}
.items h3,
.items p,
.sec-body aside h3,
.sec-body aside p {
  margin: 0;
}
.heart {
  z-index: 2;
}
.placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 40px;
  color: #8fc4ab;
  background: var(--green-soft);
}
.pill {
  display: inline-block;
  align-self: flex-start;
  justify-self: start;
  background: var(--green-soft);
  color: var(--darkgreen);
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.round-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  font-size: 19px;
  border: 1px solid var(--green-line);
  transition: 0.2s;
}
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--green);
  font-weight: 800;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: 0.2s;
}
.link-btn:hover {
  color: var(--gold-dark);
}
.btn.gold {
  position: relative;
  background: linear-gradient(180deg, #fcd94f, #f2b81e);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(232, 177, 24, 0.3);
}
/* Gold highlight buttons get three spark lines at the top-right corner */
.btn.gold:after,
.fin-cta:after,
.spark-wrap:after {
  content: "";
  position: absolute;
  top: var(--spark-y, -22px);
  right: var(--spark-x, -30px);
  width: var(--spark-size, 34px);
  height: var(--spark-size, 34px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10 15 L6 4 M20 17 L30 6 M23 27 L36 25' fill='none' stroke='%23f2c230' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  pointer-events: none;
}
.spark-wrap {
  position: relative;
  display: inline-flex;
}

.btn.gold:hover {
  background: linear-gradient(180deg, #fde27a, #f5c42e);
}
.add-btn {
  border: 0;
  background: var(--gold);
  color: var(--ink);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: 0.2s;
}
.add-btn:hover {
  background: var(--ink);
  color: #fff;
}

/* Category sections with a header illustration beside the heading */
.sec-consultant .container,
.sec-security .container,
.sec-appliances .container,
.sec-materials .container,
.sec-equipment .container,
.sec-vendors .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  grid-template-areas: "head aside" "body body" "empty empty";
  column-gap: 32px;
}
.sec-consultant .section-heading,
.sec-security .section-heading,
.sec-appliances .section-heading,
.sec-materials .section-heading,
.sec-equipment .section-heading,
.sec-vendors .section-heading {
  display: contents;
}
.sec-consultant .heading-left,
.sec-security .heading-left,
.sec-appliances .heading-left,
.sec-materials .heading-left,
.sec-equipment .heading-left,
.sec-vendors .heading-left {
  grid-area: head;
  align-self: start;
}
.sec-finance .heading-icon,
.sec-consultant .heading-icon,
.sec-design .heading-icon,
.sec-materials .heading-icon,
.sec-interiors .heading-icon,
.sec-services .heading-icon,
.sec-security .heading-icon,
.sec-appliances .heading-icon,
.sec-smart-home .heading-icon,
.sec-equipment .heading-icon,
.sec-vendors .heading-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  font-size: 28px;
}
.sec-finance .eyebrow,
.sec-consultant .eyebrow,
.sec-design .eyebrow,
.sec-materials .eyebrow,
.sec-interiors .eyebrow,
.sec-services .eyebrow,
.sec-security .eyebrow,
.sec-appliances .eyebrow,
.sec-smart-home .eyebrow,
.sec-equipment .eyebrow,
.sec-vendors .eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
}
.sec-finance .heading-text h2,
.sec-consultant .heading-text h2,
.sec-design .heading-text h2,
.sec-materials .heading-text h2,
.sec-interiors .heading-text h2,
.sec-services .heading-text h2,
.sec-security .heading-text h2,
.sec-appliances .heading-text h2,
.sec-smart-home .heading-text h2,
.sec-equipment .heading-text h2,
.sec-vendors .heading-text h2 {
  font-size: clamp(30px, 3vw, 44px);
  letter-spacing: -1.4px;
}
.sec-finance .heading-text p,
.sec-consultant .heading-text p,
.sec-design .heading-text p,
.sec-materials .heading-text p,
.sec-interiors .heading-text p,
.sec-services .heading-text p,
.sec-security .heading-text p,
.sec-appliances .heading-text p,
.sec-smart-home .heading-text p,
.sec-equipment .heading-text p,
.sec-vendors .heading-text p {
  font-size: 14px;
}

.sec-finance .section-link,
.sec-consultant .section-link,
.sec-design .section-link,
.sec-materials .section-link,
.sec-interiors .section-link,
.sec-services .section-link,
.sec-security .section-link,
.sec-appliances .section-link,
.sec-smart-home .section-link,
.sec-equipment .section-link,
.sec-vendors .section-link {
  grid-area: aside;
  justify-self: end;
  align-self: start;
  position: relative;
  z-index: 2;
  padding: 12px 22px;
  border: 1.5px solid var(--green);
  border-radius: 50px;
  background: #fff;
  color: var(--green);
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(11, 47, 36, 0.08);
  transition: 0.2s;
}
.sec-finance .section-link:hover,
.sec-consultant .section-link:hover,
.sec-design .section-link:hover,
.sec-materials .section-link:hover,
.sec-interiors .section-link:hover,
.sec-services .section-link:hover,
.sec-security .section-link:hover,
.sec-appliances .section-link:hover,
.sec-smart-home .section-link:hover,
.sec-equipment .section-link:hover,
.sec-vendors .section-link:hover {
  background: var(--green);
  color: #fff;
}
.sec-consultant .sec-body,
.sec-security .sec-body,
.sec-appliances .sec-body,
.sec-materials .sec-body,
.sec-equipment .sec-body,
.sec-vendors .sec-body {
  grid-area: body;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
.sec-consultant .empty,
.sec-security .empty,
.sec-appliances .empty,
.sec-materials .empty,
.sec-equipment .empty,
.sec-vendors .empty {
  grid-area: empty;
}
.prop-head-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.head-art-wrap {
  position: relative;
  align-self: flex-end;
  max-width: 100%;
  margin: -12px 0 0;
  transform: translateY(20px);
}
.head-art-wrap .prop-head-art {
  margin: 0;
  transform: none;
}
.sec-vendors .head-art-wrap {
  transform: translate(-28px, 20px);
}
.head-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(11, 47, 36, 0.12);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.head-badge > i {
  font-size: 20px;
  color: var(--green);
}
.head-badge b {
  display: block;
  font-size: 13px;
}
.head-badge small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.head-badge .hb-gold {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fdf3d4;
  color: #d99b06;
  font-size: 17px;
}
.hb-right {
  right: 0;
  bottom: 12px;
}
.hb-list {
  bottom: 4px;
}
.hb-left {
  left: 6%;
  bottom: 22px;
}
.hb-pin {
  position: absolute;
  left: 14px;
  bottom: calc(100% + 2px);
  font-size: 30px;
  line-height: 1;
  color: var(--green) !important;
  filter: drop-shadow(0 4px 6px rgba(8, 156, 102, 0.3));
}
.hb-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 9px 14px;
}
.hb-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.hb-list i {
  color: #16a34a;
  font-size: 14px;
}
.sec-security .prop-head-art {
  mix-blend-mode: normal;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 24%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 26%, #000 86%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 24%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 26%, #000 86%, transparent);
}
.prop-head-art {
  display: block;
  align-self: flex-end;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(145px, 8.6vw);
  margin: -12px 0 0;
  transform: translateY(20px);
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 92%, transparent);
  mask-composite: intersect;
}
.consultant-head-aside {
  align-items: stretch;
  padding-top: 46px;
}
.consultant-head-aside .prop-head-art {
  width: 100%;
  height: min(145px, 8.6vw);
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: right center;
  transform: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, #000 0%, #000 84%, transparent 100%);
}

.prop-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 50px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.prop-tag.tag-buy {
  background: #dceafe;
  color: #1d4ed8;
}
.prop-featured {
  border-radius: 10px;
}
.prop-featured svg {
  width: 15px;
  height: 15px;
  fill: var(--gold);
}

@media (max-width: 1250px) {
  .sec-consultant .container,
  .sec-security .container,
  .sec-appliances .container,
  .sec-materials .container,
  .sec-equipment .container,
  .sec-vendors .container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "aside" "body" "empty";
  }
  .sec-finance .section-link,
  .sec-consultant .section-link,
  .sec-design .section-link,
  .sec-materials .section-link,
  .sec-interiors .section-link,
  .sec-services .section-link,
  .sec-security .section-link,
  .sec-appliances .section-link,
  .sec-smart-home .section-link,
  .sec-equipment .section-link,
  .sec-vendors .section-link {
    grid-area: head;
  }
  .prop-head-aside {
    margin-top: 14px;
  }
  .prop-head-art {
    align-self: flex-start;
    max-width: 100%;
    max-height: 112px;
    margin: 0 0 0 2%;
  }
  .head-art-wrap {
    align-self: flex-start;
    margin: 0 0 0 2%;
  }
  .head-art-wrap .prop-head-art {
    margin: 0;
  }

}
@media (max-width: 1250px) {
  .sec-vendors .head-art-wrap {
    transform: translate(-14px, 20px);
  }
}
@media (max-width: 620px) {
  .sec-finance .heading-icon,
  .sec-consultant .heading-icon,
  .sec-design .heading-icon,
  .sec-materials .heading-icon,
  .sec-interiors .heading-icon,
  .sec-services .heading-icon,
  .sec-security .heading-icon,
  .sec-appliances .heading-icon,
  .sec-smart-home .heading-icon,
  .sec-equipment .heading-icon,
  .sec-vendors .heading-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
  .prop-head-art {
    max-height: 96px;
    margin: 0;
  }
  .head-art-wrap {
    margin: 0;
  }
  .head-badge {
    transform: scale(0.82);
    transform-origin: bottom right;
  }
  .hb-left {
    transform-origin: bottom left;
  }

}

/* 02 Finance: calculator + loan list */
.market-section.sec-finance {
  background: #fff;
}
.sec-finance .sec-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.fin-banner {
  display: grid;
  grid-template-columns: minmax(0, 29fr) minmax(0, 42fr) minmax(0, 29fr);
  align-items: stretch;
  border: 1px solid #f0e2b0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(
    100deg,
    #eef6e4 0%,
    #fdf8e6 32%,
    #fdf6e1 68%,
    #f5f8ec 100%
  );
}
.fin-art {
  position: relative;
}
.fin-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
.fin-offer {
  align-self: center;
  padding: 24px 18px 22px 8px;
}
.fin-offer .eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  color: #46574f;
}
.sec-body .fin-offer h3 {
  margin: 10px 0 12px;
  font-size: clamp(22px, 2.1vw, 33px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--ink);
}
.fin-offer h3 span {
  color: #0e8a46;
}
.fin-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-size: 15px;
  color: #3d4f48;
}
.fin-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fin-checks i {
  font-size: 17px;
  color: #0e8a46;
}
.fin-checks b {
  color: #0e8a46;
}
.fin-checks .fin-red {
  color: #e11d2e;
}
.sec-body .fin-label {
  margin: 16px 0 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: #46574f;
}
.fin-partners {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.fin-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 2px 0 8px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.fin-track {
  display: flex;
  width: max-content;
  animation: finScroll 38s linear infinite;
}
.fin-marquee:hover .fin-track {
  animation-play-state: paused;
}
@keyframes finScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.fin-banks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.fin-banks .fin-bank {
  flex: none;
  width: 104px;
  margin-right: 8px;
}
.fin-bank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 60px;
  padding: 6px 4px;
  border: 1px solid #efe6c8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(11, 47, 36, 0.05);
}
.fin-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  max-width: 100%;
}
.fin-logo svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}
.fin-bank small {
  font-size: 10px;
  font-weight: 700;
  color: #0e8a46;
  white-space: nowrap;
}
.fin-more {
  flex: none;
  width: 84px;
  margin: 2px 0 8px;
}
.fin-more b {
  font-size: 16px;
  color: var(--ink);
}
.fin-more small {
  font-weight: 600;
  color: #5b6f68;
}
.fin-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 18px;
}
.fin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #0e8a46;
  font-size: 14px;
  font-weight: 800;
}
.fin-link i,
.fin-cta i {
  transition: transform 0.2s;
}
.fin-link:hover i,
.fin-cta:hover i {
  transform: translateX(3px);
}
.fin-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcd94f, #f2b81e);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(232, 177, 24, 0.35);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.fin-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(232, 177, 24, 0.45);
}
.fin-banner .emi-box {
  margin: 12px;
  padding: 16px 18px;
  border: 4px solid #fff;
  border-radius: 18px;
  background: linear-gradient(180deg, #eef7ef, #e7f3ea);
  box-shadow:
    0 0 0 1px #d6ebdc,
    0 10px 24px rgba(11, 47, 36, 0.08);
}
.emi-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.emi-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #d4eedd;
  color: #0e8a46;
  font-size: 19px;
}
.sec-body .emi-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}
.sec-body .emi-head p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #5b6f68;
}
.fin-banner .emi-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 14px 16px;
  align-items: start;
}
.fin-banner .emi-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}
.fin-banner .emi-field input[type="number"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d5e3da;
  border-radius: 7px;
  background: #fff;
  font-size: 12.5px;
}
.fin-banner .emi-field input[type="range"] {
  width: 100%;
  margin: 10px 0 0;
  accent-color: #0e8a46;
}
.emi-ticks {
  position: relative;
  height: 14px;
  margin-top: 2px;
  font-size: 9.5px;
  color: #6b7c76;
}
.emi-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.emi-ticks span:first-child {
  transform: none;
}
.emi-ticks span:last-child {
  transform: translateX(-100%);
}
.fin-banner .emi-result {
  align-self: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid #bfe3cb;
  border-radius: 12px;
  background: #f4fbf6;
  font-variant-numeric: tabular-nums;
}
.fin-banner .emi-result small {
  font-size: 11px;
  color: #3f8a5f;
}
.fin-banner .emi-result strong {
  display: block;
  margin: 2px 0 6px;
  font-size: 26px;
  line-height: 1.2;
  color: #0e8a46;
  white-space: nowrap;
}
.fin-banner .emi-result span {
  display: block;
  font-size: 10.5px;
  line-height: 17px;
  color: #3d4f48;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.items-finance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.items-finance .loan-row {
  gap: 10px;
  padding: 10px 12px;
}
.items-finance .round-icon {
  width: 38px;
  height: 38px;
  font-size: 16px;
}
.items-finance .row-text h3 {
  font-size: 12.5px;
}
.items-finance .row-text p {
  font-size: 10.5px;
}
.items-finance .card-action {
  padding: 7px 10px;
  font-size: 10px;
}
@media (max-width: 1450px) {
  .fin-banner {
    grid-template-columns: minmax(0, 26fr) minmax(0, 42fr) minmax(0, 32fr);
  }
}
@media (max-width: 1250px) {
  .fin-banner {
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  }
  .fin-banner .emi-box {
    grid-column: 1/-1;
  }
  .fin-banner .emi-layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .items-finance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 920px) {
  .fin-banner {
    grid-template-columns: minmax(0, 1fr);
  }
  .fin-art {
    height: 220px;
  }
  .fin-offer {
    padding: 18px 20px 6px;
  }
  .fin-banner .emi-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .fin-marquee {
    overflow-x: auto;
  }
}
@media (max-width: 620px) {
  .fin-banks .fin-bank {
    width: 96px;
  }
  .fin-more {
    width: 72px;
  }
  .fin-checks {
    font-size: 13.5px;
  }
  .fin-art {
    height: 190px;
  }
  .items-finance {
    grid-template-columns: minmax(0, 1fr);
  }
}

.loan-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: 0.2s;
}
.loan-row:hover {
  border-color: var(--green-line);
  box-shadow: var(--shadow);
}
.row-text {
  flex: 1;
  min-width: 0;
}
.row-text h3 {
  font-size: 13px;
}
.row-text p {
  font-size: 11px;
  color: var(--muted);
}
.loan-row .heart {
  position: static;
  background: var(--soft);
  flex: none;
}

/* 03 Consultant: header illustration with floating badges, scene cards with portraits */
.cons-head-aside {
  grid-area: aside;
  --art-h: 232px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.cons-head-art {
  flex: none;
  align-self: flex-end;
  display: block;
  height: var(--art-h);
  width: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 6%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 6%);
  mask-composite: intersect;
}
.cons-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-right: -44px;
}
.cons-badges .b2 {
  margin-left: 16px;
}
.cons-badge {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11, 47, 36, 0.1);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.cons-badge i {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 17px;
}
.cons-badge.b3 {
  margin-left: -14px;
}
.cons-badge.b3 i {
  background: #e3eefc;
  color: #2563eb;
}
.cons-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 14px 14px;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.06);
  overflow: hidden;
  transition: 0.2s;
}
.cons-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.cons-top {
  position: relative;
  width: calc(100% + 28px);
  margin: 0 -14px;
  aspect-ratio: 2.22;
  background: #f4f8f6;
}
.cons-top > img,
.cons-top > .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cons-status {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 4px 10px rgba(11, 47, 36, 0.12);
  white-space: nowrap;
}
.cons-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
}
.cons-status.busy i {
  background: #e11d2e;
}
.cons-card .heart {
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.cons-pill {
  margin: 16px 0 6px;
  padding: 3px 12px;
  border-radius: 50px;
  background: var(--c-soft);
  color: var(--c-text);
  font-size: 11.5px;
  font-weight: 700;
}
.items .cons-card h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}
.items .cons-role {
  margin: 2px 0 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.items .cons-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #4f625b;
}
.cons-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cons-meta span + span {
  padding-left: 10px;
  border-left: 1px solid #d9e2dd;
}
.cons-meta .bi-star-fill {
  color: #f2b81e;
}
.cons-btn {
  width: 100%;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
}
.cons-green {
  --c-soft: #e3f4ea;
  --c-text: #0e8a46;
}
.cons-blue {
  --c-soft: #e3eefc;
  --c-text: #1d6fd8;
}
.cons-orange {
  --c-soft: #fdeedd;
  --c-text: #e5780b;
}
.cons-purple {
  --c-soft: #ede7fb;
  --c-text: #7c4ddb;
}
.cons-red {
  --c-soft: #fde4e6;
  --c-text: #e0293a;
}
@media (max-width: 1450px) {
  .cons-head-aside {
    --art-h: 186px;
  }
  .cons-badge {
    gap: 8px;
    padding: 6px 11px 6px 6px;
    font-size: 11.5px;
  }
  .cons-badge i {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  .cons-badges {
    gap: 18px;
  }
}
@media (min-width: 621px) and (max-width: 1250px) {
  .cons-head-aside {
    --art-h: 220px;
    justify-content: center;
  }
}
@media (max-width: 620px) {
  .cons-head-aside {
    --art-h: 150px;
    justify-content: center;
  }
  .cons-badges {
    gap: 12px;
    margin-right: -92px;
  }
  .cons-badges .b2 {
    margin-left: 6px;
  }
  .cons-badge.b3 {
    margin-left: -84px;
    align-self: flex-start;
    margin-top: 14px;
  }
  .cons-badge {
    gap: 6px;
    padding: 5px 9px 5px 5px;
    font-size: 10px;
  }
  .cons-badge i {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .cons-card {
    padding: 0 10px 10px;
  }
  .cons-top {
    width: calc(100% + 20px);
    margin: 0 -10px;
  }
  .cons-status {
    font-size: 10px;
    padding: 3px 9px;
  }
  .items .cons-card h3 {
    font-size: 13.5px;
  }
  .items .cons-role,
  .items .cons-meta {
    font-size: 11px;
  }
  .items .cons-meta {
    gap: 6px;
  }
  .cons-meta span + span {
    padding-left: 6px;
  }
  .cons-btn {
    padding: 9px;
    font-size: 12px;
  }
}
.items-consultant,
.items-vendors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}

/* 04 Design: "How it works" card + dark (priced) and light (quote) tiles */
.sec-design .sec-body {
  grid-template-columns: minmax(230px, 18.5fr) minmax(0, 81.5fr);
  align-items: stretch;
  gap: 16px;
}
.design-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 0;
  border: 4px solid #fff;
  border-radius: 18px;
  background: linear-gradient(160deg, #e1f3e8 0%, #f3faf5 48%, #fbfaef 100%);
  box-shadow:
    0 0 0 1px #d6ebdc,
    0 10px 24px rgba(11, 47, 36, 0.06);
  overflow: hidden;
}
.sec-body .design-steps h3 {
  margin: 0 0 20px;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.design-steps ol {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 20px;
}
.design-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-num {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fcd94f, #f2b81e);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(232, 177, 24, 0.3);
}
.design-steps li > i {
  flex: none;
  font-size: 24px;
  color: #0e8a46;
}
.design-steps li b {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.design-steps li small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: #5b6f68;
}
.design-steps .btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 13.5px;
  --spark-x: -12px;
  --spark-y: -20px;
  --spark-size: 28px;
}
.ds-art {
  display: block;
  width: calc(100% + 44px);
  max-width: none;
  height: auto;
  margin: auto -22px 0;
  padding-top: 12px;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(90deg, #000, #000),
    linear-gradient(180deg, transparent, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, #000, #000),
    linear-gradient(180deg, transparent, #000 14%);
  mask-composite: intersect;
}
.items-design {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 226px;
  gap: 16px;
}
.dz-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--green-soft);
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.08);
}
.dz-big {
  grid-row: span 2;
}
.dz-tile > img,
.dz-tile > .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.dz-light > img {
  object-position: right center;
}
.dz-tile:hover > img {
  transform: scale(1.04);
}
.dz-tile .heart {
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.dz-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
}
.dz-dark .dz-info {
  color: #fff;
  background: linear-gradient(
    180deg,
    transparent 42%,
    rgba(6, 58, 41, 0.5) 66%,
    rgba(5, 47, 33, 0.82)
  );
}
.dz-light .dz-info {
  color: var(--ink);
  background: linear-gradient(
    90deg,
    rgba(248, 250, 251, 0.96) 0%,
    rgba(248, 250, 251, 0.9) 46%,
    rgba(248, 250, 251, 0) 76%
  );
}
.dz-pill {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 50px;
  background: #e3f4ea;
  color: #0b6b45;
  font-size: 11px;
  font-weight: 700;
}
.dz-dark .dz-pill {
  background: #fff;
  color: var(--ink);
}
.dz-big .dz-pill {
  background: #e3f4ea;
  color: #0b6b45;
}
.items .dz-info h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.3px;
}
.items .dz-big .dz-info h3 {
  font-size: 22px;
}
.items .dz-info p {
  margin: 3px 0 0;
  font-size: 12.5px;
  opacity: 0.92;
}
.items .dz-light .dz-info p {
  color: #4f625b;
}
.dz-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.dz-foot b {
  font-size: 18px;
  color: #ffd24a;
}
.dz-light .dz-foot b {
  color: #e2a812;
}
.dz-big .dz-foot b {
  font-size: 22px;
}
.card-action.dz-btn {
  flex: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 12.5px;
  background: #0e8a46;
}
.card-action.dz-btn:hover {
  background: var(--ink);
}
@media (min-width: 621px) and (max-width: 1250px) {
  .design-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    grid-template-areas: "title art" "steps art" "btn art";
    column-gap: 22px;
    padding: 18px 22px;
  }
  .sec-body .design-steps h3 {
    grid-area: title;
    margin-bottom: 14px;
  }
  .design-steps ol {
    grid-area: steps;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
  }
  .design-steps .btn {
    grid-area: btn;
    width: auto;
    justify-self: start;
    padding: 11px 22px;
  }
  .ds-art {
    grid-area: art;
    align-self: end;
    width: 100%;
    margin: 0 0 -18px;
    padding: 0;
  }
}
@media (max-width: 620px) {
  .ds-art {
    width: min(340px, 100%);
    margin: 6px auto 0;
  }
}
@media (max-width: 620px) {
  .dz-info {
    padding: 12px;
  }
  .items .dz-info h3 {
    font-size: 14px;
  }
  .items .dz-big .dz-info h3 {
    font-size: 17px;
  }
  .items .dz-info p {
    display: none;
  }
  .dz-foot {
    flex-wrap: wrap;
    gap: 6px;
  }
  .dz-foot b,
  .dz-big .dz-foot b {
    font-size: 14px;
  }
  .card-action.dz-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
  .dz-tile .heart {
    width: 30px;
    height: 30px;
  }
}

/* 05 Materials: faded site backdrop, green bulk-order card, product cards */
.market-section.sec-materials {
  background: linear-gradient(180deg, #fdf8ea 0%, #fefcf6 60%, #fff 100%);
}
.sec-materials .sec-body {
  grid-template-columns: minmax(230px, 19fr) minmax(0, 81fr);
  align-items: stretch;
  gap: 18px;
}
.bulk-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255, 255, 255, 0.1),
      transparent 45%
    ),
    linear-gradient(125deg, #04654a 0%, #029466 52%, #077f5a 100%);
  box-shadow: 0 14px 30px rgba(4, 101, 74, 0.25);
}
.bulk-banner > i {
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
}
.sec-body .bulk-banner h3 {
  margin: 14px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.bulk-banner h3 span {
  color: #ffd24a;
}
.sec-body .bulk-banner p {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #d6efe3;
}
.bulk-art {
  display: block;
  width: calc(100% + 16px);
  height: auto;
  margin: auto -8px 10px;
  padding-top: 6px;
}
.bulk-banner .btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  --spark-x: -12px;
  --spark-y: -20px;
  --spark-size: 28px;
}
.items-materials {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.mat-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #efe8d6;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.06);
  transition: 0.2s;
}
.mat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.mat-photo {
  position: relative;
  aspect-ratio: 1.18;
  background: #f1f3f1;
  overflow: hidden;
}
.mat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.mat-card:hover .mat-photo img {
  transform: scale(1.04);
}
.mat-photo .heart {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 14px 16px;
}
.mat-cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #d99b06;
}
.items .mat-body h3 {
  margin: 4px 0 2px;
  font-size: 15.5px;
  color: var(--ink);
}
.items .mat-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.mat-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 6px;
  margin-top: auto;
  padding-top: 16px;
}
.mat-foot b {
  font-size: 14.5px;
  color: #0e8a46;
  white-space: nowrap;
}
.mat-enq {
  flex: none;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #fcd94f, #f2b81e);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(232, 177, 24, 0.3);
  transition: 0.2s;
}
.mat-enq:hover {
  background: linear-gradient(180deg, #fde27a, #f5c42e);
  transform: translateY(-1px);
}
@media (max-width: 1250px) {
  .sec-materials .sec-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .bulk-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    grid-template-areas: "icon art" "title art" "text art" "btn art";
    column-gap: 24px;
  }
  .bulk-banner > i {
    grid-area: icon;
  }
  .sec-body .bulk-banner h3 {
    grid-area: title;
  }
  .sec-body .bulk-banner p {
    grid-area: text;
    margin-bottom: 14px;
  }
  .bulk-art {
    grid-area: art;
    align-self: center;
    width: 100%;
    margin: 0;
  }
  .bulk-banner .btn {
    grid-area: btn;
    width: auto;
    justify-self: start;
    align-self: end;
  }
  .items-materials {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
  }
  .mat-card {
    flex: 0 0 230px;
    scroll-snap-align: start;
  }
}
@media (max-width: 620px) {
  .bulk-banner {
    display: flex;
  }
  .sec-body .bulk-banner p {
    margin-bottom: 0;
  }
  .bulk-art {
    width: calc(100% + 16px);
    margin: 4px -8px 10px;
    padding-top: 0;
  }
  .bulk-banner .btn {
    width: 100%;
  }
  .mat-card {
    flex-basis: 190px;
  }
  .mat-body {
    padding: 12px;
  }
  .items .mat-body h3 {
    font-size: 14px;
  }
  .mat-foot {
    flex-wrap: wrap;
    gap: 8px;
  }
  .mat-foot b {
    font-size: 13.5px;
  }
  .mat-enq {
    padding: 8px 14px;
  }
}

/* 06 Interiors: wide room stage with frosted caption + selectable room list */
.market-section.sec-interiors {
  background:
    radial-gradient(
      circle at 67% 20%,
      rgba(203, 236, 216, 0.32) 0 120px,
      transparent 121px
    ),
    radial-gradient(
      circle at 2% 78%,
      rgba(203, 236, 216, 0.5) 0 110px,
      transparent 111px
    ),
    radial-gradient(
      circle at 93% 102%,
      rgba(203, 236, 216, 0.55) 0 90px,
      transparent 91px
    ),
    radial-gradient(
      circle at 99% 6%,
      rgba(253, 240, 200, 0.6) 0 80px,
      transparent 81px
    ),
    linear-gradient(180deg, #f1f9f4, #f6fbf8);
}
.items-interiors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 24.5%);
  gap: 16px;
}
.room-stage {
  position: relative;
  min-height: 352px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--green-soft);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.room-stage > img,
.room-stage > .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-stage .heart {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 17px;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.room-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: min(330px, calc(100% - 36px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(11, 47, 36, 0.14);
}
.room-caption:after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde27a, #f2c230);
  opacity: 0.85;
  pointer-events: none;
}
.room-pill {
  padding: 3px 11px;
  border-radius: 50px;
  background: #e3f4ea;
  color: #0b6b45;
  font-size: 11.5px;
  font-weight: 700;
}
.items .room-caption h3 {
  margin: 10px 0 2px;
  font-size: 21px;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.items .room-caption p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.room-caption .btn {
  position: relative;
  z-index: 1;
  padding: 11px 22px;
  font-size: 13.5px;
}
.room-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.room-thumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid #e6eee9;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: 0.2s;
}
.room-thumb img,
.room-thumb .placeholder {
  flex: none;
  width: 36%;
  max-width: 112px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  font-size: 20px;
}
.room-thumb span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.room-thumb b {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-thumb small {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
.room-thumb > i {
  flex: none;
  font-size: 13px;
  color: #5b6f68;
  transition: transform 0.2s;
}
.room-thumb:hover {
  border-color: var(--green-line);
}
.room-thumb:hover > i {
  transform: translateX(2px);
}
.room-thumb.active {
  border-color: #0e8a46;
  background: #eaf7f0;
  box-shadow: 0 6px 16px rgba(14, 138, 70, 0.12);
}
@media (max-width: 1250px) {
  .room-thumb img,
  .room-thumb .placeholder {
    width: 30%;
  }
  .room-thumb b {
    font-size: 12.5px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media (max-width: 920px) {
  .items-interiors {
    grid-template-columns: minmax(0, 1fr);
  }
  .room-stage {
    min-height: 340px;
  }
  .room-thumbs {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .room-thumb {
    flex: 0 0 250px;
  }
}
@media (max-width: 620px) {
  .room-stage {
    min-height: 380px;
  }
  .room-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 16px;
  }
  .items .room-caption h3 {
    font-size: 18px;
  }
  .room-thumb {
    flex-basis: 230px;
  }
  .room-thumb img,
  .room-thumb .placeholder {
    width: 76px;
    height: 46px;
  }
}

/* 07 Services: photo service cards + green help card */
.market-section.sec-services {
  background:
    radial-gradient(
      circle at 70% 0%,
      rgba(214, 240, 224, 0.6),
      transparent 40%
    ),
    linear-gradient(180deg, #f3faf6, #f8fcfa);
}
.items-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(172px, auto);
  gap: 16px;
}
.svc-tile {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 172px;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.06);
  transition: 0.2s;
}
.svc-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.svc-tile > img,
.svc-tile > .placeholder {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  transition: transform 0.5s;
}
.svc-tile:hover > img {
  transform: scale(1.04);
}
.svc-tile .heart {
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.svc-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 56%;
  padding: 18px 20px;
}
.svc-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--s-soft);
  color: var(--s-ink);
  font-size: 20px;
  margin-bottom: 12px;
}
.items .svc-body h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.items .svc-body p {
  margin: 3px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.svc-link {
  font-size: 13px;
}
.svc-green {
  --s-soft: #e3f4ea;
  --s-ink: #0e8a46;
}
.svc-yellow {
  --s-soft: #fdf3d4;
  --s-ink: #e2a812;
}
.svc-blue {
  --s-soft: #e3eefc;
  --s-ink: #2563eb;
}
.svc-pink {
  --s-soft: #fde4ea;
  --s-ink: #e0457a;
}
.service-cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 172px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(
      circle at 95% 8%,
      rgba(255, 255, 255, 0.1) 0 60px,
      transparent 61px
    ),
    radial-gradient(
      circle at 55% 110%,
      rgba(255, 255, 255, 0.08) 0 70px,
      transparent 71px
    ),
    linear-gradient(125deg, #04654a 0%, #029466 52%, #077f5a 100%);
  box-shadow: 0 14px 30px rgba(4, 101, 74, 0.22);
}
.svc-cta-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 68%;
  padding: 14px 22px;
}
.svc-cta-copy > i {
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
}
.items .service-cta h3 {
  margin: 6px 0 2px;
  font-size: 21px;
  letter-spacing: -0.3px;
}
.service-cta h3 span {
  color: #ffd24a;
}
.items .service-cta p {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #d6efe3;
}
.service-cta .btn {
  padding: 9px 18px;
  font-size: 13px;
}
.svc-worker {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 40%;
  object-fit: contain;
  object-position: right bottom;
}
@media (max-width: 1250px) {
  .items-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .items-services {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 12px;
  }
  .svc-tile,
  .service-cta {
    min-height: 150px;
  }
  .svc-body {
    max-width: 60%;
    padding: 14px 16px;
  }
  .svc-icon {
    width: 40px;
    height: 40px;
    font-size: 17px;
    margin-bottom: 8px;
  }
  .items .svc-body h3 {
    font-size: 15px;
  }
  .svc-cta-copy {
    max-width: 70%;
    padding: 16px;
  }
  .items .service-cta h3 {
    font-size: 18px;
  }
}

/* 08 Security: faded house/shield/camera backdrop, feature band, product cards */
.market-section.sec-security {
  background: linear-gradient(180deg, #edf8f2 0%, #f5fbf8 55%, #f8fcfa 100%);
}
.sec-security .sec-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.items-security {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.secure-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.06);
  transition: 0.2s;
}
.secure-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.secure-photo {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  background: #eef2f5;
}
.secure-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.secure-card:hover .secure-photo img {
  transform: scale(1.04);
}
.secure-photo .heart {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  color: #0e8a46;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.secure-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  margin-top: -12px;
  padding: 12px 18px 16px;
  border-radius: 16px 16px 0 0;
  background: #fff;
}
.secure-pill {
  padding: 3px 11px;
  border-radius: 50px;
  background: #e3f4ea;
  color: #0b6b45;
  font-size: 11px;
  font-weight: 700;
}
.items .secure-body h3 {
  margin: 10px 0 2px;
  font-size: 16px;
  color: var(--ink);
}
.items .secure-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.secure-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}
.secure-foot .link-btn {
  font-size: 13px;
}
.cart-add {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #fcd94f, #f2b81e);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(232, 177, 24, 0.3);
  transition: 0.2s;
}
.cart-add i {
  font-size: 15px;
}
.cart-add:hover {
  background: linear-gradient(180deg, #fde27a, #f5c42e);
  transform: translateY(-1px);
}
@media (max-width: 1250px) {
  .items-security {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
  }
  .secure-card {
    flex: 0 0 250px;
    scroll-snap-align: start;
  }
}
@media (max-width: 620px) {
  .secure-card {
    flex-basis: 220px;
  }
  .secure-body {
    padding: 12px 14px 14px;
  }
}

/* 09 Appliances: photo backdrop behind the header, product carousel with side arrows */
.market-section.sec-appliances {
  background: linear-gradient(180deg, #f2faf6 0%, #f7fcf9 60%, #f9fcfb 100%);
}
.items-appliances {
  position: relative;
}
.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px 12px;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}
.carousel-btn {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1.5px solid #0e8a46;
  border-radius: 50%;
  background: #fff;
  color: #0e8a46;
  font-size: 17px;
  box-shadow: 0 6px 16px rgba(11, 47, 36, 0.12);
  transform: translateY(-50%);
  transition: 0.2s;
}
.carousel-btn[data-scroll="-1"] {
  left: -22px;
}
.carousel-btn[data-scroll="1"] {
  right: -22px;
}
.carousel-btn:hover:not(:disabled) {
  background: #0e8a46;
  color: #fff;
}
.carousel-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (min-width: 1780px) {
  .carousel-btn[data-scroll="-1"] {
    left: -68px;
  }
  .carousel-btn[data-scroll="1"] {
    right: -68px;
  }
}
.appl-card {
  flex: 0 0 calc((100% - 64px) / 5);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.06);
  transition: 0.2s;
}
.appl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.appl-photo {
  position: relative;
  aspect-ratio: 1.41;
  overflow: hidden;
  background: #f3f6f5;
}
.appl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.appl-card:hover .appl-photo img {
  transform: scale(1.04);
}
.appl-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 50px;
  background: #fff;
  color: #0b6b45;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.appl-photo .heart {
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.appl-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}
.items .appl-body h3 {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
}
.items .appl-body p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.appl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}
.appl-foot .link-btn {
  font-size: 13.5px;
}
@media (max-width: 1250px) {
  .appl-card {
    flex-basis: calc((100% - 32px) / 3);
  }
}
@media (max-width: 920px) {
  .appl-card {
    flex-basis: calc((100% - 16px) / 2.25);
  }
}
@media (max-width: 620px) {
  .appl-card {
    flex-basis: 78%;
  }
  .carousel-btn {
    display: none;
  }
  .appl-body {
    padding: 14px;
  }
}

/* 10 Smart Home: banner with copy + control rows with photo strips */
.market-section.sec-smart-home {
  background: linear-gradient(180deg, #f2faf6, #fbfdfc);
}
.sec-smart-home .sec-body {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}
.smart-banner {
  position: relative;
  min-height: 380px;
  border-radius: 18px;
  overflow: hidden;
  background: #0b2f24;
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.14);
}
.smart-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.smart-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 38, 27, 0.88) 0%,
      rgba(4, 38, 27, 0.62) 30%,
      rgba(4, 38, 27, 0) 52%
    ),
    linear-gradient(0deg, rgba(4, 38, 27, 0.6), transparent 45%);
}
.sb-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: 48%;
  padding: 0 30px 30px;
  color: #fff;
}
.sb-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e7f3ec;
}
.sec-body .sb-copy h3 {
  margin: 10px 0 10px;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #fff;
}
.sec-body .sb-copy p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.45;
  color: #e2efe8;
}
.sb-copy .btn {
  padding: 13px 24px;
  font-size: 15px;
  border-radius: 12px;
}
.items-smart-home {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sh-row {
  display: grid;
  grid-template-columns: 30px 54px minmax(0, 1fr) 30% 56px auto;
  align-items: center;
  column-gap: 14px;
  flex: 1;
  min-height: 82px;
  padding: 0 18px 0 14px;
  border: 1px solid #e6eee9;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 16px rgba(11, 47, 36, 0.05);
  transition: 0.2s;
}
.sh-row:hover {
  border-color: var(--green-line);
  box-shadow: 0 10px 22px rgba(11, 47, 36, 0.09);
}
.sh-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--t-soft);
  color: var(--t-ink);
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.85;
}
.sh-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--t-soft);
  color: var(--ink);
  font-size: 23px;
}
.sh-green .sh-icon i {
  color: #0e8a46;
}
.sh-text {
  min-width: 0;
}
.items .sh-text h3 {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink);
}
.items .sh-text p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-strip {
  align-self: stretch;
  width: 100%;
  height: 0;
  min-height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.switch {
  flex: none;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #d5dcd9;
  transition: 0.2s;
}
.switch span {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0003;
  transition: 0.2s;
}
.sh-row .switch {
  width: 56px;
  height: 30px;
  justify-self: center;
}
.sh-row .switch span {
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
}
.sh-row .switch.on {
  background: #0e8a46;
}
.sh-row .switch.on span {
  left: 29px;
}
.sh-row .link-btn {
  font-size: 14px;
}
.sh-yellow {
  --t-soft: #fdf2cc;
  --t-ink: #c79a14;
}
.sh-green {
  --t-soft: #e3f4ea;
  --t-ink: #3f9a6a;
}

/* 11 Equipment: photo cards with icon badge, feature line and Add */
.market-section.sec-equipment {
  background: linear-gradient(180deg, #f2faf6, #fbfdfc);
}
.items-equipment {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.eq-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.06);
  transition: 0.2s;
}
.eq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.eq-photo {
  position: relative;
  aspect-ratio: 1.46;
  overflow: hidden;
  background: #f3f6f5;
}
.eq-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.eq-card:hover .eq-photo img {
  transform: scale(1.04);
}
.eq-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #0e8a46;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.eq-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 18px 16px;
}
.eq-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1ef;
}
.items .eq-title h3 {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
}
.items .eq-title p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.eq-arrow {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #e6eee9;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transition: 0.2s;
}
.eq-arrow:hover {
  background: #0e8a46;
  border-color: #0e8a46;
  color: #fff;
}
.eq-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.eq-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.eq-feat > i {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--green-soft);
  color: #0e8a46;
  font-size: 19px;
}
.eq-feat b {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.eq-feat small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* 12 Vendors: photo with coloured wave, icon tile, stats and View Vendor */
.market-section.sec-vendors {
  background: linear-gradient(180deg, #f2faf6, #fbfdfc);
}
.vd-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #edf2ef;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 47, 36, 0.06);
  transition: 0.2s;
}
.vd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(11, 47, 36, 0.1);
}
.vd-photo {
  position: relative;
  aspect-ratio: 1.556;
}
.vd-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vd-icon {
  position: absolute;
  left: 5.8%;
  top: 61%;
  width: 20%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--v-tone);
  color: #fff;
  font-size: clamp(20px, 1.7vw, 30px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  border: 3px solid rgba(255, 255, 255, 0.85);
}
.vd-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 4px 22px 18px;
}
.items .vd-body h3 {
  margin: 0;
  font-size: 17px;
  color: var(--ink);
}
.items .vd-body p {
  margin: 6px 0 0;
  min-height: 3em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.vd-stats {
  display: flex;
  gap: 26px;
  margin: auto 0 16px;
  padding-top: 14px;
}
.vd-stats > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.25;
  color: #5b6f68;
}
.vd-stats i {
  font-size: 24px;
  color: #0e8a46;
}
.vd-stats b {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.vd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vd-foot .link-btn {
  font-size: 15px;
}
.vd-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--green-soft);
  color: #0e8a46;
  font-size: 16px;
  transition: 0.2s;
}
.vd-arrow:hover {
  background: #0e8a46;
  color: #fff;
}
.vd-yellow {
  --v-tone: #f4bd27;
}
.vd-green {
  --v-tone: #13a160;
}
.vd-orange {
  --v-tone: #f6a14b;
}
.vd-blue {
  --v-tone: #3b82f6;
}
.vd-purple {
  --v-tone: #8b5cf6;
}

@media (max-width: 1450px) {
  .sh-row {
    grid-template-columns: 48px minmax(0, 1fr) 26% 52px auto;
    column-gap: 12px;
  }
  .sh-num {
    display: none;
  }
  .sh-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .items .sh-text p {
    white-space: normal;
  }
  .head-badge {
    transform: scale(0.82);
    transform-origin: bottom right;
  }
  .hb-left {
    transform-origin: bottom left;
  }
  .hb-right,
  .hb-list {
    bottom: 0;
  }
}
@media (max-width: 1250px) {
  .sec-smart-home .sec-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .sh-row {
    grid-template-columns: 30px 54px minmax(0, 1fr) 30% 56px auto;
    column-gap: 14px;
  }
  .sh-num {
    display: grid;
  }
  .sh-icon {
    width: 54px;
    height: 54px;
    font-size: 23px;
  }
  .smart-banner {
    min-height: 360px;
  }
  .items-equipment {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 920px) {
  .items-equipment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sh-row {
    grid-template-columns: 30px 48px minmax(0, 1fr) 30% 56px auto;
  }
}
@media (max-width: 620px) {
  .smart-banner {
    min-height: 330px;
  }
  .sb-copy {
    max-width: none;
    padding: 0 18px 18px;
  }
  .smart-banner:after {
    background: linear-gradient(
      0deg,
      rgba(4, 38, 27, 0.92) 0%,
      rgba(4, 38, 27, 0.55) 55%,
      rgba(4, 38, 27, 0.1) 100%
    );
  }
  .sh-row {
    grid-template-columns: 44px minmax(0, 1fr) 50px auto;
    column-gap: 10px;
    min-height: 70px;
    padding: 0 12px;
  }
  .sh-num,
  .sh-strip {
    display: none;
  }
  .sh-icon {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }
  .sh-row .switch {
    width: 48px;
    height: 26px;
  }
  .sh-row .switch span {
    width: 20px;
    height: 20px;
  }
  .sh-row .switch.on span {
    left: 25px;
  }
  .items-equipment {
    grid-template-columns: minmax(0, 1fr);
  }
  .sec-vendors .items-vendors {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .vd-body {
    padding: 4px 16px 16px;
  }
}

@media (max-width: 1250px) {
  .items-consultant,
  .items-vendors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sec-design .sec-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .sec-finance .sec-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 920px) {
  .sec-body.has-aside,
  .sec-design .sec-body,
  .sec-materials .sec-body,
  .sec-smart-home .sec-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-steps ol {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 620px) {
  .items-consultant,
  .items-vendors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .loan-row {
    padding: 12px;
    gap: 10px;
  }
  .loan-row .card-action {
    padding: 8px;
  }
  .design-steps ol {
    grid-template-columns: 1fr;
  }
  .items-design {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px;
    gap: 9px;
  }
}

/* Keep the matched footer treatment last so it wins over legacy rules. */
.end-banner {
  position: relative;
  min-height: 294px;
  margin-top: 44px;
  margin-bottom: 28px;
  padding: 44px 54px;
  border: 1px solid #e2eee7;
  border-radius: 20px;
  overflow: hidden;
  background-color: #e9f7f0;
  background-image:
    linear-gradient(
      90deg,
      rgba(237, 250, 243, 0.99) 0%,
      rgba(237, 250, 243, 0.93) 29%,
      rgba(237, 250, 243, 0.38) 47%,
      rgba(255, 247, 216, 0.05) 67%
    ),
    url("img/footer-project-banner.png");
  background-position:
    center,
    right center;
  background-size:
    100% 100%,
    auto 100%;
  background-repeat: no-repeat;
  box-shadow: 0 12px 34px rgba(11, 47, 36, 0.06);
}
.end-banner-copy {
  position: relative;
  z-index: 1;
  width: min(610px, 47%);
}
.end-banner h2 {
  font-size: clamp(32px, 3.2vw, 49px);
  line-height: 1.04;
  letter-spacing: -2px;
  margin: 13px 0 12px;
  color: #062e24;
}
.end-banner h2 span {
  color: #e4ae13;
}
.end-banner p {
  max-width: 560px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #58736b;
  margin: 0;
}
.end-banner-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
}
.end-banner .btn {
  flex: none;
  margin: 0;
  padding: 14px 22px;
  border-radius: 11px;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(8, 156, 102, 0.18);
}
.end-benefits {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.end-benefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.end-benefits > li > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(199, 239, 220, 0.82);
  color: #087d59;
  font-size: 18px;
}
.end-benefits span {
  display: flex;
  flex-direction: column;
}
.end-benefits b {
  font-size: 11px;
  color: #123c31;
}
.end-benefits small {
  font-size: 9px;
  color: #677d76;
}
.footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 35% 110%,
      rgba(0, 145, 104, 0.2),
      transparent 32%
    ),
    linear-gradient(120deg, #063e32, #003b31 58%, #03362e);
  padding: 29px 0 15px;
  border-top: 4px solid var(--gold);
}
.footer:after {
  content: "";
  position: absolute;
  right: -2%;
  bottom: -28%;
  width: 31%;
  aspect-ratio: 1.8;
  border: 1px solid rgba(159, 217, 195, 0.11);
  transform: skewY(-18deg);
  box-shadow:
    -40px -30px 0 -39px rgba(159, 217, 195, 0.13),
    -80px -60px 0 -79px rgba(159, 217, 195, 0.11);
  pointer-events: none;
}
.foot-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: 2.25fr repeat(3, 1fr);
  gap: 58px;
}
.foot-grid > div {
  gap: 9px;
  font-size: 12px;
}
.foot-grid > div > b {
  position: relative;
  margin-bottom: 8px;
  font-size: 13px;
}
.foot-grid > div > b:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.foot-logo {
  font-size: 29px;
}
.foot-grid p {
  margin: 0;
  line-height: 1.75;
}
.social-links {
  display: flex;
  flex-direction: row !important;
  gap: 11px !important;
  margin-top: 4px;
}
.social-links a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(45, 129, 105, 0.45);
  color: #d7e9e2;
  font-size: 14px;
  transition: 0.2s;
}
.social-links a:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-1px);
}
.footer-last {
  position: relative;
  z-index: 1;
  margin-top: 21px;
  padding-top: 13px;
  line-height: 1.6;
}
.back-to-top {
  width: 46px;
  height: 46px;
  right: max(22px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  background: #08aa77;
  box-shadow: 0 8px 22px rgba(0, 75, 56, 0.28);
}
@media (max-width: 1250px) {
  .end-banner-copy {
    width: 57%;
  }
  .end-benefits {
    gap: 12px;
  }
  .end-benefits > li > i {
    width: 34px;
    height: 34px;
  }
  .end-benefits small {
    display: none;
  }
}
@media (max-width: 920px) {
  .end-banner {
    min-height: 360px;
    padding: 35px;
    background-image:
      linear-gradient(
        90deg,
        rgba(237, 250, 243, 0.98),
        rgba(237, 250, 243, 0.76) 55%,
        rgba(237, 250, 243, 0.12)
      ),
      url("img/footer-project-banner.png");
    background-size: cover;
  }
  .end-banner-copy {
    width: 68%;
  }
  .end-banner-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .foot-grid {
    gap: 32px;
  }
}
@media (max-width: 620px) {
  .end-banner {
    min-height: 530px;
    margin-top: 28px;
    margin-bottom: 20px;
    padding: 28px 23px;
    background-image:
      linear-gradient(
        180deg,
        rgba(237, 250, 243, 0.99) 0%,
        rgba(237, 250, 243, 0.91) 46%,
        rgba(237, 250, 243, 0.06) 72%
      ),
      url("img/footer-project-banner.png");
    background-position:
      center,
      72% center;
  }
  .end-banner-copy {
    width: 100%;
  }
  .end-banner h2 {
    font-size: 32px;
    letter-spacing: -1.2px;
  }
  .end-banner p {
    font-size: 12px;
  }
  .end-benefits {
    width: 100%;
    justify-content: space-between;
    gap: 7px;
  }
  .end-benefits li {
    gap: 6px;
  }
  .end-benefits > li > i {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .end-benefits b {
    font-size: 9px;
  }
  .foot-grid {
    gap: 26px 18px;
  }
  .footer {
    padding-top: 26px;
  }
}
@media (max-width: 390px) {
  .end-benefits {
    align-items: flex-start;
  }
  .end-benefits li {
    flex-direction: column;
    align-items: flex-start;
  }
  .end-banner {
    min-height: 555px;
  }
}

/* Full-page loading skeleton */
/* Minimal, full-viewport loading overlay: just the centered "InfrasofTech"
   watermark, no structural skeleton shapes. */
.page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.sk-watermark {
  width: min(84vw, 980px);
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-cn);
  font-size: clamp(32px, 6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, rgba(23, 105, 255, 0.22), rgba(108, 71, 255, 0.22));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 620px) {
  .sk-watermark {
    width: min(90vw, 360px);
    white-space: normal;
  }
}
.page-skeleton.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.is-loading {
  overflow: hidden;
}
.is-loading > .topbar,
.is-loading > main,
.is-loading > .footer,
.is-loading > .back-to-top {
  visibility: hidden;
}
.sk-shell {
  width: calc(100% - 88px);
  max-width: var(--max);
  margin-inline: auto;
}
.sk-block {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #e7eeeb;
}
.sk-block:after,
.sk-section article:after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.72),
    transparent
  );
  animation: skeleton-wave 1.35s infinite;
}
.sk-topbar {
  height: 86px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.sk-logo {
  width: 180px;
  height: 42px;
}
.sk-nav {
  display: flex;
  gap: 34px;
  margin-inline: auto;
}
.sk-nav .sk-block {
  width: 76px;
  height: 14px;
}
.sk-action {
  width: 160px;
  height: 50px;
  border-radius: 12px;
}
.sk-hero {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 390px;
  margin-top: 26px;
  border-radius: 22px;
  overflow: hidden;
  background: #eef5fd;
}
.sk-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
}
.sk-kicker {
  width: 145px;
  height: 12px;
  margin-bottom: 18px;
}
.sk-title {
  width: 90%;
  height: 43px;
  margin-bottom: 10px;
}
.sk-title.short {
  width: 65%;
}
.sk-line {
  width: 88%;
  height: 12px;
  margin-top: 10px;
}
.sk-line.short {
  width: 58%;
}
.sk-button {
  width: 170px;
  height: 47px;
  margin-top: 28px;
}
.sk-hero-image {
  height: 100%;
  border-radius: 0;
  background: #dce9e3;
}
.sk-categories {
  display: grid;
  grid-template-columns: 2.7fr repeat(5, 1fr);
  gap: 13px;
  margin: 20px 0 38px;
}
.sk-categories .sk-block {
  height: 112px;
  border-radius: 15px;
}
.sk-section {
  padding: 34px 0 30px;
  border-top: 1px solid #edf1ef;
}
.sk-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.sk-section-head > div {
  width: 280px;
}
.sk-round {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}
.sk-heading {
  width: 190px;
  height: 22px;
  margin: 8px 0;
}
.sk-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.sk-section article {
  position: relative;
  overflow: hidden;
  padding: 0 14px 16px;
  border: 1px solid #e7ecea;
  border-radius: 15px;
  background: #fff;
}
.sk-card-image {
  width: calc(100% + 28px);
  height: 145px;
  margin: 0 -14px 15px;
  border-radius: 14px 14px 0 0;
}
.sk-section article .sk-heading {
  width: 72%;
  height: 16px;
}
.sk-section article .sk-line {
  width: 90%;
  height: 10px;
}
.sk-end {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 290px;
  margin: 38px 0 30px;
  padding-left: 48px;
  border-radius: 20px;
  overflow: hidden;
  background: #edf7f2;
}
.sk-end > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sk-end-image {
  height: 100%;
  border-radius: 0;
}
.sk-footer {
  padding: 38px 0 58px;
  background: #0a4034;
}
.sk-footer .sk-block {
  background: #24594e;
}
.sk-footer-grid {
  display: grid;
  grid-template-columns: 2.2fr repeat(3, 1fr);
  gap: 50px;
}
.sk-footer-grid > div {
  display: flex;
  flex-direction: column;
}
.sk-footer-grid .sk-logo {
  width: 165px;
}
.sk-footer-grid .sk-line {
  width: 80%;
}
@keyframes skeleton-wave {
  to {
    transform: translateX(100%);
  }
}
@media (max-width: 920px) {
  .sk-shell {
    width: calc(100% - 40px);
  }
  .sk-nav {
    display: none;
  }
  .sk-nav + .sk-action {
    margin-left: auto;
  }
  .sk-hero {
    grid-template-columns: 1fr;
    min-height: 510px;
  }
  .sk-hero-copy {
    padding: 35px;
  }
  .sk-hero-image {
    min-height: 230px;
  }
  .sk-categories {
    grid-template-columns: repeat(5, 1fr);
  }
  .sk-categories .sk-block:first-child {
    grid-column: 1 / -1;
  }
  .sk-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sk-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .sk-shell {
    width: calc(100% - 26px);
  }
  .sk-topbar {
    gap: 9px;
  }
  .sk-logo {
    width: 115px;
  }
  .sk-topbar {
    height: 66px;
  }
  .sk-action {
    width: 42px;
    height: 42px;
  }
  .sk-hero {
    min-height: 470px;
    margin-top: 14px;
  }
  .sk-hero-copy {
    padding: 25px 20px;
  }
  .sk-title {
    height: 32px;
  }
  .sk-categories {
    grid-template-columns: repeat(3, 1fr);
  }
  .sk-categories .sk-block {
    height: 96px;
  }
  .sk-categories .sk-block:nth-child(n + 5) {
    display: none;
  }
  .sk-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .sk-card-grid article:nth-child(5) {
    display: none;
  }
  .sk-card-image {
    height: 110px;
  }
  .sk-end {
    grid-template-columns: 1fr;
    min-height: 450px;
    padding: 25px;
  }
  .sk-end-image {
    min-height: 210px;
  }
  .sk-footer-grid {
    gap: 24px 15px;
  }
  .sk-footer-grid > div:first-child {
    grid-column: span 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk-block:after,
  .sk-section article:after {
    animation: none;
  }
  .page-skeleton {
    transition: none;
  }
}

/* Theme-matched animated icon system */
.bi {
  transform-origin: center;
  transition:
    transform 0.28s ease,
    color 0.28s ease,
    filter 0.28s ease;
}
.heading-icon {
  overflow: hidden;
  box-shadow: inset 0 0 0 0 rgba(8, 156, 102, 0.12);
  animation: icon-halo 3.6s ease-in-out infinite;
}
.heading-icon .bi {
  animation: icon-float 3.6s ease-in-out infinite;
}
.market-section:nth-child(3n + 2) .heading-icon,
.market-section:nth-child(3n + 2) .heading-icon .bi {
  animation-delay: 0.45s;
}
.market-section:nth-child(3n) .heading-icon,
.market-section:nth-child(3n) .heading-icon .bi {
  animation-delay: 0.9s;
}
.section-link:hover i,
.link-btn:hover i,
.eq-arrow:hover i,
.vd-arrow:hover i {
  animation: icon-nudge 0.65s ease both;
}
.heart:hover i,
.heart.saved i {
  animation: icon-heart 0.7s ease both;
}
.cart-add:hover i {
  animation: icon-cart 0.7s ease both;
}
.back-to-top.show i {
  animation: icon-up 1.6s ease-in-out infinite;
}
.btn:hover .bi-arrow-right,
.btn:hover .bi-arrow-up-right {
  animation: icon-arrow 0.7s ease-in-out infinite alternate;
}
.end-benefits > li > i {
  animation: icon-soft-pulse 3s ease-in-out infinite;
}
.end-benefits > li:nth-child(2) > i {
  animation-delay: 0.45s;
}
.end-benefits > li:nth-child(3) > i {
  animation-delay: 0.9s;
}
.svc-icon,
.eq-icon,
.vd-icon,
.sh-icon,
.round-icon {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.svc-tile:hover .svc-icon,
.eq-card:hover .eq-icon,
.vd-card:hover .vd-icon,
.sh-row:hover .sh-icon,
.loan-row:hover .round-icon {
  transform: translateY(-3px) rotate(-4deg);
  box-shadow: 0 8px 18px rgba(8, 156, 102, 0.17);
}
.svc-tile:hover .svc-icon i,
.eq-card:hover .eq-icon i,
.vd-card:hover .vd-icon i,
.sh-row:hover .sh-icon i,
.loan-row:hover .round-icon i {
  animation: icon-pop 0.65s ease both;
}
.social-links a:hover i {
  animation: icon-spin-pop 0.55s ease both;
}
.cons-status i {
  animation: status-ping 1.8s ease-in-out infinite;
}
.switch.on:after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(8, 156, 102, 0.32);
  border-radius: inherit;
  animation: icon-ring 1.6s ease-out infinite;
}
@keyframes icon-float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-3px) rotate(-3deg);
  }
}
@keyframes icon-halo {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(8, 156, 102, 0.12);
  }
  50% {
    box-shadow: inset 0 0 0 7px rgba(8, 156, 102, 0.05);
  }
}
@keyframes icon-ring {
  0% {
    transform: scale(0.82);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.16);
    opacity: 0;
  }
}
@keyframes icon-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.13) rotate(-5deg);
  }
  70% {
    transform: scale(0.96) rotate(3deg);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes icon-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-2px);
  }
}
@keyframes icon-search {
  0% {
    transform: scale(1) rotate(0);
  }
  45% {
    transform: scale(1.16) rotate(-12deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes icon-heart {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  45% {
    transform: scale(0.92);
  }
  70% {
    transform: scale(1.18);
  }
}
@keyframes icon-cart {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  35% {
    transform: translateX(4px) rotate(-5deg);
  }
  65% {
    transform: translateX(-2px) rotate(3deg);
  }
}
@keyframes icon-up {
  0%,
  100% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes icon-arrow {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(3px, -2px);
  }
}
@keyframes icon-soft-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(8, 156, 102, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(8, 156, 102, 0.07);
  }
}
@keyframes icon-spin-pop {
  0% {
    transform: scale(1) rotate(0);
  }
  55% {
    transform: scale(1.18) rotate(12deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes status-ping {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .heading-icon,
  .heading-icon .bi,
  .end-benefits > li > i,
  .back-to-top.show i,
  .cons-status i,
  .switch.on:after {
    animation: none !important;
  }
  .bi,
  .svc-icon,
  .eq-icon,
  .vd-icon,
  .sh-icon,
  .round-icon,
  .pt-icon {
    transition: none !important;
  }
}

/* One-time scroll reveals: a light fade and rise (opacity and translate stay on the GPU) */
.reveal-enabled .scroll-reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.reveal-enabled .scroll-reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
}
.reveal-enabled .section-heading.scroll-reveal,
.reveal-enabled .hero-text.scroll-reveal,
.reveal-enabled .path-card.biz.scroll-reveal {
  translate: -26px 18px;
}
.reveal-enabled .prop-head-aside.scroll-reveal,
.reveal-enabled .cons-head-aside.scroll-reveal,
.reveal-enabled .hero-scene.scroll-reveal,
.reveal-enabled .path-card.learn.scroll-reveal {
  translate: 28px 18px;
}
.reveal-enabled .section-heading.scroll-reveal.is-revealed,
.reveal-enabled .hero-text.scroll-reveal.is-revealed,
.reveal-enabled .path-card.biz.scroll-reveal.is-revealed,
.reveal-enabled .prop-head-aside.scroll-reveal.is-revealed,
.reveal-enabled .cons-head-aside.scroll-reveal.is-revealed,
.reveal-enabled .hero-scene.scroll-reveal.is-revealed,
.reveal-enabled .path-card.learn.scroll-reveal.is-revealed {
  translate: 0 0;
}
.reveal-enabled .footer.scroll-reveal {
  translate: 0 18px;
}
.reveal-enabled .footer.scroll-reveal.is-revealed {
  translate: 0 0;
}
@media (max-width: 620px) {
  .reveal-enabled .scroll-reveal {
    translate: 0 18px;
  }
  .reveal-enabled .section-heading.scroll-reveal,
  .reveal-enabled .hero-text.scroll-reveal,
  .reveal-enabled .path-card.biz.scroll-reveal,
  .reveal-enabled .prop-head-aside.scroll-reveal,
  .reveal-enabled .cons-head-aside.scroll-reveal,
  .reveal-enabled .hero-scene.scroll-reveal,
  .reveal-enabled .path-card.learn.scroll-reveal {
    translate: 0 18px;
  }
  .reveal-enabled .scroll-reveal.is-revealed {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Extra horizontal breathing room for Category 01–12 sections */
.market-section > .container {
  width: calc(100% - 200px);
}
@media (max-width: 1250px) {
  .market-section > .container {
    width: calc(100% - 120px);
  }
}
@media (max-width: 920px) {
  .market-section > .container {
    width: calc(100% - 40px);
  }
}
@media (max-width: 620px) {
  .market-section > .container {
    width: calc(100% - 26px);
  }
}

@media (max-width: 1250px) {
  .consultant-head-aside {
    align-items: stretch;
    padding-top: 14px;
  }
  .consultant-head-aside .prop-head-art {
    height: 112px;
  }
}
@media (max-width: 620px) {
  .consultant-head-aside .prop-head-art {
    height: 96px;
  }
}

/* Performance: the browser skips laying out and painting these long sections until
   they are close to the screen; the remembered size keeps the scrollbar steady */
.market-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.end-banner,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}

/* ---------- Finance showcase: site-blue interpretation ---------- */
.market-section.sec-finance {
  --fin-blue: #176bff;
  --fin-indigo: #5b4bff;
  --fin-navy: #091a3a;
  --fin-muted: #647394;
  --fin-line: #dbe5f6;
  --fin-soft: #eef4ff;
  background:
    radial-gradient(circle at 82% 14%, rgba(91, 75, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #ffffff, #f7f9ff);
}
.sec-finance .heading-icon {
  color: var(--fin-blue);
  border: 1px solid #cfddff;
  background: linear-gradient(145deg, #f7faff, #e6efff);
  box-shadow: 0 12px 28px rgba(23, 107, 255, 0.13);
}
.sec-finance .eyebrow,
.sec-finance .heading-text h2,
.sec-finance .fin-offer h3 {
  color: var(--fin-navy);
}
.sec-finance .heading-text p {
  color: var(--fin-muted);
}
.sec-finance .section-link {
  color: var(--fin-blue);
  border-color: var(--fin-blue);
  box-shadow: 0 8px 22px rgba(23, 107, 255, 0.1);
}
.sec-finance .section-link:hover {
  color: #fff;
  border-color: var(--fin-blue);
  background: var(--fin-blue);
}
.sec-finance .fin-banner {
  border-color: #d7e2f6;
  background: linear-gradient(105deg, #edf4ff 0%, #f8faff 34%, #f4f1ff 100%);
  box-shadow: 0 24px 60px rgba(26, 63, 132, 0.12);
}
.sec-finance .fin-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(23, 107, 255, 0.16), transparent 55%);
  mix-blend-mode: color;
}
.sec-finance .fin-art img {
  filter: saturate(0.82) hue-rotate(78deg) contrast(1.03);
}
.fin-art-badge {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #fff;
  background: rgba(9, 26, 58, 0.76);
  box-shadow: 0 8px 24px rgba(9, 26, 58, 0.24);
  backdrop-filter: blur(9px);
  font-size: 10px;
  font-weight: 800;
}
.sec-finance .fin-offer {
  padding-block: 28px;
}
.sec-finance .fin-offer .eyebrow,
.sec-finance .fin-label {
  color: #405173;
}
.sec-finance .fin-offer h3 span,
.sec-finance .fin-checks i,
.sec-finance .fin-checks b,
.sec-finance .fin-link {
  color: var(--fin-blue);
}
.sec-finance .fin-checks {
  color: #52617f;
}
.sec-finance .fin-bank {
  border-color: #dce5f4;
  box-shadow: 0 6px 16px rgba(33, 69, 135, 0.07);
}
.sec-finance .fin-bank small {
  color: var(--fin-indigo);
}
.sec-finance .fin-more {
  background: linear-gradient(145deg, #f8faff, #edf2ff);
}
.sec-finance .fin-more b {
  color: var(--fin-indigo);
}
.fin-drag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #7a87a2;
  font-size: 10px;
}
.fin-drag span {
  width: 28px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--fin-blue), var(--fin-indigo));
}
.sec-finance .fin-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--fin-blue), var(--fin-indigo));
  box-shadow: 0 12px 28px rgba(58, 83, 235, 0.3);
}
.sec-finance .fin-cta::after {
  display: none;
}
.sec-finance .fin-cta:hover {
  box-shadow: 0 16px 34px rgba(58, 83, 235, 0.38);
}
.sec-finance .fin-banner .emi-box {
  border-color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(160deg, #f4f7ff, #ecefff);
  box-shadow: 0 0 0 1px #d7def5, 0 14px 30px rgba(42, 61, 128, 0.12);
}
.sec-finance .emi-icon {
  color: var(--fin-blue);
  background: #dce8ff;
}
.sec-finance .emi-head p,
.sec-finance .emi-ticks {
  color: var(--fin-muted);
}
.sec-finance .fin-banner .emi-field input[type="number"] {
  border-color: #ccd8ee;
}
.sec-finance .fin-banner .emi-field input[type="range"] {
  accent-color: var(--fin-blue);
}
.sec-finance .fin-banner .emi-result {
  border-color: #c9d8f8;
  background: rgba(255, 255, 255, 0.72);
}
.sec-finance .fin-banner .emi-result small,
.sec-finance .fin-banner .emi-result strong {
  color: var(--fin-blue);
}
.sec-finance .fin-banner .emi-result span {
  color: #52617f;
}
.sec-finance .items-finance .loan-row {
  min-height: 88px;
  border-color: var(--fin-line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(30, 61, 120, 0.07);
}
.sec-finance .items-finance .loan-row:hover {
  border-color: #b7caff;
  box-shadow: 0 16px 34px rgba(30, 61, 120, 0.12);
}
.sec-finance .items-finance .round-icon {
  color: var(--fin-blue);
  border-color: #ccdaff;
  background: var(--fin-soft);
}
.sec-finance .items-finance .row-text h3 {
  color: var(--fin-navy);
}
.sec-finance .items-finance .row-text p {
  color: var(--fin-muted);
}
.sec-finance .items-finance .card-action {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--fin-blue), var(--fin-indigo));
}
.sec-finance .items-finance .heart {
  color: var(--fin-blue);
  border-color: #d7e1f5;
  background: #f7f9ff;
}
@media (max-width: 760px) {
  .fin-art-badge {
    left: 12px;
    bottom: 12px;
  }
  .sec-finance .fin-offer {
    padding: 22px 18px;
  }
}

/* Interview-preparation journey */
.recruit-summary {
  max-width: 620px;
  margin: -2px 0 17px;
  color: #5f6f8b;
  font-size: 12.5px;
  line-height: 1.65;
}
.career-journey {
  display: grid;
  grid-template-columns: repeat(5, minmax(74px, 1fr));
  gap: 6px;
  margin: 0 0 19px;
  padding: 0;
  list-style: none;
}
.career-journey li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: #405170;
  text-align: center;
  font-size: 9px;
}
.career-journey li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 19px);
  width: calc(100% - 32px);
  height: 2px;
  background: linear-gradient(90deg, #a8c2ff, #c9c2ff);
}
.career-journey i {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd9ff;
  border-radius: 50%;
  color: #176bff;
  background: #f7f9ff;
  box-shadow: 0 5px 14px rgba(34, 70, 146, 0.08);
  font-size: 14px;
}
.career-journey li:last-child i {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #176bff, #5b4bff);
}
.recruit-company-strip {
  margin-top: 10px;
}
.recruit-company-strip .recruit-logo-track figure {
  flex-basis: 104px;
  height: 48px;
  padding: 8px 10px;
}
.recruit-company-strip .recruit-logo-track img {
  height: 28px;
}
.recruit-company-strip .recruit-logo-track {
  animation: recruiterLeft 28s linear infinite;
}
.career-overall h4 {
  min-height: 31px;
  display: grid;
  place-items: center;
  line-height: 1.25;
}
.placement-service {
  min-height: 104px;
}
.placement-service p {
  line-height: 1.45;
}
@media (max-width: 760px) {
  .career-journey {
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    overflow-x: auto;
  }
  .career-journey li {
    min-width: 58px;
  }
}

/* Two-direction recruiter logo ticker */
.recruit-story {
  overflow: hidden;
}
.recruit-marquees {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.recruit-marquee {
  min-width: 0;
  overflow: hidden;
  padding-block: 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.recruit-logo-track {
  display: flex;
  width: max-content;
  gap: 10px;
  will-change: transform;
}
.recruit-logo-track figure {
  flex: 0 0 118px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 11px;
  border: 1px solid #dfe6f3;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 16px rgba(33, 63, 121, 0.07);
}
.recruit-logo-track img {
  width: 100%;
  height: 38px;
  object-fit: contain;
}
.recruit-logo-track figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.recruit-marquee-left .recruit-logo-track {
  animation: recruiterLeft 24s linear infinite;
}
.recruit-marquee-right .recruit-logo-track {
  animation: recruiterRight 24s linear infinite;
}
.recruit-marquee:hover .recruit-logo-track {
  animation-play-state: paused;
}
@keyframes recruiterLeft {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 5px)); }
}
@keyframes recruiterRight {
  from { transform: translateX(calc(-50% - 5px)); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .recruit-logo-track {
    animation: none !important;
  }
  .recruit-marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ---------- Category 01: learning-platform recruiter network ---------- */
.sec-finance .sec-body {
  gap: 14px;
}
.recruit-showcase {
  display: grid;
  grid-template-columns: minmax(0, 29%) minmax(0, 42%) minmax(340px, 29%);
  min-height: 392px;
  overflow: hidden;
  border: 1px solid #cfdcff;
  border-radius: 22px;
  background: linear-gradient(108deg, #eef5ff 0%, #f9fbff 36%, #f0edff 100%);
  box-shadow: 0 24px 60px rgba(35, 71, 148, 0.12);
}
.recruit-photo {
  min-height: 392px;
  overflow: hidden;
}
.recruit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% center;
}
.recruit-story {
  align-self: center;
  min-width: 0;
  padding: 28px 22px 24px;
}
.recruit-kicker,
.recruit-label {
  display: block;
  color: #344e78;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2.7px;
}
.sec-body .recruit-story h3 {
  margin: 10px 0 14px;
  color: #091a3a;
  font-size: clamp(25px, 2.05vw, 35px);
  line-height: 1.08;
  letter-spacing: -1.1px;
}
.recruit-story h3 span {
  color: #176bff;
}
.recruit-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: #536481;
  font-size: 14px;
}
.recruit-stats li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recruit-stats i,
.recruit-stats b {
  color: #176bff;
}
.recruit-label {
  margin-bottom: 9px;
  letter-spacing: 1.8px;
}
.recruit-slider {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}
.recruit-arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #d5def1;
  border-radius: 50%;
  color: #152546;
  background: #fff;
  box-shadow: 0 6px 16px rgba(34, 67, 132, 0.08);
}
.recruit-logos {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.recruit-logos::-webkit-scrollbar {
  display: none;
}
.recruit-logos figure {
  flex: 0 0 112px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 10px;
  border: 1px solid #dfe6f3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(33, 63, 121, 0.06);
  scroll-snap-align: start;
}
.recruit-logos img {
  width: 100%;
  height: 34px;
  object-fit: contain;
}
.recruit-logos figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.recruit-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}
.recruit-dots i {
  width: 18px;
  height: 4px;
  border-radius: 10px;
  background: #d5deef;
}
.recruit-dots i:first-child {
  width: 24px;
  background: linear-gradient(90deg, #176bff, #5b4bff);
}
.sec-body .recruit-hint {
  margin: 5px 0 0;
  text-align: center;
  color: #8491a8;
  font-size: 10px;
}
.recruit-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 14px;
}
.recruit-link,
.recruit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  font-size: 12px;
  font-weight: 800;
}
.recruit-link {
  padding: 0;
  color: #176bff;
  background: none;
}
.recruit-cta {
  padding: 11px 20px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #176bff, #5b4bff);
  box-shadow: 0 11px 24px rgba(50, 76, 229, 0.27);
}
.career-score {
  align-self: stretch;
  margin: 12px;
  padding: 18px;
  border: 4px solid rgba(255, 255, 255, 0.88);
  border-radius: 19px;
  background: linear-gradient(150deg, rgba(240, 246, 255, 0.96), rgba(236, 233, 255, 0.94));
  box-shadow: 0 0 0 1px #d5def4, 0 14px 30px rgba(42, 61, 128, 0.11);
}
.career-score header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 15px;
  border-bottom: 1px solid #d9e1f1;
}
.career-score header > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
  color: #176bff;
  background: #dce8ff;
  font-size: 19px;
}
.sec-body .career-score header h3 {
  color: #0d2144;
  font-size: 16px;
}
.sec-body .career-score header p {
  margin-top: 2px;
  color: #72809b;
  font-size: 11px;
}
.career-score-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 16px;
  padding-top: 16px;
}
.career-metrics {
  display: grid;
  gap: 14px;
}
.career-metric p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: #142547;
  font-size: 10.5px;
  font-weight: 700;
}
.career-metric > i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #dce2ef;
  box-shadow: inset 0 1px 2px rgba(29, 52, 99, 0.08);
}
.career-metric > i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #176bff, #5b4bff);
}
.career-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 15px;
  border-left: 1px solid #d9e1f1;
  text-align: center;
}
.career-overall > b {
  color: #18294a;
  font-size: 11px;
}
.score-ring {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  margin: 9px 0 6px;
  border-radius: 50%;
  background: conic-gradient(#176bff calc(var(--score) * 1%), #d9dfeb 0);
  position: relative;
}
.score-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #f5f7ff;
}
.score-ring strong {
  position: relative;
  z-index: 1;
  color: #091a3a;
  font-size: 28px;
}
.career-overall h4 {
  margin: 0 0 10px;
  color: #176bff;
  font-size: 12px;
}
.career-overall button {
  width: 100%;
  padding: 8px 7px;
  border: 1px solid #cbd9fa;
  border-radius: 8px;
  color: #176bff;
  background: rgba(255, 255, 255, 0.74);
  font-size: 9px;
  font-weight: 800;
}
.items-finance {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.placement-service {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid #dce4f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(30, 61, 120, 0.06);
}
.placement-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #cad9ff;
  border-radius: 50%;
  color: #176bff;
  background: #eef4ff;
  font-size: 18px;
}
.placement-service h3 {
  color: #102143;
  font-size: 11px;
}
.placement-service p {
  margin-top: 2px;
  color: #74819a;
  font-size: 9.5px;
}
.placement-service .heart {
  width: 28px;
  height: 28px;
  border-color: #e0e6f1;
  color: #71809a;
  background: #f9fbff;
}
.placement-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #176bff, #5b4bff);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .recruit-showcase {
    grid-template-columns: 38% 62%;
  }
  .career-score {
    grid-column: 1 / -1;
  }
  .items-finance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .recruit-showcase {
    grid-template-columns: 1fr;
  }
  .recruit-photo {
    min-height: 280px;
  }
  .recruit-story {
    padding: 24px 18px;
  }
  .career-score-body {
    grid-template-columns: 1fr;
  }
  .career-overall {
    padding: 16px 0 0;
    border-top: 1px solid #d9e1f1;
    border-left: 0;
  }
  .items-finance {
    grid-template-columns: 1fr;
  }
  .placement-service {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }
  .placement-service .heart {
    display: none;
  }
}

/* ---------- Career Support (sec-finance): responsive pass ----------
   Service cards stack (icon + title, text, button) whenever one row would squeeze the text;
   the heading stacks above its button on small screens; the five-step journey always fits. */
.placement-service > div {
  min-width: 0;
}
.placement-service h3 {
  font-size: clamp(12px, 0.82vw, 14px);
  line-height: 1.25;
}
.placement-service p {
  font-size: clamp(10.5px, 0.72vw, 12px);
}
.placement-action {
  font-size: clamp(9.5px, 0.66vw, 11px);
}
@media (max-width: 1600px) and (min-width: 1281px), (max-width: 1000px) and (min-width: 761px), (max-width: 560px) {
  .placement-service {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon text heart"
      "act act act";
    align-items: start;
    row-gap: 12px;
    padding: 14px;
  }
  .placement-icon {
    grid-area: icon;
  }
  .placement-service > div {
    grid-area: text;
  }
  .placement-service .heart {
    grid-area: heart;
  }
  .placement-action {
    grid-area: act;
    justify-self: start;
    margin-left: 52px;
    padding: 9px 14px;
  }
}
@media (max-width: 1280px) and (min-width: 1001px), (max-width: 760px) and (min-width: 561px) {
  .placement-service h3 {
    font-size: 13px;
  }
  .placement-service p {
    font-size: 11.5px;
  }
  .placement-action {
    font-size: 10.5px;
  }
}
@media (max-width: 760px) {
  .sec-finance .section-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .sec-finance .heading-left {
    align-items: flex-start;
  }
  .sec-finance .heading-text {
    min-width: 0;
  }
  .sec-finance .heading-text h2 {
    font-size: clamp(24px, 6.2vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.8px;
  }
  .sec-finance .heading-text p {
    font-size: 13.5px;
    line-height: 1.5;
  }
  .sec-finance .section-link {
    align-self: flex-start;
  }
  .career-journey {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }
  .career-journey li {
    min-width: 0;
    font-size: 9.5px;
    line-height: 1.2;
  }
  .career-journey i {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .career-journey li:not(:last-child)::after {
    top: 15px;
    left: calc(50% + 17px);
    width: calc(100% - 30px);
  }
  .placement-service h3 {
    font-size: 13.5px;
  }
  .placement-service p {
    font-size: 12px;
  }
  .placement-action {
    font-size: 11px;
  }
}
@media (max-width: 420px) {
  .sec-finance .heading-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 12px;
  }
  .sec-finance .heading-left {
    gap: 10px;
  }
  .recruit-photo {
    min-height: 220px;
  }
  .recruit-story {
    padding: 20px 14px;
  }
  .sec-body .recruit-story h3 {
    font-size: 23px;
  }
  .career-score {
    margin: 8px;
    padding: 14px;
  }
  .placement-action {
    margin-left: 0;
  }
}

/* Certificate reveal: one 2D cartoon character for all four steps; certificates land in front of him */
.cert-reveal .cr-scene {
  --d-w: calc(var(--d-h) * 1369 / 1398);
}
.cert-reveal.is-animated .cr-scene {
  --a-w: calc(var(--a-h) * 1369 / 1398);
  --d-h: var(--a-h);
  --d-w: var(--a-w);
  --d-left: var(--a-left);
  --d-top: var(--a-top);
}
.cr-hands {
  display: none;
}
.cr-mark-land,
.cr-course {
  width: calc(var(--d-w) * 0.58);
  left: calc(var(--d-left) - var(--d-w) * 0.16);
  top: calc(var(--d-top) + var(--d-h) * 0.6);
}
.cr-mark-land {
  height: calc(var(--d-w) * 0.58 / var(--cr-ar));
}
.cr-course {
  transform: rotate(-5deg);
}
.cr-intern {
  width: calc(var(--d-w) * 0.46);
  left: calc(var(--d-left) + var(--d-w) * 0.12);
  top: calc(var(--d-top) + var(--d-h) * 0.5);
  transform: rotate(7deg);
}
.cr-check,
.cr-confetti {
  left: calc(var(--d-left) + var(--d-w) * 0.2);
  top: calc(var(--d-top) + var(--d-h) * 0.47);
}
.cr-check,
.cr-confetti {
  left: calc(var(--d-left) + var(--d-w) * 0.8);
  top: calc(var(--d-top) + var(--d-h) * 0.36);
}
/* cartoon.png/cartoon-hold.jpg have their own light background (not pure white), so fade their
   edges to transparent instead of masking+multiplying onto the section's white background */
.cert-reveal .cr-person img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
  /* the source art is soft and pale; punch up color without pushing skin tones toward yellow */
  filter: saturate(1.15) contrast(1.05);
}

/* two cartoon poses: relaxed (steps 1-3) and holding the certificates (step 4), right-aligned */
.cert-reveal .cr-scene {
  --d-w: calc(var(--d-h) * 982 / 680);
}
.cert-reveal.is-animated .cr-scene {
  --a-w: calc(var(--a-h) * 1369 / 1398);
  --d-h: var(--a-h);
  --d-w: calc(var(--a-h) * 982 / 680);
  --d-left: calc(var(--a-left) + var(--a-w) - var(--d-w));
  --d-top: var(--a-top);
}
.cr-mark-land,
.cr-course {
  width: calc(var(--d-w) * 0.367);
  left: calc(var(--d-left) + var(--d-w) * 0.29);
  top: calc(var(--d-top) + var(--d-h) * 0.497);
}
.cr-mark-land {
  height: calc(var(--d-w) * 0.367 / var(--cr-ar));
}
.cr-course {
  transform: rotate(-12deg);
}
.cr-intern {
  width: calc(var(--d-w) * 0.234);
  left: calc(var(--d-left) + var(--d-w) * 0.616);
  top: calc(var(--d-top) + var(--d-h) * 0.425);
  transform: rotate(12deg);
}
.cr-check {
  display: none;
}
.cr-confetti {
  left: calc(var(--d-left) + var(--d-w) * 0.77);
  top: calc(var(--d-top) + var(--d-h) * 0.14);
}
.cert-reveal:not(.is-animated) .cr-cert {
  display: none;
}
@media (min-width: 1200px) {
  .cert-reveal.is-animated .cr-scene {
    --a-left: calc(100cqw - var(--a-w) * 0.86 + 3cqw);
  }
}
@media (min-width: 1200px) {
  .cert-reveal.is-animated .cr-scene {
    --d-h: calc(var(--a-h) * 0.86);
    --d-w: calc(var(--d-h) * 982 / 680);
    --d-top: calc(100cqh - var(--d-h));
    --d-left: calc(100cqw - var(--d-w) + 2cqw);
  }
}
/* real certificates stay in the cartoon's hands, fingers drawn on top */
.cr-hands { display: block; }
.cr-mark-land, .cr-course { width: calc(var(--d-w) * 0.40); left: calc(var(--d-left) + var(--d-w) * 0.275); top: calc(var(--d-top) + var(--d-h) * 0.47); }
.cr-mark-land { height: calc(var(--d-w) * 0.40 / var(--cr-ar)); }
.cr-intern { width: calc(var(--d-w) * 0.26); left: calc(var(--d-left) + var(--d-w) * 0.605); top: calc(var(--d-top) + var(--d-h) * 0.40); }
.cr-intern { width: calc(var(--d-w) * 0.27); left: calc(var(--d-left) + var(--d-w) * 0.6); top: calc(var(--d-top) + var(--d-h) * 0.43); }
/* fitted to the drawn certificates in the holding pose */
.cr-mark-land, .cr-course { width: calc(var(--d-w) * 0.3228); left: calc(var(--d-left) + var(--d-w) * 0.3121); top: calc(var(--d-top) + var(--d-h) * 0.5132); }
.cr-mark-land { height: calc(var(--d-w) * 0.3228 / var(--cr-ar)); }
.cr-course { transform: rotate(-9.1deg); }
.cr-intern { width: calc(var(--d-w) * 0.2546); left: calc(var(--d-left) + var(--d-w) * 0.6008); top: calc(var(--d-top) + var(--d-h) * 0.4581); transform: rotate(6deg); }
.cr-intern { width: calc(var(--d-w) * 0.268); left: calc(var(--d-left) + var(--d-w) * 0.595); top: calc(var(--d-top) + var(--d-h) * 0.43); }
/* in the hands: a white paper margin makes the real certificates cover the drawn ones fully */
.cert-reveal.is-held .cr-course {
  box-shadow: 0 0 0 calc(var(--start-w) * 0.05) #fff, 0 calc(var(--start-w) * 0.05) calc(var(--start-w) * 0.08) rgba(16, 32, 80, 0.22);
}
.cert-reveal.is-held .cr-intern {
  box-shadow: 0 0 0 calc(var(--d-w) * 0.268 * 0.07) #fff, 0 calc(var(--d-w) * 0.268 * 0.05) calc(var(--d-w) * 0.268 * 0.08) rgba(16, 32, 80, 0.2);
}

/* Every section on a pure white background */
body,
main > section,
.hero,
.quick,
.paths.container,
.programs,
.journey,
.cert-reveal,
.cert-reveal.is-animated,
.cert-reveal.is-animated .cr-sticky,
.market-section,
.market-section[class*="sec-"],
.end-banner {
  background: #fff !important;
}

/* ================= Footer: blue/purple redesign ================= */
.footer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fbfcff 0%, #f6f8ff 100%) !important;
  padding: 0;
  border-top: none;
}
.footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cn-blue) 0%, #6c47ff 100%);
}
.footer-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}
.footer-blob-left {
  left: -120px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(23, 105, 255, 0.1), transparent 70%);
}
.footer-blob-right {
  right: -140px;
  bottom: -160px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(108, 71, 255, 0.1), transparent 70%);
}
.foot-grid-5 {
  position: relative;
  z-index: 1;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.05fr;
  gap: 32px;
  padding-top: 40px;
}
.foot-grid-5 .foot-brand p {
  color: #5b6a8a;
}
.foot-grid-5 .foot-logo {
  color: var(--cn-ink);
}
.foot-grid-5 .footer-brand-image {
  display: block;
  width: min(100%, 250px);
  height: auto;
}
.foot-grid-5 .foot-logo b {
  background: linear-gradient(90deg, var(--cn-blue), #6c47ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-grid-5 .foot-logo .logo-mark {
  background: transparent;
  padding: 0;
}
.foot-grid-5 .social-links a {
  width: 38px;
  height: 38px;
  background: rgba(23, 105, 255, 0.08);
  color: var(--cn-blue);
  transition: transform 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.foot-grid-5 .social-links a:hover {
  background: linear-gradient(135deg, var(--cn-blue), #6c47ff);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(23, 105, 255, 0.28);
}
.foot-col {
  color: #5b6a8a;
  font-size: 13.5px;
}
.foot-col b {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  padding-top: 14px;
  color: var(--cn-ink);
  font-size: 15px;
  font-weight: 800;
}
.foot-col b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent, var(--cn-blue));
}
.foot-col-blue b { --accent: #1769ff; }
.foot-col-violet b { --accent: #7c3aed; }
.foot-col-teal b { --accent: #0ea5a0; }
.foot-col a {
  color: #24324d;
  transition: color 0.2s, translate 0.2s;
}
.foot-col a:hover {
  color: var(--cn-blue);
  translate: 3px 0;
}
.foot-contact b::before {
  background: #4f46e5;
}
.foot-contact a,
.foot-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #24324d;
}
.foot-contact a:hover {
  color: var(--cn-blue);
  translate: 0;
}
.foot-contact-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  font-size: 13px;
}

/* Giant soft-gradient wordmark, sitting below the nav columns, clipped tight
   to the footer's bottom edge so there's no dead space under the letters */
.footer-watermark {
  position: relative;
  z-index: 1;
  margin: 6px 0 calc(-0.22em - 20px);
  padding: 0;
  transform: translateY(clamp(-30px, -2vw, -10px));
  text-align: center;
  font-family: var(--font-cn);
  font-size: clamp(64px, 11.5vw, 210px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(23, 105, 255, 0.16) 0%, rgba(108, 71, 255, 0.1) 55%, rgba(108, 71, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
/* Copyright line, now sitting under the social icons in the brand column */
.foot-brand .footer-last {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  padding-top: 0;
  border-top: none;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8a97b5;
}
.foot-brand .footer-last b {
  color: #5b6a8a;
}
@media (max-width: 1100px) {
  .foot-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36px;
  }
  .foot-grid-5 .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot-grid-5 {
    grid-template-columns: 1fr;
  }
  .footer-watermark {
    font-size: clamp(38px, 15vw, 64px);
    margin-top: 14px;
  }
}

/* InfrasofTech two-tier header: utility contacts/actions above the primary navigation. */
.topbar { overflow: visible; }
.utility-bar {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #f4f8ff 0%, #f8faff 55%, #f1f6ff 100%);
  border-bottom: 1px solid #e4ebf7;
  color: #33415f;
  font-family: var(--font-cn);
}
.utility-inner {
  width: calc(100% - 88px);
  max-width: var(--top-max);
  min-height: 42px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.contact-links,
.utility-actions { display: flex; align-items: center; }
.contact-links { min-width: 0; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; }
.contact-links a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: #344260; }
.contact-links a:hover { color: var(--cn-blue); }
.contact-links i { color: var(--cn-blue); font-size: 12px; }
.contact-separator { color: #9aa9c3; }
.contact-divider { width: 1px; height: 16px; margin-inline: 4px; background: #d7e0ef; }
.utility-actions { flex: 0 0 auto; gap: 9px; }
.quick-links { position: relative; }
.quick-toggle,
.utility-login,
.utility-inquiry {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px;
  white-space: nowrap;
  font: 600 12px/1 var(--font-cn);
}
.quick-toggle { border: 1px solid #dce5f3; background: #fff; color: #243653; cursor: pointer; }
.quick-toggle i { color: var(--cn-blue); font-size: 10px; transition: transform .2s; }
.quick-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.quick-toggle:hover,
.utility-login:hover { border-color: #a9c7ff; color: var(--cn-blue); }
.utility-login { border: 1px solid #dce5f3; background: #fff; color: #243653; }
.utility-login i { color: var(--cn-blue); font-size: 14px; }
.utility-inquiry { padding-inline: 14px; background: linear-gradient(180deg, #2b80ff, var(--cn-blue-dark)); color: #fff; box-shadow: 0 5px 13px rgba(23,105,255,.18); }
.utility-inquiry:hover { color: #fff; box-shadow: 0 7px 17px rgba(23,105,255,.26); }
.utility-inquiry i { font-size: 12px; }
.social-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 9px);
  right: 0;
  width: 190px;
  padding: 7px;
  display: grid;
  gap: 2px;
  border: 1px solid #e1e9f6;
  border-radius: 13px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 38px rgba(22,48,93,.16);
  backdrop-filter: blur(12px);
}
.social-menu[hidden] { display: none; }
.social-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #263653; font-size: 12px; font-weight: 600; }
.social-menu a i { width: 18px; color: var(--cn-blue); font-size: 15px; text-align: center; }
.social-menu a:hover { background: #f0f5ff; color: var(--cn-blue); }
.mainbar { position: relative; z-index: 1; background: #fff; }
.mainbar .top-inner { min-height: 76px; }
.main-tools { display: none; }

@media (max-width: 1320px) {
  .utility-inner { width: calc(100% - 64px); }
  .main-tools { display: flex; align-items: center; margin-left: auto; }
}
@media (max-width: 720px) {
  .utility-inner { width: calc(100% - 32px); min-height: 0; padding-block: 8px; flex-direction: column; align-items: stretch; gap: 8px; }
  .contact-links { justify-content: center; gap: 7px; font-size: 11px; }
  .contact-links a { gap: 5px; }
  .contact-divider { display: none; }
  .utility-actions { justify-content: center; gap: 7px; }
  .quick-toggle, .utility-login, .utility-inquiry { min-height: 30px; padding-inline: 9px; font-size: 11px; }
  .mainbar .top-inner { width: calc(100% - 32px); min-height: 62px; }
  .brand-logo { height: 38px; }
  .main-tools .nav-toggle { width: 42px; height: 42px; }
  .main-nav { padding-inline: 16px; }
}
@media (max-width: 380px) {
  .contact-links { column-gap: 5px; font-size: 10px; }
  .utility-actions { gap: 5px; }
  .quick-toggle, .utility-login, .utility-inquiry { padding-inline: 7px; font-size: 10px; }
}
.sk-topbar { height: auto; display: block; padding: 0; }
.sk-utility-row,
.sk-main-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sk-utility-row { min-height: 38px; border-bottom: 1px solid #e9eef7; }
.sk-utility-row .sk-contact { width: 190px; height: 11px; }
.sk-utility-row .sk-mail { width: 160px; margin-right: auto; }
.sk-utility-actions { display: flex; gap: 8px; }
.sk-utility-actions .sk-action { width: 90px; height: 26px; border-radius: 7px; }
.sk-main-row { min-height: 70px; }
.sk-main-row .sk-logo { flex: 0 0 150px; }
.sk-main-row .sk-nav { flex: 1; justify-content: center; }
.sk-main-row > .sk-action { display: none; }
@media (max-width: 620px) {
  .sk-topbar { height: auto; }
  .sk-utility-row { min-height: 38px; gap: 8px; }
  .sk-utility-row .sk-contact { width: 105px; }
  .sk-utility-row .sk-mail { display: none; }
  .sk-utility-actions .sk-action { width: 52px; height: 24px; }
  .sk-main-row { min-height: 62px; gap: 8px; }
  .sk-main-row .sk-logo { flex-basis: 115px; }
  .sk-main-row .sk-nav { display: none; }
  .sk-main-row > .sk-action { display: block; width: 42px; height: 42px; }
}

/* ---------- Homepage CTA band (angled gradient, left copy / right button) ---------- */
.lp-cta-band { margin: clamp(56px, 5vw, 96px) 0; }
.lp-cta-band-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  min-height: 178px;
  padding: 32px clamp(30px, 4vw, 66px);
  border-radius: 17px;
  background: linear-gradient(105deg, #0b55dc 0%, #3536db 57%, #7549f6 100%);
  box-shadow: 0 14px 28px rgba(35, 79, 204, .22);
  color: #fff;
}
.lp-cta-band-inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -220px;
  width: 540px;
  height: 390px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 19px rgba(255, 255, 255, .035), 0 0 0 39px rgba(255, 255, 255, .03), 0 0 0 59px rgba(255, 255, 255, .025);
  transform: rotate(-20deg);
}
.lp-cta-band-kicker {
  margin: 0 0 8px;
  color: #d9eaff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.lp-cta-band-inner h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(29px, 2.65vw, 44px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.lp-cta-band-inner div > p:last-child {
  max-width: 660px;
  margin: 10px 0 0;
  color: #ecf2ff;
  font-size: 14px;
  line-height: 1.55;
}
.lp-cta-band-inner a {
  flex: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  min-width: 152px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  color: #195ee9;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(15, 34, 121, .12);
  transition: transform .2s;
  text-decoration: none;
}
.lp-cta-band-inner a:hover { color: #195ee9; transform: translateY(-2px); }
@media (max-width: 760px) {
  .lp-cta-band-inner { align-items: flex-start; flex-direction: column; gap: 22px; padding: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-cta-band-inner a { transition: none; }
}

/* ---------- Anniversary celebration overlay ---------- */
.anniv-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(16, 24, 56, .92), rgba(6, 10, 26, .97));
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.anniv-overlay.is-open { opacity: 1; visibility: visible; }
.anniv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.anniv-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.anniv-close:hover { background: rgba(255, 255, 255, .18); transform: scale(1.06); }
.anniv-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.anniv-overlay.is-revealed .anniv-stage { opacity: 1; transform: translateY(0); }
.anniv-kicker {
  margin: 0 0 6px;
  color: #ffd98a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.anniv-cake {
  width: min(62vw, 300px);
  height: auto;
  margin: 4px 0 14px;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .45));
  transform: scale(.4);
  opacity: 0;
  transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .5s ease;
}
.anniv-overlay.is-revealed .anniv-cake { transform: scale(1); opacity: 1; }
.anniv-title {
  margin: 0;
  color: #fff;
  font-family: "Figtree", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.anniv-sub {
  max-width: 420px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  line-height: 1.6;
}
.anniv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(100deg, #ffd98a, #ffb347);
  color: #3a1e00;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(255, 179, 71, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.anniv-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(255, 179, 71, .45); color: #3a1e00; }
.anniv-btn i { transition: transform .2s ease; }
.anniv-btn:hover i { transform: translateX(3px); }
@media (max-width: 560px) {
  .anniv-cake { width: min(74vw, 240px); }
  .anniv-btn { padding: 12px 22px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .anniv-stage, .anniv-cake, .anniv-overlay, .anniv-close, .anniv-btn, .anniv-btn i { transition: none; }
}

/* ---------- Anniversary mini badge (parked above the chatbot after close) ---------- */
.anniv-fab {
  position: fixed;
  z-index: 2147482999;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 46px + 12px + 46px + 12px);
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.3) translateY(40px);
  transition: transform .5s cubic-bezier(.2, 1.4, .4, 1), opacity .35s ease, filter .2s ease;
  animation: anniv-fab-pulse 2.6s ease-in-out infinite;
}
.anniv-fab.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.anniv-fab.no-pop {
  transition: filter .2s ease;
}
.anniv-fab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(255, 150, 40, .45));
  pointer-events: none;
}
.anniv-fab:hover {
  transform: scale(1.08) translateY(0);
}
.anniv-fab:hover img {
  filter: drop-shadow(0 10px 20px rgba(255, 150, 40, .6));
}
@keyframes anniv-fab-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 179, 71, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 179, 71, .55)); }
}
@media (max-width: 560px) {
  .anniv-fab { width: 52px; height: 52px; right: max(12px, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .anniv-fab { animation: none; transition: opacity .3s ease; }
}