:root{
  --bg:#0b0c10;
  --panel:#11131a;
  --panel2:#0f1016;
  --text:#eef2ff;
  --muted:#b7bfd6;
  --line:rgba(255,255,255,.10);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,77,77,.15), transparent 30%),
    radial-gradient(circle at 40% 25%, rgba(255,162,77,.12), transparent 30%),
    radial-gradient(circle at 60% 35%, rgba(255,229,77,.10), transparent 30%),
    radial-gradient(circle at 40% 75%, rgba(77,255,136,.10), transparent 30%),
    radial-gradient(circle at 75% 65%, rgba(77,215,255,.12), transparent 30%),
    radial-gradient(circle at 85% 40%, rgba(122,71,255,.15), transparent 30%),
    radial-gradient(circle at top, rgba(80,120,255,0.12), transparent 60%),
    radial-gradient(circle at bottom, rgba(255,100,200,0.10), transparent 60%),
    #0b1020;
  color:var(--text);
  line-height:1.55;
}

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

.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================
   SHARED HEADER / NAV
========================= */

.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(11,12,16,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:64px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.logo,
.brand-logo{
  height:52px;
  width:auto;
  display:block;
}

.brand-title{
  font-size:clamp(18px, 1.4vw, 20px);
  font-weight:700;
  letter-spacing:-0.02em;
  white-space:nowrap;
  background:linear-gradient(
    90deg,
    #ff4d4d,
    #ffa24d,
    #ffe54d,
    #4dff88,
    #4dd7ff,
    #7a47ff
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

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

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  background:transparent;
  transition:
    background .2s ease,
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.nav a:hover{
  background:rgba(255,255,255,.08);
}

.nav__cta{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.nav__studio{
  background:linear-gradient(
    135deg,
    rgba(122,92,255,.22),
    rgba(191,90,242,.22)
  );
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.nav__studio:hover{
  background:linear-gradient(
    135deg,
    rgba(122,92,255,.30),
    rgba(191,90,242,.30)
  );
  transform:translateY(-1px);
}

.nav__active{
  position:relative;
}

.nav__active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(255,107,74,.95),
    rgba(255,179,71,.95),
    rgba(124,92,255,.95)
  );
}

.menuBtn{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  flex:0 0 auto;
}

.menuBtn span{
  display:block;
  width:20px;
  height:2px;
  margin:0;
  border-radius:999px;
  background:var(--text);
  transition:transform .25s ease, opacity .25s ease;
}

.menuBtn[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

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

.menuBtn[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobileNav{
  display:none;
  padding:12px 16px 16px;
  background:rgba(10,12,18,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}

.mobileNav.is-open{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mobileNav a{
  display:block;
  min-height:48px;
  padding:14px 16px;
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:background .2s ease, transform .2s ease;
}

.mobileNav a:hover{
  background:rgba(255,255,255,.08);
}

.mobileNav__studio{
  background:linear-gradient(
    135deg,
    rgba(122,92,255,.22),
    rgba(191,90,242,.22)
  );
  border:1px solid rgba(255,255,255,.10);
}

body.menu-open{
  overflow:hidden;
}
/* =========================
   HEADER MOBILE FIX
========================= */

@media (max-width: 900px) {

  .header__inner,
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* Let brand shrink instead of breaking layout */
  .brand,
  .brand-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .brand-title {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 🔥 THIS is the main fix */
  .nav {
    display: none !important;
  }

  /* Show hamburger */
  .menu-toggle,
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
}
@media (max-width: 560px) {
  .brand-subtitle {
    display: none;
  }
}
/* =========================
   HERO
========================= */

.hero{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:110px 0 26px;
  --mx:50%;
  --my:20%;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(124,92,255,.18), transparent 22%),
    radial-gradient(circle at calc(var(--mx) - 18%) calc(var(--my) + 10%), rgba(255,107,74,.14), transparent 18%),
    radial-gradient(circle at calc(var(--mx) + 16%) calc(var(--my) + 6%), rgba(255,179,71,.12), transparent 16%);
  transition:background .18s ease;
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:50%;
  height:220px;
  background:linear-gradient(
    90deg,
    rgba(255,77,77,0),
    rgba(255,77,77,0.12),
    rgba(255,159,64,0.12),
    rgba(255,217,59,0.12),
    rgba(77,255,136,0.12),
    rgba(77,166,255,0.12),
    rgba(166,77,255,0.12),
    rgba(166,77,255,0)
  );
  border-radius:50%;
  filter:blur(40px);
  transform:translateY(-50%);
  animation:frequencyFlow 9s ease-in-out infinite alternate;
  z-index:0;
}

.hero > .container{
  position:relative;
  z-index:1;
}

.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}

.hero__copy{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.hero-content{
  position:relative;
  z-index:1;
}

.pill{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  font-weight:600;
  font-size:13px;
}

h1{
  margin:14px 0 12px;
  font-size:clamp(34px, 4.2vw, 54px);
  line-height:1.06;
  letter-spacing:-0.02em;
}

.grad{
  background:linear-gradient(90deg, #ff4d4d, #ffa24d, #ffe54d, #4dff88, #4dd7ff, #7a47ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.subhead{
  color:var(--muted);
  font-size:16px;
  max-width:54ch;
  margin:0 auto;
  text-align:center;
}

.subhead--secondary{
  margin-top:14px;
  max-width:760px;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.75;
  opacity:.92;
}

.hero__actions{
  display:flex;
  gap:12px;
  margin:22px 0 18px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  font-weight:700;
}

.btn--primary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease;
  background:#111827;
}

.btn--primary::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    135deg,
    #ff3b3b,
    #ff8c42,
    #ffd93b,
    #4dff88,
    #4dd7ff,
    #7a5cff,
    #c77dff
  );
  opacity:.85;
  z-index:-2;
  transition:opacity .25s ease;
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:inherit;
  filter:blur(14px);
  opacity:.35;
  z-index:-3;
  transition:opacity .25s ease, filter .25s ease;
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 18px rgba(122,92,255,.35),
    0 0 36px rgba(122,92,255,.25);
}

.btn--primary:hover::before{
  opacity:1;
}

.btn--primary:hover::after{
  opacity:.6;
  filter:blur(18px);
}

.btn--ghost{
  background:transparent;
}

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

.hero__trust{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:24px;
  justify-content:center;
  align-items:stretch;
  width:100%;
}

.stat{
  position:relative;
  padding:18px 20px;
  min-width:180px;
  text-align:center;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.stat::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,77,77,.22), transparent 30%),
    radial-gradient(circle at 45% 30%, rgba(255,162,77,.18), transparent 30%),
    radial-gradient(circle at 70% 35%, rgba(255,229,77,.16), transparent 30%),
    radial-gradient(circle at 30% 70%, rgba(77,255,136,.16), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(77,215,255,.16), transparent 30%),
    radial-gradient(circle at 85% 50%, rgba(122,71,255,.20), transparent 30%);
  filter:blur(24px);
  opacity:.9;
  z-index:0;
  pointer-events:none;
}

.stat::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  z-index:0;
  pointer-events:none;
}

.stat > *{
  position:relative;
  z-index:1;
}

.stat:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}

.stat__num{
  font-weight:800;
  font-size:22px;
  text-align:center;
  margin-bottom:6px;
}

.stat__label{
  color:var(--muted);
  font-weight:600;
  font-size:13px;
  text-align:center;
}

.slogan{
  font-family:Inter, sans-serif;
  font-size:clamp(1rem, 1.8vw, 1.25rem);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-align:center;
  margin:14px 0 10px;
  color:#eef2ff;
  opacity:.92;
}

.hero-underline{
  width:140px;
  height:3px;
  margin:12px auto 22px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(255,107,74,.95),
    rgba(255,179,71,.95),
    rgba(124,92,255,.95)
  );
  box-shadow:0 0 18px rgba(124,92,255,.18);
}

