:root{
  --bg:#070805;
  --panel:#12140D;
  --fg:#F2F3EC;
  --neon:#C6FF3D;
  --neon-dim:#8FCB1F;
  --line: rgba(242,243,236,.14);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Outfit', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-anchor:none;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{
  max-width:90vw;
  margin:0 auto;
  padding:0 32px;
}
.divider{border-top:1px solid var(--line);}
.center{text-align:center;}

/* ---------- Nav ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  padding:26px 0;
}
header::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:160px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(7,8,5,1) 0%, rgba(7,8,5,0) 100%);
}
nav.wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  max-width:90vw;
}
nav.wrap .logo{justify-self:start;}
nav.wrap .navlinks{justify-self:center;}
nav.wrap .navcta{justify-self:end;}
.logo{display:flex; align-items:center;}
.logo-svg{height:32px; width:auto; display:block; overflow:visible;}
.logo-o{
  transform-box:fill-box;
  transform-origin:center;
  animation:logo-o-loop 26s cubic-bezier(0,0,.2,1) infinite;
}
#logo-o2{animation-name:logo-o-loop-2;}
/* 26s loop, four gags: blink-squeeze ~4s, swap-jump ~11s, backflip ~16s,
   orbit-swap (they circle around each other and land in each other's
   place) ~19.5s, then repeats */
