*,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
  }
  
   :root {
      --teal-950: #082F49;
      --teal-900: #0C4A6E;
      --teal-800: #075985;
      --teal-700: #0369A1;
      --teal-600: #0284C7;
      --teal-500: #0EA5E9;
      --teal-400: #38BDF8;
      --teal-300: #7DD3FC;
      --teal-200: #BAE6FD;
      --teal-100: #E0F2FE;
      --teal-50: #F0F9FF;
      --brand: #2C6796;
      --brand-dark: #082F49;
      --brand-mid: #0891B2;
      --brand-light: #CFFAFE;
      --orange: #F97316;
      --orange-dark: #C2410C;
      --orange-light: #FED7AA;
      --amber: #EDCD24;
      --amber-light: #FEF3C7;
      --green: #059669;
      --purple: #7C3AED;
      --red: #DC2626;
      --white: #FFFFFF;
      --gray-950: #030712;
      --gray-900: #111827;
      --gray-800: #1F2937;
      --gray-700: #374151;
      --gray-600: #4B5563;
      --gray-500: #6B7280;
      --gray-400: #9CA3AF;
      --gray-300: #D1D5DB;
      --gray-200: #E5E7EB;
      --gray-100: #F3F4F6;
      --gray-50: #F9FAFB;
      --font-h: 'Roboto', sans-serif;
      --font-b: 'Roboto', sans-serif;
      --r: 12px;
      --rl: 20px;
      --rxl: 28px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  html {
      scroll-behavior: smooth
  }
  
  body {
      font-family: var(--font-b);
      background: var(--white);
      color: var(--gray-900);
      overflow-x: hidden;
      line-height: 1.65
  }
  
  a {
      text-decoration: none;
      color: inherit
  }
  
  img {
      max-width: 100%;
      display: block
  }
  
  strong {
      font-weight: 700
  }
  
  header,
  header.floating {
      display: none !important;
  }
  /* --- MENYEMBUNYIKAN FOOTER --- */
  
  footer.footer,
  .footer {
      display: none !important;
  }
  
  .body-content {
      margin-top: 0px !important;
      position: relative;
      z-index: 1000;
  }
  /* ── PLACEHOLDER IMAGE SYSTEM ── */
  
  .ph {
      background: linear-gradient(135deg, var(--teal-100) 0%, var(--teal-200) 100%);
      /* border:2px dashed var(--teal-400);border-radius:var(--r); */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
      color: var(--brand);
  }
  
  .ph::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, .4) 0%, transparent 60%)
  }
  
  .ph-ico {
      font-size: 32px;
      opacity: .55;
      position: relative
  }
  
  .ph-lbl {
      font-family: var(--font-h);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--brand);
      opacity: .65;
      position: relative;
      text-align: center;
      padding: 0 12px
  }
  
  .ph.dk {
      background: linear-gradient(135deg, var(--teal-900), var(--teal-800));
      border-color: rgba(255, 255, 255, .2);
      color: var(--teal-300)
  }
  
  .ph.dk .ph-lbl {
      color: var(--teal-300)
  }
  
  .ph.rnd {
      border-radius: 50%
  }
  
  .ph.org {
      background: linear-gradient(135deg, #FFF7ED, #FED7AA);
      border-color: var(--orange);
      color: var(--orange)
  }
  
  .ph.org .ph-lbl {
      color: var(--orange)
  }
  /* ── TOP BAR ── */
  
  #tb {
      background: var(--teal-950);
      color: #fff;
      padding: 10px 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 500;
      position: relative
  }
  
  .tb-badge {
      background: var(--orange);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      padding: 3px 12px;
      border-radius: 100px;
      white-space: nowrap
  }
  
  .tb-cd {
      display: flex;
      gap: 6px;
      align-items: center
  }
  
  .tb-cd-box {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 6px;
      padding: 4px 10px;
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 800;
      color: var(--amber);
      min-width: 42px;
      text-align: center;
      line-height: 1
  }
  
  .tb-cd-sep {
      font-weight: 700;
      color: rgba(255, 255, 255, .4)
  }
  
  .tb-cd-lbl {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      margin-top: 2px
  }
  
  .tb-cta {
      background: var(--orange);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 100px;
      white-space: nowrap;
      transition: background .15s
  }
  
  .tb-cta:hover {
      background: var(--orange-dark)
  }
  
  #tb .tbx {
      position: absolute;
      right: 16px;
      background: none;
      border: none;
      color: rgba(255, 255, 255, .4);
      font-size: 18px;
      cursor: pointer
  }
  /* ── NAV ── */
  
  nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 40px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: box-shadow .3s
  }
  
  nav.sc {
      box-shadow: 0 4px 24px rgba(14, 116, 144, .1)
  }
  
  .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 7%;
  }
  
  .nav-logo {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 900;
      color: #fff
  }
  
  .nav-brand-text {
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 700;
      color: var(--gray-900)
  }
  
  .nav-brand-sub {
      font-size: 11px;
      font-weight: 400;
      color: var(--gray-500);
      display: block
  }
  
  .nav-links {
      display: flex;
      gap: 4px
  }
  
  .nav-links a {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 500;
      color: var(--gray-500);
      padding: 6px 13px;
      border-radius: 8px;
      transition: all .15s
  }
  
  .nav-links a:hover {
      background: var(--teal-50);
      color: var(--brand)
  }
  
  .nav-acts {
      display: flex;
      gap: 8px;
      align-items: center
  }
  
  .nav-bos {
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 600;
      color: var(--brand);
      border: 1.5px solid var(--teal-200);
      background: var(--teal-50);
      padding: 7px 14px;
      border-radius: 8px;
      transition: all .15s
  }
  
  .nav-bos:hover {
      border-color: var(--brand);
      background: var(--teal-100)
  }
  
  .nav-daftar {
      background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
      color: #fff;
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      padding: 9px 22px;
      border-radius: 10px;
      transition: all .2s;
      box-shadow: 0 4px 12px rgba(14, 116, 144, .3)
  }
  
  .nav-daftar:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(14, 116, 144, .4);
      color: #082F49;
  }
  
  .button:hover,
  button:hover,
  input[type=button]:hover,
  input[type=reset]:hover,
  input[type=submit]:hover {
      background-color: #FBBF24 !important;
      border-color: #FBBF24;
      color: #064E99 !important;
      outline: 0;
      transition: all ease-out .25s
  }
  /* ── HERO ── */
  /* .hero{background:linear-gradient(135deg,var(--teal-950) 0%,#0C4A6E 40%,#0E7490 100%);padding:88px 40px 96px;position:relative;overflow:hidden} */
  
  .hero {
      background-image: url('https://assets.nyalanesia.id/landing_page/sln/img/hero_bg.webp') !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-position: center center !important;
      background-color: transparent !important;
      overflow: hidden;
      position: relative;
      /* padding-top: 50px; */
      padding: 50px 40px 96px;
  }
  
  .hero::before,
  .hero::after {
      content: '';
      position: absolute;
      border-radius: 50%
  }
  
  .hero::before {
      width: 600px;
      height: 600px;
      right: -150px;
      top: -200px;
      background: radial-gradient(circle, rgba(14, 165, 233, .15) 0%, transparent 70%)
  }
  
  .hero::after {
      width: 400px;
      height: 400px;
      left: -100px;
      bottom: -150px;
      background: radial-gradient(circle, rgba(245, 158, 11, .08) 0%, transparent 70%)
  }
  
  .hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 460px;
      gap: 64px;
      align-items: center;
      position: relative;
      z-index: 1
  }
  
  .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      color: var(--teal-300);
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 100px;
      margin-bottom: 24px
  }
  
  .hero-eyebrow::before {
      content: '●';
      font-size: 7px;
      color: var(--amber);
      animation: pulse 2s ease-in-out infinite
  }
  
  .hero-h {
      font-family: var(--font-h);
      font-size: clamp(40px, 5.5vw, 64px);
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: -1.6px;
      color: #fff;
      margin-bottom: 8px
  }
  
  .hero-h .hl {
      color: var(--amber)
  }
  
  .hero-h2 {
      font-family: var(--font-b);
      font-size: clamp(15px, 1.8vw, 18px);
      font-weight: 400;
      color: rgba(255, 255, 255, .6);
      line-height: 1.65;
      max-width: 540px;
      margin-bottom: 28px
  }
  
  .hero-pain {
      background: rgba(0, 0, 0, .25);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r);
      padding: 18px 20px;
      margin-bottom: 28px
  }
  
  .hero-pain-title {
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 12px
  }
  
  .hero-pain-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px
  }
  
  .hpg-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-b);
      font-size: 13px;
      color: rgba(255, 255, 255, .65)
  }
  
  .hpg-ico {
      font-size: 14px;
      flex-shrink: 0
  }
  
  .hero-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 28px
  }
  
  .hp {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .75);
      font-family: var(--font-b);
      font-size: 13px;
      padding: 6px 14px;
      border-radius: 100px
  }
  
  .hp.acc {
      background: rgba(245, 158, 11, .15);
      border-color: rgba(245, 158, 11, .3);
      color: var(--amber)
  }
  
  .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 24px
  }
  
  .btn-orange {
      background: #EDCD24;
      color: #082F49;
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      padding: 15px 32px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .2s;
      box-shadow: 0 8px 24px rgba(249, 115, 22, .35)
  }
  
  .btn-orange:hover {
      color: var(--brand);
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(249, 115, 22, .5)
  }
  
  .btn-ghost {
      border: 1.5px solid rgba(255, 255, 255, .3);
      color: rgba(255, 255, 255, .85);
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 500;
      padding: 13px 24px;
      border-radius: 12px;
      transition: all .15s
  }
  
  .btn-ghost:hover {
      border-color: rgba(255, 255, 255, .7);
      background: rgba(255, 255, 255, .07);
      color: #fff
  }
  
  .hero-bos {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 12px 16px;
      font-family: var(--font-b);
      font-size: 13px;
      color: rgba(255, 255, 255, .55)
  }
  
  .hero-bos strong {
      color: var(--amber)
  }
  /* HERO RIGHT */
  
  .hero-right {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative
  }
  /* .hero-main-img{width:100%;aspect-ratio:4/5;border-radius:var(--rxl)} */
  
  .hero-main-img {
      width: 100%;
      aspect-ratio: 4/5;
      border-radius: var(--rxl);
      /* Tambahkan ini: 1.2 artinya diperbesar 120%, 1.5 artinya 150%, dst. */
      transform: scale(1.2);
  }
  
  .hero-sm-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
  }
  
  .hero-sm-img {
      width: 100%;
      aspect-ratio: 3/2;
      border-radius: var(--rl)
  }
  
  .hero-float-badge {
      position: absolute;
      bottom: 240px;
      left: -20px;
      background: #fff;
      border-radius: var(--r);
      padding: 14px 18px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 2
  }
  
  .hfb-num {
      font-family: var(--font-h);
      font-size: 28px;
      font-weight: 900;
      color: var(--brand);
      line-height: 1
  }
  
  .hfb-lbl {
      font-family: var(--font-b);
      font-size: 12px;
      color: var(--gray-500);
      line-height: 1.4
  }
  /* ── PROOF STRIP ── */
  
  .proof-strip {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200)
  }
  
  .proof-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(6, 1fr)
  }
  
  .proof-col {
      padding: 24px 16px;
      text-align: center;
      border-right: 1px solid var(--gray-200);
      transition: background .2s
  }
  
  .proof-col:last-child {
      border-right: none
  }
  
  .proof-col:hover {
      background: var(--teal-50)
  }
  
  .proof-num {
      font-family: var(--font-h);
      font-size: clamp(24px, 2.5vw, 32px);
      font-weight: 900;
      color: var(--brand);
      display: block;
      line-height: 1;
      margin-bottom: 6px
  }
  
  .proof-num em {
      font-style: normal;
      color: var(--amber)
  }
  
  .proof-lbl {
      font-family: var(--font-b);
      font-size: 11px;
      color: var(--gray-500);
      line-height: 1.4
  }
  /* ── SECTION BASE ── */
  
  .sec {
      padding: 80px 40px
  }
  
  .sw {
      max-width: 1200px;
      margin: 0 auto
  }
  
  .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--teal-50);
      border: 1px solid var(--teal-200);
      color: var(--brand);
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 16px
  }
  
  .chip.org {
      background: #FFF7ED;
      border-color: var(--orange-light);
      color: var(--orange)
  }
  
  .chip.wh {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(255, 255, 255, .2);
      color: rgba(255, 255, 255, .8)
  }
  
  .sec-h {
      font-family: var(--font-h);
      font-size: clamp(30px, 4vw, 48px);
      font-weight: 900;
      line-height: 1.08;
      color: var(--gray-900);
      margin-bottom: 16px
  }
  
  .sec-h em {
      font-style: normal;
      color: var(--brand)
  }
  
  .sec-h.wh {
      color: #fff
  }
  
  .sec-h.wh em {
      color: var(--amber)
  }
  
  .sec-sub {
      font-family: var(--font-b);
      font-size: 17px;
      font-weight: 400;
      color: var(--gray-500);
      line-height: 1.75;
      max-width: 640px
  }
  /* ── PAIN / SOLUTION ── */
  
  .pain-sec {
      background: var(--gray-50)
  }
  
  .pain-two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-top: 48px
  }
  
  .pain-box {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--rl);
      overflow: hidden;
      transition: box-shadow .3s
  }
  
  .pain-box:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, .08)
  }
  
  .pain-head {
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .04em
  }
  
  .pain-head.bad {
      background: #FEF2F2;
      color: #B91C1C;
      border-bottom: 1px solid #FECACA
  }
  
  .pain-head.good {
      background: var(--teal-50);
      color: var(--brand-dark);
      border-bottom: 1px solid var(--teal-100)
  }
  
  .pain-items {
      padding: 8px 0
  }
  
  .pi {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 24px;
      border-bottom: 1px solid var(--gray-50);
      font-family: var(--font-b);
      font-size: 14px;
      line-height: 1.5;
      transition: background .15s
  }
  
  .pi:last-child {
      border-bottom: none
  }
  
  .pi:hover {
      background: var(--gray-50)
  }
  
  .pi-ico {
      font-size: 16px;
      flex-shrink: 0
  }
  
  .pi-bad {
      color: var(--gray-500)
  }
  
  .pi-good {
      color: var(--gray-700);
      font-weight: 500
  }
  
  .pain-cta-strip {
      background: linear-gradient(135deg, var(--teal-50), var(--teal-100));
      border: 1.5px solid var(--teal-200);
      border-radius: var(--rl);
      padding: 24px 28px;
      margin-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap
  }
  
  .pain-cta-strip .pcs-left {
      width: 70% !important;
      /* Membongkar batas 70% menjadi penuh */
      padding-right: 0 !important;
  }
  
  .pcs-left strong {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 900;
      color: var(--brand-dark);
      display: block;
      margin-bottom: 4px
  }
  
  .pcs-left p {
      font-family: var(--font-b);
      font-size: 14px;
      color: var(--gray-500)
  }
  
  .bos-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--brand);
      color: #fff;
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      padding: 4px 12px;
      border-radius: 100px;
      margin-top: 8px
  }
  /* ── 3 PRINSIP ── */
  
  .prinsip-sec {
      background: linear-gradient(160deg, var(--teal-950) 0%, var(--teal-900) 60%, #0E7490 100%);
      position: relative;
      overflow: hidden
  }
  
  .prinsip-sec::before {
      content: '';
      position: absolute;
      width: 700px;
      height: 700px;
      right: -200px;
      top: -200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(14, 165, 233, .12) 0%, transparent 70%)
  }
  
  .prinsip-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
      position: relative;
      z-index: 1
  }
  
  .prinsip-card {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--rl);
      padding: 32px;
      transition: background .2s, transform .3s var(--ease)
  }
  
  .prinsip-card:hover {
      background: rgba(255, 255, 255, .12);
      transform: translateY(-4px)
  }
  
  .prinsip-ico {
      font-size: 44px;
      margin-bottom: 16px;
      display: block
  }
  
  .prinsip-title {
      font-family: var(--font-h);
      font-size: 24px;
      font-weight: 900;
      color: var(--amber);
      margin-bottom: 12px
  }
  
  .prinsip-desc {
      font-family: var(--font-b);
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.75
  }
  /* ── 6 LITERASI ── */
  
  .lit-sec {
      background: var(--white)
  }
  
  .lit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px
  }
  
  .lit-card {
      border-radius: var(--rl);
      overflow: hidden;
      border: 1px solid var(--gray-200);
      transition: box-shadow .3s, transform .3s var(--ease);
      cursor: pointer
  }
  
  .lit-card:hover {
      box-shadow: 0 20px 48px rgba(0, 0, 0, .1);
      transform: translateY(-4px)
  }
  
  .lit-card-img {
      width: 100%;
      aspect-ratio: 16/9
  }
  
  .lit-card-head {
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 12px
  }
  
  .lit-card-ico {
      font-size: 28px
  }
  
  .lit-card-name {
      font-family: var(--font-h);
      font-size: 18px;
      font-weight: 800
  }
  
  .lit-card-body {
      padding: 0 24px 24px
  }
  
  .lit-card-desc {
      font-family: var(--font-b);
      font-size: 14px;
      color: var(--gray-500);
      line-height: 1.65;
      margin-bottom: 14px
  }
  
  .lit-card-project {
      background: var(--gray-50);
      border-radius: 8px;
      padding: 12px 16px;
      font-family: var(--font-b);
      font-size: 12px;
      color: var(--gray-600);
      line-height: 1.5
  }
  
  .lit-card-project strong {
      display: block;
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: 4px
  }
  /* Literasi colors */
  
  .lit-bt {
      border: 1px solid #DC2626
  }
  
  .lit-bt .lit-card-name {
      color: #DC2626
  }
  
  .lit-num {
      border: 1px solid #7C3AED
  }
  
  .lit-num .lit-card-name {
      color: #7C3AED
  }
  
  .lit-dig {
      border: 1px solid var(--brand)
  }
  
  .lit-dig .lit-card-name {
      color: var(--brand)
  }
  
  .lit-sains {
      border: 1px solid var(--green)
  }
  
  .lit-sains .lit-card-name {
      color: var(--green)
  }
  
  .lit-fin {
      border: 1px solid #8975DB;
  }
  
  .lit-fin .lit-card-name {
      color: #8975DB;
  }
  
  .lit-bud {
      border: 1px solid var(--amber)
  }
  
  .lit-bud .lit-card-name {
      color: #92400E
  }
  /* ── FACILITIES ── */
  
  .fac-sec {
      background: linear-gradient(to bottom, #133D62 48%, #017589 100%);
      position: relative;
      overflow: hidden
  }
  
  .fac-tabs {
      display: flex;
      gap: 4px;
      background: rgba(255, 255, 255, .07);
      border-radius: 12px;
      padding: 4px;
      margin-bottom: 36px
  }
  
  .ftab {
      flex: 1;
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 600;
      padding: 10px 16px;
      border-radius: 9px;
      text-align: center;
      cursor: pointer;
      color: rgba(255, 255, 255, .45);
      transition: all .2s
  }
  
  .ftab.on {
      background: var(--white);
      color: var(--teal-950)
  }
  
  .ftab:hover:not(.on) {
      color: rgba(255, 255, 255, .8);
      background: rgba(255, 255, 255, .1)
  }
  
  .fac-panel {
      display: none;
      grid-template-columns: 1fr 1.1fr;
      gap: 48px;
      align-items: start
  }
  
  .fac-panel.on {
      display: grid
  }
  
  .fac-list {
      display: flex;
      flex-direction: column;
      gap: 10px
  }
  
  .fac-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      padding: 14px 16px;
      transition: background .2s
  }
  
  .fac-row:hover {
      background: rgba(255, 255, 255, .1)
  }
  
  .fac-row-ico {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(245, 158, 11, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0
  }
  
  .fac-row-t {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 2px
  }
  
  .fac-row-s {
      font-family: var(--font-b);
      font-size: 12px;
      color: rgba(255, 255, 255, .4);
      line-height: 1.4
  }
  
  .fac-vis {
      display: flex;
      flex-direction: column;
      gap: 14px
  }
  
  .fac-vis-main {
      width: 100%;
      aspect-ratio: 4/3;
      border-radius: var(--rl)
  }
  
  .fac-vis-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
  }
  
  .fac-vis-sm {
      width: 100%;
      aspect-ratio: 3/2;
      border-radius: var(--r)
  }
  
  .fac-vis-main img,
  .fac-vis-sm img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
  }
  /* ── PRICING ── */
  
  .price-sec {
      background: var(--gray-50)
  }
  
  .price-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px;
      align-items: start
  }
  
  .pc {
      background: var(--white);
      border: 1.5px solid var(--gray-200);
      border-radius: var(--rxl);
      overflow: hidden;
      transition: box-shadow .3s, transform .3s var(--ease)
  }
  
  .pc:hover {
      box-shadow: 0 20px 56px rgba(14, 116, 144, .12);
      transform: translateY(-4px)
  }
  
  .pc.featured {
      border: 2px solid var(--brand);
      position: relative;
      transform: scale(1.03)
  }
  
  .pc.featured:hover {
      transform: scale(1.03) translateY(-4px)
  }
  
  .pc-banner {
      background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
      color: #fff;
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-align: center;
      padding: 10px
  }
  
  .pc-head {
      padding: 28px 24px 20px
  }
  
  .pc-badge {
      display: inline-block;
      font-family: var(--font-h);
      font-size: 20px;
      font-weight: 900;
      color: var(--brand-dark);
      margin-bottom: 12px;
      padding: 6px 14px;
      background: var(--teal-50);
      border-radius: 8px
  }
  
  .pc-name {
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: 12px
  }
  
  .pc-price {
      font-family: var(--font-h);
      font-size: clamp(40px, 4.5vw, 52px);
      font-weight: 900;
      color: var(--teal-900);
      line-height: 1
  }
  
  .pc-price sup {
      font-size: 18px;
      vertical-align: super
  }
  
  .pc-unit {
      font-family: var(--font-b);
      font-size: 13px;
      color: var(--gray-500);
      margin-top: 4px
  }
  
  .pc-max {
      display: inline-block;
      margin-top: 10px;
      background: var(--gray-100);
      border: 1px solid var(--gray-200);
      border-radius: 100px;
      font-family: var(--font-b);
      font-size: 12px;
      font-weight: 500;
      color: var(--gray-500);
      padding: 4px 12px
  }
  
  .pc-div {
      height: 1px;
      background: var(--gray-100);
      margin: 0 24px
  }
  
  .pc-feats {
      padding: 20px 24px
  }
  
  .pcf {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-b);
      font-size: 13px;
      color: var(--gray-600);
      margin-bottom: 10px;
      line-height: 1.5
  }
  
  .pcf-ico {
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px
  }
  
  .pcf.miss {
      opacity: .4;
      text-decoration: line-through
  }
  
  .pc-cta-w {
      padding: 0 24px 24px
  }
  
  .pc-cta {
      display: block;
      text-align: center;
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 700;
      padding: 14px;
      border-radius: 10px;
      transition: all .2s
  }
  
  .pc-cta.out {
      border: 2px solid var(--teal-200);
      color: var(--brand);
      background: var(--teal-50)
  }
  
  .pc-cta.out:hover {
      background: var(--teal-100);
      border-color: var(--brand)
  }
  
  .pc-cta.sol {
      background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
      color: #fff;
      box-shadow: 0 6px 20px rgba(14, 116, 144, .3)
  }
  
  .pc-cta.sol:hover {
      box-shadow: 0 10px 28px rgba(14, 116, 144, .4);
      transform: translateY(-1px)
  }
  /* Comparison table */
  
  .comp-table-wrap {
      margin-top: 32px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--rl);
      overflow: hidden
  }
  
  .comp-table-hd {
      background: var(--teal-950);
      color: #fff;
      padding: 16px 24px;
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700
  }
  
  .ct-scroll {
      overflow-x: auto
  }
  
  table.ct {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px
  }
  
  table.ct th {
      background: var(--teal-50);
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 12px 16px;
      border-right: 1px solid var(--gray-200);
      border-bottom: 1px solid var(--gray-200);
      text-align: center;
      color: var(--brand)
  }
  
  table.ct th:first-child {
      text-align: left;
      background: var(--gray-50);
      color: var(--gray-700)
  }
  
  table.ct th.hl {
      background: var(--amber-light);
      color: #92400E
  }
  
  table.ct td {
      padding: 11px 16px;
      font-family: var(--font-b);
      font-size: 13px;
      border-right: 1px solid var(--gray-100);
      border-bottom: 1px solid var(--gray-100);
      text-align: center;
      vertical-align: middle
  }
  
  table.ct td:first-child {
      text-align: left;
      font-weight: 500;
      color: var(--gray-700);
      background: var(--gray-50)
  }
  
  table.ct tr:last-child td {
      border-bottom: none
  }
  
  .ct-y {
      color: var(--brand);
      font-weight: 700
  }
  
  .ct-n {
      color: var(--gray-300);
      font-size: 18px
  }
  
  .ct-h {
      background: var(--amber-light)!important;
      font-weight: 700;
      color: #92400E
  }
  
  .bos-info-box {
      background: var(--white);
      border: 1.5px solid var(--teal-100);
      border-radius: var(--rl);
      padding: 24px;
      margin-top: 24px;
      display: flex;
      align-items: center;
      gap: 20px
  }
  
  .bos-ico {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: var(--teal-50);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      flex-shrink: 0
  }
  
  .bos-title {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      color: var(--teal-900);
      margin-bottom: 4px
  }
  
  .bos-desc {
      font-family: var(--font-b);
      font-size: 14px;
      color: var(--gray-500);
      line-height: 1.6
  }
  /* ── SURVEY ── */
  
  .survey-sec {
      background: var(--brand-dark)
  }
  
  .survey-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      margin-top: 48px;
      align-items: start
  }
  
  .survey-big {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--rxl);
      padding: 36px;
      text-align: center;
      margin-bottom: 20px
  }
  
  .sv-num {
      font-family: var(--font-h);
      font-size: clamp(64px, 9vw, 96px);
      font-weight: 900;
      color: var(--amber);
      line-height: 1;
      margin-bottom: 8px
  }
  
  .sv-lbl {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px
  }
  
  .sv-sub {
      font-family: var(--font-b);
      font-size: 12px;
      color: rgba(255, 255, 255, .45)
  }
  
  .sv-img {
      width: 100%;
      aspect-ratio: 4/3;
      border-radius: var(--rl)
  }
  
  .sv-bars {
      display: flex;
      flex-direction: column;
      gap: 20px
  }
  
  .sv-bar-row {
      display: flex;
      flex-direction: column;
      gap: 7px
  }
  
  .sv-bar-label {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-b);
      font-size: 14px;
      color: rgba(255, 255, 255, .8)
  }
  
  .sv-bar-pct {
      font-family: var(--font-h);
      font-weight: 700;
      color: var(--amber)
  }
  
  .sv-bar-track {
      height: 9px;
      background: rgba(255, 255, 255, .1);
      border-radius: 100px;
      overflow: hidden
  }
  
  .sv-bar-fill {
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--teal-400), var(--amber));
      transition: width 1.8s var(--ease)
  }
  
  .sv-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 20px
  }
  
  .sv3-card {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r);
      padding: 16px;
      text-align: center
  }
  
  .sv3-num {
      font-family: var(--font-h);
      font-size: 26px;
      font-weight: 900;
      color: var(--amber);
      display: block;
      margin-bottom: 4px
  }
  
  .sv3-lbl {
      font-family: var(--font-b);
      font-size: 12px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.4
  }
  /* ── AWARDS ── */
  
  .award-sec {
      background: linear-gradient(to bottom, #133D62 48%, #017589 100%);
      position: relative;
      overflow: hidden
  }
  
  .award-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      margin-top: 48px;
      align-items: start;
      position: relative;
      z-index: 1
  }
  
  .award-vis {
      display: flex;
      flex-direction: column;
      gap: 16px
  }
  
  .award-main-img {
      width: 100%;
      aspect-ratio: 4/3;
      border-radius: var(--rxl)
  }
  
  .award-podium {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px
  }
  
  .award-rank {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r);
      padding: 16px;
      text-align: center;
      transition: background .2s
  }
  
  .award-rank:hover {
      background: rgba(255, 255, 255, .12)
  }
  
  .award-rank.gold {
      background: rgba(245, 158, 11, .12);
      border-color: rgba(245, 158, 11, .3)
  }
  
  .ar-medal {
      font-size: 26px;
      margin-bottom: 6px
  }
  
  .ar-pos {
      font-family: var(--font-h);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 4px
  }
  
  .ar-prize {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 900;
      color: var(--amber)
  }
  
  .award-cats {
      display: flex;
      flex-direction: column;
      gap: 12px
  }
  
  .award-cat {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--r);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: background .2s
  }
  
  .award-cat:hover {
      background: rgba(255, 255, 255, .1)
  }
  
  .ac-ico {
      font-size: 24px;
      flex-shrink: 0
  }
  
  .ac-title {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 2px
  }
  
  .ac-prize {
      font-family: var(--font-h);
      font-size: 17px;
      font-weight: 900;
      color: var(--amber)
  }
  
  .ac-sub {
      font-family: var(--font-b);
      font-size: 11px;
      color: rgba(255, 255, 255, .4)
  }
  
  .award-nomine {
      background: rgba(245, 158, 11, .1);
      border: 1.5px solid rgba(245, 158, 11, .3);
      border-radius: var(--rl);
      padding: 20px;
      text-align: center;
      margin-top: 8px
  }
  
  .an-title {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 800;
      color: var(--amber);
      margin-bottom: 4px
  }
  
  .an-sub {
      font-family: var(--font-b);
      font-size: 13px;
      color: rgba(255, 255, 255, .5)
  }
  /* ── TIMELINE ── */
  
  .tl-sec {
      background: var(--white)
  }
  
  .tl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 48px
  }
  
  .tl-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--rl);
      padding: 22px;
      display: flex;
      gap: 16px;
      transition: box-shadow .2s, border-color .2s
  }
  
  .tl-card:hover {
      box-shadow: 0 8px 24px rgba(14, 116, 144, .09);
      border-color: var(--teal-200)
  }
  
  .tl-card.now {
      border-color: var(--orange);
      background: #FFF7ED
  }
  
  .tl-step {
      font-family: var(--font-h);
      font-size: 26px;
      font-weight: 900;
      color: var(--gray-200);
      min-width: 40px;
      line-height: 1
  }
  
  .tl-card.now .tl-step {
      color: var(--orange)
  }
  
  .tl-date {
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 4px
  }
  
  .tl-card.now .tl-date {
      color: var(--orange-dark)
  }
  
  .tl-title {
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 5px
  }
  
  .tl-desc {
      font-family: var(--font-b);
      font-size: 13px;
      color: var(--gray-500);
      line-height: 1.6
  }
  /* ── MENTORS ── */
  
  .mentor-sec {
      background: var(--gray-50)
  }
  
  .mentor-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px
  }
  
  .mentor-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--rl);
      overflow: hidden;
      text-align: center;
      transition: box-shadow .3s, transform .3s var(--ease)
  }
  
  .mentor-card:hover {
      box-shadow: 0 16px 48px rgba(14, 116, 144, .1);
      transform: translateY(-4px)
  }
  
  .mentor-photo {
      width: 100%;
      aspect-ratio: 1/1
  }
  
  .mentor-body {
      padding: 18px 16px
  }
  
  .mentor-name {
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 4px
  }
  
  .mentor-role {
      font-family: var(--font-b);
      font-size: 12px;
      color: var(--gray-500);
      line-height: 1.4
  }
  
  .mentor-tag {
      display: inline-block;
      margin-top: 10px;
      background: var(--teal-50);
      color: var(--brand);
      border: 1px solid var(--teal-100);
      font-family: var(--font-h);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      padding: 3px 10px;
      border-radius: 100px
  }
  /* ── HOW TO REGISTER ── */
  
  .how-sec {
      background: linear-gradient(135deg, var(--teal-950) 0%, #0E7490 100%)
  }
  
  .how-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 48px;
      position: relative;
      z-index: 1
  }
  
  .how-card {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--rxl);
      overflow: hidden;
      transition: background .2s
  }
  
  .how-card:hover {
      background: rgba(255, 255, 255, .13)
  }
  
  .how-card-img {
      width: 100%;
      aspect-ratio: 16/9
  }
  
  .how-card-body {
      padding: 24px
  }
  
  .how-num {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--orange);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 14px
  }
  
  .how-title {
      font-family: var(--font-h);
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px
  }
  
  .how-desc {
      font-family: var(--font-b);
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.65;
      margin-bottom: 14px
  }
  
  .how-link {
      display: block;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .15);
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 600;
      color: var(--teal-200);
      padding: 9px 14px;
      border-radius: 8px;
      margin-bottom: 6px;
      transition: background .2s;
      word-break: break-all
  }
  
  .how-link:hover {
      background: rgba(255, 255, 255, .18);
      color: #fff
  }
  /* ── TESTIMONIALS / QUOTES ── */
  
  .testi-sec {
      background: var(--white)
  }
  
  .testi-featured {
      background: var(--teal-50);
      border: 1px solid var(--teal-100);
      border-radius: var(--rxl);
      padding: 36px;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 32px;
      align-items: center;
      margin-bottom: 24px
  }
  
  .tf-photo {
      width: 100%;
      aspect-ratio: 1;
      border-radius: var(--rl)
  }
  
  .tf-quote {
      font-family: var(--font-b);
      font-style: italic;
      font-size: 18px;
      color: var(--gray-700);
      line-height: 1.7;
      margin-bottom: 20px
  }
  
  .tf-stars {
      color: var(--amber);
      font-size: 16px;
      letter-spacing: 2px;
      margin-bottom: 10px
  }
  
  .tf-name {
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 700;
      color: var(--gray-900)
  }
  
  .tf-role {
      font-family: var(--font-b);
      font-size: 13px;
      color: var(--gray-500)
  }
  
  .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
  }
  
  .testi-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--rl);
      padding: 24px;
      position: relative;
      overflow: hidden;
      transition: box-shadow .2s
  }
  
  .testi-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand), var(--amber))
  }
  
  .testi-card:hover {
      box-shadow: 0 8px 28px rgba(14, 116, 144, .09)
  }
  
  .tc-stars {
      color: var(--amber);
      font-size: 14px;
      letter-spacing: 2px;
      margin-bottom: 10px
  }
  
  .tc-text {
      font-family: var(--font-b);
      font-style: italic;
      font-size: 14px;
      color: var(--gray-600);
      line-height: 1.7;
      margin-bottom: 16px
  }
  
  .tc-meta {
      display: flex;
      align-items: center;
      gap: 10px
  }
  
  .tc-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%
  }
  
  .tc-name {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      color: var(--gray-900)
  }
  
  .tc-role {
      font-family: var(--font-b);
      font-size: 12px;
      color: var(--gray-500)
  }
  /* ── MEDIA ── */
  
  .media-sec {
      background: var(--gray-50);
      padding: 48px 40px
  }
  
  .media-inner {
      max-width: 1200px;
      margin: 0 auto
  }
  
  .media-lbl {
      text-align: center;
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: 24px
  }
  
  .media-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px
  }
  
  .media-chip {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      color: var(--gray-500);
      padding: 8px 18px;
      transition: all .2s
  }
  
  .media-chip:hover {
      border-color: var(--teal-300);
      color: var(--brand)
  }
  /* ── FAQ ── */
  
  .faq-sec {
      background: var(--white)
  }
  
  .faq-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      margin-top: 48px;
      align-items: start
  }
  
  .faq-left-img {
      width: 100%;
      aspect-ratio: 4/5;
      border-radius: var(--rxl)
  }
  
  .faq-item {
      border-bottom: 1px solid var(--gray-200)
  }
  
  .faq-q {
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: 18px 0;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 600;
      color: var(--gray-900);
      transition: color .2s
  }
  
  .faq-q:hover,
  .faq-q.on {
      color: var(--brand)
  }
  
  .faq-q svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      flex-shrink: 0;
      stroke-width: 2;
      transition: transform .3s var(--ease)
  }
  
  .faq-q.on svg {
      transform: rotate(45deg)
  }
  
  .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s var(--ease), padding .3s
  }
  
  .faq-a.on {
      max-height: 300px;
      padding-bottom: 18px
  }
  
  .faq-a p {
      font-family: var(--font-b);
      font-size: 14px;
      color: var(--gray-500);
      line-height: 1.8
  }
  /* ── FINAL CTA ── */
  
  .cta-final {
      background-image: url('https://assets.nyalanesia.id/landing_page/sln/img/hero_bg.webp') !important;
      background-size: cover;
      /* Membuat gambar menutupi seluruh area */
      background-position: center;
      /* Memastikan gambar berada di tengah */
      background-repeat: no-repeat;
      /* Mencegah gambar berulang (tiling) */
      padding: 100px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
  }
  
  .cta-final::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -200px;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(249, 115, 22, .1) 0%, transparent 70%)
  }
  
  .cta-inner {
      max-width: 760px;
      margin: 0 auto;
      position: relative
  }
  
  .cta-h {
      font-family: var(--font-h);
      font-size: clamp(36px, 6vw, 48px);
      font-weight: 900;
      line-height: 1.04;
      color: #fff;
      margin-bottom: 16px
  }
  
  .cta-h span {
      color: var(--amber)
  }
  
  .cta-sub {
      font-family: var(--font-b);
      font-size: 18px;
      color: rgba(255, 255, 255, .6);
      max-width: 520px;
      margin: 0 auto 36px;
      line-height: 1.7
  }
  
  .cta-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 20px
  }
  
  .btn-cta-main {
      background: #EDCD24;
      color: #fff;
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      padding: 16px 36px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .2s;
      box-shadow: 0 8px 24px rgba(249, 115, 22, .4)
  }
  
  .btn-cta-main:hover {
      transform: translateY(-2px);
      color: #082F49;
      box-shadow: 0 14px 36px rgba(249, 115, 22, .55)
  }
  
  .btn-cta-ghost {
      border: 2px solid rgba(255, 255, 255, .3);
      color: #fff;
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 600;
      padding: 14px 30px;
      border-radius: 12px;
      transition: all .15s
  }
  
  .btn-cta-ghost:hover {
      border-color: #fff;
      background: rgba(255, 255, 255, .07)
  }
  
  .cta-note {
      font-family: var(--font-b);
      font-size: 13px;
      color: rgba(255, 255, 255, .4)
  }
  
  .deadline-box {
      background: rgba(249, 115, 22, .15);
      border: 1.5px solid rgba(249, 115, 22, .3);
      border-radius: 12px;
      padding: 16px 24px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px
  }
  
  .db-ico {
      font-size: 20px
  }
  
  .db-text {
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 600;
      color: var(--orange-light)
  }
  
  .db-text strong {
      color: var(--amber);
      display: block;
      font-size: 16px
  }
  /* ── FOOTER ── */
  
  footer {
      background: var(--gray-950);
      padding: 56px 40px 28px
  }
  
  .footer-inner {
      max-width: 1200px;
      margin: 0 auto
  }
  
  .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      margin-bottom: 28px
  }
  
  .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px
  }
  
  .fl-mark {
      width: 32px;
      height: 32px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--brand-mid), var(--teal-400));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 900;
      color: #fff
  }
  
  .fl-name {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      color: #fff
  }
  
  .footer-tag {
      font-family: var(--font-b);
      font-size: 14px;
      color: rgba(255, 255, 255, .35);
      line-height: 1.7;
      margin-bottom: 16px
  }
  
  .footer-contact a {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-b);
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 8px;
      transition: color .2s
  }
  
  .footer-contact a:hover {
      color: #fff
  }
  
  .fc-title {
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .25);
      margin-bottom: 14px
  }
  
  .fc-col a {
      display: block;
      font-family: var(--font-b);
      font-size: 14px;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 10px;
      transition: color .2s
  }
  
  .fc-col a:hover {
      color: #fff
  }
  
  .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px
  }
  
  .footer-copy {
      font-family: var(--font-b);
      font-size: 12px;
      color: rgba(255, 255, 255, .2)
  }
  
  .social-pills {
      display: flex;
      gap: 8px
  }
  
  .spill {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .09);
      color: rgba(255, 255, 255, .45);
      border-radius: 100px;
      font-family: var(--font-h);
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      transition: all .2s
  }
  
  .spill:hover {
      background: rgba(255, 255, 255, .12);
      color: #fff
  }
  /* ── FLOATING ELEMENTS ── */
  
  #wa-float {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 900;
      background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
      color: #fff;
      padding: 14px 22px 14px 16px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 8px 28px rgba(14, 116, 144, .45);
      transition: transform .2s var(--ease), box-shadow .3s;
      animation: waRing 3s ease-in-out infinite
  }
  
  #wa-float:hover {
      transform: scale(1.05);
      box-shadow: 0 14px 40px rgba(14, 116, 144, .6)
  }
  
  #wa-float svg {
      width: 20px;
      height: 20px;
      fill: #fff
  }
  
  #mob-bar {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 890;
      background: #fff;
      border-top: 1px solid var(--gray-200);
      padding: 10px 16px;
      gap: 8px;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, .08)
  }
  
  #mob-bar a {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      padding: 12px;
      border-radius: 10px
  }
  
  #mob-bar .mwa {
      background: var(--teal-50);
      color: var(--brand);
      border: 1.5px solid var(--teal-200)
  }
  
  #mob-bar .mreg {
      background: linear-gradient(135deg, var(--orange), #EA580C);
      color: #fff
  }
  /* ── ANIMATIONS ── */
  
  @keyframes pulse {
      0%,
      100% {
          opacity: 1
      }
      50% {
          opacity: .4
      }
  }
  
  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(20px)
      }
      to {
          opacity: 1;
          transform: translateY(0)
      }
  }
  
  @keyframes waRing {
      0%,
      100% {
          box-shadow: 0 8px 28px rgba(14, 116, 144, .45), 0 0 0 0 rgba(14, 116, 144, .3)
      }
      60% {
          box-shadow: 0 8px 28px rgba(14, 116, 144, .45), 0 0 0 14px rgba(14, 116, 144, 0)
      }
  }
  
  .hero-eyebrow,
  .hero-h,
  .hero-h2,
  .hero-pain,
  .hero-pills,
  .hero-ctas,
  .hero-bos {
      animation: fadeUp .7s var(--ease) both
  }
  
  .hero-eyebrow {
      animation-delay: .05s
  }
  
  .hero-h {
      animation-delay: .15s
  }
  
  .hero-h2 {
      animation-delay: .25s
  }
  
  .hero-pain {
      animation-delay: .35s
  }
  
  .hero-pills {
      animation-delay: .45s
  }
  
  .hero-ctas {
      animation-delay: .55s
  }
  
  .hero-bos {
      animation-delay: .65s
  }
  
  .hero-right {
      animation: fadeUp .8s var(--ease) .2s both
  }
  
  .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
  }
  
  .reveal.vis {
      opacity: 1;
      transform: none
  }
  
  .d1 {
      transition-delay: .1s
  }
  
  .d2 {
      transition-delay: .2s
  }
  
  .d3 {
      transition-delay: .3s
  }
  
  .d4 {
      transition-delay: .4s
  }
  /* ── MOBILE NAV OVERLAY ── */
  
  .nav-burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      z-index: 1001
  }
  
  .nav-burger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--gray-900);
      border-radius: 2px;
      transition: all .3s var(--ease)
  }
  
  .nav-burger.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px)
  }
  
  .nav-burger.open span:nth-child(2) {
      opacity: 0
  }
  
  .nav-burger.open span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px)
  }
  
  .nav-mobile-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(0, 0, 0, .4);
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s, visibility .3s
  }
  
  .nav-mobile-overlay.open {
      opacity: 1;
      visibility: visible;
      display: block
  }
  
  .nav-mobile-panel {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 280px;
      z-index: 1000;
      background: #fff;
      padding: 20px;
      transform: translateX(100%);
      transition: transform .35s var(--ease);
      box-shadow: -8px 0 32px rgba(0, 0, 0, .1);
      overflow-y: auto
  }
  
  .nav-mobile-panel.open {
      transform: translateX(0);
      display: block
  }
  
  .nav-mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--gray-200)
  }
  
  .nav-mobile-close {
      background: none;
      border: none;
      font-size: 24px;
      color: var(--gray-500);
      cursor: pointer;
      padding: 4px;
      line-height: 1
  }
  
  .nav-mobile-links {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 24px
  }
  
  .nav-mobile-links a {
      font-family: var(--font-h);
      font-size: 15px;
      font-weight: 500;
      color: var(--gray-700);
      padding: 12px 14px;
      border-radius: 10px;
      transition: background .15s, color .15s;
      display: block
  }
  
  .nav-mobile-links a:hover {
      background: var(--teal-50);
      color: var(--brand)
  }
  
  .nav-mobile-actions {
      display: flex;
      flex-direction: column;
      gap: 10px
  }
  
  .nav-mobile-actions a {
      display: block;
      text-align: center;
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 600;
      padding: 12px;
      border-radius: 10px
  }
  
  .nav-mobile-actions .nav-bos {
      border: 1.5px solid var(--teal-200);
      background: var(--teal-50);
      color: var(--brand)
  }
  
  .nav-mobile-actions .nav-daftar {
      background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
      color: #fff
  }
  
  @media(max-width:1024px) {
      .nav-burger {
          display: flex
      }
  }
  /* ── RESPONSIVE ── */
  
  @media (max-width:768px) {
      /* buang .faq-q dari selector yang kasih word-break */
      .faq-a,
      .faq-a p,
      .faq-a li,
      .faq-a a,
      .faq-a strong {
          overflow-wrap: break-word;
          word-break: normal;
          hyphens: auto;
      }
      /* tombol FAQ: wrap normal di spasi, jangan potong kata */
      .faq-q {
          white-space: normal;
          word-break: normal;
          overflow-wrap: normal;
          hyphens: none;
      }
      .faq-q {
          padding: 20px 0;
          line-height: 1.5;
          align-items: center;
      }
      .faq-q>svg {
          margin-top: 4px
      }
      /* icon turun sedikit supaya sejajar huruf
    pertama */
      .faq-layout>* {
          min-width: 0;
          max-width: 100%
      }
      .faq-layout img {
          width: 100%;
          height: auto
      }
      .hero-float-badge {
          position: absolute;
          bottom: 400px;
          left: -20px;
          background: #fff;
          border-radius: var(--r);
          padding: 14px 18px;
          box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
          display: flex;
          align-items: center;
          gap: 12px;
          z-index: 2;
          size: 70%;
      }
      .nav-brand {
          width: 30%;
      }
      .pain-cta-strip {
          flex-direction: column !important;
          /* Memaksa susunan menjadi atas-bawah */
          text-align: center;
          /* Membuat teks berada di tengah */
          gap: 16px !important;
      }
      .pain-cta-strip .pcs-left {
          width: 100% !important;
          /* Membongkar batas 70% menjadi penuh */
          padding-right: 0 !important;
      }
      .pain-cta-strip .btn-orange {
          width: 100% !important;
          /* Membuat tombol membentang penuh agar mudah di-tap */
          margin-top: 12px;
          text-align: center !important;
          justify-content: center !important;
      }
      .bos-badge {
          font-size: 10px;
      }
      .btn-cta-main {
          font-size: 11px;
          font-weight: 700;
      }
      .btn-cta-ghost {
          font-size: 11px;
          font-weight: 600;
      }
      .btn-orange {
          font-size: 11px;
          font-weight: 600;
      }
      .hero-pills {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 8px !important;
          /* Jarak sedikit dirapatkan agar pas di HP */
          width: 100%;
          grid-auto-flow: dense !important;
      }
      /* Memaksa teks putih ke kolom 1 (kiri) */
      .hero-pills .hp:not(.acc) {
          grid-column: 1 !important;
      }
      /* Memaksa teks kuning (.acc) ke kolom 2 (kanan) */
      .hero-pills .hp.acc {
          grid-column: 2 !important;
      }
      .hero-pills .hp {
          font-size: 9px !important;
      }
      /* .hero-ctas {
          align-items: center;
          justify-content: center;
      } */
      .hero-ctas {
          display: flex;
          flex-direction: column;
          /* Memaksa elemen anak berbaris dari atas ke bawah */
          gap: 16px;
          /* Memberikan jarak antar tombol */
          width: 100%;
      }
      /* Memaksa kedua tombol membentang 100% */
      .hero-ctas .btn-orange,
      .hero-ctas .btn-ghost {
          width: 100% !important;
          display: flex;
          justify-content: center;
          /* Memastikan teks dan ikon berada tepat di tengah */
          align-items: center;
          text-align: center;
          box-sizing: border-box;
          /* Memastikan padding tidak merusak ukuran 100% */
      }
  }
  
  @media(max-width:1024px) {
      nav {
          padding: 0 20px
      }
      .nav-links {
          display: none
      }
      .nav-acts .nav-bos {
          display: none
      }
      .hero-inner {
          display: flex;
          flex-direction: column
      }
      .hero-right {
          order: -1
      }
      /* .hero-inner,.pain-two,.prinsip-grid,.fac-panel.on,.award-inner,.survey-inner,.testi-featured,.faq-layout,.footer-top{grid-template-columns:1fr} */
      .pain-two,
      .prinsip-grid,
      .fac-panel.on,
      .award-inner,
      .survey-inner,
      .testi-featured,
      .faq-layout,
      .footer-top {
          grid-template-columns: 1fr
      }
      /* .hero-right,.testi-featured{display:none} */
      .testi-featured {
          display: none
      }
      .lit-grid,
      .mentor-grid,
      .how-steps,
      .price-cards {
          grid-template-columns: 1fr 1fr
      }
      .proof-inner {
          grid-template-columns: repeat(3, 1fr)
      }
      .tl-grid {
          grid-template-columns: 1fr
      }
      .sec,
      .prinsip-sec,
      .survey-sec,
      .award-sec,
      .how-sec,
      .testi-sec,
      .faq-sec,
      .cta-final {
          padding: 56px 20px
      }
      #wa-float span {
          display: none
      }
      #wa-float {
          padding: 14px;
          bottom: 80px
      }
      #mob-bar {
          display: flex
      }
      .fac-tabs .ftab {
          font-size: 11px !important;
      }
      .fac-tabs {
          display: flex !important;
          flex-wrap: nowrap !important;
          /* Memaksa semua tab tetap di satu garis horizontal */
          overflow-x: auto !important;
          /* Memungkinkan pengguna menggeser (swipe) tab ke samping jika layar HP terlalu kecil */
          gap: 8px !important;
          /* Jarak antar tombol tab */
      }
      /* Memastikan konten di DALAM tab (ikon & teks) menjadi 1 baris menyamping */
      .fac-tabs .ftab {
          display: flex !important;
          flex-direction: row !important;
          /* Menyusun ikon dan teks ke samping */
          align-items: center !important;
          /* Meratakan posisi ikon dan teks di tengah vertikal */
          justify-content: center !important;
          white-space: nowrap !important;
          /* Mencegah teks putus menjadi 2 baris */
          gap: 6px !important;
          /* Jarak antara ikon dan teks */
          padding: 8px 16px !important;
          /* Menyesuaikan ruang kosong di dalam tombol */
      }
  }
  
  @media(max-width:640px) {
      #tb {
          padding: 10px 16px;
          gap: 8px;
          font-size: 11px
      }
      .tb-cd {
          display: none
      }
      .proof-inner {
          grid-template-columns: repeat(2, 1fr)
      }
      .lit-grid,
      .mentor-grid,
      .how-steps,
      .price-cards,
      .sv-3 {
          grid-template-columns: 1fr
      }
      .pc.featured {
          transform: none
      }
      .testi-grid {
          grid-template-columns: 1fr
      }
      .award-podium {
          grid-template-columns: 1fr
      }
  }