/* ===== Enlight Consulting — Design Tokens ===== */
:root{
  --gold: #D4AF37;
  --gold-light: #F0D878;
  --gold-dim: #8a7128;
  --black: #050504;
  --black-2: #0c0b09;
  --black-3: #141210;
  --line: rgba(212,175,55,0.16);
  --white: #F7F4EC;
  --muted: #b7b2a4;
  --serif: 'Bellefair', serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1180px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea, select{ font-family: inherit; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

::selection{ background: var(--gold); color: var(--black); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius:10px; }

/* ===== Preloader ===== */
.preloader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--black);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.hide{ opacity:0; visibility:hidden; }
.preloader-mark img{ width:70px; height:70px; animation: pulseLogo 1.4s ease-in-out infinite; }
@keyframes pulseLogo{
  0%,100%{ transform: scale(1); opacity:.7; filter: drop-shadow(0 0 6px rgba(212,175,55,.3)); }
  50%{ transform: scale(1.12); opacity:1; filter: drop-shadow(0 0 22px rgba(212,175,55,.6)); }
}

/* ===== Cursor glow ===== */
.cursor-glow{
  position: fixed; top:0; left:0; width: 420px; height: 420px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(212,175,55,0.09) 0%, rgba(212,175,55,0) 70%);
  transform: translate(-50%,-50%);
  transition: opacity .3s ease;
  display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-glow{ display:block; } }

/* ===== Scroll progress ===== */
.scroll-progress{
  position: fixed; top:0; left:0; height: 3px; width:0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light));
  z-index: 1001;
}

