/* ============================================================
   AMORIXO — Shared Stylesheet
   All pages include this via <link rel="stylesheet" href="shared.css">
   ============================================================ */

/* ---------- Reset & Variables ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --rose: #C2415A;
  --dark: #8C1D35;
  --bg:   #3D0A19;
  --bgd:  #0D0208;
  --light:#FDF0F2;
  --white:#FFFFFF;
  --gray: #64748B;
  --slate:#334155;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --nav-h: 88px;
  --r: 16px;
  --sh: 0 4px 28px rgba(0,0,0,.10);
  --sh2: 0 8px 48px rgba(0,0,0,.16);
}
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); background: var(--white); color: var(--slate); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
ul { list-style: none; }

/* ---------- Typography ---------- */
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
h4 { font-size: 1rem; font-weight: 700; }
p  { font-size: 1rem; }

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.container--sm { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: .95rem; padding: .8rem 2rem; border-radius: 99px; border: none; transition: all .22s ease; white-space: nowrap; }
.btn-primary { background: var(--rose); color: var(--white); box-shadow: 0 4px 16px rgba(194,65,90,.35); }
.btn-primary:hover { background: var(--dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(194,65,90,.45); }
.btn-outline { background: transparent; color: var(--rose); border: 2px solid var(--rose); }
.btn-outline:hover { background: var(--rose); color: var(--white); transform: translateY(-2px); }
.btn-white { background: var(--white); color: var(--rose); box-shadow: var(--sh); }
.btn-white:hover { background: var(--light); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: rgba(255,255,255,.8); padding: .65rem 1.2rem; border-radius: 99px; font-size: .9rem; font-weight: 600; }
.btn-ghost:hover { color: var(--white); background: rgba(255,255,255,.08); }
.btn-sm { padding: .6rem 1.4rem; font-size: .88rem; }
.btn-lg { padding: 1rem 2.5rem; font-size: 1.05rem; }

/* ---------- Nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(13,2,8,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(194,65,90,.18);
  display: flex; align-items: center;
  padding: 0 2rem;
  transition: background .3s, box-shadow .3s;
}
nav.scrolled { background: rgba(13,2,8,.98); box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; margin: 0 auto; }
.nav-logo img { height: 68px; width: auto; filter: drop-shadow(0 0 12px rgba(194,65,90,.45)) brightness(1.08); }
.nav-logo span { font-size: 1.8rem; font-weight: 800; color: var(--rose); letter-spacing: -.02em; }

/* Dropdown nav */
.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-item { position: relative; }
.nav-item > a {
  color: rgba(255,255,255,.78); font-size: .9rem; font-weight: 500;
  padding: .55rem .85rem; border-radius: 8px;
  display: flex; align-items: center; gap: .35rem;
  transition: color .2s, background .2s;
}
.nav-item > a:hover, .nav-item.active > a { color: var(--white); background: rgba(255,255,255,.07); }
.nav-item .arrow { font-size: .65rem; transition: transform .2s; opacity: .5; }
.nav-item:hover .arrow { transform: rotate(180deg); opacity: 1; }

.dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 210px;
  background: #1A0610;
  border: 1px solid rgba(194,65,90,.2);
  border-radius: 14px;
  /* padding-top bridges the gap so mouse never leaves hover zone */
  padding: .5rem .5rem .5rem;
  margin-top: .4rem;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  /* delay hide by 120ms so cursor has time to reach the menu */
  transition: opacity .2s ease .12s, visibility .2s ease .12s, transform .2s ease .12s;
  pointer-events: none;
}
/* Invisible bridge so mouse can travel from nav item into dropdown */
.dropdown::before {
  content: ''; position: absolute; top: -.5rem; left: 0; right: 0; height: .5rem;
}
.nav-item:hover .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all;
  /* show immediately on hover */
  transition: opacity .18s ease 0s, visibility .18s ease 0s, transform .18s ease 0s;
}
.dropdown a {
  display: block; padding: .6rem .9rem; border-radius: 9px;
  color: rgba(255,255,255,.72); font-size: .88rem; font-weight: 500;
  transition: all .15s;
}
.dropdown a:hover { color: var(--white); background: rgba(194,65,90,.2); }
.dropdown-divider { height: 1px; background: rgba(255,255,255,.07); margin: .4rem .5rem; }