.hero--inner{
  min-height:52vh;
  display:flex;
  align-items:center;
}

/* =========================
   SECTIONS / GENERAL
========================= */

.section{
  padding:64px 0;
}

.section--alt{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section__head{
  margin-bottom:24px;
}

.section__head p{
  margin:0;
  color:var(--muted);
  max-width:70ch;
}

.section-heading{
  max-width:760px;
  margin:0 auto 2.5rem;
  text-align:center;
}

.section-heading h2{
  text-align:center;
}

.section-heading h2::after{
  margin:12px auto 0;
}

.section-heading p{
  color:rgba(255,255,255,0.78);
  line-height:1.7;
  font-size:1.05rem;
}

h2{
  font-size:2rem;
  margin:0 0 30px;
  text-align:left;
  letter-spacing:-0.02em;
  background:linear-gradient(
    90deg,
    #ff4d4d,
    #ff9f40,
    #ffd93b,
    #4dff88,
    #4da6ff,
    #a64dff
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

h2::after{
  content:"";
  display:block;
  width:80px;
  height:3px;
  margin:12px 0 0;
  background:linear-gradient(
    90deg,
    #ff4d4d,
    #ff9f40,
    #ffd93b,
    #4dff88,
    #4da6ff,
    #a64dff
  );
}

.eyebrow{
  margin:0 0 .75rem;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9db7ff;
}

.benefits-band{
  margin-top:26px;
}

.disclaimer-box{
  margin-top:26px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  line-height:1.7;
}

/* =========================
   CARDS / FEATURES / GRID
========================= */

.cards{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3, 1fr);
}

.card,
.feature,
.status-item{
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  transition:transform .2s ease, box-shadow .2s ease;
}

.card:hover,
.feature:hover,
.status-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.card h3,
.feature h3{
  margin:0 0 6px;
}

.card p,
.feature p{
  margin:0;
  color:var(--muted);
}

.grid2{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, 1fr);
}

/* =========================
   DIAGRAM
========================= */

.diagram{
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:700;
}

.diagram__node{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,.20);
}

