:root{
    --navy-950:#071E38; --navy-900:#0A2A4D; --navy-800:#0A386C;
    --teal-500:#0AC0C1; --teal-400:#3ED9D2; --teal-300:#8FEAE3; --teal-100:#E4FBF8;
    --ink-soft:#B9CCDA; --line:rgba(255,255,255,0.14);
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh;
    font-family:'Inter', sans-serif;
    background:linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 60%, #0D4A87 100%);
    display:flex; align-items:center; justify-content:center;
    padding:32px 20px;
    -webkit-font-smoothing:antialiased;
    position:relative;
    overflow:hidden;
  }
  .spark{ position:absolute; animation:twinkle 2.4s ease-in-out infinite; }
  @keyframes twinkle{ 0%,100%{opacity:.2; transform:scale(.8);} 50%{opacity:1; transform:scale(1.15);} }

  .gate{
    max-width:480px; width:100%;
    text-align:center;
    position:relative; z-index:2;
  }
  .gate img.logo{ width:96px; height:96px; object-fit:contain; object-position:center; background:#fff; padding:6px; margin:0 auto 22px; border-radius:20px; }
  .gate h1{
    font-family:'Space Grotesk', sans-serif;
    color:#fff; font-size:22px; font-weight:600; margin:0 0 6px;
    letter-spacing:-0.01em;
  }
  .gate-hint{
    color:var(--ink-soft); font-size:14px; margin:0 0 30px;
    min-height:20px; transition:opacity .25s ease;
  }
  .gate-hint b{ color:var(--teal-300); font-weight:700; }

  .gate-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .gate-card{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--line);
    border-radius:18px;
    padding:26px 16px 22px;
    text-decoration:none;
    transition:transform .18s ease, border-color .18s ease, background .18s ease;
    position:relative;
  }
  .gate-card:hover{ transform:translateY(-3px); background:rgba(255,255,255,0.08); }
  .gate-card.suggested{
    border-color:var(--teal-500);
    background:linear-gradient(160deg, rgba(10,192,193,0.16), rgba(10,192,193,0.03));
    box-shadow:0 0 0 1px rgba(10,192,193,0.3);
  }
  .gate-card .flag{ font-size:38px; line-height:1; }
  .gate-card b{ color:#fff; font-family:'Space Grotesk', sans-serif; font-size:16px; }
  .gate-card span.lang{ color:var(--ink-soft); font-size:12.5px; }
  .suggested-tag{
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:var(--teal-500); color:var(--navy-950);
    font-size:10px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
    padding:4px 10px; border-radius:999px;
  }
  .suggested-tag[hidden]{ display:none; }

  .gate-foot{ margin-top:34px; color:rgba(255,255,255,0.4); font-size:12px; }