:root {
  --ink: #172018;
  --forest: #182319;
  --moss: #7b8b45;
  --lime: #dbe7a4;
  --sand: #e9e1cf;
  --paper: #f3f0e7;
  --white: #fffef8;
  --line: rgba(23, 32, 24, 0.18);
  --pad: clamp(22px, 4.2vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
}
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { font: inherit; }
::selection { background: var(--forest); color: var(--lime); }

.grain {
  position: fixed; inset: 0; z-index: 9998; opacity: .045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.loader {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: var(--forest); color: var(--lime);
  transition: clip-path 1s cubic-bezier(.77,0,.18,1) .25s;
  clip-path: inset(0 0 0 0);
}
.loader.done { clip-path: inset(0 0 100% 0); }
.loader-mark { font: 700 clamp(7rem, 18vw, 16rem)/1 "Syne"; }
.loader-count { position: absolute; right: 3vw; bottom: 3vw; font: 400 12px "DM Mono"; }
.loader-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #263428; }
.loader-line i { display: block; width: 0; height: 100%; background: var(--lime); transition: width 1.1s ease; }
.loader.active .loader-line i { width: 100%; }

.cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; width: 72px; height: 72px;
  display: grid; place-items: center; border-radius: 50%; background: var(--lime);
  color: var(--forest); pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.25);
  transition: opacity .2s, transform .25s; font: 500 10px "DM Mono"; text-transform: uppercase;
}
.cursor.active { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: 92px; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; color: white;
  transition: color .35s, background .35s, height .35s, backdrop-filter .35s;
}
.site-header.scrolled {
  height: 72px; color: var(--ink); background: rgba(243,240,231,.88);
  backdrop-filter: blur(18px); border-bottom: 1px solid var(--line);
}
.brand { width: clamp(150px, 15vw, 218px); filter: invert(1); transition: filter .35s; }
.site-header.scrolled .brand { filter: none; }
.nav { display: flex; gap: 30px; font-size: 12px; font-weight: 600; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: currentColor; transition: right .3s; }
.nav a:hover::after { right: 0; }
.header-cta { display: flex; gap: 18px; align-items: center; border: 1px solid currentColor; border-radius: 99px; padding: 12px 18px; font-size: 11px; }
.menu-button { display: none; border: 0; background: none; color: inherit; padding: 10px; }
.menu-button span { display: block; width: 24px; height: 1px; margin: 6px; background: currentColor; }

