*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#D4A017;--gold-light:#E8B830;--gold-dim:rgba(212,160,23,0.12);
  --gold-glow:rgba(212,160,23,0.06);--black:#0A0A0A;--dark:#111111;
  --charcoal:#1A1A1A;--grey:#777;--white:#F0EDE6;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;overflow-x:hidden}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;padding:40px 24px}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 900px 700px at 50% 40%,var(--gold-glow),transparent 70%),radial-gradient(ellipse 400px 400px at 15% 75%,rgba(212,160,23,0.03),transparent),radial-gradient(ellipse 350px 350px at 85% 25%,rgba(212,160,23,0.04),transparent);pointer-events:none}

/* Animated geometric constellation */
.constellation{position:absolute;inset:0;pointer-events:none;opacity:0.07}
.c-line{position:absolute;background:var(--gold);height:1px;transform-origin:0 0;animation:fadeFloat 8s ease-in-out infinite alternate}
.cl1{width:320px;top:12%;left:3%;transform:rotate(22deg);animation-delay:0s}
.cl2{width:180px;top:28%;left:10%;transform:rotate(-18deg);animation-delay:1s}
.cl3{width:260px;top:18%;right:8%;transform:rotate(32deg);animation-delay:0.5s}
.cl4{width:200px;bottom:28%;right:12%;transform:rotate(-25deg);animation-delay:1.5s}
.cl5{width:140px;bottom:22%;left:15%;transform:rotate(45deg);animation-delay:2s}
.cl6{width:240px;top:55%;right:3%;transform:rotate(12deg);animation-delay:0.8s}
.cl7{width:160px;top:70%;left:5%;transform:rotate(-35deg);animation-delay:1.2s}
.c-dot{position:absolute;width:5px;height:5px;background:var(--gold);border-radius:50%;animation:dotPulse 4s ease-in-out infinite alternate}
.cd1{top:12%;left:3%;animation-delay:0s}.cd2{top:28%;left:22%;animation-delay:0.6s}
.cd3{top:16%;right:10%;animation-delay:1.2s}.cd4{bottom:30%;right:12%;animation-delay:0.3s}
.cd5{bottom:24%;left:20%;animation-delay:0.9s}.cd6{top:55%;right:6%;animation-delay:1.5s}
.cd7{top:38%;left:2%;animation-delay:0.4s}.cd8{top:65%;left:40%;animation-delay:1.8s}
.cd9{top:8%;left:50%;animation-delay:0.7s}.cd10{bottom:40%;right:30%;animation-delay:1.1s}
@keyframes fadeFloat{0%{opacity:0.5}100%{opacity:1}}
@keyframes dotPulse{0%{opacity:0.3;transform:scale(0.8)}100%{opacity:1;transform:scale(1.2)}}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:28px 48px;z-index:100;background:linear-gradient(to bottom,rgba(10,10,10,0.9),transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav-logo-img{height:40px;width:auto;display:block}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{color:var(--grey);text-decoration:none;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;transition:color 0.3s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width 0.3s}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{width:100%}

/* Hero content */
.hero-content{text-align:center;position:relative;z-index:2;animation:heroIn 1.2s ease-out both}
@keyframes heroIn{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}

.logo-text{font-size:72px;font-weight:700;color:var(--gold);letter-spacing:0.02em;margin-bottom:8px;line-height:1}
.logo-text .ads{font-weight:400;font-size:52px;letter-spacing:0.08em;vertical-align:baseline}

.hero-rule{width:80px;height:1px;background:var(--gold);margin:24px auto 32px;opacity:0.4}

.hero-tagline{font-family:'Playfair Display',serif;font-size:46px;font-weight:400;line-height:1.25;margin-bottom:20px;animation:heroIn 1.2s ease-out 0.2s both}
.hero-tagline .line1{color:var(--gold);font-weight:700;display:block}
.hero-tagline .line2{color:var(--white);font-style:italic;display:block}

.hero-sub{font-size:13px;color:var(--grey);letter-spacing:0.25em;text-transform:uppercase;margin-bottom:52px;animation:heroIn 1.2s ease-out 0.4s both}

.hero-cta{display:inline-flex;align-items:center;gap:14px;padding:18px 42px;border:1px solid rgba(212,160,23,0.5);color:var(--gold);font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;background:transparent;transition:all 0.4s;animation:heroIn 1.2s ease-out 0.6s both}
.hero-cta:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.hero-cta .arr{transition:transform 0.3s;font-size:16px}
.hero-cta:hover .arr{transform:translateX(5px)}

/* Scroll indicator */
.scroll-ind{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2;animation:heroIn 1.2s ease-out 0.8s both}
.scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollP 2.5s ease-in-out infinite}
@keyframes scrollP{0%,100%{opacity:0.2;height:44px}50%{opacity:0.8;height:50px}}
.scroll-label{font-size:9px;color:rgba(255,255,255,0.25);letter-spacing:0.35em;text-transform:uppercase}

