:root{
  --bg:#f5f1e8;
  --ink:#1b1b1b;
  --muted:#5f5b56;
  --accent:#ff6b4a;
  --accent-soft:rgba(255,107,74,.12);
  --card:#fffdf8;
  --line:rgba(27,27,27,.14);
  --shadow:0 18px 34px rgba(20,20,20,.12);
  --radius:18px;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--ink);
  font-family:"Space Grotesk","Trebuchet MS",sans-serif;
  background:
    radial-gradient(900px 420px at 8% 12%, #fff8ec 0%, transparent 70%),
    radial-gradient(740px 360px at 88% 8%, #ffe4d8 0%, transparent 65%),
    linear-gradient(145deg, #f6f2e9 0%, #e5ddd0 100%);
}

.container{
  max-width:1120px;
  margin:0 auto;
  padding:24px 20px 52px;
}

.topnav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(8px);
  position:sticky;
  top:10px;
  z-index:15;
}

.topnav a{
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  padding:8px 12px;
  border-radius:999px;
  transition:background .2s ease;
}

.topnav a:hover{ background:var(--accent-soft); }

.hero{
  padding:30px;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(360px 180px at 100% 0, rgba(255,107,74,.16), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.86));
  box-shadow:var(--shadow);
  margin-bottom:18px;
}

.badge{
  display:inline-block;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,107,74,.45);
  color:#8f3f2d;
  font-size:13px;
  font-weight:700;
  background:var(--accent-soft);
}

.hero__title{
  margin:14px 0 8px;
  font-size:clamp(30px,4vw,46px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-family:"DM Serif Display","Georgia",serif;
}

.hero__lead{
  margin:0;
  max-width:760px;
  font-size:18px;
  line-height:1.6;
  color:var(--muted);
}

.hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.grid{display:grid;gap:18px}

@media(min-width:900px){
  .grid-2{grid-template-columns:1.2fr .8fr}
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  background:var(--card);
  box-shadow:var(--shadow);
}

.card h2,.card h3{
  margin-top:0;
  margin-bottom:10px;
  font-family:"DM Serif Display","Georgia",serif;
  letter-spacing:.01em;
}

.list{
  margin:0;
  padding-left:20px;
  line-height:1.7;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid var(--line);
  font-weight:700;
  color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(20,20,20,.12);
}

.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.btn.ghost{
  background:rgba(255,255,255,.75);
  color:var(--ink);
}

.faq details{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.65);
}

.faq details + details{ margin-top:10px; }

.faq summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
}

.faq summary::-webkit-details-marker{ display:none; }

.muted{color:var(--muted)}

@media(max-width:720px){
  .container{padding:16px 14px 42px;}
  .hero{padding:22px 16px;}
  .hero__lead{font-size:16px;}
  .topnav{top:8px;}
}