:root {
  --color-bg: #081B2F;
  --color-bg-deep: #061320;
  --color-bg-mid: #102A43;
  --color-bg-soft: #183C63;

  --color-gold: #D4AF37;
  --color-gold-light: #E6C76A;
  --color-gold-dark: #A57C1B;

  --color-white: #FFFFFF;
  --color-soft-white: #F4F7FA;
  --color-gray: #AAB7C4;
  --color-gray-dark: #6F7F90;

  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-error: #E74C3C;
  --color-info: #3498DB;

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

  --container: 1180px;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;
  --transition-slow: 700ms cubic-bezier(.2,.7,.2,1);

  --font-primary: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-secondary: "Poppins", "Segoe UI", Arial, sans-serif;
}

/* =========================
   Reset / Base
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-bg-deep);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-secondary);
  color: var(--color-soft-white);
  background:
    radial-gradient(circle at 70% 10%, rgba(212, 175, 55, 0.09), transparent 28%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg-deep));
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  background: rgba(212, 175, 55, 0.28);
  color: var(--color-white);
}

.site-shell {
  min-height: 100vh;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.section {
  padding: var(--space-7) 0;
}

.section--compact {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

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

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 9999;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-bg-deep);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* =========================
   Hero
   ========================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 15, 28, 0.34), rgba(4, 15, 28, 0.78)),
    url("../images/hero.webp") center center / cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 214, 120, 0.12), transparent 22%),
    linear-gradient(180deg, rgba(8, 27, 47, 0.06), rgba(8, 27, 47, 0.58));
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(6, 19, 32, 0.88));
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 25%),
    radial-gradient(circle at 80% 25%, rgba(212, 175, 55, 0.11), transparent 22%);
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: clamp(4rem, 9vh, 7rem);
  padding-bottom: clamp(4rem, 8vh, 6.5rem);
}

/* =========================
   Brand
   ========================= */

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

.brand__logo-link {
  display: inline-grid;
  place-items: center;
  margin-bottom: 0.6rem;
  transition: transform var(--transition-base), filter var(--transition-base);
}

.brand__logo-link:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.45));
}

.brand__logo {
  width: clamp(78px, 9vw, 118px);
  height: auto;
}

.brand__wordmark {
  margin: 0.2rem 0 0;
  font-family: var(--font-primary);
  font-size: clamp(2.4rem, 5.8vw, 5.2rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-white);
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(212, 175, 55, 0.08);
}

.brand__claim {
  margin: 0.75rem 0 0;
  font-family: var(--font-primary);
  font-size: clamp(0.72rem, 1.3vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.brand__signature {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  color: rgba(244, 247, 250, 0.82);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}

.brand__signature-line {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* =========================
   Coming Soon
   ========================= */

.coming-soon {
  margin-top: clamp(2.2rem, 5vh, 4rem);
}

.coming-soon h1 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 7vw, 6.8rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow:
    0 5px 24px rgba(0, 0, 0, 0.42),
    0 0 35px rgba(255, 255, 255, 0.05);
}

.accent-line {
  display: block;
  width: min(140px, 28vw);
  height: 3px;
  margin: 1rem auto 1.2rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-gold-dark),
    var(--color-gold-light),
    var(--color-gold-dark),
    transparent
  );
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.coming-soon__eyebrow {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--color-gold-light);
}

.coming-soon__intro {
  width: min(760px, 100%);
  margin: 0.8rem auto 0;
  font-size: clamp(0.96rem, 1.8vw, 1.12rem);
  line-height: 1.7;
  color: rgba(244, 247, 250, 0.88);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

/* =========================
   Countdown
   ========================= */

.countdown-section {
  margin-top: clamp(2rem, 5vh, 3.6rem);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.8vw, 1.25rem);
  width: min(820px, 100%);
  margin: 0 auto;
}

.glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 38%,
    rgba(230, 199, 106, 0.12) 49%,
    rgba(255, 255, 255, 0.04) 60%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 900ms ease;
}

.glass-card:hover::before {
  transform: translateX(120%);
}

.countdown__item {
  min-height: 126px;
  padding: 1.05rem 0.85rem 0.95rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.countdown__item:hover {
  transform: translateY(-4px);
  border-color: rgba(230, 199, 106, 0.45);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(212, 175, 55, 0.13);
}

.countdown__icon {
  margin-bottom: 0.25rem;
  color: var(--color-gold-light);
  font-size: 1rem;
  opacity: 0.92;
}

.countdown__value {
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  font-weight: 800;
  color: var(--color-white);
}

.countdown__label {
  margin-top: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.countdown__fallback {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: rgba(244, 247, 250, 0.64);
}

/* =========================
   Features
   ========================= */

.features {
  position: relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 18%),
    linear-gradient(180deg, #0A1E33, #081725 62%, #07131F);
}

.features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(860px, 82vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
}

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

.feature {
  position: relative;
  min-width: 0;
  padding: 1.35rem 1rem 1.45rem;
  text-align: center;
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
}

.feature:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

.feature__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.95rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.15));
  transition: transform var(--transition-base), filter var(--transition-base);
}

.feature:hover .feature__icon {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 5px 14px rgba(212, 175, 55, 0.28));
}

.feature h3 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-white);
}

.feature p {
  margin: 0.65rem auto 0;
  max-width: 220px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(170, 183, 196, 0.92);
}

/* =========================
   Legal note
   ========================= */

.legal-note {
  background:
    linear-gradient(180deg, #07131F, #06111C);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-note__inner {
  text-align: center;
}

.legal-note p {
  margin: 0.28rem auto;
  max-width: 980px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(170, 183, 196, 0.72);
}

/* =========================
   Footer
   ========================= */

.site-footer {
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  background: var(--color-bg-deep);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding-top: 1.45rem;
  padding-bottom: 1.55rem;
  text-align: center;
}

.site-footer__brand {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-gold-light);
}

.site-footer__copyright {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(170, 183, 196, 0.76);
}

.site-footer__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.site-footer__nav a {
  color: var(--color-gold-light);
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--color-white);
  text-shadow: 0 0 10px rgba(230, 199, 106, 0.25);
}

.site-footer__divider {
  color: rgba(170, 183, 196, 0.42);
}

/* =========================
   Reveal Animations
   ========================= */

[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

[data-reveal="fade-up"] {
  transform: translateY(24px);
}

[data-reveal="fade-down"] {
  transform: translateY(-24px);
}

[data-reveal="zoom-in"] {
  transform: scale(0.96);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* no-JS fallback */
html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}

/* =========================
   Focus
   ========================= */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 4px;
  border-radius: 6px;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1100px) {
  .features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feature:nth-child(4),
  .feature:nth-child(5) {
    max-width: 320px;
    width: 100%;
    justify-self: center;
  }
}

@media (max-width: 860px) {
  .hero {
    min-height: auto;
    background-position: 60% center;
  }

  .hero__content {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
  }

  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
  }

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

  .feature:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 340px;
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 1.2rem, var(--container));
  }

  .hero {
    background-position: 64% center;
  }

  .hero__content {
    padding-top: 3.2rem;
    padding-bottom: 3.6rem;
  }

  .brand__signature {
    gap: 0.55rem;
    font-size: 0.78rem;
  }

  .brand__signature-line {
    width: 24px;
  }

  .coming-soon {
    margin-top: 2.4rem;
  }

  .coming-soon__intro {
    max-width: 92%;
  }

  .countdown {
    gap: 0.65rem;
  }

  .countdown__item {
    min-height: 112px;
    padding-inline: 0.5rem;
  }

  .features {
    padding-top: 3.2rem;
    padding-bottom: 3.4rem;
  }

  .features__grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .feature,
  .feature:nth-child(4),
  .feature:nth-child(5) {
    max-width: 380px;
    width: 100%;
    justify-self: center;
  }

  .feature {
    padding-top: 1.15rem;
    padding-bottom: 1.25rem;
  }
}

/* =========================
   Echtgeldportfolio – Live-Laufband
   ========================= */

.portfolio-strip-section {
  width: min(980px, 100%);
  margin: clamp(3rem, 8vh, 5rem) auto 0;
}

.portfolio-ticker {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 199, 106, 0.42);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(9, 25, 41, 0.66), rgba(5, 15, 27, 0.48));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.portfolio-ticker::before,
.portfolio-ticker::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(18px, 4vw, 52px);
  pointer-events: none;
}

.portfolio-ticker::before {
  left: 0;
  background: linear-gradient(90deg, rgba(7, 20, 34, 0.92), transparent);
}

.portfolio-ticker::after {
  right: 0;
  background: linear-gradient(270deg, rgba(7, 20, 34, 0.92), transparent);
}

.portfolio-ticker__viewport {
  display: block;
  width: 100%;
  overflow: hidden;
}

.portfolio-ticker__track {
  display: flex;
  width: max-content;
  min-width: 100%;
  will-change: transform;
  animation: portfolio-ticker-scroll 30s linear infinite;
}

.portfolio-ticker:hover .portfolio-ticker__track,
.portfolio-ticker:focus-visible .portfolio-ticker__track {
  animation-play-state: paused;
}

.portfolio-ticker__set {
  flex: none;
  min-width: max-content;
  padding: 0.9rem 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: rgba(244, 247, 250, 0.86);
  font-family: var(--font-secondary);
  font-size: clamp(0.72rem, 1.05vw, 0.86rem);
  font-weight: 300;
  line-height: 1.3;
  white-space: nowrap;
}

.portfolio-ticker__set strong {
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 500;
}

.portfolio-ticker__brand,
.portfolio-ticker__dot {
  color: var(--color-gold-light);
}

