/*---------------------------------------------------- Structure Cables CSS START -------------------------------------------------*/

 /* ───────────────────────────────
       HERO
    ─────────────────────────────── */
    .sc-hero {
      background: linear-gradient(135deg, #25599e 0%, #1a3a6e 100%);
      padding: 20px 0;
      position: relative;
      overflow: hidden;
    }
    .sc-hero::before {
      content: '';
      position: absolute;
      right: -100px; top: -120px;
      width: 380px; height: 380px;
      border-radius: 50%;
      background: rgba(255,255,255,.04);
      pointer-events: none;
    }
    .sc-hero::after {
      content: '';
      position: absolute;
      left: 55%; bottom: -60px;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: rgba(238,27,37,.1);
      pointer-events: none;
    }

    .sc-container {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .sc-hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 48px;
    }

    .sc-hero-left { flex: 1; }

    .sc-hero-crumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 500;
      color: rgba(255,255,255,.5);
      margin-bottom: 16px;
      letter-spacing: 1px;
    }
    .sc-hero-crumb .sc-crumb-active { color: rgba(255,255,255,.9); }
    .sc-hero-crumb svg { width: 13px; height: 13px; flex-shrink: 0; }

    .sc-hero-title {
      font-size: clamp(1.75rem, 3vw, 2.2rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.18;
      margin-bottom: 14px;
      letter-spacing: 1.5px;
    }
    .sc-hero-title .sc-hl { color: #7eb8ff; }

    .sc-hero-desc {
      font-size: 15px;
      color: rgba(255,255,255,.68);
      line-height: 1.72;
      max-width: 520px;
      margin-bottom: 26px;
      font-weight: 400;
      letter-spacing: .8px;
    }

    .sc-hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }
    .sc-hero-tag {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      color: rgba(255,255,255,.88);
      font-size: 12px;
      font-weight: 600;
      padding: 5px 14px;
      border-radius: 100px;
      letter-spacing: 1px;
    }

    .sc-hero-stats {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-shrink: 0;
    }
    .sc-stat-card {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 10px;
      padding: 14px 22px;
      text-align: center;
      min-width: 118px;
    }
    .sc-stat-num {
      font-size: 1.65rem;
      font-weight: 700;
      color: #fff;
      line-height: 1;
      letter-spacing: 0;
    }
    .sc-stat-num span { color: #7eb8ff; }
    .sc-stat-lbl {
      font-size: 14px;
      color: rgba(255,255,255,.48);
      margin-top: 4px;
      letter-spacing: 1.2px;
      font-weight: 500;
    }

    /* ───────────────────────────────
       SHARED UTILITIES
    ─────────────────────────────── */
    .sc-section { padding: 20px 0; }
    .sc-section--gray { background: #f8fafc; }
    .sc-section--white { background: #fff; }

    .sc-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #25599e;
      margin-bottom: 10px;
    }
    .sc-tag::before {
      content: '';
      display: block;
      width: 22px; height: 2.5px;
      background: #EE1B25;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .sc-sec-title {
      font-size: clamp(1.45rem, 2.4vw, 1.85rem);
      font-weight: 700;
      color: #282C32;
      line-height: 1.2;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }

    .sc-divider {
      width: 44px; height: 3px;
      background: #EE1B25;
      border-radius: 2px;
      margin-bottom: 18px;
    }

    .sc-sec-body {
      font-size: 15px;
      line-height: 1.78;
      color: #64748b;
      font-weight: 400;
      letter-spacing: .7px;
    }

    /* ───────────────────────────────
       ABOUT SECTION
    ─────────────────────────────── */
    .sc-about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .sc-about-img-wrap { position: relative; }
    .sc-about-img-wrap img {
      width: 100%;
      height: 500px;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }

    .sc-about-img-badge {
      position: absolute;
      bottom: -18px; right: 20px;
      background: linear-gradient(135deg, #25599e 0%, #3a7bc8 100%);
      color: #fff;
      border-radius: 10px;
      padding: 12px 20px;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(37,89,158,.38);
      letter-spacing: 1px;
      line-height: 1.3;
    }
    .sc-about-img-badge b {
      font-size: 1.45rem;
      display: block;
      letter-spacing: 0;
      line-height: 1;
    }

    .sc-about-content { padding-top: 10px; }

    .sc-checklist {
      list-style: none;
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .sc-checklist li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14.5px;
      color: #1e293b;
      font-weight: 500;
      line-height: 1.55;
    }
    .sc-check-icon {
      width: 22px; height: 22px;
      border-radius: 6px;
      background: linear-gradient(135deg, #25599e 0%, #3a7bc8 100%);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .sc-check-icon svg { width: 11px; height: 11px; }

    /* ───────────────────────────────
       CABLE TYPES
    ─────────────────────────────── */
    .sc-cables-header {
      margin-bottom: 44px;
    }

    .sc-cables-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .sc-cable-card {
      background: #fff;
      border-radius: 12px;
      border: 1px solid #E6E6E6;
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease;
    }
    .sc-cable-card:hover {
      transform: translateY(-5px);
      box-shadow: 0px 4px 25px 0px rgb(68 148 255 / 24%);
    }

    .sc-cable-card-img {
      width: 100%;
      height: 285px;
      object-fit: cover;
      display: block;
    }

    .sc-cable-accent {
      height: 3px;
      width: 100%;
    }
    .sc-accent-blue  { background: linear-gradient(90deg, #25599e, #3a7bc8); }
    .sc-accent-red   { background: linear-gradient(90deg, #EE1B25, #ff4d6d); }
    .sc-accent-navy  { background: linear-gradient(90deg, #0a1f44, #25599e); }

    .sc-cable-body { padding: 22px 22px 26px; }

    .sc-cable-icon-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .sc-cable-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .sc-icon-blue  { background: #e6f0ff; }
    .sc-icon-red   { background: rgba(238,27,37,.08); }
    .sc-icon-navy  { background: rgba(26,58,110,.08); }

    .sc-cable-card h3 {
      font-size: 1.2rem;
      font-weight: 700;
      color: #282C32;
      letter-spacing: 1px;
      line-height: 1.2;
      margin: 0;
    }
    .sc-cable-card p {
      font-size: 15px;
      line-height: 1.72;
      color: #64748b;
      font-weight: 400;
      letter-spacing: .6px;
    }

    /* ───────────────────────────────
       HOW IT WORKS
    ─────────────────────────────── */
    .sc-process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 44px;
      position: relative;
    }
    .sc-process-grid::before {
      content: '';
      position: absolute;
      top: 30px; left: 10%; right: 10%;
      height: 1px;
      background: #E6E6E6;
      z-index: 0;
    }
    .sc-process-step {
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .sc-step-circle {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #25599e 0%, #3a7bc8 100%);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      font-size: 1.2rem;
      box-shadow: 0 6px 18px rgba(37,89,158,.28);
      position: relative;
    }
    .sc-step-circle i
    {
        color: #fff;
    }
    .sc-step-num {
      position: absolute;
      top: -6px; right: -6px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: #EE1B25;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      letter-spacing: 0;
    }
    .sc-process-step h4 {
      font-size: 22px;
      font-weight: 700;
      color: #282C32;
      margin-bottom: 7px;
      letter-spacing: 1px;
    }
    .sc-process-step p {
      font-size: 15px;
      color: #64748b;
      line-height: 1.6;
      font-weight: 400;
      letter-spacing: .5px;
    }

    /* ───────────────────────────────
       HOTEL SECTION
    ─────────────────────────────── */
    .sc-hotel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    .sc-hotel-feats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 26px;
    }
    .sc-hotel-feat {
      background: rgb(0 80 200 / 5%);
      border: 1px solid #F1F1F1;
      border-radius: 10px;
      padding: 16px 18px;
      transition: border-color .2s;
    }
    .sc-hotel-feat:hover { border-color: #3a7bc8; }
    .sc-hotel-feat-ico { font-size: 1.3rem; margin-bottom: 8px; }
    .sc-hotel-feat h4 {
      font-size: 18px;
      font-weight: 700;
      color: #282C32;
      margin-bottom: 5px;
      letter-spacing: 1px;
    }
    .sc-hotel-feat p {
      font-size: 15px;
      color: #64748b;
      line-height: 1.55;
      font-weight: 400;
      letter-spacing: .5px;
    }

    .sc-hotel-img-wrap { position: relative; }
    .sc-hotel-img-wrap img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      display: block;
    }
    .sc-hotel-img-tag {
      position: absolute;
      top: 22px; left: -16px;
      background: linear-gradient(135deg, #EE1B25, #ff4d6d);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 10px 18px;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(238,27,37,.38);
      letter-spacing: 1px;
    }
    .sc-hotel-exp-card {
      position: absolute;
      bottom: -18px; right: 20px;
      background: linear-gradient(135deg, #25599e 0%, #3a7bc8 100%);
      color: #fff;
      border-radius: 10px;
      padding: 12px 20px;
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(37,89,158,.38);
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sc-hotel-exp-card .sc-exp-ico { font-size: 1.4rem; }
    .sc-hotel-exp-card b { font-size: 1.2rem; display: block; letter-spacing: 0; line-height: 1.1; }

    
    /* ───────────────────────────────
       CTA STRIP
    ─────────────────────────────── */
    .sc-cta-strip {
      background: linear-gradient(135deg, #25599e 0%, #1a3a6e 100%);
      padding: 20px 0;
      position: relative;
      overflow: hidden;
    }
    .sc-cta-strip::before {
      content: '';
      position: absolute;
      top: -120px; right: -80px;
      width: 300px; height: 300px;
      border-radius: 50%;
      background: rgba(255,255,255,.04);
      pointer-events: none;
    }
    .sc-cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      position: relative;
      z-index: 1;
    }
    .sc-cta-text h2 {
      font-size: 1.55rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      letter-spacing: 1px;
    }
    .sc-cta-text p {
      font-size: 15px;
      color: rgba(255,255,255,.65);
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: .7px;
      max-width: 520px;
    }
    .sc-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: #EE1B25;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 14px 30px;
      border-radius: 6px;
      text-decoration: none;
      white-space: nowrap;
      box-shadow: 0 6px 20px rgba(238,27,37,.38);
      transition: transform .18s, box-shadow .18s;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }
    .sc-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(238,27,37,.5); color: #fff; }
    .sc-cta-btn svg { transition: transform .18s; flex-shrink: 0; }
    .sc-cta-btn:hover svg { transform: translateX(4px); }

    /* ───────────────────────────────
       RESPONSIVE
    ─────────────────────────────── */
    @media (max-width: 960px) {
      .sc-hero::after { display: none; }
      .sc-hero-inner { flex-direction: column; align-items: flex-start; }
      .sc-hero-stats { flex-direction: row; }
      .sc-about-grid { grid-template-columns: 1fr; gap: 48px; }
      .sc-about-img-badge { right: 12px; }
      .sc-cables-grid { grid-template-columns: 1fr; }
      .sc-process-grid { grid-template-columns: 1fr 1fr; }
      .sc-process-grid::before { display: none; }
      .sc-hotel-grid { grid-template-columns: 1fr; gap: 56px; }
      .sc-hotel-img-tag { left: 10px; }
      .sc-why-grid { grid-template-columns: 1fr; }
      .sc-cta-inner { flex-direction: column; text-align: center; }
      .sc-cta-text p { max-width: 100%; }
      .sc-container { padding: 0 24px; }
    }

    @media (max-width: 600px) {
      .sc-hero { padding: 36px 0 40px; }
      .sc-hero-stats { width: 100%; justify-content: space-between; }
      .sc-stat-card { min-width: auto; flex: 1; padding: 12px 10px; }
      .sc-hotel-feats { grid-template-columns: 1fr; }
      .sc-process-grid { grid-template-columns: 1fr; }
    }

/*---------------------------------------------------- Structure Cables CSS END -------------------------------------------------*/


/*---------------------------------------------------- IDF & MDF CSS START -------------------------------------------------*/


    /* ══════════════════════
       HERO — diagonal split
    ══════════════════════ */
    .mdf-hero {
      position: relative;
      background: #0a1f44;
      overflow: hidden;
      padding: 20px 0;
    }

    /* diagonal image on right */
    .mdf-hero-imgbg {
      position: absolute;
      top: 0; right: 0;
      width: 58%;
      height: 100%;
      clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    .mdf-hero-imgbg img {
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: .35;
    }
    .mdf-hero-imgbg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #0a1f44 0%, transparent 60%);
    }

    /* grid lines decoration */
    .mdf-hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(58,123,200,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58,123,200,.07) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
    }

    .mdf-hero-inner {
      position: relative;
      z-index: 2;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* red vertical accent bar */
    .mdf-hero-vbar {
      width: 4px;
      height: 120px;
      background: linear-gradient(180deg, #EE1B25 0%, transparent 100%);
      border-radius: 2px;
      margin-right: 28px;
      flex-shrink: 0;
    }

    .mdf-hero-text {}
    .mdf-hero-sup {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      margin-bottom: 10px;
    }
    .mdf-hero-h1 {
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
      letter-spacing: 2px;
      margin-bottom: 16px;
    }
    .mdf-hero-h1 em {
      font-style: normal;
      color: #EE1B25;
    }
    .mdf-hero-desc {
      font-size: 14.5px;
      color: rgba(255,255,255,.6);
      line-height: 1.7;
      max-width: 480px;
      font-weight: 400;
      letter-spacing: .7px;
      margin-bottom: 28px;
    }

    /* breadcrumb */
    .mdf-hero-crumb {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: rgba(255,255,255,.35);
      font-weight: 500;
      letter-spacing: 1px;
    }
    .mdf-hero-crumb span.mdf-crumb-now { color: rgba(255,255,255,.7); }
    .mdf-hero-crumb svg { width: 12px; height: 12px; }

    /* ══════════════════════
       LAYOUT
    ══════════════════════ */
    .mdf-sec { padding: 20px 0; }
    .mdf-bg-w { background: #fff; }
    .mdf-bg-l { background: #f8fafc; }

    /* label row */
    .mdf-lrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .mdf-lrow-line { width: 20px; height: 2px; background: #EE1B25; border-radius: 2px; }
    .mdf-lrow-txt {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #25599e;
    }
    .mdf-sec-title {
      font-size: clamp(1.45rem, 2.4vw, 1.85rem);
      font-weight: 700;
      color: #282C32;
      letter-spacing: 1px;
      line-height: 1.2;
      margin-bottom: 12px;
    }
    .mdf-sec-body {
      font-size: 15px;
      color: var(--text-medium);
      line-height: 1.78;
      font-weight: 400;
      letter-spacing: .7px;
    }

    /* ══════════════════════
       OVERVIEW — left sticky image + right scroll content
    ══════════════════════ */
    .mdf-ov-grid {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 64px;
      align-items: start;
    }
    .mdf-ov-imgcol { position: relative; }
    .mdf-ov-img {
      width: 100%;
      aspect-ratio: 3/4;
      object-fit: cover;
      display: block;
      border-radius: 2px;
    }
    /* corner accent */
    .mdf-ov-corner {
      position: absolute;
      bottom: -10px; right: -10px;
      width: 80px; height: 80px;
      background: #EE1B25;
      z-index: 0;
      border-radius: 2px;
    }
    .mdf-ov-img { position: relative; z-index: 1; }

    .mdf-ov-badge {
      position: absolute;
      top: 24px; left: -16px;
      z-index: 2;
      background: #1a3a6e;
      color: #fff;
      padding: 12px 18px;
      border-radius: 2px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      border-left: 3px solid #EE1B25;
      box-shadow: 0 6px 20px rgba(0,0,0,.2);
    }
    .mdf-ov-badge strong { font-size: 1.5rem; display: block; line-height: 1; letter-spacing: 0; }

    .mdf-ov-content { padding-top: 4px; }

    /* accordion-style feature rows */
    .mdf-acc-rows { margin-top: 28px; }
    .mdf-acc-item {
      border-bottom: 1px solid #E6E6E6;
      padding: 18px 0;
    }
    .mdf-acc-item:first-child { border-top: 1px solid #E6E6E6; }
    .mdf-acc-head {
      display: flex;
      align-items: center;
      gap: 16px;
      cursor: default;
    }
    .mdf-acc-num {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #EE1B25;
      width: 24px;
      flex-shrink: 0;
    }
    .mdf-acc-title {
      font-size: 15px;
      font-weight: 700;
      color: #1a3a6e;
      letter-spacing: 1px;
      flex: 1;
    }
    .mdf-acc-arrow {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: #e6f0ff;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mdf-acc-body {
      margin-top: 10px;
      padding-left: 40px;
      font-size: 15px;
      color: var(--text-medium);
      line-height: 1.72;
      font-weight: 400;
      letter-spacing: .6px;
    }

    /* ══════════════════════
       COMPONENTS — 3-col card row with top image strip
    ══════════════════════ */
    .mdf-comp-row {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 10px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 25px;
    }
    .mdf-comp-cell {
      border-radius: 10px;
      background: #fff;
      display: flex;
      flex-direction: column;
      transition: background .2s;
    }
    .mdf-comp-cell:hover { background: #f8fafc; }

    .mdf-comp-img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
    }

    .mdf-comp-top {
      padding: 20px 22px 16px;
      border-bottom: 1px solid #F1F1F1;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .mdf-comp-icon {
      width: 44px; height: 44px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
    }
    .mdf-ci-b { background: #e6f0ff; }
    .mdf-ci-r { background: rgba(238,27,37,.08); }
    .mdf-ci-n { background: rgba(26,58,110,.08); }
    .mdf-comp-name {
      font-size: 1.1rem;
      font-weight: 700;
      color: #1a3a6e;
      letter-spacing: 1px;
      line-height: 1.2;
    }
    .mdf-comp-desc {
      padding: 16px 22px 22px;
      font-size: 15px;
      color: var(--text-medium);
      line-height: 1.7;
      font-weight: 400;
      letter-spacing: .6px;
      flex: 1;
    }
    .mdf-comp-tag {
      margin: 0 22px 20px;
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 4px 12px;
      border-radius: 100px;
    }
    .mdf-ct-b { background: #e6f0ff; color: #25599e; }
    .mdf-ct-r { background: rgba(238,27,37,.08); color: #EE1B25; }
    .mdf-ct-n { background: rgba(26,58,110,.08); color: #1a3a6e; }

    /* ══════════════════════
       IDF vs MDF — diagonal card pair
    ══════════════════════ */
    .mdf-split-wrap {
      margin-top: 44px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .mdf-split-card {
      border-radius: 10px;
      padding: 36px 32px;
      position: relative;
      overflow: hidden;
    }
    .mdf-split-card--light {
      background: #f8fafc;
      border: 1px solid #E6E6E6;
    }
    .mdf-split-card--dark {
      background: linear-gradient(135deg, #25599e 0%, #1a3a6e 100%);
    }

    /* decorative circle */
    .mdf-split-card::before {
      content: '';
      position: absolute;
      bottom: -60px; right: -60px;
      width: 200px; height: 200px;
      border-radius: 50%;
      pointer-events: none;
    }
    .mdf-split-card--light::before { background: rgba(37,89,158,.05); }
    .mdf-split-card--dark::before  { background: rgba(255,255,255,.04); }

    .mdf-split-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 100px;
      margin-bottom: 20px;
    }
    .mdf-split-card--light .mdf-split-badge { background: #e6f0ff; color: #25599e; }
    .mdf-split-card--dark  .mdf-split-badge { background: rgba(238,27,37,.2); color: #ff8a8f; }

    .mdf-split-ico { font-size: 2rem; margin-bottom: 12px; }
    .mdf-split-h3 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 1.2px;
      margin-bottom: 4px;
    }
    .mdf-split-card--light .mdf-split-h3 { color: #1a3a6e; }
    .mdf-split-card--dark  .mdf-split-h3 { color: #fff; }

    .mdf-split-sub {
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .mdf-split-card--light .mdf-split-sub { color: var(--text-medium); }
    .mdf-split-card--dark  .mdf-split-sub { color: rgba(255,255,255,.4); }

    .mdf-split-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .mdf-split-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: .6px;
    }
    .mdf-split-card--light .mdf-split-list li { color: #1e293b; }
    .mdf-split-card--dark  .mdf-split-list li { color: rgba(255,255,255,.75); }
    .mdf-sdot {
      width: 6px; height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 7px;
    }
    .mdf-split-card--light .mdf-sdot { background: #25599e; }
    .mdf-split-card--dark  .mdf-sdot { background: #7eb8ff; }

    /* ══════════════════════
       PROCESS — numbered horizontal
    ══════════════════════ */
    .mdf-proc-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 24px;
      margin-top: 44px;
    }
    .mdf-proc-item {
      position: relative;
      padding: 28px 24px 28px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #E6E6E6;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      overflow: hidden;
    }
    .mdf-proc-item:hover {
      border-color: #25599e;
      box-shadow: 0 4px 20px rgba(37,89,158,.12);
      transform: translateY(-4px);
    }
    /* bottom accent line */
    .mdf-proc-item::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #25599e, #3a7bc8);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s;
    }
    .mdf-proc-item:hover::after { transform: scaleX(1); }

    /* connector arrow between items */
    .mdf-proc-item:not(:last-child)::before {
      content: '→';
      position: absolute;
      top: 28px;
      right: -14px;
      z-index: 5;
      font-size: 16px;
      color: #E6E6E6;
      pointer-events: none;
    }

    .mdf-proc-num {
      font-size: 3rem;
      font-weight: 700;
      color: #f0f4ff;
      line-height: 1;
      letter-spacing: 0;
      margin-bottom: 4px;
      transition: color .2s;
    }
    .mdf-proc-item:hover .mdf-proc-num { color: #e6f0ff; }
    .mdf-proc-ico { font-size: 1.4rem; margin-bottom: 12px; }
    .mdf-proc-item h4 {
      font-size: 22px;
      font-weight: 700;
      color: #1a3a6e;
      margin-bottom: 8px;
      letter-spacing: 1px;
    }
    .mdf-proc-item p {
      font-size: 15px;
      color: var(--text-medium);
      line-height: 1.65;
      font-weight: 400;
      letter-spacing: .5px;
    }


    /* ══════════════════════
       CTA — full-width with bg image
    ══════════════════════ */
    .mdf-cta {
      position: relative;
      overflow: hidden;
      background: #0a1f44;
      padding: 20px 0;
    }
    .mdf-cta-imgbg {
      position: absolute;
      inset: 0;
    }
    .mdf-cta-imgbg img {
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: .12;
    }
    .mdf-cta-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #25599e 0%, #1a3a6e 100%);
    }
    .mdf-cta-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: center;
    }
    .mdf-cta-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #EE1B25;
      margin-bottom: 10px;
    }
    .mdf-cta-h2 {
      font-size: clamp(1.4rem, 2vw, 1.9rem);
      font-weight: 700;
      color: #fff;
      letter-spacing: 1.5px;
      line-height: 1.2;
      margin-bottom: 12px;
    }
    .mdf-cta-body {
      font-size: 14px;
      color: rgba(255,255,255,.6);
      line-height: 1.7;
      font-weight: 400;
      letter-spacing: .7px;
    }
    .mdf-cta-btns {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-shrink: 0;
    }
    .mdf-btn-a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: #EE1B25;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 14px 30px;
      border-radius: 3px;
      text-decoration: none;
      white-space: nowrap;
      transition: background .18s, transform .18s;
    }
    .mdf-btn-a:hover { color: #fff; background: #c8151e; transform: translateY(-1px); }
    .mdf-btn-b {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: transparent;
      color: rgba(255,255,255,.8);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 13px 30px;
      border-radius: 3px;
      text-decoration: none;
      border: 1.5px solid rgba(255,255,255,.25);
      white-space: nowrap;
      transition: border-color .18s, color .18s;
    }
    .mdf-btn-b:hover { border-color: rgba(255,255,255,.7); color: #fff; }

    /* ══════════════════════
       RESPONSIVE
    ══════════════════════ */
    @media (max-width: 960px) {
      .mdf-ov-grid { grid-template-columns: 1fr; gap: 48px; }
      .mdf-ov-imgcol .mdf-ov-badge { left: 12px; }
      .mdf-comp-row { grid-template-columns: 1fr; gap: 1px; }
      .mdf-split-wrap { grid-template-columns: 1fr; }
      .mdf-proc-grid { grid-template-columns: 1fr 1fr; }
      .mdf-proc-item::before { display: none; }
      .mdf-why-layout { grid-template-columns: 1fr; }
      .mdf-why-img { height: 220px; }
      .mdf-cta-inner { grid-template-columns: 1fr; }
      .mdf-cta-btns { flex-direction: row; }
      .mdf-wrap { padding: 0 24px; }
      .mdf-hero-inner { padding: 48px 24px 80px; }
      .mdf-hero-imgbg { width: 100%; clip-path: none; opacity: .15; }
    }
    @media (max-width: 600px) {
      .mdf-proc-grid { grid-template-columns: 1fr; }
      .mdf-why-icons { grid-template-columns: 1fr; }
      .mdf-cta-btns { flex-direction: column; }
    }

/*---------------------------------------------------- IDF & MDF CSS END -------------------------------------------------*/