:root {
        --navy: #1a2a4b;
        --navy-deep: #0e1729;
        --navy-2: #22376a;
        --navy-line: #2e4372;
        --amber: #f5c519;
        --amber-dp: #d9aa05;
        --off: #f0f3fc;
        --white: #fff;
        --slate: #5a6785;
        --slate-2: #8593b4;
        --line: #dde3f2;
        --ok: #1fa971;
        --warn: #e5893b;
        --danger: #d64550;
        --wa: #25d366;
        --maxw: 1200px;
        --r: 14px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 78px;
      }
      body {
        font-family: "DM Sans", system-ui, sans-serif;
        background: var(--white);
        color: var(--navy);
        font-size: 17px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      h1,
      h2,
      h3,
      h4 {
        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
        line-height: 1.16;
        letter-spacing: -0.022em;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        display: block;
      }
      .wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px;
      }
      .narrow {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 24px;
      }

      /* ============ BUTTONS ============ */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 16px;
        padding: 15px 28px;
        border-radius: 11px;
        border: 2px solid transparent;
        cursor: pointer;
        min-height: 52px;
        transition:
          transform 0.18s,
          box-shadow 0.18s,
          background 0.18s,
          border-color 0.18s;
      }
      .btn--wa {
        background: var(--wa);
        color: #04331a;
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
      }
      .btn--wa:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4);
      }
      .btn--amber {
        background: var(--amber);
        color: var(--navy);
        box-shadow: 0 6px 20px rgba(245, 197, 25, 0.32);
      }
      .btn--amber:hover {
        transform: translateY(-2px);
      }
      .btn--ghost {
        background: transparent;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.32);
      }
      .btn--ghost:hover {
        border-color: var(--amber);
        color: var(--amber);
      }
      .btn--line {
        background: transparent;
        color: var(--navy);
        border-color: var(--line);
      }
      .btn--line:hover {
        border-color: var(--navy);
        background: var(--off);
      }

      /* ============ NAV ============ */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: transparent;
        border-bottom: 1px solid transparent;
        transition:
          background 0.3s ease,
          border-color 0.3s ease,
          box-shadow 0.3s ease;
      }
      .nav__in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        gap: 18px;
      }
      .nav__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }
      .nav__brand img,
      .foot__brand img,
      .eko__mid img {
        width: auto;
      }
      .nav__brand img {
        height: 34px;
      }
      .nav__brand b {
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 20px;
        letter-spacing: -0.02em;
        color: #fff;
        transition: color 0.3s ease;
      }
      .nav__menu {
        display: flex;
        align-items: center;
        gap: 28px;
      }
      .nav__menu a {
        font-size: 15px;
        font-weight: 500;
        color: #c2cde6;
        transition: color 0.15s;
        position: relative;
      }
      .nav__menu a:hover {
        color: #fff;
      }
      .nav__menu a.on {
        color: #fff;
        font-weight: 700;
      }
      .nav__menu a.on::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -25px;
        height: 3px;
        background: var(--amber);
        border-radius: 2px;
      }
      .nav__burger {
        display: none;
        background: none;
        border: 0;
        font-size: 22px;
        color: #fff;
        cursor: pointer;
        padding: 8px;
        transition: color 0.3s ease;
      }
      .nav.is-solid {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(14px);
        border-bottom-color: var(--line);
        box-shadow: 0 2px 18px rgba(26, 42, 75, 0.06);
      }
      .nav.is-solid .nav__brand b {
        color: var(--navy);
      }
      .nav.is-solid .nav__menu a {
        color: var(--slate);
      }
      .nav.is-solid .nav__menu a:hover {
        color: var(--navy);
      }
      .nav.is-solid .nav__menu a.on {
        color: var(--navy);
      }
      .nav.is-solid .nav__burger {
        color: var(--navy);
      }

      /* ============ HERO ============ */
      .hero {
        background:
          radial-gradient(
            1200px 560px at 76% -6%,
            rgba(245, 197, 25, 0.17),
            transparent 60%
          ),
          linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
        color: #fff;
        padding: 148px 0 104px;
        position: relative;
        overflow: hidden;
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.45;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 66px 66px;
        -webkit-mask-image: radial-gradient(
          circle at 50% 0%,
          #000 26%,
          transparent 72%
        );
        mask-image: radial-gradient(
          circle at 50% 0%,
          #000 26%,
          transparent 72%
        );
      }
      .hero__in {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 830px;
        margin: 0 auto;
      }
      .hero__kick {
        line-height: 1.5;
        display: inline-block;
        font-family: "Plus Jakarta Sans";
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--amber);
        margin-bottom: 20px;
      }
      .hero__title {
        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
        line-height: 1.16;
        letter-spacing: -0.022em;
        font-size: clamp(2.2rem, 5.6vw, 4rem);
        font-weight: 800;
        margin-bottom: 20px;
      }
      .hero__title em {
        font-style: normal;
        color: var(--amber);
      }
      .hero__lead {
        font-size: clamp(0.94rem, 1.45vw, 1.04rem);
        color: #bfcbe6;
        max-width: 820px;
        margin: 0 auto 32px;
        line-height: 1.6;
      }
      .hero__lead .lb {
        display: inline;
      }
      @media (max-width: 820px) {
        .hero__lead .lb {
          display: none;
        }
      }
      .hero__acts {
        display: flex;
        gap: 13px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 56px;
      }
      .hero__stage {
        position: relative;
        z-index: 2;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 24px;
      }

      /* ============ MASALAH ============ */
      .pains {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
        gap: 20px;
      }
      .pain {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 26px 24px;
        transition:
          transform 0.2s,
          box-shadow 0.2s,
          border-color 0.2s;
      }
      .pain:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 34px rgba(26, 42, 75, 0.09);
        border-color: #c8d2ea;
      }
      .pain__role {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 15.5px;
        margin-bottom: 12px;
      }
      .pain__role i {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--off);
        color: var(--navy);
        display: grid;
        place-items: center;
        font-size: 14px;
      }
      .pain p {
        font-size: 15.3px;
        color: var(--slate);
        line-height: 1.62;
      }
      .pain__quote {
        margin: 48px auto 0;
        text-align: center;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: clamp(1.15rem, 2.7vw, 1.62rem);
        line-height: 1.42;
        color: var(--navy);
        max-width: 760px;
      }
      .pain__quote .lb2 {
        display: inline;
      }
      @media (max-width: 620px) {
        .pain__quote .lb2 {
          display: none;
        }
      }
      .pain__quote span {
        background: linear-gradient(
          transparent 62%,
          rgba(245, 197, 25, 0.55) 62%
        );
        padding: 0 3px;
      }

      /* ============ CHAPTER SHELL ============ */
      .ch {
        padding: 96px 0;
      }
      .ch--off {
        background: var(--off);
      }
      .ch--dark {
        background: var(--navy);
        color: #fff;
      }
      .ch--deep {
        background: var(--navy-deep);
        color: #fff;
      }
      .ch__label {
        font-family: "Plus Jakarta Sans";
        font-size: 12.5px;
        font-weight: 800;
        letter-spacing: 0.17em;
        text-transform: uppercase;
        color: var(--amber-dp);
        margin-bottom: 12px;
        display: block;
      }
      .ch--dark .ch__label,
      .ch--deep .ch__label {
        color: var(--amber);
      }
      .ch__title {
        font-size: clamp(1.8rem, 4.2vw, 2.9rem);
        font-weight: 800;
        margin-bottom: 18px;
        max-width: 16ch;
      }
      .ch__title--wide {
        max-width: 22ch;
      }
      .ch__lead {
        font-size: 1.06rem;
        color: var(--slate);
        max-width: 56ch;
      }
      .ch--dark .ch__lead,
      .ch--deep .ch__lead {
        color: #aebbd8;
      }
      .ch__head {
        margin-bottom: 56px;
      }
      .ch__head--mid {
        text-align: center;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
      }
      .ch__head--mid .ch__title {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
      }
      .ch__head--mid .ch__lead {
        margin-left: auto;
        margin-right: auto;
      }

      /* split layout */
      .split {
        display: grid;
        grid-template-columns: 1fr 1.08fr;
        gap: 60px;
        align-items: center;
      }
      .split--flip .split__txt {
        order: 2;
      }
      .split--flip .split__vis {
        order: 1;
      }

      /* two-line pairs */
      .pairs {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 34px;
      }
      .pair {
        padding-left: 18px;
        border-left: 3px solid var(--amber);
      }
      .pair b {
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 17.5px;
        display: block;
        margin-bottom: 4px;
      }
      .pair span {
        font-size: 15.4px;
        color: var(--slate);
        line-height: 1.6;
      }
      .ch--dark .pair span,
      .ch--deep .pair span {
        color: #a9b7d6;
      }

      /* number cards */
      .nums {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1px;
        background: var(--line);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        margin-top: 56px;
      }
      .ch--dark .nums,
      .ch--deep .nums {
        background: rgba(255, 255, 255, 0.13);
        border-color: rgba(255, 255, 255, 0.13);
      }
      .num {
        background: var(--white);
        padding: 30px 26px;
      }
      .ch--off .num {
        background: var(--off);
      }
      .ch--dark .num {
        background: var(--navy);
      }
      .ch--deep .num {
        background: var(--navy-deep);
      }
      .num b {
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: clamp(1.9rem, 3.6vw, 2.5rem);
        display: block;
        line-height: 1;
        margin-bottom: 9px;
        letter-spacing: -0.03em;
      }
      .num span {
        font-size: 14.6px;
        color: var(--slate);
        line-height: 1.5;
        display: block;
      }
      .ch--dark .num span,
      .ch--deep .num span {
        color: #93a2c4;
      }
      .num--amber b {
        color: var(--amber-dp);
      }
      .ch--dark .num--amber b,
      .ch--deep .num--amber b {
        color: var(--amber);
      }

      /* named sub-features */
      .named {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
        gap: 20px;
        margin-top: 56px;
      }
      .named__item {
        padding-top: 20px;
        border-top: 2px solid var(--line);
      }
      .ch--dark .named__item,
      .ch--deep .named__item {
        border-top-color: rgba(255, 255, 255, 0.16);
      }
      .named__item.hi {
        border-top-color: var(--amber);
      }
      .named__kick {
        font-family: "Plus Jakarta Sans";
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--amber-dp);
        display: block;
        margin-bottom: 9px;
      }
      .ch--dark .named__kick,
      .ch--deep .named__kick {
        color: var(--amber);
      }
      .named__item h3 {
        font-size: 17.5px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .named__item p {
        font-size: 14.9px;
        color: var(--slate);
        line-height: 1.6;
      }
      .ch--dark .named__item p,
      .ch--deep .named__item p {
        color: #a2b0d0;
      }

      /* uniform grid */
      .grid3 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
        gap: 18px;
      }
      .gcard {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 24px 22px;
      }
      .ch--off .gcard {
        background: var(--white);
      }
      .ch--dark .gcard,
      .ch--deep .gcard {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.13);
      }
      .gcard i {
        color: var(--amber-dp);
        font-size: 18px;
        margin-bottom: 13px;
        display: block;
      }
      .ch--dark .gcard i,
      .ch--deep .gcard i {
        color: var(--amber);
      }
      .gcard h3 {
        font-size: 16.4px;
        font-weight: 700;
        margin-bottom: 7px;
      }
      .gcard p {
        font-size: 14.7px;
        color: var(--slate);
        line-height: 1.6;
      }
      .ch--dark .gcard p,
      .ch--deep .gcard p {
        color: #a2b0d0;
      }

      /* ============ MOCKUP KIT ============ */
      .mk {
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 26px 60px rgba(14, 23, 41, 0.22);
        background: var(--white);
        border: 1px solid rgba(255, 255, 255, 0.12);
      }
      .mk__bar {
        background: #f4f6fc;
        border-bottom: 1px solid var(--line);
        padding: 11px 15px;
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .mk__dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #d5dcec;
      }
      .mk__url {
        margin-left: 9px;
        font-size: 11.5px;
        color: var(--slate-2);
        font-family: "DM Sans";
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 3px 11px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mk__body {
        padding: 20px;
        background: var(--white);
      }
      .mk__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        gap: 10px;
      }
      .mk__ttl {
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 14.5px;
        color: var(--navy);
      }
      .mk__sub {
        font-size: 11.5px;
        color: var(--slate-2);
      }
      .mk__chip {
        font-family: "Plus Jakarta Sans";
        font-size: 10.5px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .chip--ok {
        background: rgba(31, 169, 113, 0.12);
        color: var(--ok);
      }
      .chip--warn {
        background: rgba(229, 137, 59, 0.14);
        color: var(--warn);
      }
      .chip--danger {
        background: rgba(214, 69, 80, 0.12);
        color: var(--danger);
      }
      .chip--navy {
        background: var(--off);
        color: var(--navy);
      }
      .chip--amber {
        background: rgba(245, 197, 25, 0.22);
        color: #8a6d00;
      }

      /* stat tiles inside mockup */
      .mk__stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
        margin-bottom: 16px;
      }
      .mk__stat {
        background: var(--off);
        border-radius: 9px;
        padding: 12px 11px;
      }
      .mk__stat b {
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 18px;
        display: block;
        line-height: 1;
        margin-bottom: 4px;
        color: var(--navy);
      }
      .mk__stat span {
        font-size: 10px;
        color: var(--slate-2);
        display: block;
        line-height: 1.35;
      }
      .mk__stat.amber {
        background: rgba(245, 197, 25, 0.16);
      }
      .mk__stat.amber b {
        color: #8a6d00;
      }

      /* bar chart */
      .mk__chart {
        display: flex;
        align-items: flex-end;
        gap: 7px;
        height: 88px;
        padding: 0 2px;
        margin-bottom: 6px;
      }
      .mk__bar-i {
        flex: 1;
        background: linear-gradient(180deg, var(--navy-2), var(--navy));
        border-radius: 5px 5px 2px 2px;
      }
      .mk__bar-i.pk {
        background: linear-gradient(180deg, var(--amber), var(--amber-dp));
      }
      .mk__xaxis {
        display: flex;
        gap: 7px;
        padding: 0 2px;
      }
      .mk__xaxis span {
        flex: 1;
        text-align: center;
        font-size: 9.5px;
        color: var(--slate-2);
      }

      /* table inside mockup */
      .mk__tbl {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.4px;
      }
      .mk__tbl th {
        text-align: left;
        padding: 9px 10px;
        background: var(--off);
        color: var(--slate);
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .mk__tbl th:first-child {
        border-radius: 7px 0 0 7px;
      }
      .mk__tbl th:last-child {
        border-radius: 0 7px 7px 0;
      }
      .mk__tbl td {
        padding: 10px;
        border-bottom: 1px solid var(--line);
        color: var(--navy);
      }
      .mk__tbl tr:last-child td {
        border-bottom: 0;
      }
      .mk__tbl .nm {
        font-weight: 500;
      }
      .mk__inp {
        display: inline-block;
        min-width: 38px;
        text-align: center;
        border: 1.5px solid var(--line);
        border-radius: 6px;
        padding: 3px 8px;
        font-weight: 700;
        font-family: "Plus Jakarta Sans";
        font-size: 12px;
      }
      .mk__inp.fill {
        border-color: var(--amber);
        background: rgba(245, 197, 25, 0.13);
      }

      /* rows list */
      .mk__rows {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .mk__row {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 9px;
      }
      .mk__av {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--off);
        display: grid;
        place-items: center;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 11px;
        color: var(--navy);
        flex-shrink: 0;
      }
      .mk__av.n {
        background: var(--navy);
        color: var(--amber);
      }
      .mk__meta {
        flex: 1;
        min-width: 0;
      }
      .mk__meta b {
        display: block;
        font-size: 12.8px;
        font-weight: 700;
        font-family: "Plus Jakarta Sans";
        color: var(--navy);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .mk__meta span {
        display: block;
        font-size: 11px;
        color: var(--slate-2);
      }

      /* TV board */
      .tv {
        background: var(--navy-deep);
        border-radius: 16px;
        padding: 8px;
        box-shadow: 0 26px 60px rgba(14, 23, 41, 0.3);
      }
      .tv__screen {
        background: linear-gradient(
          160deg,
          var(--navy) 0%,
          var(--navy-deep) 100%
        );
        border-radius: 11px;
        padding: 22px;
        border: 1px solid rgba(255, 255, 255, 0.09);
      }
      .tv__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      }
      .tv__top b {
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 14.5px;
        color: #fff;
        display: block;
      }
      .tv__top span {
        font-size: 11px;
        color: #8593b4;
      }
      .tv__clock {
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 22px;
        color: var(--amber);
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .tv__feed {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
      }
      .tv__tap {
        display: flex;
        align-items: center;
        gap: 11px;
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 9px;
        padding: 9px 12px;
      }
      .tv__tap i {
        color: var(--ok);
        font-size: 12px;
      }
      .tv__tap.late i {
        color: var(--warn);
      }
      .tv__tap b {
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 12.6px;
        color: #fff;
        flex: 1;
      }
      .tv__tap span {
        font-size: 11px;
        color: #8593b4;
        font-variant-numeric: tabular-nums;
      }
      .tv__foot {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
      }
      .tv__kpi {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 9px;
        padding: 11px;
        text-align: center;
      }
      .tv__kpi b {
        display: block;
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 17px;
        color: #fff;
        line-height: 1;
      }
      .tv__kpi span {
        font-size: 10px;
        color: #8593b4;
      }
      .tv__kpi.a b {
        color: var(--amber);
      }

      /* phone */
      .phone {
        width: 270px;
        margin: 0 auto;
        background: var(--navy-deep);
        border-radius: 32px;
        padding: 9px;
        box-shadow: 0 30px 64px rgba(14, 23, 41, 0.32);
      }
      .phone__scr {
        background: var(--off);
        border-radius: 25px;
        overflow: hidden;
      }
      .phone__top {
        background: var(--navy);
        color: #fff;
        padding: 16px 16px 14px;
        position: relative;
      }
      .phone__notch {
        width: 74px;
        height: 5px;
        background: rgba(255, 255, 255, 0.28);
        border-radius: 99px;
        margin: 0 auto 12px;
      }
      .phone__top b {
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 13.5px;
        display: block;
      }
      .phone__top span {
        font-size: 11px;
        color: #93a2c4;
      }
      .phone__list {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
      .notif {
        background: #fff;
        border-radius: 11px;
        padding: 11px 12px;
        border-left: 3px solid var(--amber);
        box-shadow: 0 2px 8px rgba(26, 42, 75, 0.06);
      }
      .notif.ok {
        border-left-color: var(--ok);
      }
      .notif.warn {
        border-left-color: var(--warn);
      }
      .notif__hd {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 4px;
      }
      .notif__hd i {
        font-size: 10.5px;
        color: var(--slate-2);
      }
      .notif__hd b {
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 11.5px;
        flex: 1;
        color: var(--navy);
      }
      .notif__hd span {
        font-size: 9.5px;
        color: var(--slate-2);
      }
      .notif p {
        font-size: 11.8px;
        color: var(--slate);
        line-height: 1.45;
      }

      /* caption under mockup */
      .mkcap {
        font-size: 12.6px;
        color: var(--slate-2);
        text-align: center;
        margin-top: 16px;
        font-style: italic;
      }
      .ch--dark .mkcap,
      .ch--deep .mkcap {
        color: #75849f;
      }

      /* ============ EKOSISTEM ============ */
      .eko {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
      }
      .eko__side {
        padding: 34px 30px;
        background: rgba(255, 255, 255, 0.05);
      }
      .eko__side h3 {
        font-size: 19.5px;
        font-weight: 800;
        margin-bottom: 3px;
      }
      .eko__side > span {
        font-size: 13px;
        color: #8593b4;
        display: block;
        margin-bottom: 20px;
        font-weight: 500;
      }
      .eko__side ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 11px;
      }
      .eko__side li {
        display: flex;
        gap: 11px;
        font-size: 15px;
        color: #cbd5ec;
        align-items: flex-start;
      }
      .eko__side li i {
        color: var(--amber);
        font-size: 12px;
        margin-top: 6px;
      }
      .eko__mid {
        display: grid;
        place-items: center;
        padding: 0 28px;
        background: var(--amber);
        text-align: center;
      }
      .eko__mid img {
        height: 44px;
        margin: 0 auto 9px;
      }
      .eko__mid b {
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 14px;
        color: var(--navy);
        display: block;
      }
      .eko__mid span {
        font-size: 11.5px;
        color: rgba(26, 42, 75, 0.7);
        font-weight: 500;
      }
      .jtbl {
        margin-top: 22px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
      }
      .jtbl table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14.8px;
      }
      .jtbl th {
        background: rgba(255, 255, 255, 0.08);
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        text-align: left;
        padding: 14px 18px;
        font-size: 13px;
        color: #fff;
      }
      .jtbl td {
        padding: 13px 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: #c6d0e8;
      }
      .jtbl td:first-child {
        font-weight: 700;
        color: #fff;
      }

      /* ============ PAKET ============ */
      .plans {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
        gap: 20px;
      }
      .plan {
        background: #fff;
        border: 1.5px solid var(--line);
        border-radius: 17px;
        padding: 30px 25px;
        display: flex;
        flex-direction: column;
        position: relative;
      }
      .plan.hero-plan {
        border-color: var(--navy);
        box-shadow: 0 18px 44px rgba(26, 42, 75, 0.14);
      }
      .plan__flag {
        position: absolute;
        top: -13px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--amber);
        color: var(--navy);
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 11px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        padding: 6px 15px;
        border-radius: 99px;
        white-space: nowrap;
      }
      .plan h3 {
        font-size: 23px;
        font-weight: 800;
        margin-bottom: 6px;
      }
      .plan__desc {
        font-size: 14.3px;
        color: var(--slate);
        min-height: 44px;
        margin-bottom: 15px;
        line-height: 1.55;
      }
      .plan__cap {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 13.5px;
        background: var(--off);
        padding: 8px 14px;
        border-radius: 9px;
        margin-bottom: 22px;
        align-self: flex-start;
      }
      .plan ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 26px;
        flex: 1;
      }
      .plan li {
        display: flex;
        gap: 10px;
        font-size: 14.8px;
        color: var(--slate);
      }
      .plan li i {
        color: var(--amber-dp);
        font-size: 12px;
        margin-top: 5.5px;
      }
      .plan .btn {
        width: 100%;
      }
      .plannote {
        text-align: center;
        font-size: 14.7px;
        color: var(--slate);
        max-width: 620px;
        margin: 32px auto 0;
      }

      /* ============ VIDEO ============ */
      .vids {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
        gap: 24px;
      }
      .vid {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 15px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        color: inherit;
        transition:
          transform 0.2s,
          box-shadow 0.2s,
          border-color 0.2s;
      }
      .vid:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 44px rgba(26, 42, 75, 0.14);
        border-color: #c8d2ea;
      }
      .vid__cover {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
        overflow: hidden;
        padding: 22px;
        color: #fff;
      }
      .vid__cover--a {
        background:
          radial-gradient(
            420px 200px at 82% 12%,
            rgba(245, 197, 25, 0.28),
            transparent 62%
          ),
          linear-gradient(145deg, var(--navy-2) 0%, var(--navy-deep) 100%);
      }
      .vid__cover--b {
        background:
          radial-gradient(
            420px 200px at 18% 88%,
            rgba(245, 197, 25, 0.22),
            transparent 60%
          ),
          linear-gradient(145deg, var(--navy) 0%, #16233d 100%);
      }
      .vid__cover--c {
        background:
          radial-gradient(
            400px 220px at 50% 0%,
            rgba(245, 197, 25, 0.24),
            transparent 64%
          ),
          linear-gradient(160deg, #233a6b 0%, var(--navy-deep) 100%);
      }
      .vid__wm {
        position: absolute;
        right: -26px;
        bottom: -30px;
        opacity: 0.13;
        pointer-events: none;
      }
      .vid__wm img {
        width: 168px;
        height: auto;
      }
      .vid__kick {
        position: relative;
        z-index: 2;
        display: block;
        font-family: "Plus Jakarta Sans";
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--amber);
        margin-bottom: 8px;
      }
      .vid__big {
        position: relative;
        z-index: 2;
        display: block;
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: clamp(1.35rem, 2.4vw, 1.7rem);
        line-height: 1.14;
        letter-spacing: -0.025em;
      }
      .vid__play {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--amber);
        color: var(--navy);
        display: grid;
        place-items: center;
        font-size: 17px;
        padding-left: 3px;
        box-shadow: 0 8px 22px rgba(14, 23, 41, 0.4);
        transition: transform 0.22s;
      }
      .vid:hover .vid__play {
        transform: translateY(-50%) scale(1.12);
      }
      .vid__dur {
        position: absolute;
        left: 22px;
        bottom: 18px;
        z-index: 3;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 11.5px;
        padding: 4px 10px;
        border-radius: 6px;
      }
      .vid__meta {
        display: block;
        padding: 20px 20px 22px;
        flex: 1;
      }
      .vid__tag {
        display: inline-block;
        font-family: "Plus Jakarta Sans";
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--amber-dp);
        margin-bottom: 9px;
      }
      .vid__meta h3 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 7px;
        line-height: 1.32;
      }
      .vid__meta p {
        font-size: 14.6px;
        color: var(--slate);
        line-height: 1.58;
        margin-bottom: 13px;
      }
      .vid__go {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 13.6px;
        color: var(--navy);
      }
      .vid__go i {
        font-size: 11px;
        color: var(--slate-2);
        transition: transform 0.18s;
      }
      .vid:hover .vid__go i {
        transform: translate(2px, -2px);
      }
      .vids__more {
        text-align: center;
        margin-top: 44px;
      }

      /* ============ STEPS ============ */
      .steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 22px;
        counter-reset: s;
      }
      .step__ln {
        height: 3px;
        background: var(--line);
        border-radius: 2px;
        margin-bottom: 16px;
        position: relative;
        overflow: hidden;
      }
      .step__ln::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 36%;
        background: var(--amber);
        border-radius: 2px;
      }
      .step::before {
        counter-increment: s;
        content: counter(s, decimal-leading-zero);
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 12.5px;
        color: var(--amber-dp);
        letter-spacing: 0.06em;
        display: block;
        margin-bottom: 10px;
      }
      .step h3 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .step p {
        font-size: 14.8px;
        color: var(--slate);
        line-height: 1.62;
      }

      /* ============ FAQ ============ */
      .faq {
        max-width: 840px;
        margin: 0 auto;
      }
      .qa {
        border-bottom: 1px solid var(--line);
      }
      .qa > button {
        width: 100%;
        text-align: left;
        background: none;
        border: 0;
        cursor: pointer;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 17px;
        color: var(--navy);
        padding: 22px 46px 22px 0;
        position: relative;
        line-height: 1.42;
      }
      .qa > button::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 13px;
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--slate);
        transition: transform 0.22s;
      }
      .qa > button[aria-expanded="true"]::after {
        transform: translateY(-50%) rotate(180deg);
        color: var(--amber-dp);
      }
      .qa__a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      .qa__a p {
        font-size: 15.5px;
        color: var(--slate);
        line-height: 1.68;
        padding: 0 46px 22px 0;
      }

      /* ============ CTA / FOOT / NOTES ============ */
      .cta {
        background: linear-gradient(
          150deg,
          var(--navy) 0%,
          var(--navy-deep) 100%
        );
        color: #fff;
        padding: 94px 0;
      }
      .cta__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
      }
      .cta h2 {
        font-size: clamp(1.8rem, 3.6vw, 2.6rem);
        font-weight: 800;
        margin-bottom: 16px;
      }
      .cta p {
        color: #bfcbe6;
        font-size: 1.05rem;
        margin-bottom: 32px;
        max-width: 44ch;
      }
      .cta__acts {
        display: flex;
        gap: 13px;
        flex-wrap: wrap;
      }
      .testi {
        position: relative;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 18px;
        padding: 34px 32px;
        backdrop-filter: blur(8px);
        margin: 0;
      }
      .testi__mark {
        position: absolute;
        right: 26px;
        top: 24px;
        font-size: 38px;
        color: rgba(245, 197, 25, 0.18);
      }
      .testi__stars {
        display: flex;
        gap: 4px;
        color: var(--amber);
        font-size: 14px;
        margin-bottom: 18px;
      }
      .testi__quote {
        font-family: "Plus Jakarta Sans";
        font-weight: 500;
        font-size: clamp(1rem, 1.7vw, 1.14rem);
        line-height: 1.6;
        color: #eaf0ff;
        margin: 0 0 26px;
        letter-spacing: -0.01em;
      }
      .testi__by {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .testi__ava {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--amber);
        display: grid;
        place-items: center;
      }
      .testi__ava img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .testi__ava.is-init::after {
        content: attr(data-fallback);
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 17px;
        color: var(--navy);
      }
      .testi__id b {
        display: block;
        font-family: "Plus Jakarta Sans";
        font-weight: 700;
        font-size: 16px;
        color: #fff;
      }
      .testi__id span {
        display: block;
        font-size: 13.8px;
        color: #9daac9;
        margin-top: 2px;
      }
      @media (max-width: 900px) {
        .cta__grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
      }
      .foot {
        background: var(--navy-deep);
        color: #8593b4;
        padding: 60px 0 28px;
        font-size: 14.7px;
      }
      .foot__grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 40px;
        margin-bottom: 42px;
      }
      .foot__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
      }
      .foot__brand img {
        height: 32px;
      }
      .foot__brand b {
        font-family: "Plus Jakarta Sans";
        font-weight: 800;
        font-size: 19px;
        color: #fff;
      }
      .foot .foot__h {
        font-family: "Plus Jakarta Sans";
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 15px;
      }
      .foot ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .foot a:hover {
        color: var(--amber);
      }
      .foot__tag {
        max-width: 330px;
        line-height: 1.6;
        margin-bottom: 16px;
        font-size: 14.4px;
      }
      .foot__soc {
        display: flex;
        gap: 10px;
        margin-top: 4px;
      }
      .foot__soc a {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #c2cde6;
        font-size: 16px;
        transition:
          background 0.18s,
          color 0.18s,
          border-color 0.18s,
          transform 0.18s;
      }
      .foot__soc a:hover {
        background: var(--amber);
        border-color: var(--amber);
        color: var(--navy);
        transform: translateY(-2px);
      }
      .foot__legal {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 22px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        font-size: 13.4px;
        align-items: center;
      }
      .foot__links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
      }
      .foot__links a {
        position: relative;
      }
      .foot__links a + a::before {
        content: "";
        position: absolute;
        left: -11px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
      }
      .wafloat {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 250;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--wa);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 26px;
        box-shadow: 0 8px 26px rgba(37, 211, 102, 0.45);
        transition: transform 0.2s;
      }
      .wafloat:hover {
        transform: scale(1.07);
      }

      /* reveal */
      .rv {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .rv.in {
        opacity: 1;
        transform: none;
      }

      /* ============ RESPONSIVE ============ */
      @media (max-width: 980px) {
        .split {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .split--flip .split__txt,
        .split--flip .split__vis {
          order: 0;
        }
        .eko {
          grid-template-columns: 1fr;
        }
        .eko__mid {
          padding: 22px;
        }
        .foot__grid {
          grid-template-columns: 1fr 1fr;
        }
        .nav__menu a.on::after {
          display: none;
        }
      }
      @media (max-width: 760px) {
        body {
          font-size: 16px;
        }
        .ch {
          padding: 64px 0;
        }
        .hero {
          padding: 58px 0 0;
        }
        .mk__stats {
          grid-template-columns: repeat(2, 1fr);
        }
        .nav__menu {
          display: none;
          position: absolute;
          top: 70px;
          left: 0;
          right: 0;
          background: #fff;
          flex-direction: column;
          gap: 0;
          padding: 8px 24px 18px;
          border-bottom: 1px solid var(--line);
          box-shadow: 0 14px 30px rgba(26, 42, 75, 0.1);
        }
        .nav__menu.open {
          display: flex;
        }
        .nav__menu a {
          width: 100%;
          padding: 13px 0;
          border-bottom: 1px solid var(--line);
          font-size: 16px;
        }
        .nav__menu .btn {
          margin-top: 12px;
          border-bottom: 0;
        }
        .nav__burger {
          display: block;
        }
        .hero__acts .btn {
          width: 100%;
        }
        .jtbl {
          overflow-x: auto;
        }
        .jtbl table {
          min-width: 540px;
        }
        .foot__grid {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        .ch__title {
          max-width: none;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
        }
        .rv {
          opacity: 1;
          transform: none;
        }
        html {
          scroll-behavior: auto;
        }
      }
      :focus-visible {
        outline: 3px solid var(--amber);
        outline-offset: 3px;
        border-radius: 4px;
      }
    
/* ============ MULTI-PAGE ADDITIONS ============ */
.ic { display: inline-flex; width: 1em; height: 1em; font-style: normal; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; display: block; }
.nav__burger .ic { width: 24px; height: 24px; }
.btn .ic { width: 20px; height: 20px; }
.foot ul a .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.foot__soc a .ic { width: 18px; height: 18px; }
.wafloat .ic { width: 30px; height: 30px; }
.tv__tap .ic, .notif__hd .ic { width: 16px; height: 16px; }

.btn--sm { min-height: 40px; padding: 9px 18px; font-size: 14.5px; box-shadow: none; }
.nav__menu > a.btn--sm { color: var(--navy); }
.nav__menu > a.btn--sm:hover { color: var(--navy); }

.nav__drop { position: relative; }
.nav__dropbtn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 15px "DM Sans", system-ui, sans-serif; color: #c2cde6; transition: color 0.15s; }
.nav__dropbtn:hover { color: #fff; }
.nav__dropbtn .ic { width: 15px; height: 15px; transition: transform 0.2s; }
.nav.is-solid .nav__dropbtn { color: var(--slate); }
.nav.is-solid .nav__dropbtn:hover { color: var(--navy); }
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: 0 22px 48px rgba(26, 42, 75, 0.16); }

.hero--sub { padding: 138px 0 76px; }
.hero--sub .hero__in { max-width: 860px; }
.hero--sub h1 { font-size: clamp(2rem, 4.3vw, 3.15rem); font-weight: 800; margin-bottom: 18px; color: #fff; }
.hero--sub .hero__acts { margin-bottom: 0; }
.crumb { display: flex; justify-content: center; gap: 8px; font-size: 13.5px; color: #8f9dbf; margin-bottom: 16px; }
.crumb a { color: #c2cde6; }
.crumb a:hover { color: #fff; }

.gcard > .ic { font-size: 26px; }
a.gcard--link { display: flex; flex-direction: column; color: inherit; transition: border-color 0.2s, transform 0.2s; }
a.gcard--link:hover { border-color: var(--navy); transform: translateY(-2px); }
a.gcard--link p { flex: 1; }
.gcard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: 14.5px; color: var(--navy); }
.gcard__go .ic { width: 16px; height: 16px; }
a.gcard--dark { background: var(--navy); border-color: var(--navy); color: #fff; }
a.gcard--dark p { color: #bfcbe6; }
a.gcard--dark .gcard__go { color: var(--amber); }
a.gcard--dark:hover { border-color: var(--amber); }
.ch--dark a.gcard--link h3 { color: #fff; }
.more { margin-top: 34px; text-align: center; }
.more a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--amber); }
.more .ic { width: 18px; height: 18px; }
.split__txt .pairs { margin-top: 26px; }

.mad { background: #0e1729; border: 7px solid #1d2742; border-radius: 16px; overflow: hidden; color: #fff; box-shadow: 0 24px 50px rgba(14, 23, 41, 0.3); }
.mad__top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.mad__top small { display: block; color: var(--amber); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.mad__top b { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: 17px; }
.mad__clock { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: 28px; }
.mad__run { background: var(--amber); color: var(--navy); font-weight: 700; font-size: 13.5px; padding: 8px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mad__body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; padding: 14px; }
.mad__media { min-height: 210px; border-radius: 10px; display: flex; align-items: flex-end; padding: 14px; font-weight: 700; font-size: 14px;
  background: linear-gradient(160deg, rgba(245, 197, 25, 0.22), transparent 55%), linear-gradient(135deg, #2e4372, #1a2a4b); }
.mad__side { display: grid; gap: 10px; }
.mad__w { background: #1a2a4b; border-radius: 10px; padding: 10px 12px; font-size: 12.8px; line-height: 1.5; color: #d7def0; }
.mad__w span { display: block; color: var(--amber); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 3px; }

.foot__grid--4 { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }

@media (max-width: 980px) {
  .foot__grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero--sub { padding: 112px 0 56px; }
  .nav__menu > a.btn--sm { width: 100%; margin-top: 14px; min-height: 48px; }
  .mad__body { grid-template-columns: 1fr; }
  .mad__media { min-height: 150px; }
  .foot__grid--4 { grid-template-columns: 1fr; }
}
.split > * { min-width: 0; }
.pain__role .ic svg { width: 17px; height: 17px; }
.gcard > .ic { font-size: 24px; }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .hero:not(.hero--sub) { padding-top: 104px; } }
.qa > button::after {
  content: ""; font-family: inherit; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============ MEGA MENU ============ */
.nav__drop { position: static; }
.nav__dropbtn.on { color: #fff; font-weight: 700; }
.nav.is-solid .nav__dropbtn.on { color: var(--navy); }
.nav__drop:hover .nav__dropbtn .ic, .nav__drop.open .nav__dropbtn .ic { transform: rotate(180deg); }
.nav__mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); box-shadow: 0 26px 50px rgba(26, 42, 75, 0.14); }
.nav__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
.nav__drop:hover .nav__mega, .nav__drop:focus-within .nav__mega, .nav__drop.open .nav__mega { display: block; }
.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 22px; padding-top: 26px; padding-bottom: 28px; }
.mega__h { font-family: "Plus Jakarta Sans"; font-weight: 700; font-size: 13px; color: var(--slate-2); margin: 0 0 8px 10px; }
.mega__col .mega__h ~ .mega__h { margin-top: 18px; }
.nav .nav__menu a.mega__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 10px; color: var(--navy); font-size: 14px; }
.nav .nav__menu a.mega__item:hover, .nav .nav__menu a.mega__item.on { background: var(--off); color: var(--navy); }
.nav .nav__menu a.mega__item.on::after { display: none; }
.mega__ic { width: 36px; height: 36px; border-radius: 9px; background: var(--off); display: grid; place-items: center; color: var(--amber-dp); flex-shrink: 0; }
.mega__item:hover .mega__ic, .mega__item.on .mega__ic { background: #fff; }
.mega__ic .ic { width: 18px; height: 18px; }
.mega__item b { display: block; font-family: "Plus Jakarta Sans"; font-weight: 700; font-size: 14.5px; color: var(--navy); line-height: 1.3; }
.mega__item small { display: block; font-size: 12.8px; color: var(--slate); line-height: 1.4; margin-top: 2px; font-weight: 400; }
.mega__promo { background: var(--navy); color: #c2cde6; border-radius: 14px; padding: 20px; align-self: start; font-size: 14px; line-height: 1.55; }
.mega__promo .mega__h { color: #fff; font-size: 15px; margin: 0 0 6px; }
.nav .nav__menu .mega__promo a.btn { margin-top: 14px; width: 100%; color: var(--navy); }

/* ============ ABOUT & CONTACT ============ */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vision { max-width: 860px; margin: 0 auto; text-align: center; }
.vision__q { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.45rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--navy); margin-top: 14px; }
.legal dl { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.legal dl > div { display: grid; grid-template-columns: 240px 1fr; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.legal dl > div:last-child { border-bottom: 0; }
.legal dt { font-weight: 700; color: var(--navy); }
.legal dd { margin: 0; color: var(--slate); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.contact__cards { display: grid; gap: 14px; }
.contact__office { margin-top: 14px; }
.contact__h { font-size: 16.4px; font-weight: 700; margin-bottom: 7px; }
.contact__note { margin-top: 12px; font-size: 14px; color: var(--slate); }
.contact__note a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.cform { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.cform__t { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.cform__s { color: var(--slate); font-size: 14.5px; margin-bottom: 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--navy); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--navy); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--amber-dp); outline-offset: 1px; border-color: var(--navy); }
.cform .btn { width: 100%; margin-top: 6px; }
.cform__err { color: var(--danger); font-size: 14px; margin-bottom: 10px; }
.foot__addr { display: flex; gap: 6px; color: #8593b4; font-size: 14px; line-height: 1.5; }
.foot__addr .ic { width: 16px; height: 16px; margin-top: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

@media (max-width: 980px) {
  .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav__menu { max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; }
  .nav__drop { width: 100%; }
  .nav__dropbtn { width: 100%; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--slate); }
  .nav__drop:hover .nav__mega, .nav__drop:focus-within .nav__mega { display: none; }
  .nav__drop:hover .nav__dropbtn .ic { transform: none; }
  .nav__drop.open .nav__mega { display: block; }
  .nav__drop.open .nav__dropbtn .ic { transform: rotate(180deg); }
  .nav__mega { position: static; border: 0; box-shadow: none; }
  .nav__mega::before { display: none; }
  .mega__grid { grid-template-columns: 1fr; gap: 0; padding: 4px 0 8px; }
  .mega__promo { display: none; }
  .mega__h { margin: 12px 0 2px; }
  .mega__col .mega__h ~ .mega__h { margin-top: 12px; }
  .nav .nav__menu a.mega__item { padding: 9px 0; border-bottom: 0; border-radius: 0; align-items: center; }
  .nav .nav__menu a.mega__item:hover, .nav .nav__menu a.mega__item.on { background: none; }
  .mega__item small { display: none; }
  .mega__ic { width: 32px; height: 32px; }
  .grid2 { grid-template-columns: 1fr; }
  .legal dl > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 18px; }
  .cform { padding: 20px; }
}

.mega__side { display: grid; gap: 10px; align-content: start; }
.nav .nav__menu a.mega__item.mega__mad { border: 1px solid var(--line); }
.mega__side .mega__promo { margin-top: 4px; }
@media (max-width: 980px) { .mega__side { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .mega__side { gap: 0; }
  .mega__side .mega__promo { display: none; }
  .nav .nav__menu a.mega__item.mega__mad { border: 0; }
}

.mega__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mega__promo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 20px; }
.mega__promo p { margin: 0; }
.mega__promo .mega__h { margin: 0 0 2px; }
.nav .nav__menu .mega__promo a.btn { margin-top: 0; width: auto; flex-shrink: 0; }
@media (max-width: 980px) { .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega__side { grid-column: auto; } }
@media (max-width: 760px) { .mega__grid { grid-template-columns: 1fr; } .mega__promo { display: none; } }

.mega__col .mega__h ~ .mega__h { margin-top: 18px; }
@media (max-width: 980px) { .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mega__grid { grid-template-columns: 1fr; } }
.gcard--wide { grid-column: 1 / -1; }
a.gcard--wide { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 22px; align-items: center; padding: 26px 28px; }
a.gcard--wide > .ic { grid-row: 1 / 3; font-size: 34px; margin: 0; }
a.gcard--wide h3 { margin: 0; font-size: 19px; }
a.gcard--wide p { grid-column: 2; margin: 0; }
a.gcard--wide .gcard__go { grid-column: 3; grid-row: 1 / 3; margin: 0; }
@media (max-width: 760px) {
  a.gcard--wide { display: flex; padding: 24px 22px; }
  a.gcard--wide > .ic { margin-bottom: 13px; font-size: 26px; }
  a.gcard--wide .gcard__go { margin-top: 14px; }
}

/* ============ MEGA MENU v3 ============ */
.mega__grid { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 22px; padding-top: 22px; padding-bottom: 24px; }
.mega__intro { background: var(--navy); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.mega__kick { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--amber); }
.mega__title { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: 19px; line-height: 1.3; color: #fff; margin: 0; }
.mega__txt { font-size: 14px; line-height: 1.55; color: #c2cde6; margin: 0; }
.nav .nav__menu a.mega__all { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-weight: 700; font-size: 14px; padding-top: 8px; }
.nav .nav__menu a.mega__all:hover { color: #fff; }
.nav .nav__menu a.mega__all::after { display: none; }
.mega__all .ic { width: 16px; height: 16px; }
.mega__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mega__group { background: var(--off); border-radius: 14px; padding: 12px 10px 10px; }
.mega__group .mega__h { font-family: "Plus Jakarta Sans"; font-weight: 700; font-size: 12.5px; color: var(--slate-2); margin: 2px 8px 6px; }
.nav .nav__menu .mega__group a.mega__item { padding: 9px 8px; gap: 11px; border-radius: 10px; }
.nav .nav__menu .mega__group a.mega__item:hover, .nav .nav__menu .mega__group a.mega__item.on { background: #fff; box-shadow: 0 6px 16px rgba(26, 42, 75, 0.08); }
.mega__group .mega__ic { background: #fff; width: 34px; height: 34px; transition: background 0.15s, color 0.15s; }
.mega__group .mega__item:hover .mega__ic, .mega__group .mega__item.on .mega__ic { background: var(--navy); color: var(--amber); }
.nav .nav__menu a.mega__item.mega__mad { border: 0; }
@media (max-width: 1100px) {
  .mega__grid { grid-template-columns: 1fr; }
  .mega__intro { display: none; }
}
@media (max-width: 760px) {
  .mega__grid { grid-template-columns: 1fr; gap: 0; padding: 4px 0 8px; }
  .mega__groups { grid-template-columns: 1fr; gap: 0; }
  .mega__group { background: none; padding: 0; border-radius: 0; }
  .mega__group .mega__h { margin: 12px 0 2px; }
  .nav .nav__menu .mega__group a.mega__item { padding: 9px 0; align-items: center; }
  .nav .nav__menu .mega__group a.mega__item:hover, .nav .nav__menu .mega__group a.mega__item.on { background: none; box-shadow: none; }
  .mega__group .mega__ic { background: var(--off); width: 32px; height: 32px; }
}