/* ═══════════════════════════════════════════════════════════
       METRO ETHERNET  —  Dual-Brand Theme: İsim Kayıt × Vodafone
       Light base (#f8fafc/white)  +  İK Blue #2563eb  +  VDF Red #E60000
    ═══════════════════════════════════════════════════════════ */
    :root {
      /* ── Vodafone ── */
      --vdf:     #E60000;
      --vdf-d:   #BE0000;
      --vdf-l:   #cc0000;
      --vdf-bg:  #fff5f5;
      --vdf-brd: #fecaca;
      /* ── İsim Kayıt (site ana renkleri) ── */
      --ik:      #2563eb;
      --ik-d:    #1d4ed8;
      --ik-l:    #dbeafe;
      --ik-bg:   #eff6ff;
      --ik-brd:  #bfdbfe;
      /* ── Backgrounds (açık tema) ── */
      --bg:      #f8fafc;
      --bg-alt:  #ffffff;
      --bg-mid:  #f1f5f9;
      --text:    #0f172a;
      --text-2:  #334155;
      --text-3:  #64748b;
      --border:  #e2e8f0;
      /* ── Gradients ── */
      --grd-ik:   linear-gradient(135deg, #2563eb, #1d4ed8);
      --grd-vdf:  linear-gradient(135deg, #E60000, #BE0000);
      --grd-dual: linear-gradient(135deg, #1d4ed8 0%, #E60000 100%);
      --grd-txt-ik:  linear-gradient(90deg, #2563eb, #06b6d4);
      --grd-txt-vdf: linear-gradient(90deg, #E60000, #991b1b);
    }

    /* ── CO-BRAND BAR ────────────────────────────────── */
    .me-cobrand {
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 8px 0; text-align: center;
    }
    .me-cobrand-inner { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
    .me-cobrand-ik  { font-size: .72rem; font-weight: 800; color: var(--text-2); letter-spacing: .06em; text-transform: uppercase; }
    .me-cobrand-x   { font-size: .65rem; color: var(--text-3); }
    .me-cobrand-vdf {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--vdf); border-radius: 6px; padding: 4px 12px;
      font-size: .68rem; font-weight: 900; color: #fff; letter-spacing: .08em; text-transform: uppercase;
    }
    .me-cobrand-vdf-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); animation: bdot 2s infinite; }
    .me-cobrand-sep  { font-size: .62rem; color: var(--border); }
    .me-cobrand-info { font-size: .68rem; color: var(--text-3); }
    @keyframes bdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

    /* ── HERO ─────────────────────────────────────────── */
    .me-hero {
      background: linear-gradient(160deg, #f0f7ff 0%, #fff 40%, #fff8f8 75%, #fff5f5 100%);
      min-height: 88vh; display: flex; align-items: center;
      padding: 90px 0 70px; position: relative; overflow: hidden;
    }
    .me-hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 50% 60% at 0% 50%,  rgba(37,99,235,.07)  0%, transparent 60%),
        radial-gradient(ellipse 55% 55% at 108% 30%, rgba(230,0,0,.07)   0%, transparent 55%);
    }
    .me-hero::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(37,99,235,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.025) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 20%, transparent 80%);
    }

    /* ── BADGE ────────────────────────────────────────── */
    .me-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--vdf-bg); border: 1px solid var(--vdf-brd);
      border-radius: 999px; padding: 6px 18px; margin-bottom: 24px;
      font-size: .7rem; font-weight: 700; color: var(--vdf-l); letter-spacing: .09em; text-transform: uppercase;
    }
    .me-badge .bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--vdf); animation: bdot 2s ease-in-out infinite; }

    .me-hero h1 {
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 900; color: var(--text); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 20px;
    }
    .me-hero h1 em {
      background: var(--grd-txt-vdf); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal;
    }
    .me-hero .desc { font-size: 1.05rem; color: var(--text-3); line-height: 1.8; max-width: 540px; margin-bottom: 28px; }
    .me-hero .desc strong { color: var(--text-2); font-weight: 600; }

    /* ── PILLS ────────────────────────────────────────── */
    .me-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
    .me-pill {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--bg-mid); border: 1px solid var(--border);
      border-radius: 999px; padding: 7px 14px; font-size: .78rem; font-weight: 600; color: var(--text-2);
    }
    .me-pill .live { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .me-pill--on .live  { background: #16a34a; box-shadow: 0 0 8px #16a34a; animation: bdot 2s infinite; }
    .me-pill--vdf       { border-color: var(--vdf-brd); background: var(--vdf-bg); color: var(--vdf-l); }
    .me-pill--vdf .live { background: var(--vdf); box-shadow: 0 0 8px rgba(230,0,0,.5); animation: bdot 2s .4s infinite; }

    /* ── BUTTONS ──────────────────────────────────────── */
    .me-btn-p {
      display: inline-flex; align-items: center; gap: 9px;
      background: var(--grd-vdf); color: #fff; border: none; border-radius: 12px;
      padding: 14px 28px; font-size: .9rem; font-weight: 700; text-decoration: none; font-family: inherit;
      transition: all .2s; cursor: pointer;
    }
    .me-btn-p:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(230,0,0,.35); color: #fff; }
    .me-btn-g {
      display: inline-flex; align-items: center; gap: 9px;
      background: #fff; border: 1.5px solid var(--border);
      color: var(--text-2); border-radius: 12px; padding: 14px 28px;
      font-size: .9rem; font-weight: 600; text-decoration: none; font-family: inherit; transition: all .2s;
    }
    .me-btn-g:hover { border-color: var(--ik); color: var(--ik); }
    .me-btn-ik {
      display: inline-flex; align-items: center; gap: 9px;
      background: var(--grd-ik); color: #fff; border: none; border-radius: 12px;
      padding: 14px 28px; font-size: .9rem; font-weight: 700; text-decoration: none; font-family: inherit;
      transition: all .2s; cursor: pointer;
    }
    .me-btn-ik:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,99,235,.35); color: #fff; }

    /* ── HERO RIGHT PANEL (SVG network) ──────────────── */
    .me-hero-panel {
      background: #fff; border: 1px solid var(--border);
      border-radius: 22px; overflow: hidden;
      box-shadow: 0 20px 60px rgba(15,23,42,.1), 0 0 0 1px rgba(37,99,235,.04);
      animation: me-float 6s ease-in-out infinite;
    }
    @keyframes me-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    .me-hero-panel-bar {
      display: flex; align-items: center; gap: 8px; padding: 11px 16px;
      background: var(--bg-mid); border-bottom: 1px solid var(--border);
    }
    .me-hero-dot { width: 9px; height: 9px; border-radius: 50%; }
    .me-hero-dot--r { background: #ef4444; } .me-hero-dot--y { background: #f59e0b; } .me-hero-dot--g { background: #22c55e; }
    .me-hero-panel-title { font-size: .68rem; color: var(--text-3); margin-left: 4px; font-weight: 600; }
    .me-hero-panel-pill {
      margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
      background: var(--vdf-bg); border: 1px solid var(--vdf-brd);
      border-radius: 999px; padding: 3px 10px; font-size: .62rem; font-weight: 800; color: var(--vdf-l);
    }
    .me-hero-panel-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--vdf); animation: bdot 2s infinite; }
    /* SVG network diagram */
    .me-net-svg { display: block; width: 100%; height: auto; }

    /* Stats footer inside hero panel */
    .me-panel-stats {
      display: flex; border-top: 1px solid var(--border);
    }
    .me-panel-stat { flex: 1; text-align: center; padding: 14px 12px; border-right: 1px solid var(--border); }
    .me-panel-stat:last-child { border-right: none; }
    .me-panel-stat-n { font-size: 1rem; font-weight: 900; color: var(--vdf-l); line-height: 1; }
    .me-panel-stat-l { font-size: .6rem; color: var(--text-3); margin-top: 3px; }

    /* ── STATS STRIP ──────────────────────────────────── */
    .me-strip {
      background: #fff; border-top: 3px solid var(--vdf); border-bottom: 1px solid var(--border); padding: 0;
    }
    .me-strip-inner { display: flex; flex-wrap: wrap; border-left: 1px solid var(--border); }
    .me-mc { flex: 1; min-width: 120px; padding: 22px 18px; border-right: 1px solid var(--border); text-align: center; }
    .me-mc-n { font-size: 1.8rem; font-weight: 900; color: var(--vdf-l); line-height: 1; margin-bottom: 4px; }
    .me-mc-l { font-size: .7rem; color: var(--text-3); font-weight: 500; }

    /* ── FEATURES ─────────────────────────────────────── */
    .me-feat-sec { padding: 88px 0; background: var(--bg); }
    .me-feat-card {
      background: #fff; border: 1px solid var(--border);
      border-radius: 16px; padding: 28px 24px; height: 100%;
      transition: all .28s; position: relative; overflow: hidden;
    }
    .me-feat-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: var(--grd-vdf); opacity: 0; transition: opacity .28s;
    }
    .me-feat-card:hover { border-color: var(--vdf-brd); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(230,0,0,.08); }
    .me-feat-card:hover::before { opacity: 1; }
    .me-feat-ico {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
      margin-bottom: 16px; background: var(--vdf-bg); color: var(--vdf-l);
      border: 1px solid var(--vdf-brd);
    }
    .me-feat-tag { display: inline-block; font-size: .62rem; font-weight: 800; background: var(--vdf-bg); color: var(--vdf-l); border: 1px solid var(--vdf-brd); border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; letter-spacing: .06em; text-transform: uppercase; }
    .me-feat-title { font-size: .96rem; font-weight: 800; color: var(--text); margin-bottom: 9px; }
    .me-feat-desc { font-size: .84rem; color: var(--text-3); line-height: 1.75; margin: 0; }
    .me-feat-stat { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; }
    .me-feat-num { font-size: 1.5rem; font-weight: 900; color: var(--vdf-l); }
    .me-feat-lbl { font-size: .72rem; color: var(--text-3); }

    /* ── HOW IT WORKS ─────────────────────────────────── */
    .me-how-sec { padding: 88px 0; background: #fff; }
    .me-step {
      display: flex; gap: 20px; background: var(--bg);
      border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px;
      transition: all .25s;
    }
    .me-step:hover { border-color: var(--vdf-brd); box-shadow: 0 8px 24px rgba(230,0,0,.07); }
    .me-step-num {
      width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
      background: var(--grd-vdf); display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 900; color: #fff;
      box-shadow: 0 4px 14px rgba(230,0,0,.3);
    }
    .me-step-title { font-size: .94rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
    .me-step-desc { font-size: .84rem; color: var(--text-3); line-height: 1.72; margin: 0; }
    .me-step-connector { display: flex; align-items: center; justify-content: center; padding: 4px 0; }
    .me-step-connector::before {
      content: ''; display: block; width: 2px; height: 28px;
      background: linear-gradient(180deg, var(--vdf-brd), transparent);
      border-radius: 1px;
    }
    /* How - info boxes */
    .me-how-info-box {
      background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px;
    }
    .me-how-info-lbl { font-size: .72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
    .me-how-info-val { font-size: 1.1rem; font-weight: 900; color: var(--ik); }

    /* ── RADIO LINK SECTION ───────────────────────────── */
    .me-rl-sec { padding: 88px 0; background: var(--bg-mid); }
    .me-rl-card {
      background: #fff; border: 1px solid var(--border);
      border-radius: 18px; padding: 30px 26px; height: 100%;
      transition: all .25s;
    }
    .me-rl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(37,99,235,.1); border-color: var(--ik-brd); }
    .me-rl-ico {
      width: 50px; height: 50px; border-radius: 13px;
      display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
      margin-bottom: 16px; background: var(--ik-bg); color: var(--ik);
      border: 1px solid var(--ik-brd);
    }
    .me-rl-title, .me-rl-card-title { font-size: .96rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
    .me-rl-desc, .me-rl-card-desc  { font-size: .84rem; color: var(--text-3); line-height: 1.75; margin: 0; }
    .me-rl-tag { display: inline-block; font-size: .62rem; font-weight: 800; background: var(--ik-bg); color: var(--ik); border: 1px solid var(--ik-brd); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; letter-spacing: .06em; text-transform: uppercase; }
    .me-rl-section-tag {
      display: inline-block; font-size: .7rem; font-weight: 800; color: var(--ik);
      background: var(--ik-bg); border: 1px solid var(--ik-brd);
      border-radius: 999px; padding: 5px 16px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px;
    }
    .me-rl-section { background: var(--ik-bg); border: 1.5px solid var(--ik-brd); border-radius: 16px; padding: 28px 32px; margin-top: 8px; }
    .me-rl-section-body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
    .me-rl-section-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ik); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .me-rl-section-title { font-size: 1rem; font-weight: 800; color: var(--ik-d); margin-bottom: 8px; }
    .me-rl-section-text { font-size: .88rem; color: var(--text-2); line-height: 1.75; margin: 0; }
    .me-rl-section-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--ik); color: #fff; border-radius: 10px; font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; align-self: center; transition: all .2s; margin-left: auto; }
    .me-rl-section-btn:hover { background: var(--ik-d); color: #fff; transform: translateY(-1px); }

    /* ── USE CASES ────────────────────────────────────── */
    .me-uc-sec { padding: 88px 0; background: #fff; }
    .me-uc-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 14px; padding: 26px 22px; height: 100%; transition: all .25s;
    }
    .me-uc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(230,0,0,.07); border-color: var(--vdf-brd); }
    .me-uc-ico {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
      margin-bottom: 16px; background: var(--vdf-bg); color: var(--vdf-l);
      border: 1px solid var(--vdf-brd);
    }
    .me-uc-title { font-size: .94rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
    .me-uc-desc  { font-size: .83rem; color: var(--text-3); line-height: 1.75; margin: 0; }

    /* ── PARTNER SECTION ──────────────────────────────── */
    .me-partner-sec {
      padding: 72px 0;
      background: linear-gradient(135deg, #fff5f5, #fff, #eff6ff);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      position: relative; overflow: hidden;
    }
    .me-partner-sec::after {
      content: ''; position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
      width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
      border: 1.5px solid rgba(230,0,0,.1);
      box-shadow: 0 0 0 40px rgba(230,0,0,.025), 0 0 0 80px rgba(230,0,0,.01);
    }
    .me-partner-card {
      background: #fff; border: 1px solid var(--border);
      border-radius: 20px; padding: 36px 32px; display: flex; align-items: center; gap: 32px;
      max-width: 860px; margin: 0 auto; position: relative; z-index: 1;
      box-shadow: 0 12px 40px rgba(15,23,42,.07);
    }
    @media (max-width: 767px) { .me-partner-card { flex-direction: column; text-align: center; align-items: center; gap: 22px; } }
    .me-partner-badge {
      width: 88px; height: 88px; flex-shrink: 0; border-radius: 20px;
      background: var(--grd-vdf);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.7rem; font-weight: 900; color: #fff;
      box-shadow: 0 8px 28px rgba(230,0,0,.35);
    }
    .me-partner-official {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
      color: var(--vdf-l); background: var(--vdf-bg); border: 1px solid var(--vdf-brd);
      border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
    }
    .me-partner-title { font-size: 1.15rem; font-weight: 900; color: var(--text); margin-bottom: 10px; }
    .me-partner-desc { font-size: .9rem; color: var(--text-3); line-height: 1.75; margin: 0; }
    .me-partner-desc strong { color: var(--text-2); }

    /* ── COMPARISON (competitor analysis) ─────────────── */
    .me-compare-sec { padding: 88px 0; background: var(--bg); }
    .me-comp-wrap { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: clip; box-shadow: 0 4px 24px rgba(15,23,42,.06); }

    /* Plan Tabs — sadece mobilde görünür */
    .me-plan-tabs { display: none; }
    @media(max-width:767px){
      .me-plan-tabs {
        display: flex; position: relative; gap: 0;
        background: #f1f5f9; border-radius: 14px; padding: 5px;
        margin-bottom: 16px;
      }
      .me-tab-slider {
        position: absolute; top: 5px; bottom: 5px;
        background: #fff; border-radius: 10px;
        box-shadow: 0 2px 12px rgba(15,23,42,.12);
        transition: left .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
        pointer-events: none; z-index: 0;
      }
      .me-plan-tab {
        flex: 1; padding: 10px 4px; border: none; border-radius: 10px;
        background: transparent; font-size: .72rem; font-weight: 600;
        color: #64748b; cursor: pointer; transition: color .2s;
        font-family: inherit; white-space: nowrap; position: relative; z-index: 1;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
      }
      .me-plan-tab.active { color: #b91c1c; font-weight: 700; }
      .me-tab-badge {
        display: inline-block;
        background: linear-gradient(90deg,#E60000,#f97316);
        color: #fff; font-size: .52rem; font-weight: 900; padding: 1px 6px;
        border-radius: 999px; letter-spacing: .04em;
      }
      /* Tablo sütun yönetimi */
      .me-comp-wrap { overflow: clip; }
      .me-comp-wrap .table-responsive { overflow: visible; }
      .me-comp-table { table-layout: fixed; width: 100%; }
      .me-comp-wrap[data-plan] .me-comp-table th:not(:first-child),
      .me-comp-wrap[data-plan] .me-comp-table td:not(:first-child) { display: none; }
      .me-comp-wrap[data-plan] .me-comp-table th:first-child,
      .me-comp-wrap[data-plan] .me-comp-table td:first-child { width: 48%; }
      /* Seçili plan */
      .me-comp-wrap[data-plan="1"] .me-comp-table th:nth-child(2),
      .me-comp-wrap[data-plan="1"] .me-comp-table td:nth-child(2) { display: table-cell; width: 52%; }
      .me-comp-wrap[data-plan="2"] .me-comp-table th:nth-child(3),
      .me-comp-wrap[data-plan="2"] .me-comp-table td:nth-child(3) { display: table-cell; width: 52%; }
      .me-comp-wrap[data-plan="3"] .me-comp-table th:nth-child(4),
      .me-comp-wrap[data-plan="3"] .me-comp-table td:nth-child(4) { display: table-cell; width: 52%; }
      .me-comp-wrap[data-plan="4"] .me-comp-table th:nth-child(5),
      .me-comp-wrap[data-plan="4"] .me-comp-table td:nth-child(5) { display: table-cell; width: 52%; }
    }
    .me-comp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
    .me-comp-table th { padding: 14px 16px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); color: var(--text-3); background: var(--bg-mid); }
    .me-comp-table td { padding: 12px 16px; font-size: .83rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-3); }
    .me-comp-table tr:last-child td { border-bottom: none; }
    /* İsim Kayıt+VDF column highlighted */
    .me-comp-col--us { background: linear-gradient(180deg, rgba(230,0,0,.04), transparent 80%); }
    .me-comp-col--us th { color: var(--vdf-l); background: #fff5f5; }
    .me-comp-col--us td { color: var(--text); font-weight: 600; }
    .me-comp-table th.center, .me-comp-table td.center { text-align: center; }
    .me-comp-table th.left, .me-comp-table td.left { text-align: left; }
    .me-ck { color: #16a34a; } .me-cx { color: #ef4444; } .me-cdash { color: #94a3b8; }
    .me-comp-provider { display: flex; flex-direction: column; }
    .me-comp-provider-name { font-weight: 800; font-size: .82rem; }
    .me-comp-provider-sub  { font-size: .7rem; color: var(--text-3); }

    /* ── WIZARD FORM SECTION ──────────────────────────── */
    .me-form-sec { padding: 88px 0; background: #fff; }
    .me-wizard {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 8px 32px rgba(15,23,42,.08);
    }
    /* Progress bar */
    .me-wiz-header { padding: 24px 28px 0; }
    .me-wiz-steps { display: flex; gap: 0; position: relative; margin-bottom: 28px; }
    .me-wiz-connector { display: none; }
    .me-wiz-step {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
      cursor: pointer; position: relative;
    }
    .me-wiz-step:not(:last-child)::after {
      content: ''; position: absolute; top: 16px; left: calc(50% + 16px);
      right: calc(-50% + 16px); height: 2px; background: var(--border); z-index: 0;
    }
    .me-wiz-step.active:not(:last-child)::after,
    .me-wiz-step.done:not(:last-child)::after { background: var(--vdf); }
    .me-wiz-num {
      width: 32px; height: 32px; border-radius: 50%; z-index: 1;
      display: flex; align-items: center; justify-content: center;
      font-size: .78rem; font-weight: 800; background: var(--border); color: var(--text-3);
      transition: all .25s;
    }
    .me-wiz-step.active .me-wiz-num { background: var(--vdf); color: #fff; box-shadow: 0 0 0 4px var(--vdf-bg); }
    .me-wiz-step.done .me-wiz-num   { background: #16a34a; color: #fff; }
    .me-wiz-label { font-size: .66rem; font-weight: 700; color: var(--text-3); text-align: center; white-space: nowrap; }
    .me-wiz-step.active .me-wiz-label { color: var(--vdf); }
    .me-wiz-step.done .me-wiz-label  { color: #16a34a; }
    /* Panels */
    .me-wiz-body { padding: 0 28px 28px; }
    .me-wiz-panel { display: none; }
    .me-wiz-panel.active { display: block; }
    .me-wiz-panel-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
    .me-wiz-panel-title i { color: var(--ik); font-size: .95rem; }
    .me-wiz-panel-sub { font-size: .84rem; color: var(--text-3); margin-bottom: 22px; }
    /* Form elements */
    .me-form-group { margin-bottom: 18px; }
    .me-form-label { font-size: .76rem; font-weight: 700; color: var(--text-2); display: block; margin-bottom: 6px; }
    .me-form-label .req { color: var(--vdf); }
    .me-form-input, .me-form-select {
      width: 100%; padding: 11px 14px; border-radius: 9px;
      border: 1.5px solid var(--border); background: #fff;
      font-size: .88rem; color: var(--text); font-family: inherit;
      transition: border-color .2s, box-shadow .2s; outline: none;
    }
    .me-form-input:focus, .me-form-select:focus { border-color: var(--ik); box-shadow: 0 0 0 3px var(--ik-bg); }
    .me-form-input.is-invalid, .me-form-select.is-invalid { border-color: var(--vdf); box-shadow: 0 0 0 3px var(--vdf-bg); }
    .me-form-req { color: var(--vdf); }
    /* Leaflet map */
    .me-map-wrap { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); margin-top: 12px; }
    #meMap { height: 280px; width: 100%; }
    .me-map-coord { margin-top: 8px; padding: 8px 12px; background: var(--ik-bg); border-radius: 8px; font-size: .78rem; font-weight: 700; color: var(--ik); }
    /* Service type cards */
    .me-svc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .me-svc-card {
      background: #fff; border: 2px solid var(--border); border-radius: 12px; padding: 18px 16px;
      cursor: pointer; transition: all .2s; text-align: left;
    }
    .me-svc-card:hover { border-color: var(--vdf-brd); }
    .me-svc-card.active, .me-svc-card.selected { border-color: var(--vdf); background: var(--vdf-bg); }
    .me-svc-card i { font-size: 1.5rem; color: var(--ik); margin-bottom: 10px; display: block; }
    .me-svc-card-title { font-size: .9rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
    .me-svc-card-sub, .me-svc-card-desc  { font-size: .78rem; color: var(--text-3); line-height: 1.5; }
    /* Speed pills */
    .me-speed-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .me-speed-pill {
      padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border);
      font-size: .82rem; font-weight: 700; color: var(--text-2); cursor: pointer; transition: all .2s; background: #fff;
    }
    .me-speed-pill:hover { border-color: var(--vdf-brd); color: var(--vdf-l); }
    .me-speed-pill.active, .me-speed-pill.selected { border-color: var(--vdf); background: var(--vdf-bg); color: var(--vdf); }
    /* Wizard nav */
    .me-wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
    .me-wiz-btn-back { background: #fff; border: 1.5px solid var(--border); color: var(--text-2); border-radius: 10px; padding: 10px 20px; font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 7px; }
    .me-wiz-btn-back:hover { border-color: var(--ik); color: var(--ik); }
    .me-wiz-btn-next { background: var(--grd-vdf); color: #fff; border: none; border-radius: 10px; padding: 10px 24px; font-size: .88rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 7px; }
    .me-wiz-btn-next:hover { box-shadow: 0 6px 20px rgba(230,0,0,.3); transform: translateY(-1px); }
    .me-wiz-btn-submit { background: var(--grd-ik); color: #fff; border: none; border-radius: 10px; padding: 10px 24px; font-size: .88rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 7px; }
    .me-wiz-btn-submit:hover { box-shadow: 0 6px 20px rgba(37,99,235,.3); transform: translateY(-1px); }
    .me-wiz-step-count { font-size: .75rem; color: var(--text-3); }

    /* ── FAQ ──────────────────────────────────────────── */
    .me-faq-sec { padding: 88px 0; background: var(--bg-mid); }
    .me-faq { max-width: 760px; margin: 0 auto; }
    .me-faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
    .me-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; }
    .me-faq-q span { font-size: .93rem; font-weight: 700; color: var(--text); transition: color .2s; }
    .me-faq-q:hover span { color: var(--vdf-l); }
    .me-faq-ico { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--vdf-bg); border: 1px solid var(--vdf-brd); display: flex; align-items: center; justify-content: center; color: var(--vdf-l); font-size: .7rem; transition: all .25s; }
    .me-faq-item.open .me-faq-ico { background: var(--vdf); border-color: transparent; color: #fff; transform: rotate(45deg); }
    .me-faq-a { font-size: .87rem; color: var(--text-3); line-height: 1.8; max-height: 0; overflow: hidden; transition: max-height .32s ease, padding .32s; padding: 0 20px; }
    .me-faq-item.open .me-faq-a { max-height: 260px; padding-bottom: 18px; }

    /* ── Section headers (light theme) ───────────────── */
    .me-section-tag {
      display: inline-block; font-size: .7rem; font-weight: 800; color: var(--vdf-l);
      background: var(--vdf-bg); border: 1px solid var(--vdf-brd);
      border-radius: 999px; padding: 5px 16px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px;
    }
    .me-section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 900; color: var(--text); margin-bottom: 14px; }
    .me-section-title span { background: var(--grd-txt-vdf); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .me-section-sub { font-size: 1rem; color: var(--text-3); line-height: 1.75; max-width: 600px; }

    /* ── CTA ──────────────────────────────────────────── */
    .me-cta-sec {
      padding: 88px 0;
      background: linear-gradient(135deg, #eff6ff 0%, #fff 40%, #fff5f5 100%);
      border-top: 1px solid var(--border);
    }
    .me-cta-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--vdf-bg); border: 1px solid var(--vdf-brd); border-radius: 999px; padding: 6px 18px; font-size: .7rem; font-weight: 700; color: var(--vdf-l); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 20px; }
    .me-cta-sec h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: var(--text); margin-bottom: 16px; }
    .me-cta-sec h2 span { background: var(--grd-txt-vdf); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .me-cta-sec > .container > p { font-size: 1.02rem; color: var(--text-3); line-height: 1.78; max-width: 560px; }
    .me-cta-contact { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
    .me-cta-info { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
    .me-cta-info i { font-size: 1.05rem; color: var(--vdf-l); }
    .me-cta-info-text { display: flex; flex-direction: column; }
    .me-cta-info-lbl { font-size: .62rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
    .me-cta-info-val  { font-size: .88rem; font-weight: 700; color: var(--text); }

    /* ── HYBRID INFRA SECTION ─────────────────────────────── */
    .me-hybrid-sec {
      padding: 88px 0;
      background: linear-gradient(160deg, #f0f9ff 0%, #fff 50%, #fff8f8 100%);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      position: relative; overflow: hidden;
    }
    .me-hybrid-sec::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 55% 50% at 10% 40%, rgba(37,99,235,.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 90% 60%, rgba(230,0,0,.05) 0%, transparent 60%);
    }
    .me-hybrid-diagram-wrap {
      background: #fff; border: 1px solid var(--border);
      border-radius: 20px; overflow: clip;
      box-shadow: 0 16px 48px rgba(15,23,42,.09), 0 0 0 1px rgba(37,99,235,.04);
    }
    .me-hybrid-diagram-header {
      display: flex; align-items: center; gap: 8px; padding: 12px 18px;
      background: var(--bg-mid); border-bottom: 1px solid var(--border); flex-wrap: wrap;
    }
    .me-hybrid-diagram-dot { width: 10px; height: 10px; border-radius: 50%; }
    .me-hybrid-diagram-title {
      font-size: .72rem; font-weight: 700; color: var(--text-3); margin-left: 4px; flex: 1;
    }
    .me-hybrid-legend { display: flex; gap: 16px; align-items: center; }
    .me-hybrid-legend-item { display: flex; align-items: center; gap: 7px; font-size: .69rem; font-weight: 600; color: var(--text-3); }
    .me-hybrid-legend-line { display: inline-block; width: 28px; height: 3px; border-radius: 2px; }
    .me-hybrid-legend-line--fiber { background: #2563eb; }
    .me-hybrid-legend-line--radio { background: #E60000; border-top: none; }
    .me-hybrid-svg-wrap { width: 100%; }
    .me-hybrid-svg-wrap svg { display: block; width: 100%; height: auto; }
    @media(max-width:767px){
      .me-hybrid-diagram-wrap { overflow: visible; }
      .me-hybrid-svg-wrap { overflow: visible; }
      .me-hybrid-svg-wrap svg { aspect-ratio: 960 / 500; width: 100%; height: auto; min-width: unset; }
    }
    /* Info cards */
    .me-hybrid-card {
      background: #fff; border: 1.5px solid var(--border);
      border-radius: 16px; padding: 24px 20px; height: 100%; transition: all .25s;
    }
    .me-hybrid-card:hover { transform: translateY(-4px); }
    .me-hybrid-card--fiber { border-color: var(--ik-brd); }
    .me-hybrid-card--fiber:hover { box-shadow: 0 14px 36px rgba(37,99,235,.12); }
    .me-hybrid-card--radio { border-color: var(--vdf-brd); }
    .me-hybrid-card--radio:hover { box-shadow: 0 14px 36px rgba(230,0,0,.1); }
    .me-hybrid-card--mpls { border-color: #c4b5fd; }
    .me-hybrid-card--mpls:hover { box-shadow: 0 14px 36px rgba(99,102,241,.1); }
    .me-hybrid-card--noc { border-color: #bbf7d0; }
    .me-hybrid-card--noc:hover { box-shadow: 0 14px 36px rgba(22,163,74,.1); }
    .me-hybrid-card-icon {
      width: 46px; height: 46px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
      margin-bottom: 14px;
    }
    .me-hybrid-card--fiber .me-hybrid-card-icon { background: var(--ik-bg); color: var(--ik); border: 1px solid var(--ik-brd); }
    .me-hybrid-card--radio .me-hybrid-card-icon { background: var(--vdf-bg); color: var(--vdf-l); border: 1px solid var(--vdf-brd); }
    .me-hybrid-card--mpls .me-hybrid-card-icon { background: #ede9fe; color: #6366f1; border: 1px solid #c4b5fd; }
    .me-hybrid-card--noc  .me-hybrid-card-icon { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
    .me-hybrid-card-title { font-size: .96rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
    .me-hybrid-card-desc  { font-size: .83rem; color: var(--text-3); line-height: 1.72; margin: 0 0 12px; }
    .me-hybrid-card-tag {
      display: inline-block; font-size: .65rem; font-weight: 800;
      border-radius: 999px; padding: 3px 12px; letter-spacing: .05em; text-transform: uppercase;
    }
    .me-hybrid-card--fiber .me-hybrid-card-tag { background: var(--ik-bg); color: var(--ik); border: 1px solid var(--ik-brd); }
    .me-hybrid-card--radio .me-hybrid-card-tag { background: var(--vdf-bg); color: var(--vdf-l); border: 1px solid var(--vdf-brd); }
    .me-hybrid-card--mpls .me-hybrid-card-tag { background: #ede9fe; color: #6366f1; border: 1px solid #c4b5fd; }
    .me-hybrid-card--noc  .me-hybrid-card-tag { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }

    /* ── fade-up ──────────────────────────────────────── */
    .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
    .delay-1 { transition-delay: .12s; } .delay-2 { transition-delay: .22s; } .delay-3 { transition-delay: .32s; }

    /* ── Leaflet override ─────────────────────────────── */
    .leaflet-container { font-family: 'Inter', sans-serif; }