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

:root {
  --bg: #f5f4ef;
  --paper: #fbfaf6;
  --ink: #0b0f14;
  --muted: #65706f;
  --line: rgba(11,15,20,.13);
  --lime: #bcff3f;
  --green: #215b45;
  --deep: #07130f;
  --radius: 28px;
  --shadow: 0 24px 80px rgba(17,25,23,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, rgba(188,255,63,.10), transparent 24rem),
    radial-gradient(circle at 90% 5%, rgba(33,91,69,.08), transparent 28rem);
  z-index: -2;
}
.noise {
  position: fixed;
  inset: 0;
  opacity: .22;
  pointer-events:none;
  z-index:-1;
  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='.09'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline:auto; }

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  background: rgba(245,244,239,.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(11,15,20,.06);
}
.nav { display:flex; align-items:center; justify-content:space-between; min-height:52px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.03em; }
.brand-mark {
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background: var(--ink); color: var(--lime);
}
.brand-mark svg { width:23px; height:23px; fill:currentColor; }
.nav-links { display:flex; gap:30px; font-size:14px; font-weight:600; color:#47504f; }
.nav-links a:hover, .footer-links a:hover { color:var(--green); }

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  transition:.2s ease;
}
.button:hover { transform:translateY(-2px); }
.button-small { min-height:40px; padding-inline:16px; font-size:13px; }
.button-ghost { border:1px solid var(--line); background:rgba(255,255,255,.34); }
.button-primary { background:var(--ink); color:white; box-shadow:0 12px 30px rgba(11,15,20,.14); }
.button-primary span { color:var(--lime); }
.button-link { padding-inline:8px; }
.button-dark { background:var(--deep); color:white; width:max-content; }

