@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800;900&display=swap');

:root{
  --green:#2fe24f;
  --yellow:#ffd733;
  --red:#ff3630;
  --purple:#6b36e8;
  --bg:#020302;
  --panel:rgba(8,10,8,.72);
  --panel2:rgba(255,255,255,.075);
  --text:#fff8ec;
  --muted:#d7c8b6;
  --line:rgba(255,255,255,.13);
  --shadow:0 35px 120px rgba(0,0,0,.62);
  --radius:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 5%,rgba(47,226,79,.22),transparent 30%),
    radial-gradient(circle at 84% 4%,rgba(255,54,48,.20),transparent 32%),
    linear-gradient(180deg,#030303 0%,#080908 46%,#020302 100%);
}

a{color:inherit}
.page-shell{width:min(1220px,calc(100% - 30px));margin:0 auto}

.topbar{
  min-height:82px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:26px;
  align-items:center;
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(1,2,1,.88);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.09);
}

.wordmark{
  font-size:clamp(1.45rem,3vw,2.45rem);
  font-weight:900;
  font-style:italic;
  letter-spacing:.01em;
  text-decoration:none;
  line-height:1;
}
.wordmark:after{
  content:"";
  display:block;
  height:4px;
  margin-top:10px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));
}
.green{color:var(--green)} .yellow{color:var(--yellow)} .red{color:var(--red)}

.main-nav{justify-self:center;display:flex;gap:26px;align-items:center;font-size:.92rem}
.main-nav a{text-decoration:none;position:relative;opacity:.94;font-weight:800}
.main-nav a:first-child{color:var(--yellow)}
.main-nav a:after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;
  background:var(--yellow);transform:scaleX(0);transition:.2s
}
.main-nav a:hover:after,.main-nav a:first-child:after{transform:scaleX(1)}

.language-switch{text-align:right}
.language-switch button{
  border:0;
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
}
.language-switch button.active{background:rgba(255,215,51,.22);color:var(--yellow)}
.language-switch small{display:block;color:var(--muted);font-size:.68rem;margin-top:5px}

.mobile-menu{display:none;background:transparent;border:0;width:42px;height:42px}
.mobile-menu span{display:block;height:2px;background:#fff;margin:7px 0}

.hero-premium{
  position:relative;
  min-height:720px;
  overflow:hidden;
  border-radius:0 0 32px 32px;
  box-shadow:var(--shadow);
  background:#050505;
  isolation:isolate;
  padding:58px 48px 34px;
}

.hero-visual,.bg-poster,.scanlines,.light{position:absolute;inset:0}
.bg-poster{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.64),rgba(0,0,0,.38) 48%,rgba(0,0,0,.62)),
    url('atmosphere-bg.png');
  background-size:cover;
  background-position:center 25%;
  filter:saturate(1.2) contrast(1.05);
  transform:scale(1.02);
  opacity:.62;
  z-index:-5;
}
.hero-visual:after{
  content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(circle at 66% 20%,rgba(255,215,51,.18),transparent 24%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.63) 68%,#020302 100%);
}
.green-light{background:radial-gradient(circle at 7% 38%,rgba(47,226,79,.44),transparent 34%);z-index:-4}
.yellow-light{background:radial-gradient(circle at 50% 8%,rgba(255,215,51,.28),transparent 30%);z-index:-4}
.red-light{background:radial-gradient(circle at 94% 38%,rgba(255,54,48,.39),transparent 34%);z-index:-4}
.scanlines{
  z-index:-2;
  opacity:.18;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}

.hero-content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.8fr);
  gap:48px;
  align-items:center;
  min-height:530px;
}

