/* ================================================================
   FUTURISTIC DESIGN SYSTEM v2 — The Ideal Card
   Premium next-gen aesthetics: 3D, aurora, grain, glow, motion
   ================================================================ */

/* --- 0. Premium Typography --- */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@100,200,300,400,500,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Cabinet Grotesk', 'Satoshi', var(--font), sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --fut-accent: #6744DA;
  --fut-accent2: #A855F7;
  --fut-cyan: #22d3ee;
  --fut-teal: #0d9488;
  --fut-glow: rgba(103,68,218,0.4);
  --fut-glow-strong: rgba(103,68,218,0.6);
  --fut-border-glass: rgba(255,255,255,0.08);
  --fut-bg-glass: rgba(255,255,255,0.04);
  --fut-card-radius: 16px;
  --perspective: 1200px;
}
[data-theme="light"] {
  --fut-border-glass: rgba(103,68,218,0.08);
  --fut-bg-glass: rgba(255,255,255,0.6);
  --fut-glow: rgba(103,68,218,0.25);
  --fut-glow-strong: rgba(103,68,218,0.4);
}

/* Apply premium display font to all headings */
h1, h2, h3, .hero-title, .section-title,
.dash-topbar-left h1, .ds-section-header h2,
.pd-title, .hero h1, .hero h2 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em;
}

/* Monospace for stats/numbers */
.ds-stat-val, .pd-price, .stat-number, .counter-value,
.fut-mono {
  font-family: var(--font-mono) !important;
}


/* ================================================================
   1. AURORA / NORTHERN LIGHTS BACKGROUND
   ================================================================ */
.fut-aurora {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.fut-aurora-wave {
  position: absolute;
  width: 200%;
  height: 200%;
  border-radius: 40%;
  filter: blur(100px);
  opacity: 0.5;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.fut-aurora-wave-1 {
  top: -60%; left: -30%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(103,68,218,0.18) 0deg,
    rgba(168,85,247,0.12) 60deg,
    rgba(34,211,238,0.08) 120deg,
    rgba(13,148,136,0.10) 180deg,
    rgba(103,68,218,0.15) 240deg,
    rgba(59,130,246,0.08) 300deg,
    rgba(103,68,218,0.18) 360deg
  );
  animation: futAurora1 25s infinite alternate;
}

.fut-aurora-wave-2 {
  top: -40%; right: -40%;
  background: conic-gradient(from 120deg at 40% 60%,
    rgba(168,85,247,0.12) 0deg,
    rgba(13,148,136,0.10) 90deg,
    rgba(103,68,218,0.15) 180deg,
    rgba(34,211,238,0.08) 270deg,
    rgba(168,85,247,0.12) 360deg
  );
  animation: futAurora2 30s infinite alternate;
}

.fut-aurora-wave-3 {
  bottom: -50%; left: -20%;
  background: conic-gradient(from 240deg at 60% 40%,
    rgba(34,211,238,0.06) 0deg,
    rgba(103,68,218,0.10) 120deg,
    rgba(236,72,153,0.06) 240deg,
    rgba(34,211,238,0.06) 360deg
  );
  animation: futAurora3 35s infinite alternate;
}

@keyframes futAurora1 {
  0%   { transform: rotate(0deg) scale(1); }
  33%  { transform: rotate(8deg) scale(1.05) translate(3vw, 2vh); }
  66%  { transform: rotate(-4deg) scale(0.98) translate(-2vw, 4vh); }
  100% { transform: rotate(12deg) scale(1.08) translate(5vw, -2vh); }
}
@keyframes futAurora2 {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(-10deg) scale(1.1) translate(-4vw, 3vh); }
  100% { transform: rotate(6deg) scale(0.95) translate(3vw, -5vh); }
}
@keyframes futAurora3 {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(15deg) scale(1.06) translate(4vw, -3vh); }
  100% { transform: rotate(-8deg) scale(0.97) translate(-3vw, 4vh); }
}