.hero {
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  gap:52px;
  align-items:center;
  min-height:760px;
  padding-top:70px;
  padding-bottom:70px;
}
.eyebrow {
  display:flex; align-items:center; gap:9px;
  margin-bottom:22px;
  font-family:"DM Mono", monospace;
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--green);
}
.pulse { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(188,255,63,.2); }
h1,h2,h3,p { margin-top:0; }
h1 {
  margin-bottom:28px;
  font-size:clamp(62px, 7.7vw, 106px);
  line-height:.91;
  letter-spacing:-.075em;
  font-weight:800;
}
.gradient-text {
  background:linear-gradient(110deg, var(--green), #57a35a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lead { max-width:650px; font-size:19px; line-height:1.72; color:#59615f; }
.hero-actions { display:flex; gap:18px; align-items:center; margin-top:34px; }

.hero-visual { min-height:560px; position:relative; display:grid; place-items:center; }
.orb { position:absolute; border-radius:50%; filter:blur(0); }
.orb-one {
  width:360px; height:360px; background:var(--lime); top:22px; right:-30px; opacity:.68;
}
.orb-two {
  width:290px; height:290px; background:#6ea98a; left:0; bottom:10px; opacity:.36;
}
.lab-card {
  position:relative;
  width:min(410px, 90%);
  aspect-ratio:.78;
  padding:24px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:34px;
  background:linear-gradient(155deg, rgba(10,19,16,.96), rgba(17,37,29,.93));
  color:white;
  box-shadow:0 36px 90px rgba(6,19,14,.24);
  overflow:hidden;
  transform:rotate(3deg);
}
.lab-card::before {
  content:""; position:absolute; width:230px; height:230px; border-radius:50%;
  background:var(--lime); filter:blur(70px); opacity:.12; right:-80px; top:-60px;
}
.lab-card-top, .lab-card-bottom { position:relative; z-index:2; display:flex; justify-content:space-between; }
.lab-label { font: 500 11px "DM Mono", monospace; letter-spacing:.08em; color:#b5c3bc; }
.status-dot { font:500 10px "DM Mono",monospace; color:var(--lime); }
.status-dot::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--lime); }
.lab-symbol { height:72%; display:grid; place-items:center; }
.lab-symbol svg { width:68%; fill:var(--lime); filter:drop-shadow(0 12px 36px rgba(188,255,63,.13)); }
.lab-card-bottom { border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }
.lab-card-bottom > div { display:flex; flex-direction:column; gap:5px; }
.lab-card-bottom small { color:#87958e; font:9px "DM Mono",monospace; }
.lab-card-bottom strong { font-size:12px; }

.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.principle { padding:38px 32px; border-right:1px solid var(--line); }
.principle:last-child { border-right:0; }
.principle > span { color:var(--green); font:500 11px "DM Mono",monospace; }
.principle h3 { margin:18px 0 8px; font-size:18px; }
.principle p { color:var(--muted); font-size:14px; line-height:1.6; margin:0; }

.section { padding-top:130px; padding-bottom:40px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:48px; }
.section-heading h2 {
  margin:0;
  font-size:clamp(40px, 5vw, 70px);
  letter-spacing:-.055em;
  line-height:1;
}
.section-heading > p { color:var(--muted); max-width:300px; font-size:15px; line-height:1.6; }

.product-card {
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  min-height:590px;
  border-radius:var(--radius);
  overflow:hidden;
  background:#e9efe8;
  border:1px solid rgba(33,91,69,.10);
  box-shadow:var(--shadow);
}
.product-copy { padding:58px; display:flex; flex-direction:column; justify-content:center; }
.product-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.pill { padding:7px 10px; border:1px solid rgba(33,91,69,.18); border-radius:999px; font:500 10px "DM Mono",monospace; text-transform:uppercase; color:var(--green); }
.product-copy h3 { margin-bottom:4px; font-size:52px; letter-spacing:-.055em; }
.product-tagline { font-size:18px; color:var(--green); font-weight:600; margin-bottom:22px; }
.product-description { max-width:470px; color:#55605c; font-size:15px; line-height:1.75; }
.product-note { margin:6px 0 28px; font:500 11px "DM Mono",monospace; color:#75817c; }

.product-art {
  position:relative;
  min-height:590px;
  overflow:hidden;
  background:#153e2e;
  isolation:isolate;
}
.map-grid {
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:48px 48px;
  transform:rotate(12deg) scale(1.2);
}
.product-art::before,
.product-art::after {
  content:""; position:absolute; border-radius:50%; filter:blur(0); z-index:-1;
}
.product-art::before { width:360px; height:360px; background:#8bcb4d; left:-150px; top:-90px; opacity:.38; }
.product-art::after { width:260px; height:260px; background:var(--lime); right:-100px; bottom:-90px; opacity:.34; }
.phone {
  position:absolute; left:50%; top:50%; width:255px; height:510px;
  transform:translate(-50%,-47%) rotate(5deg);
  border:8px solid #07120e; border-radius:42px; padding:8px; background:#07120e;
  box-shadow:0 34px 60px rgba(0,0,0,.32);
}
.phone-notch { position:absolute; width:86px; height:22px; left:50%; top:13px; transform:translateX(-50%); border-radius:999px; background:#07120e; z-index:3; }
.phone-screen {
  height:100%; border-radius:29px; overflow:hidden; padding:55px 21px 22px;
  color:#ecf8ef;
  background:
    radial-gradient(circle at 70% 30%, rgba(188,255,63,.22), transparent 34%),
    linear-gradient(155deg,#0e3325,#071d15);
}
.screen-brand { font:600 9px "DM Mono",monospace; letter-spacing:.13em; color:var(--lime); }
.screen-stat { margin-top:58px; display:flex; align-items:flex-end; gap:7px; }
.screen-stat strong { font-size:58px; letter-spacing:-.08em; line-height:.9; }
.screen-stat span { color:#a7b7af; font-size:13px; margin-bottom:7px; }
.screen-track {
  margin-top:28px; height:145px; opacity:.8;
  background:
    radial-gradient(circle at 20% 25%, var(--lime) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 60%, #fff 0 4px, transparent 5px),
    linear-gradient(130deg, transparent 32%, rgba(188,255,63,.0) 32%);
  border:1px solid rgba(255,255,255,.09); border-radius:18px; position:relative;
}
.screen-track::after {
  content:""; position:absolute; left:22px; top:45px; width:150px; height:58px;
  border-top:2px dashed rgba(188,255,63,.8); border-radius:50%; transform:rotate(18deg);
}
.screen-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.screen-row > div { padding:12px; background:rgba(255,255,255,.06); border-radius:13px; }
.screen-row small { display:block; font:8px "DM Mono",monospace; color:#85958d; margin-bottom:5px; }
.screen-row b { font-size:13px; }
.route-dot { position:absolute; width:14px; height:14px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 7px rgba(188,255,63,.15); }
.r1 { top:18%; left:14%; } .r2 { top:38%; right:12%; } .r3 { bottom:16%; left:18%; }

.coming-card {
  margin-top:20px; padding:34px 42px; display:grid; grid-template-columns:1fr 1fr auto;
  align-items:center; gap:30px; border:1px dashed rgba(11,15,20,.18); border-radius:22px;
}
.coming-index { font:500 10px "DM Mono",monospace; color:var(--green); }
.coming-card h3 { margin:7px 0 0; font-size:21px; }
.coming-card p { margin:0; color:var(--muted); }
.coming-badge { padding:9px 12px; border-radius:999px; background:#e4e8df; font:500 10px "DM Mono",monospace; color:#687069; }

.about-section { padding-bottom:130px; }
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; }
.about-grid .section-heading { display:block; margin:0; }
.about-copy { padding-top:38px; }
.about-copy .large { font-size:26px; line-height:1.5; letter-spacing:-.025em; color:#1b2723; }
.about-copy > p:not(.large) { color:var(--muted); line-height:1.75; max-width:620px; }
.about-values { display:grid; grid-template-columns:1fr 1fr; gap:13px 25px; margin-top:36px; font-size:14px; font-weight:650; }
.about-values span { color:var(--green); margin-right:7px; }

.contact-section { background:var(--deep); color:#eef5f1; }
.contact-inner { min-height:450px; padding-block:86px; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.eyebrow-light { color:#9eb4a9; }
.contact-inner h2 { margin:0; font-size:clamp(48px,6vw,82px); letter-spacing:-.065em; line-height:.95; }
.contact-copy p { color:#98aaa1; max-width:430px; line-height:1.7; }
.contact-mail { display:inline-flex; gap:12px; margin-top:16px; font-size:22px; font-weight:700; border-bottom:1px solid #4c6659; padding-bottom:8px; }
.contact-mail span { color:var(--lime); }
.contact-copy small { display:block; margin-top:14px; color:#61776d; font:10px "DM Mono",monospace; }

.footer { background:#050d0a; color:#819088; border-top:1px solid rgba(255,255,255,.08); }
.footer-inner { min-height:105px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-footer { color:#d9e5df; font-size:14px; }
.brand-footer .brand-mark { width:30px; height:30px; }
.footer-links { display:flex; gap:20px; color:#7e9187; font-size:12px; }
.footer p { margin:0; font-size:11px; color:#63756c; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.12s; }

.legal { min-height:70vh; padding:110px 0 140px; }
.legal-shell { max-width:800px; }
.legal h1 { font-size:clamp(46px,6vw,78px); margin-bottom:22px; }
.legal h2 { margin-top:42px; font-size:23px; }
.legal p, .legal li { line-height:1.75; color:#56615d; }
.legal .updated { font:11px "DM Mono",monospace; color:var(--green); margin-bottom:45px; }
.legal-back { display:inline-flex; margin-bottom:50px; color:var(--green); font-size:13px; font-weight:700; }

@media (max-width: 900px) {
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:85px; }
  .hero-copy { max-width:720px; }
  .hero-visual { min-height:520px; }
  .principles { grid-template-columns:1fr; }
  .principle { border-right:0; border-bottom:1px solid var(--line); }
  .principle:last-child { border-bottom:0; }
  .product-card, .about-grid, .contact-inner { grid-template-columns:1fr; }
  .product-art { min-height:530px; }
  .about-grid { gap:30px; }
  .coming-card { grid-template-columns:1fr auto; }
  .coming-card > p { grid-column:1 / -1; grid-row:2; }
}
@media (max-width: 620px) {
  .container { width:min(100% - 24px, 1180px); }
  .nav .button { display:none; }
  h1 { font-size:clamp(55px,18vw,82px); }
  .hero { gap:20px; padding-top:70px; }
  .hero-lead { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-visual { min-height:480px; }
  .lab-card { width:85%; border-radius:28px; }
  .section { padding-top:95px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .product-copy { padding:34px 26px; }
  .product-copy h3 { font-size:44px; }
  .product-art { min-height:500px; }
  .phone { transform:translate(-50%,-48%) rotate(3deg) scale(.9); }
  .coming-card { padding:28px; grid-template-columns:1fr; }
  .coming-card > p { grid-column:auto; grid-row:auto; }
  .coming-badge { width:max-content; }
  .about-values { grid-template-columns:1fr; }
  .contact-inner { gap:40px; }
  .contact-mail { font-size:17px; }
  .footer-inner { padding-block:30px; flex-direction:column; align-items:flex-start; }
}