:root {
  --bg: #343F6B;
  --bg-alt: #3D4978;
  --bg-soft: #465384;
  --panel: #4D5A8B;
  --panel-2: #556395;
  --ink: #FFF8EE;
  --muted: #D9D2C8;
  --muted-2: #ECE4D8;
  --white: #ffffff;
  --amber: #E0B35A;
  --amber-soft: #E8C16F;
  --amber-deep: #C7933C;
  --indigo-accent: #6674AF;
  --line: rgba(255, 248, 238, 0.14);
  --line-strong: rgba(255, 248, 238, 0.22);
  --shadow: 0 24px 70px rgba(20, 25, 50, 0.33);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  background:
    radial-gradient(circle at 80% 6%, rgba(224,179,90,.22), transparent 20%),
    radial-gradient(circle at 18% 0%, rgba(232,193,111,.14), transparent 16%),
    var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.section-pad { padding: 104px 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--amber-soft);
  margin: 0 0 18px;
}
h1,h2,h3,p { margin-top: 0; }
h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3.4rem, 7vw, 6.9rem);
  line-height: .98;
  letter-spacing: -.045em;
  margin-bottom: 28px;
}
h1 span, h2 span { color: var(--amber-soft); }
h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 4.6vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: 26px;
}
h3 { font-size: 1.25rem; line-height: 1.2; }
.body-lg,.hero-text { font-size: 1.15rem; color: var(--muted); max-width: 680px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(52, 63, 107, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand span { display:flex; flex-direction:column; }
.brand strong { font-size: 1.05rem; }
.brand small { color: var(--muted); font-size: .72rem; }
.desktop-nav { display:flex; gap: 30px; font-size: .92rem; font-weight: 600; color: var(--muted-2); }
.desktop-nav a:hover { color: var(--amber-soft); }
.menu-toggle { display:none; border:0; background:transparent; font-size:1.55rem; color: var(--ink); }
.mobile-nav {
  border-top:1px solid var(--line);
  padding:14px 20px 22px;
  background: rgba(61, 73, 120, .98);
}
.mobile-nav a { display:block; padding:10px 0; font-weight:600; color: var(--muted-2); }

.hero {
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(224,179,90,.18), transparent 18%),
    linear-gradient(180deg, #343F6B 0%, #3D4978 55%, #343F6B 100%);
}
.hero-grid { display:grid; grid-template-columns: 1.04fr .96fr; align-items:center; gap:70px; }
.hero-text { max-width:600px; margin-bottom:30px; }
.signup-form {
  display:flex;
  max-width: 590px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--line-strong);
  padding:6px;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(28,35,67,.18);
}
.signup-form input {
  flex:1;
  border:0;
  outline:0;
  padding:0 20px;
  font:inherit;
  min-width:0;
  background:transparent;
  color: var(--ink);
}
.signup-form input::placeholder { color: rgba(255,248,238,.70); }
.signup-form button {
  border:0;
  cursor:pointer;
  border-radius:999px;
  background: var(--amber);
  color: #1f2340;
  padding:15px 22px;
  font:inherit;
  font-weight:700;
  white-space:nowrap;
  transition: transform .18s ease, background .18s ease;
}
.signup-form button:hover {
  background: var(--amber-soft);
  transform: translateY(-1px);
}
.form-note,.form-status { font-size:.78rem; color: var(--muted); margin:10px 0 0 12px; }
.hero-visual { position:relative; display:flex; justify-content:center; }
.phone-shell {
  position:relative;
  width:min(430px, 92%);
  padding:12px;
  background:linear-gradient(145deg,#6a5730,#414E7D 34%, #4D5A8B 100%);
  border:1px solid rgba(232,193,111,.34);
  border-radius:42px;
  box-shadow:var(--shadow);
  transform:rotate(0deg);
  z-index:2;
}
.phone-shell img { border-radius:32px; }
.glow { position:absolute; width:410px; height:410px; border-radius:50%; filter:blur(45px); background:rgba(224,179,90,.18); }

.trust-row {
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-row div {
  padding:22px 24px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--line);
  font-size:.9rem;
  color: var(--muted-2);
}
.trust-row div:last-child { border-right:0; }
.trust-row span { color: var(--amber-soft); font-size:1.3rem; }

.clarity { background: var(--bg-alt); }
.split-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; }
.quote-card {
  background: linear-gradient(180deg, rgba(77,90,139,.72), rgba(52,63,107,.92));
  color:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:46px;
  box-shadow:var(--shadow);
}
.quote-mark { font-family:serif; font-size:4rem; color:var(--amber-soft); line-height:.7; }
.quote-card blockquote { margin:22px 0 24px; font-family:"Playfair Display",serif; font-size:2rem; line-height:1.2; }
.quote-card p { color:#f0e6d7; margin-bottom:0; }

.how { background: var(--bg); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
.step-card {
  background: linear-gradient(180deg, rgba(77,90,139,.72), rgba(61,73,120,.9));
  border:1px solid var(--line);
  border-radius:24px;
  padding:30px;
  min-height:400px;
  display:flex;
  flex-direction:column;
  box-shadow: 0 12px 35px rgba(35,42,75,.18);
}
.step-card.featured {
  background: linear-gradient(180deg, rgba(95,76,44,.55), rgba(77,90,139,.9));
  color:#fff;
  transform:translateY(-12px);
  border-color: rgba(224,179,90,.35);
}
.step-card.featured p { color:#efe5d7; }
.step-number { font-family:"Playfair Display",serif; color:var(--amber-soft); font-size:1.1rem; margin-bottom:20px; }
.step-kicker { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.13em; font-weight:700; }
.mini-bubble {
  background: rgba(255,255,255,.08);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  margin:28px 0 34px;
  color: var(--muted-2);
}
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 34px; }
.chips span {
  font-size:.76rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:8px 10px;
  color:#fdf8ef;
  background: rgba(255,255,255,.06);
}
.action-lines { margin:24px 0 36px; display:grid; gap:8px; }
.action-lines span { padding:12px 0; border-bottom:1px solid var(--line); font-weight:600; color: var(--muted-2); }
.step-card h3 { margin-top:auto; }
.step-card > p:last-child { color:var(--muted); margin-bottom:0; }

.moments { background: var(--bg-alt); }
.moments h2 { max-width:850px; }
.use-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); margin-top:45px; }
.use-grid article { padding:34px 35px 38px 0; border-bottom:1px solid var(--line); }
.use-grid article:nth-child(odd) { border-right:1px solid var(--line); padding-right:45px; }
.use-grid article:nth-child(even) { padding-left:45px; }
.use-grid span { color:var(--amber-soft); font-size:.8rem; font-weight:700; }
.use-grid p { color:var(--muted); margin-bottom:0; max-width:470px; }

.support { background: var(--bg); }
.support-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.support-grid article {
  background: linear-gradient(180deg, rgba(77,90,139,.68), rgba(61,73,120,.9));
  border-radius:22px;
  padding:32px;
  border:1px solid var(--line);
}
.support-grid .icon { font-size:1.6rem; color:var(--amber-soft); margin-bottom:26px; }
.support-grid p { color:var(--muted); margin-bottom:0; }

.cta {
  background:
    radial-gradient(circle at 20% 10%, rgba(224,179,90,.16), transparent 18%),
    linear-gradient(135deg,#5a4823,#465384 35%, #343F6B 100%);
  color:#fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-inner { text-align:center; max-width:760px; }
.cta .eyebrow { color:var(--amber-soft); }
.cta .body-lg { color:#f0e6d8; margin:0 auto 30px; }
.cta-form { margin:0 auto; }
.cta .form-note,.cta .form-status { color:#e2d7c9; }

footer { background:#2C365E; color:#f4efe7; padding:48px 0; }
.footer-grid { display:grid; grid-template-columns:1fr 1.6fr auto; gap:40px; align-items:center; }
.footer-brand small { color:#d7cfc4; }
.footer-grid p { margin:0; font-size:.8rem; color:#ebe3d8; }

@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .hero-grid,.split-grid { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }
  .hero-text,.signup-form { margin-left:auto; margin-right:auto; }
  .form-note,.form-status { margin-left:0; }
  .hero-visual { margin-top:10px; }
  .steps-grid,.support-grid { grid-template-columns:1fr; }
  .step-card.featured { transform:none; }
  .trust-row { grid-template-columns:1fr; }
  .trust-row div { border-right:0; border-bottom:1px solid var(--line); }
  .trust-row div:last-child { border-bottom:0; }
  .footer-grid { grid-template-columns:1fr; text-align:center; justify-items:center; }
}

@media (max-width: 640px) {
  .container { width:min(100% - 28px,1160px); }
  .section-pad { padding:72px 0; }
  .brand small { display:none; }
  .signup-form { flex-direction:column; border-radius:20px; padding:8px; gap:8px; }
  .signup-form input { padding:15px 14px; }
  .signup-form button { width:100%; }
  .use-grid { grid-template-columns:1fr; }
  .use-grid article:nth-child(odd),.use-grid article:nth-child(even) { border-right:0; padding:28px 0; }
  .quote-card { padding:34px 28px; }
  .phone-shell { border-radius:28px; }
  .phone-shell img { border-radius:20px; }
}