/* =========================================================
   VAYUPORT — Design tokens
   ========================================================= */
:root{
  /* charcoal scale */
  --c-950:#171719;
  --c-900:#1d1d1f;
  --c-800:#242426;
  --c-700:#2b2b2e;
  --c-600:#3a3a3d;
  --c-line: rgba(245,243,239,0.10);
  --c-line-strong: rgba(245,243,239,0.18);

  /* metallic gold scale */
  --g-700:#9b7044;
  --g-500:#b58552;
  --g-300:#c49a6c;
  --g-glow: rgba(181,133,82,0.35);

  /* neutrals */
  --off-white:#F5F3EF;
  --grey-300:#D8D4CD;
  --white:#FFFFFF;

  /* type */
  --font-display:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 6px;
}

/* =========================================================
   Reset
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul[class],ol[class]{ list-style:none; margin:0; padding:0; }
img,picture,video{ max-width:100%; display:block; }
button,input,textarea,select{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

body{
  background:var(--c-900);
  color:var(--off-white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

::selection{ background:var(--g-500); color:var(--c-950); }

:focus-visible{
  outline:2px solid var(--g-300);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.skip-link{
  position:absolute;
  left:1rem; top:-60px;
  background:var(--g-500);
  color:var(--c-950);
  padding:.7rem 1.2rem;
  border-radius:4px;
  font-family:var(--font-mono);
  font-size:.8rem;
  z-index:1000;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:1rem; }

/* =========================================================
   Typography
   ========================================================= */
.eyebrow {
  font-family: "Orbitron", var(--font-mono), monospace;
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--g-300);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  text-shadow: 0 0 12px rgba(180,220,255,.25);
  white-space: nowrap;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--g-500);
  display: inline-block;
  box-shadow: 0 0 8px var(--g-500);
}

.cursor {
  color: var(--g-300);
  animation: blink .8s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.05;
  color:var(--off-white);
}

.accent{ color:var(--g-500); }

.h-display{
  font-size:clamp(2.6rem, 6.2vw, 5.2rem);
  font-weight:600;
}
.h-section{
  font-size:clamp(2rem, 4.2vw, 3.2rem);
  font-weight:600;
}
.h-sub{
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight:500;
}

.lede{
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  color:var(--grey-300);
  max-width:38ch;
  font-weight:400;
}

.mono-detail{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-300);
  opacity:.8;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:.95rem 1.7rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn-arrow{ transition:transform var(--dur-fast) var(--ease); display:inline-block; }
.btn:hover .btn-arrow{ transform:translateX(4px); }

.btn-primary{
  background:linear-gradient(135deg, var(--g-300), var(--g-500) 55%, var(--g-700));
  color:var(--c-950);
  box-shadow:0 0 0 0 var(--g-glow);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 30px -6px var(--g-glow);
}
.btn-primary:active{ transform:translateY(0); }

.btn-ghost{
  background:transparent;
  color:var(--off-white);
  border-color:var(--c-line-strong);
}
.btn-ghost:hover{
  border-color:var(--g-500);
  color:var(--g-300);
}

.btn-text{
  background:none;
  border:none;
  padding:0;
  color:var(--g-300);
  font-weight:600;
  border-radius:0;
}
.btn-text:hover{ color:var(--g-500); }

/* =========================================================
   Navigation
   ========================================================= */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:1.4rem 0;
  transition:background var(--dur-med) var(--ease), padding var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
  border-bottom:1px solid transparent;
}
.site-nav.is-scrolled{
  background:rgba(23,23,25,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:1rem 0;
  border-bottom-color:var(--c-line);
}
.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: .10em;
}

.nav-brand img {
  height: 68px;
  width: auto;
  margin-block: -9px;
  position: relative;
  overflow: hidden;
  animation: metalSurfaceShine 10.5s ease-in-out infinite;
}

