:root {
  --ink: #07100b;
  --black: #050807;
  --paper: #f2f3ef;
  --white: #ffffff;
  --green: #8fbd72;
  --green-bright: #b7e391;
  --green-deep: #173c26;
  --line-dark: rgba(9, 24, 14, 0.17);
  --line-light: rgba(255, 255, 255, 0.15);
  --page-progress: 0;
  --hero-shift: 0;
  --ambient-cloud-opacity: 0;
  --ambient-cloud-x: 0px;
  --ambient-cloud-y: 0px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--black);
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Montserrat", Arial, sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--green-deep); color: #fff; }

.page-progress {
  background: linear-gradient(90deg, var(--green), var(--green-bright));
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform: scaleX(var(--page-progress));
  transform-origin: left;
  width: 100%;
  z-index: 1000;
}

.ambient-clouds {
  height: 100svh;
  inset: 0;
  opacity: var(--ambient-cloud-opacity);
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transform: translate3d(var(--ambient-cloud-x), var(--ambient-cloud-y), 0);
  transition: opacity 700ms ease;
  width: 100%;
  z-index: 24;
}

.ambient-cloud {
  background:
    radial-gradient(ellipse at 16% 62%, rgba(255,255,255,.78) 0 11%, transparent 27%),
    radial-gradient(ellipse at 37% 45%, rgba(255,255,255,.67) 0 18%, transparent 36%),
    radial-gradient(ellipse at 61% 51%, rgba(242,248,242,.58) 0 20%, transparent 39%),
    radial-gradient(ellipse at 84% 65%, rgba(218,229,220,.5) 0 13%, transparent 30%);
  filter: blur(20px);
  mix-blend-mode: soft-light;
  position: absolute;
  will-change: transform;
}

.ambient-cloud::after {
  background: radial-gradient(ellipse, rgba(45,67,50,.14), transparent 68%);
  content: "";
  inset: 24% 8% 6%;
  position: absolute;
}

.ambient-cloud-a {
  animation: ambientCloudLeft 56s -17s linear infinite;
  height: 22vh;
  top: 10vh;
  width: 54vw;
}

.ambient-cloud-b {
  animation: ambientCloudRight 68s -42s linear infinite;
  height: 17vh;
  opacity: .7;
  top: 39vh;
  width: 42vw;
}

.ambient-cloud-c {
  animation: ambientCloudLeft 76s -53s linear infinite;
  height: 20vh;
  opacity: .58;
  top: 68vh;
  width: 48vw;
}

.ambient-cloud-d {
  animation: ambientCloudRight 88s -9s linear infinite;
  height: 13vh;
  opacity: .46;
  top: 24vh;
  width: 33vw;
}

@keyframes ambientCloudLeft {
  from { transform: translate3d(-62vw, 0, 0) scale(.92); }
  50% { transform: translate3d(36vw, 1.5vh, 0) scale(1.04); }
  to { transform: translate3d(112vw, -.8vh, 0) scale(.96); }
}

@keyframes ambientCloudRight {
  from { transform: translate3d(114vw, 0, 0) scale(.96); }
  50% { transform: translate3d(39vw, -1.3vh, 0) scale(1.05); }
  to { transform: translate3d(-58vw, .9vh, 0) scale(.93); }
}

.nav-shell {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(5, 12, 8, 0.69);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  height: 78px;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(22px, 4.5vw, 72px);
  position: fixed;
  top: 0;
  transition: background 300ms ease, height 300ms ease;
  width: 100%;
  z-index: 100;
}