/* ===== Navbar ===== */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  padding: 20px 0;
  transition: all .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled{
  padding: 12px 0;
  background: rgba(5,5,4,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-icon{ width: 34px; height:34px; object-fit:contain; }
.brand-word{ font-family: var(--serif); font-size: 1.3rem; letter-spacing: 3px; color: var(--gold); }

.nav-links{ display:flex; gap: 34px; }
.nav-links a{
  font-size: .92rem; font-weight:500; color: var(--muted);
  position: relative; transition: color .3s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav-links a:hover{ color: var(--white); }
.nav-links a:hover::after{ width:100%; }

.navbar-actions{ display:flex; align-items:center; gap:16px; }

.lang-toggle{
  display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700;
  letter-spacing:1px; color: var(--muted); border:1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
  transition: border-color .3s ease;
}
.lang-toggle:hover{ border-color: var(--gold-dim); }
.lang-toggle span{ transition: color .25s ease; }
.lang-toggle .active{ color: var(--gold); }
.lang-sep{ color: var(--line); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight: 600; font-size: .92rem; border-radius: 999px;
  padding: 13px 26px; transition: all .35s var(--ease); white-space:nowrap;
}
.btn-sm{ padding: 9px 18px; font-size:.82rem; }
.btn-lg{ padding: 16px 32px; font-size: .98rem; }
.btn-primary{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #14110a;
  box-shadow: 0 0 0 rgba(212,175,55,0);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(212,175,55,0.55);
}
.btn-primary svg{ transition: transform .3s var(--ease); }
.btn-primary:hover svg{ transform: translateX(3px); }

.btn-ghost{ color: var(--white); border:1px solid var(--line); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }

.btn-outline{
  border: 1px solid var(--gold-dim); color: var(--gold-light); width:100%; margin-top: 18px;
}
.btn-outline:hover{ background: var(--gold); color:#14110a; border-color: var(--gold); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; width: 26px; }
.menu-toggle span{ height:2px; width:100%; background: var(--gold); border-radius:2px; transition: all .3s ease; }

/* ===== Eyebrow / Section headers ===== */
.eyebrow{
  font-size: .78rem; font-weight: 700; letter-spacing: 3px; color: var(--gold);
  margin-bottom: 14px;
}
.section-title{
  font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height:1.15; font-weight: 400; max-width: 720px;
}
.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ===== Reveal animation ===== */
.reveal-up{ opacity:0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-up.in{ opacity:1; transform: translateY(0); }
.reveal-up[data-delay="1"]{ transition-delay: .1s; }
.reveal-up[data-delay="2"]{ transition-delay: .2s; }
.reveal-up[data-delay="3"]{ transition-delay: .3s; }
.reveal-up[data-delay="4"]{ transition-delay: .4s; }

/* ===== HERO ===== */
.hero{
  position: relative; min-height: 100vh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; padding-top: 90px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(212,175,55,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 10%, transparent 75%);
}
.hero-blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:.35;
  animation: float 14s ease-in-out infinite;
}
.blob-1{ width:520px; height:520px; background: radial-gradient(circle, var(--gold) 0%, transparent 70%); top:-160px; left:-120px; }
.blob-2{ width:460px; height:460px; background: radial-gradient(circle, var(--gold-dim) 0%, transparent 70%); bottom:-180px; right:-100px; animation-delay: -6s; }
@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-40px) scale(1.08); }
}
.hero-network{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.net-nodes circle{ animation: nodePulse 3s ease-in-out infinite; }
.net-nodes circle:nth-child(2){ animation-delay: .4s; }
.net-nodes circle:nth-child(3){ animation-delay: .8s; }
.net-nodes circle:nth-child(4){ animation-delay: 1.2s; }
.net-nodes circle:nth-child(5){ animation-delay: 1.6s; }
.net-nodes circle:nth-child(6){ animation-delay: 2s; }
@keyframes nodePulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.hero-inner{ position:relative; z-index:2; }
.hero-title{ font-family: var(--serif); font-weight:400; font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height:1.08; max-width: 900px; }
.gold-italic{ color: var(--gold); font-style: italic; }
.hero-sub{ margin-top: 26px; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 560px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top: 40px; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 46px; }
.hero-chips span{
  font-size: .78rem; padding: 8px 16px; border: 1px solid var(--line); border-radius:999px;
  color: var(--muted); background: rgba(255,255,255,0.02);
}

.scroll-hint{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
  font-size:.72rem; letter-spacing:2px; color: var(--muted); text-transform:uppercase;
}
.scroll-hint-line{ width:1px; height: 42px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 51%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }

/* ===== Marquee ===== */
.marquee-wrap{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--black-2); overflow:hidden; padding: 22px 0;
}
.marquee-track{
  display:inline-flex; gap: 20px; white-space:nowrap;
  font-family: var(--serif); font-size: 1.4rem; color: transparent;
  -webkit-text-stroke: 1px var(--gold-dim);
  animation: marqueeScroll 32s linear infinite;
}
.marquee-track .dot{ color: var(--gold); -webkit-text-stroke: 0; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ===== About ===== */
.about{ padding: 130px 0 90px; }
.about-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items:center; }
.about-text{ color: var(--muted); font-size: 1.05rem; max-width: 560px; margin-top: 22px; }
.about-visual{ display:flex; justify-content:center; }

.bulb-card{
  width: 260px; height: 260px; border-radius: 28px;
  background: linear-gradient(160deg, var(--black-3), var(--black-2));
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 60px rgba(212,175,55,0.05);
}
.bulb-svg{ width: 62%; }
.bulb-pulse{ fill: var(--gold); opacity: .08; animation: bulbPulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes bulbPulse{ 0%,100%{ opacity:.05; transform: scale(1);} 50%{ opacity:.16; transform: scale(1.12);} }
.bulb-bars rect{ transform-origin: bottom; animation: barGrow 2s var(--ease) infinite alternate; }
.bulb-bars rect:nth-child(2){ animation-delay:.15s; }
.bulb-bars rect:nth-child(3){ animation-delay:.3s; }
@keyframes barGrow{ from{ transform: scaleY(.7); } to{ transform: scaleY(1); } }

.feature-chips{
  margin-top: 80px; display:grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow:hidden;
}
.feature-chip{ background: var(--black-2); padding: 30px 26px; transition: background .3s ease; }
.feature-chip:hover{ background: var(--black-3); }
.feature-chip h3{ font-size: 1.02rem; margin-bottom: 8px; color: var(--gold-light); }
.feature-chip p{ font-size: .88rem; color: var(--muted); }

/* ===== Services ===== */
.services{ padding: 100px 0; background: var(--black-2); position:relative; }
.services-grid{ margin-top: 60px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card{
  position: relative; background: var(--black-3); border: 1px solid var(--line);
  border-radius: 20px; padding: 34px 28px; transition: transform .4s var(--ease), border-color .4s ease, background .4s ease;
  overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition: opacity .4s ease;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(212,175,55,0.12), transparent 70%);
}
.service-card:hover{ transform: translateY(-6px); border-color: var(--gold-dim); }
.service-card:hover::before{ opacity:1; }
.service-num{ font-family: var(--serif); font-size: 2.1rem; color: rgba(212,175,55,0.18); position:absolute; top: 20px; right: 26px; }
.service-icon{ width: 52px; height:52px; border-radius: 14px; background: rgba(212,175,55,0.08); display:flex; align-items:center; justify-content:center; margin-bottom: 22px; }
.service-icon svg{ width: 26px; height:26px; }
.service-card h3{ font-size: 1.18rem; margin-bottom: 10px; line-height:1.3; padding-right: 30px; position:relative; }
.service-short{ color: var(--muted); font-size: .92rem; }
.service-long{
  color: var(--muted); font-size: .92rem; margin-top: 12px;
  max-height: 0; opacity:0; overflow:hidden; transition: max-height .45s var(--ease), opacity .35s ease, margin-top .45s var(--ease);
}
.service-card.open .service-long{ max-height: 200px; opacity:1; }
.service-toggle{
  margin-top: 18px; font-size: .8rem; font-weight:700; color: var(--gold); letter-spacing: .5px;
  display:flex; align-items:center; gap:6px;
}
.service-toggle::after{ content:'+'; font-size:1rem; transition: transform .35s var(--ease); }
.service-card.open .service-toggle::after{ transform: rotate(45deg); }

/* ===== Approach / Timeline ===== */
.approach{ padding: 120px 0; }
.timeline{ margin-top: 70px; position:relative; display:grid; grid-template-columns: repeat(5,1fr); gap: 24px; }
.timeline-line{ position:absolute; top:-30px; left:0; right:0; height:1px; background: var(--line); }
.timeline-progress{ height:100%; width:0%; background: var(--gold); transition: width 1.2s var(--ease); }
.timeline-step{ position:relative; padding-top: 10px; }
.timeline-step::before{
  content:''; position:absolute; top:-34px; left:0; width:9px; height:9px; border-radius:50%;
  background: var(--black); border: 2px solid var(--gold-dim); transition: all .4s ease;
}
.timeline-step.active::before{ background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,.7); }
.timeline-index{ font-family: var(--serif); color: var(--gold); font-size: 1.3rem; display:block; margin-bottom: 10px; }
.timeline-step h3{ font-size: 1.1rem; margin-bottom: 10px; }
.timeline-step p{ font-size: .86rem; color: var(--muted); }

/* ===== Why ===== */
.why{ padding: 100px 0; background: var(--black-2); }
.why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.why-copy .about-text{ margin-bottom: 30px; }
.why-visual{ display:flex; justify-content:center; }
.why-bars{
  position:relative; width: 320px; height: 220px; display:flex; align-items:flex-end; gap: 22px;
  padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--black-3);
}
.why-bar{ flex:1; height: var(--h); background: linear-gradient(180deg, var(--gold-light), var(--gold-dim)); border-radius: 6px 6px 0 0; animation: barRise 1.4s var(--ease) both; opacity:.85; }
.why-bar:nth-child(2){ animation-delay:.1s; }
.why-bar:nth-child(3){ animation-delay:.2s; }
.why-bar:nth-child(4){ animation-delay:.3s; }
@keyframes barRise{ from{ transform: scaleY(0); transform-origin:bottom; } to{ transform: scaleY(1); transform-origin:bottom; } }
.why-trend{ position:absolute; inset: 20px; pointer-events:none; }

