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

:root{--gold:#f6a623;--gold-soft:#ffd36a;--dark:#050505;--border:rgba(246,166,35,.34);}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#050505;color:#fff;font-family:'Manrope',Arial,sans-serif;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.86),rgba(0,0,0,.92)),var(--lux-bg-image);
  background-size:cover;background-position:center;opacity:.24;
}
a{color:inherit;text-decoration:none}
nav{
  position:sticky;top:0;z-index:1000;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(246,166,35,.16);display:flex;justify-content:space-between;align-items:center;
  padding:18px 6%;
}
.logo{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.02;min-width:max-content}
.nav-brand-main{color:var(--gold);font-weight:800;letter-spacing:.06em}
.nav-brand-sub{margin-top:6px;color:rgba(255,255,255,.78);font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase}
.links{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap}
.links a{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.78)}
.links a:hover{color:var(--gold-soft)}
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:110px 7% 70px;position:relative;overflow:hidden;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:-20%;z-index:-1;
  background:radial-gradient(circle at 20% 30%,rgba(246,166,35,.18),transparent 24%),
  radial-gradient(circle at 80% 20%,rgba(255,211,106,.10),transparent 28%),
  linear-gradient(135deg,transparent 0%,rgba(246,166,35,.08) 50%,transparent 100%);
  animation:heroDrift 16s ease-in-out infinite alternate;
}
@keyframes heroDrift{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,1%,0) scale(1.06)}}
.watermark{position:absolute;font-size:13vw;font-weight:800;opacity:.045;letter-spacing:.08em;z-index:-1}
.eyebrow{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 24px}
.eyebrow span{border:1px solid rgba(246,166,35,.32);padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.24);backdrop-filter:blur(10px);color:#ffd36a;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(11px,1vw,14px)}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:700}
.hero h1{max-width:1120px;font-size:clamp(44px,7.2vw,96px);line-height:.98;margin:0 auto 28px;text-shadow:0 0 40px rgba(246,166,35,.18)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#000;padding:14px 24px;border-radius:999px;margin:8px;font-weight:800}
.btn.ghost{background:transparent;color:#fff;border:1px solid var(--gold)}
section{
  max-width:1280px;margin:0 auto;padding:90px clamp(22px,5vw,80px);text-align:center;position:relative;
  background:linear-gradient(180deg,rgba(5,5,5,.50),rgba(5,5,5,.24));
}
section::after{content:"";position:absolute;left:50%;bottom:0;width:min(720px,78%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(246,166,35,.42),transparent)}
section p{max-width:900px;margin:0 auto 18px;color:rgba(255,255,255,.82);line-height:1.8}
h2{font-size:clamp(44px,5.5vw,76px);color:var(--gold);margin:0 auto 36px;line-height:1.05;position:relative;width:fit-content;max-width:100%;padding-bottom:14px}
h2::after{content:"";position:absolute;left:50%;bottom:0;width:110px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold),var(--gold-soft),var(--gold),transparent);box-shadow:0 0 18px rgba(246,166,35,.65)}
.cards,.case-grid,.industry-grid,.testimonial-strip,.timeline,.stats{display:grid;gap:22px;margin:32px auto 0;justify-content:center;align-items:stretch}
.cards{grid-template-columns:repeat(3,minmax(230px,1fr));max-width:1060px}
.case-grid{grid-template-columns:repeat(3,minmax(260px,1fr));max-width:1080px}
.industry-grid{grid-template-columns:repeat(4,minmax(180px,1fr));max-width:1080px}
.testimonial-strip{grid-template-columns:repeat(3,minmax(240px,1fr));max-width:1040px}
.timeline{grid-template-columns:repeat(5,minmax(130px,1fr));max-width:1050px}
.stats{grid-template-columns:repeat(4,minmax(170px,1fr));max-width:1080px}
.card,.case-card,.industry-grid span,.testimonial-strip div,.step,.stats div,.karma-quote{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--border);
  border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 38px rgba(0,0,0,.34);
}
.card,.industry-grid span,.testimonial-strip div,.step,.stats div{min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 18px}
.case-card{min-height:190px;padding:32px 26px}
.case-card p{font-size:14px}
.stats b{display:block;color:var(--gold-soft);font-size:clamp(28px,4vw,48px);line-height:1;text-shadow:0 0 22px rgba(246,166,35,.35)}
.stats span{display:block;margin-top:9px;color:rgba(255,255,255,.76);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.card:hover,.case-card:hover,.industry-grid span:hover,.step:hover,.stats div:hover{border-color:rgba(255,211,106,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 34px rgba(246,166,35,.20),0 18px 42px rgba(0,0,0,.42);transform:translateY(-7px)}
.karma-quote{max-width:980px;margin:42px auto 0;padding:34px 38px;background:linear-gradient(135deg,rgba(246,166,35,.10),rgba(255,255,255,.025)),rgba(0,0,0,.32)}
.karma-quote p{margin:0;font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3vw,40px);line-height:1.25;color:#ffe1a3}
.gallery{max-width:1200px;margin:34px auto 0;column-count:3;column-gap:20px;display:block}
.gallery-item{position:relative;display:block;break-inside:avoid;margin-bottom:20px;border-radius:22px;overflow:hidden;border:1px solid rgba(246,166,35,.38);box-shadow:0 18px 42px rgba(0,0,0,.42);background:#111}
.gallery-item img{width:100%;height:auto;display:block;transition:transform .65s ease,filter .65s ease}
.gallery-item:hover img{transform:scale(1.06);filter:brightness(.82) saturate(1.12)}
.gallery-caption{position:absolute;inset:auto 0 0 0;padding:34px 20px 18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));transform:translateY(18px);opacity:0;transition:.45s ease;text-align:left}
.gallery-item:hover .gallery-caption{transform:translateY(0);opacity:1}
.gallery-caption strong{display:block;color:#ffd36a;font-size:16px;margin-bottom:4px}
.gallery-caption span{display:block;color:rgba(255,255,255,.8);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.contact-form{max-width:760px;margin:30px auto;display:grid;gap:18px}
.contact-form input,.contact-form textarea{background:#111;border:1px solid rgba(246,166,35,.3);padding:18px;color:#fff;border-radius:12px}
.contact-form textarea{min-height:140px}
.contact-form button{background:linear-gradient(135deg,var(--gold),var(--gold-soft));border:none;padding:18px;border-radius:40px;font-weight:800;cursor:pointer}
.premium-footer{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:30px;padding:60px 8%;border-top:1px solid #222;background:#0a0a0a;text-align:center}
.sticky-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:10px;padding:10px;z-index:9999;background:rgba(0,0,0,.74);backdrop-filter:blur(12px);border:1px solid rgba(255,211,106,.45);border-radius:60px;box-shadow:0 0 34px rgba(246,166,35,.14),0 14px 40px rgba(0,0,0,.55)}
.sticky-bar a{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#000;padding:12px 18px;border-radius:30px;font-weight:800;white-space:nowrap}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);justify-content:center;align-items:center;z-index:99999}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:14px}
section,.card,.case-card,.stats div,.karma-quote,.gallery-item,.step{opacity:.74;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease,box-shadow .35s ease,border-color .35s ease}
.show-premium{opacity:1!important;transform:translateY(0)!important}
body::after{content:"";display:block;height:82px}
@media(max-width:1050px){.cards,.case-grid,.industry-grid,.testimonial-strip,.timeline,.stats{grid-template-columns:repeat(2,minmax(240px,1fr));max-width:760px}.gallery{column-count:2}.premium-footer{grid-template-columns:1fr}}
@media(max-width:680px){nav{padding:16px 18px;align-items:flex-start}.links{gap:10px}.links a{font-size:11px}.nav-brand-main{font-size:14px}.nav-brand-sub{font-size:8px;letter-spacing:.14em}.cards,.case-grid,.industry-grid,.testimonial-strip,.timeline,.stats{grid-template-columns:1fr;max-width:420px}.gallery{column-count:1}.sticky-bar{width:94vw;justify-content:space-around}.sticky-bar a{font-size:12px;padding:10px 8px}}


/* =========================
   ITERATION 22 LITE
   Stats wall + hierarchy + floating trust + CTA cards + premium cursor effects
   ========================= */

html { scroll-behavior: smooth; }

.hero-stats {
  grid-template-columns: repeat(3, minmax(170px, 1fr)) !important;
  max-width: 980px !important;
}

.stats-wall-section {
  max-width: 100% !important;
  padding: 34px 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92), rgba(246,166,35,.08), rgba(0,0,0,.92)) !important;
  border-top: 1px solid rgba(246,166,35,.18);
  border-bottom: 1px solid rgba(246,166,35,.18);
}

.stats-wall-section::after,
.stats-wall-section::before {
  display: none !important;
}

.stats-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.stats-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: statsMarquee 32s linear infinite;
}

.stats-track span {
  white-space: nowrap;
  font-size: clamp(26px, 4vw, 58px);
  line-height: 1;
  color: rgba(255,255,255,.76);
  font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.stats-track strong {
  color: #ffd36a;
  text-shadow: 0 0 28px rgba(246,166,35,.38);
}

@keyframes statsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Floating trust chips */
.floating-trust {
  position: fixed;
  right: 18px;
  top: 96px;
  z-index: 999;
  display: grid;
  gap: 9px;
  pointer-events: none;
}

.floating-trust span {
  padding: 9px 13px;
  border: 1px solid rgba(255,211,106,.38);
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.82);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(246,166,35,.08);
}

/* Quick CTA cards */
.quick-cta-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.quick-cta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 20px;
  max-width: 1050px;
  margin: 34px auto 0;
}

.quick-cta-card {
  position: relative;
  overflow: hidden;
  min-height: 130px;
  border-radius: 24px;
  border: 1px solid rgba(255,211,106,.36);
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,211,106,.20), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.36);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.quick-cta-card:hover {
  border-color: rgba(255,211,106,.86);
  box-shadow: 0 0 36px rgba(246,166,35,.20), 0 20px 48px rgba(0,0,0,.44);
}