.portfolio-ticker__brand {
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-ticker .is-positive { color: #68d391; }
.portfolio-ticker .is-negative { color: #ff7b72; }
.portfolio-ticker .is-neutral { color: var(--color-white); }

.portfolio-strip__status {
  margin: 0.82rem auto 0;
  color: rgba(244, 247, 250, 0.78);
  font-family: var(--font-secondary);
  font-size: clamp(0.76rem, 1.05vw, 0.9rem);
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

@keyframes portfolio-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 620px) {
  .portfolio-strip-section {
    width: 100%;
    margin-top: clamp(2.8rem, 7vh, 3.8rem);
  }

  .portfolio-ticker {
    margin-top: 0;
    border-radius: 13px;
  }

  .portfolio-ticker__track {
    animation-duration: 27s;
  }

  .portfolio-ticker__set {
    padding: 0.78rem 1.25rem;
    gap: 0.72rem;
    font-size: 0.7rem;
  }

  .portfolio-strip__status {
    max-width: 92%;
    margin-top: 0.72rem;
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-ticker__track {
    animation: none;
  }

  .portfolio-ticker__set[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 420px) {
  .brand__wordmark {
    letter-spacing: 0.035em;
  }

  .brand__claim {
    letter-spacing: 0.11em;
  }

  .coming-soon h1 {
    font-size: clamp(2.3rem, 13vw, 3.5rem);
  }

  .countdown__value {
    font-size: 2.5rem;
  }

  .countdown__label {
    font-size: 0.68rem;
  }
}

/* =========================
   Motion Preferences
   ========================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================
   Optional utility states
   ========================= */

.is-hidden {
  display: none !important;
}

.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}


/* =========================================================
   MY1STMIO v2.0 – Brand alignment to approved logo concept
   ========================================================= */

/* Top branding: quieter, thinner and more premium */
.brand__logo {
  width: clamp(86px, 6.5vw, 122px);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(212, 175, 55, 0.18));
}

.brand__logo-link {
  margin-bottom: 0.8rem;
}

.brand__wordmark {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin: 0;
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.15rem, 4vw, 4.25rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.34);
}

.brand__wordmark-main {
  color: #FFFFFF;
}

.brand__wordmark-gold {
  color: #D4AF37;
}

.brand__claim {
  margin-top: 0.95rem;
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.7rem, 1vw, 0.92rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.20em;
  color: #D4AF37;
}

.brand__signature {
  margin-top: 0.95rem;
  gap: 0.9rem;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.78rem, 0.9vw, 0.94rem);
  font-weight: 300;
  letter-spacing: 0.035em;
  color: rgba(255, 255, 255, 0.88);
}

.brand__signature-line {
  width: clamp(34px, 4vw, 64px);
  background: linear-gradient(90deg, transparent, #D4AF37);
}

.brand__signature-line:last-child {
  background: linear-gradient(90deg, #D4AF37, transparent);
}

/* Hero typography: closer to the typography board, less heavy */
.coming-soon {
  margin-top: clamp(2rem, 4vh, 3.15rem);
}

.coming-soon h1 {
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.65rem, 5vw, 5.15rem);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.34);
}

.coming-soon__eyebrow {
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.coming-soon__intro {
  max-width: 720px;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  color: rgba(244, 247, 250, 0.90);
}

/* Make the hero image and branding breathe more like the mockup */
.hero {
  background:
    linear-gradient(180deg, rgba(4, 15, 28, 0.12), rgba(4, 15, 28, 0.58)),
    url("../images/hero.jpg") center 56% / cover no-repeat;
}

.hero__content {
  padding-top: clamp(2.5rem, 5vh, 4.2rem);
  padding-bottom: clamp(3rem, 5vh, 4.2rem);
}

/* Countdown: lighter typography and cleaner card balance */
.countdown {
  width: min(720px, 100%);
  gap: clamp(0.7rem, 1.3vw, 1rem);
}

.countdown__item {
  min-height: 116px;
  padding: 0.95rem 0.8rem 0.9rem;
  border-radius: 16px;
}

.countdown__value {
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(2.15rem, 3.3vw, 3.35rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.countdown__label {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.13em;
}

/* Feature section: icons larger and typography less bold */
.features {
  padding-top: clamp(3.1rem, 5vw, 4.6rem);
}

.feature__icon {
  width: clamp(62px, 5vw, 78px);
  height: clamp(62px, 5vw, 78px);
  margin-bottom: 1.1rem;
}

.feature h3 {
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.feature p {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  font-size: 0.84rem;
  line-height: 1.65;
}

/* Footer brand should echo the new wordmark style */
.site-footer__brand {
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #D4AF37;
}

/* Desktop proportions */
@media (min-width: 1200px) {
  .brand__wordmark {
    font-size: 3.7rem;
  }

  .brand__logo {
    width: 108px;
  }

  .coming-soon h1 {
    font-size: 4.55rem;
  }

  .coming-soon__intro {
    font-size: 1.02rem;
  }

  .feature__icon {
    width: 72px;
    height: 72px;
  }
}

/* Mobile: preserve elegance rather than simply scaling desktop */
@media (max-width: 620px) {
  .brand__logo {
    width: 82px;
  }

  .brand__wordmark {
    font-size: clamp(1.9rem, 10vw, 2.7rem);
    letter-spacing: 0.09em;
  }

  .brand__claim {
    font-size: 0.66rem;
    letter-spacing: 0.13em;
  }

  .coming-soon h1 {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
    font-weight: 500;
    letter-spacing: 0.045em;
  }

  .feature__icon {
    width: 68px;
    height: 68px;
  }
}


/* =========================================================
   MY1STMIO v2.1 – Visitor Counter
   ========================================================= */

.visitor-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 30px;
  margin: 0.1rem 0 0.25rem;
  padding: 0.38rem 0.72rem;
  border: 1px solid rgba(212, 175, 55, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(244, 247, 250, 0.80);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 300;
  letter-spacing: 0.025em;
}

.visitor-counter__icon {
  width: 15px;
  height: 15px;
  color: var(--color-gold-light);
  opacity: 0.92;
}

.visitor-counter__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visitor-counter__value {
  min-width: 1.2em;
  color: var(--color-gold-light);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.visitor-counter__label {
  color: rgba(170, 183, 196, 0.82);
}

.visitor-counter.is-error {
  opacity: 0.62;
}

@media (max-width: 620px) {
  .visitor-counter {
    font-size: 0.72rem;
    padding: 0.34rem 0.66rem;
  }
}


/* =========================================================
   MY1STMIO v3.1 – Premium Hero Animation + Counter preserved
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(4, 15, 28, 0.12), rgba(4, 15, 28, 0.56)),
    url("../images/hero.jpg") center 56% / cover no-repeat;
}

.hero__content {
  position: relative;
  z-index: 20;
}

/* Keep the static overlay subtle so the moving layers are visible. */
.hero__overlay {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(4, 15, 28, 0.03), rgba(4, 15, 28, 0.18));
}

/* Slowly moving cloud veils. */
.hero__cloud {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  width: 72vw;
  height: 30vw;
  min-width: 760px;
  min-height: 300px;
  border-radius: 50%;
  filter: blur(34px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  background:
    radial-gradient(ellipse at 22% 52%, rgba(255,255,255,.52), transparent 36%),
    radial-gradient(ellipse at 50% 44%, rgba(255,255,255,.34), transparent 35%),
    radial-gradient(ellipse at 78% 58%, rgba(255,255,255,.28), transparent 40%);
}

.hero__cloud--one {
  top: -2%;
  left: -34%;
  opacity: .13;
  animation: heroCloudOne 28s ease-in-out infinite alternate;
}

.hero__cloud--two {
  top: 14%;
  right: -38%;
  opacity: .09;
  transform: scale(.88);
  animation: heroCloudTwo 38s ease-in-out infinite alternate;
}

/* Golden sun rays breathe very slowly. */
.hero__rays {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  top: -10%;
  right: -4%;
  width: 68%;
  height: 84%;
  opacity: .22;
  transform-origin: 84% 12%;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(
      from 198deg at 86% 10%,
      transparent 0deg 7deg,
      rgba(230,199,106,.16) 8deg 9deg,
      transparent 10deg 17deg
    );
  filter: blur(.6px);
  animation: heroRays 11s ease-in-out infinite alternate;
}

/* Water reflection: visible but calm. */
.hero__water-shimmer {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  left: -10%;
  bottom: 0;
  width: 120%;
  height: 34%;
  overflow: hidden;
  opacity: .30;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.75) 28%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.75) 28%, #000 100%);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(212,175,55,.02) 24%,
      rgba(230,199,106,.11) 47%,
      rgba(255,225,145,.20) 52%,
      rgba(212,175,55,.06) 62%,
      transparent 100%
    );
  animation: waterGlow 7s ease-in-out infinite alternate;
}

.hero__water-shimmer::before,
.hero__water-shimmer::after {
  content: "";
  position: absolute;
  width: 150%;
  left: -25%;
  height: 2px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 30px,
      rgba(230,199,106,.34) 32px 36px,
      transparent 38px 70px
    );
  box-shadow:
    0 18px 8px rgba(230,199,106,.09),
    0 42px 12px rgba(230,199,106,.07),
    0 72px 18px rgba(230,199,106,.05);
  filter: blur(1px);
  will-change: transform;
}

.hero__water-shimmer::before {
  top: 28%;
  animation: waterLineOne 9s ease-in-out infinite alternate;
}

.hero__water-shimmer::after {
  top: 50%;
  opacity: .65;
  animation: waterLineTwo 13s ease-in-out infinite alternate;
}

@keyframes heroCloudOne {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity:.10; }
  100% { transform: translate3d(34vw, 2vh, 0) scale(1.06); opacity:.16; }
}

@keyframes heroCloudTwo {
  0%   { transform: translate3d(0, 0, 0) scale(.88); opacity:.07; }
  100% { transform: translate3d(-30vw, -2vh, 0) scale(.96); opacity:.12; }
}

@keyframes heroRays {
  0%   { opacity:.14; transform: rotate(-1.4deg) scale(1); }
  100% { opacity:.27; transform: rotate(1.2deg) scale(1.035); }
}

@keyframes waterGlow {
  0%   { opacity:.18; filter:brightness(.95); transform:translateX(-1.5%); }
  100% { opacity:.32; filter:brightness(1.10); transform:translateX(1.5%); }
}

@keyframes waterLineOne {
  0%   { transform:translateX(-4%) scaleX(.98); }
  100% { transform:translateX(5%) scaleX(1.03); }
}

@keyframes waterLineTwo {
  0%   { transform:translateX(4%) scaleX(1.02); }
  100% { transform:translateX(-5%) scaleX(.98); }
}

/* On small screens: less GPU load, still visible. */
@media (max-width: 899px) {
  .hero__cloud--one { opacity:.09; }
  .hero__cloud--two { opacity:.06; }
  .hero__rays { opacity:.15; }
  .hero__water-shimmer { opacity:.22; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .hero__cloud,
  .hero__rays,
  .hero__water-shimmer,
  .hero__water-shimmer::before,
  .hero__water-shimmer::after {
    animation:none !important;
  }
}


/* =========================================================
   MY1STMIO v3.2 – Animation visibility tuning
   ========================================================= */

.hero__cloud {
  width: 88vw;
  height: 34vw;
  min-width: 980px;
  min-height: 360px;
  filter: blur(24px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 15% 48%, rgba(255,255,255,.72), transparent 32%),
    radial-gradient(ellipse at 35% 52%, rgba(235,242,250,.58), transparent 30%),
    radial-gradient(ellipse at 58% 46%, rgba(255,255,255,.48), transparent 32%),
    radial-gradient(ellipse at 80% 54%, rgba(225,235,245,.38), transparent 36%);
}

.hero__cloud--one {
  top: -3%;
  left: -44%;
  opacity: .22;
  animation: heroCloudOneV32 34s ease-in-out infinite alternate;
}

.hero__cloud--two {
  top: 10%;
  right: -47%;
  opacity: .14;
  transform: scale(.92);
  animation: heroCloudTwoV32 46s ease-in-out infinite alternate;
}

.hero__overlay::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 5%;
  left: -20%;
  width: 65%;
  height: 24%;
  border-radius: 50%;
  opacity: .11;
  filter: blur(30px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 25% 55%, rgba(255,255,255,.52), transparent 38%),
    radial-gradient(ellipse at 65% 45%, rgba(255,255,255,.34), transparent 42%);
  animation: heroCloudThirdV32 58s ease-in-out infinite alternate;
}

.hero__rays {
  opacity: .31;
  width: 74%;
  height: 90%;
  filter: blur(.3px);
  background:
    repeating-conic-gradient(
      from 199deg at 88% 8%,
      transparent 0deg 6deg,
      rgba(255,225,145,.22) 7deg 8deg,
      transparent 9deg 15deg
    );
  animation: heroRaysV32 13s ease-in-out infinite alternate;
}

.hero__water-shimmer {
  height: 38%;
  opacity: .46;
  background:
    radial-gradient(ellipse at 53% 18%, rgba(255,229,150,.26), transparent 19%),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(212,175,55,.025) 18%,
      rgba(230,199,106,.11) 38%,
      rgba(255,231,163,.32) 50%,
      rgba(230,199,106,.14) 64%,
      rgba(212,175,55,.05) 78%,
      transparent 100%
    );
  animation: waterGlowV32 8s ease-in-out infinite alternate;
}

