/* ===== ROOT & BASE ===== */
:root{
    --bg:#f3f4f6;
    --bg-soft:#f8fafc;
    --accent:#facc15;
    --accent-soft:#fbbf24;
    --primary:#2563eb;
    --primary-soft:#1d4ed8;
    --primary-dark:#1e3a8a;
    --text:#1e293b;
    --text-soft:#475569;
    --text-strong:#0f172a;
    --border:rgba(0,0,0,.12);
    --card:rgba(255,255,255,.85);
    --radius-lg:18px;
    --radius-full:999px;
    --shadow-soft:0 18px 45px rgba(15,23,42,.15);
    --shadow-btn:0 10px 30px rgba(15,23,42,.12);
    --text-dim:rgba(15,23,42,.65);
    --nav-height:72px;
    --section-space: 5.5rem;
}
@media(max-width:768px){
  :root{
    --section-space: 4rem;
  }
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none;scroll-behavior:smooth}

/* ===== FONTS (unchanged) ===== */
@font-face{font-family:"Poppins";src:url("/site/fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/site/fonts/Poppins-Medium.woff2") format("woff2"),url("/site/fonts/Poppins-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/site/fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/site/fonts/BricolageGrotesque-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/site/fonts/BricolageGrotesque-Bold.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family:"Poppins",system-ui,sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1,h2,h3,.logo{
margin:0;
font-family:"Bricolage Grotesque",sans-serif;
}

p{margin:0}

a{
color:inherit;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}

button,input,textarea,select{font:inherit}
button{border:none;background:none}

main{flex:1;display:block}

.container{
width:100%;
max-width:1080px;
margin-inline:auto;
padding-inline:1.5rem;
}

:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
}

/* =========================
   NAVBAR (UNCHANGED)
========================= */

.navbar{
position:sticky;
top:0;
z-index:1000;
isolation:isolate;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
background:
linear-gradient(to bottom,rgba(15,23,42,.96),rgba(15,23,42,.88));
border-bottom:1px solid rgba(148,163,184,.2);
}

.nav-flex{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:1.5rem;
min-height:var(--nav-height);
}

/* ===== NAV GROUPS ===== */

.nav-group {
    width: 100%;
}

.nav-group-title {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .6rem 0;
    cursor: pointer;
    position: relative;
}

.nav-group-title::after {
    content: "›";
    position: absolute;
    right: 0;
    transition: transform .2s ease;
    color: rgba(255,255,255,.5);
}

.nav-group.open .nav-group-title::after {
    transform: rotate(90deg);
    color: var(--accent);
}

.nav-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 .5rem 0;
    display: none;
    flex-direction: column;
    gap: .75rem;
}

.nav-group.open .nav-sub {
    display: flex;
}

.nav-sub a {
    font-size: .92rem;
    padding-left: .5rem;
    color: #fff;
    opacity: .9;
}

.nav-sub a:hover {
    color: var(--accent);
    opacity: 1;
}
.nav-cta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.nav-cta p {
    font-size: .85rem;
    color: #ffffff;
    text-transform: none;
    letter-spacing: normal;
}

.nav-cta-btn {
    display: inline-flex;
    justify-content: center;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #facc15, #f97316);
    color: #0f172a;
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
}

.logo-wrap{
position:relative;
z-index:1102;
display:flex;
flex-direction:column;
justify-content:center;
flex-shrink:0;
}

.logo{
display:inline-flex;
align-items:center;
gap:.15rem;
font-size:2.1rem;
font-weight:900;
line-height:1;
letter-spacing:-.5px;
color:#fff;
white-space:nowrap;
}

.logo span{
display:inline-block;
font-weight:900;
transform:scale(1.18);
background:linear-gradient(145deg,#fde68a 0%,#facc15 35%,#d97706 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.logo-tag{
margin-top:4px;
font-size:1rem;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
color:#fff;
white-space:nowrap;
}

/* =========================
   NEW NAV MENU SYSTEM
========================= */

.nav-links{
display:none; /* replaced system */
}

/* Dropdown container */
#mobileMenu{
position:absolute;
top:calc(100% + 12px);
right:0;
width:min(420px, calc(100vw - 2rem));
z-index:1101;

display:flex;
flex-direction:column;
gap:1rem;

padding:1.25rem;

border:1px solid rgba(148,163,184,.18);
border-radius:1.25rem;

background:rgba(15,23,42,.98);
box-shadow:0 25px 60px rgba(0,0,0,.45);

opacity:0;
pointer-events:none;
transform:translateY(-10px) scale(.98);
transform-origin:top right;

transition:.2s ease;
}