@keyframes metalSurfaceShine {
  0%, 65% {
    filter: brightness(1.35);
  }

  75% {
    filter: brightness(1.55);
  }

  85% {
    filter: brightness(1.35);
  }

  100% {
    filter: brightness(1.35);
  }
}

.nav-links{
  display:flex;
  align-items:center;
  gap:2.2rem;
}
.nav-links a:not(.btn){
  font-size:.9rem;
  color:var(--grey-300);
  transition:color var(--dur-fast) var(--ease);
  position:relative;
}
.nav-links a:not(.btn):hover{ color:var(--off-white); }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:.4rem;
  color:var(--off-white);
}
.nav-toggle svg{ display:none; }

@media (max-width: 780px){
  .nav-links{
    position:fixed;
    inset:0;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:2rem;
    padding:2rem var(--gutter);
    background:var(--c-950);
    transform:translateX(100%);
    transition:transform var(--dur-med) var(--ease);
    z-index:99;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a:not(.btn){ font-size:1.4rem; }
  .nav-toggle{ display:block; z-index:101; }
  .nav-toggle .icon-close{ display:none; }
  .nav-links.is-open ~ .nav-toggle .icon-open,
  body.nav-open .icon-open{ display:none; }
  body.nav-open .icon-close{ display:block; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--c-950);
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:70% 50%;
  animation:hero-drift 30s  linear infinite;
}
@media (max-width: 780px){
  .hero-media img{
    object-fit:cover;
    animation:hero-drift-mobile 30s linear infinite;
  }
  @keyframes hero-drift-mobile{
    from{ object-position:0% 50%; }
    to{ object-position:100% 50%; }
  }
}
@keyframes hero-drift{
  from{ transform:scale(1.04) translate(0,0); }
  to{ transform:scale(1.1) translate(-1.2%,-0.6%); }
  from{ object-position:0% 50%; }
    to{ object-position:100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; }
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,23,25,0.55) 0%, rgba(23,23,25,0.35) 38%, rgba(23,23,25,0.82) 100%),
    linear-gradient(90deg, rgba(23,23,25,0.86) 0%, rgba(23,23,25,0.55) 42%, rgba(23,23,25,0.22) 75%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding-block: 8.5rem 4.5rem;
}
.hero-eyebrow{ margin-bottom:1.6rem; opacity:0; animation:rise var(--dur-slow) var(--ease) .15s forwards; }
.hero h1{ max-width:14ch; opacity:0; animation:rise var(--dur-slow) var(--ease) .32s forwards; }
.hero .lede{ margin-top:1.4rem; opacity:0; animation:rise var(--dur-slow) var(--ease) .5s forwards; }
.hero-cta{ margin-top:2.4rem; opacity:0; animation:rise var(--dur-slow) var(--ease) .68s forwards; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-eyebrow,.hero h1,.hero .lede,.hero-cta{ opacity:1; animation:none; transform:none; }
}

.hero-readout{
  position:absolute;
  right:var(--gutter);
  bottom:2.2rem;
  z-index:2;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.hero-readout .dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--g-500);
  margin-right:.5em;
  box-shadow:0 0 8px 1px var(--g-glow);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; } 50%{ opacity:.35; }
}
@media (max-width: 900px){
  .hero-readout{ display:none; }
}

.scroll-cue{
  position:absolute;
  left:var(--gutter);
  bottom:2.2rem;
  z-index:2;
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--grey-300);
}
.scroll-cue .line{
  width:1px; height:34px;
  background:linear-gradient(var(--g-500), transparent);
  animation:scroll-line 2.2s ease-in-out infinite;
}
@keyframes scroll-line{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@media (max-width:600px){ .scroll-cue{ display:none; } }

/* =========================================================
   Section scaffolding
   ========================================================= */
section{ position:relative; }
.section-pad{ padding-block: clamp(4rem, 9vw, 7.5rem); }

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   Video section
   ========================================================= */
.video-section{
  position:relative;
  background:var(--c-950);
}
.video-fade-top{
  height:8rem;
  background:linear-gradient(180deg, var(--c-900), var(--c-950));
}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  overflow:hidden;
  background:var(--c-950);
}

