/* ============================================================
   BIOFARMS — Navigation + Hero
   ============================================================ */

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,1.8vw,26px) var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(6,23,15,0.78);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:rgba(237,242,236,0.10);
  padding-block:clamp(12px,1.2vw,16px);
}

.brand{ display:flex; align-items:center; gap:.08em; font-weight:800; font-size:clamp(20px,1.7vw,26px); letter-spacing:-0.02em; color:var(--on-dark); }
.brand img{ height:1.18em; width:auto; transform:translateY(0.06em); }
.brand .b1,.brand .b2{ line-height:1; }

.nav-links{
  display:flex; align-items:center; gap:clamp(20px,2.1vw,40px);
  font-size:14px; font-weight:500; letter-spacing:0.01em;
}
.nav-links a{ position:relative; color:var(--on-dark-soft); transition:color .35s var(--ease); padding-block:6px; }
.nav-links a:hover{ color:var(--on-dark); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--lime);
  transition:width .45s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:18px; }
.lang{ display:flex; align-items:center; gap:2px; font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--on-dark-soft); }
.lang button{ padding:4px 7px; border-radius:7px; transition:color .3s, background .3s; }
.lang button.active{ color:var(--ink); background:var(--on-dark); }
.lang .sep{ opacity:.3; }

.burger{ display:none; width:42px; height:42px; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
.burger span{ width:22px; height:1.8px; background:var(--on-dark); transition:transform .4s var(--ease), opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

/* mobile sheet */
.mobile-menu{
  position:fixed; inset:0; z-index:190;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad);
  gap:6px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.mobile-menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mobile-menu a{
  font-family:var(--serif); font-size:clamp(34px,9vw,58px); line-height:1.08;
  color:var(--on-dark); letter-spacing:-0.02em;
  transform:translateY(20px); opacity:0; transition:transform .6s var(--ease), opacity .6s var(--ease);
  display:flex; align-items:baseline; gap:.5em;
}
.mobile-menu a .mi{ font-family:var(--sans); font-size:.28em; font-weight:600; letter-spacing:.2em; color:var(--lime); }
.mobile-menu.open a{ transform:none; opacity:1; }
.mobile-menu.open a:nth-child(1){ transition-delay:.12s; }
.mobile-menu.open a:nth-child(2){ transition-delay:.18s; }
.mobile-menu.open a:nth-child(3){ transition-delay:.24s; }
.mobile-menu.open a:nth-child(4){ transition-delay:.30s; }
.mobile-menu.open a:nth-child(5){ transition-delay:.36s; }
.mobile-menu.open a:nth-child(6){ transition-delay:.42s; }
.mobile-foot{ margin-top:clamp(30px,6vw,60px); color:var(--on-dark-soft); font-size:14px; display:flex; flex-direction:column; gap:6px; opacity:0; transition:opacity .6s .5s; }
.mobile-menu.open .mobile-foot{ opacity:1; }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; min-height:100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,23,15,0.55) 0%, rgba(6,23,15,0.05) 26%, rgba(6,23,15,0.15) 55%, rgba(6,23,15,0.86) 100%),
    linear-gradient(95deg, rgba(6,23,15,0.55) 0%, rgba(6,23,15,0) 60%);
}
.hero__grid{
  position:absolute; inset:0; z-index:1; opacity:.16; pointer-events:none;
  background-image:linear-gradient(rgba(237,242,236,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(237,242,236,.5) 1px,transparent 1px);
  background-size:clamp(60px,7vw,130px) clamp(60px,7vw,130px);
  -webkit-mask-image:radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 65%);
          mask-image:radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 65%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,6vw,90px); }
.hero__est{
  font-size:12px; font-weight:600; letter-spacing:0.45em; text-transform:uppercase;
  color:var(--on-dark-soft); margin-bottom:clamp(20px,3vw,38px);
  display:flex; align-items:center; gap:1em;
}
.hero__est::before{ content:""; width:48px; height:1px; background:var(--lime); }
.hero h1{ color:#fff; margin-bottom:0.18em; }
.hero h1 .sub{ display:block; font-size:clamp(17px,2.1vw,30px); font-family:var(--sans); font-weight:300; letter-spacing:-0.01em; line-height:1.32; color:var(--on-dark); margin-top:0.7em; max-width:none; }
.hero__row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap;
  margin-top:clamp(28px,4vw,52px);
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__meta{ max-width:34ch; color:var(--on-dark-soft); font-size:15px; line-height:1.55; }

.scrollcue{
  position:absolute; left:var(--pad); bottom:clamp(20px,3vw,34px); z-index:3;
  display:flex; align-items:center; gap:12px; color:var(--on-dark-soft); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
}
.scrollcue .track{ width:1px; height:46px; background:rgba(237,242,236,.25); position:relative; overflow:hidden; }
.scrollcue .track::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--lime); animation:cue 2.1s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(260%);} }

.hero__corner{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); z-index:3;
  writing-mode:vertical-rl; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--on-dark-faint);
}

/* sound toggle */
.sound-btn{
  position:fixed; right:var(--pad); bottom:clamp(20px,3vw,34px); z-index:120;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(237,242,236,.28);
  background:rgba(6,23,15,.5); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), background .4s, opacity .5s;
  color:var(--on-dark);
}
.sound-btn:hover{ transform:scale(1.08); background:rgba(6,23,15,.8); }
.sound-btn svg{ width:20px; height:20px; }

@media (max-width:860px){
  .nav-links, .nav-right .lang, .nav-right .btn{ display:none; }
  .burger{ display:flex; }
  .hero{ align-items:flex-end; }
  .hero__corner{ display:none; }
  .scrollcue{ display:none; }
}