:root{
  --bg:#0b0b0b;
  --surface:#121212;
  --text:#f2f2f2;
  --muted:#b9b9b9;
  --gold:#c9a25f;
  --line:#1f1f1f;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial}
#app{height:100%;display:flex;flex-direction:column}

/* Top bar */
.topbar{height:56px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); position: sticky; top: 0; z-index: 100;}
.logo{width:36px;height:36px;object-fit:contain}
.brand{display:flex;flex-direction:column;line-height:1}
.title{font-weight:600;letter-spacing:0.4px}
.sub{font-size:12px;color:var(--muted)}
.cta{margin-left:auto;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:8px 12px;border-radius:10px}

/* Stage */
.content-scroll{flex:1;overflow-y:auto;padding-top:1px;}

/* New Section Styling */
.section{padding-bottom: 32px;}
.section-title{padding: 0 12px; margin: 0 0 16px; font-size: 24px; font-weight: 600;}
.padded { padding: 0 12px; }

/* Hero */
.hero-section{min-height: calc(100vh - 56px); position: relative; padding-bottom: 0;}
.hero{height:100%;display:grid;grid-template-rows:1fr auto}
.hero>img{width:100%;height:100%;object-fit:cover;filter:saturate(0.9) contrast(1.05) brightness(0.9)}
.heroCopy{position:absolute;left:12px;right:12px;bottom:140px;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.7));padding:16px 12px;border-radius:12px}
.heroCopy h1{margin:0 0 6px;font-size:24px}
.heroCopy p{margin:0 0 10px;color:var(--muted);font-size:14px}
.heroActions{display:flex;gap:8px}
.btn{border:none;border-radius:12px;padding:10px 14px}
.btn.primary{background:var(--gold);color:black}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn.sm{padding:8px 12px;border-radius:10px}

/* Highlights */
.highlights{position:absolute;left:12px;right:12px;bottom:40px;display:flex;gap:8px;justify-content:space-between}
.highlight{flex: 1; text-align: center; background:rgba(255,255,255,0.08);border:1px solid var(--line);backdrop-filter:blur(6px);padding:8px 10px;border-radius:12px;display:flex;flex-direction:column}
.highlight .h1{font-weight:600;font-size:12px}
.highlight span{font-size:11px;color:var(--muted)}

/* Carousel */
.carousel{display:flex;align-items:center;gap:4px;padding: 0 12px;}
.viewport{overflow:hidden; height: 360px; flex: 1;}
.track{display:flex;height:100%;transition:transform .24s ease; padding-right: 12px;}
.card{min-width:calc(100vw - 64px); max-width: 360px; display:grid;grid-template-rows:55% 1fr;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden; margin-right: 12px;}
.card:last-child { margin-right: 0; }
.card img{width:100%;height:100%;object-fit:cover}
.meta{padding:10px;display:flex;flex-direction:column;gap:6px; justify-content: space-between;}
.priceRow{display:flex;justify-content:space-between;align-items:center}
.price{color:var(--gold);font-weight:600}
.nav{width:44px;height:44px;border-radius:50%; border:1px solid var(--line);background:rgba(255,255,255,0.04);color:var(--text)}

/* Copy panels */
.copy{padding:14px;display:flex;flex-direction:column;gap:8px}
.statement-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 8px;
}
.statement-item h3 {
    color: var(--gold);
    margin: 0 0 8px;
    font-size: 18px;
}
.statement-item p {
    margin: 0 0 12px;
    color: var(--muted);
}
.copy h2{margin:0}
.copy p{margin:0;color:var(--muted)}
.bullets{margin:6px 0 0;padding-left:18px;color:var(--text)}
.bullets li{margin-bottom:6px}

/* Contact */
.contact-section { margin-bottom: 40px; }
.contact{display:flex;align-items:center;justify-content:center;padding: 12px 0;}
.contactCard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;width:100%; max-width:400px;}
.contact h3 { margin: 0; }
.contact .actions{display:flex;gap:8px}
.small{font-size:12px;color:var(--muted); text-align: center; margin-top: 4px;}