.about-nav {
  display:flex;
  gap:.35rem;
  align-items:center
}

.about-nav a {
  padding:.45rem .75rem;
  border-radius:999px;
  color:var(--tx2);
  text-decoration:none
}

.about-nav a:hover,.about-nav a.active {
  color:var(--tx);
  background:#ffffff14
}

.language-switch {
  display:flex;
  gap:.2rem;
  padding:.2rem;
  border:1px solid var(--line);
  border-radius:999px
}

.language-switch button {
  border:0;
  background:transparent;
  color:var(--tx2);
  padding:.35rem .6rem;
  border-radius:999px;
  font:600 .82rem var(--fb);
  cursor:pointer
}

.language-switch button[aria-pressed=true] {
  background:#8b5cf6;
  color:white
}

.language-switch button:focus-visible,.about-nav a:focus-visible {
  outline:2px solid var(--cy);
  outline-offset:2px
}

.about-main {
  max-width:1200px;
  margin:0 auto;
  padding:0 1.25rem
}

.about-main section {
  scroll-margin-top:90px
}

.about-hero {
  min-height:75vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem;
  align-items:center;
  padding:4rem 0
}

.about-hero h1 {
  font-size:clamp(3rem,7vw,5rem);
  line-height:1
}

.about-hero h1 em {
  font-style:normal;
  color:var(--cy)
}

.about-hero h2 {
  font-size:clamp(1.4rem,3vw,2rem);
  margin:1rem 0
}

.earth-visual {
  height:340px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse,#17234a 0%,#080d1c00 68%)
}

