@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }

/* ── CSS VARIABLES — LIGHT MODE ── */
:root {
  --bg:       #F4F0EA;
  --bg-alt:   #EDE8DF;
  --bg-dark:  #0A0806;
  --surface:  #FFFFFF;
  --border:   #E0D9CF;
  --text:     #1A1612;
  --sub:      #5A5248;
  --muted:    #9A9088;
  --red:      #C8191A;
  --orange:   #E8650A;
  --gold:     #C9A84C;
  --nav-bg:   rgba(244,240,234,0.94);
  --nav-border: #E0D9CF;
  --footer-bg: #0A0806;
  --shadow:   0 2px 24px rgba(0,0,0,0.07);
  --transition: 0.3s ease;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg:       #0A0806;
  --bg-alt:   #111009;
  --bg-dark:  #F4F0EA;
  --surface:  #141210;
  --border:   #1E1A17;
  --text:     #F0EAE0;
  --sub:      #9A9088;
  --muted:    #4A4440;
  --nav-bg:   rgba(10,8,6,0.94);
  --nav-border: #1E1A17;
  --footer-bg: #060504;
  --shadow:   0 2px 24px rgba(0,0,0,0.3);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

/* ── GRAIN ── */
.grain {
  position: fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.03; pointer-events:none; z-index:9997;
}

/* ── NAV ── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 48px; height:64px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-border);
  transition: box-shadow var(--transition), background var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow); }
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo .px-mark {
  width:30px; height:30px; background:var(--red);
  border-radius:3px; display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:13px;
  color:#fff; letter-spacing:0.05em; flex-shrink:0;
}
.nav-logo-text {
  font-family:'Bebas Neue',sans-serif;
  font-size:20px; letter-spacing:0.12em; color:var(--text);
}
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a {
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); transition:color var(--transition);
}
.nav-links a:hover, .nav-links a.active { color:var(--orange); }
.nav-right { display:flex; align-items:center; gap:16px; }

/* Theme toggle */
.theme-toggle {
  width:40px; height:22px; background:var(--border);
  border-radius:11px; border:none; position:relative;
  transition:background var(--transition); cursor:pointer;
  flex-shrink:0;
}
.theme-toggle::after {
  content:''; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--text); transition:transform var(--transition), background var(--transition);
}
[data-theme="dark"] .theme-toggle { background:var(--orange); }
[data-theme="dark"] .theme-toggle::after { transform:translateX(18px); background:#fff; }

.nav-cta {
  background:var(--red); color:#fff;
  padding:9px 20px; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  border:none; transition:background var(--transition);
  display:inline-block;
}
.nav-cta:hover { background:var(--orange); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:4px; cursor:pointer;
}
.hamburger span {
  display:block; width:22px; height:1.5px;
  background:var(--text); transition:all 0.3s;
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

/* Mobile menu */
.mobile-menu {
  display:none; position:fixed;
  top:64px; left:0; right:0;
  background:var(--nav-bg); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--nav-border);
  z-index:999; flex-direction:column;
  max-height:0; overflow:hidden; transition:max-height 0.4s ease;
}
.mobile-menu.open { max-height:500px; }
.mobile-menu a {
  padding:16px 24px; font-size:13px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--sub); border-bottom:1px solid var(--border);
  transition:color var(--transition);
}
.mobile-menu a:hover { color:var(--orange); }
.mobile-menu .mob-cta {
  background:var(--red); color:#fff !important;
  text-align:center; padding:18px 24px; margin:0;
}

/* ── BUTTONS ── */
.btn-primary {
  background:var(--red); color:#fff;
  padding:14px 32px; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  border:none; display:inline-block; transition:background var(--transition);
}
.btn-primary:hover { background:var(--orange); }
.btn-outline {
  border:1px solid var(--border); color:var(--sub);
  padding:13px 31px; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  background:transparent; display:inline-block; transition:all var(--transition);
}
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }
.btn-dark {
  background:var(--text); color:var(--bg);
  padding:14px 32px; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  border:none; display:inline-block; transition:background var(--transition);
}
.btn-dark:hover { background:var(--red); }
.btn-wa {
  background:#25D366; color:#fff;
  padding:14px 24px; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
  transition:opacity var(--transition);
}
.btn-wa:hover { opacity:0.85; }

