/* Theme: same single blue accent as practiceabacus.in (#4285f4 theme colour), navy ink, white and pale-blue surfaces.
   Swap the tokens below if the main site's palette differs. */
    :root {
      --blue: #4285f4;
      --blue-d: #2f6fe0;
      --blue-dd: #1f56bd;
      --ink: #1d2a44;
      --muted: #52607b;
      --navy: #16244a;
      --bg: #f6f9ff;
      --sky: #eaf2ff;
      --sky-2: #dbe8ff;
      --line: #e0e8f6;
      --r: 20px;
      --r-sm: 14px;
      --shadow-sm: 0 1px 2px rgba(29, 42, 68, .04), 0 4px 14px rgba(29, 42, 68, .05);
      --shadow: 0 1px 2px rgba(29, 42, 68, .04), 0 12px 32px rgba(29, 42, 68, .08);
      --gutter: clamp(18px, 5vw, 32px);
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      scroll-padding-top: 84px
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Gujarati", "Noto Sans Bengali", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", "Noto Sans Thai", Helvetica, Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.65;
      color: var(--ink);
      background: var(--bg);
      padding-bottom: 84px;
      -webkit-font-smoothing: antialiased
    }

    img,
    svg {
      max-width: 100%
    }

    a {
      color: var(--blue-d);
      text-underline-offset: 3px
    }

    a:hover {
      color: var(--blue-dd)
    }

    :focus-visible {
      outline: 3px solid var(--blue-dd);
      outline-offset: 3px;
      border-radius: 6px
    }

    .skip {
      position: absolute;
      left: -999px;
      top: 8px;
      background: #fff;
      color: var(--ink);
      padding: 10px 14px;
      border-radius: 8px;
      z-index: 100
    }

    .skip:focus {
      left: 8px
    }

    .vh {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--gutter)
    }

    .sec {
      padding: clamp(56px, 9vw, 104px) 0;
      position: relative;
      z-index: 2
    }

    .band {
      background: transparent;
      position: relative;
      z-index: 2
    }

    /* type scale */
    h1,
    h2,
    h3,
    h4 {
      line-height: 1.12;
      margin: 0 0 .55em;
      letter-spacing: -.02em;
      text-wrap: balance
    }

    h1 {
      font-size: clamp(2.2rem, 5.6vw, 3.7rem);
      font-weight: 800;
      letter-spacing: -.03em
    }

    h2 {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 800
    }

    h3 {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -.01em
    }

    h4 {
      font-size: 1.02rem;
      font-weight: 700;
      margin-bottom: .2em;
      letter-spacing: -.005em
    }

    p {
      margin: 0 0 1em
    }

    .eyebrow {
      display: inline-block;
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--blue-dd);
      background: var(--sky);
      padding: 5px 12px;
      border-radius: 999px;
      margin-bottom: 16px
    }

    .eyebrow.light {
      color: #cfe0ff;
      background: rgba(255, 255, 255, .1)
    }

    .lead {
      font-size: clamp(1.05rem, 1.6vw, 1.2rem);
      line-height: 1.65;
      color: var(--muted);
      max-width: none;
      margin-bottom: 0
    }

    .lead.light {
      color: #d6e2ff
    }

    .fine {
      font-size: .9rem;
      color: var(--muted)
    }

    .sec-head {
      margin-bottom: clamp(28px, 4vw, 48px)
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 50px;
      padding: 0 28px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: -.005em;
      text-decoration: none;
      border: 1.5px solid transparent;
      transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
      cursor: pointer;
      font-family: inherit;
      text-align: center
    }

    .btn-primary {
      background: var(--blue-d);
      color: #fff;
      box-shadow: 0 8px 20px rgba(47, 111, 224, .28)
    }

    .btn-primary:hover {
      background: var(--blue-dd);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(47, 111, 224, .34)
    }

    .btn-ghost {
      background: #fff;
      color: var(--blue-dd);
      border-color: #c4d6f8
    }

    .btn-ghost:hover {
      background: var(--sky);
      border-color: var(--blue)
    }

    .btn-wa {
      background: var(--blue-d);
      color: #fff
    }

    .btn-wa:hover {
      background: var(--blue-dd);
      color: #fff
    }

    /* header */
    .top {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(255, 255, 255, .86);
      backdrop-filter: saturate(1.4) blur(14px);
      -webkit-backdrop-filter: saturate(1.4) blur(14px);
      border-bottom: 1px solid var(--line)
    }

    .top .wrap {
      display: flex;
      align-items: center;
      gap: 16px;
      min-height: 68px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      font-size: 1.1rem;
      letter-spacing: -.01em;
      color: var(--ink);
      text-decoration: none;
      margin-right: auto
    }

    .brand img {
      border-radius: 10px
    }

    .nav {
      display: none;
      gap: 4px;
      align-items: center
    }

    .nav a {
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      font-size: .93rem;
      padding: 8px 14px;
      border-radius: 999px;
      transition: background-color .15s ease, color .15s ease
    }

    .nav a:hover {
      background: var(--sky);
      color: var(--blue-dd)
    }

    .top .btn {
      min-height: 42px;
      padding: 0 20px;
      font-size: .93rem
    }

    /* hero: centred stack, like the home page (eyebrow, big title, sub, two pill buttons) */
    .hero {
      position: relative;
      color: #fff;
      text-align: center;
      padding: clamp(56px, 9vw, 112px) 0 clamp(52px, 7vw, 88px);
      overflow: hidden;
      background:
        radial-gradient(760px 380px at 88% -12%, rgba(255, 255, 255, .18), transparent 62%),
        radial-gradient(620px 320px at 4% 112%, rgba(255, 255, 255, .1), transparent 60%),
        linear-gradient(135deg, var(--blue-dd) 0%, var(--blue-d) 100%)
    }

    .hero-c {
      display: flex;
      flex-direction: column;
      align-items: center
    }

    .hero :focus-visible {
      outline-color: #fff
    }

    .hero .audience {
      margin: 0 0 24px;
      padding: 8px 18px;
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 999px;
      font-size: .92rem;
      font-weight: 600;
      line-height: 1.4;
      color: #fff;
      max-width: 100%
    }

    .hero h1 {
      color: #fff;
      max-width: 24ch;
      margin: 0 auto .45em;
      font-size: clamp(2.4rem, 6.4vw, 4.2rem);
      line-height: 1.05;
      letter-spacing: -.035em
    }

    .hero .sub {
      color: #e9f1ff;
      max-width: 60rem;
      margin: 0 auto 36px;
      font-size: clamp(1.08rem, 1.8vw, 1.28rem);
      line-height: 1.6
    }

    .hero .cta-row {
      justify-content: center
    }

    .hero .btn {
      min-height: 56px;
      padding: 0 34px;
      font-size: 1.02rem
    }

    .hero .btn-primary {
      background: #fff;
      color: var(--blue-dd);
      box-shadow: 0 14px 30px rgba(8, 28, 80, .3)
    }

    .hero .btn-primary:hover {
      background: var(--sky);
      color: var(--blue-dd)
    }

    .hero .btn-ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255, 255, 255, .75)
    }

    .hero .btn-ghost:hover {
      background: rgba(255, 255, 255, .14);
      border-color: #fff;
      color: #fff
    }

    .hero .todo-row {
      margin: 18px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center
    }

    .hero .todo-chip {
      background: rgba(255, 255, 255, .95)
    }

    .explore-row {
      display: flex;
      justify-content: center;
      margin-top: 26px
    }

    .hero .explore-row .btn {
      min-height: 50px
    }

    .fe-i.meet {
      background: #fff6d6
    }

    .fe-i.meet svg {
      width: 24px;
      height: 24px;
      display: block
    }

    .hero .smallprint {
      color: #dbe8ff;
      margin: 22px auto 0;
      max-width: 52rem
    }

    .chips {
      list-style: none;
      padding: 0;
      margin: 44px 0 0;
      width: 100%;
      max-width: 960px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .chips li {
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: left;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: var(--r);
      padding: 16px;
      font-weight: 700;
      font-size: .95rem;
      line-height: 1.3;
      color: #fff
    }

    .chips li::before {
      content: "\2713";
      flex: none;
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #fff;
      color: var(--blue-d);
      font-weight: 900;
      font-size: .95rem
    }

    /* cards */
    .card {
      background: #fff;
      border-radius: var(--r);
      box-shadow: var(--shadow);
      padding: clamp(20px, 3vw, 28px);
      border: 1px solid var(--line)
    }

    .card ul {
      margin: 0;
      padding-left: 1.2em
    }

    .card li {
      margin: .35em 0
    }

    .price {
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
      margin: 0 0 .5em;
      letter-spacing: -.02em
    }

    .price small {
      font-size: .9rem;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0
    }

    /* steps */
    /* how it works: journey */
    .journey {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 22px;
      position: relative
    }

    .jstep {
      position: relative;
      display: flex;
      gap: 18px;
      align-items: flex-start
    }

    .jnum {
      position: relative;
      z-index: 1;
      flex: none;
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--blue), var(--blue-dd));
      color: #fff;
      font-weight: 800;
      font-size: 1.6rem;
      letter-spacing: -.02em;
      box-shadow: 0 0 0 7px var(--bg), 0 12px 24px rgba(47, 111, 224, .32)
    }

    .jbody {
      position: relative;
      flex: 1;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 22px 22px 24px;
      box-shadow: var(--shadow-sm);
      transition: transform .18s ease, box-shadow .18s ease
    }

    .jbody:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow)
    }

    .jic {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: var(--sky);
      font-size: 1.4rem;
      margin-bottom: 12px
    }

    .jbody h3 {
      font-size: 1.1rem;
      margin-bottom: .4em;
      line-height: 1.25
    }

    .jbody p {
      margin: 0;
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.6
    }

    .jstep.goal .jbody {
      background: linear-gradient(145deg, var(--blue-d), #5a9bff);
      border-color: transparent;
      box-shadow: 0 18px 40px rgba(47, 111, 224, .3)
    }

    .jstep.goal .jbody h3 {
      color: #fff
    }

    .jstep.goal .jbody p {
      color: #eaf2ff
    }

    .jstep.goal .jic {
      background: rgba(255, 255, 255, .2)
    }

    .jstep.goal .jnum {
      background: linear-gradient(145deg, #f8e8b0, #d4aa4f);
      color: #5c410b;
      box-shadow: 0 0 0 7px var(--bg), 0 12px 24px rgba(180, 140, 40, .4)
    }

    .journey::before {
      content: "";
      position: absolute;
      left: 28px;
      top: 30px;
      bottom: 30px;
      width: 4px;
      border-radius: 4px;
      background: linear-gradient(180deg, var(--sky-2), var(--blue) 55%, var(--blue-dd))
    }

    /* student levels */
    .lvls {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .lvls li {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 18px;
      padding: 20px 24px;
      align-items: start
    }

    .lvls li+li {
      border-top: 1px solid var(--line)
    }

    .lvn {
      justify-self: start;
      font-weight: 800;
      font-size: .9rem;
      color: var(--blue-dd);
      background: var(--sky);
      border-radius: 999px;
      padding: 5px 14px;
      white-space: nowrap
    }

    .lvls h4 {
      color: var(--ink)
    }

    .lvls p {
      margin: 0;
      font-size: .95rem;
      color: var(--muted);
      line-height: 1.6
    }

    /* pathway */
    .pcard {
      position: relative;
      background: #fff;
      border-radius: var(--r);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm)
    }

    .pcard .lv {
      font-weight: 700;
      color: var(--blue-dd);
      font-size: .9rem;
      margin-bottom: .4em
    }

    .pcard.primary {
      border: 2px solid var(--blue);
      padding: clamp(26px, 4vw, 40px);
      margin: 0 0 36px;
      background: linear-gradient(160deg, var(--sky) 0%, #fff 62%);
      box-shadow: var(--shadow);
      display: grid;
      gap: 22px;
      align-items: center
    }

    .pcard.primary h3 {
      font-size: clamp(1.7rem, 3.4vw, 2.2rem)
    }

    .pcard.primary .price small {
      display: block;
      margin-top: 8px;
      line-height: 1.35
    }

    .pcard.primary .price {
      font-size: clamp(2.2rem, 4vw, 3rem)
    }

    .pcard.primary p {
      color: var(--muted)
    }

    .pcard .ribbon {
      position: absolute;
      right: 24px;
      top: -14px;
      background: var(--blue-d);
      color: #fff;
      font-weight: 800;
      font-size: .8rem;
      letter-spacing: .04em;
      padding: 6px 16px;
      border-radius: 999px;
      box-shadow: 0 6px 14px rgba(47, 111, 224, .3)
    }

    .second-head {
      font-weight: 700;
      color: var(--muted);
      font-size: .95rem;
      margin: 0 0 14px
    }

    .path2 {
      display: grid;
      gap: 16px
    }

    .pcard.secondary {
      padding: 26px
    }

    .pcard.secondary h3 {
      font-size: 1.25rem
    }

    .pcard.secondary .price {
      font-size: 1.7rem
    }

    .pcard.secondary p {
      font-size: .95rem;
      color: var(--muted)
    }

    .pcard.secondary p:last-child {
      margin-bottom: 0
    }

    .tag {
      display: inline-block;
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      border-radius: 999px;
      padding: 4px 12px;
      margin-bottom: 10px;
      background: var(--sky);
      color: var(--blue-dd)
    }

    .callout {
      background: #fff;
      border: 1px solid var(--line);
      border-left: 6px solid var(--blue);
      border-radius: var(--r-sm);
      padding: 22px 24px;
      box-shadow: var(--shadow-sm);
      margin-top: 32px;
      font-size: 1.05rem
    }

    .callout strong {
      color: var(--blue-dd)
    }

    /* stage table + syllabus popovers */
    .tbl-wrap {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      margin: 0 0 18px
    }

    .tbl {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0
    }

    .tbl th,
    .tbl td {
      padding: 22px 24px;
      text-align: left;
      vertical-align: middle
    }

    .tbl thead th {
      background: var(--sky);
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--blue-dd);
      font-weight: 800;
      padding: 15px 24px
    }

    .tbl thead th:first-child {
      border-top-left-radius: calc(var(--r) - 1px)
    }

    .tbl thead th:last-child {
      border-top-right-radius: calc(var(--r) - 1px)
    }

    .tbl tbody tr+tr>* {
      border-top: 1px solid var(--line)
    }

    .tbl tbody tr:hover {
      background: rgba(234, 242, 255, .5)
    }

    .tbl tbody tr:last-child>:first-child {
      border-bottom-left-radius: calc(var(--r) - 1px)
    }

    .tbl tbody tr:last-child>:last-child {
      border-bottom-right-radius: calc(var(--r) - 1px)
    }

    .tbl tbody td {
      color: var(--muted);
      font-size: .97rem;
      line-height: 1.5
    }

    .stg {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      font-size: 1.08rem;
      color: var(--ink);
      letter-spacing: -.01em
    }

    .stg i {
      font-style: normal;
      display: grid;
      place-items: center;
      flex: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-weight: 800;
      font-size: .95rem;
      box-shadow: 0 6px 14px rgba(66, 133, 244, .32)
    }

    .lv-chip {
      display: inline-block;
      background: var(--sky);
      color: var(--blue-dd);
      font-weight: 800;
      font-size: .95rem;
      border-radius: 999px;
      padding: 6px 16px;
      white-space: nowrap
    }

    .pr {
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--ink);
      letter-spacing: -.01em;
      white-space: nowrap
    }

    .pr.free {
      display: inline-block;
      background: var(--blue-d);
      color: #fff;
      border-radius: 999px;
      padding: 5px 16px;
      font-size: .95rem
    }

    .tbl td.sy {
      position: relative;
      text-align: right;
      white-space: nowrap
    }

    .sy-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 18px 0 20px;
      border-radius: 999px;
      border: 1.5px solid #c4d6f8;
      background: #fff;
      color: var(--blue-dd);
      font: inherit;
      font-weight: 700;
      font-size: .93rem;
      cursor: pointer;
      transition: background-color .15s ease, border-color .15s ease, color .15s ease
    }

    .sy-btn:hover {
      background: var(--sky);
      border-color: var(--blue)
    }

    .sy-btn[aria-expanded="true"] {
      background: var(--blue-d);
      border-color: var(--blue-d);
      color: #fff
    }

    .sy-btn svg {
      width: 14px;
      height: 14px;
      transition: transform .18s ease
    }

    .sy-btn[aria-expanded="true"] svg {
      transform: rotate(180deg)
    }

    .pop {
      display: block;
      position: absolute;
      z-index: 40;
      top: calc(100% - 6px);
      right: 14px;
      width: min(500px, calc(100vw - 32px));
      text-align: left;
      white-space: normal;
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--sky-2);
      border-radius: 20px;
      box-shadow: 0 28px 70px rgba(22, 36, 74, .26), 0 2px 8px rgba(22, 36, 74, .08);
      animation: popin .16s ease-out
    }

    .pop[hidden] {
      display: none
    }

    .pop::before {
      content: "";
      position: absolute;
      top: -8px;
      left: var(--cx, 70%);
      width: 14px;
      height: 14px;
      background: #fff;
      border-left: 1px solid var(--sky-2);
      border-top: 1px solid var(--sky-2);
      transform: rotate(45deg)
    }

    .pop.side::before {
      left: auto;
      top: var(--cy, 30px);
      right: -8px;
      border: none;
      border-top: 1px solid var(--sky-2);
      border-right: 1px solid var(--sky-2)
    }

    @keyframes popin {
      from {
        opacity: 0;
        transform: translateY(-6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .pop-h {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 20px 20px 14px
    }

    .pop-t {
      margin: 0;
      font-weight: 800;
      font-size: 1.08rem;
      letter-spacing: -.01em;
      line-height: 1.3
    }

    .pop-s {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.5
    }

    .pop-x {
      flex: none;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: var(--sky);
      color: var(--blue-dd);
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
      font-family: inherit
    }

    .pop-x:hover {
      background: var(--sky-2)
    }

    .pop .lvls li {
      grid-template-columns: 78px 1fr;
      gap: 14px;
      padding: 15px 20px;
      border-top: 1px solid var(--line)
    }

    .pop .lvls h4 {
      font-size: .98rem
    }

    .pop .lvls p {
      font-size: .9rem
    }

    .pop .tofill {
      margin: 12px 20px 18px
    }

    .no-js .sy-btn {
      display: none
    }

    .no-js .pop[hidden] {
      display: block;
      position: static;
      width: auto;
      box-shadow: none;
      margin-top: 12px;
      animation: none
    }

    .no-js .pop::before {
      display: none
    }

    /* highlight card */
    .highlight {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      margin-top: 40px;
      padding: clamp(24px, 4vw, 36px);
      border-radius: 24px;
      color: #fff;
      background: linear-gradient(135deg, var(--blue-d), #5a9bff);
      box-shadow: 0 18px 40px rgba(47, 111, 224, .28)
    }

    .hl-ic {
      font-size: 2.2rem;
      line-height: 1;
      flex: none
    }

    .hl-title {
      font-size: clamp(1.25rem, 3.4vw, 1.6rem);
      font-weight: 800;
      line-height: 1.2;
      margin: 0 0 .45em;
      letter-spacing: -.015em
    }

    .hl-body {
      margin: 0;
      color: #eaf2ff;
      font-size: 1.02rem
    }

    /* resources */
    .res {
      margin-top: 28px
    }

    .res h3 {
      margin-bottom: .4em
    }

    .res p {
      margin: 0 0 .6em;
      color: var(--muted)
    }

    .res .tofill {
      margin-bottom: 0
    }

    .res-rich {
      display: grid;
      gap: 24px;
      align-items: center;
      padding: clamp(20px, 3vw, 32px)
    }

    .res-art {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      padding: 22px;
      border-radius: var(--r);
      background: radial-gradient(260px 160px at 20% 0%, rgba(255, 255, 255, .9), transparent 70%), linear-gradient(145deg, var(--sky), var(--sky-2))
    }

    .res-fig {
      margin: 0;
      text-align: center
    }

    .res-fig svg {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 10px 14px rgba(22, 36, 74, .2));
      animation: bob 5s ease-in-out infinite
    }

    .res-fig+.res-fig svg {
      animation-delay: -2.5s
    }

    .res-fig figcaption {
      margin-top: 8px;
      font-weight: 800;
      font-size: .9rem;
      color: var(--blue-dd)
    }

    @keyframes bob {
      50% {
        transform: translateY(-6px)
      }
    }

    @media (min-width:860px) {
      .res-rich {
        grid-template-columns: .9fr 1.3fr;
        gap: 36px
      }
    }

    /* partner program */
    .demand {
      display: grid;
      gap: 12px;
      margin: 0 0 28px
    }

    .dn {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 26px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px
    }

    .dn-ic {
      display: grid;
      place-items: center;
      width: 60px;
      height: 60px;
      border-radius: 18px;
      background: var(--sky);
      font-size: 1.9rem;
      margin-bottom: 6px
    }

    .dn-ic img {
      border-radius: 10px;
      display: block
    }

    .dn h3 {
      margin: 0;
      font-size: 1.22rem
    }

    .dn p {
      margin: 0;
      color: var(--muted);
      font-size: .96rem
    }

    .dn {
      border-top: 4px solid var(--sky-2)
    }

    .dn.hub {
      border-top-color: var(--blue);
      background: linear-gradient(180deg, var(--sky), #fff 70%);
      box-shadow: 0 14px 32px rgba(47, 111, 224, .14)
    }

    .dn.hub .dn-ic {
      background: #fff;
      box-shadow: 0 2px 10px rgba(47, 111, 224, .18)
    }

    .dn.you {
      border-top-color: var(--blue-dd)
    }

    .dn .badge {
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      border-radius: 999px;
      padding: 5px 14px;
      background: var(--blue-d);
      color: #fff;
      margin-bottom: 6px
    }

    .dn-arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: var(--blue-d);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-align: center
    }

    .dn-arrow svg {
      width: 48px;
      height: 24px;
      transform: rotate(90deg)
    }

    .power {
      display: grid;
      gap: 22px;
      background: #fff;
      border: 2px solid var(--blue);
      border-radius: var(--r);
      padding: clamp(24px, 4vw, 36px);
      margin: 0 0 44px;
      box-shadow: var(--shadow);
      background-image: linear-gradient(160deg, var(--sky), #fff 60%)
    }

    .power h3 {
      font-size: clamp(1.5rem, 3vw, 1.9rem);
      margin-bottom: .35em
    }

    .power p:last-child {
      margin-bottom: 0;
      color: var(--muted)
    }

    .power-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
      align-content: center
    }

    .power-list li {
      display: flex;
      gap: 12px;
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: 14px 16px;
      font-weight: 600;
      font-size: .97rem;
      line-height: 1.4
    }

    .power-list li::before {
      content: "\2713";
      flex: none;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--blue-d);
      color: #fff;
      font-weight: 900;
      font-size: .85rem
    }

    .match {
      list-style: none;
      padding: 0;
      margin: 14px 0 36px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .match li {
      background: var(--sky);
      border: 1px solid var(--sky-2);
      border-radius: var(--r-sm);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: .93rem
    }

    .match .em {
      font-size: 1.6rem;
      line-height: 1.3;
      margin-bottom: 4px
    }

    .match b {
      font-size: 1.02rem
    }

    .match li span:last-child {
      color: var(--muted)
    }

    .keys {
      display: grid;
      gap: 12px;
      margin: 0 0 20px
    }

    .key {
      background: var(--navy);
      color: #fff;
      border-radius: var(--r);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .key b {
      font-size: 1.5rem;
      line-height: 1.1;
      letter-spacing: -.02em
    }

    .key span {
      color: #cdd8f3;
      font-size: .93rem;
      line-height: 1.5
    }

    #partner .cta-row {
      margin-top: 24px
    }

    /* assessment */
    .facts {
      display: grid;
      gap: 16px;
      margin: 0 0 28px
    }

    .fact {
      background: var(--bg);
      border-radius: var(--r);
      padding: 24px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: .97rem;
      line-height: 1.55
    }

    .fact strong {
      color: var(--ink);
      font-size: 1.05rem;
      letter-spacing: -.01em
    }

    .fact .ic {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: #fff;
      font-size: 1.5rem;
      margin-bottom: 14px;
      box-shadow: var(--shadow-sm)
    }

    /* languages */
    .langs {
      list-style: none;
      padding: 0;
      margin: 0 0 32px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px
    }

    .langs li {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: 9px 16px;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      line-height: 1.3;
      box-shadow: var(--shadow-sm);
      transition: border-color .15s ease, transform .15s ease
    }

    .langs li:hover {
      border-color: var(--blue);
      transform: translateY(-1px)
    }

    .langs small {
      font-weight: 500;
      color: var(--muted);
      font-size: .76rem
    }

    .wanted {
      background: var(--sky);
      border-radius: var(--r);
      padding: 26px 28px;
      border: 1px solid var(--sky-2)
    }

    .wanted strong {
      font-size: 1.1rem;
      letter-spacing: -.01em
    }

    .wanted p {
      color: var(--muted)
    }

    /* who */
    .who {
      display: grid;
      gap: 16px
    }

    .who .card {
      padding: 26px;
      box-shadow: var(--shadow-sm);
      transition: transform .18s ease, box-shadow .18s ease
    }

    .who .card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow)
    }

    .who .card p {
      color: var(--muted);
      font-size: .96rem;
      margin: 0
    }

    .who .em {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: var(--sky);
      font-size: 1.6rem;
      margin-bottom: 16px
    }

    /* proof */
    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 0 0 20px
    }

    .stat {
      background: var(--bg);
      border-radius: var(--r);
      padding: 28px 16px;
      text-align: center;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: .93rem;
      font-weight: 600;
      line-height: 1.3
    }

    .stat b {
      display: block;
      font-size: clamp(1.9rem, 4vw, 2.5rem);
      font-weight: 800;
      color: var(--blue-dd);
      line-height: 1.1;
      margin-bottom: 6px;
      letter-spacing: -.025em
    }

    .cities {
      list-style: none;
      padding: 0;
      margin: 0 0 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .cities li {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: .9rem
    }

    /* faq */
    .faq details {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      margin: 10px 0;
      box-shadow: var(--shadow-sm);
      transition: border-color .15s ease, box-shadow .15s ease
    }

    .faq details:hover {
      border-color: #c4d6f8
    }

    .faq details[open] {
      border-color: var(--blue);
      box-shadow: var(--shadow)
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 60px 18px 22px;
      position: relative;
      min-height: 60px;
      display: flex;
      align-items: center
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq summary h3 {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 700;
      line-height: 1.35
    }

    .faq summary::after {
      content: "+";
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--sky);
      color: var(--blue-dd);
      font-weight: 800;
      font-size: 1.3rem;
      display: grid;
      place-items: center;
      transition: background-color .15s ease, color .15s ease
    }

    .faq details[open] summary::after {
      content: "\2212";
      background: var(--blue-d);
      color: #fff
    }

    .faq .ans {
      padding: 0 22px 22px;
      color: var(--muted);
      font-size: .98rem;
      line-height: 1.7
    }

    .faq .ans p {
      margin: 0 0 .8em
    }

    .faq .ans p:last-child {
      margin: 0
    }

    .faq h3.grp {
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue-dd);
      margin: 44px 0 10px;
      padding-left: 4px
    }

    .faq h2+h3.grp {
      margin-top: 8px
    }

    .faq .more-q {
      margin-top: 32px;
      text-align: center;
      color: var(--muted)
    }

    /* final */
    .final {
      background: linear-gradient(135deg, var(--blue-d), #5a9bff);
      color: #fff;
      border-radius: 32px;
      padding: clamp(40px, 7vw, 72px) clamp(22px, 5vw, 48px);
      text-align: center;
      box-shadow: 0 24px 50px rgba(47, 111, 224, .28)
    }

    .final h2 {
      color: #fff
    }

    .final p {
      color: #eaf2ff;
      font-size: 1.08rem
    }

    .final .btn-primary {
      background: #fff;
      color: var(--blue-dd);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .16)
    }

    .final .btn-primary:hover {
      background: var(--sky)
    }

    .final .btn-ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255, 255, 255, .65)
    }

    .final .btn-ghost:hover {
      background: rgba(255, 255, 255, .12);
      border-color: #fff
    }

    .final .cta-row {
      justify-content: center
    }

    .final .todo-chip {
      background: rgba(255, 255, 255, .92)
    }

    /* footer */
    footer {
      background: var(--navy);
      color: #cdd8f3;
      padding: 44px 0;
      margin-top: clamp(40px, 6vw, 72px);
      font-size: .94rem
    }

    footer a {
      color: #fff;
      text-decoration: none;
      opacity: .92
    }

    footer a:hover {
      opacity: 1;
      text-decoration: underline
    }

    footer ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
      padding: 0;
      margin: 0 0 16px
    }

    footer ul+ul {
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, .1)
    }

    .sticky-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      background: rgba(255, 255, 255, .92);
      border-top: 1px solid var(--line);
      z-index: 50;
      transition: transform .25s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-sizing: border-box;
      width: 100%;
      max-width: 100vw;
      overflow: hidden
    }

    .sticky-cta .btn {
      width: 100%;
      box-sizing: border-box
    }

    .sticky-cta.hide {
      transform: translateY(110%)
    }

    /* --- DESKTOP FLOATING STICKY BUTTON WITH MAGIC SPARKLING EFFECT --- */
    .desktop-floating-cta {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: 32px;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, 40px) scale(0.85);
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.4s;
    }

    .desktop-floating-cta.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0) scale(1);
    }

    .sparkle-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 28px;
      background: linear-gradient(135deg, #0284c7, #2563eb);
      color: #ffffff;
      font-family: inherit;
      font-size: 1.05rem;
      font-weight: 700;
      text-decoration: none;
      border-radius: 999px;
      box-shadow: 0 10px 30px rgba(2, 132, 199, 0.4), 0 4px 12px rgba(37, 99, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
      overflow: visible;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .sparkle-btn:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 16px 36px rgba(2, 132, 199, 0.5), 0 6px 16px rgba(37, 99, 235, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6);
      color: #ffffff;
    }

    .shimmer-sweep {
      position: absolute;
      top: 0;
      left: -100%;
      width: 70%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transform: skewX(-20deg);
      border-radius: 999px;
      pointer-events: none;
      animation: shimmerSweep 3.5s infinite;
    }

    @keyframes shimmerSweep {
      0% {
        left: -100%;
      }

      35% {
        left: 180%;
      }

      100% {
        left: 180%;
      }
    }

    .sparkle-icon {
      position: relative;
      display: inline-block;
      width: 22px;
      height: 22px;
    }

    .star-svg {
      position: absolute;
      color: #fde047;
      filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.8));
    }

    .star-1 {
      width: 20px;
      height: 20px;
      top: 0;
      left: 0;
      animation: starPulse 1.8s ease-in-out infinite;
    }

    .star-2 {
      width: 12px;
      height: 12px;
      top: -8px;
      right: -8px;
      animation: starFloat 2.2s ease-in-out infinite 0.4s;
    }

    .star-3 {
      width: 9px;
      height: 9px;
      bottom: -4px;
      right: -6px;
      animation: starFloat 2s ease-in-out infinite 0.9s;
    }

    @keyframes starPulse {

      0%,
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }

      50% {
        transform: scale(1.25) rotate(45deg);
        opacity: 0.8;
        filter: drop-shadow(0 0 8px rgba(250, 204, 21, 1));
      }
    }

    @keyframes starFloat {

      0%,
      100% {
        transform: translate(0, 0) scale(0.8);
        opacity: 0.4;
      }

      50% {
        transform: translate(-2px, -3px) scale(1.2);
        opacity: 1;
      }
    }

    @media (max-width: 859px) {
      .desktop-floating-cta {
        display: none !important;
      }
    }



    /* ====== CALCULATOR ====== */
    .calc {
      background: radial-gradient(1200px 500px at 90% -10%, rgba(44, 70, 144, .82) 0%, transparent 60%), rgba(22, 36, 74, .88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #fff;
      position: relative;
      z-index: 2;
      overflow: hidden
    }

    .calc h2 {
      color: #fff
    }

    .calc-grid {
      display: grid;
      gap: 0;
      margin-top: 0;
      align-items: start
    }

    .calc-in {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-self: start;
      height: auto
    }

    .calc-link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 96px;
      color: #fff
    }

    .calc-link::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      border-left: 2px dashed rgba(255, 255, 255, .45)
    }

    .cl-dot {
      position: relative;
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #fff;
      color: var(--blue-d);
      box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 12px 26px rgba(0, 0, 0, .35)
    }

    .cl-dot svg {
      width: 22px;
      height: 22px;
      transform: rotate(90deg)
    }

    .cl-txt {
      position: absolute;
      left: calc(50% + 40px);
      top: 50%;
      transform: translateY(-50%);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #cfe0ff;
      white-space: nowrap
    }

    .calc-link.pulse .cl-dot {
      animation: cdot .8s ease-out
    }

    .calc-out.pulse {
      animation: cflash .8s ease-out
    }

    @keyframes cdot {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .75), 0 12px 26px rgba(0, 0, 0, .35);
        transform: scale(1.12)
      }

      100% {
        box-shadow: 0 0 0 18px rgba(255, 255, 255, 0), 0 12px 26px rgba(0, 0, 0, .35);
        transform: scale(1)
      }
    }

    @keyframes cflash {
      0% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 24px 50px rgba(0, 0, 0, .25)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 24px 50px rgba(0, 0, 0, .25)
      }
    }

    .calc .card {
      color: var(--ink);
      border: none;
      box-shadow: 0 24px 50px rgba(0, 0, 0, .25)
    }

    .ctl {
      margin-bottom: 32px
    }

    .ctl:last-child {
      margin-bottom: 0
    }

    .ctl label {
      display: block;
      font-weight: 700;
      font-size: 1.05rem;
      line-height: 1.35;
      margin-bottom: 16px
    }

    .stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px
    }

    .step {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: var(--sky);
      color: var(--blue-dd);
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      flex: none;
      font-family: inherit;
      transition: background-color .15s ease, transform .1s ease
    }

    .step:hover {
      background: var(--sky-2)
    }

    .step:active {
      transform: scale(.94)
    }

    .bigval {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      column-gap: 4px;
      flex: 1;
      min-width: 0;
      border-bottom: 3px solid var(--blue);
      padding-bottom: 4px
    }

    .bigval .cur {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--blue-dd)
    }

    .bigval input {
      width: 5.5ch;
      max-width: 100%;
      border: none;
      background: transparent;
      font: inherit;
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--ink);
      text-align: center;
      padding: 0;
      -moz-appearance: textfield;
      appearance: textfield;
      min-width: 0;
      letter-spacing: -.02em
    }

    .bigval input::-webkit-outer-spin-button,
    .bigval input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0
    }

    .bigval .unit {
      flex-basis: 100%;
      text-align: center;
      font-size: .92rem;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.2
    }

    .bigval input:focus-visible {
      outline-offset: 6px
    }

    .no-js .step,
    .no-js input[type=range] {
      display: none
    }

    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--blue) var(--pct, 30%), var(--sky-2) var(--pct, 30%));
      outline-offset: 8px;
      margin: 6px 0 4px
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #fff;
      border: 6px solid var(--blue-d);
      box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
      cursor: grab
    }

    input[type=range]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      border: 6px solid var(--blue-d);
      box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
      cursor: grab
    }

    .trust {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-top: 32px
    }

    .trust .tcard {
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .trust .t-ic {
      flex: none;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: var(--sky);
      font-size: 1.5rem
    }

    .trust h3 {
      margin: 0 0 6px;
      font-size: 1.1rem;
      color: var(--ink);
      line-height: 1.3
    }

    .trust p {
      margin: 0;
      color: var(--muted);
      font-size: .98rem;
      line-height: 1.55
    }

    @media (max-width:700px) {
      .trust {
        grid-template-columns: 1fr
      }
    }

    .result-head {
      font-size: clamp(1.3rem, 3.6vw, 1.65rem);
      font-weight: 800;
      line-height: 1.28;
      margin: 0 0 8px;
      color: var(--ink);
      letter-spacing: -.015em
    }

    .result-head .m {
      color: var(--blue-d)
    }

    .result-sub {
      color: var(--muted);
      margin: 0 0 22px;
      font-size: .97rem
    }

    .tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 8px
    }

    .tile {
      background: var(--sky);
      border-radius: var(--r-sm);
      padding: 16px 18px;
      display: flex;
      flex-direction: column
    }

    .tile .tn {
      font-size: 1.65rem;
      font-weight: 800;
      line-height: 1.1;
      color: var(--blue-dd);
      letter-spacing: -.02em
    }

    .tile .tl {
      font-size: .88rem;
      color: var(--muted);
      margin-top: 4px;
      line-height: 1.35
    }

    .calc-math {
      margin: 0 0 6px;
      border-top: 1px solid var(--line);
      padding-top: 16px
    }

    .cm-h {
      margin: 0 0 12px;
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue-dd)
    }

    .cm-eq {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 10px 12px;
      font-variant-numeric: tabular-nums
    }

    .cm-t {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .cm-t small {
      font-size: .76rem;
      font-weight: 700;
      color: var(--muted)
    }

    .cm-t b {
      font-size: 1.4rem;
      line-height: 1.2;
      color: var(--navy);
      font-weight: 800
    }

    .cm-t b.pos {
      color: #13803c
    }

    .cm-t b.neg {
      color: #c62828
    }

    .cm-op {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--muted);
      line-height: 1.2
    }

    .cm-fn {
      margin: 12px 0 0;
      font-size: .84rem;
      color: var(--muted)
    }

    .tile-note {
      font-size: .84rem;
      font-weight: 600;
      color: var(--muted);
      margin: 8px 0 20px
    }

    .chart {
      margin: 0 0 20px
    }

    .chart svg {
      display: block;
      width: 100%;
      height: auto
    }

    .chart figcaption {
      font-size: .84rem;
      color: var(--muted);
      margin-top: 6px
    }

    .calc-notes {
      margin-top: 24px;
      padding: clamp(20px, 3vw, 28px)
    }

    .nt-h {
      margin: 0 0 6px;
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue-dd)
    }

    .calc-notes .disclaimer {
      margin: 0;
      background: none;
      border: none;
      padding: 0;
      font-size: .95rem;
      font-weight: 500;
      line-height: 1.6;
      color: var(--muted)
    }

    .calc-p15 {
      margin: 18px 0 0
    }

    .calc .tofill {
      background: rgba(255, 255, 255, .94)
    }

    /* wider screens */
    @media (min-width:640px) {
      .who {
        grid-template-columns: 1fr 1fr
      }

      .facts {
        grid-template-columns: repeat(3, 1fr)
      }

      .stats {
        grid-template-columns: repeat(4, 1fr)
      }

      .path2 {
        grid-template-columns: 1fr 1fr
      }

      .keys {
        grid-template-columns: repeat(3, 1fr)
      }

      .match {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media (min-width:860px) {
      .nav {
        display: flex
      }

      .chips {
        grid-template-columns: repeat(4, 1fr)
      }

      .calc-grid {
        grid-template-columns: .85fr 100px 1.15fr;
        align-items: start
      }

      .calc-link {
        height: auto;
        align-self: stretch
      }

      .calc-link::before {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        border-left: none;
        border-top: 2px dashed rgba(255, 255, 255, .45)
      }

      .cl-dot svg {
        transform: none
      }

      .cl-txt {
        left: 50%;
        top: calc(50% + 38px);
        transform: translateX(-50%);
        width: 84px;
        white-space: normal;
        text-align: center;
        line-height: 1.3
      }

      .demand {
        grid-template-columns: 1fr auto 1fr auto 1fr
      }

      .dn-arrow svg {
        transform: none
      }

      .power {
        grid-template-columns: 1.1fr 1fr;
        gap: 40px;
        align-items: center
      }

      .pcard.primary {
        grid-template-columns: 1.5fr 1fr;
        gap: 40px
      }

      .pcard.primary .p-side {
        padding-left: 40px;
        border-left: 1px solid var(--sky-2)
      }

      .sticky-cta {
        display: none
      }

      body {
        padding-bottom: 0
      }
    }

    @media (min-width:980px) {
      .journey {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px
      }

      .journey::before {
        left: 12.5%;
        right: 12.5%;
        top: 28px;
        bottom: auto;
        width: auto;
        height: 4px;
        background: linear-gradient(90deg, var(--sky-2), var(--blue) 45%, var(--blue-dd))
      }

      .jstep {
        flex-direction: column;
        align-items: center;
        text-align: center
      }

      .jnum {
        width: 60px;
        height: 60px
      }

      .jbody {
        width: 100%;
        margin-top: 22px;
        padding-top: 26px
      }

      .jbody::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        background: #fff;
        border-left: 1px solid var(--line);
        border-top: 1px solid var(--line);
        transform: rotate(45deg)
      }

      .jstep.goal .jbody::before {
        background: var(--blue-d);
        border-color: transparent
      }

      .jic {
        margin-left: auto;
        margin-right: auto
      }

      .who {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media (max-width:859px) {
      .pcard.primary .p-side {
        padding-top: 18px;
        border-top: 1px solid var(--sky-2)
      }
    }

    @media (max-width:639px) {
      .tbl-wrap {
        box-shadow: var(--shadow-sm)
      }

      .tbl,
      .tbl thead,
      .tbl tbody,
      .tbl tr,
      .tbl th,
      .tbl td {
        display: block
      }

      .tbl thead {
        position: absolute;
        left: -9999px
      }

      .tbl tbody tr {
        padding: 18px 0
      }

      .tbl tbody tr+tr {
        border-top: 8px solid var(--sky)
      }

      .tbl tbody tr+tr>* {
        border-top: none
      }

      .tbl th,
      .tbl td {
        padding: 6px 20px
      }

      .tbl tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        text-align: right
      }

      .tbl tbody td::before {
        content: attr(data-l);
        flex: none;
        text-align: left;
        font-weight: 800;
        font-size: .76rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--blue-dd)
      }

      .tbl td.sy {
        flex-wrap: wrap;
        padding-top: 12px;
        white-space: normal
      }

      .tbl td.sy::before {
        content: none
      }

      .sy-btn {
        flex: 1 1 100%;
        justify-content: center
      }

      .pop {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 12px;
        box-shadow: none;
        background: var(--bg)
      }

      .pop::before {
        display: none
      }

      .pop .lvls li {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 18px
      }

      .pop .tofill {
        margin: 12px 18px 18px
      }

      .top .btn {
        display: none
      }

      .lvls li {
        grid-template-columns: 1fr;
        gap: 8px
      }

      .highlight {
        flex-direction: column;
        gap: 12px
      }

      .cta-row .btn {
        width: 100%
      }

      .final .cta-row .btn {
        width: 100%
      }
    }

    /* free platform banner + feature popover */
    .plat {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 22px;
      padding: 16px 18px;
      border-radius: var(--r-sm);
      background: #fff;
      border: 1.5px dashed var(--blue)
    }

    .plat-ic {
      display: grid;
      place-items: center;
      flex: none;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: var(--sky);
      font-size: 1.4rem
    }

    .pcard.primary .plat-t {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin: 0;
      font-size: .92rem;
      line-height: 1.45;
      color: var(--muted)
    }

    .plat-t strong {
      color: var(--ink);
      font-size: 1rem;
      white-space: normal;
      word-break: break-word
    }

    .pop-wrap {
      position: relative;
      display: inline-block
    }

    .pop.free {
      top: calc(100% + 12px);
      left: 0;
      right: auto;
      width: min(470px, calc(100vw - 32px))
    }

    .pop.free::before {
      left: var(--cx, 40px)
    }

    .pcard.primary .pop p.pop-t {
      color: var(--ink)
    }

    .feats {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .feats li {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 13px 20px;
      border-top: 1px solid var(--line)
    }

    .fe-i {
      flex: none;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--sky);
      font-size: 1.15rem
    }

    .feats b {
      display: block;
      font-size: .97rem;
      line-height: 1.3;
      color: var(--ink)
    }

    .fe-d {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.45
    }

    .feats li:last-child {
      border-radius: 0 0 20px 20px
    }

    /* stage 4 */
    .stage4 {
      margin: 26px 0 0;
      border: 1.5px dashed #b9cff7;
      border-radius: var(--r);
      background: rgba(255, 255, 255, .7);
      padding: 16px 20px;
      transition: background-color .2s ease, border-color .2s ease
    }

    .stage4[open] {
      background: #fff;
      border-style: solid;
      border-color: var(--blue);
      box-shadow: var(--shadow)
    }

    .stage4 summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px
    }

    .stage4 summary::-webkit-details-marker {
      display: none
    }

    .s4-ic {
      display: grid;
      place-items: center;
      flex: none;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--sky);
      font-size: 1.2rem
    }

    .s4-tag {
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue-dd);
      background: var(--sky);
      border-radius: 999px;
      padding: 4px 11px
    }

    .s4-t {
      font-weight: 700;
      color: var(--ink);
      font-size: 1rem
    }

    .s4-more {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1.5px solid #c4d6f8;
      background: #fff;
      color: var(--blue-dd);
      font-weight: 700;
      font-size: .88rem;
      transition: background-color .15s ease
    }

    .stage4 summary:hover .s4-more {
      background: var(--sky)
    }

    .s4-more svg {
      width: 14px;
      height: 14px;
      transition: transform .2s ease
    }

    .s4-lbl::after {
      content: "Show more"
    }

    .stage4[open] .s4-lbl::after {
      content: "Show less"
    }

    .stage4[open] .s4-more svg {
      transform: rotate(180deg)
    }

    .s4-card {
      margin-top: 18px;
      padding: clamp(20px, 3vw, 30px);
      border-radius: 20px;
      color: #fff;
      background: radial-gradient(520px 260px at 90% -20%, rgba(90, 155, 255, .45), transparent 62%), linear-gradient(145deg, var(--navy), #22366f);
      animation: popin .25s ease-out
    }

    .s4-lead {
      margin: 0 0 16px;
      font-weight: 700;
      font-size: 1.05rem;
      color: #dbe8ff
    }

    .s4-grid {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .s4-grid li {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2)
    }

    .s4-grid b {
      font-size: .98rem;
      line-height: 1.3
    }

    .s4-i {
      flex: none;
      display: grid;
      place-items: center;
      min-width: 52px;
      height: 46px;
      padding: 0 8px;
      border-radius: 13px;
      background: linear-gradient(145deg, #f8e8b0, #d4aa4f);
      color: #5c410b;
      font: 800 .9rem/1 system-ui, sans-serif;
      letter-spacing: -.01em
    }

    @media (min-width:760px) {
      .s4-grid {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media (max-width:639px) {
      .s4-more {
        margin-left: 0
      }
    }

    /* assessment + sample certificate */
    .assess-grid {
      display: grid;
      gap: 36px;
      align-items: center;
      margin-bottom: 8px
    }

    .assess-l .facts {
      grid-template-columns: 1fr;
      gap: 12px
    }

    .assess-l .fact {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 18px 20px
    }

    .assess-l .fact .ic {
      flex: none;
      margin: 0
    }

    .cert-stage {
      position: relative;
      margin: 0;
      border-radius: 28px;
      padding: clamp(22px, 5vw, 52px) clamp(16px, 4vw, 44px) 22px;
      background: radial-gradient(520px 300px at 18% -5%, rgba(90, 155, 255, .38), transparent 60%), radial-gradient(460px 280px at 100% 105%, rgba(246, 227, 161, .2), transparent 60%), linear-gradient(145deg, var(--navy), #22366f);
      box-shadow: var(--shadow);
      overflow: hidden
    }

    .cert-stage figcaption {
      margin-top: 22px;
      text-align: center;
      color: #cdd8f3;
      font-size: .88rem
    }

    .cert {
      container-type: inline-size;
      max-width: 640px;
      margin: 0 auto;
      transition: transform .5s ease;
      filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .5))
    }

    .cert-frame {
      position: relative;
      display: flex;
      overflow: hidden;
      font-size: 7.5px;
      font-size: max(7px, 1.8cqw);
      padding: .9em;
      border-radius: .7em;
      background: linear-gradient(135deg, #f8e8b0, #c9a24b 35%, #f3dc92 55%, #b6862a)
    }

    .cert-frame::after {
      content: "";
      position: absolute;
      inset: -30%;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
      transform: translateX(-120%);
      animation: shine 7s ease-in-out infinite
    }

    @keyframes shine {

      0%,
      55% {
        transform: translateX(-120%)
      }

      100% {
        transform: translateX(120%)
      }
    }

    .cert-paper {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 1.9em 3em 1.6em;
      border-radius: .35em;
      overflow: hidden;
      color: #1d2a44;
      font-family: Georgia, "Times New Roman", serif;
      background: radial-gradient(circle at 50% 0, rgba(66, 133, 244, .08), transparent 55%), repeating-radial-gradient(circle at 50% 130%, transparent 0 1.1em, rgba(201, 162, 75, .08) 1.1em 1.2em), #fffdf6
    }

    .cert-paper::before {
      content: "";
      position: absolute;
      inset: .8em;
      border: .16em solid rgba(201, 162, 75, .8);
      border-radius: .25em;
      pointer-events: none
    }

    .cert-paper::after {
      content: "";
      position: absolute;
      inset: 1.3em;
      border: .06em solid rgba(201, 162, 75, .55);
      pointer-events: none
    }

    .cert-wm {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font: 900 9em/1 system-ui, sans-serif;
      letter-spacing: .1em;
      color: rgba(47, 111, 224, .07);
      transform: rotate(-22deg);
      pointer-events: none
    }

    .cert-head {
      position: relative;
      z-index: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1em
    }

    .cert-brand {
      display: flex;
      align-items: center;
      gap: .6em;
      font: 800 1.5em/1 system-ui, sans-serif;
      letter-spacing: .01em;
      color: #1f56bd
    }

    .cert-brand img {
      width: 2.2em;
      height: 2.2em;
      border-radius: .4em
    }

    .cert-title {
      position: relative;
      z-index: 1;
      margin: .9em 0 .35em;
      font-size: 2.7em;
      line-height: 1.12;
      font-weight: 700;
      letter-spacing: .005em;
      color: #16244a;
      text-wrap: balance
    }

    .cert-rule {
      position: relative;
      z-index: 1;
      display: block;
      width: 34%;
      height: .14em;
      margin: 0 0 .7em;
      background: linear-gradient(90deg, transparent, #c9a24b, transparent)
    }

    .cert-line {
      position: relative;
      z-index: 1;
      margin: 0;
      font-style: italic;
      font-size: 1.45em;
      color: #52607b
    }

    .cert-name {
      position: relative;
      z-index: 1;
      margin: .1em 0 .35em;
      padding: 0 1.6em .1em;
      font-style: italic;
      font-size: 3.4em;
      line-height: 1.2;
      color: #1f56bd;
      border-bottom: .07em solid rgba(201, 162, 75, .9)
    }

    .cert-body {
      position: relative;
      z-index: 1;
      margin: 0 auto;
      max-width: 42em;
      font-size: 1.4em;
      line-height: 1.5;
      color: #3a4763
    }

    .cert-foot {
      position: relative;
      z-index: 1;
      margin-top: auto;
      padding-top: .6em;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: end;
      gap: 1em;
      font-family: system-ui, sans-serif
    }

    .cert-meta {
      display: grid;
      text-align: left;
      font-size: 1em;
      line-height: 1.35
    }

    .cert-meta span {
      font-size: .8em;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #7a869f
    }

    .cert-meta b {
      font-size: 1.15em;
      margin-bottom: .35em;
      color: #1d2a44
    }

    .cert-seal svg {
      display: block;
      width: 6.6em;
      height: auto;
      filter: drop-shadow(0 .3em .4em rgba(120, 86, 18, .35))
    }

    .cert-sig {
      display: grid;
      justify-items: end;
      text-align: right
    }

    .cert-sig svg {
      width: 10em;
      height: 3em
    }

    .cert-sig span {
      border-top: .1em solid #1d2a44;
      padding-top: .3em;
      font-size: .95em;
      color: #52607b;
      white-space: nowrap
    }

    @media (min-width:640px) {
      .cert-frame {
        aspect-ratio: 1.414/1
      }
    }

    @media (min-width:980px) {
      .assess-grid {
        grid-template-columns: .9fr 1.3fr;
        gap: 44px
      }

      .cert-stage {
        padding: 36px 26px 20px
      }

      .cert {
        transform: perspective(1400px) rotateY(-7deg) rotateX(3deg)
      }

      .cert:hover {
        transform: none
      }
    }

    @media (max-width:639px) {
      .plat {
        gap: 12px;
        padding: 14px 16px
      }

      .plat-ic {
        flex: 0 0 44px;
        width: 44px;
        height: 44px
      }

      .pcard.primary .plat-t {
        flex: 1 1 0 !important;
        min-width: 0 !important
      }

      .pop-wrap {
        display: block;
        flex: 1 1 100%
      }

      .pop.free {
        position: static;
        width: 100%;
        margin-top: 12px;
        box-shadow: none;
        background: var(--bg)
      }

      .pop.free::before {
        display: none
      }

      .plat .sy-btn {
        width: 100%;
        justify-content: center
      }

      .calc-link {
        height: 84px
      }

      .jstep {
        gap: 14px
      }

      .jnum {
        width: 52px;
        height: 52px;
        font-size: 1.4rem
      }

      .journey::before {
        left: 25px
      }
    }

    /* calculator: reveal + extras */
    .calc-grid {
      position: relative;
      display: grid;
      grid-template-columns: .85fr 100px 1.15fr;
      align-items: start;
      width: 100%
    }

    .fee-hint {
      margin: 20px 0 16px;
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--sky);
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.55
    }

    .fee-hint a {
      font-weight: 700;
      color: var(--blue-dd)
    }

    .fee-hint b {
      color: var(--navy);
      font-weight: 800
    }

    .tile-tag {
      align-self: flex-start;
      margin-bottom: 8px;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--blue-d);
      color: #fff;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .tile {
      background: var(--sky);
      border: 1px solid rgba(83, 144, 217, 0.18);
      border-radius: var(--r-sm);
      padding: 16px 18px;
      display: flex;
      flex-direction: column
    }

    .ctl-last {
      transition: margin .5s ease
    }

    .calc-go-wrap {
      overflow: hidden;
      max-height: 140px;
      padding: 2px 0 16px;
      margin-bottom: -12px;
      transition: max-height .5s ease, opacity .35s ease
    }

    .calc-go {
      width: 100%;
      min-height: 56px;
      font-size: 1.05rem
    }

    .calc-grid.open .calc-go-wrap {
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      transition: max-height .5s ease, opacity .35s ease, visibility 0s .5s
    }

    .calc-grid.open .ctl-last {
      margin-bottom: 0
    }

    .no-js .calc-go-wrap {
      display: none
    }

    /* Calculator Card: Centered initially, slides smoothly to left on Calculate */
    .calc-in {
      transition: transform .8s cubic-bezier(.16, 1, .3, 1);
      will-change: transform
    }

    .calc-grid:not(.open) .calc-in {
      transform: translateX(var(--shift, 0))
    }

    .calc-grid.open .calc-in {
      transform: translateX(0)
    }

    .calc-link {
      transition: opacity .5s ease .25s, transform .7s cubic-bezier(.16, 1, .3, 1) .2s;
      will-change: transform, opacity
    }

    .calc-grid:not(.open) .calc-link {
      opacity: 0;
      transform: scale(.85);
      pointer-events: none;
      visibility: hidden;
      transition: opacity .3s ease, transform .4s ease, visibility 0s .3s
    }

    .calc-grid.open .calc-link {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      visibility: visible
    }

    .calc-out {
      align-self: start;
      height: auto;
      transition: opacity .6s ease .18s, transform .8s cubic-bezier(.16, 1, .3, 1) .15s, max-height .8s ease;
      will-change: transform, opacity
    }

    .calc-grid:not(.open) .calc-out {
      opacity: 0;
      transform: translateX(60px);
      pointer-events: none;
      visibility: hidden;
      max-height: 0;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      overflow: hidden;
      border: none !important;
      transition: opacity .3s ease, transform .5s ease, visibility 0s .3s, max-height .5s ease
    }

    .calc-grid.open .calc-out {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
      visibility: visible;
      max-height: 2000px;
      overflow: visible
    }

    .js .calc-grid:not(.open)+.calc-notes {
      display: none
    }

    .calc-grid.open+.calc-notes {
      animation: enterup .7s cubic-bezier(.2, .8, .2, 1) .45s both
    }

    @keyframes enterup {
      from {
        opacity: 0;
        transform: translateY(40px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @media (max-width: 859px) {
      .calc-grid {
        grid-template-columns: 1fr !important;
        gap: 16px
      }

      .calc-grid:not(.open) .calc-in {
        transform: none !important;
        max-width: 100%
      }

      .calc-grid.open .calc-in {
        transform: none !important
      }

      .calc-grid:not(.open) .calc-link,
      .calc-grid:not(.open) .calc-out {
        display: none !important
      }

      .calc-grid.open .calc-link,
      .calc-grid.open .calc-out {
        animation: enterup .7s cubic-bezier(.2, .8, .2, 1) both
      }
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important
      }
    }

    /* --- NAVBAR (Replicated from home.html) --- */
    .nav-container {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      backdrop-filter: blur(0px);
      z-index: 100;
    }

    .navigation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1300px;
      margin: 0 auto;
      padding: 50px 1rem;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #2b2d42;
      font-weight: 700;
      font-size: 1.2rem;
      gap: 8px;
    }

    .nav-logo img {
      width: auto;
      height: 60px;
      max-width: 60px;
      border-radius: 10px;
      object-fit: contain;
    }

    .nav-logo img.is-branded {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      object-fit: cover;
    }

    .nav-brand-name {
      font-size: 1.35rem;
      font-weight: 700;
      color: #4a5d7e;
      letter-spacing: -0.02em;
      white-space: nowrap;
      user-select: none;
      transition: color 0.2s ease;
    }

    .nav-logo:hover .nav-brand-name {
      color: #5390d9;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .nav-link {
      text-decoration: none;
      color: #2b2d42;
      font-weight: 400;
      font-size: 1.1rem;
      transition: color 0.3s ease, transform 0.2s ease;
      position: relative;
    }

    .nav-link:hover {
      color: #5390d9;
      transform: translateY(-2px);
    }

    /* --- MOBILE SPECIFIC NAVBAR & OVERLAY (From home.html) --- */
    .mobile-menu-btn {
      display: none;
    }

    .mobile-nav-overlay {
      display: none;
    }

    @media (max-width: 768px) {
      .nav-container {
        padding: 20px 0;
        position: relative;
        z-index: 4000;
        pointer-events: none;
      }

      .navigation {
        padding: 50px 1rem 20px 0;
      }

      .nav-logo,
      .mobile-menu-btn {
        pointer-events: auto;
      }

      .nav-logo {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 16px 5px 10px;
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.65);
        border-left: none;
        border-radius: 0 50px 50px 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
        min-width: 0;
        max-width: calc(100% - 64px);
        font-size: 1rem;
      }

      .nav-logo img {
        width: auto;
        height: 48px;
        max-width: 48px;
        border-radius: 8px;
        object-fit: contain;
        margin-left: 0;
        flex-shrink: 0;
      }

      .nav-logo img.is-branded {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
      }

      .nav-brand-name {
        font-size: 1.2rem;
        font-weight: 700;
        color: #334155;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }

      .nav-links {
        display: none;
      }

      /* Hamburger Button (Square Container) */
      .mobile-menu-btn {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 8px;
        cursor: pointer;
        z-index: 3501;
        gap: 6px;
        transition: all 0.3s ease;
      }

      .mobile-menu-btn span {
        width: 24px;
        height: 2px;
        background-color: #333;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transform-origin: center;
      }

      /* --- Dedicated Close Button inside Overlay --- */
      .mobile-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 5002;
      }

      .mobile-close-btn span {
        position: absolute;
        width: 24px;
        height: 2px;
        background-color: #ffffff;
        transition: all 0.3s ease;
      }

      .mobile-close-btn span:nth-child(1) {
        transform: rotate(45deg);
      }

      .mobile-close-btn span:nth-child(2) {
        transform: rotate(-45deg);
      }

      /* --- Full Screen Overlay --- */
      .mobile-nav-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #4ea8de;
        z-index: 5000;
        overflow-y: auto;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .mobile-nav-overlay.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .mobile-nav-link {
        font-size: 2rem;
        font-weight: 700;
        color: #ffffff;
        text-decoration: none;
        margin: 1.2rem 0;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
      }

      .mobile-nav-overlay.active .mobile-nav-link {
        opacity: 1;
        transform: translateY(0);
      }

      .mobile-nav-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0.8rem 0;
      }

      .mobile-nav-parent {
        font-size: 2rem;
        font-weight: 700;
        color: #ffffff;
        text-decoration: none;
        margin: 0.5rem 0;
        cursor: default;
        user-select: none;
      }

      .mobile-nav-sublist {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0;
        margin: 0.4rem 0 0.8rem;
        list-style: none;
      }

      .mobile-nav-sublink {
        color: #f8fafc;
        text-decoration: none;
        font-size: 1.25rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 18px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.15);
        transition: all 0.2s ease;
      }

      .mobile-nav-sublink::before {
        content: "•";
        color: #bae6fd;
        font-size: 1.2rem;
        line-height: 1;
      }

      .mobile-nav-sublink:hover,
      .mobile-nav-sublink:active {
        background: rgba(255, 255, 255, 0.28);
        color: #ffffff;
        transform: scale(1.03);
      }
    }

    /* --- NAV DROPDOWN (TEACHER SECTION) --- */
    .nav-dropdown {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .nav-dropdown .nav-link,
    .nav-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
    }

    .nav-dropdown-arrow {
      font-size: 0.85rem;
      color: #0284c7;
      transition: transform 0.25s ease;
      opacity: 1;
      margin-left: 2px;
    }

    .nav-dropdown:hover .nav-dropdown-arrow,
    .nav-dropdown.open .nav-dropdown-arrow {
      transform: rotate(180deg);
      opacity: 1;
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      min-width: 250px;
      background: #ffffff;
      border-radius: 14px;
      padding: 8px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15), 0 2px 6px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(226, 232, 240, 0.9);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
      z-index: 1200;
    }

    .dropdown-menu::before {
      content: '';
      position: absolute;
      top: -16px;
      left: 0;
      right: 0;
      height: 16px;
      background: transparent;
    }

    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu,
    .nav-dropdown.open .dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      text-decoration: none;
      color: #1e293b;
      transition: background 0.18s ease;
    }

    .dropdown-item:hover {
      background: #f1f5f9;
    }

    .dropdown-item-icon {
      font-size: 1.15rem;
      color: #0284c7;
      width: 20px;
      text-align: center;
    }

    .dropdown-item-title {
      display: block;
      font-weight: 700;
      font-size: 0.96rem;
      color: #0f172a;
      line-height: 1.25;
    }

    .dropdown-item-desc {
      display: block;
      font-size: 0.8rem;
      color: #64748b;
      line-height: 1.2;
    }

    /* --- FLOATING SCROLL INDICATOR (From home.html) --- */
    .floating-scroll-indicator {
      position: fixed;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 100;
      opacity: 0;
      animation: fadeIn 0.5s ease forwards;
      pointer-events: none;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .scroll-arrow {
      width: 40px;
      height: 40px;
      border-right: 4px solid #5390d9;
      border-bottom: 4px solid #5390d9;
      transform: rotate(45deg);
      animation: scrollArrowBounce 2s infinite;
    }

    .scroll-arrow:nth-child(2) {
      animation-delay: 0.2s;
      opacity: 0.8;
    }

    .scroll-arrow:nth-child(3) {
      animation-delay: 0.4s;
      opacity: 0.6;
    }

    @keyframes scrollArrowBounce {

      0%,
      100% {
        transform: rotate(45deg) translate(-5px, -5px);
      }

      50% {
        transform: rotate(45deg) translate(0, 0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .floating-scroll-indicator.hidden {
      opacity: 0 !important;
      visibility: hidden;
      pointer-events: none;
    }

    /* --- BACKGROUND FLOATING ABACUS & MATH ELEMENTS (From home.html) --- */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, transparent 0%, rgba(193, 193, 193, 0) 70%);
      pointer-events: none;
      z-index: 1;
    }

    .floating-abacus {
      position: fixed;
      width: min(800px, 90vw);
      height: 500px;
      right: -5%;
      top: 50%;
      transform: translateY(-50%) perspective(1000px) rotateY(-20deg);
      -webkit-transform: translateY(-50%) perspective(1000px) rotateY(-20deg);
      z-index: 1;
      pointer-events: none;
    }

    .abacus-frame {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 20px solid rgba(74, 144, 226, 0.61);
      border-radius: 30px;
      box-shadow: 0 0 50px rgba(74, 144, 226, 0.58);
      background: rgba(31, 32, 35, 0);
      -webkit-backdrop-filter: blur(0px);
      backdrop-filter: blur(0px);
    }

    .rod {
      position: absolute;
      width: 100%;
      height: 4px;
      margin-top: -2px;
      background: rgba(74, 144, 226, 0.61);
      left: 0;
      transform-style: preserve-3d;
      z-index: 1;
    }

    .bead {
      position: absolute;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(37, 99, 235, 0.3), #4ea8de);
      cursor: pointer;
      box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
      pointer-events: auto;
      z-index: 2;
    }

    .math-elements {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .math-symbol {
      position: absolute;
      font-family: "Monaco", monospace;
      color: rgba(66, 153, 225, 0.15);
      font-weight: bold;
      pointer-events: none;
    }

    /* --- HERO SECTION & 3D BUTTONS (Matching home.html) --- */
    .hero-section {
      min-height: 100vh;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 2rem;
      background: transparent !important;
      z-index: 2;
    }

    .hero-content {
      max-width: 1200px;
      width: 100%;
      position: relative;
      z-index: 2;
      padding: 0 1rem;
      margin-bottom: clamp(40px, 6vh, 80px);
      text-align: left;
    }

    .hero-title {
      font-size: clamp(3rem, 8vw, 6rem);
      line-height: 1.1;
      margin-bottom: 2rem;
      font-weight: 700;
      color: #2b2d42;
      letter-spacing: -0.02em;
    }

    .hero-subtitle {
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      opacity: 0.8;
      max-width: 800px;
      transform: translateY(30px);
      line-height: 2.2rem;
      margin-bottom: 0;
      color: #4a5d7e;
    }

    .floating-auth-container {
      position: relative;
      margin-top: 2rem;
      z-index: 100;
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    @media (max-width: 768px) {

      html,
      body {
        overflow-x: hidden;
        position: relative;
        width: 100%;
      }

      .hero-section {
        padding: 1rem;
        padding-bottom: max(30px, env(safe-area-inset-bottom, 30px));
        min-height: calc(100vh - env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
      }

      .hero-content {
        margin-top: clamp(-20px, -2vh, 0px);
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .hero-title {
        font-size: clamp(1.5rem, 4.2vh, 2.2rem);
        line-height: 1.15;
        margin-bottom: clamp(0.4rem, 1.2vh, 1rem);
      }

      .hero-subtitle {
        font-size: clamp(0.85rem, 2vh, 1.05rem);
        margin-top: 0;
        margin-bottom: clamp(0.4rem, 1.2vh, 0.8rem);
        line-height: clamp(1.2rem, 2.5vh, 1.45rem);
      }

      /* Floating Abacus Top-Right Positioning & Sizing (Matching home.html) */
      .floating-abacus {
        position: absolute;
        width: 100%;
        height: 35vh;
        right: -25%;
        top: 1%;
        transform: translateY(-70%) perspective(1000px) rotateY(-40deg);
        -webkit-transform: translateY(-70%) perspective(1000px) rotateY(-40deg);
        z-index: 3;
        opacity: 0.7;
      }

      .abacus-frame {
        border-width: 16px;
      }

      .bead {
        width: 26px;
        height: 26px;
        margin-top: -13px !important;
        margin-left: -13px !important;
        touch-action: none;
      }

      /* Floating Auth Container & Buttons (Matching home.html) */
      .floating-auth-container {
        position: relative;
        left: 0;
        transform: none;
        margin-top: clamp(10px, 1.8vh, 20px);
        margin-bottom: 10px;
        width: 100%;
        max-width: 380px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 10px;
        z-index: 100;
      }

      .floating-auth-container.hidden {
        transform: translateY(20px) !important;
        opacity: 0;
        pointer-events: none;
      }

      .floating-auth-btn {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 170px !important;
        height: clamp(48px, 6.2vh, 54px) !important;
        font-size: clamp(0.9rem, 2vh, 1.02rem) !important;
        padding: 0 22px !important;
        white-space: nowrap;
      }

      /* Scroll Indicator on Mobile */
      .floating-scroll-indicator {
        bottom: 30px;
        z-index: 120;
      }

      .scroll-arrow {
        width: 18px;
        height: 18px;
        border-right: 3px solid #5390d9;
        border-bottom: 3px solid #5390d9;
      }
    }

    .floating-auth-btn {
      height: 60px;
      min-width: 200px;
      padding: 0 28px;
      color: white;
      border: none;
      border-radius: 10px;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      transition: all 0.3s ease;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .floating-auth-btn:hover {
      transform: perspective(1000px) rotateX(10deg) translateY(-5px);
      -webkit-transform: perspective(1000px) rotateX(10deg) translateY(-5px);
      color: white;
    }

    .floating-auth-btn::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
      animation: glowRotate 3s linear infinite;
    }

    @keyframes glowRotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .btn-teacher {
      background: linear-gradient(135deg, #6ca0e0, #6dd5fa);
      box-shadow: 0 10px 20px rgba(109, 213, 250, 0.25), 0 6px 6px rgba(109, 213, 250, 0.15);
    }

    .btn-teacher:hover {
      box-shadow: 0 15px 30px rgba(109, 213, 250, 0.35), 0 10px 10px rgba(109, 213, 250, 0.25);
    }

    .btn-student {
      background: linear-gradient(135deg, #5390d9, #4ea8de);
      box-shadow: 0 10px 20px rgba(83, 144, 217, 0.2), 0 6px 6px rgba(83, 144, 217, 0.1), 0 0 100px rgba(83, 144, 217, 0.1);
    }

    .btn-student:hover {
      box-shadow: 0 15px 30px rgba(83, 144, 217, 0.3), 0 10px 10px rgba(83, 144, 217, 0.2), 0 0 150px rgba(83, 144, 217, 0.2);
    }

    .hero-smallprint {
      font-size: 0.9rem;
      color: #64748b;
      margin-top: 2.25rem;
    }

    /* --- START THE BASIC COURSE MODAL (Inspired by test generator) --- */
    .start-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .start-modal[hidden] {
      display: none;
    }

    .start-modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(6px);
    }

    .start-modal-card {
      position: relative;
      background: #ffffff;
      border-radius: 20px;
      max-width: 540px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      padding: 32px 28px;
      box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
      z-index: 2;
      animation: modalPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modalPopIn {
      from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .start-modal-close {
      position: absolute;
      top: 16px;
      right: 18px;
      background: #f1f5f9;
      border: none;
      font-size: 1.5rem;
      line-height: 1;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .start-modal-close:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .start-modal-header {
      text-align: center;
      margin-bottom: 24px;
    }

    .start-modal-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, #e0f2fe, #bae6fd);
      color: #0284c7;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
    }

    .start-modal-title {
      font-size: 1.45rem;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 8px;
    }

    .start-modal-desc {
      font-size: 0.92rem;
      color: #64748b;
      margin: 0;
      line-height: 1.5;
    }

    .start-steps-list {
      display: flex;
      flex-direction: column;
      margin-bottom: 24px;
    }

    .start-step-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .start-step-circle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: #ffffff;
      font-weight: 700;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
    }

    .start-step-circle.done {
      background: linear-gradient(135deg, #10b981, #059669);
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
    }

    .start-step-info h4 {
      font-size: 0.98rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 3px;
    }

    .start-step-info p {
      font-size: 0.85rem;
      color: #64748b;
      margin: 0;
      line-height: 1.45;
    }

    .start-step-line {
      width: 2px;
      height: 18px;
      background: #e2e8f0;
      margin-left: 16px;
      margin-top: 2px;
      margin-bottom: 2px;
    }

    .start-modal-footer {
      display: flex;
      flex-direction: column;
      gap: 14px;
      border-top: 1px solid #f1f5f9;
      padding-top: 18px;
    }

    .start-modal-badge {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 600;
      color: #334155;
    }

    .start-modal-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #ffffff;
      padding: 13px 20px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1.05rem;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .start-modal-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
      color: #fff;
    }

    /* --- CURRICULUM BOXES --- */
    .module-summary-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      margin-top: 14px;
    }

    /* --- CONTACT SECTION (Identical to home.html) --- */
    .contact-section {
      position: relative;
      background: #ffffff;
      padding: 6rem 2rem;
      text-align: center;
      z-index: 20;
      pointer-events: auto !important;
    }

    .section-header {
      text-align: center;
      margin-bottom: 4rem;
      font-size: 2.5rem;
      color: #2b2d42;
      font-weight: 800;
    }

    .contact-grid {
      display: grid;
      gap: 3rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    .contact-card {
      background: rgb(248, 249, 250);
      padding: 2rem;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      z-index: 3;
    }

    .contact-card h3 {
      color: #2b2d42;
      font-size: 1.4rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .qr-placeholder {
      width: 100%;
      max-width: 510px;
      height: auto;
      margin: 2rem auto;
      background: #ffffff;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    .whatsapp-img {
      width: 100%;
      max-width: 490px;
      height: auto;
      object-fit: contain;
      display: block;
    }

    .footer-links-container {
      margin-bottom: 1.5rem;
      text-align: center;
      line-height: 2;
    }

    .footer-links-container a {
      color: #64748b;
      text-decoration: none;
      margin: 0 10px;
      font-size: 0.95rem;
      transition: color 0.2s;
    }

    .footer-links-container a:hover {
      color: #5390d9;
    }

    @media (max-width: 768px) {
      .contact-section {
        padding: 3rem 1rem;
      }

      .contact-grid {
        padding: 0;
        gap: 1.5rem;
        width: 100%;
        box-sizing: border-box;
      }

      .contact-card {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 1.5rem 1rem;
      }

      .qr-placeholder {
        width: 100%;
        max-width: 340px;
        height: auto;
        margin: 1.5rem auto;
        background: #ffffff;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
      }

      .whatsapp-img {
        width: 100%;
        max-width: 320px;
        height: auto;
        object-fit: contain;
        display: block;
      }

      .footer-links-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 12px;
        margin-bottom: 1.5rem;
        line-height: 1.5 !important;
      }
    }