.hero { position: relative; min-height: 100svh; overflow: hidden; color: var(--white); }
.hero-bg, .hero-shade { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; overflow: hidden;
  transform: scale(1.055); transition: opacity 1.25s ease, transform 7s ease;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-slide img { height: 112%; object-fit: cover; }
.hero-slide:nth-child(2) img { object-position: center 48%; }
.hero-slide:nth-child(3) img { object-position: center 52%; }
.hero-shade { background: linear-gradient(90deg, rgba(10,18,11,.77), rgba(10,18,11,.18) 65%), linear-gradient(0deg, rgba(10,18,11,.5), transparent 55%); }
.hero-content { position: relative; z-index: 2; min-height: 100svh; padding: 18vh var(--pad) 5vh; display: flex; flex-direction: column; }
.kicker { margin: 0 0 clamp(30px,5vh,70px); font: 500 10px/1.4 "DM Mono"; letter-spacing: .12em; text-transform: uppercase; }
.hero-title { margin: 0; font: 600 clamp(4rem, 9.3vw, 10.5rem)/.82 "Syne"; letter-spacing: -.075em; }
.hero-title .line { display: block; }
.hero-title .line-indent { padding-left: 8vw; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.hero-bottom { margin-top: auto; display: flex; align-items: end; gap: 7vw; }
.hero-bottom > p { width: min(390px, 52vw); margin: 0 0 7px; font-size: clamp(13px,1.2vw,17px); line-height: 1.6; }
.round-link {
  width: 108px; height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font: 500 10px "DM Mono";
  transition: background .3s, color .3s;
}
.round-link:hover { background: var(--lime); color: var(--forest); border-color: var(--lime); }
.hero-pagination { position: absolute; z-index: 4; right: var(--pad); bottom: 5.5vh; display: flex; align-items: center; gap: 7px; }
.hero-pagination button {
  width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.38); border-radius: 50%;
  background: transparent; color: rgba(255,255,255,.65); cursor: pointer; font: 500 8px "DM Mono";
  transition: width .35s, color .35s, background .35s, border-color .35s;
}
.hero-pagination button.active { width: 58px; border-radius: 99px; border-color: var(--lime); background: var(--lime); color: var(--forest); }
.hero-side { position: absolute; z-index: 2; right: var(--pad); top: 43%; font: 400 9px "DM Mono"; letter-spacing: .18em; writing-mode: vertical-rl; text-transform: uppercase; }

.experience-object {
  position: absolute; z-index: 3; right: 6vw; top: 33%; width: clamp(185px, 16vw, 265px);
  perspective: 900px; filter: drop-shadow(0 28px 35px rgba(0,0,0,.24));
}
.experience-card {
  position: relative; aspect-ratio: .8; padding: clamp(20px,2vw,32px); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid rgba(255,255,255,.45); border-radius: 3px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(22,35,22,.2));
  backdrop-filter: blur(12px); transform: rotateY(-8deg) rotateZ(3deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), background .5s;
}
.experience-card::before {
  content: ""; position: absolute; inset: -80% -50%; opacity: .34;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.8) 50%, transparent 58%);
  transform: translateX(-45%); animation: glass-shine 6s ease-in-out infinite;
}
.experience-card::after {
  content: ""; position: absolute; right: -45%; bottom: -28%; width: 100%; aspect-ratio: 1;
  border: 1px solid rgba(219,231,164,.45); border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(219,231,164,.05), 0 0 0 52px rgba(219,231,164,.035);
}
.experience-object:hover .experience-card { transform: rotateY(0) rotateZ(0) translateY(-8px); background: rgba(24,35,25,.48); }
.experience-label { position: relative; z-index: 1; font: 500 8px/1.5 "DM Mono"; letter-spacing: .13em; text-transform: uppercase; }
.experience-card strong { position: relative; z-index: 1; margin-left: -5px; font: 500 clamp(5rem,8vw,9rem)/.72 "Syne"; letter-spacing: -.1em; }
.experience-card strong sup { display: inline-block; margin-left: .08em; font: 500 .24em/1 "DM Mono"; vertical-align: top; letter-spacing: 0; }
.experience-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; font: 500 7px "DM Mono"; letter-spacing: .08em; text-transform: uppercase; }
.experience-meta i { flex: 1; height: 1px; background: rgba(255,255,255,.55); }
@keyframes glass-shine { 0%, 28% { transform: translateX(-45%); } 58%, 100% { transform: translateX(45%); } }