.diagram__arrow,
.diagram__plus{
  opacity:.7;
}

/* =========================
   DEVELOPMENT STATUS
========================= */

.development-status{
  padding:80px 0;
  text-align:left;
}

.development-status h2{
  text-align:left;
}

.development-status h2::after{
  margin:12px 0 0;
}

.status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
  max-width:1000px;
  margin:0;
  justify-items:start;
}

.status-item{
  text-align:left;
  padding:22px;
}

.status-item:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.25);
}

/* =========================
   TIMELINE / CTA BAND
========================= */

.timeline{
  display:grid;
  gap:14px;
}

.step{
  display:flex;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
}

.step__dot{
  width:12px;
  height:12px;
  border-radius:50%;
  margin-top:6px;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 6px rgba(255,255,255,.06);
}

.step__body h3{
  margin:0 0 4px;
}

.step__body p{
  margin:0;
  color:var(--muted);
}

.ctaBand{
  margin-top:20px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.05);
}

/* =========================
   FORMS
========================= */

.form{
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.03);
}

.form__row{
  display:grid;
  gap:12px;
  grid-template-columns:1fr 1fr;
}

label{
  display:block;
  font-weight:700;
  color:var(--text);
}

input, select, textarea{
  width:100%;
  margin-top:8px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font:inherit;
}

textarea{
  resize:vertical;
}

.form__actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

.fineprint{
  margin:0;
  color:var(--muted);
  font-size:13px;
  max-width:58ch;
}

/* =========================
   FOOTER
========================= */

.footer{
  padding:24px 0 40px;
  color:var(--muted);
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:16px;
}

.footer__links{
  display:flex;
  gap:14px;
}

.footer__links a:hover{
  color:var(--text);
}

/* =========================
   VIDEO / CONCEPT DEMO
========================= */

.video-center{
  display:flex;
  justify-content:center;
}

.video-max{
  width:100%;
  max-width:980px;
}

.video-max video{
  width:100%;
  height:auto;
  display:block;
}

