/* ==========================================================================
   DARK MODE v3 — Pure Black + #AA03CE Magenta
   Dark glass capsule header (sticky, no white edges) • Magenta buttons
   Varied section background tints • Animated gradient lines • 767px fixes
   ========================================================================== */

:root{
  --bg:#07000a;
  --bg-soft:#0d0012;
  --bg-soft-2:#160019;
  --ink:#f4eef7;
  --muted:#b6a6c2;
  --line:rgba(255,255,255,.10);
  --shadow-sm:0 4px 16px rgba(0,0,0,.45);
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px rgba(0,0,0,.58);

  --primary:#AA03CE;
  --primary-dark:#7a0296;
  --secondary:#3d0049;
  --grad: linear-gradient(120deg, #000000 0%, #4b0060 45%, #AA03CE 100%);
  --grad-2: linear-gradient(120deg, #AA03CE, #ff4fd8);

  --capsule-bg:rgba(14,8,18,.66);
  --capsule-border:rgba(170,3,206,.4);
  --capsule-text:#e9e0ef;
}

*{ -webkit-tap-highlight-color:transparent }

body{
  background:
    radial-gradient(circle at 10% 6%, rgba(170,3,206,.16), transparent 40%),
    radial-gradient(circle at 92% 18%, rgba(170,3,206,.10), transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(170,3,206,.12), transparent 45%),
    linear-gradient(180deg, #050005 0%, #0d0012 45%, #150019 100%);
}
::selection{background:var(--primary);color:#fff}

/* ---------- Card surfaces: dark glass, no white anywhere ---------- */
.service-card,.portfolio-item,.team-card,.mv-card,.why-card,.job-card,
.process-card,.testi-card,.form-card,.info-box,.stat-card{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
}
.lightbox-inner{background:#12000f;border:1px solid var(--line)}
.lightbox-close{background:rgba(255,255,255,.92);color:#1c1f2e}
.empty-state{color:var(--muted)}

/* ---------- Section background variety ---------- */
.section,.section-tight{position:relative}
.bg-soft{background:linear-gradient(160deg,#0a000e,#170019)}
.section:nth-of-type(odd)::before,
.section-tight:nth-of-type(odd)::before{
  content:'';position:absolute;top:-10%;left:-10%;width:50%;height:60%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(170,3,206,.08),transparent 70%);
}
.section:nth-of-type(even)::before,
.section-tight:nth-of-type(even)::before{
  content:'';position:absolute;bottom:-10%;right:-10%;width:50%;height:60%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(170,3,206,.08),transparent 70%);
}
.section > .container,.section-tight > .container{position:relative;z-index:1}

/* ---------- HEADER: sticky dark-glass capsule, zero white ---------- */
.site-header,
.site-header.scrolled{
  background:transparent !important;
  border-bottom:none !important;
  box-shadow:none !important;
}
.site-header .nav{
  background:var(--capsule-bg);
  border:1px solid var(--capsule-border);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 30px rgba(170,3,206,.18);
}
.site-header.scrolled .nav{
  box-shadow:0 16px 44px rgba(0,0,0,.6), 0 0 40px rgba(170,3,206,.3);
}
/*.site-header .brand img{filter:brightness(0) invert(1)}*/
.site-header .nav-links a{color:var(--capsule-text)}
.site-header .nav-links a:hover,.site-header .nav-links a.active{
  background:rgba(170,3,206,.25);color:#fff;
}
.site-header .nav-toggle span{background:#fff}
.site-header .nav-cta.btn-primary{color:#fff}
.topbar{background:#050005;border-bottom:1px solid rgba(255,255,255,.05)}

/* ---------- Mobile menu: dark glass, magenta accents (no white panel) ---------- */
.mobile-menu{background:#0c0010;box-shadow:-20px 0 60px rgba(0,0,0,.6);border-left:1px solid var(--line)}
.mobile-menu-head{border-bottom:1px solid var(--line)}
.mobile-menu a{
  color:var(--ink);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-menu a::after{content:'↗';font-size:15px;color:var(--primary)}
.close-btn{background:rgba(170,3,206,.18);color:#fff}
.menu-overlay{background:rgba(2,0,4,.65)}

/* ---------- Buttons: black->magenta gradient everywhere, white text ---------- */
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(170,3,206,.4);position:relative}
.btn-primary:hover{box-shadow:0 16px 38px rgba(170,3,206,.55)}
.btn-primary::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(90deg,#000,#AA03CE,#000);background-size:220% 100%;
  opacity:0;transition:opacity .3s ease;animation:lineShift 3s linear infinite;
}
.btn-primary:hover::after{opacity:.6}
.btn-outline{background:rgba(255,255,255,.04);color:var(--ink);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-light{background:rgba(255,255,255,.06);color:var(--primary)}
.btn-light:hover{background:var(--grad);color:#fff}
.filter-btn{background:rgba(255,255,255,.06);color:var(--muted)}
.filter-btn.active,.filter-btn:hover{background:var(--grad);color:#fff}
.tag-chip,.pill{background:rgba(255,255,255,.07);color:var(--ink)}
.job-type-pill{background:rgba(255,255,255,.08);color:var(--primary)}

/* CTA band */
.cta-band{background:var(--grad);position:relative;overflow:hidden}
.cta-band::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:sheen 3.2s linear infinite;pointer-events:none;
}
.cta-band .btn-primary{background:#fff;color:var(--primary);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.cta-band .btn-outline{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.4);color:#fff}
.cta-band .btn-outline:hover{background:#fff;color:var(--primary)}
@keyframes sheen{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ---------- Hero ---------- */
.hero{background:transparent !important;padding-top:150px ;margin-top:-85px}
.hero .eyebrow{background:rgba(170,3,206,.14);color:#ff9df0;border:1px solid rgba(170,3,206,.4)}
.hero h1{color:#fff}
.hero h1 .grad-text{
  background:linear-gradient(90deg,#ff8ff0,#AA03CE,#000,#AA03CE,#ff8ff0);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradFlow 6s ease-in-out infinite;
}
@keyframes gradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero p{color:#cabdd4}
.hero .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#dccbe6}
.floating-card{background:rgba(18,10,22,.8);backdrop-filter:blur(14px);border:1px solid rgba(170,3,206,.3);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 24px rgba(170,3,206,.25)}
.floating-card .fc-title{color:#c9bdd4}
.floating-card .fc-value{color:#fff}

/* ---------- Stats bar / footer ---------- */
.stats-bar,.site-footer{background:linear-gradient(160deg,#050005 0%,#0d0012 55%,#170019 100%)}
.stat-num span{background:linear-gradient(120deg,#ff8ff0,#AA03CE);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-info-card{background:linear-gradient(160deg,#050005,#1c0022)}
.footer-badges span{background:rgba(255,255,255,.06);color:var(--muted)}
.social-row a,.footer-social a{background:rgba(255,255,255,.07)}
.social-row a:hover,.footer-social a:hover{background:var(--grad)}
.footer-legal-row a{color:#b6a6c2}
.footer-legal-row a:hover{color:var(--primary)}

/* ---------- Forms ---------- */
.form-group input,.form-group select,.form-group textarea{
  background:rgba(255,255,255,.05);border:1.5px solid var(--line);color:var(--ink);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:rgba(255,255,255,.08);border-color:var(--primary)}
.timeline::before{background:var(--line)}
.timeline-dot{background:var(--grad);box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--line)}
.testi-avatar,.mv-icon{background:var(--grad)}

/* ---------- Animated gradient line dividers ---------- */
.section-head{position:relative;padding-bottom:22px}
.section-head::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:86px;border-radius:3px;
  background:linear-gradient(90deg,#000,#AA03CE,#000);background-size:200% 100%;
  animation:lineShift 4s linear infinite;
}
.section-head.center::after{left:50%;transform:translateX(-50%)}
@keyframes lineShift{0%{background-position:0% 0}100%{background-position:200% 0}}

/* ---------- Creative hover motion ---------- */
.service-card,.portfolio-item,.team-card{
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .4s ease;
}
.service-card:hover,.portfolio-item:hover,.team-card:hover{
  transform:translateY(-10px) scale(1.015);border-color:rgba(170,3,206,.4);
}
.mv-card:hover .mv-icon{transform:scale(1.1) rotate(-4deg)}
.team-card:hover .team-img img{transform:scale(1.08) rotate(-2deg)}
.culture-card:hover .culture-icon{transform:scale(1.15) rotate(6deg)}
.mv-icon,.culture-icon{transition:transform .3s ease}
.floating-card{animation:float 5s ease-in-out infinite}

@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(170,3,206,.35)}50%{box-shadow:0 0 0 10px rgba(170,3,206,0)}}
.job-card:hover,.portfolio-item:hover,.team-card:hover,.service-card:hover{animation:pulseGlow 1.8s ease-in-out infinite}

/* ---------- Legal pages ---------- */
.legal-content h2{color:var(--ink)}
.legal-content p,.legal-content ul li{color:var(--muted)}
.legal-content ul li::before{background:var(--primary)}

/* ==========================================================================
   RESPONSIVE — proper breakpoints, explicit 767px fix
   ========================================================================== */
@media(max-width:992px){
  .site-header{padding:12px 14px 0}
  .site-header .nav{padding:8px 10px 8px 16px}
}

@media(max-width:767px){
  .site-header{padding:10px 12px 0}
  .site-header .nav{padding:8px 8px 8px 14px}
  .brand img{height:30px}
  .hero{padding-top:118px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-badges{justify-content:center}
  .section{padding:52px 0}
  .section-tight{padding:40px 0}
  .section-head{margin-bottom:36px}
  .section-head h2{font-size:26px}
  .services-grid,.portfolio-grid,.team-grid,.stats-grid,.process-grid,
  .culture-grid,.why-grid,.mission-grid,.perks-grid,.grid-2,.grid-3,.grid-4{
    grid-template-columns:1fr !important;
  }
  .filter-bar{justify-content:center}
  .job-card{padding:20px}
  .job-card .btn{width:100%;justify-content:center}
  .form-card,.contact-info-card{padding:26px 20px}
  .form-row{grid-template-columns:1fr}
  .testi-card{padding:26px 20px}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-social,.social-row{justify-content:center}
  .footer-col ul{text-align:center}
  .cta-band{padding:44px 24px}
  .cta-actions{flex-direction:column}
  .cta-actions .btn{width:100%;justify-content:center}
  .timeline{padding-left:4px}
  .timeline-item{padding-left:48px}
}

@media(max-width:480px){
  .hero h1{font-size:30px}
  .page-hero h1{font-size:26px}
  .nav-toggle{padding:8px}
}