/* ============================================================
   LIMA COFFEE — Landing
   Paleta: preto profundo + dourados quentes
   ============================================================ */
:root{
  --bg:        #0a0806;
  --bg-2:      #120d09;
  --bg-3:      #1a1310;
  --ink:       #f4e4b8;
  --ink-2:     #e7d6a8;
  --ink-mute:  #9a8869;
  --gold:      #c9a961;
  --gold-hi:   #e8c878;
  --gold-lo:   #8b6a3a;
  --bronze:    #5c3a1e;
  --line:      rgba(201,169,97,.18);
  --line-2:    rgba(201,169,97,.10);

  --ff-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 78px;
  --pad: clamp(20px, 4vw, 72px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--ink); }
html{ scroll-behavior:auto; }
body{
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(201,169,97,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 40%, rgba(139,106,58,.08), transparent 60%),
    var(--bg);
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection{ background: var(--gold); color: var(--bg); }

/* ------------ Typography primitives ------------ */
h1,h2,h3,h4{
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.italic, em{ font-family: var(--ff-display); font-style: italic; }
.mono{ font-family: var(--ff-mono); font-size: .78em; letter-spacing: .04em; }
.tag{
  display:inline-block;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .25em;
  color: var(--gold); padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.eyebrow{
  display:flex; align-items:center; gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .3em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.eyebrow__line{
  display:inline-block; width: 40px; height:1px;
  background: linear-gradient(to right, transparent, var(--gold));
}

/* ------------ Buttons ------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn--lg{ padding: 18px 30px; font-size: 13px; }
.btn--gold{
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #1a0f04;
  box-shadow: 0 0 0 1px rgba(232,200,120,.2), 0 20px 40px -20px rgba(232,200,120,.35);
}
.btn--gold:hover{
  background: linear-gradient(180deg, #f0d288, var(--gold-hi));
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(232,200,120,.4), 0 30px 60px -20px rgba(232,200,120,.55);
}
.btn--ghost{
  color: var(--ink-2);
  border-color: var(--line);
}
.btn--ghost:hover{
  color: var(--gold-hi);
  border-color: var(--gold);
  background: rgba(201,169,97,.04);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0;
  z-index: 50;
  height: var(--nav-h);
  background: linear-gradient(180deg, rgba(10,8,6,.92), rgba(10,8,6,.55));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-2);
  transition: background .3s;
}
.nav__inner{
  max-width: 1440px; margin: 0 auto; height: 100%;
  padding: 0 var(--pad);
  display:flex; align-items:center; gap: 32px;
}
.nav__brand{ display:flex; align-items:center; gap: 12px; }
.nav__brand img{ width: 42px; height: 42px; object-fit:contain; filter: drop-shadow(0 2px 10px rgba(201,169,97,.3)); }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1; }
.nav__brand-name{
  font-family: var(--ff-display); font-size: 18px;
  letter-spacing: .08em; color: var(--gold-hi);
}
.nav__brand-sub{
  font-family: var(--ff-mono); font-size: 8.5px;
  letter-spacing: .28em; color: var(--ink-mute);
  margin-top: 3px;
}
.nav__links{
  display:flex; gap: 28px; margin-left: auto;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.nav__links a{ position:relative; padding: 6px 0; transition: color .3s; }
.nav__links a:hover{ color: var(--gold-hi); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width: 0; height:1px; background: var(--gold);
  transition: width .35s var(--ease);
}
.nav__links a:hover::after{ width: 100%; }

.nav__actions{ display:flex; align-items:center; gap: 14px; }
.lang{
  display:flex; align-items:center; gap: 8px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .2em; color: var(--ink-mute);
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: all .3s;
}
.lang:hover{ color: var(--gold-hi); border-color: var(--line); }
.lang__dot{
  width: 6px; height:6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
}

@media (max-width: 900px){
  .nav__links{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 60px) var(--pad) 60px;
  display:flex; align-items:center;
  overflow: hidden;
}
.hero__atmosphere{ position:absolute; inset:0; pointer-events:none; }
.hero__grain{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.04), transparent 50%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.03), transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.03), transparent 50%);
  background-size: 180px 180px, 220px 220px, 160px 160px;
  opacity: .6;
  mix-blend-mode: overlay;
}
.hero__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.85), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(201,169,97,.12), transparent 60%);
}
.hero__steam{
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, transparent, rgba(201,169,97,.04) 40%, transparent);
  opacity: 1;
}

.hero__inner{
  position:relative; z-index:2;
  width: 100%; max-width: 1440px; margin: 0 auto;
  min-height: calc(100vh - var(--nav-h) - 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.hero__copy{ max-width: 720px; position: relative; z-index: 3; grid-column: 1; }
.hero__title{
  font-size: clamp(38px, 5.6vw, 86px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 20px 0 32px;
  padding-bottom: 8px;
}
.hero__title--italic em{
  color: var(--gold-hi);
  font-weight: 300;
}
.hero__lede{
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 28px;
}
.hero__ctas{ display:flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__meta{
  display:flex; gap: 40px; flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.hero__meta > div{ display:flex; flex-direction: column; gap: 6px; }
.hero__meta .num{
  font-family: var(--ff-display);
  font-size: 36px;
  color: var(--gold-hi);
  line-height: 1;
}
.hero__meta sup, .hero__meta sub{ font-size: .4em; color: var(--gold); margin-left: 2px; }
.hero__meta .lbl{
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 180px;
}

/* ============================================================
   GLOBAL ANIMATED BEANS BACKGROUND (canvas)
   ============================================================ */
.bg-beans{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
}

/* ============================================================
   GLOBE — rebuilt from scratch, FLAT structure
   All children centered on .hero__globe. Size = % of hero__globe.
   ============================================================ */
.hero__globe{
  position: relative;
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  /* Vertical alignment is fine-tuned via JS (see app.js: alignGlobe)
     so the optical centre of the PNG sphere always matches the
     vertical centre of the copy column, across all viewport sizes. */
}
.hero__globe::before{ content: none; }

/* Every direct child is absolutely centered, square, circular */
.hero__globe > *{
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
}

/* Halo — soft glow behind everything */
.globe__halo{
  width: 98%;
  height: 98%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(232,200,120,.20) 0%, rgba(201,169,97,.07) 35%, transparent 65%);
  filter: blur(24px);
  animation: globeHalo 8s ease-in-out infinite alternate;
  z-index: 0;
}

/* Rings — concentric, static */
.globe__ring{
  border: 1px solid rgba(201,169,97,.10);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.globe__ring--1{ width: 72%; height: 72%; }
.globe__ring--2{ width: 84%; height: 84%; border-style: dashed; border-color: rgba(201,169,97,.14); }
.globe__ring--3{ width: 96%; height: 96%; border-color: rgba(201,169,97,.07); }

/* Orbits — concentric, rotating */
.globe__orbit{
  border: 1px dashed rgba(201,169,97,.16);
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
  animation: globeSpin linear infinite;
}
.globe__orbit--1{ width: 78%; height: 78%; animation-duration: 50s; }
.globe__orbit--2{ width: 90%; height: 90%; animation-duration: 80s; animation-direction: reverse; }
.globe__orbit--3{ width: 100%; height: 100%; animation-duration: 130s; }
.globe__orbit .bean{
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px; height: 14px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  border-radius: 50%;
  box-shadow: 0 0 14px var(--gold);
  transform: translateX(-50%);
}
.globe__orbit--2 .bean{ background: linear-gradient(180deg, #d4b878, var(--bronze)); }
.globe__orbit--3 .bean{ width: 8px; height: 11px; }

/* The image container — 64% of hero__globe.
   Source PNG has sphere offset from canvas center by +7.9% x / +5.5% y
   (alpha centroid). Offset container oppositely so optical center
   aligns with the concentric rings. */
.globe__img{
  width: 64%;
  height: 64%;
  left: calc(50% - 5%);
  top:  calc(50% - 3.5%);
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: globeFloat 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(201,169,97,.12));
}
.globe__img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.globe__3d{ display: none; }
/* Legacy wrapper from old structure — removed */
.globe{ display: none; }

.hero__coords{
  position:absolute; left: 0; right: 0; bottom: 24px;
  display:flex; justify-content:center; gap: 14px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .2em; color: var(--ink-mute);
}
.hero__coords .sep{ color: var(--gold); }

@keyframes globeSpin{
  from{ transform: translate(-50%, -50%) rotate(0deg); }
  to  { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes globeHalo{
  from{ opacity: .7; transform: translate(-50%, -50%) scale(1); }
  to  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes globeFloat{
  from{ transform: translate(-50%, calc(-50% - 4px)); }
  to  { transform: translate(-50%, calc(-50% + 4px)); }
}

.hero__scroll{
  position:absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: 10px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .3em; color: var(--ink-mute);
}
.hero__scroll-line{
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint{
  0%{ transform: scaleY(.3); transform-origin: top; opacity:.3; }
  50%{ transform: scaleY(1); opacity:1; }
  100%{ transform: scaleY(.3); transform-origin: bottom; opacity:.3; }
}

@media (max-width: 1200px){
  .hero__inner{ grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; }
  .hero__globe{ max-width: 380px; }
  .hero__title{ font-size: clamp(40px, 6.5vw, 64px); }
}
@media (max-width: 840px){
  .hero{
    padding: calc(var(--nav-h) + 32px) var(--pad) 56px;
    min-height: auto;
  }
  .hero__inner{
    grid-template-columns: 1fr;
    gap: 36px;
    min-height: auto;
  }
  .hero__copy{ grid-column: 1; order: 2; max-width: 100%; }
  .hero__globe{
    display: block;
    grid-column: 1;
    order: 1;
    max-width: 300px;
    margin: 0 auto;
    justify-self: center;
  }
  .hero__title{ margin: 16px 0 24px; }
  .hero__lede{ max-width: 100%; }
  .hero__meta{ gap: 28px 32px; }
  .hero__meta > div{ min-width: 140px; }
}
@media (max-width: 640px){
  .hero{ padding: calc(var(--nav-h) + 24px) var(--pad) 44px; }
  .hero__inner{ gap: 28px; }
  .hero__title{ font-size: clamp(34px, 9vw, 46px); line-height: 1.08; }
  .hero__lede{ font-size: 15px; line-height: 1.65; }
  .hero__ctas{ gap: 10px; }
  .hero__ctas .btn{ flex: 1 1 auto; min-width: 0; }
  .hero__meta{ gap: 20px 24px; padding-top: 16px; }
  .hero__meta > div{ flex: 1 1 calc(50% - 12px); min-width: 120px; }
  .hero__meta .num{ font-size: 28px; }
  .hero__meta .lbl{ font-size: 9px; max-width: 100%; }
  .hero__globe{ max-width: 240px; }
}

/* ============================================================
   MANIFESTO + MARQUEE
   ============================================================ */
.manifesto{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.marquee{
  overflow: hidden;
  border-bottom: 1px solid var(--line-2);
  padding: 22px 0;
  background: var(--bg-2);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track{
  display:flex; gap: 36px;
  font-family: var(--ff-mono);
  font-size: 13px; letter-spacing: .35em;
  color: var(--ink-mute); white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee__track .dot{ color: var(--gold); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.manifesto__body{
  max-width: 1440px; margin: 0 auto;
  padding: 120px var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.manifesto__text-col{ min-width: 0; }
.manifesto__kicker{
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 36px;
}
.manifesto__text{
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.01em;
  max-width: 1200px;
}
.manifesto__text .dim{ color: var(--ink-mute); }
.manifesto__text span{ display:block; }

/* ---- Manifesto dynamic coffee visual ---- */
.manifesto__visual{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  justify-self: end;
}
.mvis{
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
/* Big warm golden glow (the light behind the bean) */
.mvis__glow{
  position:absolute;
  inset: -5%;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(255,210,140,.55) 0%,
      rgba(232,180,110,.35) 14%,
      rgba(201,169,97,.18) 32%,
      rgba(201,169,97,.05) 55%,
      transparent 75%);
  filter: blur(10px);
  border-radius: 50%;
  animation: mvisGlow 6s ease-in-out infinite alternate;
  z-index: 0;
}
.mvis__god{
  position:absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,220,160,.22) 0%, rgba(255,220,160,0) 55%);
  mix-blend-mode: screen;
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
  animation: mvisGodPulse 7s ease-in-out infinite alternate;
}
@keyframes mvisGodPulse{ from{opacity:.7;} to{opacity:1;} }
@keyframes mvisGlow{
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.07); }
}

.mvis__ring{
  position:absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(232,200,140,.22);
  pointer-events: none;
  width: 68%; height: 68%;
  will-change: transform, opacity;
  z-index: 1;
}
.mvis__ring--1{ animation: mvisRing 5.5s ease-out infinite; }
.mvis__ring--2{ animation: mvisRing 5.5s ease-out infinite 1.8s; }
.mvis__ring--3{ animation: mvisRing 5.5s ease-out infinite 3.6s; }
@keyframes mvisRing{
  0%   { transform: translate(-50%,-50%) scale(.55); opacity: 0; }
  15%  { opacity: .85; }
  100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; }
}

.mvis__bean-hero{
  position: relative;
  display: block;
  width: auto;
  height: 88%;
  max-width: 82%;
  max-height: 88%;
  object-fit: contain;
  filter:
    drop-shadow(0 40px 50px rgba(0,0,0,.75))
    drop-shadow(0 0 40px rgba(232,180,110,.35));
  z-index: 2;
  animation: mvisBeanFloat 7s ease-in-out infinite alternate;
}
@keyframes mvisBeanFloat{
  from{ transform: translateY(-6px) rotate(-1.5deg); }
  to  { transform: translateY(6px)  rotate(1.5deg); }
}
/* (bean-tilt sway removed — was for SVG g element, no longer needed) */

.mvis__flare{
  position: absolute;
  top: 32%; left: 32%;
  width: 40%; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,230,180,.75) 50%, transparent);
  filter: blur(3px);
  transform: rotate(-28deg);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  opacity: .85;
  animation: mvisFlare 5s ease-in-out infinite alternate;
}
@keyframes mvisFlare{
  from{ opacity: .55; transform: rotate(-28deg) scaleX(.9); }
  to  { opacity: .95; transform: rotate(-28deg) scaleX(1.1); }
}

.mvis__embers{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.mvis__embers span{
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd78a, rgba(201,169,97,0));
  box-shadow: 0 0 6px rgba(255,210,140,.8);
  opacity: 0;
}
.mvis__embers span:nth-child(1){ left: 20%; top: 70%; animation: mvisEmber 5s ease-in infinite 0s; }
.mvis__embers span:nth-child(2){ left: 75%; top: 65%; animation: mvisEmber 6s ease-in infinite .8s; }
.mvis__embers span:nth-child(3){ left: 35%; top: 80%; animation: mvisEmber 4.5s ease-in infinite 1.6s; }
.mvis__embers span:nth-child(4){ left: 60%; top: 75%; animation: mvisEmber 5.5s ease-in infinite 2.4s; }
.mvis__embers span:nth-child(5){ left: 50%; top: 85%; animation: mvisEmber 7s ease-in infinite 3.2s; }
.mvis__embers span:nth-child(6){ left: 30%; top: 55%; animation: mvisEmber 6s ease-in infinite 4s; }
@keyframes mvisEmber{
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-120px) translateX(8px) scale(.4); opacity: 0; }
}

.mvis__label{
  position: absolute;
  right: 4%;
  bottom: 6%;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .24em;
  color: var(--gold);
  padding: 10px 14px;
  border: 1px solid rgba(201,169,97,.3);
  background: rgba(10,8,6,.5);
  backdrop-filter: blur(6px);
}
.mvis__label-sub{
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: .18em;
}

@media (max-width: 900px){
  .manifesto__body{ grid-template-columns: 1fr; }
  .manifesto__visual{ max-width: 320px; justify-self: center; }
}

/* ============================================================
   ORIGEM
   ============================================================ */
.origem{
  padding: 140px var(--pad) 80px;
  max-width: 1440px; margin: 0 auto;
  position: relative;
}
.origem__hdr{ margin-bottom: 80px; }
.origem__hdr h2{
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  margin-top: 24px;
  max-width: 1100px;
}
.origem__hdr h2 span{ display:block; }
.origem__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 300; }

.origem__grid{
  display: grid; grid-template-columns: 0.9fr 1fr;
  gap: 80px; align-items: start;
}
.origem__media{ position: sticky; top: calc(var(--nav-h) + 40px); }
.origem__photo{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.05);
  filter: saturate(.95) contrast(1.02);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s;
}
.origem__photo::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(10,8,7,.55) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(201,169,97,.08), transparent 55%);
  pointer-events: none;
}
.origem__media:hover .origem__photo{ transform: scale(1.015); filter: saturate(1) contrast(1.04); }
.origem__caption{
  margin-top: 16px;
  display:flex; gap: 14px; align-items:baseline;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .15em; color: var(--ink-mute);
}
.origem__caption .mono{ color: var(--gold); }

.origem__text .lead{
  font-family: var(--ff-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 28px;
  font-weight: 400;
}
.origem__text p{
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 560px;
}
.origem__text b{ color: var(--gold-hi); font-weight: 500; }

.terroir{
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.terroir > div{
  padding: 22px 24px;
  background: var(--bg);
  transition: background .3s;
}
.terroir > div:hover{ background: var(--bg-2); }
.terroir dt{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.terroir dd{
  font-family: var(--ff-display);
  font-size: 20px;
  color: var(--gold-hi);
}

@media (max-width: 900px){
  .origem__grid{ grid-template-columns: 1fr; gap: 40px; }
  .origem__media{ position: relative; top: auto; }
}

/* ------ photo placeholder (striped, premium) ------ */
.photo{
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(201,169,97,.04) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.photo::before{
  content:''; position:absolute; inset: 14px;
  border: 1px solid var(--line-2);
}
.photo::after{
  content: attr(data-caption);
  position: absolute; bottom: 20px; left: 20px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .25em; color: var(--ink-mute);
}
.photo--tall{ aspect-ratio: 3 / 4; }

/* ============================================================
   REGIONS — horizontal scroll
   ============================================================ */
.regions{
  margin-top: 120px;
  padding: 60px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.regions__head{ margin-bottom: 40px; max-width: 720px; }
.regions__head h3{
  font-size: clamp(24px, 2.5vw, 36px);
  margin-top: 16px;
  color: var(--ink);
}
.regions__track{
  display:flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-lo) transparent;
}
.regions__track::-webkit-scrollbar{ height: 4px; }
.regions__track::-webkit-scrollbar-thumb{ background: var(--gold-lo); border-radius: 4px; }
.region{
  flex: 0 0 340px;
  min-height: 360px;
  padding: 36px 30px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--line-2);
  display:flex; flex-direction: column;
  scroll-snap-align: start;
  transition: all .4s var(--ease);
  position: relative;
}
.region:hover{
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-color: var(--line);
  transform: translateY(-4px);
}
.region__idx{
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .25em; color: var(--gold);
  margin-bottom: 40px;
}
.region h4{
  font-size: 32px;
  color: var(--gold-hi);
  margin-bottom: 14px;
}
.region p{
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
  flex: 1;
}
.region__alt{
  margin-top: 20px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .2em; color: var(--ink-mute);
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.region--more{
  background: transparent;
  border: 1px dashed var(--line);
}
.region--more .region__idx{ color: var(--gold-hi); }

/* ============================================================
   GRAINS (Produtos)
   ============================================================ */
.grains{
  padding: 140px var(--pad);
  max-width: 1440px; margin: 0 auto;
  position: relative;
}
.grains__hdr{ margin-bottom: 80px; max-width: 1100px; }
.grains__hdr h2{
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.08;
  margin-top: 24px;
}
.grains__hdr h2 span{ display:block; }
.grains__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 300; }

/* ============================================================
   CATALOG — variety cards (5-up + 2 wide)
   ============================================================ */
.catalog{
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.catalog__row{
  position: relative;
}
.catalog__rowHdr{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-2);
  max-width: 760px;
}
.catalog__rowTag{
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold);
  padding-top: 10px;
  border-top: 1px solid var(--gold);
  width: 36px;
  text-align: center;
}
.catalog__rowHdr h3{
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.catalog__rowSub{
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 620px;
}
.catalog__grid{
  display: grid;
  gap: 20px;
}
.catalog__grid--5{
  grid-template-columns: repeat(5, 1fr);
}
.catalog__row--duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Variety card */
.variety{
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(18,13,9,.6);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
}
.variety:hover{
  transform: translateY(-4px);
  border-color: rgba(201,169,97,.35);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.06);
}
.variety__photo{
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  position: relative;
}
.variety__photo::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(18,13,9,.7));
}
.variety__body{
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.variety__kicker{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
}
.variety__body h4{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.variety__body h3{
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
}
.variety__body p{
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.variety__spec{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.variety__spec > div{
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 11px;
  border-bottom: 1px dashed var(--line-2);
}
.variety__spec > div:last-child{ border-bottom: 0; }
.variety__spec dt{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.variety__spec dd{
  color: var(--gold-hi);
  font-family: var(--ff-mono);
  font-size: 11px;
  text-align: right;
}

/* Wide variants for Conilon + Blend row */
.variety--wide{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.variety--wide .variety__photo{
  aspect-ratio: auto;
  height: 100%;
  min-height: 360px;
}
.variety--wide .variety__body{
  padding: 32px 32px 36px;
  gap: 14px;
}
.variety--wide .variety__body p{
  font-size: 14px;
  line-height: 1.7;
}
.variety__spec--wide{
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.variety--featured{
  background: linear-gradient(180deg, rgba(40,25,12,.6), rgba(18,13,9,.6));
  border-color: rgba(201,169,97,.25);
  position: relative;
}
.variety--featured::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.variety--featured .variety__body h3{
  color: var(--gold-hi);
}

.grains__note{
  margin-top: 60px;
  display:flex; gap: 16px; align-items: baseline;
  padding: 24px 28px;
  border: 1px dashed var(--line);
}
.grains__note .mono{ color: var(--gold); font-size: 18px; }
.grains__note p{
  color: var(--ink-2); font-size: 14px;
  max-width: 720px;
}

@media (max-width: 1100px){
  .catalog__grid--5{ grid-template-columns: repeat(3, 1fr); }
  .catalog__grid--5 .variety:nth-child(n+4){ grid-column: span 1; }
}
@media (max-width: 820px){
  .catalog__grid--5{ grid-template-columns: repeat(2, 1fr); }
  .catalog__row--duo{ grid-template-columns: 1fr; }
  .variety--wide{ grid-template-columns: 1fr; }
  .variety--wide .variety__photo{ min-height: 220px; aspect-ratio: 4/3; }
}
@media (max-width: 520px){
  .catalog__grid--5{ grid-template-columns: 1fr; }
}

/* ============================================================
   PROCESS — vertical centered timeline with cinematic bg
   ============================================================ */
.process{
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
  padding: 120px 0 140px;
}
.process__bg{
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.process__bgImg{
  position: absolute; inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(.32) saturate(.9);
  transform: scale(1.05);
  will-change: transform;
}
.process__bgOverlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.6), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.7), transparent 60%),
    linear-gradient(180deg, rgba(20,12,6,.85), rgba(15,9,4,.92));
}
.process__inner{
  position: relative; z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.process__hdr{
  text-align: center;
  margin-bottom: 100px;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.process__hdr .tag{
  display: inline-block;
  margin-bottom: 24px;
}
.process__hdr h2{
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.process__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 300; }
.process__lede{
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0 auto;
}

/* Vertical centered timeline */
.timeline{
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* The central line */
.timeline::before{
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(201,169,97,.35) 6%,
    rgba(201,169,97,.35) 94%,
    transparent 100%
  );
  transform: translateX(-50%);
}
/* Animated golden fill that grows on scroll */
.timeline::after{
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 1px;
  height: var(--timeline-progress, 0%);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 0 14px rgba(232,200,120,.6), 0 0 30px rgba(201,169,97,.3);
  transform: translateX(-50%);
  transition: height .15s linear;
}

.timeline__step{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 100px;
}
.timeline__step:last-child{ margin-bottom: 0; }

/* Center node */
.timeline__node{
  grid-column: 2;
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 35% 30%, #2a1c0e, #110a04 70%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--gold);
  position: relative;
  z-index: 2;
  transition: all .5s cubic-bezier(.2,.8,.2,1);
}
.timeline__node::before{
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(201,169,97,.2);
  opacity: 0;
  transition: opacity .5s, transform .5s;
}
.timeline__step.is-active .timeline__node{
  border-color: var(--gold);
  background: radial-gradient(circle at 35% 30%, #4a2f15, #1a0f04 70%);
  color: var(--gold-hi);
  box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(201,169,97,.35);
}
.timeline__step.is-active .timeline__node::before{
  opacity: 1;
  transform: rotate(60deg);
}
.timeline__node--final{
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--bronze) 70%);
  border-color: var(--gold-hi);
  color: #1a0f04;
  box-shadow: 0 0 30px rgba(232,200,120,.4);
}

/* Card — alternates left/right */
.timeline__card{
  border: 1px solid var(--line-2);
  background: rgba(18,13,9,.7);
  backdrop-filter: blur(12px);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s, opacity .6s;
}
.timeline__step:nth-child(odd) .timeline__card{
  grid-column: 1;
  margin-right: 20px;
  text-align: right;
}
.timeline__step:nth-child(even) .timeline__card{
  grid-column: 3;
  margin-left: 20px;
  text-align: left;
}
.timeline__step.is-active .timeline__card{
  border-color: rgba(201,169,97,.4);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.1);
}

/* Connector line from card to node */
.timeline__card::before{
  content: '';
  position: absolute;
  top: 50%;
  width: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%);
  opacity: .4;
}
.timeline__step:nth-child(odd) .timeline__card{ position: relative; }
.timeline__step:nth-child(even) .timeline__card{ position: relative; }
.timeline__step:nth-child(odd) .timeline__card::before{ right: -20px; }
.timeline__step:nth-child(even) .timeline__card::before{ left: -20px; transform: scaleX(-1); }
.timeline__step.is-active .timeline__card::before{ opacity: 1; }

.timeline__photo{
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  position: relative;
}
.timeline__photo::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18,13,9,.8));
}

.timeline__body{
  padding: 28px 30px 32px;
  position: relative;
  z-index: 1;
}
.timeline__when{
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.timeline__body h3{
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--ink);
}
.timeline__body p{
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* Final step — full-width centered CTA */
.timeline__step--final{
  grid-template-columns: 1fr;
  margin-top: 40px;
  text-align: center;
}
.timeline__step--final .timeline__node{
  grid-column: 1;
  margin-bottom: 32px;
}
.timeline__card--cta{
  grid-column: 1 !important;
  margin: 0 auto !important;
  max-width: 620px;
  text-align: center !important;
  background: linear-gradient(180deg, rgba(40,25,12,.85), rgba(18,13,9,.85));
  border-color: rgba(201,169,97,.3);
  padding: 8px 0;
}
.timeline__card--cta::before{ display: none; }
.timeline__card--cta .timeline__body{
  padding: 40px 32px 44px;
}
.timeline__card--cta h3{
  font-size: clamp(28px, 3vw, 40px);
  color: var(--gold-hi);
  font-style: italic;
  font-weight: 300;
  margin-bottom: 16px;
}
.timeline__card--cta p{
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto 28px;
}

/* Responsive — single column on small screens */
@media (max-width: 820px){
  .timeline::before, .timeline::after{ left: 32px; }
  .timeline__step{
    grid-template-columns: 64px 1fr;
    gap: 20px;
    margin-bottom: 60px;
  }
  .timeline__node{
    grid-column: 1;
    margin: 0;
  }
  .timeline__step:nth-child(odd) .timeline__card,
  .timeline__step:nth-child(even) .timeline__card{
    grid-column: 2;
    margin: 0;
    text-align: left;
  }
  .timeline__step:nth-child(odd) .timeline__card::before,
  .timeline__step:nth-child(even) .timeline__card::before{
    left: -20px; right: auto;
    transform: none;
  }
  .timeline__step--final{ grid-template-columns: 1fr; }
  .timeline__step--final .timeline__node{ margin: 0 auto 24px; }
}

body[data-motion="off"] .timeline__card{ transform: none !important; opacity: 1 !important; }

/* ============================================================
   NUMBERS
   ============================================================ */
.numbers{
  padding: 140px var(--pad);
  max-width: 1440px; margin: 0 auto;
}
.numbers__hdr{ margin-bottom: 80px; text-align: center; }
.numbers__hdr h2{
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.1;
  margin-top: 24px;
}
.numbers__hdr h2 span{ display:block; }
.numbers__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 300; }

.numbers__grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2);
}
.stat{
  background: var(--bg);
  padding: 48px 30px;
  display:flex; flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: background .4s;
}
.stat:hover{ background: var(--bg-2); }
.stat__num{
  font-family: var(--ff-display);
  font-size: clamp(56px, 7vw, 88px);
  color: var(--gold-hi);
  line-height: 1;
  font-weight: 300;
}
.stat__plus{
  position: absolute;
  top: 48px; right: 30px;
  font-family: var(--ff-display);
  font-size: 28px;
  color: var(--gold);
}
.stat__lbl{
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .15em;
  color: var(--ink-mute);
  text-transform: uppercase;
  line-height: 1.6;
  max-width: 220px;
}