.video-glow{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  transition:box-shadow .4s ease;
}

.video-glow::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(circle at 50% 50%, rgba(124,92,255,.14), transparent 28%),
    radial-gradient(circle at 35% 50%, rgba(255,107,74,.12), transparent 24%),
    radial-gradient(circle at 65% 50%, rgba(255,179,71,.10), transparent 22%);
  opacity:.45;
  filter:blur(28px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:0;
}

.video-glow.is-active::before{
  opacity:.9;
  transform:scale(1.03);
}

.video-glow.is-active{
  box-shadow:
    0 0 40px rgba(122,92,255,.25),
    0 0 80px rgba(122,92,255,.15);
}

#reactiveScreen{
  position:relative;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

#reactiveScreen video,
.video-glow video{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
}

/* =========================
   VISUAL STORY / CHAMBER
========================= */

.visual-story{
  padding:5rem 0;
  background:
    radial-gradient(circle at top center, rgba(86, 124, 255, 0.12), transparent 35%),
    linear-gradient(180deg, #0b0c14 0%, #090a12 100%);
}

.visual-block{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center;
  margin-bottom:4rem;
  padding:2rem;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px;
  background:rgba(255,255,255,0.03);
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  backdrop-filter:blur(8px);
}

.visual-block--diagram{
  grid-template-columns:.95fr 1.05fr;
}

.visual-block__media img{
  width:100%;
  display:block;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 18px 50px rgba(0,0,0,0.3);
}

.visual-block__content h2,
.architecture-card h2{
  margin:0 0 1rem;
  font-size:clamp(1.8rem, 3vw, 2.8rem);
  line-height:1.1;
  color:#ffffff;
  -webkit-text-fill-color:#ffffff;
  background:none;
}

.visual-block__content h2::after,
.architecture-card h2::after{
  display:none;
}

.visual-block__content p,
.architecture-card p,
.feature-list li{
  color:rgba(255,255,255,0.82);
  font-size:1.05rem;
  line-height:1.7;
}

.feature-list{
  margin:1.25rem 0 0;
  padding-left:1.2rem;
}

.feature-list li{
  margin-bottom:.6rem;
}

.architecture-card{
  padding:2.25rem;
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(110, 134, 255, 0.08), rgba(255, 99, 194, 0.06)),
    rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

/* =========================
   TECH HIGHLIGHTS
========================= */

.tech-highlights{
  padding:5rem 0;
  background:
    radial-gradient(circle at top center, rgba(109, 126, 255, 0.12), transparent 32%),
    linear-gradient(180deg, #0a0b12 0%, #07080e 100%);
}

.highlights-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.5rem;
}

.highlight-card{
  position:relative;
  padding:1.6rem;
  border-radius:24px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 50px rgba(0,0,0,0.24);
  overflow:hidden;
}

.highlight-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(124, 144, 255, 0.08), rgba(255, 103, 197, 0.04));
  pointer-events:none;
}

.highlight-card > *{
  position:relative;
  z-index:1;
}

.highlight-number{
  display:inline-block;
  margin-bottom:.9rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#9db7ff;
}

.highlight-card h3{
  margin:0 0 .75rem;
  font-size:1.3rem;
  color:#fff;
}

.highlight-card p{
  margin:0;
  color:rgba(255,255,255,0.8);
  line-height:1.7;
}

/* =========================
   FREQUENCY MAPPING
========================= */

.frequency-mapping{
  padding:5rem 0;
  background:linear-gradient(180deg, #090a12, #0b0c14);
}

.mapping-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}

.mapping-image img{
  width:100%;
  border-radius:24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}

.mapping-text h2{
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom:1rem;
}

.mapping-text p{
  color:rgba(255,255,255,0.8);
  line-height:1.7;
}

.mapping-list{
  margin-top:1.5rem;
  padding-left:1.2rem;
}

.mapping-list li{
  margin-bottom:.6rem;
  color:rgba(255,255,255,0.9);
}

/* =========================
   APPLICATIONS PAGE
========================= */