.hero__water-shimmer::before {
  top: 8%;
  left: 12%;
  width: 78%;
  height: 88%;
  opacity: .72;
  filter: blur(3px);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 20px,
      rgba(255,230,155,.06) 22px 25px,
      rgba(255,225,140,.18) 26px 28px,
      transparent 30px 52px
    );
  box-shadow:
    0 18px 10px rgba(230,199,106,.08),
    0 42px 18px rgba(230,199,106,.07);
  animation: waterVerticalV32 10s ease-in-out infinite alternate;
}

.hero__water-shimmer::after {
  top: 24%;
  left: -12%;
  width: 124%;
  height: 58%;
  opacity: .56;
  filter: blur(1.2px);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 13px,
      rgba(255,230,155,.15) 14px 15px,
      transparent 16px 28px
    );
  animation: waterHorizontalV32 12s ease-in-out infinite alternate;
}

@keyframes heroCloudOneV32 {
  0%   { transform: translate3d(0, 0, 0) scale(1.00); opacity:.16; }
  100% { transform: translate3d(42vw, 2.5vh, 0) scale(1.08); opacity:.25; }
}

@keyframes heroCloudTwoV32 {
  0%   { transform: translate3d(0, 0, 0) scale(.92); opacity:.10; }
  100% { transform: translate3d(-38vw, -2vh, 0) scale(1.00); opacity:.17; }
}

@keyframes heroCloudThirdV32 {
  0%   { transform: translateX(0) translateY(0) scale(1); }
  100% { transform: translateX(30vw) translateY(1.5vh) scale(1.06); }
}

@keyframes heroRaysV32 {
  0%   { opacity:.20; transform: rotate(-1deg) scale(1.00); }
  100% { opacity:.34; transform: rotate(1.1deg) scale(1.045); }
}

@keyframes waterGlowV32 {
  0%   { opacity:.33; filter:brightness(.96); transform:translateX(-1.2%); }
  100% { opacity:.52; filter:brightness(1.10); transform:translateX(1.2%); }
}

@keyframes waterVerticalV32 {
  0%   { transform:translateX(-2%) scaleY(.96); }
  100% { transform:translateX(2.5%) scaleY(1.04); }
}

@keyframes waterHorizontalV32 {
  0%   { transform:translateX(-2.2%) translateY(0); }
  100% { transform:translateX(2.2%) translateY(2px); }
}

@media (max-width: 899px) {
  .hero__cloud--one { opacity:.15; }
  .hero__cloud--two { opacity:.09; }
  .hero__overlay::before { opacity:.07; }
  .hero__rays { opacity:.22; }
  .hero__water-shimmer { opacity:.34; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__overlay::before,
  .hero__cloud,
  .hero__rays,
  .hero__water-shimmer,
  .hero__water-shimmer::before,
  .hero__water-shimmer::after {
    animation:none !important;
  }
}


/* =========================================================
   MY1STMIO v3.3 – ONLY animated sun rays
   Sun origin aligned to the visible sun in hero.jpg.
   Visitor counter remains unchanged.
   ========================================================= */

.hero {
  --sun-x: 91.0%;
  --sun-y: 64.0%;
}

/* Disable all previous cloud / water animation layers. */
.hero__cloud,
.hero__water-glow,
.hero__water-shimmer,
.hero__water-glow::before,
.hero__water-glow::after,
.hero__water-shimmer::before,
.hero__water-shimmer::after,
.hero__overlay::before {
  display: none !important;
  animation: none !important;
}

/* Only this layer is animated. The origin is the actual sun in the image. */
.hero__rays {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .24;
  transform: none;
  transform-origin: var(--sun-x) var(--sun-y);
  filter: blur(.25px);
  mix-blend-mode: screen;

  /* Rays radiate exactly from the visible sun point. */
  background:
    repeating-conic-gradient(
      from 0deg at var(--sun-x) var(--sun-y),
      transparent 0deg 5.4deg,
      rgba(255, 224, 145, .20) 5.8deg 6.55deg,
      transparent 6.9deg 12.2deg
    );

  /* Keep the rays mainly above and around the horizon, not across the UI. */
  -webkit-mask-image:
    radial-gradient(circle at var(--sun-x) var(--sun-y),
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.90) 16%,
      rgba(0,0,0,.64) 39%,
      rgba(0,0,0,.20) 69%,
      transparent 100%);
  mask-image:
    radial-gradient(circle at var(--sun-x) var(--sun-y),
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.90) 16%,
      rgba(0,0,0,.64) 39%,
      rgba(0,0,0,.20) 69%,
      transparent 100%);

  animation: my1stmioSunRaysV33 10s ease-in-out infinite alternate;
}

@keyframes my1stmioSunRaysV33 {
  0% {
    opacity: .15;
    filter: blur(.35px) brightness(.96);
    transform: scale(1.00) rotate(-0.20deg);
  }
  55% {
    opacity: .25;
    filter: blur(.20px) brightness(1.04);
  }
  100% {
    opacity: .31;
    filter: blur(.12px) brightness(1.10);
    transform: scale(1.018) rotate(.25deg);
  }
}

/* Countdown icons: one clear step larger, but still restrained. */
.countdown__icon {
  margin-bottom: .36rem;
  font-size: 1.34rem;
  line-height: 1;
  color: var(--color-gold-light);
  opacity: .98;
  filter: drop-shadow(0 0 6px rgba(212,175,55,.18));
}

@media (min-width: 1200px) {
  .countdown__icon {
    font-size: 1.46rem;
  }
}

@media (max-width: 620px) {
  .countdown__icon {
    font-size: 1.22rem;
  }
}

/* Accessibility remains respected. */
@media (prefers-reduced-motion: reduce) {
  .hero__rays {
    animation: none !important;
    opacity: .20;
    transform: none !important;
  }
}


/* =========================================================
   MY1STMIO v3.4 – Device-independent sun-ray origin
   sun-rays.js calculates the real sun position after
   background-size: cover cropping on every viewport.
   ========================================================= */

.hero {
  /* JS updates these values at runtime. */
  --hero-bg-x: 50%;
  --hero-bg-y: 56%;
  --sun-x-px: 90%;
  --sun-y-px: 64%;

  background:
    linear-gradient(180deg, rgba(4, 15, 28, 0.12), rgba(4, 15, 28, 0.56)),
    url("../images/hero.jpg") var(--hero-bg-x) var(--hero-bg-y) / cover no-repeat;
}

/* Exactly one animation remains: the rays. */
.hero__cloud,
.hero__water-glow,
.hero__water-shimmer,
.hero__overlay::before {
  display: none !important;
}

