:root{
      --text:#eef3fb;
      --muted:#c8d2e6;
      --ring:#9ad1ff;
      --city:#4CAF50; /* tint for City side */
      --mbl:#0ea5e9;  /* tint for MBL side */
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text); background:#000; overflow:hidden;
    }

    /* ===== Background image layer (global) ===== */
    .bg{
      position:fixed; inset:0; z-index:-3;
      background:url("../images/hero-bg-full.jpg") center/cover no-repeat;
      transform:translateZ(0);  /* smoother on mobile */
    }
    /* Darken + gentle vignette so content is readable */
    .bg::after{
      content:""; position:absolute; inset:0; z-index:-2;
      background:
        radial-gradient(1400px 500px at 50% -10%, rgba(0,0,0,.35), transparent 60%),
        radial-gradient(1100px 500px at 50% 110%, rgba(0,0,0,.35), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.75));
    }

    /* ===== Split layout ===== */
    .split{
      position:relative; display:flex; height:100svh; width:100%;
      isolation:isolate;
    }
    .pane{
      position:relative; flex:1 1 50%; display:flex; align-items:center; justify-content:center;
      text-align:center; padding:40px clamp(18px, 4vw, 40px);
      cursor:pointer; text-decoration:none; color:inherit; outline:0;
      transition:flex-basis .35s ease, filter .25s ease, transform .25s ease;
      backdrop-filter:saturate(115%) blur(.5px);
    }
    .pane:focus-visible{ outline:3px solid var(--ring); outline-offset:-3px; border-radius:20px }
    .split:hover .pane{ filter:saturate(.9) brightness(.95) }
    .split:hover .pane:hover{
      flex-basis:58%;
      filter:none; transform:translateY(-2px);
    }

    /* side overlays for contrast + brand tint */
    .pane::before{
      content:""; position:absolute; inset:0; z-index:-1; border:1px solid rgba(255,255,255,.12); border-radius:20px;
      background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.38));
      box-shadow:0 18px 60px rgba(0,0,0,.45);
    }
    .pane.city::after,
    .pane.mbl::after{
      content:""; position:absolute; inset:0; z-index:-2; border-radius:20px;
      mix-blend-mode:overlay; opacity:.45; pointer-events:none;
      transition:opacity .25s ease;
    }
    .pane.city::after{ background:linear-gradient(135deg, rgba(76,175,80,.55), rgba(76,175,80,0)) }
    .pane.mbl::after{ background:linear-gradient(225deg, rgba(14,165,233,.55), rgba(14,165,233,0)) }
    .split:hover .pane:hover::after{ opacity:.65 }

    /* center content */
    .content{ max-width: 560px }
    .logo{ height:80px; width:auto; margin:0 auto 16px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)) }
    h2{ margin:0 0 8px; font-size:clamp(1.6rem, 2.8vw, 2.1rem); font-weight:800; letter-spacing:.3px }
    p.sub{ margin:0 0 18px; color:var(--muted) }
    .btn{
      display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:0px; font-weight:700;
      background:#fff; color:#0b1224; border:0; box-shadow:0 12px 32px rgba(0,0,0,.25)
    }
    .btn span{ transition:transform .2s ease }
    .pane:hover .btn span{ transform:translateX(4px) }

    /* vertical divider line + “or” dot */
    .divider{
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      height:min(70vh, 560px); width:2px; background:rgba(255,255,255,.18); border-radius:2px;
    }
    .divider::after{
      content:"or"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22); border-radius:0px; padding:6px 10px; font-weight:800; font-size:.82rem;
      color:#e7eefb; letter-spacing:.08em; box-shadow:0 6px 20px rgba(0,0,0,.4);
    }

    /* top-left brand watermark (optional) */
    .brand{
      position:fixed; top:18px; left:20px; display:flex; align-items:center; gap:10px; z-index:10;
      color:#e9f0ff; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.5)
    }
    .brand img{ height:30px; width:auto }

    /* footer */
    footer{
      position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:5;
      color:#d3dcee; font-size:.92rem; text-shadow:0 2px 8px rgba(0,0,0,.5)
    }

    /* ===== Mobile: stack halves ===== */
    @media (max-width: 880px){
      .split{ flex-direction:column }
      .pane{ height:50svh; border-radius:0 }
      .pane::before, .pane.city::after, .pane.mbl::after{ border-radius:0 }
      .divider{ width:min(70vw, 560px); height:2px }
    }