/* ===== Contact ===== */
.contact{ padding: 130px 0; }
.contact-sub{ max-width: 560px; margin: 18px auto 0; color: var(--muted); }
.contact-grid{ margin-top: 60px; display:grid; grid-template-columns: 1.3fr .9fr; gap: 40px; }
.contact-form{
  background: var(--black-2); border: 1px solid var(--line); border-radius: 22px; padding: 40px;
  display:flex; flex-direction:column; gap: 20px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size: .82rem; color: var(--muted); font-weight:600; }
.form-field input, .form-field textarea, .form-field select{
  background: var(--black-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 14px; color: var(--white); font-size: .92rem; transition: border-color .3s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color: var(--gold); }
.form-field select{ appearance:none; }
.form-submit{ margin-top: 6px; align-self:flex-start; }
.form-status{ font-size: .85rem; color: var(--gold-light); min-height: 1em; }

.contact-side{ display:flex; flex-direction:column; gap: 24px; }
.calendly-card{ background: var(--black-3); border: 1px solid var(--line); border-radius: 22px; padding: 32px; }
.calendly-card h3{ font-size: 1.15rem; margin-bottom: 8px; }
.calendly-card p{ font-size: .9rem; color: var(--muted); }
.contact-info{ background: var(--black-3); border: 1px solid var(--line); border-radius: 22px; padding: 32px; display:flex; flex-direction:column; gap: 18px; }
.contact-info strong{ display:block; font-size: .8rem; color: var(--gold); margin-bottom: 4px; }
.contact-info a{ color: var(--white); }
.contact-info a:hover{ color: var(--gold-light); }

/* ===== Footer ===== */
.footer{ border-top: 1px solid var(--line); padding: 70px 0 30px; background: var(--black-2); }
.footer-inner{ display:grid; grid-template-columns: 1fr 2fr; gap: 60px; }
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap: 10px; }
.footer-brand .brand-icon{ margin-bottom: 6px; }
.footer-brand p{ color: var(--muted); font-size: .9rem; }
.footer-links{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.footer-links h4{ font-size: .85rem; color: var(--gold); margin-bottom: 16px; letter-spacing: 1px; }
.footer-links a{ display:block; color: var(--muted); font-size: .9rem; margin-bottom: 10px; transition: color .25s ease; }
.footer-links a:hover{ color: var(--gold-light); }
.social-row{ display:flex; gap: 10px; }
.social-row a{
  width: 34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size: .75rem; text-transform:uppercase; margin-bottom:0;
}
.social-row a:hover{ border-color: var(--gold); color: var(--gold); }
.footer-bottom{ margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line); }
.footer-bottom p{ font-size: .8rem; color: var(--muted); text-align:center; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .about-grid, .why-grid, .contact-grid{ grid-template-columns: 1fr; }
  .about-visual{ order:-1; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .timeline{ grid-template-columns: repeat(2,1fr); row-gap: 46px; }
  .timeline-line{ display:none; }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 720px){
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
  .navbar-actions .btn-sm{ display:none; }
  .services-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .feature-chips{ grid-template-columns: repeat(2,1fr); }
  .timeline{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: 1fr; gap: 26px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
}

/* Mobile menu open state */
body.menu-open .nav-links{
  display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; width: 78%; max-width:320px;
  background: var(--black-2); padding: 100px 34px; gap: 28px; z-index: 899;
  box-shadow: -20px 0 60px rgba(0,0,0,.5); animation: slideIn .4s var(--ease);
}
@keyframes slideIn{ from{ transform: translateX(100%); } to{ transform: translateX(0); } }
body.menu-open .menu-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
body.menu-open .menu-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero media ===== */
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; display:block; }
.hero-video.hidden{ display:none; }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-network{ display:none; }
.hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,5,4,.55), rgba(5,5,4,.15) 40%, var(--black) 100%); pointer-events:none; }
.hero-title{ text-shadow: 0 6px 40px rgba(0,0,0,.6); }