/*
  The gradient's center and the transform origin use PIXEL coordinates
  calculated from the actual rendered image. This is the important
  difference from the former fixed percentage solution.
*/
.hero__rays {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  pointer-events: none;

  transform-origin: var(--sun-x-px) var(--sun-y-px) !important;

  background:
    repeating-conic-gradient(
      from 0deg at var(--sun-x-px) var(--sun-y-px),
      transparent 0deg 5.4deg,
      rgba(255, 224, 145, .20) 5.8deg 6.55deg,
      transparent 6.9deg 12.2deg
    ) !important;

  -webkit-mask-image:
    radial-gradient(
      circle at var(--sun-x-px) var(--sun-y-px),
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.92) 17%,
      rgba(0,0,0,.66) 40%,
      rgba(0,0,0,.22) 70%,
      transparent 100%
    ) !important;

  mask-image:
    radial-gradient(
      circle at var(--sun-x-px) var(--sun-y-px),
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.92) 17%,
      rgba(0,0,0,.66) 40%,
      rgba(0,0,0,.22) 70%,
      transparent 100%
    ) !important;

  opacity: .24;
  filter: blur(.25px);
  mix-blend-mode: screen;
  animation: my1stmioSunRaysV34 10s ease-in-out infinite alternate !important;
}

@keyframes my1stmioSunRaysV34 {
  0% {
    opacity: .14;
    filter: blur(.35px) brightness(.96);
    transform: scale(1.000) rotate(-.18deg);
  }
  55% {
    opacity: .24;
    filter: blur(.20px) brightness(1.04);
  }
  100% {
    opacity: .31;
    filter: blur(.12px) brightness(1.10);
    transform: scale(1.016) rotate(.22deg);
  }
}

/* Countdown symbols remain the enlarged v3.3 size. */
.countdown__icon {
  font-size: 1.34rem;
}

@media (min-width: 1200px) {
  .countdown__icon {
    font-size: 1.46rem;
  }
}

@media (max-width: 620px) {
  .countdown__icon {
    font-size: 1.22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__rays {
    animation: none !important;
    opacity: .20;
    transform: none !important;
  }
}


/* =========================================================
   MY1STMIO v3.5 – Natural Rays
   Softer, shorter, more natural light rays.
   ========================================================= */

/* Hide technical countdown fallback when JS is active. */
html.js .countdown__fallback {
  display: none !important;
}

/*
  Rebuild the ray layer as a small number of soft cones.
  Origin remains controlled dynamically by sun-rays.js.
*/
.hero__rays {
  opacity: .16 !important;
  filter: blur(5px) brightness(1.02) !important;
  mix-blend-mode: screen !important;

  background:
    conic-gradient(
      from -8deg at var(--sun-x-px) var(--sun-y-px),
      transparent 0deg 12deg,
      rgba(255, 232, 170, .13) 14deg 18deg,
      transparent 20deg 34deg,
      rgba(255, 226, 150, .10) 36deg 40deg,
      transparent 42deg 58deg,
      rgba(255, 236, 185, .12) 60deg 65deg,
      transparent 67deg 84deg,
      rgba(255, 220, 140, .09) 86deg 90deg,
      transparent 92deg 112deg,
      rgba(255, 234, 175, .11) 114deg 119deg,
      transparent 121deg 144deg,
      rgba(255, 224, 148, .09) 146deg 151deg,
      transparent 153deg 180deg,
      rgba(255, 236, 185, .10) 182deg 187deg,
      transparent 189deg 215deg,
      rgba(255, 226, 155, .08) 217deg 222deg,
      transparent 224deg 360deg
    ) !important;

  /* Rays are confined to the area around the real sun. */
  -webkit-mask-image:
    radial-gradient(
      ellipse 52% 44% at var(--sun-x-px) var(--sun-y-px),
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.90) 17%,
      rgba(0,0,0,.62) 36%,
      rgba(0,0,0,.22) 58%,
      transparent 76%
    ) !important;

  mask-image:
    radial-gradient(
      ellipse 52% 44% at var(--sun-x-px) var(--sun-y-px),
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.90) 17%,
      rgba(0,0,0,.62) 36%,
      rgba(0,0,0,.22) 58%,
      transparent 76%
    ) !important;

  animation: my1stmioNaturalRaysV35 8.5s ease-in-out infinite alternate !important;
}

@keyframes my1stmioNaturalRaysV35 {
  0% {
    opacity: .10;
    filter: blur(6px) brightness(.98);
    transform: scale(1.000);
  }
  50% {
    opacity: .15;
    filter: blur(5px) brightness(1.03);
    transform: scale(1.006);
  }
  100% {
    opacity: .19;
    filter: blur(4px) brightness(1.07);
    transform: scale(1.012);
  }
}

/* Keep the sun itself subtly alive without moving it. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: var(--sun-x-px);
  top: var(--sun-y-px);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      circle,
      rgba(255,245,205,.26) 0%,
      rgba(255,226,145,.12) 28%,
      rgba(255,220,130,.04) 48%,
      transparent 72%
    );
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: my1stmioSunBreathV35 6.8s ease-in-out infinite alternate;
}

@keyframes my1stmioSunBreathV35 {
  0% {
    opacity: .22;
    transform: translate(-50%, -50%) scale(.92);
  }
  100% {
    opacity: .40;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 899px) {
  .hero__rays {
    opacity: .13 !important;
    filter: blur(6px) brightness(1.01) !important;
  }

  .hero::after {
    width: 66px;
    height: 66px;
    opacity: .28;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__rays,
  .hero::after {
    animation: none !important;
  }
}


/* =========================================================
   MY1STMIO v3.6 – Feature Preview / "In Vorbereitung"
   ========================================================= */

.features--preview .features__grid {
  gap: 1rem;
}

.feature--preview {
  position: relative;
  min-height: 255px;
  padding: 1.55rem 1rem 1.35rem;
  border: 1px solid rgba(212, 175, 55, 0.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 14px 34px rgba(0,0,0,.10);
  cursor: default;
  user-select: none;
}

.feature--preview::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(212,175,55,.055), transparent 38%);
  opacity: .8;
}

.feature--preview:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 38px rgba(0,0,0,.14);
}

.feature--preview:hover .feature__icon {
  transform: none;
  filter: drop-shadow(0 5px 14px rgba(212,175,55,.20));
}

.feature--preview .feature__icon,
.feature--preview h3,
.feature--preview p,
.feature--preview .feature__status {
  position: relative;
  z-index: 1;
}

.feature__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  margin-top: 1rem;
  padding: .38rem .68rem;
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 999px;
  background: rgba(212,175,55,.055);
  color: var(--color-gold-light);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.feature__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px rgba(230,199,106,.34);
  opacity: .9;
}

@media (max-width: 1100px) {
  .feature--preview {
    min-height: 245px;
  }
}

@media (max-width: 620px) {
  .feature--preview {
    min-height: auto;
    padding: 1.35rem 1rem 1.25rem;
  }

  .feature__status {
    margin-top: .85rem;
  }
}


/* =========================================================
   MY1STMIO v3.8 – Finale Brand Story / Erste Million
   ========================================================= */

.coming-soon__quote {
  width: min(700px, 94%);
  margin: 0 auto 1.05rem;
  padding: 0;
  border: 0;
  color: rgba(244, 247, 250, 0.72);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.75rem, 1.05vw, 0.9rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
}

.coming-soon__quote p {
  margin: 0;
}

.coming-soon__quote cite {
  display: block;
  margin-top: 0.2rem;
  color: rgba(230, 199, 106, 0.78);
  font-size: 0.78em;
  font-style: normal;
  letter-spacing: 0.05em;
}

.coming-soon__eyebrow {
  margin-top: 0.2rem;
  font-size: clamp(1.08rem, 1.8vw, 1.4rem);
  font-weight: 500;
}

.coming-soon__intro--promise {
  width: min(820px, 100%);
  margin-top: 0.8rem;
  font-size: clamp(0.98rem, 1.55vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.94);
}

.coming-soon__principle {
  margin: 0.85rem auto 0;
  color: var(--color-gold-light);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.76rem, 1.15vw, 0.93rem);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.coming-soon__practice {
  margin: 0.42rem auto 0;
  color: rgba(244, 247, 250, 0.72);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.76rem, 1vw, 0.88rem);
  font-weight: 300;
}

.countdown-section {
  margin-top: clamp(1.55rem, 3.6vh, 2.6rem);
}

.million-path {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.8rem, 6vw, 5.4rem);
  padding-bottom: clamp(3.8rem, 6vw, 5.4rem);
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.10), transparent 30%),
    linear-gradient(180deg, #081B2F 0%, #091A2B 54%, #081725 100%);
}

.million-path::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(980px, 88vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(230, 199, 106, .72), transparent);
}

.million-path__inner {
  text-align: center;
}

.million-path__eyebrow {
  margin: 0 0 0.55rem;
  color: var(--color-gold-light);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.million-path h2 {
  margin: 0;
  color: var(--color-white);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.million-path__intro {
  width: min(760px, 100%);
  margin: 0.9rem auto 0;
  color: rgba(170, 183, 196, 0.92);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
}

.million-path__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1.2fr;
  align-items: stretch;
  gap: 0.7rem;
  width: min(1120px, 100%);
  margin: clamp(2rem, 4vw, 3.1rem) auto 0;
}

.million-path__step {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 1.15rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 36px rgba(0,0,0,.14);
}

.million-path__step--accent {
  border-color: rgba(212, 175, 55, 0.25);
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
}

.million-path__step--goal {
  border-color: rgba(230, 199, 106, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.15), transparent 58%),
    linear-gradient(180deg, rgba(212,175,55,.07), rgba(255,255,255,.018));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 28px rgba(212,175,55,.06),
    0 18px 42px rgba(0,0,0,.15);
}