@keyframes logo-o-loop{
  0%, 15%{transform:translate(0,0) rotate(0deg) scale(1,1);}
  16%{transform:translate(0,4px) rotate(2deg) scale(1.18,.5);}
  17%{transform:translate(0,-6px) rotate(-3deg) scale(.82,1.28);}
  18%{transform:translate(0,1px) rotate(1deg) scale(1.06,.94);}
  18.5%, 41%{transform:translate(0,0) rotate(0deg) scale(1,1);}
  42%{transform:translate(12px,-16px) rotate(-16deg) scale(1.05,.92);}
  42.5%{transform:translate(53px,-26px) rotate(10deg) scale(.95,1.08);}
  43%{transform:translate(96px,-6px) rotate(-8deg) scale(1.08,.9);}
  43.5%{transform:translate(106px,3px) rotate(4deg) scale(.94,1.06);}
  44%{transform:translate(106px,0) rotate(0deg) scale(1,1);}
  44.5%{transform:translate(53px,-22px) rotate(-8deg) scale(1.05,.94);}
  45%, 61.5%{transform:translate(0,0) rotate(0deg) scale(1,1);}
  62.5%{transform:translate(0,-30px) rotate(120deg) scale(.9,1.1);}
  63.5%{transform:translate(0,-46px) rotate(300deg) scale(1.15,.82);}
  64.5%{transform:translate(0,-4px) rotate(400deg) scale(1.18,.78);}
  65%, 74%{transform:translate(0,0) rotate(360deg) scale(1,1);}
  /* orbit swap out: arcs up and over the top to O2's spot */
  74.8%{transform:translate(15.5px,-37.5px) rotate(364deg) scale(.92,1.1);}
  76%{transform:translate(53px,-53px) rotate(370deg) scale(.88,1.15);}
  77.2%{transform:translate(90.5px,-37.5px) rotate(364deg) scale(.95,1.08);}
  78%{transform:translate(106px,2px) rotate(358deg) scale(1.1,.9);}
  78.3%{transform:translate(106px,0) rotate(360deg) scale(1,1);}
  /* orbit swap back: a second arc, this time under the bottom, home again */
  79.3%{transform:translate(90.5px,37.5px) rotate(362deg) scale(.93,1.09);}
  80.5%{transform:translate(53px,53px) rotate(356deg) scale(.88,1.15);}
  81.7%{transform:translate(15.5px,37.5px) rotate(362deg) scale(.95,1.08);}
  82.8%{transform:translate(0,2px) rotate(360deg) scale(1.08,.92);}
  83.2%, 100%{transform:translate(0,0) rotate(360deg) scale(1,1);}
}
@keyframes logo-o-loop-2{
  0%, 15%{transform:translate(0,0) rotate(0deg) scale(1,1);}
  16%{transform:translate(0,4px) rotate(-2deg) scale(1.18,.5);}
  17%{transform:translate(0,-6px) rotate(3deg) scale(.82,1.28);}
  18%{transform:translate(0,1px) rotate(-1deg) scale(1.06,.94);}
  18.5%, 41%{transform:translate(0,0) rotate(0deg) scale(1,1);}
  42%{transform:translate(-12px,-16px) rotate(16deg) scale(1.05,.92);}
  42.5%{transform:translate(-53px,-26px) rotate(-10deg) scale(.95,1.08);}
  43%{transform:translate(-96px,-6px) rotate(8deg) scale(1.08,.9);}
  43.5%{transform:translate(-106px,3px) rotate(-4deg) scale(.94,1.06);}
  44%{transform:translate(-106px,0) rotate(0deg) scale(1,1);}
  44.5%{transform:translate(-53px,-22px) rotate(8deg) scale(1.05,.94);}
  45%, 61.5%{transform:translate(0,0) rotate(0deg) scale(1,1);}
  62.5%{transform:translate(0,-30px) rotate(-120deg) scale(.9,1.1);}
  63.5%{transform:translate(0,-46px) rotate(-300deg) scale(1.15,.82);}
  64.5%{transform:translate(0,-4px) rotate(-400deg) scale(1.18,.78);}
  65%, 74%{transform:translate(0,0) rotate(-360deg) scale(1,1);}
  /* orbit swap out: arcs down and under the bottom to O1's spot */
  74.8%{transform:translate(-15.5px,37.5px) rotate(-364deg) scale(.92,1.1);}
  76%{transform:translate(-53px,53px) rotate(-370deg) scale(.88,1.15);}
  77.2%{transform:translate(-90.5px,37.5px) rotate(-364deg) scale(.95,1.08);}
  78%{transform:translate(-106px,2px) rotate(-358deg) scale(1.1,.9);}
  78.3%{transform:translate(-106px,0) rotate(-360deg) scale(1,1);}
  /* orbit swap back: a second arc, this time over the top, home again */
  79.3%{transform:translate(-90.5px,-37.5px) rotate(-362deg) scale(.93,1.09);}
  80.5%{transform:translate(-53px,-53px) rotate(-356deg) scale(.88,1.15);}
  81.7%{transform:translate(-15.5px,-37.5px) rotate(-362deg) scale(.95,1.08);}
  82.8%{transform:translate(0,-2px) rotate(-360deg) scale(1.08,.92);}
  83.2%, 100%{transform:translate(0,0) rotate(-360deg) scale(1,1);}
}
.navlinks{
  display:flex;
  gap:34px;
  font-size:14px;
  font-weight:500;
}
.navlinks a{position:relative; padding-bottom:2px;}
.navlinks a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:1px;
  background:var(--neon);
  transition:width .25s ease;
}
.navlinks a:hover::after{width:100%;}
.navcta{
  border:1px solid var(--fg);
  padding:9px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.navcta:hover{background:var(--neon); color:var(--bg); border-color:var(--neon);}

/* ---------- Hero (cinematic glow) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px 32px 60px;
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  inset:-20%;
  z-index:0;
  background:
    radial-gradient(42% 52% at 30% 90%, rgba(198,255,61,.6), transparent 72%),
    radial-gradient(42% 52% at 70% 90%, rgba(198,255,61,.6), transparent 72%),
    radial-gradient(40% 30% at 20% 15%, rgba(198,255,61,.18), transparent 70%),
    radial-gradient(120% 80% at 50% 50%, #0c0e08, var(--bg) 65%);
  animation:glow-drift 14s ease-in-out infinite;
}
.hero-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(130% 70% at 50% 30%, transparent 45%, var(--bg) 100%);
}
@keyframes glow-drift{
  0%, 100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(-9%,-7%) scale(1.22);}
  50%{transform:translate(7%,5%) scale(.82);}
  75%{transform:translate(-5%,8%) scale(1.12);}
}
.hero-content{position:relative; z-index:2;}
.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--neon-dim);
  margin-bottom:26px;
}
h1.mega,
.cta h2,
.reveal-text,
h2.section-title,
.app-name{
  user-select:none;
  cursor:default;
}
h1.mega{
  font-size:min(800px, 45vw);
  line-height:.92;
  font-weight:600;
  letter-spacing:-0.04em;
  will-change:font-size;
  overflow-anchor:none;
  animation:hero-float 6s ease-in-out infinite;
}
@keyframes hero-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-18px);}
}
h1.mega .accent{color:var(--neon);}
.hero-sub{
  margin:140px auto 0;
  max-width:900px;
  font-size:clamp(1.9rem, 4.6vw, 3.6rem);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-0.025em;
  color:rgba(242,243,236,.8);
}
.hero-sub .accent{color:var(--neon);}
.scroll-cue{
  position:fixed;
  left:50%;
  bottom:60px;
  transform:translateX(-50%);
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(242,243,236,.5);
  animation:cue-bob 2.2s ease-in-out infinite;
  opacity:1;
  transition:opacity .3s ease;
  pointer-events:none;
}
.scroll-cue.faded{opacity:0;}
@keyframes cue-bob{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(8px);}
}
.scroll-cue .dash{
  width:1px; height:34px;
  background:var(--neon);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.3; transform:scaleY(.6); transform-origin:top;}
  50%{opacity:1; transform:scaleY(1); transform-origin:top;}
}

/* ---------- Reveal text sections ---------- */
.reveal-section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:160px 32px;
}
.reveal-text{
  max-width:900px;
  font-size:clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.18;
}
.reveal-line{
  display:block;
  opacity:.12;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-line.visible{opacity:1; transform:translateY(0);}
.reveal-text .accent{color:var(--neon);}
.reveal-sub{
  margin-top:40px;
  max-width:60%;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  line-height:1.6;
  color:rgba(242,243,236,.62);
}

/* ---------- Apps: one per viewport, huge type ---------- */
.apps-section{padding:0; position:relative;}
.apps-tint{
  position:sticky;
  top:0;
  height:100vh;
  margin-bottom:-100vh;
  z-index:0;
  pointer-events:none;
  background-color:transparent;
  filter:blur(90px);
  opacity:.28;
  transition:background-color .7s ease;
}
.section-head{
  position:relative;
  z-index:1;
  text-align:center;
  padding:150px 32px 90px;
}
.section-num{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--neon-dim);
  margin-bottom:14px;
}
h2.section-title{
  font-size:clamp(2rem,4.4vw,3.2rem);
  font-weight:600;
  letter-spacing:-0.025em;
}
.app-showcase{
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 32px;
  border-top:1px solid var(--line);
  position:relative;
  z-index:1;
  overflow:hidden;
  opacity:.15;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.app-showcase.visible{opacity:1; transform:translateY(0);}
.app-index{
  position:absolute;
  top:48px;
  left:50%;
  transform:translateX(-50%);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  color:rgba(242,243,236,.4);
}
.app-tag{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--neon-dim);
  margin-bottom:22px;
}
.app-name{
  font-size:700px;
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:.95;
  will-change:transform;
}
@media (max-width:1400px){ .app-name{font-size:14vw;} }
@media (max-width:700px){ .app-name{font-size:18vw;} }
.app-desc{
  margin:30px auto 0;
  max-width:560px;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.55;
  color:rgba(242,243,236,.62);
}
.app-store-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:36px;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid var(--fg);
  font-size:14px;
  font-weight:600;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.app-store-btn:hover{background:var(--neon); color:var(--bg); border-color:var(--neon);}