.applications-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.application-card{
  padding:26px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}

.application-card h3{
  margin:6px 0 12px;
}

.application-card p{
  color:var(--muted);
  line-height:1.75;
}

.positioning-band{
  margin-top:28px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top left, rgba(255,107,74,.10), transparent 32%),
    radial-gradient(circle at top right, rgba(124,92,255,.10), transparent 32%),
    rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* =========================
   SYSTEMS PAGE
========================= */

.systems-intro{
  max-width:980px;
}

.systems-stack{
  display:grid;
  gap:28px;
}

.system-card{
  padding:30px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top left, rgba(255, 100, 100, 0.07), transparent 28%),
    radial-gradient(circle at right center, rgba(80, 140, 255, 0.07), transparent 32%),
    rgba(255,255,255,0.04);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
}

.system-card__head{
  margin-bottom:18px;
}

.system-label{
  margin:0 0 8px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.68);
}

.system-card h2{
  margin:0 0 16px;
}

.system-card p{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.78;
  max-width:78ch;
}

/* =========================
   RESEARCH PAGE
========================= */

.research-page{
  min-height:100vh;
}

.research-hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 64px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 90, 90, 0.24), transparent 26%),
    radial-gradient(circle at 30% 18%, rgba(255, 170, 70, 0.18), transparent 24%),
    radial-gradient(circle at 48% 20%, rgba(255, 225, 90, 0.14), transparent 24%),
    radial-gradient(circle at 66% 26%, rgba(90, 230, 140, 0.16), transparent 26%),
    radial-gradient(circle at 84% 28%, rgba(80, 170, 255, 0.18), transparent 24%),
    radial-gradient(circle at 74% 70%, rgba(130, 90, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.research-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255, 70, 70, 0.10),
    rgba(255, 150, 0, 0.08),
    rgba(255, 220, 80, 0.07),
    rgba(80, 220, 130, 0.08),
    rgba(70, 170, 255, 0.08),
    rgba(140, 90, 255, 0.10)
  );
  filter:blur(30px);
  transform:scale(1.08);
  pointer-events:none;
}

.research-hero .hero-content{
  position:relative;
  z-index:1;
  max-width:920px;
}

.research-hero .eyebrow{
  display:inline-block;
  margin:0 0 18px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.72);
}

.gradient-title{
  margin:0 0 20px;
  max-width:980px;
  font-size:clamp(2.8rem, 5vw, 4.8rem);
  line-height:1.02;
  letter-spacing:-0.04em;
  font-weight:800;
  background:linear-gradient(
    90deg,
    #ff5a5a 0%,
    #ffab3d 18%,
    #ffe45c 35%,
    #47db7d 54%,
    #4db6ff 74%,
    #7f6bff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-text{
  margin:0;
  max-width:860px;
  font-size:1.16rem;
  line-height:1.72;
  color:rgba(238, 242, 255, 0.9);
}

.research-list-section{
  padding:56px 0 80px;
}

.posts{
  position:relative;
  display:grid;
  gap:30px;
  max-width:920px;
  margin:0 auto;
  padding-left:10px;
}

.posts::before{
  content:"";
  position:absolute;
  left:23px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(
    180deg,
    rgba(255, 77, 77, 0.7),
    rgba(255, 162, 77, 0.65),
    rgba(255, 229, 77, 0.55),
    rgba(77, 255, 136, 0.5),
    rgba(77, 215, 255, 0.55),
    rgba(122, 71, 255, 0.7)
  );
  box-shadow:0 0 18px rgba(122, 71, 255, 0.18);
  opacity:.9;
}

.cardlike{
  position:relative;
  margin-left:56px;
  padding:24px 24px 22px;
  border:1px solid rgba(255, 255, 255, 0.11);
  border-radius:22px;
  background:rgba(255, 255, 255, 0.04);
  box-shadow:0 18px 50px rgba(0, 0, 0, 0.35);
  overflow:hidden;
}

.cardlike::before{
  content:"";
  position:absolute;
  left:-42px;
  top:28px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(
    180deg,
    #ff4d4d,
    #ffa24d,
    #ffe54d,
    #4dff88,
    #4dd7ff,
    #7a47ff
  );
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.05),
    0 0 24px rgba(122, 71, 255, 0.22);
}

