/* Nexora Labs — style.css (header effects removed; lottie pseudo-elements kept) */

/* ---------------- Root variables ---------------- */
:root{
  --brand-purple: #663398;
  --accent-rose: #FF6B6B;
  --muted: #64748b;
  --nl-header-h: 80px; /* change this single value to resize header site-wide */
}

/* mobile header override */
@media (max-width: 768px){ :root { --nl-header-h: 76px; } }

/* ---------------- Reset / base ---------------- */
*{box-sizing:border-box}
html,body{margin:0;color:#111;font-family:'Poppins',sans-serif;line-height:1.6;overflow-x:hidden;width:100%;scroll-behavior:smooth}
a{color:inherit}

/* leave space for fixed header */
body{padding-top:var(--nl-header-h)}

/* ---------------- Header (plain / no glass) ---------------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1100;
  height:var(--nl-header-h);
  min-height:var(--nl-header-h);
  display:flex;
  align-items:center;
  transform:translateZ(0);
  backface-visibility:hidden;
  /* solid header background (no translucent pseudo-layer) */
  background: rgba(102,51,152,1);
  box-shadow:none;
}

/* subtle hairline (kept very light) */
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  pointer-events:none;
  background: rgba(255,255,255,0.03);
  z-index:1001;
}

/* header inner layout */
.header-inner{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:100%;box-sizing:border-box;position:relative;z-index:1}

/* logo sizing derived from header variable (single source of truth) */
.site-header .logo, .header-inner .logo { display:inline-block; vertical-align: middle; }
.site-header .logo img, .header-inner .logo img {
  display:block;
  line-height:0;
  max-height: calc(var(--nl-header-h) - 8px); /* respects header height */
  height: auto;
  width: auto;
  margin:0;
}