/* Nav auth */
.nav-auth { display: flex; align-items: center; gap: .5rem; }
.nav-auth .btn-nav-login {
  color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 600;
  padding: .55rem 1.1rem; border-radius: 99px;
  transition: all .2s;
}
.nav-auth .btn-nav-login:hover { color: var(--white); background: rgba(255,255,255,.08); }
.nav-auth .btn-nav-signup {
  background: var(--rose); color: var(--white);
  font-size: .9rem; font-weight: 700;
  padding: .6rem 1.3rem; border-radius: 99px;
  transition: all .22s;
}
.nav-auth .btn-nav-signup:hover { background: var(--dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(194,65,90,.4); }

/* Mobile toggle */
.nav-toggle { display: none; background: none; border: none; padding: .5rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; border-radius: 2px; transition: all .3s; }

/* Mobile menu */
.mob-nav {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: var(--bgd);
  padding: calc(var(--nav-h) + 1rem) 1.5rem 2rem;
  flex-direction: column; gap: 0;
  overflow-y: auto;
}
.mob-nav.open { display: flex; }
.mob-section { margin-bottom: .5rem; }
.mob-section-label { color: rgba(255,255,255,.35); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .8rem .5rem .4rem; }
.mob-nav a.mob-link {
  display: block; color: rgba(255,255,255,.8); font-size: 1rem; font-weight: 500;
  padding: .75rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .2s;
}
.mob-nav a.mob-link:hover { color: var(--rose); }
.mob-auth { display: flex; gap: .75rem; margin-top: 1.5rem; }
.mob-auth a { flex: 1; text-align: center; padding: .85rem; border-radius: 99px; font-weight: 700; }
.mob-login { background: rgba(255,255,255,.08); color: var(--white); }
.mob-signup { background: var(--rose); color: var(--white); }

/* ---------- Page Hero ---------- */
.ph {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #1A0610 0%, var(--bg) 40%, #6B1030 75%, #3D0A19 100%);
  padding: calc(var(--nav-h) + 4.5rem) 1.5rem 4.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(194,65,90,.18);
}
/* Decorative glow orbs */
.ph::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,65,90,.22) 0%, transparent 70%);
  top: -200px; right: -150px; pointer-events: none;
}
.ph::after {
  content: ''; position: absolute;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,29,53,.28) 0%, transparent 70%);
  bottom: -150px; left: -100px; pointer-events: none;
}
.ph > * { position: relative; z-index: 1; }
.ph h1 { color: var(--white); margin-bottom: .85rem; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.ph p { color: rgba(255,255,255,.7); font-size: 1.15rem; max-width: 620px; margin: 0 auto; line-height: 1.7; }
.ph-tag {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: linear-gradient(135deg, rgba(194,65,90,.98), rgba(140,29,53,.98));
  color: var(--white);
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .48rem 1.18rem; border-radius: 99px; margin-bottom: 1.1rem;
  border: 1px solid rgba(244,160,176,.55);
  box-shadow: 0 10px 28px rgba(140,29,53,.28), 0 0 22px rgba(194,65,90,.25);
}

/* ---------- Section spacing ---------- */
.section { padding: 5rem 0; }
.section-sm { padding: 3.5rem 0; }
.section-lg { padding: 7rem 0; }
.section-dark { background: var(--bgd); }
.section-light { background: var(--light); }

/* ---------- Section header ---------- */
.section-hdr { text-align: center; margin-bottom: 3.5rem; }
.section-hdr h2 { color: var(--bg); margin-bottom: .75rem; }
.section-hdr p { color: var(--gray); font-size: 1.05rem; max-width: 580px; margin: 0 auto; }
.section-hdr.light h2 { color: var(--white); }
.section-hdr.light p { color: rgba(255,255,255,.6); }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border-radius: var(--r);
  box-shadow: var(--sh); padding: 1.75rem;
  transition: transform .22s, box-shadow .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.card-dark {
  background: #1A0610; border: 1px solid rgba(194,65,90,.18);
  border-radius: var(--r); padding: 1.75rem;
}

/* ---------- Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }

/* ---------- Footer ---------- */
footer {
  background: var(--bgd);
  border-top: 1px solid rgba(194,65,90,.12);
  padding: 4rem 2rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand img { height: 52px; margin-bottom: 1rem; filter: drop-shadow(0 0 8px rgba(194,65,90,.3)) brightness(1.05); }
.footer-brand span { font-size: 1.5rem; font-weight: 800; color: var(--rose); display: block; margin-bottom: .75rem; }
.footer-brand p { color: rgba(255,255,255,.42); font-size: .88rem; line-height: 1.75; max-width: 280px; }
.footer-socials { display: flex; gap: .75rem; margin-top: 1.25rem; }
.footer-socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: rgba(255,255,255,.5);
  transition: all .2s;
}
.footer-socials a:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }
.footer-col h4 { color: rgba(255,255,255,.55); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col ul a { color: rgba(255,255,255,.45); font-size: .88rem; transition: color .2s; }
.footer-col ul a:hover { color: var(--rose); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 1.75rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { color: rgba(255,255,255,.28); font-size: .82rem; }
.footer-legal { display: flex; gap: 2rem; }
.footer-legal a { color: rgba(255,255,255,.28); font-size: .82rem; transition: color .2s; }
.footer-legal a:hover { color: var(--rose); }

/* ---------- Forms (login/signup) ---------- */
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: .86rem; font-weight: 600; color: var(--slate); margin-bottom: .45rem; }
.form-control {
  width: 100%; padding: .8rem 1.1rem;
  border: 1.5px solid #E2E8F0; border-radius: 12px;
  font-size: .95rem; font-family: var(--font); color: var(--slate);
  background: var(--white); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(194,65,90,.12); }
textarea.form-control { min-height: 130px; resize: vertical; }
select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.checkbox-row { display:flex; gap:.65rem; align-items:flex-start; color:var(--slate); font-size:.92rem; line-height:1.5; }
.checkbox-row input { margin-top:.22rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --nav-h: 82px; }
  nav { padding: 0 1.25rem; }
  .nav-logo img { height: 56px; }
  .nav-links { gap: 0; }
  .nav-item > a { padding: .5rem .65rem; font-size: .86rem; }
  .nav-auth .btn-nav-login { display: none; }
}