.section-sub{ max-width:560px; margin:16px auto 0; color:var(--muted); }

/* ===== Products carousel ===== */
.products{ padding:120px 0 90px; }
.carousel-wrap{ margin-top:60px; }
.carousel{
  display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; padding:20px max(28px, calc((100vw - var(--container)) / 2 + 28px)) 30px;
  scrollbar-width:none; cursor:grab;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel.dragging{ cursor:grabbing; scroll-snap-type:none; }
.app-card{
  flex:0 0 min(440px, 84vw); scroll-snap-align:center; background:var(--black-2);
  border:1px solid var(--line); border-radius:24px; padding:22px; transition:border-color .4s ease, transform .2s ease-out;
  transform-style:preserve-3d; position:relative; overflow:hidden;
}
.app-card:hover{ border-color:var(--gold-dim); }
.app-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(212,175,55,.14), transparent 70%); opacity:0; transition:opacity .4s; pointer-events:none; }
.app-card:hover::before{ opacity:1; }
.badge{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid var(--line); }
.badge i{ width:7px; height:7px; border-radius:50%; background:#5bd68a; box-shadow:0 0 10px #5bd68a; }
.badge.dev i{ background:var(--gold); box-shadow:0 0 10px var(--gold); animation:nodePulse 1.6s infinite; }
.badge.live{ color:#8fe6ad; } .badge.dev{ color:var(--gold-light); }
.app-shot{ margin:18px 0 20px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--black); aspect-ratio:16/10; position:relative; }
.app-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.mock{ position:absolute; inset:0; display:grid; grid-template-columns:22% 1fr; }
.mock-side{ background:linear-gradient(180deg,#171410,#0e0c0a); border-right:1px solid var(--line); padding:12px 9px; display:flex; flex-direction:column; gap:9px; }
.mock-side span{ height:9px; border-radius:5px; background:rgba(212,175,55,.18); }
.mock-side span:first-child{ background:var(--gold); width:60%; }
.mock-main{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.mock-top{ display:flex; gap:8px; }
.mock-top span{ flex:1; height:34px; border-radius:8px; background:rgba(212,175,55,.09); border:1px solid var(--line); position:relative; overflow:hidden; }
.mock-top span::after, .mock-chart::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(212,175,55,.22) 50%, transparent 70%); transform:translateX(-100%); animation:shimmer 2.8s infinite; }
@keyframes shimmer{ to{ transform:translateX(100%); } }
.mock-chart{ flex:1; border-radius:10px; background:rgba(212,175,55,.05); border:1px solid var(--line); display:flex; align-items:flex-end; gap:8px; padding:10px; position:relative; overflow:hidden; }
.mock-chart b{ flex:1; background:linear-gradient(180deg,var(--gold-light),var(--gold-dim)); border-radius:4px 4px 0 0; animation:barGrow 2.2s var(--ease) infinite alternate; }
.mock-chart b:nth-child(2){ animation-delay:.2s } .mock-chart b:nth-child(3){ animation-delay:.4s } .mock-chart b:nth-child(4){ animation-delay:.6s } .mock-chart b:nth-child(5){ animation-delay:.8s }
.mock-chart b{ transform-origin:bottom; }
.app-card h3{ font-family:var(--serif); font-weight:400; font-size:1.7rem; margin:16px 0 8px; }
.app-card > p{ color:var(--muted); font-size:.95rem; }
.app-feats{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 22px; }
.app-feats span{ font-size:.76rem; padding:6px 12px; border-radius:999px; background:rgba(212,175,55,.08); color:var(--gold-light); }
.app-card .btn{ padding:11px 22px; font-size:.85rem; }
.app-card.cta-card{ display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center; gap:14px; background:linear-gradient(160deg,#1a160c,var(--black-2)); }
.app-card.cta-card .plus{ font-family:var(--serif); font-size:4rem; color:var(--gold); line-height:1; }
.carousel-controls{ display:flex; gap:12px; justify-content:center; margin-top:10px; }
.car-btn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); font-size:1.2rem; color:var(--gold); transition:all .3s; }
.car-btn:hover{ background:var(--gold); color:#14110a; }

/* ===== Sites ===== */
.sites{ padding:100px 0; background:var(--black-2); }
.sites-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
.site-card{ display:block; transition:transform .2s ease-out; transform-style:preserve-3d; }
.browser{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--black); transition:border-color .4s, box-shadow .4s; }
.site-card:hover .browser{ border-color:var(--gold-dim); box-shadow:0 30px 60px -30px rgba(212,175,55,.35); }
.browser-bar{ display:flex; gap:6px; align-items:center; padding:11px 14px; background:#13110e; border-bottom:1px solid var(--line); }
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:#3a352a; }
.browser-bar em{ margin-left:10px; font-style:normal; font-size:.7rem; color:var(--muted); background:rgba(255,255,255,.04); padding:3px 12px; border-radius:6px; flex:1; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.browser-view{ height:260px; overflow:hidden; position:relative; }
.browser-view img{ width:100%; display:block; transition:transform 14s cubic-bezier(.4,0,.4,1); }
.site-card:hover .browser-view img{ transform:translateY(calc(-100% + 260px)); }
.site-ph{ position:absolute; inset:0; padding:22px; display:flex; flex-direction:column; gap:12px; }
.site-ph span{ display:block; border-radius:6px; background:rgba(212,175,55,.1); }
.site-ph span:nth-child(1){ height:14px; width:35%; background:rgba(212,175,55,.3); }
.site-ph span:nth-child(2){ height:80px; } .site-ph span:nth-child(3){ height:12px; width:70%; } .site-ph span:nth-child(4){ height:12px; width:50%; }
.site-meta{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 4px 0; }
.site-meta b{ font-family:var(--serif); font-weight:400; font-size:1.3rem; }
.site-meta span{ font-size:.82rem; color:var(--muted); }

/* ===== Flow (scrollytelling) ===== */
.flow{ height:380vh; position:relative; }
.flow-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.flow-sticky::before{ content:''; position:absolute; inset:0; background:radial-gradient(600px circle at 75% 50%, rgba(212,175,55,.1), transparent 70%); }
.flow-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; position:relative; }
.flow-steps{ list-style:none; margin-top:36px; display:flex; flex-direction:column; gap:18px; }
.flow-steps li{ display:flex; gap:18px; align-items:center; opacity:.28; transition:opacity .5s, transform .5s; font-size:1.05rem; }
.flow-steps li b{ font-family:var(--serif); font-weight:400; color:var(--gold); font-size:1.4rem; }
.flow-steps li.on{ opacity:1; transform:translateX(10px); }
.flow-svg{ width:100%; max-height:76vh; }
.flow-path-bg{ stroke:var(--line); stroke-width:2; stroke-dasharray:4 8; }
.flow-path{ stroke:var(--gold); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(212,175,55,.8)); }
.flow-node circle{ fill:var(--black-2); stroke:var(--gold-dim); stroke-width:2; transition:all .5s; }
.flow-node path, .flow-node circle + circle{ stroke:var(--gold-dim); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .5s; }
.flow-node.on circle:first-child{ stroke:var(--gold); fill:#1d180b; filter:drop-shadow(0 0 14px rgba(212,175,55,.8)); }
.flow-node.on path, .flow-node.on circle + circle{ stroke:var(--gold-light); }
.flow-node{ transform-box:fill-box; transform-origin:center; }
.flow-node.on{ animation:pop .6s var(--ease); }
@keyframes pop{ 0%{ transform:scale(.85);} 60%{ transform:scale(1.12);} 100%{ transform:scale(1);} }

/* ===== Industries ===== */
.industries{ padding:110px 0; }
.ind-grid{ margin-top:60px; display:flex; gap:16px; height:440px; }
.ind-tile{
  flex:1; border-radius:20px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:24px;
  background:linear-gradient(160deg,#211b0e,#0d0b08); border:1px solid var(--line); transition:flex .7s var(--ease), border-color .4s;
}
.ind-tile::before{ content:''; position:absolute; inset:0; background:var(--img) center/cover no-repeat; opacity:.7; transition:transform 1.2s var(--ease), opacity .5s; }
.ind-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,4,.92), transparent 60%); }
.ind-tile:hover{ flex:2.4; border-color:var(--gold-dim); }
.ind-tile:hover::before{ transform:scale(1.08); opacity:.9; }
.ind-tile span{ position:relative; z-index:1; font-family:var(--serif); font-size:1.5rem; }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.88); display:none; align-items:center; justify-content:center; padding:24px; }
.modal.open{ display:flex; }
.modal video{ max-width:min(1000px,100%); max-height:80vh; border-radius:14px; border:1px solid var(--line); }
.modal-close{ position:absolute; top:18px; right:26px; font-size:2.4rem; color:var(--gold); }

@media (max-width:980px){
  .sites-grid{ grid-template-columns:1fr; }
  .flow-inner{ grid-template-columns:1fr; gap:10px; }
  .flow-svg{ max-height:38vh; }
  .flow-steps{ margin-top:18px; gap:10px; }
  .flow-steps li{ font-size:.92rem; }
}
@media (max-width:720px){
  .ind-grid{ flex-direction:column; height:auto; }
  .ind-tile{ min-height:150px; }
  .ind-tile:hover{ flex:1; }
}
@media (prefers-reduced-motion:reduce){
  .hero-canvas{ display:none; }
}

/* ===== Video band ===== */
.video-band{ position:relative; padding:150px 0; overflow:hidden; background:radial-gradient(700px circle at 50% 50%, rgba(212,175,55,.14), var(--black-2) 70%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.band-video.hidden{ display:none; }
.band-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:34px; }