  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }

  :root {
      --navy: #003580;
      --navy-dark: #001f4d;
      --navy-mid: #00469e;
      --saffron: #FF8C00;
      --saffron-light: #FFA733;
      --green-ind: #138808;
      --white: #ffffff;
      --off: #f5f7fc;
      --text: #1a1a2e;
      --muted: #5a6478;
      --border: #e0e7f3;
      --iec: #006d77;
      --iec-mid: #0a9396;
      --iec-light: #e0f4f5;
      --iec-dark: #003d44;
      --iec-accent: #94d2bd;
  }

  html {
      scroll-behavior: smooth
  }

  body {
      font-family: 'DM Sans', sans-serif;
      color: var(--text);
      background: var(--white);
      overflow-x: hidden
  }

  .tricolor {
      display: flex;
      height: 5px
  }

  .tricolor div {
      flex: 1
  }

  .ticker {
      background: var(--navy-dark);
      color: #fff;
      padding: 8px 0;
      overflow: hidden;
      font-size: 0.8rem;
      font-weight: 500
  }

  .ticker-inner {
      display: flex;
      animation: tick 30s linear infinite;
      white-space: nowrap
  }

  .ticker-item {
      padding: 0 3rem;
      display: flex;
      align-items: center;
      gap: 8px
  }

  .ticker-item::before {
      content: '✦';
      color: var(--saffron);
      font-size: 0.7rem
  }

  @keyframes tick {
      0% {
          transform: translateX(0)
      }

      100% {
          transform: translateX(-50%)
      }
  }

  nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 0 5vw
  }

  .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      color: var(--navy);
      text-decoration: none;
      font-weight: 700
  }

  .logo-emblem {
      width: 36px;
      height: 36px;
      background: var(--navy);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 0.9rem;
      font-weight: 800
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none
  }

  .nav-links a {
      text-decoration: none;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 500;
      transition: color .2s
  }

  .nav-links a:hover {
      color: var(--navy)
  }

  .nav-cta {
      background: var(--saffron);
      color: #fff !important;
      padding: 8px 20px;
      border-radius: 6px;
      font-weight: 600 !important
  }

  .nav-phone {
      font-size: 0.85rem;
      color: var(--navy);
      font-weight: 600
  }

  .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 6px;
      border-radius: 8px;
      z-index: 1100
  }

  .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--navy);
      border-radius: 2px;
      transition: all .35s cubic-bezier(.4, 0, .2, 1);
      transform-origin: center
  }

  .hamburger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
  }

  .hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0)
  }

  .hamburger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
  }

  .nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 1050;
      opacity: 0;
      transition: opacity .3s
  }

  .nav-overlay.show {
      opacity: 1
  }

  .mobile-drawer {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 80%;
      max-width: 300px;
      background: var(--white);
      z-index: 1100;
      transform: translateX(-100%);
      transition: transform .35s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 4px 0 32px rgba(0, 53, 128, 0.15);
      display: flex;
      flex-direction: column
  }

  .mobile-drawer.open {
      transform: translateX(0)
  }

  .drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px;
      border-bottom: 1px solid var(--border)
  }

  .drawer-close {
      width: 36px;
      height: 36px;
      border: none;
      background: var(--off);
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.1rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center
  }

  .drawer-nav {
      flex: 1;
      overflow-y: auto;
      padding: 12px 0
  }

  .drawer-nav a {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 24px;
      text-decoration: none;
      color: var(--text);
      font-size: 0.95rem;
      font-weight: 500;
      border-left: 3px solid transparent;
      transition: all .2s
  }

  .drawer-nav a:hover {
      background: var(--off);
      color: var(--navy);
      border-left-color: var(--navy)
  }

  .drawer-nav-icon {
      font-size: 1.1rem;
      width: 20px;
      text-align: center
  }

  .drawer-cta {
      padding: 20px;
      border-top: 1px solid var(--border)
  }

  .drawer-cta a {
      display: block;
      text-align: center;
      background: var(--saffron);
      color: #fff;
      padding: 14px;
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      font-size: 0.95rem
  }

  .drawer-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px 0;
      font-size: 0.85rem;
      color: var(--navy);
      font-weight: 600;
      text-decoration: none
  }

  .mobile-drawer.open .drawer-nav a {
      animation: slideInLink .3s ease forwards;
      opacity: 0
  }

  .mobile-drawer.open .drawer-nav a:nth-child(1) {
      animation-delay: .05s
  }

  .mobile-drawer.open .drawer-nav a:nth-child(2) {
      animation-delay: .10s
  }

  .mobile-drawer.open .drawer-nav a:nth-child(3) {
      animation-delay: .15s
  }

  .mobile-drawer.open .drawer-nav a:nth-child(4) {
      animation-delay: .20s
  }

  .mobile-drawer.open .drawer-nav a:nth-child(5) {
      animation-delay: .25s
  }

  @keyframes slideInLink {
      from {
          opacity: 0;
          transform: translateX(-18px)
      }

      to {
          opacity: 1;
          transform: translateX(0)
      }
  }

  /* HERO */
  .page-hero {
      background: linear-gradient(135deg, var(--iec-dark) 0%, var(--iec) 55%, var(--iec-mid) 100%);
      padding: 56px 5vw 64px;
      position: relative;
      overflow: hidden
  }

  .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
  }

  .page-hero::after {
      content: '';
      position: absolute;
      right: -60px;
      bottom: -60px;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 70%)
  }

  .page-hero-inner {
      max-width: 1350px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: center
  }

  .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.55)
  }

  .breadcrumb a {
      color: rgba(255, 255, 255, 0.55);
      text-decoration: none
  }

  .breadcrumb a:hover {
      color: #fff
  }

  .breadcrumb span {
      color: rgba(255, 255, 255, 0.3)
  }

  .page-hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 3.5vw, 3rem);
      color: #fff;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 12px
  }

  .page-hero h1 em {
      color: var(--iec-accent);
      font-style: normal
  }

  .page-hero-sub {
      color: rgba(255, 255, 255, 0.75);
      font-size: 1rem;
      max-width: 520px;
      line-height: 1.7;
      font-weight: 300;
      margin-bottom: 24px
  }

  .hero-tags {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
  }

  .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 100px;
      padding: 5px 14px;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500
  }

  .hero-price-box {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 28px 32px;
      text-align: center;
      backdrop-filter: blur(10px);
      min-width: 200px
  }

  .hero-price-label {
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 6px
  }

  .hero-price {
      font-family: 'Playfair Display', serif;
      font-size: 2.4rem;
      font-weight: 800;
      color: #fff
  }

  .hero-price sup {
      font-size: 1rem;
      vertical-align: top;
      margin-top: 8px;
      display: inline-block
  }

  .hero-price-note {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 4px;
      font-weight: 300
  }

  .hero-apply-btn {
      display: block;
      margin-top: 16px;
      background: var(--saffron);
      color: #fff;
      padding: 11px 20px;
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      font-size: 0.9rem;
      text-align: center;
      transition: background .2s
  }

  .hero-apply-btn:hover {
      background: var(--saffron-light)
  }

  /* STICKY BAR */
  .sticky-bar {
      position: sticky;
      top: 64px;
      z-index: 900;
      background: var(--white);
      border-bottom: 2px solid var(--iec-light);
      padding: 0 5vw;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06)
  }

  .sticky-bar-inner {
      max-width: 1350px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 52px;
      gap: 16px;
      overflow-x: auto
  }

  .sticky-nav {
      display: flex;
      list-style: none
  }

  .sticky-nav a {
      display: block;
      padding: 0 16px;
      height: 52px;
      line-height: 52px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--muted);
      text-decoration: none;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: all .2s
  }

  .sticky-nav a:hover,
  .sticky-nav a.active {
      color: var(--iec);
      border-bottom-color: var(--iec)
  }

  .sticky-cta {
      background: var(--iec);
      color: #fff;
      padding: 8px 20px;
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background .2s
  }

  .sticky-cta:hover {
      background: var(--iec-dark)
  }

  /* LAYOUT */
  .content-layout {
      padding: 60px 5vw;
      background: var(--off)
  }

  .content-inner {
      max-width: 1350px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 40px;
      align-items: start
  }

  /* SECTIONS */
  .sec {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      margin-bottom: 24px
  }

  .sec-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--iec);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 10px
  }

  .sec h2 {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 14px;
      line-height: 1.25
  }

  .sec p {
      font-size: 0.9rem;
      color: var(--muted);
      line-height: 1.85;
      font-weight: 300;
      margin-bottom: 12px
  }

  .sec p:last-child {
      margin-bottom: 0
  }

  .sec p strong {
      color: var(--text);
      font-weight: 600
  }

  .sec h3 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
      margin: 22px 0 10px;
      padding-left: 12px;
      border-left: 3px solid var(--iec)
  }

  /* IEC STAT STRIP */
  .stat-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin: 20px 0;
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden
  }

  .stat-item {
      padding: 20px 16px;
      text-align: center;
      border-right: 1px solid var(--border);
      background: var(--white)
  }

  .stat-item:last-child {
      border-right: none
  }

  .stat-num {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--iec);
      margin-bottom: 4px
  }

  .stat-label {
      font-size: 0.75rem;
      color: var(--muted);
      font-weight: 400;
      line-height: 1.4
  }

  /* WHO NEEDS */
  .who-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 8px
  }

  .who-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--off);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text);
      border: 1px solid var(--border);
      transition: all .2s
  }

  .who-item:hover {
      border-color: var(--iec);
      background: var(--iec-light)
  }

  .who-icon {
      font-size: 1.2rem;
      flex-shrink: 0
  }

  /* BENEFITS GRID */
  .benefits-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 8px
  }

  .benefit-card {
      background: var(--off);
      border-radius: 12px;
      padding: 18px;
      display: flex;
      gap: 14px;
      border: 1px solid var(--border);
      transition: all .2s
  }

  .benefit-card:hover {
      border-color: var(--iec);
      background: var(--iec-light)
  }

  .benefit-icon {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--iec-dark), var(--iec-mid));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: #fff;
      flex-shrink: 0
  }

  .benefit-text h4 {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 5px
  }

  .benefit-text p {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.55;
      font-weight: 300
  }

  /* EXPORT SCHEMES GRID */
  .scheme-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 8px
  }

  .scheme-card {
      background: var(--off);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px;
      transition: all .2s
  }

  .scheme-card:hover {
      border-color: var(--iec);
      box-shadow: 0 4px 16px rgba(0, 109, 119, 0.08)
  }

  .scheme-icon {
      font-size: 1.6rem;
      margin-bottom: 8px
  }

  .scheme-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--iec-dark);
      margin-bottom: 5px
  }

  .scheme-desc {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.55;
      font-weight: 300;
      margin-bottom: 8px
  }

  .scheme-tag {
      font-size: 0.72rem;
      font-weight: 600;
      background: var(--iec-light);
      color: var(--iec);
      padding: 3px 10px;
      border-radius: 100px;
      display: inline-block
  }

  /* DOC LIST */
  .doc-category {
      margin-bottom: 20px
  }

  .doc-category-title {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px
  }

  .doc-category-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border)
  }

  .doc-items {
      display: flex;
      flex-direction: column;
      gap: 7px
  }

  .doc-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.85rem;
      color: var(--text);
      font-weight: 300;
      line-height: 1.5
  }

  .doc-item::before {
      content: '📄';
      font-size: 0.9rem;
      flex-shrink: 0;
      margin-top: 1px
  }

  /* PROCESS STEPS */
  .process-steps {
      display: flex;
      flex-direction: column;
      position: relative
  }

  .process-steps::before {
      content: '';
      position: absolute;
      left: 19px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--iec), var(--iec-light));
      z-index: 0
  }

  .process-step {
      display: flex;
      gap: 20px;
      position: relative;
      z-index: 1;
      padding-bottom: 26px
  }

  .process-step:last-child {
      padding-bottom: 0
  }

  .step-dot {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--iec);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      flex-shrink: 0;
      border: 3px solid var(--white);
      box-shadow: 0 0 0 2px var(--iec)
  }

  .step-content {
      padding-top: 8px
  }

  .step-content h4 {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px
  }

  .step-content p {
      font-size: 0.83rem;
      color: var(--muted);
      line-height: 1.65;
      font-weight: 300
  }

  .step-time {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.75rem;
      color: var(--iec);
      font-weight: 600;
      margin-top: 6px;
      background: var(--iec-light);
      padding: 3px 10px;
      border-radius: 100px
  }

  /* COMPARE TABLE */
  .compare-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.84rem;
      margin-top: 8px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--border)
  }

  .compare-table th {
      background: var(--navy);
      color: #fff;
      padding: 12px 14px;
      text-align: left;
      font-size: 0.76rem;
      font-weight: 600
  }

  .compare-table td {
      padding: 11px 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      font-weight: 300;
      line-height: 1.5;
      vertical-align: top
  }

  .compare-table tr:last-child td {
      border-bottom: none
  }

  .compare-table tr:nth-child(even) td {
      background: var(--off)
  }

  .check {
      color: var(--green-ind);
      font-weight: 700
  }

  .cross {
      color: #e53935;
      font-weight: 700
  }

  /* INFO BOXES */
  .box {
      border-radius: 10px;
      padding: 15px 18px;
      margin: 14px 0;
      font-size: 0.875rem;
      line-height: 1.7;
      font-weight: 400
  }

  .box.teal {
      background: var(--iec-light);
      border-left: 3px solid var(--iec);
      color: var(--iec-dark)
  }

  .box.green {
      background: #e8f5e9;
      border-left: 3px solid var(--green-ind);
      color: #1b5e20
  }

  .box.amber {
      background: #fff8e1;
      border-left: 3px solid #f9a825;
      color: #5d4037
  }

  .box.red {
      background: #fff5f5;
      border-left: 3px solid #e53935;
      color: #b71c1c
  }

  .box.blue {
      background: #eef3ff;
      border-left: 3px solid var(--navy);
      color: var(--navy)
  }

  /* FAQ */
  .faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px
  }

  .faq-item {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden
  }

  .faq-q {
      padding: 16px 20px;
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      user-select: none
  }

  .faq-q:hover {
      color: var(--iec)
  }

  .faq-icon {
      font-size: 1rem;
      color: var(--iec);
      flex-shrink: 0;
      transition: transform .3s
  }

  .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
      font-size: 0.84rem;
      color: var(--muted);
      line-height: 1.75;
      font-weight: 300;
      padding: 0 20px
  }

  .faq-item.open .faq-a {
      max-height: 300px;
      padding: 0 20px 16px
  }

  .faq-item.open .faq-icon {
      transform: rotate(45deg)
  }

  /* SIDEBAR */
  .sidebar {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: sticky;
      top: 120px
  }

  .sidebar-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden
  }

  .sidebar-card-header {
      background: linear-gradient(135deg, var(--iec-dark), var(--iec-mid));
      padding: 20px 24px
  }

  .sidebar-card-header h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px
  }

  .sidebar-card-header p {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.65);
      font-weight: 300
  }

  .sidebar-form {
      padding: 24px
  }

  .sf-group {
      margin-bottom: 14px
  }

  .sf-group label {
      display: block;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 5px
  }

  .sf-group input,
  .sf-group select {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font-size: 0.87rem;
      font-family: 'DM Sans', sans-serif;
      color: var(--text);
      outline: none;
      transition: border-color .2s
  }

  .sf-group input:focus,
  .sf-group select:focus {
      border-color: var(--iec);
      box-shadow: 0 0 0 3px rgba(0, 109, 119, 0.08)
  }

  .sf-group select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6478' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      cursor: pointer
  }

  .sf-submit {
      width: 100%;
      background: var(--iec);
      color: #fff;
      padding: 13px;
      border-radius: 8px;
      font-size: 0.95rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: all .2s
  }

  .sf-submit:hover {
      background: var(--iec-dark);
      transform: translateY(-1px)
  }

  .sf-note {
      text-align: center;
      font-size: 0.75rem;
      color: var(--muted);
      margin-top: 10px
  }

  .sf-success {
      display: none;
      text-align: center;
      padding: 24px
  }

  .sf-success-icon {
      font-size: 2.8rem;
      margin-bottom: 10px
  }

  .sf-success h4 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px
  }

  .sf-success p {
      font-size: 0.82rem;
      color: var(--muted);
      font-weight: 300;
      line-height: 1.6
  }

  .pricing-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px
  }

  .pricing-title {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--iec);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 16px
  }

  .pricing-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--off)
  }

  .pricing-item:last-child {
      border-bottom: none
  }

  .pricing-item-name {
      font-size: 0.85rem;
      color: var(--text);
      font-weight: 400
  }

  .pricing-item-price {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--navy)
  }

  .info-chips {
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .info-chip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.5;
      font-weight: 300
  }

  .info-chip-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--iec-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      flex-shrink: 0
  }

  /* CONTACT SECTION */
  .contact-section {
      padding: 72px 5vw;
      background: var(--iec-dark);
      position: relative;
      overflow: hidden
  }

  .contact-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at right center, rgba(255, 140, 0, 0.1) 0%, transparent 60%)
  }

  .contact-inner {
      max-width: 1350px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center
  }

  .contact-left h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 2.5vw, 2.4rem);
      font-weight: 800;
      color: #fff;
      margin-bottom: 16px;
      line-height: 1.2
  }

  .contact-left h2 em {
      color: var(--iec-accent);
      font-style: normal
  }

  .contact-left p {
      color: rgba(255, 255, 255, 0.65);
      font-size: 0.95rem;
      line-height: 1.7;
      margin-bottom: 28px;
      font-weight: 300
  }

  .contact-highlights {
      display: flex;
      flex-direction: column;
      gap: 12px
  }

  .contact-hl {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.75)
  }

  .contact-hl-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0
  }

  .contact-form-box {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 20px;
      padding: 36px
  }

  .contact-form-box h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px
  }

  .contact-form-box .sub {
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 24px;
      font-weight: 300
  }

  .cf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px
  }

  .cf-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 14px
  }

  .cf-group label {
      font-size: 0.78rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7)
  }

  .cf-group input,
  .cf-group select,
  .cf-group textarea {
      width: 100%;
      padding: 11px 13px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      font-size: 0.88rem;
      font-family: 'DM Sans', sans-serif;
      color: #fff;
      background: rgba(255, 255, 255, 0.08);
      outline: none;
      transition: border-color .2s
  }

  .cf-group input::placeholder,
  .cf-group textarea::placeholder {
      color: rgba(255, 255, 255, 0.35)
  }

  .cf-group input:focus,
  .cf-group select:focus,
  .cf-group textarea:focus {
      border-color: var(--iec-accent);
      box-shadow: 0 0 0 3px rgba(148, 210, 189, 0.12)
  }

  .cf-group select {
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-color: rgba(255, 255, 255, 0.08)
  }

  .cf-group select option {
      background: #003d44;
      color: #fff
  }

  .cf-group textarea {
      resize: vertical;
      min-height: 90px
  }

  .cf-submit {
      width: 100%;
      background: var(--saffron);
      color: #fff;
      padding: 14px;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: all .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px
  }

  .cf-submit:hover {
      background: var(--saffron-light);
      transform: translateY(-1px)
  }

  .cf-note {
      text-align: center;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.35);
      margin-top: 10px
  }

  .cf-success {
      display: none;
      text-align: center;
      padding: 32px 20px
  }

  .cf-success-icon {
      font-size: 3.5rem;
      margin-bottom: 12px
  }

  .cf-success h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 8px
  }

  .cf-success p {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.6;
      font-weight: 300
  }

  .cf-wa {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      background: #25D366;
      color: #fff;
      padding: 11px 22px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.88rem
  }

  /* FOOTER */
  footer {
      background: var(--navy-dark);
      color: rgba(255, 255, 255, 0.7);
      padding: 60px 5vw 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08)
  }

  .footer-grid {
      max-width: 1350px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1)
  }

  .footer-brand .logo {
      color: #fff;
      display: inline-flex
  }

  .footer-brand p {
      font-size: 0.85rem;
      line-height: 1.7;
      max-width: 280px;
      font-weight: 300;
      margin-top: 14px
  }

  .footer-col h5 {
      font-size: 0.85rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: 0.08em
  }

  .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .footer-col ul li a {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.85rem;
      transition: color .2s;
      font-weight: 300
  }

  .footer-col ul li a:hover {
      color: #fff
  }

  .footer-bottom {
      max-width: 1350px;
      margin: 0 auto;
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.4);
      flex-wrap: wrap;
      gap: 10px
  }

  .fbl {
      display: flex;
      gap: 20px
  }

  .fbl a {
      color: rgba(255, 255, 255, 0.4);
      text-decoration: none
  }

  .fbl a:hover {
      color: #fff
  }

  .wa-float {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 999;
      background: #25D366;
      color: #fff;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 1.6rem;
      box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4);
      transition: all .2s
  }

  .wa-float:hover {
      transform: scale(1.1)
  }

  .wa-tooltip {
      position: absolute;
      right: 70px;
      background: #fff;
      color: var(--text);
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 500;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      border: 1px solid var(--border)
  }

  .wa-float:hover .wa-tooltip {
      opacity: 1
  }

  /* RESPONSIVE */
  @media(max-width:900px) {
      .content-inner {
          grid-template-columns: 1fr
      }

      .sidebar {
          position: static
      }

      .page-hero-inner {
          grid-template-columns: 1fr
      }

      .hero-price-box {
          display: none
      }

      .contact-inner {
          grid-template-columns: 1fr
      }

      .stat-strip {
          grid-template-columns: 1fr 1fr
      }

      .stat-item:nth-child(2) {
          border-right: none
      }

      .stat-item:nth-child(3) {
          border-top: 1px solid var(--border)
      }

      .stat-item:nth-child(4) {
          border-top: 1px solid var(--border);
          border-right: none
      }

      .scheme-grid {
          grid-template-columns: 1fr
      }

      .footer-grid {
          grid-template-columns: 1fr 1fr
      }
  }

  @media(max-width:768px) {

      .nav-links,
      .nav-phone {
          display: none
      }

      .hamburger {
          display: flex
      }

      .nav-overlay {
          display: block
      }

      .benefits-grid,
      .who-grid,
      .scheme-grid {
          grid-template-columns: 1fr
      }

      .cf-row {
          grid-template-columns: 1fr
      }
  }

  @media(max-width:480px) {
      .footer-grid {
          grid-template-columns: 1fr
      }

      .stat-strip {
          grid-template-columns: 1fr 1fr
      }
  }