@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#0d0d0d; --fg:#f1ead6; --card:#121212; --muted:#a39d8a;
  --primary:#c9a13e; --primary-glow:#f0cf6b; --primary-fg:#0d0d0d;
  --border:#3d3322; --secondary:#1c1c1c;
  --gradient-gold:linear-gradient(135deg,#c9a13e,#f0cf6b);
  --gradient-overlay:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.85) 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Inter',sans-serif; line-height:1.6;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(201,161,62,.08), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(201,161,62,.05), transparent 50%);
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3,h4,h5,h6{font-family:'Cormorant Garamond',serif; font-weight:500; letter-spacing:-.01em; line-height:1.15}

.container{max-width:1280px; margin:0 auto; padding:0 24px}
@media(min-width:768px){.container{padding:0 40px}}

.eyebrow{text-transform:uppercase; letter-spacing:.3em; font-size:12px; color:var(--primary); font-weight:500}
.gold-text{background:var(--gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent}
.gold-divider{height:1px; width:64px; background:rgba(201,161,62,.7); margin:24px 0}
.section-title{font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.01em}
.italic{font-style:italic}

/* Header */
.header{position:sticky; top:0; z-index:50; background:rgba(13,13,13,.85); backdrop-filter:blur(10px); border-bottom:1px solid rgba(61,51,34,.6)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:80px}
.logo-link{display:flex; align-items:center; gap:12px}
.logo-link img{height:40px; width:40px; object-fit:contain}
.logo-text{font-family:'Cormorant Garamond',serif; font-size:24px}
.logo-sub{font-size:10px; text-transform:uppercase; letter-spacing:.25em; color:var(--muted)}

.nav{display:none; align-items:center; gap:32px; font-size:14px}
@media(min-width:1024px){.nav{display:flex}}
.nav a{transition:color .2s}
.nav a:hover, .nav a.active{color:var(--primary)}

.dropdown{position:relative}
.dropdown-btn{background:none; border:none; color:inherit; cursor:pointer; font:inherit; display:flex; align-items:center; gap:4px; padding:0}
.dropdown-btn:hover{color:var(--primary)}
.dropdown-menu{position:absolute; left:0; top:100%; margin-top:8px; background:var(--card); border:1px solid var(--border); min-width:260px; box-shadow:0 20px 40px rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:.2s; z-index:60}
.dropdown:hover .dropdown-menu{opacity:1; visibility:visible}
.dropdown-menu a{display:block; padding:12px 20px; font-size:14px; transition:.2s}
.dropdown-menu a:hover{background:var(--secondary); color:var(--primary)}
.dropdown-menu a.heading{color:var(--primary); border-bottom:1px solid rgba(61,51,34,.6)}

.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 28px; transition:.2s; cursor:pointer; font:inherit; border:none}
.btn-gold{background:var(--gradient-gold); color:var(--primary-fg); font-weight:500}
.btn-gold:hover{opacity:.9}
.btn-outline{border:1px solid rgba(201,161,62,.6); color:var(--fg); background:transparent}
.btn-outline:hover{background:rgba(201,161,62,.1)}
.btn-sm{padding:10px 20px; font-size:14px}

.menu-btn{display:block; background:none; border:none; color:var(--fg); cursor:pointer; padding:8px}
@media(min-width:1024px){.menu-btn{display:none}}
.menu-btn svg{width:24px; height:24px}

.mobile-nav{display:none; border-top:1px solid var(--border); background:var(--card); max-height:80vh; overflow-y:auto}
.mobile-nav.open{display:block}
.mobile-nav-inner{display:flex; flex-direction:column; padding:24px; gap:12px; font-size:14px}
.mobile-nav a{padding:6px 0}
.mobile-nav .sub{padding-left:16px; color:var(--muted)}
.mobile-nav .heading{color:var(--primary); margin-top:8px}