#mobileMenu.open{
opacity:1;
pointer-events:auto;
transform:translateY(0) scale(1);
}

/* Sections */
.nav-section{
display:flex;
flex-direction:column;
gap:.25rem;
}

.nav-section-title{
font-size:.75rem;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
color:#94a3b8;
margin-bottom:.4rem;
}

/* Links */
#mobileMenu a{
display:flex;
align-items:center;

min-height:44px;
padding:.75rem .9rem;

border-radius:.85rem;

font-size:.95rem;
font-weight:600;

color:#fff;

transition:.2s ease;
}

#mobileMenu a:hover{
background:rgba(255,255,255,.06);
color:var(--accent);
transform:translateX(3px);
}

/* Divider */
.nav-divider{
height:1px;
background:rgba(148,163,184,.15);
margin:.25rem 0;
}

/* Hamburger always active */
.hamburger{
position:relative;
z-index:1102;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
width:44px;
height:44px;
padding:0;
cursor:pointer;
border-radius:12px;
transition:background .2s ease;
}

.hamburger:hover{background:rgba(255,255,255,.05)}

.hamburger span{
width:28px;
height:4px;
border-radius:999px;
background:#f7ef8a;
transition:transform .25s ease,opacity .25s ease;
}

.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== HERO (UNCHANGED) ===== */

.hero{
display:flex;
align-items:center;
min-height:auto;
padding:3rem 0;
}

.hero .container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
max-width:860px;
text-align:center;
}

.hero-price{
margin-top:1rem;
font-size:1rem;
font-weight:700;
color:#facc15;
}

.hero h1{
margin:1.35rem 0 1rem;
font-size:clamp(2.5rem,5vw,4.2rem);
font-weight:900;
line-height:1.05;
color:var(--text-strong);
}

.hero h1 span{
background:linear-gradient(90deg,#60a5fa,#facc15);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
max-width:42rem;
font-size:1.15rem;
line-height:1.8;
color:#334155;
}

/* ===== MOBILE ===== */

@media (max-width:768px){

.container{padding-inline:1rem}

.logo{font-size:1.95rem}
.logo-tag{font-size:.55rem}

.hero h1{font-size:2.35rem}
.hero p{font-size:.98rem}
}

@media (max-width:480px){
.logo{font-size:1.75rem}
.hero h1{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
*{transition:none!important;scroll-behavior:auto!important}
}

.logo-wrap{
text-decoration:none;
color:inherit;
}

/* =========================
   DESKTOP FIX (CRITICAL)
========================= */

@media (min-width: 769px) {

    /* turn dropdown into real nav container */
    #mobileMenu {
        position: static;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;

        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;

        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    /* groups become inline blocks */
    .nav-group {
        position: relative;
        width: auto;
    }

    /* titles behave like nav labels */
    .nav-group-title {
        padding: .4rem .6rem;
        color: rgba(255,255,255,.85);
        cursor: default;
    }

    .nav-group-title::after {
        display: none;
    }

    /* hover dropdowns on desktop */
    .nav-sub {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;

        display: none !important;
        min-width: 200px;

        background: rgba(15,23,42,.98);
        border: 1px solid rgba(148,163,184,.18);
        border-radius: .9rem;
        padding: .6rem;

        flex-direction: column;
        gap: .25rem;
        z-index: 2000;
    }

    .nav-group {
  position: relative;
}

.nav-sub {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .15s ease;
  display: flex !important;
}

.nav-group:hover .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

    /* CTA aligns right like proper desktop nav */
    .nav-cta {
        margin-top: 0;
        margin-left: auto;
        padding-top: 0;
        border-top: none;
        align-items: flex-end;
    }

    /* hamburger hidden on desktop */
    .hamburger {
        display: none;
    }
}
.nav-flex {
    min-height: 72px;
    align-items: center;
}
      .owner-login-link {
  font-size: .85rem;
  opacity: .7;
}

.owner-login-link:hover {
  opacity: 1;
  color: var(--accent);
  }