/* styles.css */
:root{
  --bg0:#05070c;
  --bg1:#0b1222;
  --card:rgba(16,22,36,.82);
  --border:rgba(255,255,255,.12);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --accent:#2f7bff;
  --accent2:#4cc3ff;
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 650px at 20% 20%, rgba(47,123,255,.18), transparent 60%),
    radial-gradient(900px 650px at 80% 10%, rgba(76,195,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: clamp(16px, 3vw, 48px);
}

.card{
  width:min(980px, 100%);
  border-radius:var(--radius);
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(16,22,36,.75), rgba(16,22,36,.92));
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

.header{
  display:grid;
  gap:18px;
  align-items:center;
  padding: clamp(18px, 3vw, 30px);
}

.logo{
  width: clamp(110px, 18vw, 180px);
  height:auto;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.headerText{ max-width: 60ch; }

.eyebrow{
  margin:0 0 6px 0;
  font-size:.92rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

h1{
  margin:0;
  font-size: clamp(1.6rem, 3.1vw, 2.4rem);
  line-height:1.1;
  letter-spacing:-.02em;
}

.accent{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.sub{
  margin:10px 0 0 0;
  color:var(--muted);
  line-height:1.55;
  font-size: clamp(1.0rem, 1.2vw, 1.1rem);
}

.divider{
  height:1px;
  background: rgba(255,255,255,.10);
}

.content{
  padding: clamp(18px, 3vw, 30px);
}

.callout{
  border:1px solid rgba(47,123,255,.22);
  background: rgba(47,123,255,.10);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.calloutTitle{
  font-weight:700;
  margin-bottom: 6px;
}

.calloutBody{
  color: rgba(234,240,255,.9);
  line-height:1.45;
}

.columns{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

.panel{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 14px 16px;
}

.panel h2{
  margin:0 0 10px 0;
  font-size:1.05rem;
  letter-spacing:-.01em;
}

.panel ul{
  margin:0;
  padding-left: 18px;
  color:var(--muted);
  line-height:1.6;
}

.fineprint{
  margin:16px 0 0 0;
  color: rgba(234,240,255,.58);
  line-height:1.55;
}

@media (min-width: 860px){
  .header{
    grid-template-columns: auto 1fr;
  }
  .columns{
    grid-template-columns: 1fr 1fr;
  }
}