/* ============================================================
   DETROIT LED CO — Final Premium Stylesheet
   ============================================================ */

:root {
  --gold:        #C9A84C;
  --gold-light:  #E5C97E;
  --gold-dim:    rgba(201,168,76,0.12);
  --gold-border: rgba(201,168,76,0.22);
  --black:       #030303;
  --surface:     #0C0C0C;
  --surface-2:   #141414;
  --white:       #F5F0E8;
  --muted:       #8A8478;
  --radius:      22px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:'DM Sans',sans-serif; background:var(--black); color:var(--white); line-height:1.65; overflow-x:hidden; }
.container { width:min(1240px,92%); margin:auto; }

/* ── Animations ────────────────────────────────────── */
.fade-in { opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; transition-delay:var(--delay,0s); }
.fade-in.visible { opacity:1; transform:none; }
.delay-1 { --delay:.15s; } .delay-2 { --delay:.3s; } .delay-3 { --delay:.45s; }

/* ── Header ────────────────────────────────────────── */
header {
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(3,3,3,0);
  backdrop-filter:blur(0);
  border-bottom:1px solid transparent;
  transition:background .4s,backdrop-filter .4s,border-color .4s;
}
header.scrolled {
  background:rgba(3,3,3,0.95);
  backdrop-filter:blur(20px);
  border-bottom-color:var(--gold-border);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.logo-link { display:flex; align-items:center; flex-shrink:0; }
.logo { height:130px; width:auto; transition:height .35s ease; }
header.scrolled .logo { height:96px; }

.nav-links { display:flex; gap:34px; }
.nav-links a { color:rgba(245,240,232,.65); text-decoration:none; font-size:.9rem; font-weight:400; letter-spacing:.03em; transition:color .2s; }
.nav-links a:hover { color:var(--gold-light); }

.nav-cta { display:inline-block; padding:11px 26px; background:var(--gold); color:#000; text-decoration:none; font-size:.86rem; font-weight:600; letter-spacing:.04em; border-radius:999px; transition:background .2s,transform .2s; }
.nav-cta:hover { background:var(--gold-light); transform:translateY(-1px); }

/* ── Hamburger ─────────────────────────────────────── */
.hamburger { display:none; flex-direction:column; justify-content:space-between; width:26px; height:18px; background:none; border:none; cursor:pointer; padding:0; z-index:10; }
.hamburger span { display:block; width:100%; height:2px; background:var(--white); border-radius:2px; transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* ── Mobile Menu ───────────────────────────────────── */
.mobile-menu {
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:rgba(5,5,5,0.98);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--gold-border);
  max-height:0; overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open { max-height:500px; }
.mobile-nav { display:flex; flex-direction:column; padding:20px 24px 28px; gap:4px; }
.mobile-link { display:block; padding:14px 0; font-size:1.1rem; font-weight:400; color:rgba(245,240,232,.8); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05); transition:color .2s; }
.mobile-link:hover { color:var(--gold-light); }
.mobile-cta { display:inline-block; margin-top:18px; padding:15px 32px; background:var(--gold); color:#000; text-decoration:none; font-weight:600; font-size:.95rem; border-radius:999px; text-align:center; transition:background .2s; }
.mobile-cta:hover { background:var(--gold-light); }

/* ── Floating CTA ──────────────────────────────────── */
.floating-cta { position:fixed; right:24px; bottom:28px; z-index:800; background:var(--gold); color:#000; text-decoration:none; padding:14px 24px; border-radius:999px; font-weight:600; font-size:.88rem; letter-spacing:.03em; box-shadow:0 8px 30px rgba(201,168,76,.35); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s,transform .3s,background .2s; }
.floating-cta.visible { opacity:1; transform:none; pointer-events:auto; }
.floating-cta:hover { background:var(--gold-light); }

/* ── Hero ──────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding-top:160px; padding-bottom:80px;
  background:
    radial-gradient(ellipse 65% 70% at 72% 50%, rgba(201,168,76,.07) 0%,transparent 65%),
    radial-gradient(ellipse 50% 60% at 15% 80%, rgba(201,168,76,.04) 0%,transparent 60%),
    var(--black);
}
.hero-bg-grain {
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:180px;
}
.hero-lines {
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(90deg,rgba(201,168,76,.035) 1px,transparent 1px),linear-gradient(180deg,rgba(201,168,76,.025) 1px,transparent 1px);
  background-size:80px 80px;
}
.hero-inner { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; position:relative; z-index:2; }

.eyebrow { display:flex; align-items:center; gap:10px; color:var(--gold); font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; margin-bottom:26px; }
.eyebrow-dot { display:block; width:28px; height:1px; background:var(--gold); }

.hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,5.2vw,4.8rem); font-weight:600; line-height:1.07; margin-bottom:24px; }
.hero h1 em { font-style:italic; font-weight:300; color:var(--gold-light); }

.hero-sub { font-size:1.02rem; color:var(--muted); max-width:520px; margin-bottom:38px; font-weight:300; line-height:1.78; }

.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }

.btn-gold { display:inline-block; padding:16px 34px; background:var(--gold); color:#000; text-decoration:none; font-weight:600; font-size:.9rem; letter-spacing:.04em; border-radius:999px; transition:background .2s,transform .2s; }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); }

.btn-outline { display:inline-block; padding:15px 32px; border:1px solid var(--gold-border); color:var(--white); text-decoration:none; font-weight:400; font-size:.9rem; letter-spacing:.04em; border-radius:999px; transition:border-color .2s,color .2s,transform .2s; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }

.hero-pills { display:flex; flex-wrap:wrap; gap:10px; }
.pill { display:flex; align-items:center; gap:7px; padding:8px 16px; border:1px solid var(--gold-border); border-radius:999px; font-size:.8rem; color:rgba(245,240,232,.7); background:var(--gold-dim); }
.pill svg { color:var(--gold); flex-shrink:0; }

.hero-visual { position:relative; display:flex; justify-content:center; }
.screen-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:280px; height:500px; background:radial-gradient(ellipse,rgba(201,168,76,.2) 0%,transparent 70%); pointer-events:none; border-radius:50%; }
.screen-img { width:100%; max-width:360px; display:block; margin:auto; position:relative; z-index:1; filter:drop-shadow(0 24px 60px rgba(0,0,0,.75)); }

/* ── Stats Bar ─────────────────────────────────────── */
.stats-bar { background:var(--surface); border-top:1px solid var(--gold-border); border-bottom:1px solid var(--gold-border); padding:0; }
.stats-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; }
.stat-item { display:flex; flex-direction:column; align-items:center; padding:28px 52px; gap:4px; }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:600; color:var(--gold-light); line-height:1; }
.stat-num em { font-style:normal; font-size:1.2rem; font-weight:300; color:var(--gold); margin-left:2px; }
.stat-label { font-size:.72rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-weight:400; }
.stat-divider { width:1px; height:50px; background:var(--gold-border); }

/* ── Sections ──────────────────────────────────────── */
.section { padding:120px 0; }
.section-dark { background:var(--surface); position:relative; }
.section-dark::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gold-border); }
.section-dark::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--gold-border); }

