
img{max-width:100%;height:auto}
:root{
  --bg: #0e2b3f; --bg2:#072131; --brand:#1ba2c7; --accent:#cbb264;
  --text:#eaf2f6; --muted:#97b2c4; --card:#0f3550; --max: 1000px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, var(--brand)10%, transparent 40%),
             linear-gradient(160deg, var(--bg), var(--bg2) 60%);
  display:flex; align-items:center; justify-content:center;
}
.container{ width:100%; max-width:var(--max); padding:40px 24px; }
.card{ background: rgba(10,34,54,.55); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.08);
  border-radius: 16px; box-shadow: 0 10px 35px rgba(0,0,0,.35); padding: clamp(24px, 3vw, 40px); overflow: visible;}
.hero-logo{ padding-top: env(safe-area-inset-top, 0); text-align:center; margin-bottom: 16px;}
.hero-logo img{ display:block; margin:0 auto; width: min(72vw, 360px); max-width: 360px; height:auto; }
.logo-wrap{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.logo{ width:min(140px, 40vw); height:auto; display:block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
h1{ margin:0; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; letter-spacing:.02em; font-size: clamp(28px,4vw,44px); line-height:1.1; }
.tagline{ margin-top:6px; color: var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size: clamp(12px,1.8vw,14px); }
.hero{ margin-top: 20px; }
.hero p{ font-size: clamp(16px, 2.2vw, 18px); color:#d7e5ee; margin: 10px 0 0 0; }
.callout{ margin-top:20px; padding:16px 16px; border-left:4px solid var(--accent); background: rgba(203,178,100,.08); color:#f6f2e6; font-size: clamp(15px,2vw,17px); }
.cta-row{ margin-top: 26px; display:flex; gap:12px; flex-wrap:wrap; }
.button{ appearance:none; border:none; padding:12px 18px; border-radius:10px; font-weight:700; letter-spacing:.02em; cursor:pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.button.primary{ background: linear-gradient(180deg, #1fb2d8, #1185a4); color:white; box-shadow: 0 8px 18px rgba(31,178,216,.35); }
.button.primary:hover{ transform: translateY(-1px); }
.button.ghost{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.18); }
.footer{ margin-top:28px; display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size: 13px; flex-wrap:wrap; opacity:.9; }
.small{font-size:12px;}
.social a{color:var(--muted);text-decoration:none;margin-right:12px}
.social a:hover{color:var(--text);}
.footer-banner { margin-top: 24px; text-align: center; }
.footer-banner img { max-width: 160px; height: auto; opacity: 0.95; }
@media (max-width:600px){ .logo-wrap{gap:16px} }