.million-path__value {
  color: var(--color-white);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.million-path__step--accent .million-path__value,
.million-path__step--goal .million-path__value {
  color: var(--color-gold-light);
}

.million-path__label {
  margin-top: 0.48rem;
  color: rgba(170, 183, 196, 0.82);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.million-path__arrow {
  align-self: center;
  color: rgba(230, 199, 106, 0.58);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: 1.2rem;
}

.million-path__emotion {
  width: min(760px, 100%);
  margin: 1.45rem auto 0;
  color: rgba(255,255,255,.92);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.5;
}

.million-path__benchmark {
  width: min(940px, 100%);
  margin: 1.3rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  color: rgba(170, 183, 196, 0.82);
  font-size: 0.76rem;
  line-height: 1.65;
}

.million-path__benchmark p {
  margin: 0;
}

.million-path__benchmark strong {
  color: rgba(230, 199, 106, 0.92);
  font-weight: 500;
}

.million-path__disclaimer {
  margin-top: 0.65rem !important;
  color: rgba(170, 183, 196, 0.62);
  font-size: 0.92em;
}

.million-path + .features {
  padding-top: clamp(3.5rem, 5vw, 4.6rem);
}

@media (max-width: 980px) {
  .million-path__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .million-path__arrow {
    display: none;
  }

  .million-path__step {
    min-height: 118px;
  }

  .million-path__value {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .coming-soon__quote {
    margin-bottom: 0.85rem;
  }

  .coming-soon__intro--promise {
    max-width: 94%;
  }

  .coming-soon__principle {
    max-width: 92%;
    line-height: 1.65;
  }

  .million-path__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
  }

  .million-path__step--goal {
    grid-column: 1 / -1;
    width: min(100%, 280px);
    justify-self: center;
  }
}

@media (max-width: 430px) {
  .coming-soon__quote {
    width: 96%;
    font-size: 0.72rem;
  }

  .coming-soon__eyebrow {
    font-size: 1.02rem;
    line-height: 1.35;
  }

  .coming-soon__intro--promise {
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .coming-soon__principle {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }

  .coming-soon__practice {
    font-size: 0.72rem;
  }

  .million-path {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }

  .million-path__steps {
    gap: 0.6rem;
  }

  .million-path__step {
    min-height: 108px;
    padding: 0.9rem 0.55rem;
  }

  .million-path__value {
    font-size: 1.13rem;
  }

  .million-path__benchmark {
    font-size: 0.71rem;
  }
}


/* Historische MSCI-World-Rendite im Benchmark-Hinweis */
.million-path__historical-return {
  color: var(--color-gold-light);
  font-weight: 600;
  white-space: nowrap;
}


/* =========================================================
   MY1STMIO v4.0 – Legal note repositioned + clarified
   ========================================================= */

.legal-note--footer {
  position: relative;
  padding-top: 1.65rem;
  padding-bottom: 1.8rem;
  border-top: 1px solid rgba(212, 175, 55, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  background:
    linear-gradient(180deg, rgba(6, 17, 28, 0.96), rgba(6, 19, 32, 0.99));
}

.legal-note--footer .legal-note__inner {
  max-width: 1080px;
}

.legal-note--footer p {
  max-width: 980px;
  margin: 0.22rem auto;
  color: rgba(170, 183, 196, 0.70);
  font-size: 0.75rem;
  line-height: 1.62;
}

.legal-note--footer p + p {
  margin-top: 0.48rem;
  color: rgba(170, 183, 196, 0.60);
}

@media (max-width: 620px) {
  .legal-note--footer {
    padding-top: 1.35rem;
    padding-bottom: 1.45rem;
  }

  .legal-note--footer p {
    font-size: 0.70rem;
    line-height: 1.58;
  }
}


/* =========================================================
   MY1STMIO v4.1 – Gold line below wordmark
   Aligned to approved logo concept
   ========================================================= */

.brand__wordmark {
  position: relative;
  padding-bottom: 0.72rem;
}

/* Fine gold separator line with a restrained central light flare. */
.brand__wordmark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      90deg,
      rgba(212,175,55,0.18) 0%,
      rgba(212,175,55,0.72) 22%,
      rgba(230,199,106,0.96) 48%,
      rgba(255,236,178,1) 50%,
      rgba(230,199,106,0.96) 52%,
      rgba(212,175,55,0.72) 78%,
      rgba(212,175,55,0.18) 100%
    );
  box-shadow:
    0 0 6px rgba(212,175,55,0.26),
    0 0 14px rgba(230,199,106,0.12);
}

/* Small center glow like the approved logo concept. */
.brand__wordmark::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 34px;
  height: 7px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,244,204,0.82) 0%,
      rgba(230,199,106,0.30) 38%,
      transparent 72%
    );
  filter: blur(1.2px);
  opacity: 0.85;
}

.brand__claim {
  margin-top: 0.72rem;
}

@media (max-width: 620px) {
  .brand__wordmark {
    padding-bottom: 0.62rem;
  }

  .brand__wordmark::before {
    width: 26px;
    height: 6px;
  }

  .brand__claim {
    margin-top: 0.64rem;
  }
}


/* =========================================================
   MY1STMIO v4.3 – Hero text cleanup
   - "by Dieter Kastner" removed
   - Laotse styled like the quote text
   ========================================================= */

.coming-soon__quote cite {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: italic;
  letter-spacing: inherit;
}

/* Keep spacing balanced after removing the signature block. */
.coming-soon {
  margin-top: clamp(2.2rem, 4.6vh, 3.45rem);
}

@media (max-width: 620px) {
  .coming-soon {
    margin-top: 2.25rem;
  }
}

/* =========================================================
   MY1STMIO v4.4 – Risikohinweis / Legal Content Page
   ========================================================= */