.hero-left{max-width:680px}
.kicker{
  margin:0 0 18px;
  color:var(--yellow);
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:.82rem;
  font-weight:900;
}
.hero-left h1{margin:0;display:grid;gap:10px}
.logo-line{
  font-size:clamp(4rem,8.8vw,7.4rem);
  font-weight:900;
  font-style:italic;
  letter-spacing:-.08em;
  line-height:.86;
  text-shadow:0 18px 55px rgba(0,0,0,.75);
}
.hero-left h1 > span:last-child{
  font-size:clamp(1.65rem,3.8vw,3.25rem);
  line-height:1.02;
  max-width:820px;
  text-shadow:0 10px 36px #000;
}
.mission-copy{
  margin:20px 0 0;
  width:min(720px,100%);
  color:#f3e9d9;
  line-height:1.6;
  font-size:clamp(1rem,1.7vw,1.2rem);
  text-shadow:0 5px 25px #000;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 20px;
  border-radius:13px;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.btn-green{background:linear-gradient(135deg,#129535,#25d74d)}
.btn-purple{background:linear-gradient(135deg,#4b179d,#6f36e6)}
.btn-red{background:linear-gradient(135deg,#e24b1e,#ff3831)}
.btn-dark{background:rgba(0,0,0,.67)}
.btn b{font-size:.62rem;background:var(--red);padding:3px 6px;border-radius:5px;margin-left:8px}

.hero-right{display:grid;justify-items:center;gap:24px}
.avatar-orbit{
  position:relative;
  width:clamp(260px,28vw,390px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.avatar-orbit:before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 180deg,var(--green),var(--yellow),var(--red),var(--green));
  filter:blur(16px);
  opacity:.78;
}
.avatar-orbit:after{
  content:"";position:absolute;inset:20px;border-radius:50%;
  background:rgba(0,0,0,.68);
  box-shadow:inset 0 0 50px rgba(255,215,51,.12);
}
.avatar-orbit img{
  position:relative;
  z-index:4;
  width:76%;
  height:76%;
  object-fit:cover;
  border-radius:50%;
  border:8px solid #060606;
  background:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.08),0 25px 80px #000;
}
.orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  z-index:3;
}
.orbit-one{inset:7px;border-left-color:var(--green);border-top-color:var(--yellow);border-right-color:var(--red)}
.orbit-two{inset:40px;border-color:rgba(255,215,51,.32)}

.hero-tags{
  display:grid;
  gap:11px;
  width:min(360px,100%);
}
.hero-tags span{
  display:block;
  padding:13px 18px;
  border-radius:999px;
  background:rgba(0,0,0,.56);
  border:1px solid rgba(255,255,255,.13);
  font-weight:900;
  font-style:italic;
}
.hero-tags span:nth-child(1){color:var(--yellow)}
.hero-tags span:nth-child(2){color:var(--green)}
.hero-tags span:nth-child(3){color:var(--red)}

.hero-bottom{
  position:relative;
  z-index:3;
  margin-top:8px;
  display:grid;
  gap:12px;
  justify-items:center;
}
.soundbar{width:min(760px,100%);height:70px;display:flex;align-items:center;justify-content:space-between}
.soundbar i{
  width:5px;border-radius:999px;height:28px;
  background:linear-gradient(to bottom,var(--green),var(--yellow),var(--red));
  box-shadow:0 0 14px rgba(255,215,51,.7);
}
.soundbar i:nth-child(3n){height:54px}.soundbar i:nth-child(4n){height:18px}.soundbar i:nth-child(5n){height:66px}
.hero-bottom p{margin:0;color:var(--muted);font-weight:800;text-align:center}

.feature-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}
.feature,.vision-card,.quote-card,.snapshot,.contact-band{
  background:
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035)),
    radial-gradient(circle at 80% 0%,rgba(255,255,255,.10),transparent 28%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.feature{
  min-height:250px;
  position:relative;
  overflow:hidden;
  padding:26px;
}
.feature:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62px;
  background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 9px);
  opacity:.20;
  mask-image:linear-gradient(to top,#000,transparent);
}
.feature-icon{font-size:2.15rem}
.feature small{display:block;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:.72rem}
.feature h2{margin:0 0 12px;color:#fff;font-size:1.35rem}
.feature p{margin:0;color:var(--muted);line-height:1.58}
.feature-green{color:var(--green);border-color:rgba(47,226,79,.38)}
.feature-yellow{color:var(--yellow);border-color:rgba(255,215,51,.38)}
.feature-red{color:var(--red);border-color:rgba(255,54,48,.38)}
.feature-station{color:var(--green);border-color:rgba(255,215,51,.24)}

.vision-block{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:15px;margin-top:15px}
.vision-card,.quote-card{padding:27px}
.vision-icon{font-size:2rem;color:var(--green)}
.red-card .vision-icon,.red-card h2{color:var(--red)}
.vision-card h2{margin:10px 0 12px;text-transform:uppercase;letter-spacing:.08em;color:var(--green);font-size:1rem}
.vision-card p{margin:0;color:var(--muted);line-height:1.6}
.quote-card{display:grid;place-items:center;text-align:center}
.quote-card blockquote{margin:0;color:var(--yellow);font-size:clamp(1.6rem,3vw,2.45rem);font-style:italic;font-weight:900;line-height:1.12}
.quote-card p{color:var(--yellow);font-weight:900}

.snapshot{margin-top:15px;padding:28px}
.snapshot-head{text-align:center;margin-bottom:22px}
.snapshot h2{margin:0;text-transform:uppercase;letter-spacing:.09em;font-size:1.05rem}
.snapshot-head p{margin:8px 0 0;color:var(--muted)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stats-row article{
  min-height:145px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px;
  border-radius:20px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
}
.stats-row span{font-size:2.2rem}
.stats-row strong{font-size:clamp(2rem,4vw,3.25rem);line-height:1;color:#fff}
.stats-row small{color:var(--muted)}
.stats-row article:nth-child(1) span,.stats-row article:nth-child(1) strong{color:var(--green)}
.stats-row article:nth-child(2) span,.stats-row article:nth-child(2) strong{color:var(--red)}
.stats-row article:nth-child(3) span,.stats-row article:nth-child(3) strong{color:var(--yellow)}
.future{background:radial-gradient(circle at 85% 25%,rgba(47,226,79,.20),rgba(0,0,0,.30) 44%)!important}

.contact-band{margin-top:15px;padding:32px;display:grid;grid-template-columns:1.3fr auto;gap:24px;align-items:center}
.contact-band small{color:var(--yellow);text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.contact-band h2{margin:10px 0 12px;font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1}
.contact-band p{margin:0;color:var(--muted);line-height:1.6}
.contact-buttons{display:grid;gap:12px}

.footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:28px 0 36px;color:var(--muted)}
.footer a{text-decoration:none;color:var(--muted)}
.footer > p:first-child{color:#fff;font-weight:900;font-style:italic}
.footer > p:first-child:after{content:"";display:block;width:210px;height:3px;margin-top:8px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red))}
.socials{display:flex;gap:12px}
.socials a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.footer > p:last-child{text-align:right}

@media(max-width:980px){
  .connect-grid{grid-template-columns:1fr;}
  .connect-card{width:min(420px,100%);margin:0 auto;}

  .hero-left h1 > span:last-child,
  .hero-left h2 > span:last-child{
    white-space:normal;
  }

  .page-shell{width:min(760px,calc(100% - 22px))}
  .topbar{grid-template-columns:auto auto}
  .mobile-menu{display:block;justify-self:end}
  .main-nav,.language-switch{grid-column:1/-1}
  .main-nav{display:none;flex-direction:column;align-items:flex-start;padding-bottom:12px}
  .topbar.open .main-nav{display:flex}
  .language-switch{text-align:left}
  .hero-premium{padding:36px 24px}
  .hero-content{grid-template-columns:1fr;text-align:center;gap:28px}
  .hero-left{max-width:none}
  .hero-actions{justify-content:center}
  .hero-right{order:-1}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .vision-block{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .contact-band{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr;text-align:center}
  .footer > p:first-child:after{margin-left:auto;margin-right:auto}
  .footer > p:last-child{text-align:center}
}

@media(max-width:620px){
  .page-shell{width:calc(100% - 16px)}
  .hero-premium{min-height:auto;padding:30px 16px;border-radius:0 0 22px 22px}
  .logo-line{font-size:3.4rem}
  .hero-left h1 > span:last-child{font-size:1.5rem}
  .avatar-orbit{width:235px}
  .hero-actions{display:grid}
  .btn{width:100%}
  .feature-grid,.stats-row{grid-template-columns:1fr}
  .contact-buttons{width:100%}
}


.connect-section{
  margin-top:15px;
  padding:34px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 18% 18%,rgba(47,226,79,.16),transparent 28%),
    radial-gradient(circle at 82% 12%,rgba(255,54,48,.15),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.connect-head{
  text-align:center;
  width:min(760px,100%);
  margin:0 auto 28px;
}
.connect-head small{
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:900;
}
.connect-head h2{
  margin:10px 0 12px;
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1;
}
.connect-head p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.connect-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.connect-card{
  text-align:center;
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.34);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.qr-box{
  width:170px;
  height:170px;
  margin:0 auto 18px;
  padding:10px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 38px rgba(255,215,51,.18);
}
.qr-box img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.connect-card h3{
  margin:0 0 8px;
  font-size:1.35rem;
}
.connect-card p{
  min-height:48px;
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.45;
}
.connect-card .btn{width:100%}


/* Hero headline: keep “the World” together on desktop */
.hero-title-line{
  font-size:clamp(1.05rem,2.05vw,1.85rem) !important;
  line-height:1.06 !important;
  max-width:100%;
  white-space:nowrap;
  text-wrap:nowrap;
  display:block;
  text-shadow:0 10px 36px #000;
}


/* Final Hero balance fix:
   Keep Rastaman69DE fully visible and prevent the DE from disappearing behind the avatar. */
.hero-left{
  position:relative;
  z-index:12;
  max-width:760px;
}

.hero-right{
  position:relative;
  z-index:6;
}

.logo-line{
  position:relative;
  z-index:14;
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  font-size:clamp(3.25rem,6.1vw,5.65rem) !important;
  letter-spacing:-0.065em;
}

.hero-content{
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.78fr);
  gap:34px;
}

.avatar-orbit{
  transform:translateX(18px);
}

/* Keep the mission headline on one line on desktop when possible. */
.hero-title-line{
  white-space:nowrap;
  text-wrap:nowrap;
  font-size:clamp(1.05rem,2.0vw,1.75rem) !important;
}

@media(max-width:1180px){
  .logo-line{
    font-size:clamp(3rem,5.5vw,4.9rem) !important;
  }

  .hero-content{
    grid-template-columns:minmax(0,1.08fr) minmax(280px,.72fr);
    gap:26px;
  }

  .avatar-orbit{
    transform:translateX(8px);
  }
}

@media(max-width:980px){
  .logo-line{
    width:auto;
    max-width:100%;
    white-space:normal;
    font-size:clamp(3rem,10vw,5rem) !important;
  }

  .hero-title-line{
    white-space:normal;
    text-wrap:normal;
  }

  .avatar-orbit{
    transform:none;
  }
}

@media(max-width:620px){
  .logo-line{
    font-size:clamp(2.55rem,13vw,3.55rem) !important;
  }
}


/* === Final fixes: German connect text + nicer mobile layout === */

/* Hero headline: prevent ugly desktop wrap, but allow mobile wrap */
.hero-title-line{
  font-size:clamp(1.05rem,2vw,1.75rem) !important;
  line-height:1.08 !important;
  white-space:nowrap;
  text-wrap:nowrap;
  max-width:100%;
}

/* Connect section polish */
.connect-section{
  scroll-margin-top:100px;
}

.connect-card{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.connect-card .btn{
  margin-top:auto;
}

/* QR readability */
.qr-box{
  width:clamp(140px,13vw,170px);
  height:clamp(140px,13vw,170px);
}

/* Tablet */
@media(max-width:980px){
  .page-shell{
    width:min(760px,calc(100% - 22px));
  }

  .topbar{
    padding:14px 0;
  }

  .wordmark{
    font-size:clamp(1.55rem,6vw,2.35rem);
  }

  .hero-premium{
    min-height:auto;
    padding:34px 22px 30px;
  }

  .hero-content{
    grid-template-columns:1fr;
    text-align:center;
    gap:22px;
    min-height:auto;
  }

  .hero-right{
    order:-1;
  }

  .avatar-orbit{
    width:clamp(210px,52vw,300px);
  }

  .hero-left{
    max-width:none;
  }

  .logo-line{
    width:auto;
    white-space:normal;
    font-size:clamp(3rem,11vw,5rem) !important;
  }

  .hero-title-line{
    white-space:normal;
    text-wrap:normal;
    font-size:clamp(1.35rem,5vw,2.1rem) !important;
  }

  .mission-copy{
    font-size:1rem;
  }

  .hero-actions{
    justify-content:center;
  }

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

  .connect-card{
    width:min(430px,100%);
    margin:0 auto;
  }

  .connect-head h2{
    font-size:clamp(1.7rem,6vw,2.6rem);
  }

  .connect-card p{
    min-height:0;
  }
}

/* Phone */
@media(max-width:620px){
  .page-shell{
    width:100%;
  }

  .topbar{
    width:calc(100% - 18px);
    margin:0 auto;
    grid-template-columns:1fr auto;
    gap:10px;
    min-height:auto;
  }

  .wordmark{
    font-size:clamp(1.45rem,9vw,2rem);
  }

  .language-switch{
    text-align:left;
  }

  .language-switch button{
    padding:7px 10px;
  }

  .main-nav{
    gap:12px;
  }

  .hero-premium{
    width:calc(100% - 18px);
    margin:0 auto;
    padding:28px 16px 26px;
    border-radius:0 0 22px 22px;
  }

  .kicker{
    font-size:.72rem;
    letter-spacing:.09em;
  }

  .avatar-orbit{
    width:210px;
  }

  .hero-tags{
    width:100%;
    gap:8px;
  }

  .hero-tags span{
    padding:10px 14px;
    font-size:.9rem;
  }

  .logo-line{
    font-size:clamp(2.6rem,15vw,3.5rem) !important;
  }

  .hero-title-line{
    font-size:clamp(1.25rem,7vw,1.75rem) !important;
  }

  .mission-copy{
    font-size:.95rem;
    line-height:1.5;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .btn{
    width:100%;
    min-height:46px;
  }

  .feature-grid,
  .vision-block,
  .stats-row{
    width:calc(100% - 18px);
    margin-left:auto;
    margin-right:auto;
    grid-template-columns:1fr;
  }

  .feature{
    min-height:auto;
  }

  .connect-section,
  .contact-band,
  .snapshot{
    width:calc(100% - 18px);
    margin-left:auto;
    margin-right:auto;
    padding:24px 16px;
    border-radius:22px;
  }

  .connect-head{
    margin-bottom:22px;
  }

  .connect-head h2{
    font-size:clamp(1.65rem,8vw,2.25rem);
  }

  .connect-head p{
    font-size:.95rem;
  }

  .qr-box{
    width:155px;
    height:155px;
    border-radius:18px;
  }

  .connect-card{
    padding:20px 16px;
    border-radius:18px;
  }

  .connect-card h3{
    font-size:1.25rem;
  }

  .contact-band{
    grid-template-columns:1fr;
  }

  .footer{
    width:calc(100% - 18px);
    margin-left:auto;
    margin-right:auto;
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer > p:last-child{
    text-align:center;
  }

  .footer > p:first-child:after{
    margin-left:auto;
    margin-right:auto;
  }

  .socials{
    justify-content:center;
  }
}


/* === FINAL MOBILE HERO FIX ===
   Fixes cropped / shifted hero elements on iPhone and narrow screens. */
@media(max-width:620px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .page-shell{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .topbar{
    width:calc(100% - 18px);
    max-width:calc(100% - 18px);
    margin:0 auto;
    padding-left:0;
    padding-right:0;
  }

  .hero-premium{
    width:calc(100% - 18px);
    max-width:calc(100% - 18px);
    margin:0 auto;
    overflow:hidden;
    padding:24px 14px 24px;
  }

  .hero-content{
    width:100%;
    max-width:100%;
    overflow:hidden;
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:18px;
  }

  .hero-left,
  .hero-right{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .hero-right{
    order:-1;
    display:grid;
    justify-items:center;
  }

  .avatar-orbit{
    width:min(190px,58vw);
    max-width:190px;
    transform:none !important;
    margin:0 auto;
  }

  .hero-tags{
    width:100%;
    max-width:320px;
    margin:0 auto;
  }

  .hero-tags span{
    width:100%;
    max-width:100%;
    padding:9px 12px;
    font-size:.86rem;
    text-align:center;
  }

  .kicker{
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
    text-align:center;
    font-size:.66rem;
    line-height:1.35;
    letter-spacing:.08em;
    margin-bottom:12px;
  }

  .logo-line{
    display:block;
    width:100%;
    max-width:100%;
    white-space:nowrap;
    overflow:visible;
    text-align:center;
    font-size:clamp(2.15rem,12.6vw,3.05rem) !important;
    line-height:.92;
    letter-spacing:-.055em;
  }

  .hero-title-line{
    display:block;
    width:100%;
    max-width:100%;
    white-space:normal !important;
    text-wrap:normal !important;
    overflow-wrap:normal;
    font-size:clamp(1.18rem,6.6vw,1.55rem) !important;
    line-height:1.1 !important;
    text-align:center;
  }

  .mission-copy{
    width:100%;
    max-width:100%;
    padding:0 4px;
    font-size:.9rem;
    line-height:1.48;
    text-align:center;
    overflow-wrap:break-word;
  }

  .hero-actions{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:22px;
  }

  .btn{
    width:100%;
    max-width:100%;
    min-height:46px;
    padding:12px 14px;
    font-size:.98rem;
  }

  .hero-bottom{
    width:100%;
    max-width:100%;
    overflow:hidden;
    margin-top:18px;
  }

  .soundbar{
    width:100%;
    max-width:100%;
    height:56px;
    gap:3px;
    overflow:hidden;
  }

  .soundbar i{
    width:4px;
  }

  .hero-bottom p{
    width:100%;
    max-width:100%;
    padding:0 4px;
    font-size:.92rem;
    line-height:1.35;
  }

  .feature-grid,
  .vision-block,
  .stats-row,
  .connect-section,
  .contact-band,
  .snapshot,
  .footer{
    width:calc(100% - 18px);
    max-width:calc(100% - 18px);
    margin-left:auto;
    margin-right:auto;
  }

  .connect-card,
  .feature,
  .vision-card,
  .quote-card,
  .stats-row article{
    width:100%;
    max-width:100%;
  }
}

/* Extra narrow iPhones */
@media(max-width:390px){
  .logo-line{
    font-size:clamp(2rem,11.7vw,2.65rem) !important;
    letter-spacing:-.05em;
  }

  .hero-title-line{
    font-size:clamp(1.08rem,6vw,1.38rem) !important;
  }

  .avatar-orbit{
    width:min(176px,56vw);
  }

  .kicker{
    font-size:.62rem;
    letter-spacing:.07em;
  }
}


/* === Language switch with DE / EN / FR / Auto === */
.language-switch{
  min-width:max-content;
}

.language-switch button{
  margin:0 2px;
}

/* French text can be a bit longer, keep mobile stable */
@media(max-width:620px){
  .language-switch{
    width:100%;
  }

  .language-switch button{
    padding:7px 9px;
    font-size:.82rem;
  }

  .main-nav a{
    font-size:.95rem;
  }
}


/* === Legal Pages: Impressum / Datenschutz === */

.legal-page{
  margin-top:18px;
  padding:34px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 18% 18%,rgba(47,226,79,.16),transparent 28%),
    radial-gradient(circle at 82% 12%,rgba(255,54,48,.15),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.legal-hero{
  text-align:center;
  width:min(860px,100%);
  margin:0 auto 30px;
}

.legal-hero small{
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:900;
}

.legal-hero h1{
  margin:10px 0 14px;
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:1;
}

.legal-hero p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

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

.legal-card{
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.34);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  scroll-margin-top:110px;
}

.legal-card h2{
  margin:0 0 18px;
  color:var(--yellow);
  font-size:1.45rem;
}

.legal-card h3{
  margin:22px 0 8px;
  color:var(--green);
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.legal-card p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.65;
}

.legal-card a{
  color:var(--yellow);
  word-break:break-word;
}

.legal-source{
  margin-top:22px !important;
  font-size:.9rem;
  opacity:.85;
}

.legal-back{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.legal-nav{
  justify-self:center;
  flex-wrap:wrap;
}

.legal-lang{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}

.legal-lang a{
  text-decoration:none;
  font-weight:900;
  font-size:.85rem;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.legal-lang a:hover{
  color:var(--yellow);
  background:rgba(255,215,51,.14);
}

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

  .legal-card{
    width:min(560px,100%);
    margin:0 auto;
  }

  .legal-nav{
    display:flex;
    grid-column:1/-1;
    justify-self:start;
    gap:16px;
  }

  .legal-lang{
    grid-column:1/-1;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

@media(max-width:620px){
  .legal-page{
    width:calc(100% - 18px);
    margin-left:auto;
    margin-right:auto;
    padding:24px 16px;
    border-radius:22px;
  }

  .legal-hero h1{
    font-size:clamp(2rem,11vw,3rem);
  }

  .legal-card{
    padding:20px 16px;
    border-radius:18px;
  }

  .legal-back{
    display:grid;
  }

  .legal-back .btn{
    width:100%;
  }

  .legal-nav{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .legal-lang{
    justify-content:center;
  }
}