@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Syne:wght@500;600;700&display=swap');

:root {
  --ink: #0c120e;
  --forest: #173927;
  --forest-soft: #234b35;
  --sand: #f1efe7;
  --paper: #fbfaf6;
  --gold: #b37b36;
  --leaf: #a9c879;
  --muted-dark: #b8c0b7;
  --muted-light: #62695f;
  --line-dark: rgba(255, 255, 255, .15);
  --line-light: #d6d2c6;
  --whatsapp: #25d366;
  --max: 1680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--sand); font: 400 16px/1.6 'Manrope', sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; cursor: pointer; touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid var(--leaf); outline-offset: 5px; }

.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 16px; background: var(--paper); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 10; width: min(100%, var(--max)); min-height: 96px; margin: auto; padding: 18px clamp(22px, 5vw, 84px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line-dark); }
.brand { display: inline-flex; width: max-content; flex-direction: column; line-height: 1; }
.brand-name { font-family: 'Syne', sans-serif; font-size: clamp(25px, 2.2vw, 34px); font-weight: 500; letter-spacing: .04em; }
.brand-subtitle { margin-top: 8px; font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--leaf); }
nav { display: flex; gap: 36px; }
nav a, .header-action { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
nav a { color: #dce2d9; }
nav a:hover, .header-action:hover { color: var(--leaf); }
.header-action { justify-self: end; border-bottom: 1px solid var(--gold); }

.hero { width: min(100%, var(--max)); min-height: min(760px, calc(100vh - 96px)); margin: auto; padding: clamp(38px, 5vw, 76px) clamp(22px, 5vw, 84px) clamp(48px, 6vw, 94px); display: grid; grid-template-columns: minmax(0, .83fr) minmax(450px, 1.17fr); gap: clamp(42px, 6vw, 110px); align-items: center; position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 84% 18%, rgba(169, 200, 121, .14), transparent 28%), linear-gradient(110deg, var(--ink) 12%, rgba(12,18,14,.94) 56%, rgba(23,57,39,.88)); }
.hero::after { content: 'AMAZONAS'; position: absolute; z-index: -1; left: -1vw; bottom: -5vw; font: 700 clamp(88px, 17vw, 270px)/.75 'Syne', sans-serif; letter-spacing: -.08em; color: rgba(255,255,255,.025); }
.kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .13em; color: var(--gold); }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { font-family: 'Syne', sans-serif; font-weight: 600; letter-spacing: -.045em; }
h1 { max-width: 760px; margin: 24px 0; font-size: clamp(54px, 6.4vw, 104px); line-height: .94; }
.hero-intro { max-width: 560px; margin: 0; color: #c7cfc5; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; }
.primary-button { min-height: 52px; margin-top: 30px; padding: 14px 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--leaf); color: #102015; font-size: 14px; font-weight: 700; transition: background-color .2s ease, transform .2s ease; }
.primary-button:hover { background: #c4df99; transform: translateY(-2px); }
.primary-button:active, .whatsapp-float:active { transform: translateY(0); }
.hero-note { margin: 54px 0 0; font-size: 11px; letter-spacing: .08em; color: #899489; }
.hero-visual { position: relative; margin: 0; align-self: stretch; min-height: 520px; display: flex; align-items: center; justify-content: center; }
.hero-visual::before { content: ''; position: absolute; width: 82%; aspect-ratio: 1; border: 1px solid rgba(179, 123, 54, .55); border-radius: 50%; }
.hero-visual img { position: relative; width: min(100%, 670px); aspect-ratio: 1; object-fit: cover; box-shadow: 0 32px 80px rgba(0,0,0,.4); transform: rotate(1.5deg); }
.hero-visual figcaption { position: absolute; right: 0; bottom: 4%; padding: 10px 13px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

.manifesto { min-height: 74px; padding: 18px clamp(22px, 5vw, 84px); display: flex; justify-content: center; align-items: center; gap: clamp(22px, 6vw, 88px); background: var(--leaf); color: #112117; font-family: 'Syne', sans-serif; font-size: clamp(13px, 1.3vw, 18px); font-weight: 700; }
.manifesto svg { width: 24px; height: 24px; fill: currentColor; flex: 0 0 auto; }

.collection { background: var(--sand); color: var(--ink); padding: clamp(72px, 8vw, 132px) clamp(18px, 5vw, 84px); }
.collection-heading { width: min(100%, var(--max)); margin: 0 auto clamp(46px, 6vw, 86px); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .55fr); gap: 8vw; align-items: end; }
.collection-heading h2 { max-width: 970px; margin: 16px 0 0; font-size: clamp(42px, 5.4vw, 84px); line-height: 1.02; }
.collection-heading > p { max-width: 420px; margin: 0 0 8px; color: var(--muted-light); }
.product-grid { width: min(100%, var(--max)); margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: clamp(42px, 5vw, 76px); }
.product { min-width: 0; }
.product-image { overflow: hidden; aspect-ratio: 1; background: #fff; border: 1px solid var(--line-light); }
.product-wide .product-image { aspect-ratio: 1600 / 950; }
.product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.product:hover .product-image img { transform: scale(1.018); }
.product-info { min-height: 58px; padding-top: 15px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ink); }
.product-info h3 { margin: 0; font: 600 clamp(15px, 1.25vw, 19px)/1.3 'Syne', sans-serif; letter-spacing: -.025em; }
.product-info span { white-space: nowrap; color: var(--muted-light); font-size: 11px; font-weight: 600; }

.roots { width: min(100%, var(--max)); margin: auto; padding: clamp(76px, 9vw, 150px) clamp(22px, 7vw, 118px); display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr); gap: clamp(56px, 10vw, 160px); align-items: center; }
.roots-visual { min-height: 530px; display: grid; place-items: center; position: relative; border: 1px solid var(--line-dark); background: linear-gradient(rgba(12,18,14,.55), rgba(12,18,14,.86)), url('assets/jungle.jpg') center/cover; overflow: hidden; }
.roots-visual::before, .roots-visual::after { content: ''; position: absolute; width: 74%; aspect-ratio: 1; border: 1px solid rgba(179,123,54,.6); border-radius: 50%; }
.roots-visual::after { width: 46%; }
.roots-visual span { position: relative; z-index: 1; font: 500 clamp(150px, 20vw, 300px)/1 'Syne', sans-serif; color: var(--gold); }
.roots-copy h2 { max-width: 800px; margin: 20px 0 28px; font-size: clamp(42px, 5vw, 78px); line-height: 1.02; }
.roots-copy > p:not(.kicker) { max-width: 650px; color: var(--muted-dark); font-size: clamp(17px, 1.45vw, 22px); line-height: 1.7; }
.roots-copy a { min-height: 44px; margin-top: 15px; display: inline-flex; align-items: center; border-bottom: 1px solid var(--gold); font-size: 14px; font-weight: 700; }

.contact { padding: clamp(80px, 10vw, 158px) 22px; text-align: center; color: var(--ink); background: var(--gold); }
.contact .kicker { color: #37240f; }
.contact h2 { max-width: 980px; margin: 18px auto 22px; font-size: clamp(45px, 6vw, 94px); line-height: .98; }
.contact p:not(.kicker) { max-width: 620px; margin: auto; font-size: clamp(16px, 1.35vw, 20px); }
.contact .primary-button { background: var(--ink); color: var(--paper); }
.contact .primary-button:hover { background: var(--forest); }
.contact > span { display: block; margin-top: 18px; font-size: 12px; font-weight: 700; }

footer { width: min(100%, var(--max)); min-height: 150px; margin: auto; padding: 34px clamp(22px, 5vw, 84px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
footer p { margin: 0; color: var(--muted-dark); font-size: 12px; text-align: center; }
footer > a:last-child { justify-self: end; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid var(--gold); font-size: 13px; }

.whatsapp-float { position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); min-width: 58px; height: 58px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-radius: 999px; background: var(--whatsapp); color: #062711; box-shadow: 0 12px 34px rgba(0,0,0,.3); font-size: 13px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,.38); }
.whatsapp-float svg { width: 25px; height: 25px; fill: currentColor; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero-visual { min-height: 420px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-heading { grid-template-columns: 1fr; gap: 28px; }
  .roots { grid-template-columns: .75fr 1fr; gap: 48px; }
  .roots-visual { min-height: 440px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 78px; }
  .site-header { min-height: 78px; padding-block: 13px; }
  .brand-name { font-size: 25px; }
  .brand-subtitle { font-size: 8px; }
  .header-action { font-size: 12px; }
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  h1 { font-size: clamp(52px, 16vw, 72px); }
  .hero-note { margin-top: 36px; }
  .hero-visual { min-height: 0; margin-top: 4px; }
  .hero-visual img { width: 100%; }
  .hero-visual figcaption { bottom: -12px; }
  .manifesto { justify-content: space-between; gap: 12px; }
  .manifesto span { max-width: 120px; line-height: 1.25; }
  .collection { padding-inline: 14px; }
  .collection-heading { padding-inline: 8px; }
  .collection-heading h2 { font-size: 44px; }
  .product-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .product-wide .product-image { aspect-ratio: 1600 / 950; }
  .product-info { padding-inline: 4px; }
  .roots { grid-template-columns: 1fr; }
  .roots-visual { min-height: 390px; }
  .roots-copy h2 { font-size: 46px; }
  footer { grid-template-columns: 1fr auto; }
  footer p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .whatsapp-float { width: 58px; min-width: 58px; padding: 0; justify-content: center; }
  .whatsapp-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}