@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #f4f7f8;
  --muted: #9ca8b7;
  --night: #071019;
  --panel: #0e1a26;
  --line: #203044;
  --teal: #1bc3b2;
  --teal-dark: #0b746d;
  --coral: #ff6f73;
  --paper: #eaf0ef;
  --paper-ink: #0a1720;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: "Manrope", "Avenir Next", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

.hero {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 34%, rgba(27, 195, 178, .17), transparent 27rem),
    linear-gradient(135deg, #071019 0%, #09141f 54%, #071019 100%);
}
.nav {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.brand img { border-radius: 11px; }
.nav-link { color: var(--muted); text-decoration: none; font-size: .9rem; }
.nav-links { display: flex; gap: 24px; }
.hero-grid {
  width: min(1240px, calc(100% - 72px));
  min-height: calc(100svh - 96px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 50px;
  padding: 20px 0 72px;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .section-number {
  margin: 0 0 22px;
  color: var(--teal);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, p { text-wrap: pretty; }
h1 {
  margin: 0;
  font-size: clamp(3.4rem, 6.8vw, 7.1rem);
  line-height: .98;
  letter-spacing: -.075em;
  font-weight: 800;
}
h1 em { color: var(--teal); font-style: normal; }
.hero-lead {
  max-width: 650px;
  margin: 32px 0 0;
  color: #c4cdd5;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}
.actions { display: flex; align-items: center; gap: 20px; margin-top: 38px; }
.primary {
  display: inline-block;
  padding: 15px 23px;
  border-radius: 11px;
  background: var(--teal);
  color: #041211;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(27, 195, 178, .16);
  transition: transform .18s ease, background .18s ease;
}
.primary:hover { transform: translateY(-2px); background: #2ad5c4; }
.secondary { color: #cbd4dc; text-underline-offset: 5px; }
.micro { margin-top: 20px; color: #6f7e8e; font-size: .76rem; }

.phone-stage { position: relative; height: 720px; }
.phone {
  position: absolute;
  width: 285px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  box-shadow: 0 38px 80px rgba(0,0,0,.48);
}
.phone-main { z-index: 2; left: 3%; top: 3%; transform: rotate(-5deg); animation: settle 700ms ease-out both; }
.phone-result { z-index: 1; right: 0; bottom: -6%; transform: rotate(5deg); animation: settleTwo 850ms ease-out both; }
.pulse { position: absolute; border: 1px solid rgba(27,195,178,.17); border-radius: 50%; }
.pulse-one { width: 500px; height: 500px; top: 8%; left: 4%; }
.pulse-two { width: 650px; height: 650px; top: -2%; left: -8%; }
@keyframes settle { from { opacity: 0; transform: translateY(40px) rotate(-5deg); } }
@keyframes settleTwo { from { opacity: 0; transform: translateY(60px) rotate(5deg); } }

main > section, footer { padding-left: max(36px, calc((100vw - 1168px) / 2)); padding-right: max(36px, calc((100vw - 1168px) / 2)); }
.statement { padding-top: 120px; padding-bottom: 130px; background: var(--paper); color: var(--paper-ink); }
.statement .section-number, .facts .section-number { color: var(--teal-dark); }
h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.05; letter-spacing: -.055em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 78px; counter-reset: step; }
.steps article { border-top: 2px solid #9caeaa; padding-top: 22px; }
.steps strong { display: block; font-size: 1.04rem; }
.steps p { color: #526169; font-size: .92rem; }

.voice-section { min-height: 840px; display: grid; grid-template-columns: 1fr .72fr; align-items: center; gap: 90px; overflow: hidden; }
.voice-copy > p:not(.section-number) { max-width: 620px; color: var(--muted); }
blockquote { margin: 38px 0 0; padding-left: 24px; border-left: 3px solid var(--coral); color: #fff; font-size: 1.25rem; }
.dashboard-shot { align-self: end; width: 370px; max-height: 710px; object-fit: cover; object-position: top; border-radius: 42px 42px 0 0; box-shadow: 0 30px 80px #000; }

.facts { padding-top: 120px; padding-bottom: 120px; background: #12ad9f; color: #031311; }
.facts-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 90px; align-items: start; }
.facts-grid h2 { font-size: clamp(2.3rem, 4.3vw, 4.5rem); }
.facts-grid p { margin-top: 0; font-weight: 600; }

.guides { padding-top: 120px; padding-bottom: 120px; background: #0a151f; }
.guides-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; }
.guides-heading > p { margin: 0; color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 68px; }
.guide-card { min-height: 330px; padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); text-decoration: none; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease; }
.guide-card:hover { transform: translateY(-4px); border-color: var(--teal); }
.guide-card > span { color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-card h3 { margin: 45px 0 12px; max-width: 520px; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.04em; }
.guide-card p { margin: 0 0 30px; color: var(--muted); font-size: .92rem; }
.guide-card strong { margin-top: auto; color: var(--teal); }
.guide-card-accent { background: #10342f; }

.faq { padding-top: 120px; padding-bottom: 120px; }
.faq h2 { max-width: 760px; }
.faq-list { margin-top: 70px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 24px 0; }
summary { cursor: pointer; list-style: none; font-size: 1.15rem; font-weight: 700; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--teal); font-size: 1.4rem; }
details[open] summary::after { content: "−"; }
details p { max-width: 820px; margin: 16px 0 0; color: var(--muted); }

.final-cta { padding-top: 72px; padding-bottom: 72px; background: var(--panel); display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.final-cta p { margin: 0; font-size: clamp(1.45rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; }
footer { padding-top: 52px; padding-bottom: 52px; display: flex; justify-content: space-between; gap: 30px; color: #778696; font-size: .8rem; }
footer strong { color: var(--ink); font-size: 1rem; }
footer p { margin: 8px 0 0; }
.footer-links { display: flex; gap: 24px; align-items: flex-start; }
.footer-links a { text-underline-offset: 4px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 70px; }
  .phone-stage { height: 650px; margin-top: 10px; }
  .phone { width: min(52vw, 280px); }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .voice-section { grid-template-columns: 1fr; padding-top: 110px; gap: 50px; }
  .dashboard-shot { justify-self: center; }
  .facts-grid { grid-template-columns: 1fr; gap: 45px; }
  .guides-heading { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { padding: 20px; }
  .hero-grid { width: calc(100% - 40px); min-height: auto; padding: 70px 0 45px; }
  h1 { font-size: clamp(3.25rem, 16vw, 4.6rem); }
  .hero-lead { margin-top: 25px; }
  .actions { align-items: stretch; flex-direction: column; gap: 14px; }
  .primary { text-align: center; }
  .secondary { text-align: center; }
  .micro { text-align: center; }
  .phone-stage { height: 530px; }
  .phone { width: 59vw; border-radius: 26px; }
  .phone-main { left: -3%; }
  .phone-result { right: -7%; bottom: -2%; }
  main > section, footer { padding-left: 20px; padding-right: 20px; }
  .statement, .facts, .guides, .faq { padding-top: 82px; padding-bottom: 86px; }
  .guide-grid { grid-template-columns: 1fr; margin-top: 45px; }
  .guide-card { min-height: 290px; padding: 26px; }
  .voice-section { padding-top: 84px; min-height: 760px; }
  .dashboard-shot { width: 82vw; max-height: 580px; }
  .final-cta { align-items: stretch; flex-direction: column; }
  footer { flex-direction: column; }
  .footer-links { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}