/* Hero */
.hero{position:relative; min-height:640px; height:100vh; display:flex; align-items:center; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-overlay{position:absolute; inset:0; background:var(--gradient-overlay)}
.hero-overlay-2{position:absolute; inset:0; background:rgba(13,13,13,.4)}
.hero-content{position:relative; z-index:1; max-width:768px; animation:fadeUp .7s ease-out both}
.hero h1{font-size:clamp(3rem,7vw,6rem); line-height:1.05; margin:24px 0}
.hero-sub{font-size:clamp(1rem,1.4vw,1.25rem); color:var(--muted); margin-bottom:40px; max-width:640px}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px}
.scroll-hint{position:absolute; bottom:40px; left:50%; transform:translateX(-50%); font-size:11px; text-transform:uppercase; letter-spacing:.4em; color:var(--muted); animation:pulse 2s infinite}

@keyframes fadeUp{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.5} 50%{opacity:1}}

/* Sections */
.section{padding:96px 0}
@media(min-width:768px){.section{padding:128px 0}}
.section-alt{background:rgba(28,28,28,.4); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}

.stats{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(18,18,18,.5)}
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; padding:48px 0; text-align:center}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-num{font-family:'Cormorant Garamond',serif; font-size:clamp(2.25rem,4vw,3rem)}
.stat-label{font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); margin-top:8px}

.grid-2{display:grid; grid-template-columns:1fr; gap:64px; align-items:center}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}

.grid-3{display:grid; grid-template-columns:1fr; gap:24px}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{border:1px solid var(--border); background:rgba(18,18,18,.6); transition:.3s; overflow:hidden; display:block}
.card:hover{border-color:rgba(201,161,62,.6); box-shadow:0 10px 40px -15px rgba(201,161,62,.4)}
.card-img{aspect-ratio:4/3; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:24px}
.card-body h3{font-size:1.5rem; margin-bottom:8px; transition:color .2s}
.card:hover h3{color:var(--primary)}
.card-body p{font-size:14px; color:var(--muted); line-height:1.6}
.card-link{margin-top:16px; font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--primary); display:flex; align-items:center; gap:8px}

.card-pad{padding:32px}

.intro-img{width:100%; height:520px; object-fit:cover}
.intro-quote{position:absolute; bottom:-32px; left:-32px; background:var(--card); border:1px solid rgba(201,161,62,.4); padding:32px; max-width:300px; display:none}
@media(min-width:768px){.intro-quote{display:block}}
.intro-quote p{font-family:'Cormorant Garamond',serif; font-size:1.25rem}

.banner{position:relative; height:480px; display:flex; align-items:center; overflow:hidden}
.banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.banner-overlay{position:absolute; inset:0; background:rgba(13,13,13,.7)}
.banner-content{position:relative; z-index:1; max-width:640px}
.banner-content h2{font-size:clamp(2rem,4vw,3rem); margin:16px 0 20px}

.list-bullets{list-style:none; padding:0}
.list-bullets li{display:flex; gap:12px; padding:8px 0; color:var(--muted)}
.list-bullets li::before{content:"◆"; color:var(--primary); margin-top:2px}

.cta{border:1px solid rgba(201,161,62,.4); padding:48px 24px; text-align:center; background:rgba(18,18,18,.4); position:relative; overflow:hidden}
@media(min-width:768px){.cta{padding:80px}}
.cta-bg{position:absolute; inset:0; background:var(--gradient-gold); opacity:.05}
.cta > *{position:relative}
.cta h2{font-size:clamp(2rem,5vw,4rem); margin:24px 0; max-width:768px; margin-left:auto; margin-right:auto; line-height:1.1}
.cta p{color:var(--muted); max-width:560px; margin:0 auto 40px}

/* Page hero */
.page-hero{padding:96px 0 64px; border-bottom:1px solid var(--border); text-align:center}
.page-hero h1{font-size:clamp(2.5rem,6vw,4.5rem); margin:16px 0}
.page-hero p{color:var(--muted); max-width:640px; margin:0 auto; font-size:1.1rem}