@media (max-width: 900px) {
  .nav-links, .nav-auth { display: none !important; }
  .nav-toggle { display: block; }
  .nav-inner { justify-content: space-between; }
  .nav-logo img { height: 54px; }
  .container, .container--sm { padding-left: 1.2rem; padding-right: 1.2rem; }
  .grid-2, .grid-3, .grid-4, .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-legal { gap: 1rem; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  :root { --nav-h: 76px; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  nav { height: var(--nav-h); padding: 0 .9rem; }
  .nav-logo img { height: 48px; }
  .mob-nav { padding: calc(var(--nav-h) + 1rem) 1.1rem 2rem; }
  h1 { font-size: clamp(2rem, 10vw, 2.85rem); }
  h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .ph { padding: calc(var(--nav-h) + 3rem) 1rem 3.2rem; }
  .ph p { font-size: 1rem; }
  .section { padding: 3.4rem 0; }
  .section-lg { padding: 4.2rem 0; }
  .section-hdr { margin-bottom: 2.2rem; }
  .card, .card-dark { padding: 1.2rem; }
  .btn, .btn-lg { width: 100%; padding: .95rem 1.2rem; }
  .mob-auth { flex-direction: column; }
  footer { padding: 3rem 1.2rem 1.5rem; }
}


/* ============================================================
   V19 Mobile Header + Menu Redesign
   Inspired by clean mobile menu structure: logo left, Menu pill right.
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
@media (max-width: 900px) {
  :root { --nav-h: 96px; }
  nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-h);
    padding: 0 1.15rem;
    background: linear-gradient(180deg, rgba(13,2,8,.99), rgba(22,4,12,.98));
    border-bottom: 1px solid rgba(244,160,176,.12);
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
  }
  .nav-inner { width: 100%; max-width: 100%; }
  .nav-logo { display:flex; align-items:center; min-width: 0; }
  .nav-logo img {
    height: 68px;
    width: 116px;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 0 12px rgba(194,65,90,.36)) brightness(1.08);
  }
  .nav-links,
  .nav-auth { display: none !important; }
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 54px;
    padding: 0 1.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .nav-toggle[aria-expanded="true"] {
    background: var(--rose);
    border-color: rgba(244,160,176,.35);
    box-shadow: 0 12px 28px rgba(194,65,90,.25);
  }
  .nav-toggle span { display:none !important; }
  .mob-nav {
    position: fixed;
    z-index: 999;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: auto;
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(13,2,8,.99), rgba(39,8,20,.98));
    border-bottom: 1px solid rgba(244,160,176,.14);
    padding: 1.35rem 1.25rem 1.55rem;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .mob-nav.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  .mob-section { margin: 0 0 .8rem; }
  .mob-section-label {
    color: #F4A0B0;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .65rem .95rem .5rem;
  }
  .mob-nav a.mob-link {
    display:block;
    color: rgba(255,255,255,.88);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 1rem 1.1rem;
    margin-bottom: .35rem;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
  }
  .mob-nav a.mob-link:hover,
  .mob-nav a.mob-link:focus { background: rgba(194,65,90,.22); color: var(--white); }
  .mob-auth {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    margin-top: 1.2rem;
  }
  .mob-auth a {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height: 58px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 850;
  }
  .mob-login { background: rgba(255,255,255,.055); color: var(--white); border:1px solid rgba(255,255,255,.18); }
  .mob-signup { background: var(--rose); color: var(--white); box-shadow:0 12px 26px rgba(194,65,90,.28); }

  .ph { padding-top: 4.8rem; }
}

@media (max-width: 560px) {
  :root { --nav-h: 92px; }
  nav { padding: 0 1rem; }
  .nav-logo img { height: 64px; width: 118px; }
  .nav-toggle { min-width: 104px; height: 52px; font-size: 1rem; padding: 0 1.25rem; }
  .container, .container--sm { padding-left: 1.05rem; padding-right: 1.05rem; }
}


/* V22 logo standardization */
.nav-logo img{
  width:92px !important;
  height:92px !important;
  object-fit:contain !important;
  border-radius:0 !important;
  background:transparent !important;
}
.auth-logo-link,
.hero-corner-logo{
  position:absolute;
  top:clamp(1.2rem,3vw,2.2rem);
  left:clamp(1.2rem,4vw,4rem);
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.auth-logo-link img,
.hero-corner-logo img{
  width:clamp(92px,11vw,138px);
  height:clamp(92px,11vw,138px);
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));
}
.hero-logo-panel,
.hero-wordmark,
.auth-wordmark,
.auth-corner-wordmark{
  display:none !important;
}
@media(max-width:768px){
  .nav-logo img{
    width:72px !important;
    height:72px !important;
  }
  .auth-logo-link,
  .hero-corner-logo{
    top:1rem;
    left:1rem;
  }
  .auth-logo-link img,
  .hero-corner-logo img{
    width:74px;
    height:74px;
  }
}

/* V23 duplicate homepage hero logo cleanup */
.hero-corner-logo{display:none!important}


/* V24 all-pages duplicate logo cleanup */
.hero-corner-logo,
.hero-logo-panel,
.hero-wordmark,
.auth-wordmark,
.auth-corner-wordmark,
.hero-small-logo-text,
.auth-small-logo-text{display:none!important}
.nav-logo img{
  width:92px!important;
  height:92px!important;
  object-fit:contain!important;
}
@media(max-width:768px){
  .nav-logo img{width:72px!important;height:72px!important}
}


/* V25 auth double-logo fix */
.single-auth-logo{
  position:absolute;
  top:clamp(1.2rem,3vw,2.2rem);
  left:clamp(1.2rem,4vw,4rem);
  z-index:10;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}
.single-auth-logo img{
  width:clamp(92px,11vw,138px);
  height:clamp(92px,11vw,138px);
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));
}
@media(max-width:768px){
  .single-auth-logo{top:1rem;left:1rem}
  .single-auth-logo img{width:74px;height:74px}
}


