:root {
  --bg: #f3efe7;
  --ink: #17231b;
  --accent: #ff5a36;
  --green: #244d35;
  --cream: #fffaf1;
  --line: rgba(23, 35, 27, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.header { min-height: 92px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.logo { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.04em; font-size:21px; }
.logo span { color:var(--accent); margin-left:5px; }
nav { display:flex; gap:28px; }
nav a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; }

.hero { min-height: 690px; display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:70px; padding:70px 0 90px; }
.eyebrow, .section-label { text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; color:var(--green); }
h1 { font-size:clamp(48px, 7vw, 94px); letter-spacing:-.065em; line-height:.94; margin:20px 0 28px; font-weight:800; }
h1 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.hero-copy > p { font-size:18px; line-height:1.65; max-width:650px; color:rgba(23,35,27,.72); }
.actions { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
button { font:inherit; cursor:pointer; }
.primary, .secondary { border-radius:999px; padding:16px 24px; border:1px solid var(--ink); font-weight:800; }
.primary { background:var(--ink); color:white; }
.primary:hover { transform:translateY(-2px); }
.secondary { background:transparent; color:var(--ink); }
.microcopy { font-size:12px; margin-top:14px; color:rgba(23,35,27,.55); }

.hero-card { background:var(--green); color:white; border-radius:32px; padding:22px; transform:rotate(2.5deg); box-shadow:0 28px 70px rgba(36,77,53,.23); }
.stamp { display:inline-block; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:8px 12px; font-size:10px; letter-spacing:.16em; }
.hero-image { height:410px; margin:18px 0; border-radius:22px; background:linear-gradient(160deg, rgba(0,0,0,.05), rgba(0,0,0,.35)), url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=85') center/cover; }
.hero-card-bottom { display:flex; justify-content:space-between; font-weight:700; padding:4px 2px 2px; }

.result-section { padding:70px 0 110px; }
.result-card { margin-top:26px; background:var(--cream); border:1px solid var(--line); border-radius:32px; padding:42px; box-shadow:0 20px 60px rgba(23,35,27,.09); }
.result-topline { display:flex; justify-content:space-between; align-items:center; }
.badge { background:var(--accent); color:white; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; }
.muted { color:rgba(23,35,27,.55); font-size:14px; }
.result-card h2 { font-size:clamp(38px, 6vw, 72px); margin:24px 0 12px; letter-spacing:-.055em; line-height:1; }
.lead { font-size:21px; line-height:1.6; max-width:850px; color:rgba(23,35,27,.7); }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:40px 0; }
.info-grid > div { border-top:1px solid var(--line); padding-top:18px; }
.info-title { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:var(--green); }
.info-grid p { line-height:1.65; }
.result-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:22px; font-weight:700; }
.text-button { border:0; background:none; color:var(--accent); font-weight:800; }

.placeholder { margin-top:26px; min-height:340px; border:1px dashed rgba(23,35,27,.32); border-radius:32px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:rgba(23,35,27,.52); }
.orb { width:110px; height:110px; border-radius:50%; margin-bottom:20px; background:radial-gradient(circle at 30% 30%, #ffc0ab, var(--accent) 50%, var(--green)); box-shadow:0 20px 45px rgba(255,90,54,.25); }
.loader { min-height:340px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; }
.loader span { width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block; animation:bounce 1s infinite alternate; }
.loader span:nth-child(2){ animation-delay:.2s; }.loader span:nth-child(3){ animation-delay:.4s; }
@keyframes bounce { to { transform:translateY(-12px); opacity:.4; } }
.error { margin-top:24px; background:#ffe0d7; border:1px solid #f3a18c; padding:18px 20px; border-radius:18px; }
.hidden { display:none !important; }

.how { padding:90px 0; border-top:1px solid var(--line); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.step { padding:28px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.28); }
.step strong { color:var(--accent); font-size:12px; }
.step h3 { font-size:24px; margin:28px 0 10px; }
.step p { color:rgba(23,35,27,.64); line-height:1.6; }
.footer { min-height:110px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; align-items:center; font-size:12px; color:rgba(23,35,27,.55); }

@media (max-width: 800px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:48px; }
  .hero-card { transform:none; }
  .hero-image { height:320px; }
  .info-grid, .steps { grid-template-columns:1fr; }
  .result-card { padding:25px; }
  .footer { align-items:flex-start; flex-direction:column; justify-content:center; }
}