.video-media{
  position:absolute; inset:0;
}
.video-media video,
.video-media .poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.video-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(23,23,25,0.85) 0%, rgba(23,23,25,0.05) 42%, rgba(23,23,25,0.35) 100%);
}
@media (max-width: 780px){
  .video-frame{
    position:relative;
    aspect-ratio:auto;
    overflow:visible;
  }
  .video-media{
    position:relative;
    inset:auto;
    aspect-ratio:16/9;
  }
  .video-copy{
    position:static;
    max-width:32rem;
    padding:1rem 0;
    margin:0 auto;
  }
  .video-copy p{ max-width:none; }
}
.video-copy{
  position:absolute;
  left:var(--gutter);
  bottom:2.6rem;
  z-index:2;
  max-width:34rem;
}
.video-copy h2{ font-size:clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom:.7rem; }
.video-copy p{ color:var(--grey-300); font-size:.98rem; max-width:34ch; }

@media (max-width: 780px){
  .video-frame{
    overflow:visible;
  }
  .video-copy{
    position:static;
    max-width:100%;
    padding:2rem 2rem ;
    margin:0;
  }
}
/* =========================================================
   Intro / statement section
   ========================================================= */
.statement{
  padding-block: clamp(5rem, 11vw, 9rem);
  border-bottom:1px solid var(--c-line);
}
.statement-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items:start;
}
.statement h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); max-width:16ch; }
.statement-side{ padding-top:.6rem; }
.statement-side p{ color:var(--grey-300); font-size:1.02rem; max-width:36ch; }
.statement-side .mono-detail{ margin-bottom:1.1rem; }
@media (max-width:820px){
  .statement-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   Reinforcement CTA
   ========================================================= */
.cta-band{
  position:relative;
  padding-block: clamp(5rem, 10vw, 8rem);
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 90% at 85% 20%, rgba(181,133,82,0.16), transparent 60%),
    var(--c-800);
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}
.cta-band-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:2.5rem;
}
.cta-band h2{ max-width:14ch; font-size:clamp(2rem, 4.6vw, 3.4rem); }
.cta-band .lede{ margin-top:1rem; }
.cta-band-action{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--c-950);
  padding-block: 3.4rem 2.2rem;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:2rem;
  padding-bottom:2.4rem;
  border-bottom:1px solid var(--c-line);
}
.footer-brand{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.footer-tagline{ color:var(--grey-300); font-size:.9rem; margin-top:.5rem; max-width:30ch; }
.footer-social{ display:flex; gap:1.1rem; }
.footer-social a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-line-strong);
  border-radius:50%;
  color:var(--grey-300);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-social a:hover{ color:var(--g-500); border-color:var(--g-500); transform:translateY(-2px); }
.footer-bottom{
  padding-top:1.6rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.82rem;
  color:var(--grey-300);
}
.footer-bottom a{ color:var(--grey-300); transition:color var(--dur-fast) var(--ease); }
.footer-bottom a:hover{ color:var(--g-300); }

/* =========================================================
   Early access page
   ========================================================= */
.ea-page{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block: 8rem 4rem;
  position:relative;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(181,133,82,0.10), transparent 60%),
    var(--c-900);
}
.ea-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items:start;
}
.ea-intro .eyebrow{ margin-bottom:1.4rem; }
.ea-intro h1{ font-size:clamp(2.2rem, 4.6vw, 3.4rem); max-width:12ch; }
.ea-intro p{ color:var(--grey-300); margin-top:1.2rem; max-width:32ch; }
.ea-back{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:2.4rem;
  font-size:.86rem;
  color:var(--grey-300);
  font-family:var(--font-mono);
  letter-spacing:.04em;
}
.ea-back:hover{ color:var(--g-300); }

@media (max-width:900px){
  .ea-grid{ grid-template-columns:1fr; }
}