.nav-shell.is-scrolled { background: rgba(5, 12, 8, 0.93); height: 66px; }
.brand { align-items: center; display: inline-flex; gap: 11px; }
.brand-mark {
  align-items: center;
  border: 1px solid currentColor;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  letter-spacing: -1px;
  width: 36px;
}
.brand-text { display: flex; flex-direction: column; font-size: 11px; font-weight: 700; letter-spacing: .18em; line-height: 1.1; }
.brand-text small { font-size: 6px; font-weight: 500; letter-spacing: .16em; margin-top: 5px; opacity: .57; }
.nav-links { align-items: center; display: flex; gap: clamp(22px, 2.8vw, 46px); }
.nav-links > a:not(.nav-cta) { color: rgba(255,255,255,.67); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: color 200ms ease; }
.nav-links > a:not(.nav-cta):hover { color: var(--green-bright); }
.nav-cta { align-items: center; background: #fff; color: #07100b; display: flex; font-size: 9px; font-weight: 700; gap: 28px; letter-spacing: .1em; min-height: 42px; padding: 0 18px; text-transform: uppercase; transition: background 220ms ease, transform 220ms ease; }
.nav-cta:hover { background: var(--green-bright); transform: translateY(-2px); }
.nav-cta-calendar { background: var(--green-deep); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.nav-cta-calendar:hover { background: var(--green); color: var(--ink); }
.menu-button { background: none; border: 0; cursor: pointer; display: none; height: 40px; position: relative; width: 40px; }
.menu-button span { background: #fff; height: 1px; left: 8px; position: absolute; transition: transform 220ms ease, top 220ms ease; width: 24px; }
.menu-button span:first-child { top: 15px; }
.menu-button span:last-child { top: 24px; }
.menu-button.is-open span:first-child { top: 20px; transform: rotate(45deg); }
.menu-button.is-open span:last-child { top: 20px; transform: rotate(-45deg); }

.hero {
  align-items: center;
  background: #111b14;
  color: #fff;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  padding: 125px clamp(22px, 7vw, 112px) 95px;
  position: relative;
}

.hero::after {
  background: linear-gradient(180deg, transparent, rgba(6,16,9,.5) 48%, #061009 100%);
  bottom: -2px;
  content: "";
  height: clamp(120px, 21vh, 240px);
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 6;
}

.hero-landscape {
  height: 112%;
  inset: -6% 0 auto;
  object-fit: cover;
  object-position: center;
  position: absolute;
  transform: scale(var(--hero-scale, 1.035)) translateY(var(--hero-y, 0px));
  width: 100%;
  will-change: transform;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(2,8,4,.96) 0%, rgba(3,9,5,.78) 28%, rgba(3,9,5,.26) 53%, rgba(3,9,5,.04) 74%),
    linear-gradient(0deg, rgba(3,9,5,.62) 0%, transparent 33%, rgba(2,7,4,.16) 100%);
  inset: 0;
  position: absolute;
}

.sun-haze {
  background: radial-gradient(circle, rgba(255,255,226,.33), transparent 58%);
  filter: blur(16px);
  height: 42vw;
  left: -12vw;
  opacity: .7;
  position: absolute;
  top: -18vw;
  width: 42vw;
}

.cloud {
  filter: blur(16px);
  opacity: .32;
  pointer-events: none;
  position: absolute;
  will-change: transform;
}

.cloud::before,
.cloud::after {
  background:
    radial-gradient(ellipse at 22% 56%, rgba(255,255,255,.8) 0 13%, transparent 27%),
    radial-gradient(ellipse at 45% 40%, rgba(255,255,255,.7) 0 18%, transparent 36%),
    radial-gradient(ellipse at 70% 58%, rgba(255,255,255,.63) 0 17%, transparent 36%),
    radial-gradient(ellipse at 88% 62%, rgba(255,255,255,.45) 0 11%, transparent 28%);
  content: "";
  inset: 0;
  position: absolute;
}

.cloud-back { animation: cloudDrift 34s ease-in-out infinite alternate; height: 28%; left: 8%; top: 14%; width: 72%; }
.cloud-front { animation: cloudDriftReverse 27s ease-in-out infinite alternate; bottom: 3%; height: 22%; opacity: .2; right: -12%; width: 64%; }
@keyframes cloudDrift { to { transform: translate3d(7vw, 1.5vh, 0) scale(1.04); } }
@keyframes cloudDriftReverse { to { transform: translate3d(-9vw, -2vh, 0) scale(.95); } }

.leaf-field { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 4; }
.leaf {
  --leaf-size: 12px;
  --leaf-x: 50vw;
  --leaf-delay: 0s;
  --leaf-duration: 12s;
  --leaf-drift: 80px;
  animation: leafFall var(--leaf-duration) var(--leaf-delay) linear infinite;
  background: linear-gradient(135deg, #ccefa9, #3f7f4f 67%, #153920);
  border-radius: 100% 0 100% 0;
  box-shadow: 0 0 7px rgba(144,203,105,.18);
  height: var(--leaf-height, 7px);
  left: var(--leaf-x);
  opacity: 0;
  position: absolute;
  top: -8%;
  transform-origin: 100% 100%;
  width: var(--leaf-size);
}

.leaf::after { background: rgba(255,255,255,.38); content: ""; height: 1px; left: 10%; position: absolute; top: 52%; transform: rotate(-27deg); width: 76%; }
@keyframes leafFall {
  0% { opacity: 0; transform: translate3d(0,-12vh,0) rotate(0) rotateX(0); }
  10% { opacity: .72; }
  55% { transform: translate3d(var(--leaf-drift),50vh,0) rotate(410deg) rotateX(180deg); }
  92% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(var(--leaf-drift-back),112vh,0) rotate(810deg) rotateX(360deg); }
}

.hero-copy { max-width: 770px; position: relative; width: 59%; z-index: 8; }
.eyebrow,
.section-kicker { align-items: center; display: flex; font-size: 8px; font-weight: 650; gap: 12px; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before,
.section-kicker::before { background: currentColor; content: ""; height: 1px; width: 28px; }
.hero .eyebrow { color: rgba(255,255,255,.65); margin-bottom: 28px; }
.hero h1 { font-size: clamp(41px, 5.55vw, 88px); font-weight: 460; letter-spacing: -.058em; line-height: .96; text-shadow: 0 2px 28px rgba(0,0,0,.18); }
.hero h1 em { color: var(--green-bright); display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.08em; font-weight: 400; line-height: .92; margin-top: 12px; }
.hero-lead { color: rgba(255,255,255,.7); font-size: clamp(12px, 1vw, 15px); line-height: 1.8; margin-top: 32px; max-width: 600px; text-shadow: 0 2px 13px rgba(0,0,0,.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 38px; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: 9px; font-weight: 700; gap: 42px; justify-content: space-between; letter-spacing: .1em; min-height: 54px; padding: 0 21px; text-transform: uppercase; transition: background 220ms ease, border 220ms ease, color 220ms ease, transform 220ms ease; }
.button > span { font-size: 17px; font-weight: 400; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: #fff; color: var(--ink); min-width: 238px; }
.button-primary:hover { background: var(--green-bright); }
.button-secondary { border: 1px solid var(--green-bright); color: var(--green-bright); min-width: 238px; }
.button-secondary:hover { background: var(--green-bright); color: var(--ink); }
.button-ghost { border-color: rgba(255,255,255,.35); color: #fff; min-width: 225px; }
.button-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.hero-data { align-items: center; bottom: 31px; color: rgba(255,255,255,.5); display: flex; font-size: 6px; gap: 12px; left: clamp(22px, 7vw, 112px); letter-spacing: .17em; position: absolute; z-index: 8; }
.hero-data i { animation: pulseDot 1.5s ease-in-out infinite; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 9px var(--green-bright); height: 4px; width: 4px; }
@keyframes pulseDot { 50% { opacity: .25; } }
.scroll-signal { align-items: center; bottom: 27px; display: flex; gap: 12px; position: absolute; right: clamp(22px, 4.5vw, 72px); z-index: 8; }
.scroll-signal span { color: rgba(255,255,255,.55); font-size: 6px; letter-spacing: .16em; }
.scroll-signal i { border: 1px solid rgba(255,255,255,.42); border-radius: 20px; height: 31px; position: relative; width: 18px; }
.scroll-signal i::after { animation: scrollDot 1.6s ease-in-out infinite; background: var(--green-bright); border-radius: 50%; content: ""; height: 3px; left: 6px; position: absolute; top: 6px; width: 3px; }
@keyframes scrollDot { 0%,100% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 75% { opacity: 0; transform: translateY(13px); } }

.eco-story { --eco-p: 0; background: #061009; color: #fff; height: 410vh; position: relative; }
.eco-sticky { height: 100svh; overflow: hidden; position: sticky; top: 0; }
.eco-sticky::before {
  background: linear-gradient(180deg, #061009 0%, rgba(6,16,9,.9) 18%, rgba(6,16,9,.48) 58%, transparent 100%);
  content: "";
  height: clamp(150px, 27vh, 300px);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
}
.eco-background { height: 112%; left: -2%; object-fit: cover; position: absolute; top: -6%; transform: scale(var(--eco-scale, 1.01)) translate3d(var(--eco-x, 0%), var(--eco-y, 0%), 0); width: 104%; will-change: transform; }
.eco-call-scene { aspect-ratio: 955 / 542; border: 1px solid rgba(183,227,145,.32); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.48), 0 0 0 7px rgba(255,255,255,.025), 0 0 70px rgba(126,194,103,.12); left: clamp(34px, 5vw, 82px); opacity: var(--eco-call-opacity, 0); overflow: hidden; pointer-events: none; position: absolute; top: 51%; transform: translateY(-50%) scale(var(--eco-call-scale, .985)); transition: opacity 420ms linear, transform 520ms cubic-bezier(.2,.7,.2,1); width: min(53vw, 790px); will-change: opacity, transform; z-index: 3; }
.eco-call-scene::before { background: linear-gradient(135deg, rgba(255,255,255,.1), transparent 28%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 2; }
.eco-call-scene::after { background: linear-gradient(90deg, rgba(2,8,4,.08), transparent 48%, rgba(2,8,4,.18)), linear-gradient(0deg, rgba(2,8,4,.42), transparent 38%); content: ""; inset: 0; position: absolute; z-index: 2; }
.eco-call-image { height: 100%; inset: 0; object-fit: cover; object-position: 48% center; position: absolute; width: 100%; }
.eco-call-control { animation: callControlFloat 4.2s ease-in-out infinite; bottom: 25px; filter: drop-shadow(0 15px 22px rgba(0,0,0,.58)); height: auto; left: 50%; max-width: calc(100% - 42px); pointer-events: none; position: absolute; transform: translateX(-50%); width: clamp(230px, 20vw, 340px); z-index: 4; }
@keyframes callControlFloat { 0%,100% { transform: translate(-50%,0); } 50% { filter: drop-shadow(0 19px 28px rgba(0,0,0,.65)); transform: translate(-50%,-7px); } }
.eco-structure-scene { filter: drop-shadow(0 24px 50px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(134,213,108,.14)); left: clamp(24px,3vw,52px); opacity: var(--eco-structure-opacity, 0); pointer-events: none; position: absolute; top: 51%; transform: translateY(-50%) scale(var(--eco-structure-scale, .97)); transition: opacity 420ms linear, transform 600ms cubic-bezier(.2,.7,.2,1); width: min(57vw,900px); will-change: opacity, transform; z-index: 3; }
.eco-structure-image { display: block; height: auto; width: 100%; }
.eco-flow-pulse { animation: structurePulse 2.4s ease-in-out infinite; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 0 0 rgba(183,227,145,.55), 0 0 15px rgba(183,227,145,.8); height: 5px; position: absolute; width: 5px; }
.eco-flow-pulse-a { left: 32.8%; top: 49.5%; }
.eco-flow-pulse-b { animation-delay: -.8s; left: 74.4%; top: 50.5%; }
.eco-flow-pulse-c { animation-delay: -1.6s; left: 88%; top: 50.5%; }
@keyframes structurePulse { 50% { box-shadow: 0 0 0 10px rgba(183,227,145,0), 0 0 24px rgba(183,227,145,.9); opacity: .55; transform: scale(.8); } }
.eco-teach-scene { aspect-ratio: 16 / 9; border: 1px solid rgba(183,227,145,.34); border-radius: 13px; box-shadow: 0 30px 85px rgba(0,0,0,.52), 0 0 0 7px rgba(255,255,255,.025), 0 0 65px rgba(126,194,103,.12); left: clamp(34px,5vw,82px); opacity: var(--eco-teach-opacity, 0); overflow: hidden; pointer-events: none; position: absolute; top: 51%; transform: translateY(-50%) scale(var(--eco-teach-scale, .98)); transition: opacity 420ms linear, transform 600ms cubic-bezier(.2,.7,.2,1); width: min(53vw,790px); will-change: opacity, transform; z-index: 3; }
.eco-teach-scene.is-active { pointer-events: auto; }
.eco-teach-scene::after { background: linear-gradient(180deg, rgba(2,8,4,.22), transparent 24%, transparent 72%, rgba(2,8,4,.22)); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 2; }
.eco-teach-video { background: #020704; display: block; height: 100%; object-fit: cover; width: 100%; }
.eco-teach-badge,
.eco-teach-meta { align-items: center; backdrop-filter: blur(12px); background: rgba(3,10,5,.68); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.76); display: flex; font-size: 6px; letter-spacing: .16em; padding: 8px 10px; pointer-events: none; position: absolute; top: 15px; z-index: 3; }
.eco-teach-badge { left: 15px; }
.eco-teach-badge i { animation: pulseDot 1.5s ease-in-out infinite; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 9px var(--green-bright); height: 4px; margin-right: 8px; width: 4px; }
.eco-teach-meta { right: 15px; }
.eco-ops-scene { height: min(66vh,590px); left: clamp(26px,3.2vw,54px); opacity: var(--eco-ops-opacity,0); pointer-events: none; position: absolute; top: 51%; transform: translateY(-50%) scale(var(--eco-ops-scale,.96)); transition: opacity 520ms linear, transform 720ms cubic-bezier(.2,.7,.2,1); width: min(59vw,900px); will-change: opacity,transform; z-index: 3; }
.eco-ops-scene::before { background: radial-gradient(circle at 52% 53%,rgba(183,227,145,.17),transparent 38%),linear-gradient(135deg,rgba(5,15,8,.78),rgba(2,7,4,.18)); border: 1px solid rgba(183,227,145,.12); border-radius: 17px; box-shadow: 0 30px 90px rgba(0,0,0,.48),0 0 70px rgba(126,194,103,.09); content: ""; inset: -15px; position: absolute; }
.ops-system-head,.ops-system-foot { align-items: center; color: rgba(255,255,255,.5); display: flex; font-family: Arial,sans-serif; font-size: 6px; letter-spacing: .17em; position: absolute; width: 100%; z-index: 6; }
.ops-system-head { justify-content: space-between; top: 0; }
.ops-system-head strong { align-items: center; color: var(--green-bright); display: flex; font-size: inherit; font-weight: 500; }
.ops-system-head strong i,.ops-panel figcaption span i { animation: pulseDot 1.7s ease-in-out infinite; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 10px rgba(183,227,145,.8); display: inline-block; height: 5px; margin-right: 8px; width: 5px; }
.ops-panel { background: #0a0b0b; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 24px 55px rgba(0,0,0,.58),0 0 0 6px rgba(255,255,255,.02); height: 52%; margin: 0; overflow: hidden; position: absolute; width: 55%; z-index: 2; }
.ops-panel::after { background: linear-gradient(135deg,rgba(255,255,255,.08),transparent 30%),linear-gradient(0deg,rgba(2,8,4,.32),transparent 35%); content: ""; inset: 31px 0 0; pointer-events: none; position: absolute; }
.ops-panel-n8n { left: 0; top: 10%; }
.ops-panel-crm { bottom: 6%; right: 0; z-index: 3; }
.ops-panel figcaption { align-items: center; background: rgba(15,18,16,.98); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; height: 32px; justify-content: space-between; padding: 0 11px; position: relative; z-index: 2; }
.ops-panel figcaption span,.ops-panel figcaption strong { align-items: center; display: flex; font-family: Arial,sans-serif; font-size: 6px; font-weight: 500; letter-spacing: .12em; }
.ops-panel figcaption span { color: rgba(255,255,255,.77); }
.ops-panel figcaption strong { color: rgba(183,227,145,.72); }
.ops-panel figcaption span i { animation-delay: -.6s; height: 4px; margin-right: 6px; width: 4px; }
.ops-panel img { display: block; height: calc(100% - 32px); object-fit: cover; object-position: top center; width: 100%; }
.ops-link { background: linear-gradient(90deg,#ff6d00 0%,#f0bb62 38%,var(--green-bright) 100%); box-shadow: 0 0 13px rgba(183,227,145,.6); height: 2px; left: 43%; position: absolute; top: 50%; transform: rotate(17deg); transform-origin: left center; width: 19%; z-index: 5; }
.ops-link::after { border-bottom: 4px solid transparent; border-left: 7px solid var(--green-bright); border-top: 4px solid transparent; content: ""; position: absolute; right: -2px; top: -3px; }
.ops-link > i { animation: opsTravel 2.1s cubic-bezier(.45,0,.55,1) infinite; background: #fff; border-radius: 50%; box-shadow: 0 0 5px #fff,0 0 15px var(--green-bright); height: 6px; left: 0; position: absolute; top: -2px; width: 6px; }
@keyframes opsTravel { 0% { opacity: 0; transform: translateX(0); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(min(16vw,165px)); } }
.ops-sync-badge { align-items: center; backdrop-filter: blur(15px); background: rgba(4,11,6,.92); border: 1px solid rgba(183,227,145,.32); border-radius: 9px; box-shadow: 0 15px 34px rgba(0,0,0,.48),0 0 24px rgba(126,194,103,.11); display: flex; flex-direction: column; gap: 3px; left: 50%; padding: 8px 11px; position: absolute; top: 50%; transform: translate(-50%,-50%); z-index: 6; }
.ops-sync-badge small { color: rgba(255,255,255,.44); font-family: Arial,sans-serif; font-size: 5px; letter-spacing: .13em; white-space: nowrap; }
.ops-sync-badge strong { color: #fff; font-family: Montserrat,Arial,sans-serif; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.ops-sync-badge strong i { color: var(--green-bright); font-style: normal; padding: 0 5px; }
.ops-system-foot { bottom: 0; gap: 7px; justify-content: center; }
.ops-system-foot i { background: linear-gradient(90deg,rgba(183,227,145,.15),rgba(183,227,145,.65)); height: 1px; width: clamp(15px,2.4vw,34px); }
.eco-vignette { background: linear-gradient(90deg, rgba(3,10,5,.13) 0%, rgba(2,7,4,.05) 45%, rgba(2,8,4,.9) 75%, rgba(2,8,4,.98) 100%), linear-gradient(0deg, rgba(2,8,4,.48), transparent 40%); inset: 0; position: absolute; z-index: 2; }
.story-cloud { filter: blur(18px); opacity: var(--eco-cloud-opacity, .18); position: absolute; z-index: 3; }
.story-cloud::before { background: radial-gradient(ellipse at 25% 55%, rgba(255,255,255,.75), transparent 30%), radial-gradient(ellipse at 52% 40%, rgba(255,255,255,.65), transparent 33%), radial-gradient(ellipse at 80% 60%, rgba(255,255,255,.5), transparent 30%); content: ""; inset: 0; position: absolute; }
.story-cloud-a { animation: cloudDrift 29s ease-in-out infinite alternate; height: 25%; left: -14%; top: 24%; width: 67%; }
.story-cloud-b { animation: cloudDriftReverse 23s ease-in-out infinite alternate; bottom: 7%; height: 24%; left: 21%; width: 58%; }
.story-leaves { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 4; }
.eco-interface { inset: 0; pointer-events: none; position: absolute; z-index: 5; }
.eco-coordinate { color: rgba(255,255,255,.45); font-family: Arial, sans-serif; font-size: 6px; letter-spacing: .2em; position: absolute; }
.eco-coordinate-a { bottom: 7%; left: 5%; }
.eco-coordinate-b { right: 5%; top: 12%; }
.eco-reticle { border: 1px solid rgba(190,235,154,.42); border-radius: 50%; height: 105px; left: var(--eco-reticle-left, 70%); position: absolute; top: var(--eco-reticle-top, 55%); transform: translate(-50%,-50%) scale(var(--eco-reticle-scale, .7)); width: 105px; }
.eco-reticle::before,
.eco-reticle::after { background: rgba(190,235,154,.55); content: ""; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.eco-reticle::before { height: 1px; width: 130%; }
.eco-reticle::after { height: 130%; width: 1px; }
.eco-reticle i { border: 1px solid rgba(190,235,154,.25); border-radius: 50%; inset: 16px; position: absolute; }
.eco-reticle i:last-child { inset: 38px; }
.story-copy { background: linear-gradient(90deg, transparent, rgba(2,8,4,.94) 23%); display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 0 clamp(30px, 5vw, 80px); position: absolute; right: 0; width: 39%; z-index: 7; }
.story-copy .section-kicker { color: rgba(255,255,255,.5); flex: 0 0 auto; margin-bottom: clamp(22px, 4vh, 42px); }
.story-stage { flex: 0 0 auto; height: clamp(190px, 31vh, 285px); position: relative; width: 100%; }
.story-step { inset: 0; opacity: 0; pointer-events: none; position: absolute; transform: translateY(28px); transition: opacity 520ms ease, transform 600ms cubic-bezier(.2,.8,.2,1); width: 100%; }
.story-step.is-active { opacity: 1; transform: translateY(0); }
.story-step > span { color: var(--green-bright); font-size: 7px; letter-spacing: .16em; }
.story-step h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(54px, 5.6vw, 92px); font-style: italic; font-weight: 400; letter-spacing: -.055em; line-height: 1; margin: 9px 0 21px; }
.story-step p { color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.8; max-width: 420px; }
.story-meter { background: rgba(255,255,255,.16); flex: 0 0 auto; height: 1px; margin-top: clamp(16px, 3vh, 30px); overflow: hidden; position: relative; width: 100%; }
.story-meter i { background: var(--green-bright); display: block; height: 1px; transform: scaleX(var(--eco-p)); transform-origin: left; width: 100%; }

.section-pad { padding: clamp(95px, 11vw, 168px) clamp(22px, 7vw, 112px); }
.manifesto { background: var(--paper); position: relative; }
.manifesto::before { color: rgba(16,54,28,.035); content: "ECOSSISTEMA"; font-size: 11.8vw; font-weight: 700; left: -1vw; letter-spacing: -.09em; position: absolute; top: 4vw; white-space: nowrap; }
.manifesto-title,
.section-heading,
.tools-heading,
.method-heading,
.choice-heading,
.faq-heading { position: relative; z-index: 2; }
.manifesto-title .section-kicker,
.section-heading .section-kicker,
.tools-heading .section-kicker,
.method-heading .section-kicker,
.choice-heading .section-kicker,
.faq-heading .section-kicker { color: #6a756c; margin-bottom: 27px; }
.manifesto-title h2,
.section-heading h2,
.tools-heading h2,
.method-heading h2,
.choice-heading h2,
.faq-heading h2 { font-size: clamp(42px, 6.2vw, 95px); font-weight: 470; letter-spacing: -.06em; line-height: .97; }
.manifesto-title h2 em,
.section-heading h2 em,
.tools-heading h2 em,
.method-heading h2 em,
.choice-heading h2 em,
.faq-heading h2 em { color: #2c5a38; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; }
.manifesto-grid { border-top: 1px solid var(--line-dark); display: grid; gap: 8vw; grid-template-columns: 1.05fr .95fr; margin-top: 92px; padding-top: 62px; }
.manifesto blockquote { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(27px, 3vw, 46px); font-style: italic; line-height: 1.2; }
.principles article { border-bottom: 1px solid var(--line-dark); display: grid; gap: 20px; grid-template-columns: 36px 1fr; padding: 25px 0; }
.principles span { color: #879087; font-size: 8px; padding-top: 4px; }
.principles h3 { font-size: 13px; font-weight: 650; letter-spacing: -.02em; }
.principles p { color: #687069; font-size: 10px; line-height: 1.75; margin-top: 9px; }

.live-session {
  background:
    radial-gradient(circle at 78% 40%, rgba(93,155,83,.16), transparent 32%),
    linear-gradient(145deg, #050806 0%, #08130c 55%, #040705 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.live-session::before { border: 1px solid rgba(183,227,145,.09); border-radius: 50%; content: ""; height: 56vw; max-height: 760px; max-width: 760px; position: absolute; right: -19vw; top: -18vw; width: 56vw; }
.live-session::after { background: linear-gradient(90deg, transparent, rgba(183,227,145,.3), transparent); content: ""; height: 1px; left: 7vw; opacity: .4; position: absolute; right: 7vw; top: 0; }
.live-grid { align-items: center; display: grid; gap: clamp(55px,7vw,110px); grid-template-columns: .78fr 1.22fr; margin: 0 auto; max-width: 1480px; position: relative; z-index: 2; }
.live-copy .section-kicker { color: rgba(255,255,255,.45); margin-bottom: 27px; }
.live-copy h2 { font-size: clamp(41px,4.6vw,70px); font-weight: 470; letter-spacing: -.06em; line-height: .98; }
.live-copy h2 em { color: var(--green-bright); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; }
.live-intro { color: rgba(255,255,255,.57); font-size: 10px; line-height: 1.85; margin-top: 28px; max-width: 520px; }
.live-features { border-top: 1px solid var(--line-light); margin-top: 43px; }
.live-features article { border-bottom: 1px solid var(--line-light); display: grid; gap: 18px; grid-template-columns: 28px 1fr; padding: 18px 0; }
.live-features article > span { color: var(--green-bright); font-size: 7px; letter-spacing: .12em; padding-top: 3px; }
.live-features h3 { font-size: 11px; font-weight: 600; letter-spacing: -.01em; }
.live-features p { color: rgba(255,255,255,.42); font-size: 8px; line-height: 1.65; margin-top: 5px; }
.live-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 31px; }
.live-actions .live-link { margin-top: 0; }
.live-link { align-items: center; border-bottom: 1px solid rgba(183,227,145,.5); display: flex; font-size: 7px; font-weight: 700; justify-content: space-between; letter-spacing: .12em; margin-top: 31px; padding: 12px 0; transition: color 250ms ease, border-color 250ms ease; }
.live-link span { font-size: 17px; transition: transform 250ms ease; }
.live-link:hover { border-color: var(--green-bright); color: var(--green-bright); }
.live-link:hover span { transform: translate(4px,-4px); }
.live-link-secondary { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.live-link-secondary:hover { border-color: #fff; color: #fff; }
.live-visual { --live-rx: 0deg; --live-ry: 0deg; --live-x: 50%; --live-y: 50%; perspective: 1100px; position: relative; }
.live-frame { background: #050806; border: 1px solid rgba(183,227,145,.28); box-shadow: 0 38px 90px rgba(0,0,0,.42), 0 0 0 8px rgba(255,255,255,.018), 0 0 70px rgba(94,161,83,.1); overflow: hidden; position: relative; transform: rotateX(var(--live-rx)) rotateY(var(--live-ry)); transform-style: preserve-3d; transition: transform 180ms ease-out, box-shadow 300ms ease; }
.live-frame::before { background: radial-gradient(circle at var(--live-x) var(--live-y), rgba(183,227,145,.13), transparent 27%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 4; }
.live-frame::after { background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 4px); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 3; }
.live-visual:hover .live-frame { box-shadow: 0 45px 110px rgba(0,0,0,.5), 0 0 0 8px rgba(255,255,255,.025), 0 0 90px rgba(114,192,98,.17); }
.live-image { aspect-ratio: 1692 / 930; display: block; height: auto; object-fit: cover; width: 100%; }
.live-frame figcaption { align-items: center; background: linear-gradient(90deg, rgba(3,8,5,.88), rgba(3,8,5,.45)); bottom: 0; color: rgba(255,255,255,.48); display: flex; font-size: 6px; justify-content: space-between; left: 0; letter-spacing: .14em; padding: 13px 16px; position: absolute; right: 0; z-index: 6; }
.live-frame figcaption b { color: var(--green-bright); font-weight: 400; margin: 0 4px; }
.live-status { align-items: center; color: #fff; display: flex; gap: 7px; }
.live-status i { animation: livePulse 1.8s ease-in-out infinite; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 0 0 rgba(183,227,145,.4); height: 5px; width: 5px; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(183,227,145,0); opacity: .65; } }
.live-scan { animation: liveScan 6s ease-in-out infinite; background: linear-gradient(90deg, transparent, rgba(183,227,145,.2), transparent); height: 1px; left: 0; position: absolute; right: 0; top: -5%; z-index: 5; }
@keyframes liveScan { 0%,12% { opacity: 0; transform: translateY(0); } 28% { opacity: .75; } 65% { opacity: .25; transform: translateY(470px); } 66%,100% { opacity: 0; transform: translateY(470px); } }
.live-node { animation: nodeFloat 4.5s ease-in-out infinite; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 0 5px rgba(183,227,145,.09), 0 0 22px rgba(183,227,145,.4); height: 4px; position: absolute; width: 4px; z-index: 7; }
.live-node-a { left: 5%; top: 18%; }
.live-node-b { animation-delay: -1.4s; right: 7%; top: 13%; }
.live-node-c { animation-delay: -2.7s; bottom: 17%; right: 4%; }
@keyframes nodeFloat { 50% { opacity: .45; transform: translateY(-8px); } }
.live-orbit { border: 1px solid rgba(183,227,145,.12); border-radius: 50%; height: 122%; left: -8%; pointer-events: none; position: absolute; top: -11%; width: 116%; }
.live-orbit::before { border: 1px dashed rgba(255,255,255,.08); border-radius: 50%; content: ""; inset: 8%; position: absolute; }
.live-orbit i { background: var(--green-bright); border-radius: 50%; height: 3px; position: absolute; width: 3px; }
.live-orbit i:first-child { left: 14%; top: 12%; }
.live-orbit i:nth-child(2) { right: 5%; top: 44%; }
.live-orbit i:last-child { bottom: 4%; left: 39%; }
.live-caption { align-items: center; color: rgba(255,255,255,.33); display: flex; font-size: 6px; justify-content: space-between; letter-spacing: .14em; margin-top: 16px; }
.live-caption span { color: var(--green-bright); }

.services { background: #e0e5dc; }
.section-heading { align-items: flex-end; display: flex; justify-content: space-between; }
.section-heading > p { color: #667068; font-size: 10px; line-height: 1.75; margin-bottom: 8px; max-width: 340px; }
.services-grid { border-left: 1px solid var(--line-dark); border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(3,1fr); margin-top: 82px; }
.service-card { background: rgba(255,255,255,.14); border-bottom: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); min-height: 330px; overflow: hidden; padding: 27px; position: relative; transition: background 300ms ease, transform 300ms ease; }
.service-card::before { background: radial-gradient(circle, rgba(175,220,142,.42), transparent 69%); content: ""; height: 280px; left: var(--spot-x, 50%); opacity: 0; position: absolute; top: var(--spot-y, 50%); transform: translate(-50%,-50%); transition: opacity 200ms ease; width: 280px; }
.service-card:hover { background: rgba(255,255,255,.45); transform: translateY(-5px); z-index: 2; }
.service-card:hover::before { opacity: 1; }
.service-card > span { color: #7a837b; font-size: 8px; position: relative; }
.service-card > small { border: 1px solid rgba(19,52,29,.25); border-radius: 20px; color: #566157; float: right; font-size: 6px; letter-spacing: .15em; padding: 6px 9px; position: relative; }
.service-card h3 { font-size: clamp(21px, 2vw, 30px); font-weight: 520; letter-spacing: -.045em; line-height: 1.05; margin-top: 85px; max-width: 270px; position: relative; }
.service-card p { color: #616a62; font-size: 10px; line-height: 1.65; margin-top: 15px; max-width: 310px; position: relative; }
.service-card > i { bottom: 24px; font-size: 18px; font-style: normal; position: absolute; right: 26px; transition: transform 250ms ease; }
.service-card:hover > i { transform: translate(4px,-4px); }
.channel-line { align-items: center; border-bottom: 1px solid var(--line-dark); display: flex; justify-content: space-between; padding: 22px 0; }
.channel-line > span { color: #69736a; font-size: 7px; letter-spacing: .17em; }
.channel-line p { font-size: 8px; font-weight: 650; letter-spacing: .13em; }
.channel-line i { color: #7da56f; font-style: normal; margin: 0 14px; }

.tools { background: #061009; color: #fff; overflow: hidden; }
.tools-heading { padding-bottom: 72px; }
.tools-heading h2 em { color: var(--green-bright); }
.tools-heading > p:last-child { color: rgba(255,255,255,.48); font-size: 10px; margin-top: 30px; }
.tool-marquee { border-bottom: 1px solid var(--line-light); border-top: 1px solid var(--line-light); overflow: hidden; }
.tool-track { animation: marquee 34s linear infinite; display: flex; width: max-content; }
.tool-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tool-card { align-items: center; border-right: 1px solid var(--line-light); display: grid; gap: 0 13px; grid-template-columns: 46px auto; min-width: 290px; padding: 23px 32px; transition: background 260ms ease; }
.tool-card:hover { background: rgba(255,255,255,.035); }
.tool-logo { align-items: center; background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; display: flex; grid-row: span 2; height: 42px; justify-content: center; overflow: hidden; position: relative; transition: border-color 260ms ease, transform 260ms ease; width: 42px; }
.tool-logo::after { border: 1px solid rgba(255,255,255,.16); border-radius: inherit; content: ""; inset: 0; pointer-events: none; position: absolute; }
.tool-logo img { display: block; filter: saturate(.82); height: 100%; object-fit: contain; transition: filter 260ms ease, transform 260ms ease; width: 100%; }
.tool-card:hover .tool-logo { border-color: rgba(183,227,145,.6); transform: translateY(-2px); }
.tool-card:hover .tool-logo img { filter: saturate(1.05); transform: scale(1.06); }
.tool-logo-gemini { background: #000; }
.tool-logo-gemini img { height: 78%; width: 90%; }
.tool-logo-gemma img,
.tool-logo-notion img { height: 91%; width: 91%; }
.tool-card strong { font-size: 17px; font-weight: 520; letter-spacing: -.03em; }
.tool-card small { color: rgba(255,255,255,.35); font-size: 6px; letter-spacing: .16em; margin-top: 4px; }

.method { background: var(--paper); display: grid; gap: 9vw; grid-template-columns: .85fr 1.15fr; }
.method-heading { align-self: start; position: sticky; top: 130px; }
.method-heading h2 { font-size: clamp(39px, 4.4vw, 67px); }
.method-list { border-top: 1px solid var(--line-dark); }
.method-row { align-items: center; border-bottom: 1px solid var(--line-dark); display: grid; gap: 22px; grid-template-columns: 36px 1fr 1.15fr 20px; min-height: 150px; padding: 20px 0; transition: padding 280ms ease; }
.method-row:hover { padding-left: 11px; padding-right: 11px; }
.method-row > span { color: #849086; font-size: 8px; }
.method-row h3 { color: #183b24; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(28px, 3vw, 45px); font-style: italic; font-weight: 500; }
.method-row p { color: #687069; font-size: 10px; line-height: 1.7; }
.method-row i { font-size: 18px; font-style: normal; }

.choice { background: #d8ded5; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 76px; }
.choice-card { min-height: 660px; padding: clamp(30px,4vw,62px); position: relative; }
.choice-card > span { font-size: 7px; letter-spacing: .18em; opacity: .53; }
.choice-card h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(53px,6vw,88px); font-style: italic; font-weight: 400; letter-spacing: -.05em; margin: 24px 0 10px; }
.choice-card > p { font-size: 10px; line-height: 1.8; max-width: 430px; opacity: .68; }
.choice-card ul { list-style: none; margin-top: 55px; }
.choice-card li { border-top: 1px solid currentColor; font-size: 10px; padding: 16px 0; }
.choice-card li::before { color: #6da05e; content: "＋"; margin-right: 14px; }
.choice-actions { bottom: 38px; display: flex; flex-direction: column; gap: 6px; left: clamp(30px,4vw,62px); position: absolute; right: clamp(30px,4vw,62px); }
.choice-actions > a { align-items: center; border-bottom: 1px solid currentColor; display: flex; font-size: 8px; font-weight: 700; justify-content: space-between; letter-spacing: .1em; padding: 10px 0; text-transform: uppercase; }
.choice-actions > a span { font-size: 17px; transition: transform 220ms ease; }
.choice-actions > a:hover span { transform: translate(4px,-4px); }
.choice-light { background: #f5f6f2; }
.choice-dark { background: #061009; color: #fff; }
.choice-dark li { border-color: rgba(255,255,255,.17); }
.choice-dark li::before { color: var(--green-bright); }
.choice-note { color: #697169; font-size: 7px; letter-spacing: .1em; margin-top: 17px; text-align: right; text-transform: uppercase; }

.faq { background: var(--paper); display: grid; gap: 10vw; grid-template-columns: .8fr 1.2fr; }
.faq-heading h2 { font-size: clamp(42px,5vw,72px); }
.faq-list { border-top: 1px solid var(--line-dark); }
.faq details { border-bottom: 1px solid var(--line-dark); }
.faq summary { align-items: center; cursor: pointer; display: grid; font-size: 12px; font-weight: 550; gap: 20px; grid-template-columns: 32px 1fr 20px; list-style: none; min-height: 85px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: #849086; font-size: 8px; }
.faq summary i { color: #477a4d; font-size: 21px; font-style: normal; font-weight: 300; transition: transform 220ms ease; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { color: #687069; font-size: 10px; line-height: 1.8; max-width: 630px; padding: 0 28px 29px 52px; }

.final-cta { align-items: center; color: #fff; display: flex; justify-content: center; min-height: 100svh; overflow: hidden; padding: 110px 22px; position: relative; text-align: center; }
.final-cta > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.final-shade { background: radial-gradient(circle, rgba(2,8,4,.24), rgba(2,8,4,.88) 72%), linear-gradient(rgba(2,8,4,.58), rgba(2,8,4,.8)); inset: 0; position: absolute; }
.final-content { max-width: 970px; position: relative; z-index: 3; }
.final-content .section-kicker { color: rgba(255,255,255,.62); justify-content: center; margin-bottom: 28px; }
.final-content h2 { font-size: clamp(48px,7.3vw,112px); font-weight: 450; letter-spacing: -.07em; line-height: .91; }
.final-content h2 em { color: var(--green-bright); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; }
.final-content > p { color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.75; margin: 30px auto 0; max-width: 570px; }
.final-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.final-actions .button { margin-top: 0; }
.final-content small { color: rgba(255,255,255,.42); display: block; font-size: 6px; letter-spacing: .16em; margin-top: 17px; }

footer { align-items: center; background: #050a07; border-top: 1px solid var(--line-light); color: #fff; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 37px clamp(22px,4.5vw,72px); }
footer > p { color: rgba(255,255,255,.4); font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; font-style: italic; text-align: center; }
footer > div { display: flex; gap: 23px; justify-self: end; }
footer > div span,
footer > div a { color: rgba(255,255,255,.45); font-size: 7px; letter-spacing: .13em; }
footer > div a:hover { color: var(--green-bright); }
.floating-actions { bottom: 20px; display: flex; flex-direction: column; gap: 10px; position: fixed; right: 20px; z-index: 90; }
.float-btn { align-items: center; background: #fff; border: 1px solid rgba(17,62,28,.18); box-shadow: 0 10px 34px rgba(0,0,0,.2); color: var(--ink); display: flex; font-size: 8px; font-weight: 700; gap: 14px; letter-spacing: .1em; padding: 12px 16px; text-transform: uppercase; transition: background 220ms ease, border-color 220ms ease, transform 220ms ease; }
.float-btn i { font-size: 15px; font-style: normal; }
.float-whatsapp:hover { background: var(--green-bright); border-color: var(--green); transform: translateY(-3px); }
.float-calendar { background: #07100b; border-color: rgba(255,255,255,.2); color: #fff; }
.float-calendar:hover { background: var(--green-deep); border-color: var(--green-bright); transform: translateY(-3px); }

.reveal { opacity: 0; transform: translateY(27px); transition: opacity 750ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .hero-copy { width: 67%; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .story-copy { width: 43%; }
}

@media (max-width: 820px) {
  .nav-shell { height: 68px; }
  .menu-button { display: block; z-index: 102; }
  .nav-links { align-items: stretch; background: rgba(3,10,5,.98); flex-direction: column; gap: 0; height: 100svh; justify-content: center; padding: 80px 30px; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform 350ms cubic-bezier(.2,.8,.2,1); width: min(84vw,390px); }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links > a:not(.nav-cta) { border-bottom: 1px solid rgba(255,255,255,.12); font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; font-style: italic; font-weight: 400; letter-spacing: -.02em; padding: 18px 0; text-transform: none; }
  .nav-cta { margin-top: 25px; min-height: 55px; }
  .hero { align-items: flex-start; min-height: 900px; padding-top: 124px; }
  .hero-landscape { object-position: 62% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(2,8,4,.82), rgba(2,8,4,.24) 58%, rgba(2,8,4,.72)); }
  .hero-copy { width: 100%; }
  .hero-data { bottom: 25px; }
  .scroll-signal { display: none; }
  .eco-background { object-position: 58% center; }
  .eco-call-scene { left: 30px; top: 88px; transform: scale(var(--eco-call-scale, .985)); width: calc(100% - 60px); }
  .eco-call-image { object-position: 43% center; }
  .eco-call-control { bottom: 14px; width: 230px; }
  .eco-structure-scene { left: -8%; top: 122px; transform: scale(var(--eco-structure-scale, .97)); width: 116%; }
  .eco-teach-scene { left: 30px; top: 88px; transform: scale(var(--eco-teach-scale, .98)); width: calc(100% - 60px); }
  .eco-ops-scene { height: min(43vh,410px); left: 30px; top: 82px; transform: scale(var(--eco-ops-scale,.96)); width: calc(100% - 60px); }
  .eco-vignette { background: linear-gradient(180deg, rgba(2,8,4,.08), rgba(2,8,4,.25) 45%, rgba(2,8,4,.97) 68%); }
  .story-copy { background: linear-gradient(180deg, transparent, rgba(2,8,4,.97) 18%); bottom: 0; height: 52%; justify-content: center; padding: 38px 30px 25px; width: 100%; }
  .story-copy .section-kicker { margin-bottom: 20px; }
  .story-stage { height: clamp(160px, 27vh, 210px); }
  .story-step { width: 100%; }
  .story-step h2 { font-size: 53px; }
  .story-meter { margin-top: 15px; }
  .eco-reticle { left: 64%; top: 34%; }
  .manifesto-grid { gap: 55px; grid-template-columns: 1fr; margin-top: 60px; }
  .live-grid { grid-template-columns: 1fr; }
  .live-copy { max-width: 660px; }
  .live-visual { margin: 10px auto 0; max-width: 760px; width: 100%; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 28px; }
  .method { grid-template-columns: 1fr; }
  .method-heading { position: static; }
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .brand-mark { height: 32px; width: 32px; }
  .brand-text { font-size: 9px; }
  .hero { min-height: 840px; padding-left: 22px; padding-right: 22px; }
  .hero-landscape { height: 100%; inset: 0; object-position: 66% center; }
  .hero .eyebrow { line-height: 1.55; max-width: 300px; }
  .hero h1 { font-size: clamp(39px,11.3vw,56px); }
  .hero-lead { font-size: 11px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .hero-data { font-size: 5px; }
  .eco-story { height: 360vh; }
  .eco-background { height: 63%; object-position: 63% center; width: 108%; }
  .eco-call-scene { left: 18px; top: 78px; width: calc(100% - 36px); }
  .eco-call-image { object-position: 39% center; }
  .eco-call-control { bottom: 10px; width: 205px; }
  .eco-structure-scene { left: -12%; top: 105px; width: 124%; }
  .eco-teach-scene { left: 18px; top: 78px; width: calc(100% - 36px); }
  .eco-ops-scene { height: min(36vh,310px); left: 18px; top: 72px; width: calc(100% - 36px); }
  .eco-ops-scene::before { inset: -8px; }
  .ops-system-head { font-size: 5px; }
  .ops-panel { height: 53%; width: 61%; }
  .ops-panel-n8n { top: 9%; }
  .ops-panel-crm { bottom: 5%; }
  .ops-panel figcaption { height: 25px; padding: 0 7px; }
  .ops-panel figcaption span,.ops-panel figcaption strong { font-size: 4px; }
  .ops-panel figcaption strong { display: none; }
  .ops-panel img { height: calc(100% - 25px); }
  .ops-panel::after { inset: 25px 0 0; }
  .ops-sync-badge { padding: 6px 8px; }
  .ops-sync-badge small { font-size: 4px; }
  .ops-sync-badge strong { font-size: 8px; }
  .ops-system-foot { display: none; }
  .eco-teach-meta { display: none; }
  .eco-teach-badge { left: 10px; top: 10px; }
  .story-copy { height: 56%; padding: 32px 22px 22px; }
  .story-stage { height: clamp(150px, 26vh, 190px); }
  .story-step { width: 100%; }
  .story-step h2 { font-size: 46px; margin-bottom: 12px; }
  .story-step p { font-size: 9px; line-height: 1.65; }
  .story-meter { margin-top: 13px; }
  .eco-reticle { height: 72px; left: 66%; top: 25%; width: 72px; }
  .eco-coordinate { display: none; }
  .section-pad { padding-left: 22px; padding-right: 22px; }
  .manifesto-title h2,
  .section-heading h2,
  .tools-heading h2,
  .method-heading h2,
  .choice-heading h2,
  .faq-heading h2 { font-size: 42px; }
  .manifesto blockquote { font-size: 30px; }
  .live-copy h2 { font-size: 42px; }
  .live-intro { font-size: 9px; }
  .live-orbit { display: none; }
  .live-frame figcaption { padding: 10px 11px; }
  .live-caption { line-height: 1.5; }
  .services-grid { grid-template-columns: 1fr; margin-top: 52px; }
  .service-card { min-height: 280px; }
  .service-card h3 { margin-top: 65px; }
  .channel-line { align-items: flex-start; flex-direction: column; gap: 16px; }
  .channel-line p { line-height: 2; }
  .channel-line i { margin: 0 5px; }
  .tool-card { min-width: 250px; padding-left: 24px; padding-right: 24px; }
  .method-row { gap: 14px; grid-template-columns: 27px 1fr 18px; min-height: 128px; }
  .method-row h3 { font-size: 34px; }
  .method-row p { display: none; }
  .choice-grid { grid-template-columns: 1fr; margin-top: 50px; }
  .choice-card { min-height: 560px; }
  .choice-note { line-height: 1.5; text-align: left; }
  .faq summary { font-size: 10px; gap: 11px; grid-template-columns: 25px 1fr 18px; }
  .faq details p { padding-left: 36px; }
  .final-cta { min-height: 780px; }
  .final-content h2 { font-size: 50px; }
  .final-content .button { min-width: 0; }
  footer { gap: 24px; grid-template-columns: 1fr; text-align: center; }
  footer .brand,
  footer > div { justify-self: center; }
  .floating-actions { bottom: 16px; right: 16px; gap: 8px; }
  .float-btn { border-radius: 50%; height: 44px; justify-content: center; padding: 0; width: 44px; }
  .float-btn span { display: none; }
  .ambient-cloud-c,
  .ambient-cloud-d { display: none; }
  .ambient-cloud-a { height: 16vh; width: 82vw; }
  .ambient-cloud-b { height: 13vh; width: 70vw; }
}

@media (max-height: 650px) and (min-width: 821px) {
  .story-copy .section-kicker { margin-bottom: 18px; }
  .story-stage { height: 185px; }
  .story-step h2 { font-size: clamp(50px, 8vh, 66px); margin: 6px 0 14px; }
  .story-step p { font-size: 9px; line-height: 1.65; }
  .story-meter { margin-top: 14px; }
}

@media (max-height: 520px) {
  .story-copy { padding-bottom: 18px; padding-top: 18px; }
  .story-copy .section-kicker { margin-bottom: 11px; }
  .story-stage { height: 145px; }
  .story-step h2 { font-size: 47px; margin: 4px 0 9px; }
  .story-step p { font-size: 8px; line-height: 1.55; }
  .story-meter { margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .leaf-field,.story-leaves,.ambient-clouds,.live-scan { display: none; }
  .eco-call-control { animation: none; }
  .eco-flow-pulse { animation: none; }
  .eco-teach-badge i { animation: none; }
  .ops-link > i,.ops-system-head strong i,.ops-panel figcaption span i { animation: none; }
  .live-frame { transform: none !important; }
}