/* ==========================================================================
   components.css – Nav, Buttons, Phone frames, Screenshot slots, Stats band
   ========================================================================== */

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.2rem var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15,18,28,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(46,54,72,.55);
}

.nav__logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.nav__logo svg    { width: 22px; height: 22px; color: var(--primary); }
.nav__logo-img    { width: 22px; height: 22px; object-fit: contain; display: block; }
.nav__logo span   { color: var(--primary); }

.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav__links a {
  color: var(--muted);
  font-size: .85rem;
  text-decoration: none;
  transition: color .2s;
}

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

.nav__cta {
  background: var(--primary);
  color: #fff;
  padding: .55rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: background .2s, transform .15s;
}

.nav__cta svg        { width: 14px; height: 14px; flex-shrink: 0; }
.nav__cta:hover      { background: var(--primary-l); transform: translateY(-1px); }

/* ── HAMBURGER BUTTON ── */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background .2s;
  z-index: 200;
}

.nav__burger:hover { background: rgba(255,255,255,.06); }

.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, width .3s ease;
  transform-origin: center;
}

/* Open state → X */
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU OVERLAY ── */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  background: rgba(15,18,28,.97);
  backdrop-filter: blur(20px);
  padding-top: 80px;
  padding-bottom: 2rem;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-bottom: 1px solid var(--divider);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.mobile-menu__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu__links li {
  border-bottom: 1px solid var(--divider);
}

.mobile-menu__links li:first-child {
  border-top: 1px solid var(--divider);
}

.mobile-menu__links a {
  display: block;
  padding: 1rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s, padding-left .2s;
}

.mobile-menu__links a:hover { color: var(--text); padding-left: .5rem; }
.mobile-menu__links a.nav__active { color: var(--primary); padding-left: .5rem; }

.mobile-menu__cta { align-self: flex-start; }

/* ── NAV RESPONSIVE ── */
@media (max-width: 900px) {
  .nav__links        { display: none; }
  .nav__cta--desktop { display: none; }
  .nav__burger       { display: flex; }
}

@media (max-width: 640px) {
  .nav { padding: 1rem 1.25rem; }
}

/* Prevent body scroll when menu is open */
body.menu-open { overflow: hidden; }


/* ── BUTTONS ── */
.btn-p,
.btn-s {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.8rem;
  border-radius: var(--radius-md);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
}

.btn-p svg,
.btn-p img,
.btn-s svg,
.btn-s img { width: 18px; height: 18px; flex-shrink: 0; }

.btn-s img { filter: brightness(0) invert(0.7); }

.btn-p {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 24px rgba(0,122,255,.35);
}
.btn-p:hover {
  background: var(--primary-l);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,122,255,.45);
}

.btn-s {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--divider);
}
.btn-s:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn-s:hover img { filter: brightness(0) invert(1); }

/* ── PLATFORM-HIGHLIGHTED STATE ── */
.btn-s--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 4px 24px rgba(0,122,255,.35);
}

.btn-s--active img { filter: brightness(0) invert(1); }

.btn-s--active:hover {
  background: var(--primary-l);
  border-color: var(--primary-l);
  box-shadow: 0 8px 32px rgba(0,122,255,.45);
}

.store-btn--active {
  border-color: var(--primary);
  background: rgba(0,122,255,.12);
  box-shadow: 0 0 0 1px var(--primary), 0 4px 24px rgba(0,122,255,.2);
}

.store-btn--active .store-btn__name { color: var(--primary); }

.store-btn--active .store-btn__icon img { filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(190deg); }

.store-btn--active:hover {
  border-color: var(--primary-l);
  background: rgba(0,122,255,.18);
}


/* ── PHONE FRAME ── */
.phone {
  flex-shrink: 0;
  background: var(--bg-light);
  border: 2px solid var(--divider);
  border-radius: 38px;
  overflow: hidden;
  box-shadow:
          0 32px 80px rgba(0,0,0,.55),
          0 0 0 1px rgba(255,255,255,.04);
  transition: transform .3s;
  position: relative;
}

.phone:hover { transform: translateY(-8px) !important; }

.phone--tilt   { transform: rotate(4deg)  translateY(24px); }
.phone--tilt-n { transform: rotate(-4deg) translateY(24px); }

.phone__notch {
  width: 80px;
  height: 22px;
  background: var(--bg-light);
  border-radius: 0 0 14px 14px;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Row of three phones (hero) */
.phone-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 0 2rem 4rem;
}

.phone-row .phone { width: 220px; }

/* Pair of two phones (split sections) */
.phone-pair {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.25rem;
}

.phone-pair .phone { width: 200px; }

@media (max-width: 900px) {
  .phone--tilt,
  .phone--tilt-n { transform: none; }
}