/* form */
.form-panel{
  background:var(--c-800);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.field{ margin-bottom:1.5rem; }
.field label{
  display:block;
  font-size:.82rem;
  font-family:var(--font-mono);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--grey-300);
  margin-bottom:.55rem;
}
.field input,
.field textarea{
  width:100%;
  background:var(--c-900);
  border:1px solid var(--c-line-strong);
  border-radius:4px;
  padding:.85rem 1rem;
  color:var(--off-white);
  font-size:.98rem;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(216,212,205,0.45); }
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--g-500);
  box-shadow:0 0 0 3px rgba(181,133,82,0.16);
}
.field textarea{ min-height:110px; resize:vertical; }
.field.has-error input,
.field.has-error textarea{ border-color:#c76a5c; }
.field-error{
  display:none;
  color:#e08b7a;
  font-size:.8rem;
  margin-top:.5rem;
  font-family:var(--font-mono);
}
.field.has-error .field-error{ display:block; }

.field-check-wrap{ margin-bottom:1.1rem; }
.field-check{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
}
.field-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:19px; height:19px;
  min-width:19px;
  margin-top:.15rem;
  border:1px solid var(--c-line-strong);
  border-radius:4px;
  background:var(--c-900);
  cursor:pointer;
  position:relative;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field-check input[type="checkbox"]:checked{
  background:var(--g-500);
  border-color:var(--g-500);
}
.field-check input[type="checkbox"]:checked::after{
  content:'';
  position:absolute;
  left:5px; top:1px;
  width:5px; height:9px;
  border:solid var(--c-950);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.field-check label{
  font-size:.88rem;
  color:var(--grey-300);
  line-height:1.5;
  cursor:pointer;
}
.field-check label a{ color:var(--g-300); text-decoration:underline; text-underline-offset:3px; }
.field-check label a:hover{ color:var(--g-500); }
.field-check-wrap.has-error input[type="checkbox"]{ border-color:#c76a5c; }
.field-check-wrap .field-error{ margin-top:.4rem; }
.field-check-wrap.has-error .field-error{ display:block; }

.form-submit{ margin-top:1.6rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.form-status{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:#e08b7a;
}
.form-status.is-ok{ color:var(--g-300); }

.btn-primary[disabled]{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;
}

/* honeypot */
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* success state */
.success-panel{
  display:none;
  text-align:left;
  padding: clamp(1.2rem, 3vw, 2rem) 0;
}
.success-panel.is-visible{ display:block; animation:rise .6s var(--ease); }
.success-panel h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); }
.success-panel p{ color:var(--grey-300); margin-top:1rem; max-width:36ch; }
.success-panel .mono-detail{ margin-top:1.6rem; }
.success-panel .btn{ margin-top:2rem; }

/* =========================================================
   Terms page
   ========================================================= */
.terms-page{ padding-block: 8.5rem 5rem; }
.terms-header{ margin-bottom:3.2rem; padding-bottom:2.4rem; border-bottom:1px solid var(--c-line); }
.terms-header h1{ font-size:clamp(2rem, 4.4vw, 3rem); }
.terms-updated{ margin-top:1rem; }
.terms-notice{
  margin-top:1.6rem;
  padding:1rem 1.2rem;
  border:1px solid var(--c-line-strong);
  border-left:2px solid var(--g-500);
  border-radius:2px;
  background:var(--c-800);
  font-size:.88rem;
  color:var(--grey-300);
}
.terms-body{
  max-width:74ch;
  display:flex;
  flex-direction:column;
  gap:2.4rem;
}
.terms-body h2{
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.8rem;
  display:flex;
  align-items:baseline;
  gap:.7rem;
}
.terms-body h2 .num{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--g-300);
}
.terms-body p{ color:var(--grey-300); font-size:.98rem; }
.terms-body p + p{ margin-top:.9rem; }
.terms-back{ margin-top:3.5rem; }

/* =========================================================
   Utility
   ========================================================= */
.center{ text-align:center; }
.mt-lg{ margin-top:3rem; }