:root { --bg:#f7f4ed; --cream:#f7f1e1; --beige:#ece2d2; --stone:#dbd4c5; --ink:#1d1b19; --muted:#5b554c;
  --orange:#f77c1e; --amber:#e5ab1b; --rust:#a74f18; }
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--bg); color: var(--ink);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  background: var(--bg); }
#hero-canvas, .hero-fallback, .hero-vignette { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hero-canvas { opacity: 0; transition: opacity 1.4s ease; }
.hero.ready #hero-canvas { opacity: 1; }
.hero-fallback { display: none; background:
  radial-gradient(ellipse 45% 40% at 72% 55%, rgba(229,171,27,.22), transparent 70%),
  radial-gradient(ellipse 55% 45% at 78% 62%, rgba(247,124,30,.14), transparent 72%),
  linear-gradient(160deg, var(--bg) 30%, var(--beige) 100%); }
.hero.no-webgl .hero-fallback { display: block; }
.hero.no-webgl #hero-canvas { display: none; }
.hero-vignette { pointer-events: none;
  background: linear-gradient(90deg, rgba(247,244,237,.96) 0%, rgba(247,244,237,.8) 32%, rgba(247,244,237,0) 58%); }

.hero-content { position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto; padding: 120px 32px; }
.hero-content > * { max-width: 620px; animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-content > :nth-child(2) { animation-delay: .12s; }
.hero-content > :nth-child(3) { animation-delay: .24s; }

.hero-title { font-size: clamp(2.1rem, 5vw, 4.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -.025em;
  color: var(--ink); }
.hl { position: relative; display: inline-block; color: var(--orange); }
.squiggle { position: absolute; left: -2%; bottom: -.24em; width: 104%; height: .3em; overflow: visible; }
.squiggle path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s .7s ease forwards; }

.hero-sub { margin: 28px 0 38px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; font-weight: 500;
  color: var(--muted); max-width: 500px; }

.btn-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px;
  color: var(--cream); font-weight: 700; text-decoration: none; background: var(--ink);
  box-shadow: 0 10px 28px rgba(29,27,25,.16);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn-cta svg { color: var(--orange); transition: transform .25s ease; }
.btn-cta:hover, .btn-cta:focus-visible { transform: translateY(-2px); background: #2c2925;
  box-shadow: 0 0 0 4px rgba(247,124,30,.25), 0 14px 34px rgba(247,124,30,.22); }
.btn-cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.btn-cta:hover svg { transform: translateX(4px); }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .hero-vignette { background: linear-gradient(180deg, rgba(247,244,237,.9) 0%, rgba(247,244,237,.72) 55%, rgba(247,244,237,.45) 100%); }
  .hero-content { padding: 96px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .squiggle path { animation: none; stroke-dashoffset: 0; }
  #hero-canvas { transition: none; }
}