/* Premium cursor spotlight */
#cursorGlow {
  position: fixed;
  left: -150px;
  top: -150px;
  width: 300px;
  height: 300px;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,211,106,.16), rgba(246,166,35,.05) 34%, transparent 66%);
  mix-blend-mode: screen;
  transform: translate(-999px,-999px);
  transition: transform .08s ease-out;
}

/* Magnet shine on buttons */
.btn,
.sticky-bar a,
.quick-cta-card {
  position: relative;
  overflow: hidden;
}

.btn::after,
.sticky-bar a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.38), transparent 24%);
  opacity: 0;
  transition: opacity .25s ease;
}

.btn:hover::after,
.sticky-bar a:hover::after {
  opacity: 1;
}

/* Section order breathing */
#about, #why, #how, #what, #different, #xfactor, #recent-work, #trusted-industries, #gallery, #testimonials, #contact {
  scroll-margin-top: 90px;
}

/* Strengthen section hierarchy labels */
#why h2, #how h2, #what h2, #different h2, #xfactor h2 {
  letter-spacing: .01em;
}

/* Improved parallax-friendly gallery */
.gallery-item {
  will-change: transform;
}

.gallery-item img {
  will-change: transform;
}

/* Responsive */
@media(max-width: 1050px) {
  .hero-stats,
  .quick-cta-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    max-width: 720px !important;
  }
  .floating-trust {
    display: none;
  }
}

@media(max-width: 680px) {
  .hero-stats,
  .quick-cta-grid {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }
  .stats-track {
    gap: 34px;
    animation-duration: 26s;
  }
  #cursorGlow {
    display: none;
  }
}


/* Final spacing refinement: How We Do What We Do */
#how .timeline,
#how .steps-grid,
#how .process-grid,
#how .how-grid {
  margin-bottom: 54px !important;
}

#how > p,
#how .process-quote,
#how .quote-box {
  margin-top: 48px !important;
  display: block !important;
}


/* Final footer quick-link fix */
.premium-footer a.footer-link,
footer a.footer-link {
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .25s ease, transform .25s ease;
  display: inline-block;
}

.premium-footer a.footer-link:hover,
footer a.footer-link:hover {
  color: #ffd36a !important;
  transform: translateY(-2px);
}