/* Light theme aurora — softer, warmer */
[data-theme="light"] .fut-aurora-wave-1 {
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(240,235,255,0.9) 0deg,
    rgba(230,220,255,0.7) 90deg,
    rgba(220,245,255,0.6) 180deg,
    rgba(240,235,255,0.9) 360deg
  );
  opacity: 0.8;
}
[data-theme="light"] .fut-aurora-wave-2 {
  background: conic-gradient(from 120deg at 40% 60%,
    rgba(235,230,255,0.7) 0deg,
    rgba(220,250,245,0.6) 180deg,
    rgba(235,230,255,0.7) 360deg
  );
  opacity: 0.7;
}
[data-theme="light"] .fut-aurora-wave-3 {
  background: conic-gradient(from 240deg at 60% 40%,
    rgba(230,245,255,0.6) 0deg,
    rgba(245,235,255,0.5) 180deg,
    rgba(230,245,255,0.6) 360deg
  );
  opacity: 0.6;
}


/* ================================================================
   2. NOISE / GRAIN TEXTURE OVERLAY
   ================================================================ */
.fut-grain {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: futGrainShift 0.5s steps(4) infinite;
}
[data-theme="light"] .fut-grain { opacity: 0.03; }

@keyframes futGrainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, -3%); }
  50%  { transform: translate(3%, 1%); }
  75%  { transform: translate(-1%, 3%); }
  100% { transform: translate(2%, -2%); }
}


/* ================================================================
   3. DOT GRID TEXTURE
   ================================================================ */
.fut-dotgrid::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="light"] .fut-dotgrid::before {
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
}


/* ================================================================
   4. FLOATING 3D ELEMENTS
   ================================================================ */
.fut-floaters {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  perspective: 800px;
  overflow: hidden;
}

.fut-floater {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Orbiting ring */
.fut-floater-ring {
  width: 120px; height: 120px;
  border: 2px solid rgba(103,68,218,0.3);
  background: transparent;
  border-radius: 50%;
  top: 15%; right: 12%;
  opacity: 0.15;
  animation: futFloat1 20s infinite alternate;
}

/* Glowing orb */
.fut-floater-orb1 {
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(168,85,247,0.4) 0%, transparent 70%);
  top: 60%; left: 8%;
  animation: futFloat2 15s infinite alternate;
}

/* Small diamond */
.fut-floater-diamond {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(103,68,218,0.15));
  border-radius: 8px;
  top: 35%; right: 25%;
  opacity: 0.1;
  animation: futFloat3 18s infinite alternate;
}

/* Tiny orb */
.fut-floater-orb2 {
  width: 30px; height: 30px;
  background: radial-gradient(circle, rgba(34,211,238,0.35) 0%, transparent 70%);
  bottom: 20%; right: 15%;
  animation: futFloat4 22s infinite alternate;
}

/* Hexagonal element */
.fut-floater-hex {
  width: 80px; height: 80px;
  border: 1.5px solid rgba(103,68,218,0.2);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: transparent;
  border-radius: 0;
  top: 70%; left: 65%;
  opacity: 0.08;
  animation: futFloat5 25s infinite alternate;
}

@keyframes futFloat1 {
  0%   { transform: rotateX(15deg) rotateY(0deg) translateZ(0); }
  50%  { transform: rotateX(-10deg) rotateY(180deg) translateZ(30px) translate(20px, -30px); }
  100% { transform: rotateX(20deg) rotateY(360deg) translateZ(-10px) translate(-15px, 20px); }
}
@keyframes futFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -40px) scale(1.2); }
  100% { transform: translate(-20px, 20px) scale(0.9); }
}
@keyframes futFloat3 {
  0%   { transform: rotate(0deg) translate(0, 0); }
  50%  { transform: rotate(45deg) translate(-20px, 30px); }
  100% { transform: rotate(90deg) translate(15px, -25px); }
}
@keyframes futFloat4 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-25px, -35px) scale(1.3); }
  100% { transform: translate(20px, 15px) scale(0.85); }
}
@keyframes futFloat5 {
  0%   { transform: rotate(0deg) translate(0, 0) scale(1); }
  50%  { transform: rotate(30deg) translate(25px, -20px) scale(1.1); }
  100% { transform: rotate(-15deg) translate(-15px, 30px) scale(0.95); }
}

[data-theme="light"] .fut-floater-ring { border-color: rgba(103,68,218,0.15); }
[data-theme="light"] .fut-floater-orb1 { background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%); }
[data-theme="light"] .fut-floater-diamond { background: linear-gradient(135deg, rgba(34,211,238,0.1), rgba(103,68,218,0.08)); }
[data-theme="light"] .fut-floater-orb2 { background: radial-gradient(circle, rgba(34,211,238,0.15) 0%, transparent 70%); }
[data-theme="light"] .fut-floater-hex { border-color: rgba(103,68,218,0.1); }