.earth-ball {
  width:190px;
  height:190px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:radial-gradient(circle at 34% 28%,#60dbea,#3b82f6 42%,#322267 82%);
  box-shadow:0 0 85px #22d3ee66,inset -18px -12px 35px #070b1c88;
  z-index:1;
  font:700 1.1rem var(--fh);
  letter-spacing:.12em
}

.orbit {
  position:absolute;
  border:1px solid #22d3ee55;
  border-radius:50%;
  width:280px;
  height:120px;
  transform:rotate(-24deg)
}

.orbit-two {
  width:320px;
  height:180px;
  transform:rotate(32deg);
  border-color:#8b5cf655
}

.visual-wave {
  position:absolute;
  width:100%;
  height:60px;
  bottom:42px;
  opacity:.6;
  background:repeating-linear-gradient(90deg,transparent 0 8px,#22d3ee 9px 11px,transparent 12px 18px);
  mask-image:linear-gradient(0deg,transparent,#000 45%,transparent);
  animation:waveflow 4s linear infinite
}

.earth-visual small {
  position:absolute;
  bottom:8px;
  color:var(--tx2);
  letter-spacing:.15em;
  font-size:.7rem
}

.about-section {
  padding:3rem 0
}

.about-section>h2,.mission-section h2 {
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin:.25rem 0 .7rem
}

.section-intro {
  max-width:850px;
  color:var(--tx2);
  font-size:1.05rem;
  margin:0 0 1.2rem
}

.about-grid {
  display:grid;
  gap:.8rem
}

.about-grid.three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.about-grid.two {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.about-card {
  padding:1.1rem;
  background:linear-gradient(145deg,#101a30,#0c1426);
  border:1px solid var(--line);
  border-radius:16px;
  transition:transform .2s,border-color .2s
}

.about-card:hover {
  transform:translateY(-3px);
  border-color:#22d3ee66
}

.about-card h3 {
  margin:.45rem 0
}

.about-card p,.about-card li {
  color:var(--tx2);
  font-size:.94rem
}

.about-card p {
  margin:.3rem 0 .7rem
}

.about-card ul {
  padding-left:1.2rem
}

.about-card a:not(.btn) {
  color:var(--cy)
}

.card-icon {
  font-size:1.8rem;
  color:var(--cy)
}

.wave-mark {
  height:32px;
  margin:.2rem 0 .6rem;
  background:repeating-linear-gradient(90deg,transparent 0 7px,#22d3ee 8px 10px,transparent 11px 15px);
  mask-image:linear-gradient(0deg,transparent,#000 45%,transparent);
  animation:waveflow 2.5s linear infinite
}

.wave-mark.dense {
  background-size:8px 100%;
  animation-duration:1.2s
}

.wave-mark.wind-wave {
  transform:skewY(-8deg);
  opacity:.7
}

.wave-mark.soft {
  opacity:.45;
  filter:blur(1px)
}

.wave-mark.slow {
  background-size:24px 100%;
  animation-duration:5s
}

.wave-mark.data-wave {
  background-image:repeating-linear-gradient(90deg,transparent 0 12px,#8b5cf6 13px 15px,transparent 16px 22px)
}

.material-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.7rem
}

.material-grid .about-card>span {
  font-size:1.5rem
}

.rock-list {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.8rem
}

.rock-list span {
  background:#101a30;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.45rem .75rem;
  color:var(--tx2);
  font-size:.86rem
}

.environment-card {
  position:relative;
  overflow:hidden
}

.environment-card .tag {
  font-size:.74rem
}

.mini-wave {
  height:35px;
  background:repeating-linear-gradient(90deg,transparent 0 12px,#22d3ee 13px 15px,transparent 16px 21px);
  mask-image:linear-gradient(0deg,transparent,#000 45%,transparent);
  opacity:.55
}

.mini-wave.tropical {
  background-size:10px 100%;
  animation:waveflow 1.5s linear infinite
}

.life-grid {
  margin-top:.8rem
}

.feature-card {
  padding:1.5rem
}

.feature-card>.tag {
  color:var(--cy);
  letter-spacing:.08em
}

.feature-card h3 {
  font-size:1.5rem
}

.mission-section {
  text-align:center;
  padding:4rem 1rem;
  margin:2rem 0 4rem;
  border:1px solid #8b5cf655;
  border-radius:24px;
  background:radial-gradient(ellipse at 50% 0%,#8b5cf622,transparent 65%),#101a30
}

.mission-section>p:not(.eyebrow) {
  max-width:760px;
  margin:0 auto;
  color:var(--tx2)
}

.mission-section blockquote {
  font:700 clamp(1.5rem,4vw,2.4rem)/1.25 var(--fh);
  max-width:850px;
  margin:1.5rem auto;
  color:var(--tx)
}

.about-footer {
  border-top:1px solid var(--line);
  padding:2rem max(1.25rem,calc((100vw - 1200px)/2));
  color:var(--tx2)
}

.about-footer .brand {
  color:var(--tx);
  text-decoration:none
}

.about-footer nav {
  display:flex;
  gap:1rem;
  flex-wrap:wrap
}

.about-footer nav a {
  color:var(--cy)
}

.about-footer p {
  margin:.55rem 0
}

@keyframes waveflow {
  to {
    background-position:64px 0
  }


}

@media(max-width:900px) {
  .about-hero {
    grid-template-columns:1fr;
    padding-top:3rem;
    min-height:unset
  }

  .earth-visual {
    height:280px
  }

  .material-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }


}

@media(max-width:650px) {
  .navin {
    flex-wrap:wrap;
    border-radius:18px;
    padding:.6rem 1rem
  }

  .brand {
    order:1
  }

  .language-switch {
    order:2
  }

  .about-nav {
    display:flex;
    order:3;
    width:100%;
    justify-content:center
  }

  .about-grid.three,.about-grid.two,.material-grid {
    grid-template-columns:1fr
  }

  .about-main {
    padding:0 1rem
  }

  .about-section {
    padding:2rem 0
  }

  .earth-visual {
    height:230px
  }

  .earth-ball {
    width:150px;
    height:150px
  }

  .about-footer {
    padding:1.5rem 1rem
  }


}