*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#C9A84C;--gold-light:#E8C96B;--gold-dim:#6A5820;--cream:#F0E8D8;--bg:#060608;--text:rgba(240,232,216,0.65)}
body{background:var(--bg);color:var(--cream);font-family:'Jost',sans-serif;font-weight:300}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 3.2rem;background:linear-gradient(to bottom,rgba(4,4,6,0.9),transparent);transition:background 0.3s}
.nav.scrolled{background:rgba(4,4,6,0.97)}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.logo span{font-style:italic;font-weight:300;color:rgba(240,232,216,0.55)}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(240,232,216,0.45);text-decoration:none;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--cream)}
.nav-links a.active{border-bottom:1px solid var(--gold);padding-bottom:2px}

/* HERO */
.hero{height:100vh;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,4,6,0.9) 0%,rgba(4,4,6,0.35) 50%,rgba(4,4,6,0.1) 100%),linear-gradient(to right,rgba(4,4,6,0.55) 0%,transparent 55%)}
.hero-content{position:relative;z-index:2;padding:5rem 3.5rem;max-width:660px}
.hero-label{font-size:0.58rem;letter-spacing:0.38em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block}
h1{font-family:'Cormorant Garamond',serif;font-size:clamp(3.5rem,7vw,6rem);font-weight:300;line-height:1.02;color:#fff;margin-bottom:1.2rem}
h1 em{font-style:italic;display:block}
.hero-p{font-size:0.85rem;line-height:2;color:rgba(255,255,255,0.6);max-width:440px;margin-bottom:2rem}
.btn{display:inline-flex;align-items:center;font-size:0.6rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--gold);text-decoration:none;border:1px solid var(--gold-dim);padding:0.85rem 1.8rem;transition:0.25s}
.btn:hover{background:rgba(201,168,76,0.1);border-color:var(--gold)}

/* LAYOUT */
.container{max-width:1060px;margin:0 auto;padding:0 3.5rem}
.alt-section{background:rgba(255,255,255,0.018);border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05)}
.section{padding:6rem 0}
.section-tag{font-size:0.57rem;letter-spacing:0.38em;text-transform:uppercase;color:var(--gold);margin-bottom:0.8rem;display:block}
.divider{width:44px;height:1px;background:linear-gradient(to right,transparent,var(--gold-dim),transparent);margin:1.2rem 0 2.4rem}
h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:300;color:var(--cream);line-height:1.1;margin-bottom:1.6rem}
h2 em{font-style:italic}
.body-text{font-size:0.85rem;line-height:2.2;color:var(--text);max-width:700px}
.body-text+.body-text{margin-top:1.2rem}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.05);margin:3rem 0}
.step{background:var(--bg);padding:2.8rem 2.2rem}
.step-num{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;color:rgba(201,168,76,0.15);line-height:1;margin-bottom:1rem}
.step h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;color:var(--cream);margin-bottom:0.7rem}
.step p{font-size:0.75rem;line-height:1.9;color:rgba(240,232,216,0.4)}

/* BENEFITS */
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(255,255,255,0.04);margin:2rem 0}
.benefit{background:var(--bg);padding:2.4rem;border-left:2px solid transparent;transition:border-color 0.3s}
.benefit:hover{border-left-color:var(--gold-dim)}
.benefit-icon{font-size:1.2rem;margin-bottom:0.8rem;color:var(--gold-dim)}
.benefit h4{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:300;color:var(--cream);margin-bottom:0.5rem}
.benefit p{font-size:0.75rem;line-height:1.9;color:rgba(240,232,216,0.4)}

/* USE CASES */
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,0.04);margin:2rem 0}
.use{background:var(--bg);padding:2.4rem;border-top:1px solid rgba(201,168,76,0.18)}
.use h4{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:300;color:var(--cream);margin-bottom:0.6rem}
.use p{font-size:0.75rem;line-height:1.9;color:rgba(240,232,216,0.4)}

/* CTA */
.cta{background:rgba(201,168,76,0.05);border-top:1px solid rgba(201,168,76,0.12);border-bottom:1px solid rgba(201,168,76,0.12);padding:5rem 3.5rem;text-align:center}
.cta h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:300;color:var(--cream);margin-bottom:0.6rem}
.cta p{font-size:0.82rem;color:rgba(240,232,216,0.35);margin-bottom:2rem}

/* FOOTER */
footer{padding:2.8rem 3.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(255,255,255,0.06)}
.f-logo{font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--gold);text-decoration:none;letter-spacing:0.1em}
.f-links{display:flex;gap:2rem;list-style:none}
.f-links a{font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(240,232,216,0.3);text-decoration:none;transition:color 0.2s}
.f-links a:hover{color:var(--cream)}
.f-copy{font-size:0.58rem;color:rgba(240,232,216,0.2)}

@media(max-width:768px){
  .nav{padding:1.2rem 1.5rem}
  .nav-links{display:none}
  .hero-content{padding:3rem 1.5rem}
  .container{padding:0 1.5rem}
  .steps,.benefits,.uses{grid-template-columns:1fr}
  .cta{padding:3rem 1.5rem}
  footer{flex-direction:column;padding:2rem 1.5rem}
}