.section-head { text-align:center; margin-bottom:68px; }
.label { display:inline-block; color:var(--gold); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; font-weight:500; }
.section-head h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,3.8vw,3.4rem); font-weight:600; line-height:1.1; margin-bottom:16px; }
.section-head h2 em { font-style:italic; font-weight:300; color:var(--gold-light); }
.section-head p { font-size:.98rem; color:var(--muted); max-width:480px; margin:0 auto; font-weight:300; }

/* ── Gallery Tabs ──────────────────────────────────── */
.gallery-tabs { display:flex; justify-content:center; gap:12px; margin-bottom:50px; }
.gtab { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:999px; border:1px solid var(--gold-border); background:transparent; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:500; letter-spacing:.04em; cursor:pointer; transition:all .25s; }
.gtab:hover { border-color:var(--gold); color:var(--gold-light); }
.gtab.active { background:var(--gold); border-color:var(--gold); color:#000; }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:tabIn .35s ease; }
@keyframes tabIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ── Event Designs Grid ────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px 30px; }
.gallery-card { border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.05); background:var(--surface-2); }
.card-img-wrap { position:relative; aspect-ratio:9/16; overflow:hidden; }
.card-img-wrap img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .6s ease; }
.gallery-card:hover .card-img-wrap img { transform:scale(1.04); }
.card-overlay { position:absolute; bottom:0; left:0; right:0; padding:44px 20px 20px; background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%); }
.card-overlay span { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:500; color:var(--white); }

/* ── Real Photos Grid ──────────────────────────────── */
.display-intro { text-align:center; color:var(--muted); font-size:.95rem; font-weight:300; margin-bottom:40px; }

.real-photos-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto;
  gap:20px;
  margin-bottom:48px;
}

/* Row 1: cards 1-3 fill all 3 columns */
/* Row 2: cards 4-5 are centered — use a nested row */
.real-photos-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:48px;
}
.real-photos-row-2 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:48px;
}
/* Cards 4 and 5 sit in columns 1 and 2 of a 3-col row, with col 3 empty — 
   instead use a 2-col centered approach */
