:root {
  color-scheme: light dark;
  --bg: #f7f9fb;
  --card: rgba(255,255,255,.88);
  --text: #1f2937;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #21a8a0;
  --accent2: #f05a5a;
  --shadow: 0 18px 60px rgba(15,23,42,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 0%, #e8fbf8 0, transparent 35%), var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(960px, calc(100% - 32px)); margin: 0 auto; }
header { padding: 26px 0; }
nav { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { font-weight: 800; color: var(--text); letter-spacing:-.02em; }
.navlinks { display:flex; gap:20px; flex-wrap:wrap; font-size:.95rem; }
.hero { display:grid; grid-template-columns: 1.25fr .75fr; align-items:center; gap:48px; padding: 58px 0 72px; }
.eyebrow { color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:.09em; font-size:.78rem; }
h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height:.98; letter-spacing:-.055em; margin:14px 0 24px; }
.lead { font-size:1.18rem; color:var(--muted); max-width:650px; }
.icon-card { display:flex; justify-content:center; }
.icon-card img { width:min(330px, 80vw); filter:drop-shadow(0 28px 35px rgba(15,23,42,.18)); }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.button { padding:12px 18px; border-radius:14px; font-weight:750; display:inline-block; border:1px solid var(--line); }
.button.primary { background:var(--text); color:white; border-color:var(--text); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:70px; }
.card { background:var(--card); border:1px solid rgba(226,232,240,.9); border-radius:22px; padding:24px; box-shadow:var(--shadow); backdrop-filter:blur(8px); }
.card h2, .card h3 { margin-top:0; line-height:1.2; }
.card p { color:var(--muted); margin-bottom:0; }
.section { padding: 20px 0 70px; }
.section h2 { font-size:2rem; letter-spacing:-.03em; }
.content { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:clamp(22px,4vw,42px); box-shadow:var(--shadow); }
.content h2 { margin-top:2rem; }
.content h2:first-child { margin-top:0; }
.meta { color:var(--muted); }
.notice { border-left:4px solid var(--accent2); padding:14px 16px; background:rgba(240,90,90,.07); border-radius:12px; }
footer { border-top:1px solid var(--line); padding:28px 0 42px; color:var(--muted); font-size:.92rem; }
@media (max-width:760px) {
  .hero { grid-template-columns:1fr; gap:22px; padding-top:30px; }
  .icon-card { order:-1; }
  .icon-card img { width:190px; }
  .grid { grid-template-columns:1fr; }
  nav { align-items:flex-start; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b1220; --card:rgba(17,24,39,.88); --text:#f1f5f9; --muted:#a7b2c2; --line:#243244; --shadow:0 20px 70px rgba(0,0,0,.28); }
  body { background: radial-gradient(circle at 20% 0%, #0c3836 0, transparent 34%), var(--bg); }
  .button.primary { color:#0b1220; background:#f8fafc; border-color:#f8fafc; }
}


/* Contact and support */
.contact-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:36px;
  padding:26px 30px;
  background:linear-gradient(135deg, rgba(33,168,160,.12), rgba(33,168,160,.04));
  border:1px solid rgba(33,168,160,.22);
  border-radius:22px;
}
.contact-strip h2 { margin:.2rem 0 .35rem; font-size:clamp(1.45rem,3vw,2rem); letter-spacing:-.025em; }
.contact-strip p { margin:0; color:var(--muted); }
.email-link, .support-email a { font-weight:800; }
.page-title { font-size:clamp(2.3rem,6vw,4rem); margin-bottom:18px; }
.support-content .lead { margin-bottom:34px; }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0; }
.support-card { border:1px solid var(--line); border-radius:18px; padding:22px; background:rgba(127,127,127,.035); }
.support-card h2 { margin-top:0; font-size:1.25rem; }
.support-email { font-size:1.2rem; margin:.3rem 0 .5rem; }
.support-secondary { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
@media (max-width:760px) {
  .contact-strip { align-items:flex-start; flex-direction:column; }
  .support-grid { grid-template-columns:1fr; }
}