:root {
  --ink: #f5ede2;
  --muted: #b9aa98;
  --deep: #100c09;
  --panel: #1a130e;
  --line: rgba(230, 193, 137, 0.2);
  --amber: #e8a952;
  --amber-soft: #f4cd91;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 74% 11%, rgba(155, 87, 26, 0.16), transparent 29rem),
    var(--deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a { color: inherit; }

.shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

.nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 650; letter-spacing: 0.01em; }

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--amber);
  border-radius: 50%;
  color: var(--amber-soft);
  font-family: Georgia, serif;
  font-size: 12px;
}

.nav-link { color: var(--muted); text-underline-offset: 5px; }

.hero {
  min-height: 690px;
  padding: 72px 0 92px;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
  align-items: center;
  gap: 80px;
}

.eyebrow, .section-kicker {
  margin: 0 0 22px;
  color: var(--amber-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
}

.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #65a877; box-shadow: 0 0 0 5px rgba(101, 168, 119, 0.12); }

h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.04; }
h1 { margin: 0; font-size: clamp(3.4rem, 7vw, 6.9rem); letter-spacing: -0.055em; }
.lede { max-width: 650px; margin: 32px 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.22rem); }

.actions { margin-top: 38px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.button { padding: 13px 19px; color: #1a1007; background: var(--amber); border-radius: 3px; text-decoration: none; font-weight: 700; }
.button:hover { background: var(--amber-soft); }
.text-link { color: var(--muted); text-underline-offset: 5px; }

.phone {
  width: min(100%, 350px);
  justify-self: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 44px;
  background: #080706;
  box-shadow: 0 42px 100px rgba(0,0,0,.55), 0 0 0 8px rgba(255,255,255,.025);
  transform: rotate(2deg);
}

.phone-top { height: 27px; display: grid; place-items: center; }
.phone-top span { width: 82px; height: 6px; border-radius: 8px; background: #222; }
.phone-screen { min-height: 610px; padding: 20px; border-radius: 31px; background: linear-gradient(160deg, #21170f, #0e0b08 74%); overflow: hidden; }
.app-head { display: flex; justify-content: space-between; align-items: center; }
.app-head small, .bottle-copy small { display: block; color: #8c7b69; font-size: 9px; letter-spacing: .15em; }
.app-head strong { display: block; margin-top: 2px; font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #ad6a2e; font-size: 10px; font-weight: 800; }

.feature-bottle { min-height: 210px; margin-top: 25px; padding: 22px; display: flex; align-items: flex-end; gap: 22px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 27% 25%, rgba(232,169,82,.2), transparent 46%), #17110d; }
.bottle-art { position: relative; width: 80px; height: 160px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 13px 13px 9px 9px; color: #2b180b; background: linear-gradient(90deg, #8b481b, #dc8d3d 55%, #7b3e17); box-shadow: inset 9px 0 18px rgba(0,0,0,.26), 12px 13px 30px rgba(0,0,0,.3); }
.bottle-art::before { content: ""; position: absolute; top: -30px; width: 31px; height: 34px; border-radius: 3px 3px 0 0; background: #aa692d; }
.bottle-art i { position: absolute; inset: 50px 10px 31px; border-radius: 2px; background: #ead9bd; }
.bottle-art b, .bottle-art em { z-index: 1; font-family: Georgia, serif; }
.bottle-art b { font-size: 26px; }.bottle-art em { font-size: 8px; letter-spacing: .15em; }
.bottle-copy { padding-bottom: 8px; }
.bottle-copy strong { display: block; margin: 8px 0; font-family: Georgia, serif; font-size: 20px; font-weight: 400; line-height: 1.1; }
.bottle-copy span { color: var(--muted); font-size: 11px; }

.taste-label { margin-top: 24px; display: flex; justify-content: space-between; font-size: 12px; }
.taste-label small { color: var(--muted); }
.flavour-map { position: relative; height: 205px; margin-top: 10px; }
.map-ring, .map-core { position: absolute; inset: 50%; border: 1px solid rgba(232,169,82,.18); border-radius: 50%; transform: translate(-50%, -50%); }
.ring-one { width: 145px; height: 145px; }.ring-two { width: 93px; height: 93px; }.map-core { width: 46px; height: 46px; background: rgba(232,169,82,.3); box-shadow: 0 0 42px rgba(232,169,82,.2); }
.flavour-map span { position: absolute; color: #8f806e; font-size: 9px; }.map-a { top: 8px; left: 48%; }.map-b { right: 12px; top: 48%; }.map-c { bottom: 4px; left: 49%; }.map-d { left: 9px; top: 48%; }
.scan-bar { padding: 13px; text-align: center; border-radius: 10px; color: #241609; background: var(--amber); font-size: 12px; font-weight: 800; }.scan-bar span { margin-right: 6px; }

.product { padding: 120px 0; border-top: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature-grid article { padding: 42px; background: var(--deep); }
.number { color: var(--amber); font-family: Georgia, serif; font-size: 13px; }
.feature-grid h2 { margin: 62px 0 17px; font-size: 34px; }
.feature-grid p { margin: 0; color: var(--muted); }

.build-note { background: #e7d7be; color: #20160e; }
.build-inner { padding: 100px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; }
.build-note .section-kicker { color: #9e5b27; }
.build-note h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 4.6rem); letter-spacing: -.035em; }
.build-inner > p { margin: 0; color: #5e4c3d; font-size: 18px; }

.jp { padding: 120px 0; max-width: 820px; text-align: center; }
.jp h2 { margin: 0; font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: -.035em; }
.jp > p:last-child { max-width: 720px; margin: 28px auto 0; color: var(--muted); }

.footer { padding: 45px 0 60px; display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--line); }
.footer > div:last-child { text-align: right; }.footer a { color: var(--amber-soft); }.footer p { margin: 7px 0 0; color: #786c5f; font-size: 12px; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 70px; padding-top: 50px; }
  .phone { width: 330px; transform: none; }
  .feature-grid, .build-inner { grid-template-columns: 1fr; }
  .build-inner { gap: 36px; }
  .feature-grid h2 { margin-top: 28px; }
}

@media (max-width: 520px) {
  .shell { width: min(100% - 28px, 1120px); }
  .nav { min-height: 70px; }
  .hero { padding: 38px 0 70px; }
  h1 { font-size: 3.25rem; }
  .phone { width: min(100%, 330px); }
  .feature-grid article { padding: 30px; }
  .product, .jp { padding: 82px 0; }
  .build-inner { padding: 82px 0; }
  .footer { align-items: flex-start; gap: 28px; flex-direction: column; }
  .footer > div:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }