/* -----------------------------------------------------------
ROOT
----------------------------------------------------------- */
:root{
  --bg: #070D09;
  --bg2:#050A07;
  --text:#EAF7F0;
  --muted: rgba(234,247,240,0.72);

  --g1:#0B3B22;
  --g2:#138A4B;
  --g3:#4ADF8E;
  --g4:#9BFF5B;

  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(155,255,91,0.18);

  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,0.50);
  --shadow2: 0 10px 34px rgba(0,0,0,0.35);

  --wrap: 1120px;
}

/* -----------------------------------------------------------
BASE
----------------------------------------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(19,138,75,0.14), transparent 55%),
    radial-gradient(700px 500px at 80% 30%, rgba(155,255,91,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color: var(--text);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

.wrap{
  width: min(var(--wrap), calc(100% - 44px));
  margin: 0 auto;
}

.noScroll{ overflow:hidden; }

/* Decorative noise/grain (not mouse tracking) */
.noise{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  z-index:0;
}
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode: overlay;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.08), transparent 55%);
  z-index:0;
}

/* -----------------------------------------------------------
NAV
----------------------------------------------------------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,13,9,0.86), rgba(7,13,9,0.50));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand__mono{
  width: 44px;     /* bigger monogram */
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.35));
}
.brand__name{
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: 15px;
  color: rgba(234,247,240,0.92);
}

.nav__links{
  display:flex;
  gap:18px;
  font-size: 13.5px;
  color: rgba(234,247,240,0.78);
}
.nav__links a{
  padding: 8px 6px;
  border-radius: 12px;
}
.nav__links a:hover{
  background: rgba(255,255,255,0.04);
  color: rgba(234,247,240,0.94);
}

.nav__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
.burger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(234,247,240,0.78);
  margin: 6px auto;
  border-radius: 6px;
}

.mobile{
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mobile[aria-hidden="true"]{ display:none; }
.mobile__inner{
  padding: 12px 0 16px;
  display:grid;
  gap:8px;
}
.mobile__inner a{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(234,247,240,0.82);
}
.mobile__cta{
  display:flex;
  gap:10px;
  padding-top: 8px;
}

/* -----------------------------------------------------------
BUTTONS
(No mouse-tracking hover effects. Simple hover only.)
----------------------------------------------------------- */
.btn{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(234,247,240,0.92);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13.5px;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  position:relative;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(155,255,91,0.22);
}
.btn:active{ transform: translateY(0px); }

.btn--ghost{
  background: rgba(255,255,255,0.03);
}

.btn--primary{
  background: linear-gradient(135deg, rgba(19,138,75,0.55), rgba(155,255,91,0.42));
  border-color: rgba(155,255,91,0.28);
  box-shadow: 0 10px 28px rgba(74,223,142,0.16);
}
.btn--primary:hover{
  box-shadow: 0 14px 40px rgba(74,223,142,0.18);
}

/* keep your existing shine if you want (this is not mouse tracking) */
.btn__shine{
  position:absolute;
  inset:0;
  border-radius: inherit;
  overflow:hidden;
  pointer-events:none;
}
.btn__shine::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: rotate(20deg);
  animation: shine 6.5s ease-in-out infinite;
  opacity:0.9;
}
@keyframes shine{
  0%{ transform: translateX(0) rotate(20deg); opacity:0; }
  18%{ opacity:1; }
  36%{ transform: translateX(280%) rotate(20deg); opacity:0; }
  100%{ transform: translateX(280%) rotate(20deg); opacity:0; }
}

.btn--mag{ padding: 12px 16px; }

/* -----------------------------------------------------------
HERO
----------------------------------------------------------- */
.hero{
  position:relative;
  min-height: calc(100vh - 76px);
  display:flex;
  align-items:center;
  padding: 44px 0 30px;
  z-index:1;
}

.hero__bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
}

.hero__img{
  position:absolute;
  inset:-40px;
  background: url("../img/hero-landscape.jpg") center/cover no-repeat;
  filter: saturate(1.08) contrast(1.05);
  transform: translate3d(0,0,0) scale(1.05);
}

.hero__veil{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(7,13,9,0.10), rgba(7,13,9,0.92) 70%, rgba(7,13,9,1));
}

.hero__scan{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(155,255,91,0.08), transparent);
  width: 36%;
  transform: translateX(-140%) skewX(-10deg);
  animation: scan 8s cubic-bezier(.2,.9,.2,1) infinite;
  mix-blend-mode: screen;
}
@keyframes scan{
  0%{ transform: translateX(-140%) skewX(-10deg); }
  40%{ transform: translateX(320%) skewX(-10deg); }
  100%{ transform: translateX(320%) skewX(-10deg); }
}

.hero__content{
  padding-top: 10px;
}

.title{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.9px;
  line-height: 0.98;
  font-size: clamp(40px, 5vw, 64px);
}

.sub{
  margin: 14px 0 0;
  max-width: 64ch;
  color: rgba(234,247,240,0.72);
  font-size: 16px;
  line-height: 1.6;
}

.hero__ctas{
  margin-top: 18px;
  display:flex;
  gap:12px;
  flex-wrap: wrap;
}

.scrollHint{
  margin-top: 26px;
  width: 24px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  display:grid;
  place-items:center;
  opacity:0.85;
}
.scrollHint span{
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: rgba(155,255,91,0.55);
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{ transform: translateY(-4px); opacity:0.6; }
  50%{ transform: translateY(6px); opacity:1; }
}

/* -----------------------------------------------------------
SECTIONS
----------------------------------------------------------- */
.section{
  padding: 86px 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.section__inner{
  display:grid;
  gap: 18px;
}

.block h2{
  margin:0;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing:-0.4px;
}
.block p{
  margin: 10px 0 0;
  color: rgba(234,247,240,0.72);
  line-height: 1.65;
  max-width: 72ch;
}

.inline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.14);
  color: rgba(234,247,240,0.82);
  font-size: 12.5px;
}
.dot{
  width: 8px; height: 8px;
  border-radius: 99px;
}
.d1{ background: var(--g2); }
.d2{ background: var(--g3); }
.d3{ background: rgba(155,255,91,0.70); }

.oneLine{
  margin-top: 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);
  padding: 16px;
  color: rgba(234,247,240,0.86);
  box-shadow: var(--shadow2);
  max-width: 80ch;
}
.quoteMark{
  color: rgba(155,255,91,0.62);
  margin-right: 6px;
  font-weight: 900;
}

/* FOR GRID */
.forGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 10px;
}
.forItem{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);
  padding: 16px;
  display:flex;
  gap: 14px;
  box-shadow: var(--shadow2);
}
.ico{
  width: 18px; height: 18px;
  display:inline-grid;
  place-items:center;
  color: rgba(234,247,240,0.74);
}
.ico svg{ width: 18px; height: 18px; }
.ico.big svg{ width: 28px; height: 28px; }

.forTitle{
  font-weight: 900;
  letter-spacing: -0.2px;
}
.forSub{
  margin-top: 6px;
  color: rgba(234,247,240,0.68);
  font-size: 13.5px;
  line-height: 1.55;
}

.ctaBar{
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(155,255,91,0.20);
  background: linear-gradient(135deg, rgba(19,138,75,0.14), rgba(0,0,0,0.12));
  padding: 14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.ctaBar__text{
  color: rgba(234,247,240,0.76);
  font-size: 13.5px;
}

/* TRUST */
.trustRow{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.trustItem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  color: rgba(234,247,240,0.78);
  font-size: 12.5px;
}
.tick{
  width: 10px; height: 10px;
  border-radius: 3px;
  background: rgba(155,255,91,0.35);
  border: 1px solid rgba(155,255,91,0.35);
  box-shadow: 0 0 16px rgba(155,255,91,0.14);
}

/* FOOTER */
.footer{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.footer__left{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer__mono{
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity:0.92;
}
.footer__name{
  font-weight: 900;
  letter-spacing:-0.2px;
}
.footer__sub{
  margin-top: 2px;
  color: rgba(234,247,240,0.62);
  font-size: 12.5px;
}
.footer__right{
  display:flex;
  align-items:center;
  gap: 14px;
  color: rgba(234,247,240,0.70);
}
.link{
  border:0;
  background: transparent;
  color: rgba(234,247,240,0.78);
  cursor:pointer;
  padding:0;
}
.link:hover{ color: rgba(234,247,240,0.95); }
.year{ opacity:0.72; }

/* -----------------------------------------------------------
MODAL
----------------------------------------------------------- */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
}
.modal[aria-hidden="true"]{ display:none; }

.modal__bg{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(8px);
}

.modal__panel{
  position:relative;
  width: min(560px, calc(100% - 26px));
  margin: 90px auto 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(7,13,9,0.92);
  box-shadow: var(--shadow);
  padding: 18px;
  animation: pop .22s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes pop{
  from{ transform: translateY(18px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

.modal__x{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(234,247,240,0.90);
  cursor:pointer;
}
.modal__x:hover{
  border-color: rgba(155,255,91,0.20);
}

.modal__head{
  padding-right: 54px;
}
.modal__title{
  font-weight: 950;
  letter-spacing:-0.3px;
  font-size: 18px;
}
.modal__sub{
  margin-top: 6px;
  color: rgba(234,247,240,0.65);
  font-size: 13.5px;
  line-height:1.55;
}

/* FORM */
.form{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.form label{
  display:grid;
  gap: 8px;
  color: rgba(234,247,240,0.74);
  font-size: 12.5px;
}
.form input, .form select{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  color: rgba(234,247,240,0.92);
  outline:none;
}
.form input:focus, .form select:focus{
  border-color: rgba(155,255,91,0.24);
  box-shadow: 0 0 0 3px rgba(155,255,91,0.10);
}

.form__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top: 8px;
}

.form__msg{
  min-height: 18px;
  font-size: 12.5px;
  color: rgba(234,247,240,0.68);
}
.form__msg.is-ok{
  color: rgba(155,255,91,0.85);
}

/* -----------------------------------------------------------
REVEAL
----------------------------------------------------------- */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.2,.9,.2,1), transform .65s cubic-bezier(.2,.9,.2,1);
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* -----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------- */
@media (max-width: 980px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .forGrid{ grid-template-columns: 1fr; }
  .footer{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}