@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --cream:#F6EFE3;
  --cream-soft:#FBF6EE;
  --clay:#C1653A;
  --clay-dark:#9C4A28;
  --clay-deep:#7A3920;
  --moss:#5B6A4C;
  --ink:#2E2418;
  --muted:#6E6052;
  --line: rgba(46,36,24,0.10);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Manrope', sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

/* ===== Background layers ===== */
#sky{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(60% 45% at 50% 8%, rgba(255,214,163,0.65) 0%, rgba(255,214,163,0) 70%),
    linear-gradient(180deg, #FDF3E4 0%, #F7E9D6 38%, #F2DFC4 68%, #EAD3AE 100%);
}

#hillCanvas{
  position:fixed;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

/* Content sections sit above the fixed sky/canvas background layers. */
.hero,
.cards-section,
.cta{
  position:relative;
  z-index:2;
}

/* ===== Nav ===== */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 40px;
  background:rgba(251,246,238,0.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.wordmark{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.wordmark .dot{
  color:var(--clay);
  font-style:italic;
  font-weight:500;
}

#buy_now_link{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:0.88rem;
  letter-spacing:0.02em;
  color:var(--cream-soft);
  background:var(--clay-dark);
  padding:11px 22px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--clay-dark);
  transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space:nowrap;
}
#buy_now_link:hover,
#buy_now_link:focus-visible{
  background:var(--clay-deep);
  border-color:var(--clay-deep);
  box-shadow:0 8px 20px rgba(122,57,32,0.32);
  transform:translateY(-2px);
}
#buy_now_link:focus-visible{ outline:2px solid var(--clay-deep); outline-offset:3px; }

/* ===== Hero ===== */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:14vh 24px 8vh;
  min-height:88vh;
  justify-content:center;
}

.eyebrow{
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--moss);
  margin-bottom:22px;
}

.hero h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.01em;
  font-size:clamp(2rem, 6vw, 5rem);
  max-width:16ch;
  color:var(--ink);
}
.hero h1 .line2{
  display:block;
  font-style:italic;
  font-weight:500;
  color:var(--clay-dark);
}

.hero p{
  margin-top:26px;
  max-width:680px;
  font-size:1.1rem;
  line-height:1.65;
  color:var(--muted);
}

.hero-actions{
  margin-top:38px;
}
.ghost-link{
  font-weight:700;
  font-size:0.95rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--clay);
  padding-bottom:3px;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.ghost-link:hover{ color:var(--clay-dark); }

/* ===== Cards ===== */
.cards-section{
  padding:6vh 40px 10vh;
  max-width:1180px;
  margin:0 auto;
}

.section-heading{
  text-align:center;
  max-width:600px;
  margin:0 auto 48px;
}
.section-heading h2{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  color:var(--ink);
}
.section-heading p{
  margin-top:12px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
}

.card{
  background:rgba(251,246,238,0.9);
  border:1px solid var(--line);
  border-radius:18px;
  padding:38px 35px;
  backdrop-filter:blur(6px);
  transition:transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 40px rgba(46,36,24,0.12);
  border-color:rgba(193,101,58,0.35);
}

.card .icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--clay), var(--clay-dark));
  margin-bottom:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card .icon svg{ width:20px; height:20px; }

.card h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.25rem;
  margin-bottom:12px;
  color:var(--ink);
}
.card p{
  color:var(--muted);
  font-size:0.98rem;
  line-height:1.6;
}

/* ===== CTA ===== */
.cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:9vh 24px 14vh;
  gap:0;
}

.signal-status{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.18em;
  color:var(--moss);
  background:rgba(91,106,76,0.12);
  padding:8px 18px;
  border-radius:999px;
  display:inline-block;
  margin-bottom:26px;
}

#buy_now_bottom{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--cream-soft);
  background:linear-gradient(135deg, var(--clay-dark), var(--clay-deep));
  padding:20px 46px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 14px 32px rgba(122,57,32,0.32);
  transition:transform 0.22s ease, box-shadow 0.22s ease;
  border:1px solid transparent;
}
#buy_now_bottom:hover,
#buy_now_bottom:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(122,57,32,0.42);
}
#buy_now_bottom:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }

.signal-sub{
  margin-top:20px;
  font-size:0.9rem;
  color:var(--muted);
}

/* ===== Footer (markup served via SSI include; keep it legible over the
   fixed sky/canvas background) ===== */
footer{
  position:relative;
  z-index:2;
  background:var(--cream-soft);
  border-top:1px solid var(--line);
  color:var(--ink);
  padding:26px 24px 40px;
  font-size:0.85rem;
  line-height:1.7;
}
footer div{ color:inherit; }

@media (max-width:480px){
  header{ padding:14px 18px; }
  .wordmark{ font-size:1.2rem; }
  #buy_now_link{ padding:9px 16px; font-size:0.8rem; }
  .hero{ padding:16vh 18px 7vh; min-height:auto; }
  .hero p{ font-size:1rem; }
  .cards-section{ padding:5vh 18px 8vh; }
  .card{ padding:30px 24px; }
  #buy_now_bottom{ padding:18px 34px; font-size:0.98rem; width:100%; }
  .cta{ padding:8vh 18px 12vh; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}