/* ============================================================
   Luvalia - base.css
   Design tokens + reset + theme system (light/dark)
   ============================================================ */

:root {
  /* Brand palette */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;

  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;

  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;

  --amber-400: #fbbf24;
  --emerald-400: #34d399;
  --rose-500: #f43f5e;

  /* Gradients */
  --grad-brand: linear-gradient(110deg, #4338ca 0%, #6366f1 40%, #0ea5e9 100%);
  --grad-brand-soft: linear-gradient(110deg, #6366f1, #0ea5e9);
  --grad-text: linear-gradient(110deg, #4338ca 0%, #6366f1 40%, #0ea5e9 100%);

  /* System fonts avoid external font requests and keep first paint fast. */
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

  /* ===== LIGHT THEME (default) ===== */
:root,
[data-theme="light"] {
  --bg: #fbfbfd;
  --bg-elev: #ffffff;
  --bg-soft: #f6f7fb;
  --bg-soft-2: #f1f2f8;

  --ink: #0b0b14;
  --ink-2: #1a1d2b;
  --muted: #5b6178;
  --muted-2: #7a8094;
  --faint: #9aa0b5;

  --line: #ececf3;
  --line-2: #f1f1f6;
  --line-strong: #dcdce8;

  --shadow-sm: 0 1px 2px rgba(11, 11, 20, .04);
  --shadow-md: 0 1px 2px rgba(11, 11, 20, .04), 0 12px 32px -18px rgba(67, 56, 202, .18);
  --shadow-lg: 0 1px 2px rgba(11, 11, 20, .04), 0 30px 70px -28px rgba(99, 102, 241, .45);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, .2), 0 20px 50px -20px rgba(99, 102, 241, .35);

  /* mesh tint for light mode: white -> soft blue -> soft violet */
  --mesh-1: rgba(99, 102, 241, .14);   /* violet */
  --mesh-2: rgba(14, 165, 233, .14);   /* sky blue */
  --mesh-3: rgba(255, 255, 255, .85);  /* white base */
  --shader-core: rgba(99, 102, 241, .18);
  --shader-band: rgba(14, 165, 233, .16);
  --shader-edge: rgba(139, 92, 246, .13);
  --shader-warm: rgba(52, 211, 153, .08);
  --grid-line: rgba(11, 11, 20, .025);

  /* per-section gradient helpers */
  --grad-sec-1: linear-gradient(180deg, color-mix(in srgb, var(--brand-600) 6%, var(--bg)) 0%, var(--bg) 55%);
  --grad-sec-2: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--sky-500) 6%, var(--bg)) 50%, var(--bg));
  --grad-sec-3: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--violet-500) 5%, var(--bg)) 50%, var(--bg));
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg: #07070b;
  --bg-elev: #11111a;
  --bg-soft: #16161f;
  --bg-soft-2: #1c1c28;

  --ink: #f8fafc;
  --ink-2: #e8eaf2;
  --muted: #a1a7be;
  --muted-2: #828aa0;
  --faint: #5f6478;

  --line: #23232f;
  --line-2: #1d1d28;
  --line-strong: #2e2e3e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -18px rgba(0, 0, 0, .6);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 70px -28px rgba(99, 102, 241, .55);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, .35), 0 20px 50px -20px rgba(99, 102, 241, .5);

  --mesh-1: rgba(99, 102, 241, .22);
  --mesh-2: rgba(14, 165, 233, .18);
  --mesh-3: rgba(124, 58, 237, .16);
  --shader-core: rgba(99, 102, 241, .24);
  --shader-band: rgba(14, 165, 233, .18);
  --shader-edge: rgba(139, 92, 246, .20);
  --shader-warm: rgba(52, 211, 153, .10);
  --grid-line: rgba(255, 255, 255, .035);

  /* dark mode section gradients: deeper, glowy */
  --grad-sec-1: linear-gradient(180deg, color-mix(in srgb, var(--brand-600) 14%, var(--bg)) 0%, var(--bg) 55%);
  --grad-sec-2: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--sky-500) 12%, var(--bg)) 50%, var(--bg));
  --grad-sec-3: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--violet-500) 12%, var(--bg)) 50%, var(--bg));
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 104px; }
@media (max-width: 640px) {
  section[id] { scroll-margin-top: 88px; }
}
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.011em;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}