/* ================================================================
   5. GLASSMORPHISM BASE CLASSES
   ================================================================ */
.fut-glass {
  background: var(--fut-bg-glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--fut-border-glass) !important;
}

.fut-glass-strong {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.10) !important;
}
[data-theme="light"] .fut-glass-strong {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(103,68,218,0.10) !important;
}

/* Auto-glass common elements across all pages */
.navbar,
header.sticky {
  background: rgba(8,8,15,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .navbar,
[data-theme="light"] header.sticky {
  background: rgba(255,255,255,0.75) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
/* Ensure inner nav elements don't get double backgrounds */
.navbar nav,
nav.navbar-nav,
.nav-links {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}

/* Cards across the site */
.card, .feature-card, .pricing-card, .testimonial-card,
.blog-card, .case-card, .solution-card, .industry-card,
.help-card, .contact-card, .team-card, .plan-card,
.changelog-card, .api-card, .step-card {
  background: var(--fut-bg-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--fut-border-glass) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.2s ease !important;
}
[data-theme="light"] .card, [data-theme="light"] .feature-card,
[data-theme="light"] .pricing-card, [data-theme="light"] .testimonial-card,
[data-theme="light"] .blog-card, [data-theme="light"] .case-card,
[data-theme="light"] .solution-card, [data-theme="light"] .industry-card,
[data-theme="light"] .help-card, [data-theme="light"] .contact-card,
[data-theme="light"] .team-card, [data-theme="light"] .plan-card,
[data-theme="light"] .changelog-card, [data-theme="light"] .api-card,
[data-theme="light"] .step-card {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(103,68,218,0.08) !important;
}

/* Footer */
footer, .footer {
  background: rgba(5,5,12,0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] footer, [data-theme="light"] .footer {
  background: rgba(250,248,255,0.9) !important;
  border-top: 1px solid rgba(103,68,218,0.08);
}


/* ================================================================
   6. ANIMATED GRADIENT BORDERS
   ================================================================ */
@supports (background: conic-gradient(red,blue)) {
  @property --fut-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
}

.fut-glow-border {
  position: relative;
  overflow: visible !important;
}
.fut-glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--fut-border-angle, 0deg),
    rgba(103,68,218,0.5),
    rgba(168,85,247,0.25),
    rgba(34,211,238,0.2),
    rgba(59,130,246,0.25),
    rgba(103,68,218,0.5)
  );
  z-index: -1;
  animation: futBorderSpin 8s linear infinite;
  opacity: 0.5;
}
@keyframes futBorderSpin {
  to { --fut-border-angle: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: paint(something)) {
  .fut-glow-border::before {
    animation: futBorderHueShift 8s linear infinite;
  }
  @keyframes futBorderHueShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }
}

[data-theme="light"] .fut-glow-border::before { opacity: 0.3; }


/* ================================================================
   7. GLOW & NEON ACCENTS
   ================================================================ */

/* Button glow */
.btn-primary, .cta-btn, .hero-cta,
button[class*="primary"], a[class*="primary"],
.fut-glow-btn {
  box-shadow: 0 0 20px rgba(103,68,218,0.35), 0 0 40px rgba(103,68,218,0.12) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-primary:hover, .cta-btn:hover, .hero-cta:hover,
button[class*="primary"]:hover, a[class*="primary"]:hover,
.fut-glow-btn:hover {
  box-shadow: 0 0 28px rgba(103,68,218,0.55), 0 0 56px rgba(103,68,218,0.2) !important;
  transform: translateY(-2px) scale(1.02);
}

/* Gradient text on major headings */
.fut-gradient-text,
.hero-title, .hero h1, .section-title {
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .fut-gradient-text,
[data-theme="light"] .hero-title,
[data-theme="light"] .hero h1,
[data-theme="light"] .section-title {
  background: linear-gradient(135deg, #1a1a2e 0%, #4c1d95 50%, #6744DA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ================================================================
   8. 3D CARD TILT (JS-driven, CSS setup)
   ================================================================ */
.fut-tilt {
  transform-style: preserve-3d;
  perspective: var(--perspective);
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.fut-tilt-inner {
  transition: transform 0.15s ease-out;
}

/* Shine overlay for 3D tilt */
.fut-tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.fut-tilt:hover .fut-tilt-shine { opacity: 1; }
[data-theme="light"] .fut-tilt-shine {
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,0.3) 0%,
    transparent 60%
  );
}


/* ================================================================
   9. CURSOR GLOW TRAIL
   ================================================================ */
.fut-cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103,68,218,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease-out, top 0.15s ease-out, opacity 0.3s;
  opacity: 0;
  will-change: left, top;
}
.fut-cursor-glow.active { opacity: 1; }
[data-theme="light"] .fut-cursor-glow {
  background: radial-gradient(circle, rgba(103,68,218,0.06) 0%, transparent 70%);
}


/* ================================================================
   10. SCROLL-TRIGGERED REVEAL (Morph Transitions)
   ================================================================ */
.fut-reveal {
  opacity: 0;
  transform: translateY(40px);
}
/* Never hide content inside modals */
.pd-modal-overlay .fut-reveal,
.pd-modal .fut-reveal,
[class*="modal"] .fut-reveal {
  opacity: 1 !important;
  transform: none !important;
}
.fut-reveal.fut-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Variants */
.fut-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
}
.fut-reveal-left.fut-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fut-reveal-right {
  opacity: 0;
  transform: translateX(50px);
}
.fut-reveal-right.fut-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fut-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
}
.fut-reveal-scale.fut-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ================================================================
   11. MAGNETIC BUTTON (JS-driven, CSS setup)
   ================================================================ */
.fut-magnetic {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}


/* ================================================================
   12. SCROLL-TRIGGERED COUNTER (CSS for display)
   ================================================================ */
.fut-counter {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}


/* ================================================================
   13. SPRING HOVER ON CARDS
   ================================================================ */
.card:hover, .feature-card:hover, .pricing-card:hover,
.testimonial-card:hover, .blog-card:hover, .case-card:hover,
.solution-card:hover, .industry-card:hover, .help-card:hover,
.contact-card:hover, .team-card:hover, .plan-card:hover,
.ds-stat:hover, .ds-content-card:hover, .ds-quick-action:hover,
.ds-chart-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(103,68,218,0.12), 0 0 1px rgba(255,255,255,0.1) !important;
}
[data-theme="light"] .card:hover, [data-theme="light"] .feature-card:hover,
[data-theme="light"] .pricing-card:hover, [data-theme="light"] .ds-stat:hover {
  box-shadow: 0 12px 40px rgba(103,68,218,0.08), 0 0 1px rgba(0,0,0,0.05) !important;
}