/* Forms */
.form-grid{display:grid; gap:20px; max-width:640px}
.form-grid input, .form-grid textarea{
  background:#1c1c1c; border:1px solid var(--border); padding:14px 16px;
  color:var(--fg); font:inherit; border-radius:4px; width:100%;
}
.form-grid input:focus, .form-grid textarea:focus{outline:none; border-color:var(--primary)}
.form-grid textarea{min-height:140px; resize:vertical}
.form-grid label{font-size:13px; color:var(--muted); margin-bottom:6px; display:block; text-transform:uppercase; letter-spacing:.15em}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border); padding:24px 0}
.faq-q{font-family:'Cormorant Garamond',serif; font-size:1.5rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; user-select:none}
.faq-q::after{content:"+"; color:var(--primary); font-size:1.5rem; transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{display:none; color:var(--muted); margin-top:16px; line-height:1.7}
.faq-item.open .faq-a{display:block}

/* Disclaimer */
.disclaimer{border:1px solid rgba(201,161,62,.5); background:rgba(201,161,62,.05); padding:24px; margin:32px 0; border-radius:4px}
.disclaimer strong{color:var(--primary); display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.15em; font-size:13px}

/* Footer */
.footer{border-top:1px solid var(--border); background:rgba(18,18,18,.7); padding:64px 0 32px; margin-top:64px}
.footer-grid{display:grid; gap:40px; grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer h4{font-family:'Cormorant Garamond',serif; font-size:1.25rem; color:var(--primary); margin-bottom:16px}
.footer ul{list-style:none}
.footer li{padding:6px 0; font-size:14px; color:var(--muted)}
.footer li a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--border); margin-top:48px; padding-top:24px; text-align:center; font-size:13px; color:var(--muted)}

/* Article */
.article{max-width:768px; margin:0 auto; padding:64px 24px}
.article h1{font-size:clamp(2rem,5vw,3.5rem); margin-bottom:24px}
.article .meta{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.2em; margin-bottom:32px}
.article p{margin-bottom:20px; color:var(--fg); line-height:1.8}
.article h2{font-size:2rem; margin:48px 0 16px; color:var(--primary)}

.text-center{text-align:center}
.mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px} .mb-8{margin-bottom:32px}
.mt-4{margin-top:16px} .mt-8{margin-top:32px}
.relative{position:relative}


/* V2 homepage */
.hero-v2{min-height:760px;height:auto;padding:110px 0 70px}
.hero-v2-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:end;z-index:1}
.hero-v2 .hero-content{max-width:unset}
.hero-badges{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.hero-badges span{padding:10px 14px;border:1px solid rgba(201,161,62,.35);background:rgba(12,12,12,.35);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#f1e5c8}
.hero-disclaimer{max-width:760px;margin-top:24px;background:rgba(10,10,10,.42)}
.hero-feature-card{position:relative;z-index:1;border:1px solid rgba(201,161,62,.35);background:linear-gradient(180deg,rgba(16,16,16,.88),rgba(24,18,10,.88));padding:28px;box-shadow:0 18px 60px rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.feature-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.25em;color:var(--primary);margin-bottom:12px}
.hero-feature-card h3{font-size:2rem;margin-bottom:12px}
.hero-feature-card p{color:var(--muted);margin-bottom:18px;line-height:1.75}
.list-bullets.compact li{padding:6px 0;font-size:14px}
.stats-v2{margin-top:-1px}
.themed-spotlight .intro-img{height:100%;min-height:520px;object-position:center}
@media(max-width:1023px){.hero-v2-grid{grid-template-columns:1fr;align-items:start}.hero-feature-card{max-width:640px}.hero-v2{padding:90px 0 56px}.hero-v2 h1{font-size:clamp(2.6rem,9vw,4.6rem)}}
@media(max-width:640px){.hero-badges{gap:8px}.hero-badges span{font-size:11px;padding:8px 10px}.hero-v2 .hero-actions{flex-direction:column;align-items:flex-start}}