@media (max-width: 640px) {
  .phone-row { gap: .75rem; }
  .phone-row .phone { width: 165px; border-radius: 28px; }
  .phone-row .phone--tilt,
  .phone-row .phone--tilt-n { display: none; }

  .phone-pair { gap: .6rem; }
  .phone-pair .phone { width: 155px; border-radius: 28px; }
}


/* ── SCREENSHOT SLOT ── */
/*
  Each .ss is a placeholder area inside a .phone.
  Replace the inner <svg>+<span> with an <img> once you have screenshots:

    <div class="ss">
      <img src="assets/screenshots/dashboard.png" alt="Dashboard">
    </div>
*/
.ss {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.5rem;
  border-top: 1px dashed rgba(46,54,72,.8);
  position: relative;
  overflow: hidden;
}

.ss__icon,
.ss__icon svg {
  width: 28px;
  height: 28px;
  opacity: .22;
  color: var(--primary-l);
}

.ss__label {
  font-size: .62rem;
  color: var(--dim);
  text-align: center;
  line-height: 1.55;
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ss img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  /* Fehlendes Bild = unsichtbar, Slot bleibt sauber */
  color: transparent;
}

/* Damit kaputte img-Tags nicht als zerrissenes Bild-Icon erscheinen */
.ss img[src=""],
.ss img:not([src]) {
  display: none;
}


/* ── STATS BAND ── */
.stats-band {
  background: var(--bg-mid);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 2.5rem var(--page-padding);
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 8vw, 6rem);
  flex-wrap: wrap;
}

.stats-band__item { text-align: center; }

.stats-band__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.8rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.02em;
}

.stats-band__num span { color: var(--primary); }

.stats-band__label {
  color: var(--muted);
  font-size: .78rem;
  margin-top: .3rem;
}


/* ── STORE DOWNLOAD BUTTONS ── */
.dl-badges {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg-light);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: .9rem 1.5rem;
  text-decoration: none;
  color: var(--text);
  min-width: 188px;
  transition: border-color .2s, transform .2s, background .2s;
}

.store-btn:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  background: #1c2133;
}

.store-btn__icon       { width: 32px; height: 32px; flex-shrink: 0; }
.store-btn__icon svg,
.store-btn__icon img   { width: 100%; height: 100%; }
.store-btn__icon img   { filter: brightness(0) invert(0.7); }
.store-btn__sub        { font-size: .65rem; color: var(--muted); }
.store-btn__name       { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }


/* ── SCROLL-TO-TOP BUTTON ── */
.top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid var(--divider);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}

.top-btn svg { width: 16px; height: 16px; }
.top-btn.show { opacity: 1; pointer-events: auto; }
.top-btn:hover { transform: translateY(-3px); border-color: var(--primary); }

/* ── MOCKUP IMAGES (Screenshots mit eigenem Rahmen) ── */

.mockup-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 0 2rem 4rem;
}

.mockup-pair {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.25rem;
  overflow: visible;
  padding: 1rem 0.5rem 1.5rem;
}

.mockup-single {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.mockup-img {
  display: block;
  width: 220px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 32px 48px rgba(0,0,0,.55));
  transition: transform .3s, filter .3s;
  position: relative;
  z-index: 2;
}

.mockup-pair .mockup-img,
.mockup-single .mockup-img { width: 200px; }

/* Hero fan: outer phones slightly smaller + behind center */
.mockup-row .mockup-img--tilt {
  transform: rotate(6deg) translateY(36px) scale(.9);
  z-index: 1;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.65)) brightness(.88);
}
.mockup-row .mockup-img--tilt-n {
  transform: rotate(-6deg) translateY(36px) scale(.9);
  z-index: 1;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.65)) brightness(.88);
}

/* Feature section pair: subtle tilt */
.mockup-pair .mockup-img--tilt   { transform: rotate(3deg)  translateY(16px); z-index: 1; }
.mockup-pair .mockup-img--tilt-n { transform: rotate(-3deg) translateY(16px); z-index: 1; }

.mockup-img:hover {
  transform: translateY(-10px) scale(1.03) !important;
  filter: drop-shadow(0 40px 56px rgba(0,0,0,.5)) brightness(1) !important;
  z-index: 10;
}

.hero .mockup-row { animation: fadeUp .9s .4s ease both; }

@media (max-width: 900px) {
  .mockup-row .mockup-img--tilt,
  .mockup-row .mockup-img--tilt-n { transform: rotate(0) translateY(16px) scale(.85); }
}

@media (max-width: 640px) {
  /* Hero mockup: gross und unten vom Hero abgeschnitten */
  .hero .mockup-row {
    padding: 0;
    margin-bottom: -6rem;
    pointer-events: none;
  }
  .hero .mockup-row .mockup-img { width: 78vw; max-width: 340px; }
  .mockup-row .mockup-img--tilt,
  .mockup-row .mockup-img--tilt-n { display: none; }

  /* Feature-Section pairs */
  .mockup-pair .mockup-img,
  .mockup-single .mockup-img { width: 155px; border-radius: 28px; }
}