:root {
  --bg: #05080b;
  --gold: #c98522;
  --cream: #f3e2bf;
  --red: #7c1d17;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}

.site-shell {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,133,34,.10), transparent 36%),
    linear-gradient(180deg, #071017 0%, #030608 100%);
}

/* Desktop locked visual */
.desktop-site { display: block; }

.mockup-wrap {
  position: relative;
  width: min(100vw, 1536px);
  margin: 0 auto;
  line-height: 0;
  box-shadow: 0 0 80px rgba(0,0,0,.75);
  overflow: hidden;
}

.mockup {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 8px;
  text-indent: -9999px;
  overflow: hidden;
}

.top-shop { left: 78.8%; top: 3.9%; width: 15.5%; height: 4.9%; }
.nav-shop { left: 35.1%; top: 4.8%; width: 4.6%; height: 3.5%; }
.nav-follow { left: 72.4%; top: 4.8%; width: 5.4%; height: 3.5%; }
.hero-shop { left: 3.4%; top: 55.4%; width: 17.5%; height: 5.5%; }
.hero-instagram { left: 21.8%; top: 55.4%; width: 15.7%; height: 5.5%; }
.panel-live { left: 44.7%; top: 83.7%; width: 11.5%; height: 4.7%; }
.panel-instagram { left: 65.1%; top: 83.4%; width: 15.8%; height: 4.8%; }

.mobile-site { display: none; }

/* True mobile layout */
@media (max-width: 760px) {
  .desktop-site { display: none; }

  .mobile-site {
    display: block;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 50% 0%, rgba(201,133,34,.12), transparent 42%),
      #05080b;
  }

  .mobile-header {
    width: 100%;
    padding: 18px 18px 12px;
    text-align: center;
    background: #05080b;
    border-bottom: 1px solid rgba(201,133,34,.45);
  }

  .mobile-logo {
    display: block;
    width: min(82vw, 350px);
    height: auto;
    margin: 0 auto;
  }

  .mobile-hero {
    width: 100%;
    padding: 26px 22px 22px;
    text-align: center;
    background:
      linear-gradient(180deg, rgba(5,8,11,.96), rgba(5,8,11,.88)),
      radial-gradient(circle at 50% 10%, rgba(201,133,34,.12), transparent 50%);
  }

  .eyebrow {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    font-size: .78rem;
    margin-bottom: 14px;
  }

  .mobile-hero h1 {
    margin: 0 auto;
    max-width: 390px;
    color: var(--cream);
    font-size: clamp(2rem, 9vw, 3.15rem);
    line-height: 1.06;
    letter-spacing: .01em;
    text-transform: uppercase;
  }

  .mobile-hero p {
    margin: 18px auto 0;
    max-width: 340px;
    font-size: 1.02rem;
    line-height: 1.45;
    color: rgba(243,226,191,.92);
  }

  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: 22px auto 0;
  }

  .mobile-actions a {
    display: block;
    width: 100%;
    padding: 15px 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--cream);
    background: linear-gradient(180deg, #9a241d, #711611);
    border: 1px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }

  .mobile-actions a + a {
    background: transparent;
  }

  .mobile-site img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .mobile-card-row {
    margin: 0;
    border-top: 1px solid rgba(201,133,34,.35);
    border-bottom: 1px solid rgba(201,133,34,.35);
  }
}