/* nav & CTA */
.main-nav ul{list-style:none;display:flex;gap:40px;margin:0;padding:0}
.main-nav a{color:#fff;text-decoration:none;font-weight:500;transition:text-decoration .2s}
.main-nav a:hover{text-decoration:underline}
.btn-primary{background:#fff;color:var(--brand-purple);padding:10px 18px;border-radius:4px;font-weight:700;text-decoration:none;transition:background .3s,color .3s}
.btn-primary:hover{background:#ddd;color:var(--brand-purple)}
.menu-toggle{display:none;font-size:28px;color:#fff;cursor:pointer}

/* ---------------- Responsive header tweaks ---------------- */
@media (max-width:768px){
  .main-nav{display:none;position:absolute;top:60px;left:0;width:100%;background:var(--brand-purple);text-align:center}
  .main-nav ul{flex-direction:column;gap:20px;padding:20px 0}
  .main-nav.show{display:block}
  .menu-toggle{display:block}
  .header-btn{display:none}
  .main-nav .mobile-contact{margin-top:15px}
  .header-btn{display:block !important;margin-left:12px}
  .header-inner{gap:8px;align-items:center;justify-content:space-between}
  .header-btn .btn-primary{padding:8px 12px;font-size:14px;border-radius:6px}
}

/* Explicit mobile logo size (keeps logo smaller on phones) */
@media (max-width: 768px) {
  .site-header .logo img, .header-inner .logo img {
    max-height: 40px;
  }
}

/* ---------------- Editor / containers ---------------- */
.editor-styles-wrapper,.container{max-width:1200px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ---------------- Hero (kept concise) ---------------- */
.hero-section{background:var(--brand-purple);color:#fff;min-height:60vh;display:flex;align-items:center;justify-content:center;padding:100px 20px}
.hero-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.hero-copy h1{font-size:72px;font-weight:700;line-height:1.1;margin-bottom:32px}

/* ---------------- Services (restored, scoped and stable) ---------------- */
.services-section{
  background:#fff;
  padding:80px 20px;
  color:#333;
  text-align:center;
  max-width:1400px;
  margin:0 auto;
  padding-bottom:40px;
  box-sizing:border-box;
}
.services-section h2{
  font-family: 'Poppins', sans-serif;
  font-size:52px;
  font-weight:700;
  margin-bottom:80px;
  color:#333;
}
.service-item{margin:0 auto 120px auto;display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:520px;text-align:left}
.service-item.right-text{flex-direction:row-reverse}
.service-text{flex:1;text-align:left;min-width:280px}
.service-text h3{font-family:'Poppins',sans-serif;color:var(--brand-purple);font-size:54px;font-weight:700;line-height:1.02;margin-bottom:8px}
.service-text p{color:#333;font-size:18px;line-height:1.8;max-width:620px;margin-bottom:22px}
.feature-list{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px 20px;max-width:640px;text-align:left}
.feature{display:flex;align-items:center;gap:12px;position:relative}
.feat-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(102,51,152,.08);border:1px solid rgba(102,51,152,.2)}
.feat-icon svg{width:16px;height:16px;fill:var(--brand-purple)}
.feat-tip{
  position:absolute;
  left:0;
  transform:translateY(8px);
  bottom:calc(100% + 10px);
  width:260px;
  background:#fff;
  color:#111;
  font-size:13px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(102,51,152,.06);
  box-shadow:0 10px 30px rgba(16,16,24,0.08);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  line-height:1.45;
  transition:opacity .14s,transform .14s,visibility .14s;
  z-index:40;
  text-align:left;
}
.feat-tip::after{
  content:'';
  position:absolute;
  left:20px;
  top:100%;
  transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:#fff;
  border-left:1px solid rgba(102,51,152,.06);
  border-bottom:1px solid rgba(102,51,152,.06);
  box-shadow:0 6px 14px rgba(16,16,24,0.06);
}
.feature:hover .feat-tip,.feature:focus-within .feat-tip,.feature.active .feat-tip{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.service-cta{display:inline-block;margin-top:14px;background:transparent;color:var(--accent-rose);border:2px solid var(--accent-rose);padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;transition:all .18s}
.service-cta:hover{background:var(--accent-rose);color:#fff;border-color:var(--accent-rose)}
.service-animation{flex:1;display:flex;align-items:center;justify-content:center;min-height:420px;position:relative}
.service-animation::before{ /* KEEP the soft framed background behind Lotties */
  content:'';
  position:absolute;
  top:10%;
  left:10%;
  right:10%;
  bottom:10%;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(102,51,152,.03) 0%,rgba(102,51,152,.01)100%);
  border:1px solid rgba(102,51,152,.08);
  pointer-events:none;
  z-index:0;
}
.service-animation lottie-player,.service-animation>div{width:100%;max-width:560px;height:100%;position:relative;z-index:1}
.service-animation .lottie-wrap{width:min(560px,45vw);max-width:560px;aspect-ratio:1/1;margin:0 auto;display:block;position:relative;z-index:1}
.lottie-container{width:400px;height:400px;margin:0 auto;perspective:1000px;position:relative;z-index:1}
.float-animation{animation:float 6s ease-in-out infinite;transform-style:preserve-3d}
.float-no-mirror{animation:floatNoMirror 6s ease-in-out infinite;transform-style:preserve-3d}
@keyframes float{0%{transform:scale(1.3) translateX(10px) scaleX(-1) rotateX(15deg) translateY(0)}50%{transform:scale(1.3) translateX(10px) scaleX(-1) rotateX(15deg) translateY(-15px)}100%{transform:scale(1.3) translateX(10px) scaleX(-1) rotateX(15deg) translateY(0)}}
@keyframes floatNoMirror{0%{transform:scale(1.3) translateX(10px) rotateX(15deg) translateY(0)}50%{transform:scale(1.3) translateX(10px) rotateX(15deg) translateY(-15px)}100%{transform:scale(1.3) translateX(10px) rotateX(15deg) translateY(0)}}
/* Lottie safety */
lottie-player{background:transparent!important;display:block!important;max-width:100%!important}
.service-animation lottie-player{width:100%!important;height:100%!important}

/* ---------------- Tech stack marquee ---------------- */
/* Tech-stack band — stronger full-bleed with configurable overshoot */
:root {
  --logo-overshoot-desktop: 80px; /* desktop overshoot (increase to bleed more) */
  --logo-overshoot-tablet: 44px;  /* tablet */
  --logo-overshoot-mobile: 28px;  /* small phones */
}

/* Section wrapper */
.tech-stack-section {
  background: #fff;
  padding: 40px 20px 40px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

/* FULL-BLEED BAND */
.logo-band {
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* center the band reliably */
  width: calc(100vw + var(--logo-overshoot-desktop));
  background: linear-gradient(to right, #f9f9f9, #ffffff, #f9f9f9);
  padding: 18px 0;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 0;
}

/* marquee container */
.logo-marquee {
  width: 100vw;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  min-height: 110px;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: flex-start;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* track: give a small visual buffer so logos don't butt right to the edge */
.logo-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 0 18px; /* tiny horizontal buffer */
  margin: 0;
  animation: scroll 40s linear infinite;
  will-change: transform;
}

/* items */
.logo-item { flex: 0 0 auto; }
.logo-item img { display: block; max-width: none; height: 65px; margin: 0; padding: 0; }

/* accessibility: prefer-reduced-motion */
@media (prefers-reduced-motion:reduce) {
  .logo-track { animation: none !important; }
}

/* animation keyframes */
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* tablet adjustments */
@media (max-width: 768px) {
  .logo-band {
    width: calc(100vw + var(--logo-overshoot-tablet));
  }
  .logo-marquee { min-height: 90px; }
  .logo-track { gap: 18px; animation-duration: 30s; padding: 0 12px; }
  .logo-item img { height: 44px; }
}

/* mobile adjustments */
@media (max-width: 480px) {
  .logo-band {
    width: calc(100vw + var(--logo-overshoot-mobile));
  }
  .logo-track { gap: 14px; animation-duration: 25s; padding: 0 8px; }
  .logo-item img { height: 38px; }
}

/* preserve composite layer for band */
.logo-band,
.logo-band * { -webkit-transform: translateZ(0); transform: translateZ(0); }

/* ---------------- Industries ---------------- */
.industry-section{padding:80px 20px 40px;max-width:1400px;margin:0 auto}
.industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;margin-bottom:40px}
.industry-card{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #e2e8f0;display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;transition:all .3s}
.industry-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--brand-purple);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.industry-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,.12)}
@media (max-width:768px){
  .industry-grid{display:block}
  .industry-card{padding:12px 16px;margin-bottom:12px;border-radius:10px;box-shadow:none;border:1px solid #e6e6ea;cursor:pointer}
  .industry-card .card-description,.industry-card .card-footer{display:none}
  .industry-card.expanded .card-description,.industry-card.expanded .card-footer{display:block;margin-top:12px}
  .industry-grid .industry-card:first-child{border-top:0}
  #industries,#industries .industry-grid,#industries .industry-card{-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden}
}

/* ---------------- Work process ---------------- */
#work-process-component{width:100%;display:block;padding:30px 20px 0;background:#f8fafc;color:#1e293b;isolation:isolate}
#work-process-title{font-family:'Poppins',sans-serif;font-size:35px;font-weight:600;color:#36454F}

/* ---------------- Footer ---------------- */
.nexora-footer{background:#f9f9f9;color:#333;padding:70px 20px 32px;border-top:5px solid;border-image:linear-gradient(to right,#6366f1,#9333ea) 1}
.footer-cta h3{font-family:'Poppins',sans-serif;font-size:34px;font-weight:700;margin:0 0 24px;color:#1f2937}
.footer-btn{background:#ff6b6b;color:#fff;padding:16px 36px;border-radius:12px;text-decoration:none;font-size:18px;font-weight:600;display:inline-block}

/* small responsive footer tweaks */
@media (max-width:992px){
  .footer-container{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer-cta .footer-btn{min-width:220px}
}

/* ---------------- Media queries for services responsiveness ---------------- */
@media (max-width:1200px){ .service-text h3{font-size:48px} .service-animation lottie-player,.service-animation>div{max-width:520px} }
@media (max-width:992px){
  .service-item{flex-direction:column;text-align:left;min-height:auto}
  .service-text{width:100%}
  .feature-list{grid-template-columns:1fr 1fr}
  .service-animation{margin-top:24px;min-height:320px;width:100%;max-width:500px}
  .service-animation .lottie-wrap{width:min(520px,80vw)}
  .lottie-container{width:320px;height:320px}
  .service-animation::before{top:5%;left:5%;right:5%;bottom:5%}
  .feat-tip{left:0;transform:translateY(8px);bottom:calc(100% + 10px);width:220px}
  .service-text h3{font-size:42px}
}
@media (max-width:768px){
  .services-section{padding:60px 15px}
  .services-section h2{font-size:42px;margin-bottom:60px}
  .service-item{margin-bottom:80px}
  .service-text h3{font-size:36px}
  .service-text p{font-size:16px}
  .feature-list{grid-template-columns:1fr;gap:12px}
  .lottie-container{width:280px;height:280px}
  .feat-tip{width:86vw;left:0;transform:translateY(8px);bottom:calc(100% + 8px)}
}
@media (max-width:560px){
  .services-section h2{font-size:36px;margin-bottom:50px}
  .service-text h3{font-size:32px}
  .service-animation{min-height:280px}
  .lottie-container{width:250px;height:250px}
}
@media (max-width:480px){
  .services-section{padding:40px 15px}
  .services-section h2{font-size:32px}
  .service-text h3{font-size:28px}
  .service-text p{font-size:15px}
  .lottie-container{width:220px;height:220px}
  .service-cta{font-size:14px;padding:8px 16px}
}
/* === Unified Header (custom) === */
:root{ --nl-header-h: 80px; }           /* desktop */
@media (max-width: 768px){ :root{ --nl-header-h: 76px; } }

.site-header.custom-header{
  position: fixed; top: 0; left: 0; width: 100%;
  height: var(--nl-header-h); z-index: 1100;
}
.site-header.custom-header::before{
  content:""; position:absolute; inset:0;
  background: rgba(102,51,152,.6); backdrop-filter: blur(8px);
  transition: background .6s, backdrop-filter .6s, box-shadow .6s; z-index:0;
}
.site-header.custom-header.scrolled::before{
  background: rgba(102,51,152,.32);
  backdrop-filter: blur(20px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.site-header .header-inner{ position:relative; z-index:1; max-width:1400px; margin:0 auto;
  height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 30px; box-sizing:border-box;
}
.site-header .logo img{ height:84px; display:block; }

/* desktop nav */
.site-header .main-nav ul{ list-style:none; display:flex; gap:56px; align-items:center; margin:0; padding:0; }
.site-header .main-nav a{ color:#fff; text-decoration:none; font-weight:500; font-size:18px; padding:10px 0; display:inline-block; }
.site-header .main-nav a:hover{ text-decoration:underline; }

/* CTA */
.site-header .header-btn .btn-primary{ background:#FF6B6B; color:#fff; padding:14px 32px; border-radius:7px; text-decoration:none; font-weight:500; }
.site-header .header-btn .btn-primary:hover{ background:#e05555; }

/* hamburger */
.mobile-menu-btn{ display:none; flex-direction:column; justify-content:space-between; width:30px; height:24px; background:transparent; border:0; cursor:pointer; padding:0; z-index:1115; position:relative; }
.mobile-menu-btn span{ height:3px; width:100%; background:#fff; border-radius:3px; transition:all .25s; }

/* overlay */
.overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1130; }
.overlay.active{ display:block; }

/* mobile panel (hidden by default) */
.custom-mobile-nav{ display:none; visibility:hidden; pointer-events:none; transform:translateX(100%); opacity:0; }

/* mobile breakpoint */
@media (max-width:992px){
  .site-header .main-nav{ display:none; }
  .mobile-menu-btn{ display:flex; }
  .site-header .header-btn{ display:none !important; } /* hide CTA in header; it’s inside the panel */

  .custom-mobile-nav{
    display:block; position:fixed; top:0; right:0; width:80%; max-width:400px; min-width:260px; height:100vh;
    background:#663398; padding:100px 28px 30px; box-sizing:border-box;
    transform:translateX(100%); transition:transform .28s ease-in-out, opacity .18s linear;
    opacity:0; visibility:hidden; pointer-events:none; z-index:1135; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .custom-mobile-nav ul{ list-style:none; padding:0; margin:0; }
  .custom-mobile-nav li{ margin-bottom:18px; }
  .custom-mobile-nav a{ display:block; color:#fff; text-decoration:none; font-size:20px; font-weight:500; padding:10px 0; }
  .close-mobile-menu{ position:absolute; top:20px; right:18px; background:none; border:0; color:#fff; font-size:32px; cursor:pointer; z-index:1140; }

  /* open state */
  .custom-mobile-nav.active{ transform:translateX(0) !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
  .overlay.active{ display:block; }
}

/* hide any legacy theme burger class if present */
@media (max-width:992px){
  .site-header .menu-toggle{ display:none !important; }
}

/* End consolidated style.css */
