.nda-box{
  max-height: 180px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0f0f12;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13.5px;
  line-height: 1.6;
}
.nda-check{
  display: flex; gap: 8px; align-items: center;
  font-size: 13.5px; color: var(--muted); margin-top: 10px;
}
#investorDeckModal.is-visible { opacity: 1; transform: scale(1); }
#closeInvestorDeck { background: transparent; color:#cfcfcf; border:0; border-radius:10px; width:36px; height:36px; }
#closeInvestorDeck:hover { background:#222225; }

input.error {
  border: 1px solid #ff3b3b !important;
  background: rgba(255,0,0,0.05);
}
.error-msg {
  color: #ff6b6b;
  font-size: 12.5px;
  margin-top: 4px;
  padding-left: 4px;
}

#submitInvestorDeck {
  border: none;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 15px;
  line-height: 1;
  transition: none;
  box-shadow: none;
  cursor: pointer;
}

#submitInvestorDeck:hover,
#submitInvestorDeck:focus {
  transform: none;
  box-shadow: none;
}

#submitCompanyOverview {
  border: none;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 15px;
  line-height: 1;
  transition: none;
  box-shadow: none;
  cursor: pointer;
}

#submitCompanyOverview:hover,
#submitCompanyOverview:focus {
  transform: none;
  box-shadow: none;
}

#companyOverviewModal {
  backdrop-filter: blur(6px);
  border: none;
  max-width: 520px;
  width: 90%;
  border-radius: 12px;
  padding: 0;
}

#companyOverviewModal.is-visible {
  animation: fadeIn 0.3s ease forwards;
}

#companyOverviewStatus {
  font-size: 14px;
  margin-top: 8px;
}
:root{
  --bg:#c1c1c1;
  --text:#eaeaea;
  --muted:#a3a3a3;
  --accent:#C8FF00;
  --ring:rgba(200,255,0,0.35);
  --layout-gutter: clamp(20px, 4vw, 32px);
  --layout-max: 1200px;
  --layout-wide: 1400px;
  --section-gap: clamp(72px, 16vh, 128px);
  --section-gap-tight: clamp(48px, 12vh, 96px);
}
*{box-sizing:border-box}
html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 0;
}
body{
  margin:0;
  color:var(--text);
  background: #0b0b0c;
  font: 16px/1.5 "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* Shared layout patterns */
:where(.edge, .learn, .impact) .wrap{
  max-width: var(--layout-wide);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4.5vh, 36px);
  align-items: center;
}

:where(.problem-head,
       .indoor-title,
       .autonomy-title,
       .edge-title,
       .learn-title,
       .impact-title){
  margin: 0;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  color: #fff;
}

:where(.problem-sub,
       .autonomy-sub,
       .edge-sub,
       .learn-sub,
       .impact-sub){
  margin: 0 auto 48px;
  color: var(--muted);
  line-height: 1.6;
  font-size: clamp(14px, 1.8vw, 18px);
  text-align: center;
}

:where(.edge, .learn, .impact){
  padding: 80px 0;
  text-align: center;
}

.lime{
  color: var(--accent);
}

:where(.team, .story) .lime{
  font-weight: 700;
}

/* Header */
header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height:100px;
  display:flex; align-items:center;
  background: transparent;
}
.nav{display:flex; align-items:center; width:100%; gap:120px; position: relative;}
.brand{display:flex; align-items:center; font-weight:700; flex-shrink:0; padding-right: 200px}
.logo{
  width:48px; height:48px;
  display:block;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.links{display:flex; gap:60px; align-items:center; flex:1; justify-content:flex-start; margin-left: 100px}

/* Hamburger menu button */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 100;
  position: relative;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: var(--text);
  border-radius: 3px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}
.links a{
  color:var(--text);
  font-weight:600;
  font-size:14.5px;
  padding:6px 12px;
  border-radius:999px;
  transition: background 0.15s ease, color 0.15s ease, padding 0.3s ease, margin 0.3s ease;
  display: inline-block;
  white-space: nowrap;
  margin: 0 -4px;
}
.links a:hover{
  color:#0a0a0a;
  background:var(--accent);
  font-weight:600;
  padding-left: 18px;
  padding-right: 18px;
  margin-left: -10px;
  margin-right: -10px;
}
.pill{
  background:var(--accent); color:#0a0a0a; padding:10px 16px; border-radius:999px;
  font-weight:500;
  display: inline-block;
  transition: transform 0.3s ease;
  border: none;
  outline: none;
  box-shadow: none;
  white-space: nowrap;
}

