/* ==========================================================================
   QubixLabs — Enterprise AI Platform
   Shared design-system stylesheet (loaded on every page)
   ========================================================================== */
:root{
  --void:#05070D;
  --panel:#0B1220;
  --panel-2:#0E1730;
  --line: rgba(231,235,247,0.10);
  --text:#E7EBF7;
  --muted:#9AA3C4;
  --blue:#3B6EF5;
  --cyan:#22E5D8;
  --violet:#9B6BFF;
}
html.light{
  --void:#F5F7FC;
  --panel:#FFFFFF;
  --panel-2:#F0F3FB;
  --line: rgba(11,18,32,0.10);
  --text:#0B1220;
  --muted:#5B6478;
}
*{box-sizing:border-box}
[x-cloak]{display:none !important;}
body{background:var(--void); color:var(--text); font-family:'Inter',sans-serif; transition:background .3s ease,color .3s ease; overflow-x:hidden; position:relative;}

/* Persistent ambient color wash behind every page, not just hero sections */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(ellipse 55% 45% at 12% -5%, rgba(59,110,245,0.16), transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 10%, rgba(34,229,216,0.12), transparent 60%),
    radial-gradient(ellipse 50% 45% at 50% 105%, rgba(155,107,255,0.13), transparent 60%);
}
html.light body::before{
  background-image:
    radial-gradient(ellipse 55% 45% at 12% -5%, rgba(59,110,245,0.10), transparent 60%),
    radial-gradient(ellipse 45% 40% at 100% 10%, rgba(34,229,216,0.08), transparent 60%),
    radial-gradient(ellipse 50% 45% at 50% 105%, rgba(155,107,255,0.08), transparent 60%);
}

.font-display{font-family:'Space Grotesk',sans-serif;}
.font-mono{font-family:'JetBrains Mono',monospace;}
.grad-text{background:linear-gradient(100deg,#fff 0%, var(--cyan) 45%, var(--blue) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
html.light .grad-text{background:linear-gradient(100deg,#0B1220 0%, #1650D6 60%, #22B8CE 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Primary gradient fill — used on CTA buttons, icon tiles and ambient blur blobs.
   This was previously referenced across every page but never defined. */
.grad-bg{ background-image: linear-gradient(115deg, var(--blue) 0%, var(--violet) 52%, var(--cyan) 100%); }

.glass{background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border:1px solid var(--line); backdrop-filter: blur(14px);}
html.light .glass{background:linear-gradient(180deg, rgba(11,18,32,0.03), rgba(11,18,32,0.008));}
.glow{box-shadow: 0 0 0 1px var(--line), 0 20px 60px -20px rgba(59,110,245,0.45);}
.shadow-glow{ box-shadow: 0 0 0 1px var(--line), 0 8px 40px -8px rgba(59,110,245,0.4) !important; }
.shadow-glow-cyan{ box-shadow: 0 0 40px -8px rgba(34,229,216,0.55) !important; }
.pipe{stroke-dasharray: 6 8; animation: dash 1.6s linear infinite;}
@keyframes dash{ to{ stroke-dashoffset:-140; } }
.pulse-dot{ animation: pulseDot 2.2s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{opacity:.25} 50%{opacity:1} }
.float{ animation: floatY 6s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.btn-primary{ background:linear-gradient(100deg,var(--blue),var(--cyan)); color:#04070f; font-weight:600; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ background:rgba(255,255,255,0.04); }
.card-hover{ transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.card-hover:hover{ transform: translateY(-6px); border-color: rgba(59,110,245,0.55); box-shadow:0 24px 60px -24px rgba(59,110,245,0.5), 0 0 40px -18px rgba(34,229,216,0.35); }
.noise{ background-image:radial-gradient(circle at 1px 1px, rgba(231,235,247,0.06) 1px, transparent 0); background-size: 22px 22px; }
.scrim{ mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }
.field-chip{ opacity:0; transform: translateY(6px); animation: chipIn .5s ease forwards; }
@keyframes chipIn{ to{ opacity:1; transform:none; } }
.ring-progress{ transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.step-active{ color: var(--cyan) !important; }
.step-line-fill{ transition: width 0.6s ease; }
::selection{ background: var(--blue); color:white; }
@media (prefers-reduced-motion: reduce){
  .pipe, .pulse-dot, .float, .field-chip{ animation:none !important; }
}
nav a.active{ color: var(--cyan); }
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* Highlighted header CTA — soft breathing glow ring so "Book a Demo" pops */
.nav-cta{ position:relative; isolation:isolate; }
.nav-cta::before{
  content:'';
  position:absolute; inset:-2px; z-index:-1; border-radius:inherit;
  background:linear-gradient(115deg, var(--blue), var(--violet), var(--cyan));
  opacity:.55; filter:blur(10px);
  animation: navCtaPulse 2.6s ease-in-out infinite;
}
@keyframes navCtaPulse{ 0%,100%{ opacity:.4; filter:blur(9px);} 50%{ opacity:.75; filter:blur(13px);} }
@media (prefers-reduced-motion: reduce){ .nav-cta::before{ animation:none; opacity:.55; } }

/* Page-header used on interior pages (About / Platform / Industries / Contact) */
.page-hero{ padding-top:9.5rem; padding-bottom:4rem; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.badge-soft{ background:rgba(59,110,245,0.14); color:#8EB0FF; }
.badge-soft-cyan{ background:rgba(34,229,216,0.14); color:var(--cyan); }
.badge-soft-violet{ background:rgba(155,107,255,0.14); color:#C4A8FF; }

/* Trust-bar marquee */
.marquee-track{ animation: marqueeScroll 32s linear infinite; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logo-tile{ filter:grayscale(1); opacity:.6; transition: opacity .3s ease, filter .3s ease; }
.logo-tile:hover{ filter:grayscale(0); opacity:1; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* Gradient-mesh ambient background used behind hero/section canvases */
.grid-fade{
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(59,110,245,0.24), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(34,229,216,0.18), transparent 60%),
    radial-gradient(ellipse 45% 45% at 50% 100%, rgba(155,107,255,0.16), transparent 60%),
    linear-gradient(180deg, transparent, var(--void) 90%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
html.light .grid-fade{
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(59,110,245,0.13), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(34,229,216,0.10), transparent 60%),
    radial-gradient(ellipse 45% 45% at 50% 100%, rgba(155,107,255,0.09), transparent 60%),
    linear-gradient(180deg, transparent, var(--void) 90%);
}

/* Nav link base + active state (hover/active handled inline via utility classes) */
.nav-link{ position:relative; }

/* Skip link for accessibility */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--panel); color:var(--text); padding:.75rem 1.25rem; border-radius:.5rem; }
.skip-link:focus{ left:1rem; top:1rem; }