@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap");

:root {
  --ink: #0d1d35;
  --muted: #5d6878;
  --paper: #e9eef4;
  --surface: #ffffff;
  --line: #bdc9d7;
  --accent: #f06b36;
  --accent-ink: #0d1d35;
  --deep: #0d1d35;
  --success: #087d70;
  --radius: 5px;
  --font-display: "Sora", Avenir, sans-serif;
  --font-body: "IBM Plex Sans", Arial, sans-serif;
}

.wordmark { font-family: var(--font-display); letter-spacing: -.03em; text-transform: uppercase; }
.wordmark-mark { border-radius: 5px; color: #fff; background: var(--accent); font-family: var(--font-display); transform: skew(-6deg); }
.site-header { border-bottom: 4px solid var(--accent); }
.hero { align-items: end; margin-top: 32px; }
.hero-copy { padding: 50px 0; }
.hero h1 { max-width: 850px; font-weight: 800; font-size: clamp(53px, 8.5vw, 112px); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-note { border: 0; border-left: 7px solid var(--accent); border-radius: 0; background: #dce5ef; }
.channel-banner { color: #fff; background: var(--deep); border: 0; }
.channel-banner .eyebrow { color: #ffab89; }
.channel-banner a { color: var(--deep); background: #fff; border-radius: 4px; }
.purchase-section { border-radius: 5px; border-top: 6px solid var(--accent); box-shadow: 12px 12px 0 rgba(13,29,53,.12); }
.section-heading h1, .section-heading h2 { text-transform: uppercase; letter-spacing: -.04em; }
.network-option { border-radius: 5px; }
.primary-action { border-radius: 5px; background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.order-total { border-radius: 5px; background: var(--deep); color: #fff; }
.order-total span, .order-total small { color: #c5d0df; }
.whatsapp-trigger { border-radius: 5px; background: var(--accent); }
.console-sidebar { background: var(--deep); }
.metric-grid > :nth-child(2) { background: #ffe0d2; }

@media (max-width: 680px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 26px 0; }
  .network-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}