@media (max-width: 900px){
  .numbers__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .numbers__grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   CTA / Contact
   ============================================================ */
.cta{
  position: relative;
  padding: 160px var(--pad);
  overflow: hidden;
  border-top: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 50% 50%, rgba(201,169,97,.08), transparent 60%),
    var(--bg);
}
.cta__bg{ position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.cta__ring{
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  border: 1px solid var(--line);
  border-radius: 50%;
  animation: spin 120s linear infinite;
}
.cta__ring::before, .cta__ring::after{
  content:''; position:absolute; inset: 0;
  border: 1px dashed var(--line-2);
  border-radius: 50%;
}
.cta__ring::before{ inset: 8%; }
.cta__ring::after{ inset: 18%; }

.cta__inner{
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  text-align: center;
}
.cta__inner h2{
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.05;
  margin: 24px 0 28px;
}
.cta__inner h2 span{ display:block; }
.cta__inner h2 .italic em{ color: var(--gold-hi); font-weight: 300; }
.cta__lede{
  max-width: 620px; margin: 0 auto 64px;
  font-size: 16px; color: var(--ink-2); line-height: 1.75;
}
.cta__grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2);
  text-align: left;
}
.cta__card{
  background: var(--bg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: background .3s;
  position: relative;
}
.cta__card:hover{ background: var(--bg-2); }
.cta__k{
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .25em; color: var(--gold);
}
.cta__v{
  font-family: var(--ff-display);
  font-size: 22px; color: var(--ink);
  font-weight: 400;
}
.cta__arrow{
  position: absolute; top: 32px; right: 28px;
  color: var(--gold-hi);
  transition: transform .3s;
}
.cta__card:hover .cta__arrow{ transform: translate(4px, -4px); }

@media (max-width: 800px){
  .cta__grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top: 1px solid var(--line-2);
  padding: 60px var(--pad) 40px;
  background: var(--bg);
}
.foot__inner{
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}
.foot__brand{ display:flex; gap: 14px; align-items: center; }
.foot__brand img{ width: 48px; height: 48px; object-fit: contain; }
.foot__name{
  font-family: var(--ff-display);
  font-size: 20px; color: var(--gold-hi);
  letter-spacing: .08em;
}
.foot__sub{
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .28em; color: var(--ink-mute);
  margin-top: 4px;
}
.foot__cols{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.foot__cols > div{ display:flex; flex-direction:column; gap: 6px; }
.foot__k{
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .2em; color: var(--gold);
  text-transform: uppercase;
}
.foot__cols > div > span:last-child{
  color: var(--ink-2);
  font-size: 14px;
}
.foot__legal{
  grid-column: 1 / -1;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
  font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: .15em; color: var(--ink-mute);
  text-transform: uppercase;
}
@media (max-width: 800px){
  .foot__inner, .foot__cols{ grid-template-columns: 1fr; }
}

/* ============================================================
   REVEAL (entry animations)
   — Elements start visible; JS adds .reveal--armed to hide,
   then .is-in to reveal. This way the page never looks broken
   if JS fails or is late loading.
   ============================================================ */
.reveal{
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.reveal.reveal--armed{
  opacity: 0;
  transform: translateY(28px);
}
.reveal.reveal--armed.is-in{ opacity: 1; transform: translateY(0); }

body[data-motion="off"] .reveal{ opacity:1; transform:none; transition: none; }
body[data-motion="off"] .globe__halo,
body[data-motion="off"] .globe__img,
body[data-motion="off"] .globe__orbit,
body[data-motion="off"] .marquee__track,
body[data-motion="off"] .cta__ring,
body[data-motion="off"] .hero__scroll-line,
body[data-motion="off"] .mvis__glow,
body[data-motion="off"] .mvis__god,
body[data-motion="off"] .mvis__ring,
body[data-motion="off"] .mvis__bean-hero,
body[data-motion="off"] .mvis__bean-tilt,
body[data-motion="off"] .mvis__flare,
body[data-motion="off"] .mvis__embers span{
  animation: none !important;
}

body[data-motion="subtle"] .globe__orbit{ animation-duration: 200s !important; }
body[data-motion="subtle"] .cta__ring{ animation-duration: 300s !important; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks{
  position: fixed; bottom: 24px; right: 24px;
  z-index: 100;
  width: 280px;
  background: rgba(18,13,9,.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  font-family: var(--ff-mono);
}
.tweaks__hdr{
  display:flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 11px; letter-spacing: .25em;
  color: var(--gold);
  text-transform: uppercase;
}
.tweaks__x{ color: var(--ink-mute); font-size: 20px; padding: 0 4px; }
.tweaks__x:hover{ color: var(--gold-hi); }
.tweaks__body{ padding: 16px; }
.tweaks__lbl{
  display:block;
  font-size: 10px; letter-spacing: .2em;
  color: var(--ink-mute); text-transform: uppercase;
  margin-bottom: 12px;
}
.tweaks__seg{
  display:flex;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
}
.tweaks__seg button{
  flex: 1;
  padding: 10px 8px;
  font-size: 10px; letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-right: 1px solid var(--line-2);
  transition: all .2s;
}
.tweaks__seg button:last-child{ border-right: 0; }
.tweaks__seg button.is-active{
  background: var(--gold);
  color: #1a0f04;
}
.tweaks__seg button:not(.is-active):hover{ color: var(--gold-hi); background: rgba(201,169,97,.06); }

/* ============================================================
   FLOATING BEANS — global ambient background
   ============================================================ */
.beans-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bean-float{
  position: absolute;
  bottom: -10vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(232,200,120,.6), rgba(122,80,40,.85) 55%, rgba(60,35,20,.95)),
    linear-gradient(180deg, rgba(201,169,97,.3), rgba(40,22,10,.6));
  box-shadow:
    inset -2px -3px 6px rgba(0,0,0,.5),
    inset 2px 2px 4px rgba(232,200,120,.15);
  animation-name: beanRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  filter: blur(.4px);
  will-change: transform, opacity;
}
.bean-float::after{
  /* the central crease line on a coffee bean */
  content: '';
  position: absolute;
  left: 50%; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(20,10,5,.7) 20%, rgba(20,10,5,.7) 80%, transparent);
  transform: translateX(-50%);
  border-radius: 50%;
}
@keyframes beanRise{
  0%   { transform: translateY(0) translateX(0) rotate(var(--rot, 0deg)) scale(1); }
  50%  { transform: translateY(-55vh) translateX(calc(var(--drift, 0px) * .5)) rotate(calc(var(--rot, 0deg) + 180deg)) scale(1.05); }
  100% { transform: translateY(-115vh) translateX(var(--drift, 0px)) rotate(calc(var(--rot, 0deg) + 360deg)) scale(.95); }
}

/* Main content sits ABOVE the global beans layer. .nav is excluded so its
   position:fixed (declared earlier) isn't overridden by position:relative. */
.hero, .manifesto, .origem, .grains, .process, .numbers, .cta, .footer{
  position: relative;
  z-index: 1;
}

body[data-motion="off"] .bean-float{ animation: none !important; }

/* On mobile dial it back */
@media (max-width: 720px){
  .bean-float:nth-child(n+8){ display: none; }
}