@font-face { font-family: "Newsreader"; src: url("fonts/PBNewsreader-Display.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader Title"; src: url("fonts/PBNewsreader-Title.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/PBDMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/PBDMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/PBDMSans-SemiBold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }

:root {
  --bg: #111214;
  --panel: #18191b;
  --text: #f4eee5;
  --text-2: #c4bcb0;
  --small: #a29b92;
  --gold: #f2b866;
  --gold-text: #f6d29a;
  --line: rgba(255, 255, 255, 0.12);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --serif-title: "Newsreader Title", "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(242, 184, 102, 0.14) 0%, rgba(242, 184, 102, 0) 45%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* Top bar */
.topbar { width: 100%; max-width: 1440px; margin: 0 auto; padding: 22px 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-family: var(--serif); font-size: 22px; line-height: 1; }
.brand img { width: 36px; height: 36px; border-radius: 22.5%; display: block; }
a.brand:hover .brand-name { text-decoration: underline; text-underline-offset: 4px; }

/* Footer */
.footer { width: 100%; max-width: 1440px; margin: auto auto 0; padding: 28px 40px 32px; text-align: center; color: var(--small); font-size: 14px; line-height: 1.7; }
.footer p { margin: 0; }
.footer a { color: var(--small); }
.footer a:hover { color: var(--gold-text); }

/* ---------- Home ---------- */
.hero { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; }
.hero-copy { min-width: 0; }
h1.headline { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 7vw, 96px); line-height: 1.02; color: var(--text); letter-spacing: -0.01em; text-wrap: balance; }
.headline .line1 { display: block; color: var(--gold); }
.headline .line2 { display: block; }
.sub { margin: 22px 0 0; max-width: 34em; font-size: 19px; line-height: 1.55; color: var(--text-2); }
.features { list-style: none; margin: 28px 0 0; padding: 0; max-width: 40em; }
.features li { padding: 0; margin: 0 0 22px; }
.features .label { display: block; font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--text); }
.features .desc { display: block; margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.features li:last-child { margin-bottom: 6px; }
.ficon { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: var(--gold); background: rgba(242, 184, 102, 0.08); border: 1px solid rgba(242, 184, 102, 0.28); }
.cta { display: inline-block; margin-top: 22px; padding: 12px 24px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-text); font-weight: 500; font-size: 15px; line-height: 1.2; }
.cta-wrap { margin: 0; }

.icon-card { position: relative; justify-self: center; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--line); border-radius: 40px; }
.icon-card::before { content: ""; position: absolute; inset: -40px; z-index: 0; background: radial-gradient(circle at 50% 50%, rgba(242, 184, 102, 0.22) 0%, rgba(242, 184, 102, 0) 65%); pointer-events: none; }
.icon-card { z-index: 0; }
.app-icon { position: relative; z-index: 1; display: block; width: 300px; height: 300px; border-radius: 22.5%; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4); }
.icon-card { isolation: isolate; }
.icon-card::before { z-index: -1; }

@media (min-width: 900px) {
  .features li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .features .ficon { grid-row: 1 / span 2; grid-column: 1; margin-top: 3px; }
  .features .label { grid-column: 2; }
  .features .desc { grid-column: 2; }
}

/* ---------- Inner pages ---------- */
.page { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 40px 56px; }
.page h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.1; color: var(--text); }
.page .date { margin: 10px 0 0; font-size: 14px; color: var(--small); }
.page h2 { margin: 36px 0 0; font-family: var(--serif-title); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--text); }
.page p { margin: 14px 0 0; }
.page p.q { margin-top: 22px; font-weight: 600; color: var(--text); }
.page p.q + p { margin-top: 6px; }
.page .date + p { margin-top: 24px; }

/* ---------- Phone ---------- */
@media (max-width: 899px) {
  .topbar { padding: 18px 24px; }
  .brand img { display: none; }
  .hero { grid-template-columns: 1fr; gap: 0; padding: 8px 24px 24px; text-align: center; align-items: start; justify-items: center; }
  .icon-card { order: -1; width: auto; height: auto; background: none; border: 0; border-radius: 0; margin-bottom: 24px; }
  .icon-card::before { inset: -60px; }
  .app-icon { width: 120px; height: 120px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.4); }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .sub { font-size: 17px; }
  .features { text-align: center; }
  .features li { display: flex; flex-direction: column; align-items: center; }
  .features .ficon { margin-bottom: 10px; }
  .page { padding: 12px 24px 48px; }
  .page h1 { font-size: 38px; }
  .footer { padding: 24px 24px 28px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .icon-card { width: 300px; height: 300px; }
  .app-icon { width: 220px; height: 220px; }
}