:root {
  color-scheme: dark;
  --ink: #fff8ff;
  --muted: #d8cfe0;
  --pink: #ff67bd;
  --cyan: #70ecff;
  --panel: rgba(28, 18, 48, 0.88);
  --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(112, 236, 255, 0.16), transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(255, 103, 189, 0.19), transparent 32rem),
    linear-gradient(155deg, #10081d, #24113d 55%, #0b1324);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--cyan); }
a:hover { color: white; }

.shell { width: min(920px, calc(100% - 36px)); margin: 0 auto; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
}

.brand { display: flex; align-items: center; gap: 13px; color: white; text-decoration: none; }
.brand img { width: 50px; height: 50px; border-radius: 13px; box-shadow: 0 8px 28px #0008; }
.brand strong { font-size: 1.25rem; }

select {
  color: white;
  background: #2b1a42;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
}

.hero {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 38px;
  padding: 54px 0 42px;
}

.hero > img { width: 100%; border-radius: 32px; box-shadow: 0 24px 80px #000a; }
h1 { margin: 0 0 12px; font-size: clamp(2.4rem, 8vw, 4.7rem); line-height: 1; letter-spacing: -0.04em; }
.lede { margin: 0; color: var(--muted); font-size: 1.18rem; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 24px 0 52px; }
.card { padding: 25px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 14px 46px #0005; }
.card h2 { margin: 0 0 10px; font-size: 1.22rem; }
.card p { margin: 0; color: var(--muted); }
.card.wide { grid-column: 1 / -1; }

.policy { padding: 24px 0 60px; }
.policy h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); margin-bottom: 26px; }
.policy section { margin: 24px 0; padding: 22px 25px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.policy h2 { margin-top: 0; }
.policy p, .policy li { color: var(--muted); }

footer { border-top: 1px solid var(--line); padding: 25px 0 42px; color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 620px) {
  header { align-items: flex-start; }
  .hero { grid-template-columns: 95px 1fr; gap: 18px; padding-top: 34px; }
  .grid { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
}