/* ================================================================
   14. PARALLAX DEPTH LAYERS (CSS setup, JS-driven)
   ================================================================ */
.fut-parallax-slow  { will-change: transform; }
.fut-parallax-mid   { will-change: transform; }
.fut-parallax-fast  { will-change: transform; }


/* ================================================================
   15. SMOOTH SCROLL SNAP (Optional, add .fut-snap to body)
   ================================================================ */
.fut-snap {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}
.fut-snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}


/* ================================================================
   16. ADMIN-SPECIFIC OVERRIDES
   ================================================================ */

/* Sidebar glassmorphism */
.dash-side {
  background: rgba(10,10,20,0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .dash-side {
  background: rgba(250,248,255,0.85) !important;
  border-right: 1px solid rgba(103,68,218,0.08) !important;
}

/* Sidebar gradient accent line */
.dash-side::after {
  content: '';
  position: absolute;
  top: 0; right: -1px;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(103,68,218,0.4) 30%, rgba(168,85,247,0.3) 50%, rgba(103,68,218,0.4) 70%, transparent 100%);
  pointer-events: none;
}
[data-theme="light"] .dash-side::after {
  background: linear-gradient(180deg, transparent 0%, rgba(103,68,218,0.15) 30%, rgba(168,85,247,0.1) 50%, rgba(103,68,218,0.15) 70%, transparent 100%);
}

/* Top bar */
.dash-topbar {
  background: rgba(8,8,15,0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .dash-topbar {
  background: rgba(250,248,255,0.85) !important;
  border-bottom: 1px solid rgba(103,68,218,0.08) !important;
}

/* Admin stat cards, tables, charts */
.ds-stat, .ds-table-wrap, .ds-chart-card, .ds-content-card,
.ds-quick-action, .ds-settings-grid, .ds-user-detail-card,
.ds-product-section, .dash-search, .dash-notif-dropdown {
  background: var(--fut-bg-glass) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--fut-border-glass) !important;
}

/* Stat icon glows */
.ds-stat-icon.purple { box-shadow: 0 0 16px rgba(168,85,247,0.2); }
.ds-stat-icon.cyan   { box-shadow: 0 0 16px rgba(34,211,238,0.2); }
.ds-stat-icon.green  { box-shadow: 0 0 16px rgba(16,185,129,0.2); }
.ds-stat-icon.amber  { box-shadow: 0 0 16px rgba(245,158,11,0.2); }
.ds-stat-icon.pink   { box-shadow: 0 0 16px rgba(236,72,153,0.2); }

/* Status badge glows */
.status-badge.active, .status-badge.delivered, .status-badge.published { box-shadow: 0 0 10px rgba(16,185,129,0.15); }
.status-badge.processing { box-shadow: 0 0 10px rgba(168,85,247,0.15); }
.status-badge.shipped    { box-shadow: 0 0 10px rgba(34,211,238,0.15); }
.status-badge.pending    { box-shadow: 0 0 10px rgba(245,158,11,0.15); }

/* Gradient text on admin headings */
.dash-topbar-left h1, .ds-section-header h2,
.ds-stat-val {
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .dash-topbar-left h1,
[data-theme="light"] .ds-section-header h2,
[data-theme="light"] .ds-stat-val {
  background: linear-gradient(135deg, #1a1a2e 0%, #4c1d95 60%, #6744DA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Comparison bar glows */
.ds-compare-fill.purple { box-shadow: 0 2px 8px rgba(168,85,247,0.3); }
.ds-compare-fill.cyan   { box-shadow: 0 2px 8px rgba(34,211,238,0.3); }
.ds-compare-fill.amber  { box-shadow: 0 2px 8px rgba(245,158,11,0.3); }
.ds-compare-fill.green  { box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.ds-compare-fill.pink   { box-shadow: 0 2px 8px rgba(236,72,153,0.3); }

/* Notification dot pulse */
.dash-notif-dot {
  animation: futNotifPulse 2.5s ease-in-out infinite;
}
@keyframes futNotifPulse {
  0%,100% { box-shadow: 0 0 4px rgba(244,63,94,0.2); }
  50%     { box-shadow: 0 0 10px rgba(244,63,94,0.5), 0 0 20px rgba(244,63,94,0.15); }
}

/* Active nav glow */
.dash-nav-item.active { box-shadow: inset 0 0 20px rgba(103,68,218,0.08); }
.dash-nav-item.active::before { box-shadow: 0 0 10px rgba(103,68,218,0.5); background: linear-gradient(180deg, var(--accent), #A855F7) !important; }
.dash-user-avatar { box-shadow: 0 0 0 2px rgba(244,63,94,0.3); transition: box-shadow 0.3s; }
.dash-user:hover .dash-user-avatar { box-shadow: 0 0 0 3px rgba(244,63,94,0.5), 0 0 16px rgba(244,63,94,0.2); }
.dash-side-logo span { box-shadow: 0 0 12px rgba(244,63,94,0.2); }


/* ================================================================
   17. PRODUCT PAGE OVERRIDES
   ================================================================ */

/* Hero image / video — no border or animated gradient frame */
.pd-main-img {
  position: relative !important;
  overflow: hidden !important;
  background: var(--fut-bg-glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none !important;
}

/* Product cards */
.pd-mat-card, .pd-finish-card, .pd-related-card,
.pd-testi-card, .pd-review-card, .pd-faq-item,
.pd-spec-icon, .pd-reviews-summary, .pd-help-box, .pd-prod-ship {
  background: var(--fut-bg-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--fut-border-glass) !important;
}
[data-theme="light"] .pd-mat-card, [data-theme="light"] .pd-finish-card,
[data-theme="light"] .pd-related-card, [data-theme="light"] .pd-testi-card {
  background: rgba(255,255,255,0.6) !important;
  border-color: rgba(103,68,218,0.08) !important;
}

/* Product hover effects */
.pd-mat-card:hover, .pd-finish-card:hover, .pd-related-card:hover,
.pd-testi-card:hover, .pd-review-card:hover, .pd-faq-item:hover {
  transform: translateY(-4px) scale(1.02) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Product gradient text */
.pd-title, h1.pd-title {
  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #6744DA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .pd-title, [data-theme="light"] h1.pd-title {
  background: linear-gradient(135deg, #1a1a2e 0%, #4c1d95 50%, #6744DA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pd-price {
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-mono);
}
[data-theme="light"] .pd-price {
  background: linear-gradient(135deg, #1a1a2e 0%, #6744DA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* NFC badge pulse */
.pd-nfc { animation: futNfcPulse 3s ease-in-out infinite; }
@keyframes futNfcPulse {
  0%,100% { box-shadow: 0 0 8px rgba(34,211,238,0.1), 0 0 16px rgba(34,211,238,0.05); }
  50%     { box-shadow: 0 0 16px rgba(34,211,238,0.25), 0 0 32px rgba(34,211,238,0.1); }
}

/* Badge glows */
.pd-badge.best    { box-shadow: 0 0 16px rgba(245,158,11,0.2), 0 0 32px rgba(245,158,11,0.08); }
.pd-badge.new     { box-shadow: 0 0 16px rgba(16,185,129,0.2), 0 0 32px rgba(16,185,129,0.08); }
.pd-badge.sale    { box-shadow: 0 0 16px rgba(244,63,94,0.2), 0 0 32px rgba(244,63,94,0.08); }
.pd-badge.limited { box-shadow: 0 0 16px rgba(168,85,247,0.2), 0 0 32px rgba(168,85,247,0.08); }

/* Active states glow */
.pd-thumb.active  { box-shadow: 0 0 12px rgba(103,68,218,0.35); border-color: var(--accent) !important; }
.pd-mat-card.active, .pd-finish-card.active { box-shadow: 0 0 16px rgba(103,68,218,0.3) !important; border-color: var(--accent) !important; }

/* Float bar */
.pd-float-bar {
  background: rgba(8,8,15,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
[data-theme="light"] .pd-float-bar {
  background: rgba(245,243,255,0.85) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* Pill nav */
.nav-link { border-radius: 100px !important; padding: 6px 16px !important; }
.nav-link.active { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-theme="light"] .nav-link.active { background: rgba(103,68,218,0.08) !important; }


/* ================================================================
   18. RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .fut-floaters { display: none; }
  .fut-aurora-wave { filter: blur(80px); }
  .fut-cursor-glow { display: none; }
  .fut-grain { opacity: 0.02; }
  .card:hover, .feature-card:hover, .ds-stat:hover {
    transform: translateY(-3px) !important;
  }
}

@media (max-width: 480px) {
  .fut-floaters { display: none; }
  .fut-aurora-wave { filter: blur(60px); opacity: 0.4; }
  .fut-grain { opacity: 0.015; }
  .card:hover, .feature-card:hover, .ds-stat:hover {
    transform: translateY(-2px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fut-aurora-wave,
  .fut-floater,
  .fut-grain,
  .fut-glow-border::before,
  .fut-reveal {
    animation: none !important;
    transition: none !important;
  }
  .fut-reveal { opacity: 1; transform: none; }
}

/* ================================================================
   19. PERSONALIZE MODAL PROTECTION
   Reset ALL futuristic effects inside the design editor modal
   so nothing interferes with the Fabric.js canvas layout
   ================================================================ */
.pd-modal-overlay,
.pd-modal-overlay *,
.pd-modal,
.pd-modal * {
  --fut-border-angle: 0deg;
}
.pd-modal-overlay .fut-tilt,
.pd-modal .fut-tilt {
  transform: none !important;
  perspective: none !important;
}
.pd-modal-overlay .fut-tilt-shine,
.pd-modal .fut-tilt-shine {
  display: none !important;
}
.pd-modal-overlay .fut-reveal,
.pd-modal .fut-reveal,
.pd-modal-overlay .fut-reveal-left,
.pd-modal .fut-reveal-left,
.pd-modal-overlay .fut-reveal-right,
.pd-modal .fut-reveal-right,
.pd-modal-overlay .fut-reveal-scale,
.pd-modal .fut-reveal-scale {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.pd-modal .pd-editor-layout {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 24px !important;
  min-height: 0 !important;
}
.pd-modal .pd-editor-layout-left {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.pd-modal .pd-editor-layout-right {
  display: flex !important;
  flex-direction: column !important;
}
.pd-modal .pd-editor-canvas-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 260px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.pd-modal .pd-editor-canvas-wrap canvas {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 900px) {
  .pd-modal .pd-editor-layout {
    grid-template-columns: 1fr !important;
  }
}