.legal-page{min-height:100vh;color:#172538;background:#f7f8fa}
.legal-brand-header{position:relative;overflow:hidden;border-bottom:2px solid var(--color-gold);background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.07),transparent 34%),linear-gradient(180deg,#10283b 0%,#081b2f 100%)}
.legal-brand-header__inner{width:min(100% - 2rem,var(--container));min-height:300px;margin-inline:auto;display:grid;place-items:center;padding:2.8rem 1rem 2.6rem;text-align:center}
.legal-brand-header__home{display:inline-flex;flex-direction:column;align-items:center;color:inherit}
.legal-brand-header__logo{width:clamp(78px,7vw,108px);height:auto;margin-bottom:.85rem;filter:drop-shadow(0 7px 18px rgba(212,175,55,.18))}
.legal-brand-header__wordmark{position:relative;display:inline-flex;align-items:baseline;justify-content:center;margin:0;padding-bottom:.72rem;font-family:"Montserrat","Avenir Next","Segoe UI",Arial,sans-serif;font-size:clamp(2.35rem,5.2vw,4.7rem);line-height:1;font-weight:400;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 3px 16px rgba(0,0,0,.30)}
.legal-brand-header__wordmark::after{content:"";position:absolute;left:50%;bottom:0;width:100%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(212,175,55,.18) 0%,rgba(212,175,55,.72) 22%,rgba(230,199,106,.96) 48%,rgba(255,236,178,1) 50%,rgba(230,199,106,.96) 52%,rgba(212,175,55,.72) 78%,rgba(212,175,55,.18) 100%);box-shadow:0 0 6px rgba(212,175,55,.26),0 0 14px rgba(230,199,106,.12)}
.legal-brand-header__wordmark::before{content:"";position:absolute;left:50%;bottom:-3px;width:34px;height:7px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,244,204,.82) 0%,rgba(230,199,106,.30) 38%,transparent 72%);filter:blur(1.2px);opacity:.85}
.legal-brand-header__white{color:#fff}.legal-brand-header__gold{color:var(--color-gold)}
.legal-brand-header__claim{margin:.72rem 0 0;color:var(--color-gold);font-family:"Montserrat","Avenir Next","Segoe UI",Arial,sans-serif;font-size:clamp(.70rem,1.05vw,.92rem);line-height:1.35;font-weight:500;letter-spacing:.20em;text-transform:uppercase}
.legal-content-page{background:radial-gradient(circle at 82% 10%,rgba(212,175,55,.035),transparent 24%),#f7f8fa}
.legal-content-page__inner{width:min(100% - 2rem,980px);margin-inline:auto;padding:clamp(3.4rem,6vw,5rem) 0 clamp(4rem,7vw,6rem)}
.legal-content-page__title{text-align:center;margin-bottom:2.6rem}
.legal-content-page__eyebrow{margin:0 0 .55rem;color:#9a7418;font-family:var(--font-primary);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.legal-content-page h1{margin:0;color:#0a1b30;font-family:var(--font-primary);font-size:clamp(2.1rem,5vw,3.45rem);line-height:1.14;font-weight:500;letter-spacing:.015em}
.legal-content-page__accent{display:block;width:130px;height:2px;margin:1rem auto .9rem;background:linear-gradient(90deg,transparent,var(--color-gold),transparent)}
.legal-content-page__stand{margin:0;color:#6f7f90;font-size:.82rem}
.legal-content-page__intro{margin-bottom:2.3rem;padding:1.2rem 1.35rem;border-left:3px solid var(--color-gold);border-radius:0 12px 12px 0;background:#fff;box-shadow:0 8px 28px rgba(8,27,47,.055);color:#1d2a3b;font-size:1rem;line-height:1.76}
.legal-content-page__section{padding:1.65rem 0;border-bottom:1px solid rgba(8,27,47,.10)}
.legal-content-page__section h2{margin:0 0 .72rem;color:#0a1b30;font-family:var(--font-primary);font-size:clamp(1.08rem,2.2vw,1.38rem);line-height:1.35;font-weight:600}
.legal-content-page__section p{margin:.5rem 0 0;color:#273446;font-size:.96rem;line-height:1.78}
.legal-content-page__summary{margin-top:2.25rem;padding:1.35rem 1.45rem;border:1px solid rgba(212,175,55,.30);border-radius:12px;background:linear-gradient(180deg,#fff,#fbfaf6);box-shadow:0 10px 32px rgba(8,27,47,.06)}
.legal-content-page__summary p{margin:0;color:#172538;font-size:.96rem;line-height:1.76}.legal-content-page__summary strong{color:#9a7418}
.legal-page .site-footer{border-top:0}.legal-page .site-footer__nav a[aria-current="page"]{color:var(--color-white)}
@media(max-width:620px){
  .legal-brand-header__inner{min-height:235px;padding-top:2.2rem;padding-bottom:2rem}
  .legal-brand-header__logo{width:76px;margin-bottom:.72rem}
  .legal-brand-header__wordmark{font-size:clamp(2rem,10.5vw,2.9rem);letter-spacing:.09em;padding-bottom:.62rem}
  .legal-brand-header__wordmark::before{width:26px;height:6px}
  .legal-brand-header__claim{margin-top:.64rem;max-width:95%;font-size:.63rem;line-height:1.55;letter-spacing:.13em}
  .legal-content-page__inner{width:min(100% - 1.2rem,980px);padding-top:2.75rem;padding-bottom:4rem}
  .legal-content-page__title{margin-bottom:2.1rem}
  .legal-content-page__intro{padding:1.05rem 1rem}
  .legal-content-page__section{padding:1.4rem 0}
  .legal-content-page__section p,.legal-content-page__intro,.legal-content-page__summary p{font-size:.91rem}
  .site-footer__nav{flex-wrap:wrap;justify-content:center}
}


/* =========================================================
   MY1STMIO v5.0 – Main navigation + six navigation cards
   ========================================================= */

.main-nav {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(212,175,55,.78);
  background: rgba(5,17,30,.97);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
}

.main-nav__inner {
  width: min(100% - 2rem, 1500px);
  min-height: 58px;
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: clamp(.3rem, 1.4vw, 1.35rem);
}

.main-nav__link,
.main-nav__login {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .25rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.88);
  font-family: var(--font-primary);
  font-size: clamp(.67rem, .82vw, .84rem);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav__link { transition: color var(--transition-fast); }

.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__link--active { color: var(--color-gold-light); }

.main-nav__link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--color-gold);
  box-shadow: 0 0 10px rgba(212,175,55,.36);
}

.main-nav__group {
  position: relative;
  display: flex;
}

.main-nav__chevron {
  margin-left: .35rem;
  color: var(--color-gold);
  font-size: .9em;
}

.main-nav__dropdown {
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  width: 255px;
  padding: .45rem;
  border: 1px solid rgba(212,175,55,.22);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(5,19,32,.985);
  box-shadow: 0 18px 38px rgba(0,0,0,.32);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.main-nav__dropdown a {
  display: block;
  padding: .72rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(244,247,250,.88);
  font-size: .78rem;
  line-height: 1.35;
}

.main-nav__dropdown a:last-child { border-bottom: 0; }

.main-nav__dropdown a:hover,
.main-nav__dropdown a:focus-visible {
  color: var(--color-gold-light);
  background: rgba(212,175,55,.055);
}

.main-nav__group:hover .main-nav__dropdown,
.main-nav__group:focus-within .main-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.main-nav__login {
  margin-left: auto;
  min-width: 86px;
  gap: .35rem;
  border-left: 1px solid rgba(255,255,255,.06);
  color: rgba(170,183,196,.42);
  cursor: not-allowed;
}

.main-nav__login-icon { color: rgba(212,175,55,.40); }

.features--navigation {
  padding-top: clamp(3.4rem, 5vw, 4.6rem);
  padding-bottom: clamp(3.8rem, 5vw, 5rem);
}

.features__heading {
  max-width: 820px;
  margin: 0 auto 2rem;
  text-align: center;
}

.features__eyebrow {
  margin: 0 0 .45rem;
  color: var(--color-gold-light);
  font-family: var(--font-primary);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.features__heading h2 {
  margin: 0;
  color: rgba(244,247,250,.88);
  font-family: var(--font-secondary);
  font-size: clamp(.94rem, 1.5vw, 1.08rem);
  font-weight: 300;
  line-height: 1.55;
}

.features__grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.feature--nav {
  min-height: 250px;
  padding: 1.5rem 1rem 1.25rem;
  border: 1px solid rgba(212,175,55,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 16px 35px rgba(0,0,0,.11);
}

.feature--nav:hover {
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
}

.feature--nav h3 {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.feature--nav p {
  max-width: 260px;
  min-height: 4.1em;
}

.feature__availability {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: .9rem;
  padding: .32rem .62rem;
  border: 1px solid rgba(212,175,55,.34);
  border-radius: 6px;
  color: var(--color-gold-light);
  font-family: var(--font-primary);
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
}

.feature__availability--free { background: rgba(39,174,96,.04); }
.feature__availability--member,
.feature__availability--partial { background: rgba(212,175,55,.045); }
.feature__availability--service {
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.07);
}

.feature--has-menu { overflow: visible; }

.feature__submenu {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(100% - .25rem);
  width: calc(100% - 1rem);
  min-width: 280px;
  padding: .45rem;
  border: 1px solid rgba(212,175,55,.30);
  border-radius: 12px;
  background: rgba(5,19,32,.985);
  box-shadow: 0 20px 46px rgba(0,0,0,.36);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.feature--has-menu:hover .feature__submenu,
.feature--has-menu:focus-within .feature__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.feature__submenu a {
  display: block;
  padding: .68rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.065);
  text-align: left;
}

.feature__submenu a:last-child { border-bottom: 0; }

.feature__submenu a:hover,
.feature__submenu a:focus-visible {
  background: rgba(212,175,55,.055);
}

.feature__submenu strong,
.feature__submenu span { display: block; }

.feature__submenu strong {
  color: var(--color-soft-white);
  font-size: .77rem;
  font-weight: 500;
}

.feature__submenu span {
  margin-top: .08rem;
  color: rgba(170,183,196,.78);
  font-size: .67rem;
  line-height: 1.35;
}

.site-footer__company { text-align: center; }
.site-footer__company p {
  margin: .12rem 0 0;
  color: rgba(170,183,196,.70);
  font-size: .72rem;
}

@media (max-width: 1220px) {
  .main-nav__inner {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .main-nav__inner::-webkit-scrollbar { display: none; }
  .main-nav__link,
  .main-nav__login {
    min-height: 54px;
    flex: 0 0 auto;
  }
  .main-nav__login { margin-left: .25rem; }
}

@media (max-width: 900px) {
  .features__grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature--nav { min-height: 235px; }
}

@media (max-width: 620px) {
  .main-nav { overflow: hidden; }
  .main-nav__inner {
    min-height: 48px;
    gap: 1rem;
    padding-inline: .1rem;
  }
  .main-nav__link,
  .main-nav__login {
    min-height: 48px;
    font-size: .66rem;
  }

  .features__grid--six {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .feature--nav {
    min-height: auto;
  }

  .feature--nav p { min-height: 0; }

  .feature__submenu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 1rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
  }

  .feature--has-menu:focus-within .feature__submenu {
    display: block;
  }
}


/* =========================================================
   MY1STMIO v5.1 – Menu availability state
   Only HOME and FAKTEN & ERGEBNISSE are active.
   The Fakten & Ergebnisse card has no hover submenu.
   ========================================================= */

.main-nav__link--disabled {
  color: rgba(170, 183, 196, 0.36) !important;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.main-nav__link--enabled {
  color: rgba(255, 255, 255, 0.94);
}

.main-nav__link--enabled:hover,
.main-nav__link--enabled:focus-visible {
  color: var(--color-gold-light);
}

/* Facts & Results should look available, but HOME remains the current page. */
.main-nav__group > .main-nav__link--enabled {
  font-weight: 500;
}

/* Old card-hover submenu is intentionally disabled/removed in v5.1. */
.feature__submenu {
  display: none !important;
}


/* =========================================================
   MY1STMIO v5.2 – Mobile collapsible navigation
   ========================================================= */

.mobile-nav {
  display: none;
}

/* Mobile/iPhone: replace horizontal scroll navigation with a standard collapsible menu */
@media (max-width: 760px) {
  .main-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
    position: relative;
    z-index: 120;
    margin: 0;
    border-bottom: 1px solid rgba(212,175,55,.58);
    background: rgba(5,17,30,.985);
    box-shadow: 0 8px 26px rgba(0,0,0,.18);
  }

  .mobile-nav__toggle {
    min-height: 52px;
    padding: 0 .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
    color: var(--color-gold-light);
    font-family: var(--font-primary);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  .mobile-nav__toggle::-webkit-details-marker {
    display: none;
  }

  .mobile-nav__label {
    line-height: 1;
  }

  .mobile-nav__burger {
    width: 24px;
    height: 18px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mobile-nav__burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--color-gold-light);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .mobile-nav[open] .mobile-nav__burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-nav[open] .mobile-nav__burger span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav[open] .mobile-nav__burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .mobile-nav__panel {
    padding: .25rem .8rem .8rem;
    border-top: 1px solid rgba(255,255,255,.05);
    background: rgba(5,19,32,.99);
  }

  .mobile-nav__item {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .35rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    font-family: var(--font-primary);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .mobile-nav__item--active,
  .mobile-nav__item--enabled {
    color: var(--color-gold-light);
  }

  .mobile-nav__item--disabled {
    color: rgba(170,183,196,.34);
    cursor: default;
    user-select: none;
  }

  .mobile-nav__subnav {
    margin: 0;
  }

  .mobile-nav__subnav > summary {
    list-style: none;
    cursor: pointer;
  }

  .mobile-nav__subnav > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav__arrow {
    color: var(--color-gold);
    transition: transform var(--transition-fast);
  }

  .mobile-nav__subnav[open] .mobile-nav__arrow {
    transform: rotate(180deg);
  }

  .mobile-nav__submenu {
    margin: 0 0 .2rem .55rem;
    padding: .2rem 0 .2rem .75rem;
    border-left: 1px solid rgba(212,175,55,.26);
  }

  .mobile-nav__submenu a {
    display: block;
    padding: .62rem .35rem;
    color: rgba(244,247,250,.86);
    font-size: .73rem;
    line-height: 1.35;
  }

  .mobile-nav__submenu a:hover,
  .mobile-nav__submenu a:focus-visible {
    color: var(--color-gold-light);
  }

  .mobile-nav__item--login {
    border-bottom: 0;
  }
}


/* =========================================================
   MY1STMIO v5.3 – Sticky navigation on all devices
   - Desktop/iPad navigation remains visible while scrolling
   - iPhone/mobile header shows HOME at left
   - HOME is removed from expanded mobile menu
   ========================================================= */

/* Desktop + tablet navigation stays fixed at viewport top while scrolling. */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Mobile navigation behaves the same way. */
.mobile-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* HOME at the left should visually read like the current-page item. */
@media (max-width: 760px) {
  .mobile-nav__label {
    color: var(--color-gold-light);
    font-weight: 500;
  }

  .mobile-nav__toggle {
    background: rgba(5,17,30,.985);
  }

  /* Preserve the fine gold separator at all times while scrolling. */
  .mobile-nav {
    border-bottom: 1px solid rgba(212,175,55,.78);
  }
}

/* Ensure the sticky navigation is not clipped by a parent container. */
.site-shell {
  overflow: visible;
}


/* =========================================================
   MY1STMIO v5.4 – Mobile menu auto-close on page scroll
   ========================================================= */

@media (max-width: 760px) {
  .mobile-nav__panel {
    overscroll-behavior: contain;
  }
}


/* =========================================================
   MY1STMIO v5.5 – Navigation refinement
   ========================================================= */
.main-nav{border-bottom:1px solid rgba(212,175,55,.34);box-shadow:0 5px 18px rgba(0,0,0,.12)}
.main-nav__link--active::after{height:2px;box-shadow:0 0 6px rgba(212,175,55,.20)}
.main-nav__dropdown{width:218px;padding:.22rem;border-color:rgba(212,175,55,.17);border-radius:0 0 8px 8px;box-shadow:0 12px 26px rgba(0,0,0,.24);transform:translate(-50%,4px)}
.main-nav__dropdown a{min-height:44px;display:flex;align-items:center;padding:.55rem .72rem;font-size:.74rem}
.main-nav__group:hover .main-nav__dropdown,.main-nav__group:focus-within .main-nav__dropdown{transform:translate(-50%,0)}
.mobile-nav{display:none}

@media(max-width:1024px){
  .main-nav{display:none}
  .mobile-nav{display:flex;position:sticky;top:0;z-index:1000;width:100%;min-height:50px;align-items:stretch;justify-content:space-between;border-bottom:1px solid rgba(212,175,55,.30);background:rgba(5,17,30,.985);box-shadow:0 5px 18px rgba(0,0,0,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .mobile-nav__home{display:flex;align-items:center;padding:0 1rem;color:var(--color-gold-light);font-family:var(--font-primary);font-size:.73rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
  .mobile-nav__menu{position:static;margin:0}
  .mobile-nav__toggle{width:58px;min-height:49px;padding:0 1rem;display:flex;align-items:center;justify-content:flex-end;list-style:none;cursor:pointer;background:transparent}
  .mobile-nav__toggle::-webkit-details-marker{display:none}
  .mobile-nav__burger{width:22px;height:16px;display:inline-flex;flex-direction:column;justify-content:space-between}
  .mobile-nav__burger span{display:block;width:100%;height:1.5px;border-radius:999px;background:var(--color-gold-light);transition:transform var(--transition-fast),opacity var(--transition-fast)}
  .mobile-nav__menu[open] .mobile-nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-nav__menu[open] .mobile-nav__burger span:nth-child(2){opacity:0}
  .mobile-nav__menu[open] .mobile-nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-nav__panel{position:absolute;top:100%;left:0;right:0;padding:.18rem .85rem .55rem;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(212,175,55,.18);background:rgba(5,19,32,.992);box-shadow:0 14px 28px rgba(0,0,0,.25);overscroll-behavior:contain}
  .mobile-nav__item{min-height:39px;padding:.46rem .18rem;border-bottom:1px solid rgba(255,255,255,.045);font-size:.69rem;letter-spacing:.04em}
  .mobile-nav__item--disabled{color:rgba(170,183,196,.28)}
  .mobile-nav__subnav>summary{list-style:none;cursor:pointer}
  .mobile-nav__subnav>summary::-webkit-details-marker{display:none}
  .mobile-nav__arrow{font-size:.9em;transition:transform var(--transition-fast)}
  .mobile-nav__subnav[open] .mobile-nav__arrow{transform:rotate(180deg)}
  .mobile-nav__submenu{margin:0 0 .12rem .35rem;padding:.08rem 0 .08rem .7rem;border-left:1px solid rgba(212,175,55,.24)}
  .mobile-nav__submenu a{display:block;padding:.48rem .15rem;color:rgba(244,247,250,.82);font-size:.69rem;line-height:1.35}
  .mobile-nav__submenu a:hover,.mobile-nav__submenu a:focus-visible{color:var(--color-gold-light)}
  .mobile-nav__item--login{border-bottom:0}
}


/* =========================================================
   MY1STMIO v5.6 – Tablet/iPhone menu refinement
   - Tablet uses the same vertical hamburger menu as iPhone
   - Fakten & Ergebnisse opens reliably as an accordion
   - Tighter spacing on iPhone
   ========================================================= */

@media (max-width: 1180px) {
  .main-nav {
    display: none !important;
  }

  .mobile-nav {
    display: flex !important;
    position: sticky !important;
    top: 0;
    z-index: 1000;
    width: 100%;
    min-height: 48px;
    align-items: stretch;
    justify-content: space-between;
    margin: 0;
    border-bottom: 1px solid rgba(212,175,55,.24);
    background: rgba(5,17,30,.988);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-nav__home {
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    color: var(--color-gold-light, #e5bb58);
    font-family: var(--font-primary, Arial, Helvetica, sans-serif);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .mobile-nav__menu {
    position: static;
    margin: 0;
  }

  .mobile-nav__toggle {
    width: 54px;
    min-height: 47px;
    padding: 0 .9rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    cursor: pointer;
    background: transparent;
  }

  .mobile-nav__toggle::-webkit-details-marker {
    display: none;
  }

  .mobile-nav__burger {
    width: 21px;
    height: 15px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mobile-nav__burger span {
    display: block;
    width: 100%;
    height: 1.5px;
    border-radius: 999px;
    background: var(--color-gold-light, #e5bb58);
    transition: transform .18s ease, opacity .18s ease;
  }

  .mobile-nav__menu[open] .mobile-nav__burger span:nth-child(1) {
    transform: translateY(6.75px) rotate(45deg);
  }

  .mobile-nav__menu[open] .mobile-nav__burger span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav__menu[open] .mobile-nav__burger span:nth-child(3) {
    transform: translateY(-6.75px) rotate(-45deg);
  }

  .mobile-nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block !important;
    padding: .08rem .72rem .38rem;
    border-top: 1px solid rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(212,175,55,.14);
    background: rgba(5,19,32,.995);
    box-shadow: 0 12px 24px rgba(0,0,0,.22);
  }

  .mobile-nav__item {
    width: 100%;
    min-height: 35px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .36rem .1rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: rgba(255,255,255,.90);
    font-family: var(--font-primary, Arial, Helvetica, sans-serif);
    font-size: .67rem;
    font-weight: 500;
    letter-spacing: .035em;
    text-transform: uppercase;
    line-height: 1.25;
  }

  .mobile-nav__item--enabled {
    color: var(--color-gold-light, #e5bb58);
    cursor: pointer;
  }

  .mobile-nav__item--disabled {
    color: rgba(143,160,175,.24) !important;
    cursor: default;
    user-select: none;
  }

  .mobile-nav__subnav {
    display: block;
    width: 100%;
    margin: 0;
  }

  .mobile-nav__subnav > summary {
    display: flex !important;
    width: 100%;
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-nav__subnav > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav__arrow {
    color: var(--color-gold, #d5a94d);
    font-size: .84em;
    flex: 0 0 auto;
    transition: transform .18s ease;
  }

  .mobile-nav__subnav[open] .mobile-nav__arrow {
    transform: rotate(180deg);
  }

  .mobile-nav__submenu {
    display: block;
    margin: 0 0 .06rem .28rem;
    padding: .04rem 0 .04rem .58rem;
    border-left: 1px solid rgba(212,175,55,.20);
  }

  .mobile-nav__submenu a {
    display: block;
    padding: .38rem .08rem;
    color: rgba(244,247,250,.80);
    font-size: .66rem;
    line-height: 1.25;
    text-decoration: none;
  }

  .mobile-nav__submenu a:hover,
  .mobile-nav__submenu a:focus-visible,
  .mobile-nav__submenu a.mobile-nav__current {
    color: var(--color-gold-light, #e5bb58);
  }

  .mobile-nav__item--login {
    border-bottom: 0;
  }
}

/* iPhone: slightly tighter again */
@media (max-width: 620px) {
  .mobile-nav {
    min-height: 46px;
  }

  .mobile-nav__home {
    padding-left: .78rem;
    padding-right: .78rem;
    font-size: .68rem;
  }

  .mobile-nav__toggle {
    width: 50px;
    min-height: 45px;
    padding-left: .76rem;
    padding-right: .76rem;
  }

  .mobile-nav__panel {
    padding: .04rem .62rem .28rem;
  }

  .mobile-nav__item {
    min-height: 32px;
    padding: .28rem .06rem;
    font-size: .63rem;
  }

  .mobile-nav__submenu {
    margin-left: .22rem;
    padding-left: .5rem;
  }

  .mobile-nav__submenu a {
    padding: .31rem .05rem;
    font-size: .62rem;
  }
}


/* =========================================================
   MY1STMIO v5.7 – Desktop dropdown refinement
   - submenu aligns left with "Fakten & Ergebnisse"
   - slimmer, lighter dropdown
   - clicking parent no longer jumps/scrolls
   ========================================================= */

.main-nav__group {
  position: relative;
}

.main-nav__group > .main-nav__link--dropdown {
  cursor: default;
}

/* Align dropdown with the left edge of the parent menu item */
.main-nav__dropdown {
  left: 0 !important;
  right: auto !important;
  width: 190px !important;
  min-width: 190px;
  padding: .14rem !important;
  transform: translateY(3px) !important;
  border: 1px solid rgba(212,175,55,.13) !important;
  border-top: 0 !important;
  border-radius: 0 0 7px 7px !important;
  background: rgba(5,19,32,.965) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}

.main-nav__dropdown a {
  min-height: 36px !important;
  padding: .42rem .62rem !important;
  font-size: .70rem !important;
  line-height: 1.25 !important;
  text-align: left;
  justify-content: flex-start !important;
}

.main-nav__group:hover .main-nav__dropdown,
.main-nav__group:focus-within .main-nav__dropdown {
  transform: translateY(0) !important;
}


/* =========================================================
   MY1STMIO v5.8 – iPhone separator line aligned to desktop/tablet
   ========================================================= */
@media (max-width: 620px) {
  .mobile-nav {
    border-bottom: 1px solid rgba(212,175,55,.18) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
  }

  .mobile-nav__panel {
    border-bottom: 1px solid rgba(212,175,55,.10) !important;
  }
}

/* =========================================================
   MY1STMIO v5.9 – Finaler Hero und Markenclaim
   ========================================================= */
.brand__values {
  margin: 0.3rem 0 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.58rem, 0.78vw, 0.72rem);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: 0.055em;
  color: rgba(244, 247, 250, 0.82);
}

.brand__values span {
  margin-inline: 0.28em;
  color: #D4AF37;
}

.coming-soon {
  margin-top: clamp(1.65rem, 3.2vh, 2.45rem);
}

.coming-soon__quote {
  width: min(1040px, 96%);
  margin: 0 auto;
}

.coming-soon .coming-soon__quote h1 {
  margin: 0;
  font-family: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.18rem, 2.1vw, 1.85rem);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: #FFFFFF;
}

.coming-soon .coming-soon__quote cite {
  display: inline-block;
  margin: 0 0 0 0.25em;
  white-space: nowrap;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 0.42em;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: rgba(244, 247, 250, 0.66);
}

.coming-soon__eyebrow {
  margin-top: 0.78rem;
  font-size: clamp(0.98rem, 1.55vw, 1.24rem);
  font-weight: 500;
  color: var(--color-gold-light);
}

.countdown-section {
  margin-top: clamp(1.45rem, 3.4vh, 2.4rem);
}

.countdown__item {
  min-height: 96px;
  padding: 0.68rem 0.75rem 0.62rem;
}

.countdown__value {
  font-size: clamp(1.9rem, 3vw, 2.85rem);
}

.countdown__status {
  margin: 0.82rem auto 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.76rem, 1.05vw, 0.9rem);
  line-height: 1.5;
  font-weight: 300;
  color: rgba(244, 247, 250, 0.78);
}

@media (max-width: 620px) {
  .brand__values {
    max-width: 94%;
    font-size: 0.55rem;
    letter-spacing: 0.035em;
  }

  .coming-soon .coming-soon__quote h1 {
    font-size: clamp(1rem, 4.3vw, 1.12rem);
    line-height: 1.46;
  }

  .coming-soon__eyebrow {
    margin-top: 0.66rem;
    font-size: 0.94rem;
  }

  .countdown__item {
    min-height: 88px;
    padding: 0.55rem 0.45rem 0.5rem;
  }

  .countdown__value {
    font-size: 2.15rem;
  }

  .countdown__status {
    max-width: 92%;
    font-size: 0.74rem;
  }
}
/* =========================================================
   Ausgaben & Einblicke – dynamische Publikationskacheln
   ========================================================= */
.pub-grid{display:grid;grid-template-columns:1fr;gap:26px;padding:34px 0 46px}
.pub-card{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);width:100%;max-width:1040px;min-height:420px;overflow:hidden;border:1px solid #d8d2c5;border-radius:10px;background:#fff;box-shadow:0 12px 34px rgba(10,27,48,.09)}
.pub-card__cover{min-height:420px;background:linear-gradient(145deg,#071725,#102e43);border-right:1px solid rgba(197,154,54,.34)}
.pub-card__cover img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:#071725}
.pub-card__placeholder{height:100%;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;color:#fff;text-align:center;background:radial-gradient(circle at 50% 24%,rgba(230,199,106,.18),transparent 30%),linear-gradient(145deg,#061522,#12344a)}
.pub-card__placeholder span{font-family:var(--font-primary);font-size:1.28rem;font-weight:650;letter-spacing:.08em}.pub-card__placeholder em{color:#e5bb58;font-style:normal}.pub-card__placeholder small{color:#d8b14d;font-size:.69rem;letter-spacing:.2em}
.pub-card__body{display:flex;flex-direction:column;padding:24px}
.pub-card__meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px;color:#8b681b;font-family:var(--font-primary);font-size:.68rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.pub-card__meta span+span::before,.pub-card__meta span+time::before{content:"·";margin-right:12px;color:#b8aa8b}
.pub-card h2{margin:0 0 12px;color:#10263a;font-family:var(--font-primary);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;line-height:1.28}
.pub-card__description{margin:0;color:#526273;font-size:.9rem;line-height:1.65}
.pub-card__price{margin:14px 0 0;color:#72510d;font-weight:700}
.pub-card__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;padding-top:22px}
.pub-card__action{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.pub-access-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border:1px solid currentColor;border-radius:4px;font-family:var(--font-primary);font-size:.58rem;font-weight:700;letter-spacing:.045em;line-height:1.2}
.pub-access-badge--public{color:#4d5f6d}.pub-access-badge--free,.pub-access-badge--premium{color:#8b6516}.pub-access-badge--none{color:#7b8186}
.pub-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border:1px solid #b88a2d;border-radius:5px;background:linear-gradient(180deg,#e1b955,#c8952f);color:#071522;font-size:.78rem;font-weight:750;text-decoration:none;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.pub-button:hover,.pub-button:focus-visible{transform:translateY(-1px);box-shadow:0 7px 16px rgba(151,108,25,.2)}
.pub-button--secondary{background:#fff;color:#6f5010}
@media(max-width:920px){.pub-card{grid-template-columns:minmax(210px,260px) minmax(0,1fr)}}
@media(max-width:560px){.pub-grid{gap:18px;padding-top:24px}.pub-card{grid-template-columns:1fr;max-width:420px;margin:0 auto}.pub-card__cover{min-height:0;aspect-ratio:210/297;border-right:0;border-bottom:1px solid rgba(197,154,54,.34)}.pub-card__placeholder{min-height:0}.pub-card__body{padding:20px}.pub-card__actions{flex-direction:column}.pub-card__action,.pub-button{width:100%}.pub-access-badge{width:auto}}

/* Gemeinsame Seiten-Heros – 25.09.2026. Nicht fuer die Home-.hero. */
.mio-hero{position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:620px;margin:0;padding:0;color:var(--color-white);background:linear-gradient(120deg,var(--color-bg),var(--color-bg-mid));border-bottom:1px solid rgba(212,175,55,.28)}
.mio-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,19,32,.94),rgba(6,19,32,.74) 48%,rgba(6,19,32,.22)),linear-gradient(0deg,rgba(6,19,32,.65),transparent 65%);pointer-events:none}
.mio-hero .mio-hero__image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;border:0;border-radius:0}
.mio-hero__inner{position:relative;max-width:1460px;margin:0 auto;padding:clamp(3rem,5vw,5.2rem) clamp(1.25rem,4vw,4rem);min-height:620px;display:flex;align-items:center}
.mio-hero__copy{width:100%;max-width:850px;min-width:0}
.mio-hero .mio-hero__eyebrow{margin:0 0 1rem;font-family:var(--font-primary)!important;font-size:.82rem;font-weight:500;letter-spacing:.16em;line-height:1.5;text-transform:uppercase;color:var(--color-gold-light)}
.mio-hero .mio-hero__title,.mio-hero .mio-hero__title span{font-family:var(--font-primary)!important;font-size:clamp(2rem,6vw,5.5rem);font-weight:400;line-height:1.04;letter-spacing:.015em;text-transform:uppercase}
.mio-hero .mio-hero__title{margin:0 0 1.4rem;padding:0;color:var(--color-white);max-width:none}
.mio-hero .mio-hero__title span{display:block;color:var(--color-gold-light)}
.mio-hero .mio-hero__slogan{margin:0;color:var(--color-white);font-family:var(--font-secondary)!important;font-size:clamp(1.1rem,2vw,1.55rem);font-weight:400;line-height:1.5}
.mio-hero__rule{display:block;width:72px;height:2px;margin:1.15rem 0 1.3rem;background:linear-gradient(90deg,var(--color-gold),rgba(212,175,55,.15))}
.mio-hero .mio-hero__intro{max-width:650px;margin:0;color:var(--color-soft-white);font-family:var(--font-secondary)!important;font-size:clamp(.95rem,1.25vw,1.06rem);font-weight:400;line-height:1.75}
.mio-hero__actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:2rem;max-width:650px}
.mio-hero__actions .indicator-email-btn{width:100%;max-width:100%}
.mio-hero--summary .mio-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:3rem}
.mio-hero--summary .mio-hero__title,.mio-hero--summary .mio-hero__title span{font-size:clamp(2rem,4.2vw,4.3rem)}
.mio-hero--compact,.mio-hero--compact .mio-hero__inner{min-height:0}
.mio-hero .pub-breadcrumb{margin-bottom:2rem}
.mio-benefits-band{background:var(--color-bg-deep);padding:1.5rem 0;border-bottom:1px solid rgba(212,175,55,.25)}
.mio-benefits-band .about-benefits{margin-top:0;border-top:0}
@media(max-width:1000px){.mio-hero--summary .mio-hero__inner{grid-template-columns:1fr}.mio-hero--summary .benchmark-summary{max-width:650px;width:100%}}
@media(max-width:600px){
 .mio-hero,.mio-hero__inner{min-height:0}
 .mio-hero__inner{padding:2.5rem 1rem 2.75rem}
 .mio-hero .mio-hero__title,.mio-hero .mio-hero__title span{font-size:clamp(1.75rem,7.8vw,2.9rem);line-height:1.08}
 .mio-hero .mio-hero__eyebrow{font-size:.72rem;letter-spacing:.12em}
 .mio-hero__image{object-position:65% center}
 .mio-hero::after{background:linear-gradient(90deg,rgba(6,19,32,.9),rgba(6,19,32,.55)),linear-gradient(0deg,rgba(6,19,32,.7),transparent)}
 .mio-hero__actions{margin-top:1.6rem}
 .mio-hero__actions .indicator-email-btn{min-width:0}
}