.font-display { font-family: var(--font-display); letter-spacing: -.025em; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

/* ===== SCROLLBAR ===== */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* ===== BACKGROUND LAYERS ===== */
.mesh-bg {
  overflow: hidden;
  background:
    radial-gradient(55% 45% at 12% 0%, var(--mesh-1), transparent 60%),
    radial-gradient(50% 40% at 92% 8%, var(--mesh-2), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, var(--mesh-3), transparent 65%),
    radial-gradient(45% 35% at 75% 55%, var(--mesh-1), transparent 65%),
    var(--bg);
}
.mesh-bg::before,
.mesh-bg::after {
  content: "";
  position: absolute;
  inset: -24vmax;
  pointer-events: none;
  transform: translate3d(0,0,0);
}
.mesh-bg::before {
  opacity: .88;
  background:
    conic-gradient(from 120deg at 45% 40%,
      transparent 0 9%,
      var(--shader-core) 14%,
      transparent 23%,
      var(--shader-band) 31%,
      transparent 43%,
      var(--shader-edge) 52%,
      transparent 66%,
      var(--shader-warm) 76%,
      transparent 90% 100%),
    radial-gradient(42% 34% at 58% 32%, rgba(255,255,255,.34), transparent 68%),
    radial-gradient(50% 42% at 30% 64%, var(--shader-band), transparent 72%);
  filter: blur(28px) saturate(1.22);
  animation: shaderSweep 26s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
}
.mesh-bg::after {
  inset: -18vmax;
  opacity: .46;
  background:
    repeating-linear-gradient(114deg,
      transparent 0 7.2%,
      color-mix(in srgb, var(--shader-core) 72%, transparent) 8.4%,
      transparent 12.2%,
      color-mix(in srgb, var(--shader-band) 64%, transparent) 14.1%,
      transparent 20%),
    linear-gradient(135deg, transparent 18%, rgba(255,255,255,.32), transparent 52%);
  filter: blur(18px);
  transform: rotate(-8deg) scale(1.06);
  animation: shaderFold 34s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, #000 20%, transparent 78%);
}
[data-theme="dark"] .mesh-bg::before {
  opacity: .74;
  mix-blend-mode: screen;
  filter: blur(34px) saturate(1.34);
}
[data-theme="dark"] .mesh-bg::after {
  opacity: .34;
}
@keyframes shaderSweep {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-8deg) scale(1.02); }
  45% { transform: translate3d(4%, 2%, 0) rotate(7deg) scale(1.08); }
  100% { transform: translate3d(-1%, 5%, 0) rotate(14deg) scale(1.04); }
}
@keyframes shaderFold {
  0% { transform: translate3d(2%, -2%, 0) rotate(-12deg) scale(1.06); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(9deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-bg::before,
  .mesh-bg::after {
    animation: none !important;
  }
}
.grid-lines {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
/* gradient-tinted section backgrounds */
.sec-grad-1 { background: var(--grad-sec-1); }
.sec-grad-2 { background: var(--grad-sec-2); }
.sec-grad-3 { background: var(--grad-sec-3); }

.hero-section::before,
.sec-grad-1::before,
.sec-grad-2::before,
.sec-grad-3::before,
#pricing::before,
.process-bg-section::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  opacity: .52;
  background:
    conic-gradient(from 138deg at 58% 38%,
      transparent 0 8%,
      color-mix(in srgb, var(--shader-core) 92%, transparent) 13%,
      transparent 24%,
      color-mix(in srgb, var(--shader-band) 86%, transparent) 34%,
      transparent 47%,
      color-mix(in srgb, var(--shader-edge) 82%, transparent) 58%,
      transparent 72%,
      color-mix(in srgb, var(--shader-warm) 76%, transparent) 82%,
      transparent 100%),
    repeating-linear-gradient(118deg,
      transparent 0 8%,
      color-mix(in srgb, var(--shader-core) 54%, transparent) 9.4%,
      transparent 13.6%,
      color-mix(in srgb, var(--shader-band) 48%, transparent) 16%,
      transparent 22%),
    radial-gradient(42% 28% at 70% 28%, rgba(255,255,255,.38), transparent 70%);
  filter: blur(18px) saturate(1.22);
  mix-blend-mode: multiply;
  animation: shaderSectionFlow 28s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse 82% 72% at 52% 42%, #000 18%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 52% 42%, #000 18%, transparent 82%);
}
.hero-section::before {
  z-index: 1;
  opacity: .68;
  filter: blur(14px) saturate(1.28);
}
.hero-section::after,
.sec-grad-1::after,
.sec-grad-2::after,
.sec-grad-3::after,
#pricing::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 1;
  pointer-events: none;
  opacity: .58;
  background:
    linear-gradient(112deg,
      transparent 0 31%,
      color-mix(in srgb, var(--shader-core) 0%, transparent) 36%,
      color-mix(in srgb, var(--shader-core) 42%, transparent) 43%,
      rgba(255,255,255,.52) 48%,
      color-mix(in srgb, var(--shader-band) 32%, transparent) 53%,
      transparent 64%),
    linear-gradient(128deg,
      transparent 0 47%,
      rgba(255,255,255,.66) 51%,
      color-mix(in srgb, var(--shader-edge) 28%, transparent) 57%,
      transparent 68%),
    linear-gradient(68deg,
      transparent 0 27%,
      color-mix(in srgb, var(--shader-warm) 30%, transparent) 35%,
      transparent 50%),
    radial-gradient(34% 24% at 72% 34%, color-mix(in srgb, var(--shader-core) 40%, transparent), transparent 72%),
    radial-gradient(30% 22% at 42% 64%, color-mix(in srgb, var(--shader-band) 30%, transparent), transparent 70%);
  background-size: 180% 180%, 170% 170%, 150% 150%, 140% 140%, 130% 130%;
  filter: blur(12px) saturate(1.32);
  mix-blend-mode: multiply;
  transform: translate3d(0,0,0) rotate(-2deg) scale(1.03);
  will-change: transform, background-position;
  animation: fluxBeamFlow 24s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse 92% 76% at 52% 42%, #000 18%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 92% 76% at 52% 42%, #000 18%, transparent 84%);
}
.hero-section::after {
  opacity: .76;
  filter: blur(10px) saturate(1.42);
}
.sec-grad-1 > .container-x,
.sec-grad-2 > .container-x,
.sec-grad-3 > .container-x,
#pricing > .container-x,
.process-bg-section > .container-x {
  position: relative;
  z-index: 2;
}
[data-theme="dark"] .hero-section::before,
[data-theme="dark"] .sec-grad-1::before,
[data-theme="dark"] .sec-grad-2::before,
[data-theme="dark"] .sec-grad-3::before,
[data-theme="dark"] #pricing::before,
[data-theme="dark"] .process-bg-section::before {
  opacity: .46;
  mix-blend-mode: screen;
  filter: blur(22px) saturate(1.35);
}
[data-theme="dark"] .hero-section::after,
[data-theme="dark"] .sec-grad-1::after,
[data-theme="dark"] .sec-grad-2::after,
[data-theme="dark"] .sec-grad-3::after,
[data-theme="dark"] #pricing::after {
  opacity: .42;
  mix-blend-mode: screen;
  filter: blur(14px) saturate(1.45);
}
@keyframes shaderSectionFlow {
  0% { transform: translate3d(-4%, -2%, 0) rotate(-7deg) scale(1.03); }
  50% { transform: translate3d(3%, 2%, 0) rotate(6deg) scale(1.09); }
  100% { transform: translate3d(-1%, 4%, 0) rotate(12deg) scale(1.05); }
}
@keyframes fluxBeamFlow {
  0% {
    transform: translate3d(-5%, -3%, 0) rotate(-5deg) scale(1.02);
    background-position: 0% 45%, 18% 50%, 42% 52%, 72% 34%, 42% 64%;
  }
  46% {
    transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.08);
    background-position: 42% 52%, 58% 46%, 24% 44%, 64% 38%, 48% 58%;
  }
  100% {
    transform: translate3d(-1%, 4%, 0) rotate(9deg) scale(1.04);
    background-position: 100% 48%, 82% 52%, 68% 46%, 76% 30%, 36% 68%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section::before,
  .hero-section::after,
  .sec-grad-1::before,
  .sec-grad-2::before,
  .sec-grad-3::before,
  .sec-grad-1::after,
  .sec-grad-2::after,
  .sec-grad-3::after,
  #pricing::before,
  #pricing::after,
  .process-bg-section::before {
    animation: none !important;
  }
}

