:root { --primary:#12408F; --text-light:#E8EEFF; --text-dark:#0C0C0C;
--bg1:#102a64; --bg2:#0d224f; --spot1:rgba(74,132,242,.18); --spot2:rgba(22,66,170,.16); --angle:170deg;
--card:rgba(13,24,58,.54); --card-border:rgba(82,119,196,.26); --shadow:0 18px 44px rgba(6,14,40,.36); --narrow:560px; --wifi:rgba(255,255,255,.10);} 
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text-light);
background:radial-gradient(1100px 720px at 15% 10%,var(--spot1),transparent 55%),radial-gradient(1100px 720px at 85% 90%,var(--spot2),transparent 50%),linear-gradient(var(--angle),var(--bg1),var(--bg2));animation:bgFloat 24s ease-in-out infinite alternate;position:relative} 
@keyframes bgFloat{0%{background-position:0% 0%,100% 100%,0% 0%}100%{background-position:8% 4%,92% 96%,0% 0%}}
.bg-waves{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6} .bg-waves .wave{fill:none;stroke:var(--wifi);stroke-width:2;stroke-linecap:round;stroke-dasharray:140 220}
.bg-waves .w1{animation:sweep 28s linear infinite} .bg-waves .w2{animation:sweep 34s linear infinite;stroke-dasharray:110 210}
.bg-waves .w3{animation:sweep 40s linear infinite;stroke-dasharray:90 190} .bg-waves .w4{animation:sweep 46s linear infinite;stroke-dasharray:70 170}
@keyframes sweep{to{stroke-dashoffset:-420}} .wrapper{min-height:100%;display:grid;place-items:center;padding:26px 14px;position:relative;z-index:1}
.frame{width:min(var(--narrow),95vw);border:1px solid var(--card-border);border-radius:14px;background:var(--card);backdrop-filter:blur(8px);box-shadow:var(--shadow);overflow:hidden}
.section{width:100%;padding:12px 14px} .header-white{background:#fff;color:var(--text-dark)}
.header-top{display:flex;align-items:center;gap:10px} .logo img{height:36px;display:block}
.hgroup h1{margin:0;font-size:clamp(18px,2.2vw,22px);color:#0C0C0C} .hgroup p{margin:4px 0 0 0;color:#2b2b2b;font-weight:600;font-size:13px}
.lang-wrap{display:grid;place-items:center;padding-top:6px} .lang-switch{display:inline-flex;border:1px solid rgba(12,12,12,.18);background:rgba(12,12,12,.04);border-radius:999px;overflow:hidden}
.lang-switch a{padding:6px 14px;font-weight:700;text-decoration:none;color:#0C0C0C;display:inline-block} .lang-switch a.active{background:#0C0C0C;color:#fff}
.formbox{border-top:1px solid var(--card-border)} .formbox .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.field{grid-column:span 12} @media(min-width:640px){.half{grid-column:span 6}}
label{display:block;font-weight:700;margin:6px 0 4px;color:#d7e3ff;font-size:13px}
input,select{width:100%;padding:12px 13px;border:1px solid rgba(157,178,233,.30);border-radius:10px;outline:none;background:rgba(255,255,255,.06);color:#f1f6ff;font-size:14px;transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:#a9b8e8} select{color:#f1f6ff}
input:focus,select:focus{border-color:#a9c1ff;box-shadow:0 0 0 3px rgba(20,66,149,.20)}
button[type=submit]{background:linear-gradient(180deg,#2a58c7,#173d95);color:#fff;border:0;padding:13px 16px;border-radius:999px;font-weight:800;width:100%;box-shadow:0 14px 30px rgba(23,61,149,.40);transition:transform .1s,box-shadow .15s}
button[type=submit]:hover{transform:translateY(-1px);box-shadow:0 20px 40px rgba(23,61,149,.50)} button[disabled]{opacity:.7;cursor:progress}
.listmask{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center} @media(max-width:640px){.listmask{grid-template-columns:1fr}}
.bullets{display:grid;gap:8px} .bullets div{display:flex;gap:8px;align-items:flex-start;color:#dbe6ff} .bullets svg{flex:0 0 auto;color:#99b4ff}
.artbox{display:grid;place-items:center} .artbox img{width:180px;opacity:.95;border-radius:12px;border:1px solid rgba(82,119,196,.20)}
.mascot{margin-top:8px;display:flex;align-items:center;gap:14px} .eye{width:16px;height:16px;border-radius:50%;background:#fff;position:relative;overflow:hidden}
.eye::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#1a3e95;top:4px;left:3px;animation:look 2.8s ease-in-out infinite} .eye:nth-child(2)::after{animation-duration:3.2s}
@keyframes look{0%,100%{left:3px}50%{left:7px}} .list-cta{margin-top:10px} .list-cta a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(82,119,196,.38);text-decoration:none;background:rgba(255,255,255,.08);color:#e8eeff}
.marquee-frame{border-top:1px solid var(--card-border)} .marquee{display:flex;gap:28px;white-space:nowrap;animation:scroll 18s linear infinite;padding:10px 8px} .marquee:hover{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.brand-pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(82,119,196,.30);font-size:12px;color:#d7e4ff;margin:2px}
.footer{text-align:center;font-size:12px;color:#aec0f5;padding:10px 0 30px 0} .footer a{color:#d7e5ff;text-decoration:none;border-bottom:1px dotted rgba(215,229,255,.45)} .footer a:hover{color:#fff}
small.err{color:#ff99a6;display:block;margin-top:4px} .notice{margin-top:8px;font-size:12px;color:#c7d6ff}
.modal-mask{position:fixed;inset:0;background:rgba(3,10,30,.55);display:none;align-items:center;justify-content:center;z-index:999}
.modal{width:min(520px,92vw);background:#0c1636;border:1px solid rgba(120,150,230,.35);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:18px;transform:translateY(10px) scale(.98);opacity:0;transition:all .18s ease;color:#e8eeff}
.modal h3{margin:0 0 6px 0;font-size:18px} .modal p{margin:0 0 10px 0;color:#cfe0ff} .modal .row{display:flex;gap:10px;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid rgba(120,150,230,.50);background:rgba(255,255,255,.06);color:#e8eeff;text-decoration:none}
.modal-mask.show{display:flex} .modal-mask.show .modal{transform:translateY(0) scale(1);opacity:1}

/* v22 loading UI */
.modal .loading {
  display:flex; align-items:center; gap:10px; margin:8px 0 6px 0;
}
.loader {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(215,229,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress {
  position:relative; width:100%; height:6px; border-radius:999px;
  background:rgba(255,255,255,.10); overflow:hidden; margin-top:6px;
}
.progress::after {
  content:""; position:absolute; inset:0;
  transform:translateX(-100%);
  animation:bar 1.2s ease-in-out infinite;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0));
}
@keyframes bar { 0%{transform:translateX(-100%)} 50%{transform:translateX(-10%)} 100%{transform:translateX(100%)} }