/* ===== GOLD DIVIDER ===== */
.gold-div{width:100%;height:1px;background:linear-gradient(to right,transparent 5%,var(--gold-dim) 50%,transparent 95%)}

/* ===== CAMPAIGN SECTION ===== */
.campaign{padding:100px 48px 110px;background:var(--dark);position:relative;overflow:hidden}
.campaign::before{content:'';position:absolute;top:0;right:0;width:400px;height:400px;background:radial-gradient(circle,var(--gold-glow),transparent 70%);pointer-events:none}

.campaign-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;color:var(--gold);letter-spacing:0.3em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
.live-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:0.4;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}

.campaign-title{font-family:'Playfair Display',serif;font-size:40px;color:var(--white);font-weight:700;margin-bottom:6px;letter-spacing:-0.01em}
.campaign-loc{font-size:14px;color:var(--grey);margin-bottom:48px;letter-spacing:0.06em}

/* Stats */
.stats{display:flex;gap:56px;margin-bottom:48px;flex-wrap:wrap}
.stat-num{font-size:40px;font-weight:700;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.stat-lbl{font-size:10px;color:var(--grey);letter-spacing:0.18em;text-transform:uppercase;margin-top:6px}

/* Scarcity */
.scarcity{max-width:480px;margin-bottom:44px}
.sc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sc-text{font-size:13px;color:var(--white);font-weight:500}
.sc-count{font-size:14px;color:var(--gold);font-weight:700}
.sc-bar{width:100%;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}
.sc-fill{width:0%;height:100%;background:linear-gradient(to right,var(--gold),var(--gold-light));border-radius:2px;transition:width 0.8s ease}

/* Features */
.features{display:flex;gap:28px;margin-bottom:48px;flex-wrap:wrap}
.feat{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.5)}
.feat-icon{color:var(--gold);font-size:10px}

/* Campaign CTA */
.camp-cta{display:inline-flex;align-items:center;gap:14px;padding:20px 48px;background:var(--gold);color:var(--black);font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;transition:all 0.35s}
.camp-cta:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,160,23,0.25)}
.camp-cta .arr{font-size:18px;transition:transform 0.3s}
.camp-cta:hover .arr{transform:translateX(5px)}

/* ===== FOOTER ===== */
.footer{padding:40px 48px;background:var(--black);border-top:1px solid rgba(255,255,255,0.04);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-left{font-size:12px;color:rgba(255,255,255,0.25);letter-spacing:0.08em}
.footer-left .g{color:var(--gold);font-weight:600}
.footer-right{font-size:11px;color:rgba(255,255,255,0.2);letter-spacing:0.05em}
.footer-right a{color:var(--gold);text-decoration:none;transition:opacity 0.3s}
.footer-right a:hover{opacity:0.7}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .nav{padding:20px 24px}
  .nav-links{gap:20px}
  .nav-links a{font-size:10px}
  .nav-logo-img{height:30px}
  .logo-text{font-size:48px}
  .logo-text .ads{font-size:36px}
  .hero-tagline{font-size:30px}
  .hero-sub{font-size:11px;letter-spacing:0.15em}
  .hero-cta{padding:14px 28px;font-size:11px}
  .campaign{padding:64px 24px 80px}
  .campaign-title{font-size:28px}
  .stats{gap:32px}
  .stat-num{font-size:28px}
  .features{flex-direction:column;gap:12px}
  .footer{padding:32px 24px;flex-direction:column;align-items:flex-start;gap:12px}
}