.cardlike::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 77, 77, 0.08), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(77, 215, 255, 0.08), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(122, 71, 255, 0.06), transparent 30%);
  pointer-events:none;
}

.post__brandline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}

.post__logo{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
}

.post__brandname{
  font-weight:700;
  font-size:15px;
  letter-spacing:-0.02em;
  color:var(--text);
  opacity:.95;
}

.post__title{
  font-size:26px;
  line-height:1.12;
  margin:0 0 10px;
  position:relative;
  z-index:1;
  background:none;
  -webkit-text-fill-color:var(--text);
  color:var(--text);
}

.post__title::after{
  display:none;
}

.post__meta{
  display:flex;
  gap:12px;
  margin-bottom:14px;
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
  align-items:center;
  position:relative;
  z-index:1;
}

.post__text{
  color:var(--muted);
  line-height:1.72;
  position:relative;
  z-index:1;
}

.post__text p{
  margin:0 0 14px;
  max-width:72ch;
}

.tag{
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  background:rgba(255,255,255,.05);
  color:#4dd7ff;
}

.video-embed{
  position:relative;
  width:100%;
  max-width:760px;
  aspect-ratio:16 / 9;
  margin:0 0 22px;
  border-radius:18px;
  overflow:hidden;
}

.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
}

.research-posts{
  display:grid;
  gap:40px;
}

.research-post{
  padding:32px;
  border-radius:28px;
  background:
    radial-gradient(circle at top left, rgba(255, 100, 100, 0.08), transparent 30%),
    radial-gradient(circle at right center, rgba(80, 140, 255, 0.08), transparent 35%),
    rgba(255, 255, 255, 0.04);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter:blur(8px);
}

.research-post-header{
  margin-bottom:18px;
}

.research-post-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.research-post-logo{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
}