/* V26 final auth duplicate-logo cleanup */
.auth-brand,
.auth-mobile-brand{display:none!important}


/* V27 mobile display and overflow fix */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
*{box-sizing:border-box}
img, video, iframe, canvas, svg{
  max-width:100%;
}
.container,
.container--sm,
.section,
.ph,
.article-body,
.auth-container,
.auth-right,
.auth-left{
  max-width:100%;
}

/* Main header structure */
.nav{
  width:100%;
  max-width:100vw;
  overflow:visible;
}
.nav-inner{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.nav-logo{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-logo img{
  width:92px!important;
  height:92px!important;
  object-fit:contain!important;
  display:block;
}

/* Mobile navigation: hide desktop links completely */
.mobile-menu-btn{
  display:none;
  appearance:none;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:.85rem 1.25rem;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
}
.mobile-menu{
  display:none;
}
@media(max-width:980px){
  .nav{
    position:sticky;
    top:0;
    z-index:1000;
    background:#120711;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-inner{
    min-height:116px;
    padding:.75rem 1.25rem!important;
  }
  .nav-logo img{
    width:86px!important;
    height:86px!important;
  }
  .nav-links,
  .nav-cta,
  .nav-actions,
  .dropdown,
  .desktop-only{
    display:none!important;
  }
  .mobile-menu-btn{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    margin-left:auto;
  }
  .mobile-menu{
    display:none;
    width:100%;
    background:#120711;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:.6rem 1.25rem 1.4rem;
  }
  .mobile-menu.open,
  .mobile-menu.is-open,
  body.menu-open .mobile-menu{
    display:block!important;
  }
  .mobile-menu a,
  .mob-link{
    display:block;
    width:100%;
    padding:1rem 1.1rem;
    border-radius:16px;
    color:#fff!important;
    text-decoration:none;
    font-weight:700;
    margin:.25rem 0;
  }
  .mobile-menu a:hover,
  .mobile-menu a.active,
  .mob-link.active{
    background:rgba(255,255,255,.08);
  }
  .mobile-menu .btn,
  .mobile-menu .mobile-cta{
    margin-top:.75rem;
    text-align:center;
    background:#C13B64;
    color:#fff!important;
    border-radius:999px;
  }
}
@media(max-width:560px){
  .nav-inner{
    min-height:104px;
    padding:.7rem 1rem!important;
  }
  .nav-logo img{
    width:74px!important;
    height:74px!important;
  }
  .mobile-menu-btn{
    padding:.72rem 1.05rem;
    font-size:.95rem;
  }
}

/* Hero and page headers should not exceed mobile viewport */
.hero,
.hero-bg,
.hero-overlay,
.page-hero,
.ph,
.auth-page,
.auth-container{
  width:100%;
  max-width:100vw;
  overflow:hidden;
}
.hero-inner{
  width:100%;
  max-width:1240px;
  margin:0 auto;
}
@media(max-width:980px){
  .hero{
    min-height:auto!important;
  }
  .hero-inner{
    display:block!important;
    text-align:center!important;
    padding:3.5rem 1rem 4rem!important;
  }
  .hero h1{
    font-size:clamp(2.1rem,10vw,3.8rem)!important;
    line-height:1.06!important;
    max-width:100%;
    overflow-wrap:break-word;
  }
  .hero-sub,
  .hero p{
    max-width:100%!important;
    overflow-wrap:break-word;
  }
  .hero-actions{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:1rem!important;
  }
  .hero-actions .btn,
  .hero .btn{
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
  }
}

/* Prevent large feature/mockup images from causing sideways scrolling */
.feature-visual,
.phone-mockup,
.step-visual,
.mockup,
.device-frame,
.screenshot-frame,
[class*="mockup"],
[class*="device"],
[class*="visual"]{
  max-width:100%!important;
  overflow:hidden;
}
.feature-visual img,
.phone-mockup img,
.step-visual img,
.mockup img,
.device-frame img,
.screenshot-frame img,
[class*="mockup"] img,
[class*="device"] img,
[class*="visual"] img{
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}
@media(max-width:768px){
  .grid,
  .features-grid,
  .steps-grid,
  .team-grid,
  .blog-grid,
  .cards-grid,
  .pricing-grid{
    grid-template-columns:1fr!important;
  }
  .section{
    padding-left:1rem!important;
    padding-right:1rem!important;
  }
  .ph{
    padding-left:1rem!important;
    padding-right:1rem!important;
  }
  .ph h1,
  .section h1{
    font-size:clamp(2rem,9vw,3.2rem)!important;
    line-height:1.1!important;
    overflow-wrap:break-word;
  }
}

/* Auth pages should be clean on mobile and no logo duplication */
.auth-brand,
.auth-mobile-brand,
.hero-corner-logo,
.hero-logo-panel,
.hero-wordmark,
.auth-wordmark,
.auth-corner-wordmark,
.hero-small-logo-text,
.auth-small-logo-text{
  display:none!important;
}
.single-auth-logo{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:10;
}
.single-auth-logo img{
  width:74px!important;
  height:74px!important;
  object-fit:contain!important;
}
@media(min-width:769px){
  .single-auth-logo img{
    width:112px!important;
    height:112px!important;
  }
}


/* ============================================================
   V28 — COMPREHENSIVE MOBILE FIX
   Single authoritative override — eliminates all prior conflicts
   ============================================================ */

/* ── 1. NAV: always position: fixed, never sticky ──────────── */
nav { position: fixed !important; }

/* ── 2. Kill the orphaned .mobile-menu div (no JS bound) ───── */
.mobile-menu { display: none !important; }

/* ── 3. Consolidated mobile breakpoint (≤980px) ─────────────── */
@media (max-width: 980px) {

  /* Nav height — single source of truth */
  :root { --nav-h: 88px; }
  nav { height: var(--nav-h) !important; }

  /* Nav inner — logo left, Menu button right, no overflow */
  .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 1.25rem !important;
    min-height: unset !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hide desktop items */
  .nav-links,
  .nav-auth { display: none !important; }

  /* Hide old .nav-toggle button — .mobile-menu-btn takes over */
  .nav-toggle { display: none !important; }

  /* Logo size on mobile */
  .nav-logo img {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
  }

  /* ── Active "Menu" button ─────────────────────────────────── */
  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    height: 50px;
    padding: 0 1.35rem;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: var(--white);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .01em;
    font-family: var(--font);
    transition: background .2s, border-color .2s, box-shadow .2s;
    flex-shrink: 0;
  }
  .mobile-menu-btn[aria-expanded="true"] {
    background: var(--rose) !important;
    border-color: rgba(244,160,176,.4) !important;
    box-shadow: 0 8px 24px rgba(194,65,90,.28) !important;
  }

  /* ── MOB-NAV: single working slide-down menu ─────────────── */
  .mob-nav {
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    max-height: calc(100dvh - var(--nav-h)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #0D0208 0%, #180610 100%) !important;
    border-bottom: 1px solid rgba(194,65,90,.2) !important;
    padding: 1.25rem 1.2rem 2rem !important;
    box-shadow: 0 24px 48px rgba(0,0,0,.4) !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
    z-index: 999 !important;
  }
  .mob-nav.open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* iOS Safari scroll-lock: use position:fixed on body */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    /* preserve scroll position via top */
  }

  /* Hero .ph — correct top padding (nav is fixed, so we still need padding-top) */
  .ph {
    padding-top: calc(var(--nav-h) + 3rem) !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  /* Grids go 1-column */
  .grid-2, .grid-3, .grid-4,
  .steps-grid, .feats-row, .testi-grid,
  .footer-grid, .pricing-grid, .blog-grid,
  .team-grid, .features-grid, .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .footer-grid { gap: 2rem !important; }
}

/* ── 4. Small phones (≤560px) ───────────────────────────────── */
@media (max-width: 560px) {
  :root { --nav-h: 80px; }
  nav { height: var(--nav-h) !important; }

  .nav-inner { padding: 0 1rem !important; }
  .nav-logo img { width: 62px !important; height: 62px !important; }
  .mobile-menu-btn { min-width: 96px !important; height: 46px !important; font-size: .92rem !important; }

  .ph {
    padding-top: calc(var(--nav-h) + 2.5rem) !important;
    padding-bottom: 3rem !important;
  }

  /* Stack buttons on small phones */
  .waitlist-actions, .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .85rem !important;
  }
  .waitlist-actions .btn, .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .btn-lg { width: 100%; }

  /* Store badge row */
  .store-badges {
    flex-direction: column !important;
    align-items: center !important;
    gap: .85rem !important;
  }
  .store-badge-img { height: 46px !important; }

  /* Mob-nav section links */
  .mob-nav a.mob-link {
    font-size: .97rem !important;
    padding: .9rem 1rem !important;
  }
}

/* ── 5. No horizontal overflow anywhere ─────────────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
img, video, svg, iframe, canvas, table {
  max-width: 100% !important;
}

/* ── 6. Auth pages (login.html, signup.html) ─────────────────── */
@media (max-width: 960px) {
  .auth-right {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 5.5rem 1.5rem 2.5rem !important;
  }
  .auth-left { display: none !important; }
  body > .auth-right { display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 480px) {
  .auth-right { padding: 5rem 1.1rem 2rem !important; }
  .auth-header h1 { font-size: 1.55rem !important; }
  .form-row { grid-template-columns: 1fr !important; }
}

/* Auth page logo (single-auth-logo) */
.single-auth-logo {
  position: fixed !important;
  top: 1rem !important;
  left: 1.2rem !important;
  z-index: 200 !important;
  display: inline-flex !important;
}
.single-auth-logo img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)) !important;
}
@media (min-width: 961px) {
  .single-auth-logo img {
    width: 110px !important;
    height: 110px !important;
  }
}