/* ── SECTION LABELS ── */
.eyebrow {
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--orange); margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before {
  content:''; width:20px; height:1px;
  background:var(--orange); display:inline-block; flex-shrink:0;
}
.eyebrow-white { color:rgba(255,255,255,0.5); }
.eyebrow-white::before { background:var(--orange); }

/* Section title */
.sec-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,6vw,72px);
  line-height:0.88; letter-spacing:-0.01em; color:var(--text);
}
.sec-title span { color:var(--orange); }
.sec-title-white { color:#fff; }

/* ── TICKER ── */
.ticker-bar { background:var(--red); padding:13px 0; overflow:hidden; }
.ticker-track {
  display:flex; animation:tick 32s linear infinite;
  white-space:nowrap; width:max-content;
}
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.t-item {
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); margin:0 36px;
}
.t-dot { color:rgba(255,255,255,0.3); margin:0 8px; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background:var(--bg-dark); padding:80px 48px 72px;
  position:relative; overflow:hidden; padding-top:calc(64px + 80px);
}
[data-theme="dark"] .page-hero { background:#060504; }
.page-hero-ghost {
  position:absolute; top:-20px; right:-10px;
  font-family:'Bebas Neue',sans-serif; font-size:260px;
  color:rgba(255,255,255,0.03); line-height:1;
  pointer-events:none; letter-spacing:-0.02em;
}
.page-hero-eyebrow {
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--orange); margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.page-hero-eyebrow::before {
  content:''; width:28px; height:1px; background:var(--orange); display:inline-block;
}
.page-hero h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,8vw,96px);
  line-height:0.9; color:#fff; letter-spacing:-0.01em; margin-bottom:24px;
}
.page-hero h1 span { color:var(--orange); }
.page-hero-sub {
  font-size:15px; color:rgba(255,255,255,0.45);
  max-width:520px; line-height:1.85; font-weight:300;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-28px); transition:opacity 0.75s ease, transform 0.75s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(28px); transition:opacity 0.75s ease, transform 0.75s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ── FOOTER ── */
.site-footer { background:var(--footer-bg); padding:56px 48px; }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.footer-logo-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:26px; letter-spacing:0.1em; color:#fff; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.footer-logo-name .px-mark { background:var(--red); }
.footer-desc { font-size:13px; color:#333; line-height:1.8; max-width:280px; }
.footer-social { display:flex; gap:16px; margin-top:20px; }
.footer-social a {
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:#333; transition:color var(--transition);
}
.footer-social a:hover { color:var(--orange); }
.footer-col-title {
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--orange); margin-bottom:20px;
}
.footer-links-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links-list a { font-size:13px; color:#333; transition:color var(--transition); }
.footer-links-list a:hover { color:var(--orange); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; flex-wrap:wrap; gap:12px;
}
.footer-copy { font-size:11px; color:#252018; }

/* ── WA FLOAT ── */
.wa-float {
  position:fixed; bottom:28px; right:28px;
  width:52px; height:52px; background:#25D366;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  z-index:996; box-shadow:0 4px 20px rgba(37,211,102,0.3);
  transition:transform var(--transition);
}
.wa-float:hover { transform:scale(1.1); }

/* ── RESPONSIVE ── */
@media(max-width:960px) {
  .nav { padding:0 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:flex; }
  .nav-cta { display:none; }
  .page-hero { padding:calc(64px + 48px) 24px 48px; }
  .site-footer { padding:48px 24px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:600px) {
  .footer-top { grid-template-columns:1fr; }
}