.research-post .brand-title,
.research-post-brandname,
.research-post-brand span{
  font-size:14px;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1;
  white-space:nowrap;
  background:linear-gradient(
    90deg,
    #ff4d4d,
    #ffa24d,
    #ffe54d,
    #4dff88,
    #4dd7ff,
    #7a47ff
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.research-date{
  font-size:.95rem;
  color:var(--muted);
  margin:0 0 14px;
  opacity:.8;
}

.research-post h2{
  font-size:clamp(2rem, 3vw, 2.8rem);
  line-height:1.08;
  margin:0 0 14px;
  letter-spacing:-0.03em;
  text-align:left;
  font-weight:800;
  background:linear-gradient(90deg, #ffffff, #eef2ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.research-post h2::after{
  content:"";
  display:block;
  width:80px;
  height:3px;
  margin:12px 0 0;
  background:linear-gradient(
    90deg,
    #ff4d4d,
    #ff9f40,
    #ffd93b,
    #4dff88,
    #4da6ff,
    #a64dff
  );
}

.research-title{
  font-size:1.6rem;
  margin-top:10px;
}

.research-summary{
  font-size:1.06rem;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:18px;
}

.research-tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}

.research-tag{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:#4dd7ff;
}

.research-body{
  line-height:1.8;
  color:var(--muted);
}

.research-body p{
  margin:0 0 18px;
}

.research-body .video-embed{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:16 / 9;
  margin:0 0 24px;
  border-radius:22px;
  overflow:hidden;
}

.research-body .video-embed iframe{
  width:100%;
  height:100%;
  border:0;
}

.research-card{
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  padding:28px;
  margin-bottom:28px;
}

.research-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.research-readmore{
  margin-top:10px;
  background:none;
  border:1px solid rgba(255,255,255,0.3);
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
}

.tag-button{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:white;
  padding:6px 12px;
  border-radius:20px;
  font-size:.85rem;
  cursor:pointer;
}

.tag-button:hover{
  background:rgba(255,255,255,0.15);
  transform:translateY(-1px);
}

.tag-button.active{
  background:linear-gradient(90deg, #ff6a4d, #ffb84d, #5ad97a, #5ab3ff);
  color:black;
  border:none;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes heroWave{
  0%{transform:translateX(-2%) translateY(0%) scale(1);}
  100%{transform:translateX(2%) translateY(-2%) scale(1.06);}
}

@keyframes frequencyFlow{
  0%{transform:translateY(-50%) translateX(-2%) scaleX(1);}
  100%{transform:translateY(-50%) translateX(2%) scaleX(1.08);}
}

@keyframes sloganFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* =========================
   RESPONSIVE
========================= */

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

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

  .menuBtn{
    display:flex;
  }

  .mobileNav[hidden]{
    display:none !important;
  }

  .logo{
    height:46px;
  }

  .brand-title{
    font-size:18px;
  }

  .grid2,
  .mapping-grid,
  .visual-block,
  .visual-block--diagram,
  .hero__grid{
    grid-template-columns:1fr;
  }

  .highlights-grid{
    grid-template-columns:1fr;
  }

  .visual-story,
  .tech-highlights{
    padding:3.5rem 0;
  }

  .visual-block{
    padding:1.25rem;
    gap:1.25rem;
  }

  .architecture-card{
    padding:1.5rem;
  }

  .applications-grid{
    grid-template-columns:1fr;
  }

  .positioning-band{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 820px){
  .ctaBand{
    flex-direction:column;
    align-items:flex-start;
  }

  .form__row{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .footer__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer__links{
    flex-wrap:wrap;
  }
}

@media (max-width: 700px){
  .posts::before{
    left:14px;
  }

  .cardlike{
    margin-left:34px;
    padding:20px 18px;
  }

  .cardlike::before{
    left:-27px;
    width:13px;
    height:13px;
  }

  .post__title{
    font-size:22px;
  }

  .system-card{
    padding:22px;
  }
}

@media (max-width: 640px){
  .hero__actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }

  .hero__actions .btn{
    width:100%;
  }

  .hero__trust{
    gap:12px;
  }

  .stat{
    width:100%;
    min-width:0;
  }
}

/* =========================================
   FINAL MOBILE NAV (CLEAN + WORKING)
========================================= */

.menuBtn {
  display: none;
}

@media (max-width: 900px) {

  .nav {
    display: none !important;
  }

  .menuBtn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 5001;
  }

  .menuBtn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
  }

  .mobileNav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: rgba(10, 16, 28, 0.98);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 14px 20px 18px;

    z-index: 5000;

    pointer-events: none; /* ?? prevents blocking */
  }

  .mobileNav.is-open {
    display: flex;
    flex-direction: column;
    gap: 14px;

    pointer-events: auto;
  }
}

/* HEADER ALWAYS ABOVE */
.header {
  position: sticky;
  top: 0;
  z-index: 4000;
}
.header {
  position: sticky;
  top: 0;
  z-index: 4000;
}

.header {
  position: sticky;
  top: 0;
  z-index: 4000;
}

.header {
  position: sticky;
  top: 0;
  z-index: 4000;
}

.header {
  position: sticky;
  top: 0;
  z-index: 4000;
}

.header {
  position: sticky;
  top: 0;
  z-index: 4000;
}

.header {
  position: sticky;
  top: 0;
  z-index: 4000;
  position: relative;
}

.mobileNav a {
  position: relative;
  z-index: 5002;
  display: block;
}
/* ===== MOBILE NAV TOP-LINK TAP FIX ===== */

.header {
  position: sticky;
  top: 0;
  z-index: 4000;
  overflow: visible;
}

.mobileNav {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 5000;
}

.mobileNav a {
  position: relative;
  z-index: 5002;
}
.mobileNav a {
  background: transparent;
}
.hero-description {
  max-width: 720px;
  margin: 20px auto 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  text-align: center;
}
.hero {
  padding: 100px 20px 80px;
}