.rp-bottom-row {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  max-width:calc(66.666% + 10px);
  margin:0 auto 48px;
}

.rp-card {
  position:relative; overflow:hidden; border-radius:var(--radius);
  cursor:pointer; background:var(--surface-2);
  border:1px solid rgba(255,255,255,.06);
  aspect-ratio:9/16;
}
.rp-card img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .5s ease; }
.rp-card:hover img { transform:scale(1.04); }
.rp-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
  color:var(--gold-light);
}
.rp-card:hover .rp-overlay { opacity:1; }
.display-cta-row { text-align:center; }

/* ── Lightbox ──────────────────────────────────────── */
.lightbox { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.95); display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.lightbox.open { display:flex; animation:lbFade .25s ease; }
@keyframes lbFade { from{opacity:0} to{opacity:1} }
.lb-img { max-height:88vh; max-width:88vw; object-fit:contain; border-radius:12px; transition:opacity .15s ease; }
.lb-close { position:absolute; top:20px; right:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:var(--white); width:44px; height:44px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lb-close:hover { background:rgba(255,255,255,.18); }
.lb-prev, .lb-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:var(--white); width:48px; height:48px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lb-prev { left:20px; } .lb-next { right:20px; }
.lb-prev:hover, .lb-next:hover { background:rgba(201,168,76,.3); }
.lb-counter { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-size:.8rem; color:rgba(255,255,255,.5); letter-spacing:.1em; }

/* ── How It Works ──────────────────────────────────── */
.steps-grid { display:grid; grid-template-columns:1fr 60px 1fr 60px 1fr; align-items:start; gap:0; }
.step-card { text-align:center; padding:0 16px; }
.step-num { font-family:'Cormorant Garamond',serif; font-size:3.5rem; font-weight:300; color:var(--gold); opacity:.3; line-height:1; margin-bottom:20px; }
.step-icon { width:64px; height:64px; border:1px solid var(--gold-border); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--gold); background:var(--gold-dim); }
.step-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.55rem; font-weight:600; margin-bottom:12px; color:var(--white); }
.step-card p { font-size:.9rem; color:var(--muted); font-weight:300; line-height:1.7; }
.step-connector { display:flex; align-items:center; justify-content:center; padding-top:52px; }
.step-line { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

/* ── Specs ─────────────────────────────────────────── */
.specs-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.specs-img-frame { position:relative; padding:2px; border-radius:30px; background:linear-gradient(145deg,rgba(201,168,76,.35) 0%,rgba(201,168,76,.05) 50%,transparent 100%); }
.specs-img-frame img { width:100%; max-width:300px; display:block; margin:auto; padding:20px; }
.specs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--gold-border); border:1px solid var(--gold-border); border-radius:24px; overflow:hidden; }
.spec-item { display:flex; align-items:flex-start; gap:16px; padding:28px 24px; background:var(--surface); transition:background .2s; }
.spec-item:hover { background:#181818; }
.spec-icon { color:var(--gold); flex-shrink:0; margin-top:3px; }
.spec-item h4 { font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.spec-item p { font-size:.93rem; color:rgba(245,240,232,.72); font-weight:300; }

/* ── Occasions Ticker ──────────────────────────────── */
.occasions-strip { overflow:hidden; border-top:1px solid var(--gold-border); border-bottom:1px solid var(--gold-border); background:var(--surface); padding:18px 0; }
.occasions-track { display:flex; gap:36px; width:max-content; animation:ticker 28s linear infinite; }
.occasions-track:hover { animation-play-state:paused; }
.occasions-track span { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:400; color:rgba(245,240,232,.5); white-space:nowrap; letter-spacing:.05em; }
.occasions-track .occ-sep { color:var(--gold); font-size:.7rem; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Pricing ───────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:820px; margin:0 auto 32px; }
.price-card { position:relative; border-radius:28px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); transition:transform .3s; }
.price-card:hover { transform:translateY(-4px); }
.price-card.featured { border-color:var(--gold-border); background:linear-gradient(150deg,rgba(201,168,76,.14) 0%,rgba(201,168,76,.03) 100%); }
.price-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--gold); color:#000; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 18px; border-radius:999px; white-space:nowrap; }
.price-card-inner { padding:44px 38px; text-align:center; }
.price-label { font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.price-amount { font-family:'Cormorant Garamond',serif; font-size:5rem; font-weight:600; color:var(--white); line-height:1; margin-bottom:6px; }
.price-period { font-size:.83rem; color:var(--muted); font-weight:300; margin-bottom:30px; }
.price-divider { height:1px; background:var(--gold-border); margin:0 -4px 28px; }
.price-list { list-style:none; text-align:left; margin-bottom:32px; }
.price-list li { padding:9px 0; font-size:.9rem; color:rgba(245,240,232,.7); font-weight:300; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.04); }
.price-list li:last-child { border-bottom:none; }
.price-list li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.price-btn-outline { display:block; padding:14px; border:1px solid var(--gold-border); color:var(--white); text-decoration:none; font-size:.88rem; font-weight:500; border-radius:999px; transition:border-color .2s,color .2s; }
.price-btn-outline:hover { border-color:var(--gold); color:var(--gold-light); }
.price-btn-gold { display:block; padding:14px; background:var(--gold); color:#000; text-decoration:none; font-size:.88rem; font-weight:600; border-radius:999px; transition:background .2s; }
.price-btn-gold:hover { background:var(--gold-light); }
.pricing-note { text-align:center; font-size:.86rem; color:var(--muted); font-weight:300; font-style:italic; }

/* ── Contact ───────────────────────────────────────── */
.contact-section { text-align:center; }
.contact-inner { max-width:700px; margin:0 auto; }
.contact-email-btn { display:inline-flex; align-items:center; gap:12px; padding:18px 40px; background:var(--gold); color:#000; text-decoration:none; font-weight:600; font-size:.96rem; border-radius:999px; margin:34px 0 52px; transition:background .2s,transform .2s; }
.contact-email-btn:hover { background:var(--gold-light); transform:translateY(-2px); }
.contact-features { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; }
.contact-feat { padding:26px 22px; border:1px solid var(--gold-border); border-radius:20px; background:rgba(201,168,76,.04); }
.cf-num { display:block; font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; color:var(--gold); opacity:.45; margin-bottom:8px; line-height:1; }
.contact-feat p { font-size:.88rem; color:var(--muted); font-weight:300; line-height:1.65; }

/* ── Footer ────────────────────────────────────────── */
footer { padding:60px 0; border-top:1px solid var(--gold-border); background:#020202; }
.footer-inner { text-align:center; }
.footer-logo { height:108px; margin-bottom:16px; }
.footer-tagline { color:var(--gold); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500; margin-bottom:20px; }
.footer-links { display:flex; justify-content:center; gap:28px; margin-bottom:20px; flex-wrap:wrap; }
.footer-links a { color:rgba(245,240,232,.4); text-decoration:none; font-size:.84rem; transition:color .2s; }
.footer-links a:hover { color:var(--gold-light); }
.footer-copy { font-size:.78rem; color:rgba(245,240,232,.25); font-weight:300; }

/* ── Responsive: Tablet ────────────────────────────── */
@media (max-width:960px) {
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:block; }
  .logo { height:100px; }
  header.scrolled .logo { height:80px; }

  .hero { padding-top:130px; }
  .hero-inner { grid-template-columns:1fr; text-align:center; gap:40px; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-btns, .eyebrow, .hero-pills { justify-content:center; }
  .screen-img { max-width:260px; }

  .gallery-grid { grid-template-columns:repeat(2,1fr); gap:28px 20px; }

  .real-photos-grid { grid-template-columns:repeat(2,1fr); }
  .rp-bottom-row { grid-template-columns:1fr; max-width:100%; }

  .steps-grid { grid-template-columns:1fr; gap:32px; }
  .step-connector { display:none; }
  .step-card { padding:0; }

  .specs-layout { grid-template-columns:1fr; gap:40px; }
  .specs-img-frame img { max-width:200px; }
  .specs-grid { grid-template-columns:1fr; }

  .pricing-grid { grid-template-columns:1fr; max-width:420px; }
  .contact-features { grid-template-columns:1fr; }
  .stats-inner { gap:0; }
  .stat-item { padding:22px 32px; }
  .stat-divider { height:40px; }
  .section { padding:80px 0; }
}

/* ── Responsive: Mobile ────────────────────────────── */
@media (max-width:580px) {
  .gallery-grid { grid-template-columns:1fr; gap:24px; }
  .real-photos-grid { grid-template-columns:1fr; }
  .rp-bottom-row { grid-template-columns:1fr; max-width:100%; }
  .hero h1 { font-size:2.6rem; }
  .price-card-inner { padding:36px 24px; }
  .stats-inner { flex-direction:column; }
  .stat-divider { width:60px; height:1px; }
  .floating-cta { right:14px; bottom:18px; padding:13px 20px; font-size:.84rem; }
  .section { padding:64px 0; }
  .section-head { margin-bottom:48px; }
}