/* Hero */
.hero{
  min-height: 100vh;
  padding: 120px 0;
  background-image: url("Assets/Hero Section Image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero .wrap{
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-title {
  opacity: 0;
}

.hero-sub {
  opacity: 0;
  transform: translateY(24px);
}

.hero-cta {
  opacity: 0;
  transform: translateY(32px);
}

@media (prefers-reduced-motion: no-preference) {
  .hero:not(.is-active) .hero-headline {
    opacity: 0;
    transform: translateY(24px);
  }

  .hero:not(.is-active) .hero-title {
    opacity: 0;
  }

  .hero:not(.is-active) .hero-sub {
    opacity: 0;
    transform: translateY(24px);
  }

  .hero:not(.is-active) .hero-cta {
    opacity: 0;
    transform: translateY(32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-sub,
  .hero-cta {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero.is-active .hero-headline,
  .hero.is-active .hero-title,
  .hero.is-active .hero-sub,
  .hero.is-active .hero-cta {
    animation: none;
  }
}

.hero.is-active {
  --hero-anim-delay: 0s;
}

@keyframes heroWrapperIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero.is-active .hero-headline {
  animation: heroWrapperIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroTitleIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero.is-active .hero-title {
  animation: heroTitleIn 0.6s ease forwards;
}

@keyframes heroSubIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero.is-active .hero-sub {
  animation: heroSubIn 0.6s ease forwards;
  animation-delay: 0.35s;
}

@keyframes heroCtaIn {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero.is-active .hero-cta {
  animation: heroCtaIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.85s;
}

.hero-content{
  max-width: 600px;
}
.grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:36px; align-items:center}
h1{font-size: clamp(28px, 4.5vw, 52px); line-height:1.05; margin:8px 0 10px; letter-spacing:-.02em; white-space: nowrap}
.sub{color:var(--muted); font-size: clamp(14px, 1.8vw, 18px); max-width:48ch; white-space: nowrap}
.ctaRow{margin-top:40px}

@media (max-width: 1000px){
  .hero{
    height: auto;
    min-height: 100vh;
    padding: clamp(110px, 22vh, 160px) 0 clamp(360px, 62vh, 600px);
    align-items: flex-start;
    justify-content: flex-start;
    background-image: url("Assets/Hero Mobile.png");
    background-size: min(676px, 130vw) auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #000;
  }
  .hero-video {
    display: none;
  }
  .hero .wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
  }
  .hero-content{
    text-align: center;
    margin: 0 auto;
    padding: 0 clamp(20px, 8vw, 48px);
  }
  .hero-content h1{
    text-align: center;
    white-space: normal;
  }
  .hero-content .sub{
    text-align: center;
    margin: 0 auto;
    white-space: normal;
  }
  .ctaRow{
    display: flex;
    justify-content: center;
    margin-top: 32px;
    position: relative;
    z-index: 2;
  }
  .grid{grid-template-columns:1fr; gap:24px}
}

@media (min-width: 768px) and (max-width: 1000px){
  .hero{
    padding: clamp(90px, 18vh, 140px) 0 clamp(220px, 42vh, 360px);
    background-image: url("Assets/Hero Ipad.png");
    background-size: 138% auto;
    background-position: center bottom;
  }
  .hero-content{
    padding: 0 clamp(56px, 10vw, 120px);
    max-width: 620px;
  }
  .hero-content h1{
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.08;
    white-space: nowrap;
  }
  .hero-content .sub{
    font-size: clamp(16px, 2vw, 19px);
  }
  .ctaRow{
    margin-top: 28px;
  }
}

/* Mobile Navigation */
@media (max-width: 900px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    padding: 0 24px;
    z-index: 100;
  }
  
  .wrap {
    width: 100%;
    padding: 0;
  }
  
  .hamburger {
    display: flex;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    margin-left: 0;
  }
  
  .brand {
    padding-right: 0;
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .nav {
    gap: 0;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }
  
  .links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 280px;
    background: rgba(11, 11, 12, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 100px 32px 32px;
    margin: 0;
    gap: 24px;
    transition: right 0.3s ease;
    z-index: 99;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
  }
  
  .links[aria-expanded="true"],
  .links.menu-open {
    right: 0;
  }
  
  .links a {
    width: 100%;
    padding: 12px 16px;
    margin: 0 !important;
    text-align: left;
    font-size: 16px;
    display: block;
    background: transparent;
    transition: none !important;
    transform: none !important;
  }

  .links a:hover,
  .links a:focus,
  .links a:focus-visible,
  .links a:active {
    margin: 0 !important;
    padding: 12px 16px !important;
    background: transparent !important;
    color: var(--text) !important;
    transition: none !important;
    transform: none !important;
  }
  
  /* Overlay when menu is open */
  .nav::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 98;
    pointer-events: none;
  }
  
  .nav.menu-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.problem{
  padding:120px 0 40px;
  background:#0b0b0c;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.problem-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:40px;
  align-items:center;
  width: 100%;
}
.problem-copy{
  text-align: center;
}
.problem-head{
  margin-bottom: 20px;
}
.problem-sub{
  margin-bottom: 40px;
  max-width: 72ch;
  padding: 0 clamp(24px, 6vw, 96px);
}

.problem-head,
.problem-sub,
.problem-stats {
  opacity: 0;
  transform: translateY(30px);
}

.problem-head.animate,
.problem-sub.animate,
.problem-stats.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.problem-stats{
  display:flex;
  gap:48px;
  flex-wrap:wrap;
  margin-top:0;
  justify-content: center;
}
.stat{
  text-align: center;
}
.stat .num{
  font-size: clamp(44px, 6vw, 56px);
  font-weight:900;
  color:var(--accent);
  display: block;
}
.stat .lbl{
  color:#fff;
  font-size: 14px;
  margin-top:4px;
  display: block;
  font-weight: 400;
}

.problem-visual{
  width:100%;
}
.problem-visual img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* Responsive */
@media (max-width: 1000px){
  .problem-grid{ grid-template-columns:1fr; gap:22px }
  .problem-visual{ order:-1 }
}

.indoor-farming {
  padding: 72px 0 120px;
  background: #0b0b0c;
  text-align: center;
  margin-bottom: 0;
}

.indoor-title {
  margin-bottom: 48px;
}

.indoor-circles {
  display: flex;
  gap: 100px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.indoor-circle {
  background: var(--accent);
  color: #1c1c1c;
  border-radius: 50%;
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.indoor-circle span {
  display: block;
}

.indoor-title,
.indoor-circle {
  opacity: 0;
  transform: translateY(30px);
}

.indoor-title.animate,
.indoor-circle.animate {
  animation: slideUp 0.6s ease-out forwards;
}

@media (max-width: 700px) {
  .indoor-circles {
    gap: 60px;
  }
  .indoor-circle {
    width: 100px;
    height: 100px;
    font-size: 9px;
    line-height: 1.1;
    padding: 6px;
  }
  .indoor-circle span {
    display: block;
    white-space: normal;
  }
  .indoor-circle br {
    display: block;
  }
  
  /* Problem stats responsive */
  .problem-stats {
    gap: 40px;
  }
  .stat .num {
    font-size: clamp(32px, 8vw, 44px);
  }
  .stat .lbl {
    font-size: 12px;
  }
}

.keyvisual {
  background: #0b0b0c;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  scroll-margin-top: 0;
  margin-top: 0;
}

.keyvisual-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.keyvisual-wrap img,
.keyvisual-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.keyvisual-video,
.keyvisual-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.keyvisual-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 700;
  text-align: center;
}

.autonomy {
  min-height: 100vh;
  background-color: #0b0b0c;
  background-image:
    linear-gradient(180deg, rgba(11, 11, 12, 0.65) 0%, rgba(11, 11, 12, 0.92) 100%),
    url("Assets/BG1.png");
  background-position: center top, center 0px; /* gradient , image */
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, screen;
  will-change: background-position;
  padding: clamp(110px, 18vh, 180px) 0 clamp(140px, 24vh, 220px);
  position: relative;
  overflow: hidden;
}

.autonomy::before {
  content: none;
}

.autonomy .wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.autonomy-title {
  margin-bottom: 16px;
}

.autonomy-sub {
  max-width: 70ch;
}

.autonomy-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.autonomy-left {
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  padding: 24px 0;
}

.autonomy-left .lime {
  color: var(--accent);
  font-weight: 700;
}

.autonomy-visual {
  width: 100%;
  padding: 24px 0;
  position: relative;
  z-index: 1;
}

.autonomy-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Neon callouts */
.autonomy-calls {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 46px;
  color: #d8d8d8;
  position: relative;
  z-index: 1;
}

.autonomy-calls li {
  position: relative;
  padding-left: 145px;
  line-height: 1.45;
  transform: translateY(-25.7px);
  color: var(--muted);
  font-weight: 400;
}

.autonomy-calls li strong {
  color: var(--muted);
  font-weight: 400;
}

/* angled neon connector lines */
.autonomy-calls li::before {
  content: "";
  position: absolute;
  left: -62px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(200, 255, 0, 0.7);
}

.autonomy-calls li::after {
  display: none;
}

/* glowing dot */
.autonomy-calls li .dot {
  position: absolute;
  left: 118px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 4px rgba(200, 255, 0, 0.6);
}

/* Responsive layout */
@media (max-width: 1100px) {
  .autonomy-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .autonomy-left {
    order: 3;
  }

  .autonomy-visual {
    order: 1;
  }

  .autonomy-calls {
    order: 2;
    padding-left: 0;
  }

  .autonomy-calls li {
    padding-left: 0;
  }

  .autonomy-calls li::before,
  .autonomy-calls li::after,
  .autonomy-calls li .dot {
    display: none;
  }
}
.edge{
  background:#0b0b0c;
}
.edge-sub{
  max-width: 90ch;
}
.edge-visual{
  max-width:1000px;
  margin:0;
  width:100%;
  padding: 12px 0;
}
.edge-visual img{
  width:100%;
  height:auto;
  display:block;
}

.edge-features{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  max-width:820px;
  color:#fff;
  font-weight:700;
  width: 100%;
}
.edge-features li{
  padding-top:6px;
}

/* Responsive */
@media (max-width: 820px){
  .edge{padding:68px 0}
  .edge .wrap{gap:24px}
  .edge-features{
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .edge-features li{
    font-size: 13px;
  }
}

.learn{
  background-color:#0b0b0c;
  background-image:
    linear-gradient(180deg, rgba(11, 11, 12, 0.4) 0%, rgba(11, 11, 12, 0.92) 100%),
    url("Assets/Bg 2.png");
  background-position: center, center 0px;     /* gradient , image */
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, screen;
  will-change: background-position;
}
.learn-sub{
  max-width: 54ch;
}

/* Phones row */
.learn-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap:14px;
  align-items:end;
  justify-items:center;
  max-width:880px;
  margin:0;
  padding: 8px 0 0;
  width: 100%;
}

/* Phone frames */
.phone{
  margin:0;
  width:min(100%, 320px);
  aspect-ratio: 9/19.5;
  border-radius:18px;
  padding:10px;
  background: var(--accent);                /* left neon card */
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  position: relative;
  --phone-scale: 1;
  --phone-translateX: 0px;
  --phone-translateY: 0px;
}
.phone:first-child{
  --phone-translateX: -16px;
  --phone-translateY: 20px;
  z-index: 1;
}
.phone:nth-child(2){
  --phone-translateY: -12px;
  z-index: 3;
}
.phone:nth-child(3){
  --phone-translateX: 16px;
  --phone-translateY: 20px;
  z-index: 2;
}
.phone.dark{
  background:#2a2b2d;                       /* dark UI cards for center/right */
}
.phone img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

/* Responsive */
@media (max-width: 980px){
  .learn-grid{ 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
  }
  .phone {
    width: 100%;
    max-width: 200px;
  }
}
@media (max-width: 600px){
  .learn-sub{
    max-width:100ch;
  }
  .learn-grid{
    max-width: 100%;
    padding: 0 12px;
  }
  .phone{
    max-width: 90px;
    padding: 3px;
    border-radius: 10px;
    aspect-ratio: 9/19.5;
  }
  .phone:first-child{
    --phone-translateX: -4px;
    --phone-translateY: 8px;
  }
  .phone:nth-child(2){
    --phone-translateY: -6px;
  }
  .phone:nth-child(3){
    --phone-translateX: 4px;
    --phone-translateY: 8px;
  }
  .phone img{
    border-radius: 6px;
  }
}
.impact{
  background:#0b0b0c;
  color:var(--text);
}
.impact-sub{
  max-width: 90ch;
}

.impact-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
  position:relative;
  width: 100%;
  padding: 24px 0;
}
.impact-card{
  text-align:center;
  padding:8px 18px 4px;
  position:relative;
}
.impact-card:not(:first-child){
  border-left:1px solid rgba(255,255,255,.08);   /* vertical dividers */
}
.kicker{
  color:#fff;
  font-size:13.5px;
  letter-spacing:.02em;
  margin-bottom:16px;
  font-weight:700;
}
.bigstat{
  color:var(--accent);
  font-weight:900;
  font-size:clamp(22px,3.2vw,34px);
  line-height:1.1;
  margin-bottom:10px;
}
.bigstat .unit{
  color:var(--accent);
  font-weight:800;
  font-size:.8em;
}
.minor{
  color:var(--muted);
  font-size:13.5px;
  margin:8px 0 16px;
}
.rw{
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  margin-bottom:8px;
}
.desc{
  color:var(--muted);
  margin:0;
  font-size:14px;
}

.impact-foot{
  text-align:center;
  color:#fff;
  margin:0;
}

/* Responsive */
@media (max-width: 768px){
  .impact{padding:72px 0}
  .impact .wrap{gap:32px}
  .impact-grid{grid-template-columns:1fr; gap:28px}
  .impact-card,
  .impact-card:not(:first-child){
    border-left:none !important;
  }
}
.city{
  background:#0b0b0c;
  padding:80px 0;
  color:var(--text);
}
.city-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:32px;
  align-items:center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.city-copy{
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.city-title{
  margin:0;
  font-size:clamp(26px,3.6vw,40px);
  letter-spacing:-.01em;
}
.city-sub{
  color:var(--muted);
  margin:0 auto 32px;
  max-width:52ch;
  line-height: 1.6;
  text-align: center;
}

/* Metric blocks */
.metric{ margin:0 }
.metric,
.metric *{
  text-align: center;
}
.metric-title{
  font-weight:700;
  margin-bottom:4px;
}
.metric-minor{
  color:var(--muted);
  font-size:14px;
  margin-bottom:10px;
}
.metric-value{
  color:var(--accent);
  font-weight:900;
  font-size:clamp(22px,3.2vw,34px);
  letter-spacing:.01em;
  margin-bottom:6px;
}
.metric-caption{
  color:var(--muted);
  font-size:14px;
}

/* Right photo panel */
.city-visual{
  width:100%;
  position: relative;
  display: grid;
}

.city-visual img {
  grid-area: 1 / 1;
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  opacity: 0;
  transition: transform 0.3s ease;
}

.city-visual .city-image {
  z-index: 1;
}

.city-visual .city-doodle {
  z-index: 2;
  pointer-events: none;
  transform: scale(0.98);
}

.city-visual.animate .city-image {
  animation: fadeIn 0.8s ease-out 0.2s both;
}

.city-visual.animate .city-doodle {
  animation: fadeIn 0.8s ease-out 0.8s both, doodlePop 0.8s ease-out 0.8s both;
}

.city-visual:hover .city-image {
  transform: scale(1.02);
}

/** city image/doodle base styles defined earlier */

/* Responsive */
@media (max-width:1000px){
  .city-grid{ grid-template-columns:1fr; gap:22px }
  .city-visual{ order:-1 }
}
.manifesto{
  background: var(--accent);
  color: #0a0a0a;
  padding: 96px 0;
}
.manifesto-wrap{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.manifesto-title{
  margin: 0 0 18px;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.01em;
}
.manifesto-copy{
  max-width: 980px;
  margin: 0 auto;
}
.manifesto-copy p{
  margin: 10px 0;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.6;
}
/* underline styling to match the mock */
.manifesto-copy .u{
  text-decoration: none;
}

/* Responsive */
@media (max-width: 800px){
  .manifesto{ padding: 72px 0 }
  .manifesto-wrap{
    padding: 0 32px;
  }
}
.team {
  background: #0b0b0c;
  padding: 96px 0 88px;
  color: var(--text);
  text-align: center;
  position: relative;
}
.team::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("Assets/Grid 01.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  filter: brightness(0) invert(1);
  z-index: 0;
  pointer-events: none;
}

.team .wrap {
  position: relative;
  z-index: 1;
}
.team-title {
  margin: 0 0 64px;
  font-size: clamp(26px, 3.6vw, 40px);
  color: #fff;
  letter-spacing: -0.01em;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  perspective: 1000px;
}

.member img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 18px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.15), 0 12px 36px rgba(0,0,0,0.55);
  transition: transform 320ms cubic-bezier(0.21, 0.61, 0.35, 1), box-shadow 320ms ease;
}

.member h3 {
  margin: 0 0 6px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.member .role {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 6px;
  text-align: center;
}

.member .skills {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
  text-align: center;
}


/* Responsive */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.story {
  background: #0b0b0c;
  color: var(--text);
  padding: 120px 0;
  position: relative;
  overflow: visible;
}
.story::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("Assets/Grid 01.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.03;
  filter: brightness(0) invert(1);
  z-index: 0;
  pointer-events: none;
}
.story .wrap {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
}

.story-title {
  text-align: center;
  margin: 0;
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.1;
}

.story-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.story-quote {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 75ch;
}

.story-quote .author {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #b3b3b3;
}

.story-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.story-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0;
  width: 100%;
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 24px 0;
}

.story-img {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: stretch;
  justify-content: stretch;
}

.story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  flex: 1;
  min-height: 0;
  border-radius: 28px;
}

.story-caption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
  line-height: 1.4;
}

.story-kicker {
  color: #fff;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding: 0;
  font-weight: 700;
}

.story-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.story-text p {
  color: var(--muted);
  line-height: 1.9;
  margin: 0 0 22px;
  font-size: 15.5px;
  max-width: 68ch;
}

.story-text p strong {
  color: var(--text);
  font-weight: 600;
}


/* Responsive */
@media (max-width: 960px) {
  .story-body {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .story-text p {
    max-width: 100%;
  }

  .story-img {
    order: -1;
  }
}

.invest{
  position: relative;
  height: 100vh;
  padding: 120px 0;
  background:#0b0b0c;
  overflow:hidden;
  display: flex;
  align-items: center;
}

/* subtle world map / network glow */
.invest-bg{
  position:absolute; inset:0;
  background-color: #0b0b0c;
  background-image: url("Assets/Map for Investor background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100vh;
  opacity: 0.7;
  filter: saturate(1) blur(0.2px);
  pointer-events:none;
  will-change: transform;
}

/* glass card */
.cta-card{
  margin:0 auto;
  max-width: 1000px;
  width: calc(100% - 48px);
  text-align:center;
  padding: 42px 40px 30px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,20,22,.32);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-title{
  margin:0 0 12px;
  color:#fff;
  font-size: clamp(26px, 3.8vw, 42px);
  letter-spacing:-.01em;
  text-align: center;
  width: 100%;
}

.cta-card .cta-sub{
  margin:0 auto 26px;
  color:var(--muted);
  max-width: 100%;
  line-height:1.6;
  font-size: 15.5px;
  text-align: center;
  padding: 0;
  width: 100%;
}
.cta-sub-line2{
  white-space: normal;
}

/* buttons */
.cta-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:nowrap;
}
.pill-outline{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  color:#eaeaea;
  font-weight:700;
  font-size: 13px;
  border:2px solid var(--accent);
  background: transparent;
  transition: transform .15s ease, background .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.pill-outline:hover{
  transform: translateY(-1px);
  background: rgba(200,255,0,.08);
}

.cta-buttons .pill-bright{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: clamp(12px, 2.4vw, 20px) clamp(20px, 4vw, 30px);
  border-radius:999px;
  background: var(--accent);
  color:#0a0a0a;
  font-weight:700;
  font-size: clamp(14px, 2.7vw, 16px);
  border:none;
  transition: transform 0.3s ease, padding 0.3s ease;
  cursor:pointer;
}
.cta-buttons .pill-bright:hover{
  transform: scaleX(1.08);
  padding-left: 32px;
  padding-right: 32px;
}

/* responsive */
@media (max-width: 700px){
  .invest{
    height: 100vh;
    padding: 60px 0;
  }
  .cta-card{
    padding:28px 20px;
    width: calc(100% - 32px);
    max-width: 100%;
  }
  .cta-actions{
    gap: 8px;
    flex-wrap: nowrap;
  }
  .pill-outline{
    padding: 6px 10px;
    font-size: 11px;
  }
}

.final-cta {
  color: #fff;
  padding: 180px 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.final-cta-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.final-cta .wrap {
  position: relative;
  z-index: 2;
}
.final-cta::before {
  display: none;
}

.final-grid {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 80vh;
}

.cta-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-heading {
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  text-align: left;
}

.cta-sub {
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 28px;
  text-align: left;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.invest .cta-actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  align-items: stretch;
}

.invest .cta-actions .pill-outline{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(12px, 2.4vw, 18px) clamp(12px, 3vw, 18px);
  font-size: clamp(12px, 2.6vw, 15px);
  white-space: normal;
  min-height: clamp(42px, 6vw, 56px);
  transform:none;
}

.invest .cta-actions .pill-outline:hover{
  transform:none;
  padding: clamp(12px, 2.4vw, 18px) clamp(12px, 3vw, 18px);
}

/* Buttons */
.pill-outline {
  border: 2px solid var(--accent);
  color: #eaeaea;
  font-weight: 600;
  border-radius: 999px;
  padding: clamp(12px, 2.4vw, 20px) clamp(20px, 4vw, 30px);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 2.7vw, 16px);
  line-height: 1;
  transition: background 0.3s ease, transform 0.3s ease, padding 0.3s ease;
  white-space: nowrap;
}

.pill-outline:hover {
  background: rgba(200,255,0,0.08);
  transform: none;
  padding: clamp(12px, 2.4vw, 20px) clamp(20px, 4vw, 30px);
}

.cta-right {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cta-right img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 1000px) {
  .final-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cta-left {
    align-items: center;
  }
  .cta-right {
    margin-top: 36px;
  }
}

@media (max-width: 900px) {
  .final-cta {
    padding: 100px 0 0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    background-image: url("Assets/Front CTA mobile.png");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .final-cta-bg{
    display:none;
  }
  .final-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(11, 11, 12, 1) 0%, rgba(11, 11, 12, 0) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .final-cta .wrap {
    padding-top: 0;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
  }
  .final-grid {
    min-height: auto;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
    width: 100%;
  }
  .cta-left {
    justify-content: flex-start;
    text-align: center;
    width: 100%;
  }
  .cta-heading {
    text-align: center;
  }
  .cta-sub {
    text-align: center;
  }
  .cta-buttons {
    justify-content: center;
  }
}

.footer {
  background-color: #0b0b0c;
  color: #fff;
  padding: 60px 5%;
   font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  border-top: 1px solid #1a1a1a;
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: flex;
  gap: 60px;
  align-items: center;
}

.footer-logo {
  text-align: left;
  flex-shrink: 0;
  padding: 0 100px;
}

.footer-logo a {
  display: inline-block;
  text-decoration: none;
}

.footer-logo img {
  width: 104px;
  filter: brightness(0) invert(1);
}

.footer-copyright {
  text-align: center;
  padding-top: 40px;
  margin-top: 40px;
}

.footer-copyright p {
  font-size: 13px;
  color: #999;
  margin: 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 60px;
  flex: 1;
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

.footer-col h4:not(:first-child) {
  margin-top: 24px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: #bbb;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-col ul li a:hover {
  color: #c8ff00;
}

.footer-col address {
  color: #bbb;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.footer-col address a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col address a:hover {
  color: #c8ff00;
}

.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-links a {
  color: #fff;
  font-size: 18px;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-links a:hover {
  color: #c8ff00;
}

/* Responsive */
@media (max-width: 768px) {
  .footer {
    padding: 40px 20px;
  }

  .footer-top {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .footer-logo {
    text-align: center;
    padding: 0;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .footer-col {
    text-align: center;
  }

  .footer-col h4 {
    text-align: center;
  }

  .footer-col ul {
    text-align: center;
  }

  .footer-col address {
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes edgeVisualReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



/* Autonomy section */
.autonomy-title {
  opacity: 0;
  transform: translateY(30px);
}

.autonomy-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.autonomy-sub {
  opacity: 0;
  transform: translateY(30px);
}

.autonomy-sub.animate {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.autonomy-visual img {
  opacity: 0;
  transition: transform 0.3s ease;
}

.autonomy-visual.animate img {
  animation: fadeIn 0.8s ease-out 0.4s both;
}

.autonomy-visual:hover img {
  transform: scale(1.02);
}

.autonomy-calls li {
  opacity: 0;
  transform: translateX(-20px);
}

.autonomy-calls.animate li {
  animation: slideIn 0.6s ease-out both;
}

.autonomy-calls.animate li:nth-child(1) { animation-delay: 0.1s; }
.autonomy-calls.animate li:nth-child(2) { animation-delay: 0.2s; }
.autonomy-calls.animate li:nth-child(3) { animation-delay: 0.3s; }
.autonomy-calls.animate li:nth-child(4) { animation-delay: 0.4s; }
.autonomy-calls.animate li:nth-child(5) { animation-delay: 0.5s; }

/* Edge section */
.edge-title {
  opacity: 0;
  transform: translateY(30px);
}

.edge-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.edge-sub {
  opacity: 0;
  transform: translateY(30px);
}

.edge-sub.animate {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.edge-visual {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

.edge-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.edge-visual.animate {
  animation: edgeVisualReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.edge-visual:hover img {
  transform: translateY(-2px) scale(1.02);
  transition: transform 0.3s ease;
}

.edge-features li {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease;
}

.edge-features.animate li {
  animation: slideUp 0.6s ease-out both;
}

.edge-features li:hover {
  transform: translateY(-3px);
}

.edge-features.animate li:nth-child(1) { animation-delay: 0.1s; }
.edge-features.animate li:nth-child(2) { animation-delay: 0.2s; }
.edge-features.animate li:nth-child(3) { animation-delay: 0.3s; }

/* Learn section */
.learn-title {
  opacity: 0;
  transform: translateY(30px);
}

.learn-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.learn-sub {
  opacity: 0;
  transform: translateY(30px);
}

.learn-sub.animate {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.phone {
  opacity: 0;
  transform: translateX(var(--phone-translateX)) translateY(calc(var(--phone-translateY) + 30px)) scale(var(--phone-scale));
  transition:
    transform 0.42s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.5s ease;
  transform-origin: center bottom;
  will-change: transform;
}

.phone.animate {
  opacity: 1;
  transform: translateX(var(--phone-translateX)) translateY(var(--phone-translateY)) scale(var(--phone-scale));
}

/* Impact section */
.impact-title {
  opacity: 0;
  transform: translateY(30px);
}

.impact-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.impact-sub {
  opacity: 0;
  transform: translateY(30px);
}

.impact-sub.animate {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.impact-card {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.impact-card.animate {
  animation: slideUp 0.6s ease-out both;
}

.impact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.impact-card.animate:nth-child(1) { animation-delay: 0.1s; }
.impact-card.animate:nth-child(2) { animation-delay: 0.2s; }
.impact-card.animate:nth-child(3) { animation-delay: 0.3s; }

/* City section */
.city-title {
  opacity: 0;
  transform: translateY(30px);
}

.city-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.city-sub {
  opacity: 0;
  transform: translateY(30px);
}

.city-sub.animate {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.metric {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease;
}

.metric.animate {
  animation: slideUp 0.6s ease-out both;
}

.metric:hover {
  transform: translateX(5px);
}

.metric.animate:nth-child(1) { animation-delay: 0.1s; }
.metric.animate:nth-child(2) { animation-delay: 0.2s; }

.city-visual img {
  opacity: 0;
  transition: transform 0.3s ease;
}

.city-visual.animate img {
  animation: fadeIn 0.8s ease-out 0.4s both;
}

.city-visual:hover img {
  transform: scale(1.02);
}

/* Manifesto section */
.manifesto-title {
  opacity: 0;
  transform: translateY(30px);
}

.manifesto-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.manifesto-copy p {
  opacity: 0;
  transform: translateY(30px);
}

.manifesto-copy.animate p {
  animation: slideUp 0.6s ease-out both;
}

.manifesto-copy.animate p:nth-child(1) { animation-delay: 0.1s; }
.manifesto-copy.animate p:nth-child(2) { animation-delay: 0.2s; }
.manifesto-copy.animate p:nth-child(3) { animation-delay: 0.3s; }
.manifesto-copy.animate p:nth-child(4) { animation-delay: 0.4s; }
.manifesto-copy.animate p:nth-child(5) { animation-delay: 0.5s; }
.manifesto-copy.animate p:nth-child(6) { animation-delay: 0.6s; }

/* Team section */
.team-title {
  opacity: 0;
  transform: translateY(30px);
}

.team-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.member {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.35s ease;
}

.member.animate {
  animation: slideUp 0.6s ease-out both;
}

.member:hover {
  transform: translateY(-8px);
}

.member.animate:nth-child(1) { animation-delay: 0.1s; }
.member.animate:nth-child(2) { animation-delay: 0.2s; }
.member.animate:nth-child(3) { animation-delay: 0.3s; }

.member img {
  transition: transform 0.35s cubic-bezier(0.21, 0.61, 0.35, 1), box-shadow 0.35s ease;
}

.member:hover img {
  transform: translateY(-6px);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.18), 0 24px 46px rgba(0,0,0,0.65);
}

/* Story section */
.story-title {
  opacity: 0;
  transform: translateY(30px);
}

.story-title.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.story-quote {
  opacity: 0;
  transform: translateY(30px);
}

.story-quote.animate {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.story-img img {
  opacity: 0;
  transition: transform 0.3s ease;
}

.story-img.animate img {
  animation: fadeIn 0.8s ease-out 0.4s both;
}

.story-img:hover img {
  transform: scale(1.02);
}

.story-text p {
  opacity: 0;
  transform: translateY(30px);
}

.story-text.animate p {
  animation: slideUp 0.6s ease-out both;
}

.story-text.animate p:nth-child(1) { animation-delay: 0.1s; }
.story-text.animate p:nth-child(2) { animation-delay: 0.2s; }
.story-text.animate p:nth-child(3) { animation-delay: 0.3s; }

/* Invest section */
.cta-card {
  opacity: 0;
  transform: translateY(30px);
}

.cta-card.animate {
  animation: slideUp 0.8s ease-out forwards;
}

.cta-title {
  opacity: 0;
  transform: translateY(30px);
}

.cta-card.animate .cta-title {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.cta-sub {
  opacity: 0;
  transform: translateY(30px);
}

.cta-card.animate .cta-sub {
  animation: slideUp 0.6s ease-out 0.4s both;
}

.cta-actions {
  opacity: 0;
  transform: translateY(30px);
}

.cta-card.animate .cta-actions {
  animation: slideUp 0.6s ease-out 0.6s both;
}

/* Final CTA */
.cta-heading {
  opacity: 0;
  transform: translateY(30px);
}

.cta-heading.animate {
  animation: slideUp 0.6s ease-out forwards;
}

.final-cta .cta-sub {
  opacity: 0;
  transform: translateY(30px);
}

.final-cta .cta-sub.animate {
  animation: slideUp 0.6s ease-out 0.2s both;
}

.cta-buttons {
  opacity: 0;
  transform: translateY(30px);
}

.cta-buttons.animate {
  animation: slideUp 0.6s ease-out 0.4s both;
}

/* Buttons - enhanced transitions */
.pill {
  transition: transform 0.3s ease;
}

.pill:hover {
  transform: scaleX(1.08);
}


.pill-outline {
  transition: transform 0.3s ease, background 0.3s ease, padding 0.3s ease;
}

.pill-outline:hover {
  transform: scaleX(1.08);
  padding-left: 32px;
  padding-right: 32px;
}

.pill-bright {
  transition: transform 0.3s ease, padding 0.3s ease;
}

.pill-bright:hover {
  transform: scaleX(1.08);
  padding-left: 32px;
  padding-right: 32px;
}


/* Logo animation - merged with logo base styles */
.brand:hover .logo {
  transform: rotate(180deg);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.3));
}

/* Images - general hover effect */
img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Footer links */
.footer-col ul li a {
  transition: transform 0.2s ease;
}

.footer-col ul li a:hover {
  transform: translateX(5px);
}

.social-links a {
  transition: transform 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-3px) scale(1.1);
}

/* Waitlist Modal */
dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

dialog:not([open]) {
  display: none;
}

dialog[open] {
  display: flex;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.9);
}

dialog.is-visible {
  display: flex;
  opacity: 1;
  transform: scale(1);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1095;
}

dialog[data-no-dialog] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 9999;
  display: flex;
}

dialog[data-no-dialog].is-open {
  display: flex;
  z-index: 9999;
  pointer-events: auto;
}

.dialog-fallback-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9998;
}

.dialog-fallback-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-open {
  overflow: hidden;
}

#waitlistModal,
#contactModal {
  position: fixed;
  inset: 0;
  margin: 0;
}

#waitlistForm,
#contactForm {
  border: none;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#waitlistModal,
#contactModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#waitlistForm,
#contactForm {
  border: none;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The visual container/shape layer */
.form-container-shape {
  min-width: min(520px, 92vw);
  background: #121214;
  color: #eaeaea;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 22px 20px 16px;
  opacity: 1;
  transform: none;
}

/* Form content - no animation, just layout */
.form-content {
  /* No animations or transforms on content */
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.form-header h3 {
  margin: 0;
  font-size: 20px;
}

.form-header button,
#closeContactModal {
  background: transparent;
  color: #cfcfcf;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 24px;
  font-family: inherit;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  box-shadow: none;
}

.form-header button:focus,
.form-header button:active,
#closeContactModal:focus,
#closeContactModal:active {
  outline: none;
  box-shadow: none;
  border: none;
}

.form-fields {
  display: grid;
  gap: 10px;
}

.form-fields input {
  background: #0f0f12;
  color: #eaeaea;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: inherit;
  font-family: inherit;
  outline: none;
  box-shadow: none;
}

.form-fields input:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.form-fields input::placeholder {
  color: #a3a3a3;
}

.form-fields textarea {
  background: #0f0f12;
  color: #eaeaea;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
}

.form-fields textarea::placeholder {
  color: #a3a3a3;
}

.form-fields textarea:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

#submitBtn {
  background: #C8FF00;
  color: #0A0A0A;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  transition: background 0.3s ease;
  display: inline-block;
}

#submitBtn:hover {
  background: #b8ef00;
}

#status,
#contactStatus {
  margin: 8px 2px 0;
  color: #a3a3a3;
  font-size: 14px;
}

/* ==== Vertical Scroll Navigation Rail ==== */
.rail {
  position: fixed;
  inset: 0 124px 0 auto;
  width: 28px;
  display: block;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  mix-blend-mode: difference;
  transition: opacity 0.4s ease, visibility 0.4s ease, filter 0.3s ease;
}

.rail__wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 64vh;
  left: 0;
  right: 0;
}

.rail__track {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 2px;
}

.rail__progress {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 2px;
  height: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: height 0.1s ease;
}

.rail__list {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail__list li:first-child {
  margin-top: -8px;
}

.rail__list li:last-child {
  margin-bottom: -8px;
}

.rail--compact .rail__list {
  gap: 34px;
  justify-content: flex-start;
}

.rail__dot {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d9d9d9;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s ease, background 0s ease, width 0s ease, height 0s ease, box-shadow 0s ease;
  border: none;
  padding: 0;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

.rail__dot:hover {
  transform: translateX(-50%) scale(1.3);
}

.rail__dot.is-active {
  background: var(--accent) !important;
  box-shadow: 0 0 14px rgba(200, 255, 0, 0.7) !important;
  width: 20px !important;
  height: 20px !important;
  transform: translateX(-50%) !important;
  transition: transform 0.15s ease, background 0s ease, width 0s ease, height 0s ease, box-shadow 0s ease !important;
}

.rail__dot.is-active:hover {
  transform: translateX(-50%) scale(1.15);
}

.rail__dot.is-visited {
  background: var(--accent);
  box-shadow: none;
}

.rail__label {
  position: absolute;
  left: 45px;
  transform: translateY(-50%);
  top: 50%;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  background: transparent;
  border: none;
  padding: 0;
}

.rail__dot:hover .rail__label {
  opacity: 1;
}

.rail__dot.is-active .rail__label {
  opacity: 1;
  transition: opacity 0s ease;
}

.rail.is-visible {
  opacity: 1;
  visibility: visible;
}

.rail.invert {
  filter: invert(1);
}

@media (max-width: 900px) {
  .rail {
    display: none !important;
  }
}

/* Allow hover/focus transitions on inputs and buttons */
#waitlistModal input,
#waitlistModal button {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

#waitlistModal input:focus,
#waitlistModal button:focus:not(.form-header button):not(#closeModal),
#contactModal input:focus,
#contactModal textarea:focus,
#contactModal button:focus:not(.form-header button):not(#closeContactModal) {
  outline: none;
  box-shadow: none;
}

#closeModal:hover,
#closeContactModal:hover {
  background: #222225 !important;
}

#submitBtn {
  transition: background 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
  display: inline-block;
}

#submitBtn:hover {
  background: #b8ef00;
}

#submitBtn:active {
  background: #a8df00;
}

#submitBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

#submitContactBtn {
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 500;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  transition: background 0.3s ease;
  display: inline-block;
  width: 100%;
  pointer-events: auto;
}

#submitContactBtn:hover {
  background: #b8ef00;
}

#submitContactBtn:active {
  background: #a8df00;
}

#submitContactBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Disable all hover animations on mobile and tablet - but keep scroll animations */
@media (max-width: 1024px) {
  /* Only disable hover-specific transitions, not all transitions */
  .links a:hover,
  .links a:active,
  .pill:hover,
  .pill:active,
  .pill-bright:hover,
  .pill-bright:active,
  .pill-outline:hover,
  .pill-outline:active,
  .member:hover img,
  .member:active img,
  .impact-card:hover,
  .impact-card:active,
  .phone:hover img,
  .phone:active img,
  .brand:hover .logo,
  .brand:active .logo,
  .rail__dot:hover,
  .rail__dot:active,
  .indoor-circle:hover,
  .indoor-circle:active,
  .autonomy-visual:hover img,
  .autonomy-visual:active img {
    transition: none !important;
  }
  
  /* Disable nav link hover and active states */
  .links a:hover,
  .links a:active,
  .links a:focus {
    color: var(--text) !important;
    background: transparent !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
  }
  
  /* Disable button/pill hover and active states - prevent ALL expansion */
  .pill:hover,
  .pill:active,
  .pill:focus,
  .pill-bright:hover,
  .pill-bright:active,
  .pill-bright:focus,
  .pill-outline:hover,
  .pill-outline:active,
  .pill-outline:focus {
    transform: scaleX(1) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .pill:hover,
  .pill:active,
  .pill:focus {
    padding: 10px 16px !important;
    transition: none !important;
  }
  
  .pill-bright:hover,
  .pill-bright:active,
  .pill-bright:focus {
    padding: clamp(12px, 2.4vw, 20px) clamp(20px, 4vw, 30px) !important;
    transition: none !important;
  }
  
  .pill-outline:hover,
  .pill-outline:active,
  .pill-outline:focus {
    padding: clamp(12px, 2.4vw, 20px) clamp(20px, 4vw, 30px) !important;
    transition: none !important;
  }
  
  .pill-bright:hover,
  .pill-bright:active,
  .pill-bright:focus {
    background: var(--accent) !important;
  }
  
  .pill-outline:hover,
  .pill-outline:active,
  .pill-outline:focus {
    background: transparent !important;
    border: 2px solid var(--accent) !important;
  }
  
  /* Disable footer hover */
  .footer-col ul li a:hover,
  .footer-col ul li a:active,
  .footer-col address a:hover,
  .footer-col address a:active,
  .social-links a:hover,
  .social-links a:active {
    color: inherit !important;
  }
  
  /* Disable member card hover */
  .member:hover img,
  .member:active img {
    transform: none !important;
    box-shadow: 0 0 0 6px rgba(255,255,255,0.05), 0 6px 22px rgba(0,0,0,0.45) !important;
  }
  
  /* Disable impact card hover */
  .impact-card:hover,
  .impact-card:active {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Disable phone hover */
  .phone:hover img,
  .phone:active img {
    transform: none !important;
  }
  
  .phone:hover,
  .phone:active {
    box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  
  /* Disable logo hover and glow */
  .brand:hover .logo,
  .brand:active .logo {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
  
  /* Disable rail dot glow on hover */
  .rail__dot:hover,
  .rail__dot.is-active:hover {
    box-shadow: none !important;
    filter: none !important;
  }
  
  /* Disable indoor circle hover */
  .indoor-circle:hover,
  .indoor-circle:active {
    transform: scale(1) !important;
    box-shadow: none !important;
  }
  
  /* Disable autonomy visual hover */
  .autonomy-visual:hover img,
  .autonomy-visual:active img {
    transform: scale(1) !important;
  }
}

@keyframes doodlePop {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}