.apps-more{
  position:relative;
  z-index:1;
  text-align:center;
  padding:0 32px 160px;
  border-top:1px solid var(--line);
  padding-top:80px;
}
.apps-more a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--neon);
  border-bottom:1px solid var(--neon);
  padding-bottom:6px;
}

/* ---------- CTA (sock) ---------- */
.cta{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:100px 32px 100px;
}
.cta h2{
  font-size:min(800px, 45vw);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1;
  will-change:font-size;
  overflow-anchor:none;
}
.cta h2 .accent{color:var(--neon);}
.cta h2 .nowrap{display:inline-block; white-space:nowrap;}
.cta .email{
  display:inline-block;
  margin-top:32px;
  font-size:clamp(1.1rem,2.2vw,1.5rem);
  font-weight:600;
  border-bottom:1px solid var(--fg);
}
.cta .email:hover{color:var(--neon); border-color:var(--neon);}
.cta .note{margin-top:18px; font-size:13px; color:rgba(242,243,236,.45);}

/* ---------- Contact form ---------- */
.contact-form{
  margin-top:56px;
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:26px;
  text-align:left;
}
.hp-field{position:absolute; left:-9999px; opacity:0;}
.contact-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.contact-field input,
.contact-field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--fg);
  font-family:inherit;
  font-size:1.3rem;
  padding:18px 2px;
  resize:vertical;
  transition:border-color .18s ease;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{color:rgba(242,243,236,.4);}
.contact-field input:focus,
.contact-field textarea:focus{outline:none; border-color:var(--neon);}
.contact-captcha{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:1.05rem;
  color:rgba(242,243,236,.6);
}
.contact-captcha label{white-space:nowrap;}
.contact-captcha input{max-width:110px;}
.btn-submit{
  margin-top:14px;
  align-self:flex-start;
  background:var(--neon);
  color:var(--bg);
  border:none;
  padding:20px 42px;
  border-radius:999px;
  font-family:inherit;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn-submit:hover{background:var(--fg); transform:translateY(-2px);}
.btn-submit:disabled{opacity:.6; cursor:default; transform:none;}
.contact-status{
  font-size:.9rem;
  min-height:1.2em;
}
.contact-status.success{color:var(--neon);}
.contact-status.error{color:#ff6b57;}

/* ---------- Footer ---------- */
footer{
  position:relative;
  overflow:hidden;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:40px;
}
.footer-glow{
  position:absolute;
  inset:-20%;
  z-index:0;
  background:
    radial-gradient(40% 46% at 50% 82%, rgba(198,255,61,.32), transparent 78%),
    radial-gradient(24% 28% at 78% 90%, rgba(198,255,61,.1), transparent 78%);
  animation:glow-drift 14s ease-in-out infinite reverse;
}
footer .bottom-row{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:13px;
  font-weight:500;
  color:rgba(242,243,236,.45);
  padding-bottom:40px;
}
footer .bottom-row a:hover{color:var(--neon);}

@media (max-width:820px){
  .navlinks{display:none;}
}
@media (max-width:600px){
  .reveal-section{padding:110px 24px;}
  .contact-row{grid-template-columns:1fr;}
}