/* ===== UTILITIES ===== */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.container-x { width: 100%; max-width: 100rem; margin-inline: auto; padding-inline: clamp(1rem, 10vw, 8rem); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.demo-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.demo-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }

/* Defer layout/paint work for below-the-fold sections. */
section:not(#home) {
  content-visibility: auto;
  contain-intrinsic-size: 760px;
}
#demos { contain-intrinsic-size: 1120px; }
#work { contain-intrinsic-size: 880px; }
#process { contain-intrinsic-size: 980px; }
#testimonials,
#pricing,
#faq,
#contact { contain-intrinsic-size: 720px; }

/* Lightweight local replacement for AOS. */
html.js [data-aos] {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--aos-duration, 700ms) cubic-bezier(.22, 1, .36, 1),
    transform var(--aos-duration, 700ms) cubic-bezier(.22, 1, .36, 1),
    filter var(--aos-duration, 700ms) cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--aos-delay, 0ms);
}
html.js [data-aos="fade-left"] { transform: translate3d(26px, 0, 0); }
html.js [data-aos="fade-right"] { transform: translate3d(-26px, 0, 0); }
html.js [data-aos="zoom-in"] { transform: scale(.96); }
html.js [data-aos="zoom-in-up"] { transform: translate3d(0, 18px, 0) scale(.96); }
html.js [data-aos="flip-left"] { transform: perspective(900px) rotateY(-8deg) translate3d(0, 14px, 0); }
html.js [data-aos].aos-animate {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  html.js [data-aos] {
    opacity: 1;
    filter: none;
    transform: none;
  }
}