.reveal { opacity: 0; transform: translateY(45px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

.section-label { display: flex; align-items: center; gap: 14px; font: 500 9px "DM Mono"; letter-spacing: .13em; text-transform: uppercase; }
.section-label span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; }
.section-label.light span { border-color: rgba(255,255,255,.35); }

.manifesto { padding: clamp(76px,7vw,115px) var(--pad) clamp(90px,10vw,150px); }
.manifesto-text { max-width: 1450px; margin: clamp(60px,6vw,100px) 0 clamp(70px,7vw,110px); font: 500 clamp(2.6rem,6.4vw,7.3rem)/1.05 "Syne"; letter-spacing: -.055em; }
.manifesto-text em { color: var(--moss); font-style: normal; }
.word-image { display: inline-flex; width: .85em; height: .72em; transform: translateY(.08em) rotate(-4deg); overflow: hidden; border-radius: 999px; }
.word-image img { object-fit: cover; }
.manifesto-foot { display: flex; justify-content: flex-end; gap: 8vw; border-top: 1px solid var(--line); padding-top: 22px; }
.manifesto-foot p { max-width: 260px; margin: 0; font-size: 12px; line-height: 1.6; }

.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 19px 0; background: var(--lime); }
.ticker div { display: flex; width: max-content; align-items: center; animation: ticker 34s linear infinite; }
.ticker span { font: 600 clamp(1rem,1.6vw,1.5rem) "Syne"; white-space: nowrap; }
.ticker i { margin: 0 25px; font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.collection { overflow: hidden; padding: clamp(100px,12vw,190px) 0; background: var(--forest); color: var(--white); }
.collection-head { padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 4vw; align-items: end; }
.collection-head .section-label { align-self: start; }
.collection-head .section-label span { border-color: rgba(255,255,255,.3); }
.collection h2 { margin: 0; font: 600 clamp(3.2rem,6.3vw,7.2rem)/.95 "Syne"; letter-spacing: -.06em; }
.collection-head > p { margin: 0; color: #b5beb2; font-size: 12px; line-height: 1.7; }
.product-track { display: flex; gap: clamp(18px,3vw,50px); width: 100%; padding: 10vw var(--pad) 4vw; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.product-track::-webkit-scrollbar { display: none; }
.product-card { flex: 0 0 clamp(265px,28vw,430px); transform-style: preserve-3d; transition: transform .2s; }
.product-card.card-up { margin-top: 9vw; }
.product-image { position: relative; overflow: hidden; aspect-ratio: .82; background: #263429; }
.product-image img { height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.product-card:hover img { transform: scale(1.07); }
.product-image span { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: var(--forest); font: 500 9px "DM Mono"; }
.product-card h3 { margin: 20px 0 8px; font: 600 clamp(1.6rem,2.5vw,2.8rem) "Syne"; letter-spacing: -.04em; }
.product-card p { margin: 0; color: #9ca79b; font-size: 12px; }

.feature { position: relative; min-height: 100svh; overflow: hidden; color: white; }
.feature-media { position: absolute; inset: 0; }
.feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,22,14,.86), rgba(13,22,14,.22)); }
.feature-media img { height: 115%; object-fit: cover; }
.feature-copy { position: relative; z-index: 2; width: min(780px,76vw); padding: 15vh var(--pad); }
.feature-copy h2 { margin: 13vh 0 35px; font: 600 clamp(3.4rem,7vw,8rem)/.91 "Syne"; letter-spacing: -.065em; }
.feature-copy > p { max-width: 470px; font-size: 14px; line-height: 1.8; }
.line-link { display: flex; justify-content: space-between; max-width: 360px; margin-top: 60px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.6); font: 500 11px "DM Mono"; text-transform: uppercase; }
.feature-card { position: absolute; z-index: 3; right: 7vw; top: 23%; width: clamp(190px,18vw,290px); aspect-ratio: .82; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: var(--lime); color: var(--forest); transform: rotate(6deg); box-shadow: 0 40px 80px rgba(0,0,0,.25); }
.feature-card > span { font: 500 8px "DM Mono"; text-transform: uppercase; }
.feature-card strong { font: 600 clamp(1.4rem,2.5vw,2.8rem)/.9 "Syne"; }
.mini-orbit { width: 70%; aspect-ratio: 1; align-self: center; border: 8px solid var(--forest); border-radius: 50%; transform: rotateX(65deg); }
.mini-orbit i { display: block; width: 60%; aspect-ratio: 1; margin: 13%; border: 5px solid var(--forest); border-radius: 50%; }

.process { padding: clamp(100px,13vw,200px) var(--pad); }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 9vw; border-top: 1px solid var(--line); }
.process article {
  position: relative; min-height: 310px; padding: 28px 26px; overflow: hidden;
  border-right: 1px solid var(--line); color: var(--ink); isolation: isolate;
  transition: color .5s cubic-bezier(.2,.7,.2,1);
}
.process article:first-child { border-left: 1px solid var(--line); }
.process article::before {
  content: ""; position: absolute; z-index: -2; inset: 0; background: var(--process-image) center / cover no-repeat;
  transform: scale(1.03); transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.process article::after {
  content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(243,240,231,.86);
  transition: background .5s ease;
}
.process article > span { position: relative; z-index: 1; font: 400 9px "DM Mono"; color: var(--moss); transition: color .4s; }
.process h3 { position: relative; z-index: 1; margin: 90px 0 18px; font: 600 clamp(1.8rem,2.5vw,3rem) "Syne"; }
.process article p { position: relative; z-index: 1; max-width: 230px; margin: 0; color: #687067; font-size: 12px; line-height: 1.7; transition: color .4s; }
.process article:hover { color: white; }
.process article:hover::before { transform: scale(1.1); }
.process article:hover::after { background: rgba(9,19,11,.68); }
.process article:hover > span { color: var(--lime); }
.process article:hover p { color: rgba(255,255,255,.86); }

.closing { position: relative; min-height: 85svh; overflow: hidden; color: white; background: var(--forest); }
.closing-bg { position: absolute; inset: 0; opacity: .3; }
.closing-bg img { height: 125%; object-fit: cover; image-rendering: auto; filter: blur(1px); }
.closing-bg::after { content: ""; position: absolute; inset: 0; background: rgba(13,24,14,.48); }
.closing-content { position: relative; z-index: 2; min-height: 85svh; padding: 13vh var(--pad); display: flex; flex-direction: column; }
.closing-content h2 { margin: auto 0; font: 600 clamp(4rem,9vw,10rem)/.86 "Syne"; letter-spacing: -.07em; }
.closing-content h2 em { color: var(--lime); font-style: normal; }
.closing-button {
  position: absolute; right: 7vw; top: 50%; min-width: clamp(235px,19vw,310px); height: 66px;
  padding: 0 9px 0 25px; display: flex; align-items: center; justify-content: space-between;
  border-radius: 999px; background: var(--lime); color: var(--forest);
  font: 600 11px/1.4 "Syne"; box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.closing-button b { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--forest); color: var(--lime); font-size: 17px; transition: transform .3s; }
.closing-button:hover b { transform: rotate(45deg); }

.footer { padding: 70px var(--pad) 25px; background: var(--sand); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; align-items: start; }
.footer-top > img { width: min(270px,80%); }
.footer-top div { display: flex; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.6; }
.footer-top div span { margin-bottom: 12px; color: #777b70; font: 500 9px "DM Mono"; text-transform: uppercase; }
.footer-top p { margin: 0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 80px; padding-top: 20px; border-top: 1px solid var(--line); font: 400 9px "DM Mono"; text-transform: uppercase; }

.whatsapp-float { position: fixed; z-index: 90; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 12px 17px 12px 13px; border-radius: 99px; background: #25d366; color: white; box-shadow: 0 12px 35px rgba(9,73,32,.28); font: 600 10px "DM Mono"; text-transform: uppercase; }
.whatsapp-float svg { width: 23px; height: 23px; fill: currentColor; }
.whatsapp-float b { margin-left: 5px; }

@media (max-width: 900px) {
  .site-header { height: 72px; }
  .brand { width: 160px; }
  .header-cta, .nav { display: none; }
  .menu-button { display: block; }
  .site-header.menu-open .nav { display: flex; position: fixed; inset: 72px 0 auto; height: calc(100svh - 72px); padding: 60px var(--pad); flex-direction: column; align-items: flex-start; background: var(--paper); color: var(--ink); font: 600 2.5rem "Syne"; }
  .site-header.menu-open { color: var(--ink); background: var(--paper); }
  .site-header.menu-open .brand { filter: none; }
  .hero-content { padding-top: 20vh; }
  .experience-object { right: 4vw; top: 58%; width: 180px; opacity: .88; }
  .hero-bottom { justify-content: space-between; }
  .hero-side { display: none; }
  .manifesto-foot { justify-content: flex-start; }
  .collection-head { grid-template-columns: 1fr; }
  .collection-head > p { max-width: 420px; }
  .feature-card { right: -25px; top: 12%; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .footer-top { grid-template-columns: 1.6fr 1fr; }
  .footer-top > img { grid-column: 1/-1; }
}

@media (max-width: 600px) {
  .cursor { display: none; }
  .hero-title { font-size: clamp(3.65rem,18vw,6rem); }
  .hero-title .line-indent { padding-left: 0; }
  .hero-bottom > p { width: 60%; }
  .round-link { width: 82px; height: 82px; }
  .hero-pagination { right: auto; left: var(--pad); bottom: 3vh; }
  .manifesto { padding-top: 72px; }
  .manifesto-text { margin: 58px 0 72px; font-size: 2.75rem; }
  .manifesto-foot { flex-direction: column; }
  .product-card { width: 78vw; }
  .feature-copy { width: 100%; padding-top: 28vh; }
  .feature-copy h2 { margin-top: 8vh; }
  .feature-card { width: 150px; height: 185px; }
  .process-grid { grid-template-columns: 1fr; }
  .process article { min-height: 245px; }
  .process h3 { margin-top: 55px; }
  .closing-content h2 { font-size: 17vw; }
  .closing-button { top: auto; bottom: 6vh; right: 6vw; min-width: 230px; height: 60px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .whatsapp-float span { display: none; }
}

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