:root{
  --ink:#eef6ff;
  --bg:#0d47a1;
  --card:#1565c0;
  --card2:#1976d2;
  --accent:#ffca28;
  --line:rgba(255,255,255,.15);
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font:16px/1.5 system-ui,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}

.wrap{max-width:980px;margin:28px auto;padding:16px}

header{display:flex;align-items:center;gap:14px;margin:18px 0}
.mascot{font-size:84px;line-height:1}
.mascot-small{font-size:44px;line-height:1;flex-shrink:0}
header h1{margin:0;font-size:clamp(24px,4vw,38px)}
header p.sub{margin:4px 0 0;color:#ffd451;font-weight:700}

.card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:18px}

.row{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media (max-width:720px){.row{grid-template-columns:1fr}}

label{font-size:14px;opacity:.95;display:block;margin:6px 0 4px;font-weight:700}
small.muted{opacity:.8}

.select-wrap{position:relative}
select{width:100%;padding:10px 12px;background:var(--card2);color:var(--ink);border-radius:10px;border:1px solid var(--line);outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;height:60px;font-size:18px}
.select-wrap::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.9;font-size:18px}

.glow-init{box-shadow:0 0 0 8px rgba(255,255,255,.08),0 0 22px 6px rgba(255,255,255,.55) inset,0 0 28px rgba(255,255,255,.55);animation:glow-pulse 1.2s ease-in-out infinite alternate}
@keyframes glow-pulse{
  from{box-shadow:0 0 0 6px rgba(255,255,255,.05),0 0 14px 4px rgba(255,255,255,.45) inset,0 0 18px rgba(255,255,255,.45)}
  to{box-shadow:0 0 0 10px rgba(255,255,255,.10),0 0 26px 8px rgba(255,255,255,.70) inset,0 0 36px rgba(255,255,255,.70)}
}

.answer{display:flex;align-items:center;gap:10px;margin-top:12px;padding:14px;border-radius:12px;background:linear-gradient(180deg,#1e73d7,#1763bd);border:1px solid var(--line);min-height:72px}

.cta{margin-top:16px}
.btn{display:inline-block;padding:14px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.2);text-decoration:none;font-weight:800;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;background:transparent}
.btn.primary{background:var(--accent);color:#000}
.btn.ghost{background:transparent;color:var(--ink)}

footer{opacity:.7;text-align:center;margin:18px 0}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:9999}
.modal{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-width:680px;width:100%;max-height:90vh;overflow-y:auto}
.modal-content{display:flex;flex-direction:column}
.modal header{padding:18px;border-bottom:1px solid var(--line)}
.modal .body{padding:18px}
.modal .form-row{display:flex;flex-direction:column;gap:12px}

input,textarea{width:100%;border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:10px;padding:14px;font-size:18px}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.92)}
textarea{min-height:140px;resize:vertical;font-family:inherit}

.modal .actions{display:flex;gap:12px;justify-content:flex-end;padding:16px;border-top:1px solid var(--line)}

.success-message{text-align:center;padding:24px}
.success-message h3{color:#4caf50;font-size:24px;margin-bottom:16px}
.success-message p{margin:8px 0;line-height:1.8}
.success-message .phone{font-size:20px;font-weight:700;color:var(--accent)}