/**
 * MagnusIBA Geometric Presets
 * 3 distinct animated frame styles for homepage sections
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  /* Section Accent Colors */
  --indigo: #6366f1;
  --emerald: #10b981;
  --green: #10b981;
  --amber: #f59e0b;
  --cyan: #06b6d4;
  --purple: #8b5cf6;
  --blue: #3b82f6;

  /* Prism Edge Colors */
  --prism-dark-bg: #0f172a;
  --prism-dark-surface: #1e293b;
  --prism-dark-accent: #6366f1;
  --prism-dark-accent-soft: rgba(99, 102, 241, 0.15);
  --prism-dark-border: rgba(99, 102, 241, 0.3);
  --prism-dark-text: #e2e8f0;
  --prism-dark-muted: #94a3b8;

  --prism-light-bg: #f8fafc;
  --prism-light-surface: #ffffff;
  --prism-light-accent: #4f46e5;
  --prism-light-accent-soft: rgba(79, 70, 229, 0.08);
  --prism-light-border: rgba(79, 70, 229, 0.2);
  --prism-light-text: #1e293b;
  --prism-light-muted: #64748b;

  /* Nexus Frame Colors */
  --nexus-dark-bg: #020617;
  --nexus-dark-surface: #0f172a;
  --nexus-dark-accent: #0ea5e9;
  --nexus-dark-accent-alt: #22d3ee;
  --nexus-dark-border: rgba(14, 165, 233, 0.25);
  --nexus-dark-text: #e2e8f0;
  --nexus-dark-muted: #94a3b8;

  --nexus-light-bg: #f8fafc;
  --nexus-light-surface: #ffffff;
  --nexus-light-accent: #0284c7;
  --nexus-light-accent-alt: #06b6d4;
  --nexus-light-border: rgba(2, 132, 199, 0.2);
  --nexus-light-text: #0f172a;
  --nexus-light-muted: #64748b;

  /* Vortex Shell Colors */
  --vortex-dark-bg: #0a0f1e;
  --vortex-dark-surface-start: #1a1f3c;
  --vortex-dark-surface-end: #0f1629;
  --vortex-dark-accent-1: #8b5cf6;
  --vortex-dark-accent-2: #ec4899;
  --vortex-dark-accent-3: #f59e0b;
  --vortex-dark-border: rgba(139, 92, 246, 0.2);
  --vortex-dark-text: #f1f5f9;
  --vortex-dark-muted: #94a3b8;

  --vortex-light-bg: #faf5ff;
  --vortex-light-surface-start: #ffffff;
  --vortex-light-surface-end: #f5f3ff;
  --vortex-light-accent-1: #7c3aed;
  --vortex-light-accent-2: #db2777;
  --vortex-light-accent-3: #ea580c;
  --vortex-light-border: rgba(124, 58, 237, 0.15);
  --vortex-light-text: #1e1b4b;
  --vortex-light-muted: #6b7280;

  /* Shared geometric values */
  --geo-corner-size: 24px;
  --geo-corner-size-md: 18px;
  --geo-corner-size-sm: 12px;
  --geo-cut: 16px;
  --geo-cut-md: 12px;
  --geo-cut-sm: 8px;

  /* ============================================
     WHITISH THEME VARIABLES
     ============================================ */

  /* Frost Theme - Ice crystal elegance */
  --frost-bg: #f8fbff;
  --frost-surface: #ffffff;
  --frost-accent: #38bdf8;
  --frost-accent-soft: rgba(56, 189, 248, 0.08);
  --frost-border: rgba(56, 189, 248, 0.15);
  --frost-text: #0c4a6e;
  --frost-muted: #64748b;
  --frost-glow: rgba(56, 189, 248, 0.2);

  /* Pearl Theme - Luminous opalescent */
  --pearl-bg: #fefefe;
  --pearl-surface: #ffffff;
  --pearl-accent: linear-gradient(135deg, #fdf4ff, #fce7f3, #dbeafe);
  --pearl-accent-solid: #f0abfc;
  --pearl-border: rgba(240, 171, 252, 0.2);
  --pearl-text: #4a044e;
  --pearl-muted: #71717a;
  --pearl-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);

  /* Silk Theme - Soft flowing fabric */
  --silk-bg: linear-gradient(180deg, #fefefe 0%, #faf5ff 100%);
  --silk-surface: rgba(255, 255, 255, 0.95);
  --silk-accent: #c4b5fd;
  --silk-border: rgba(196, 181, 253, 0.25);
  --silk-text: #3b0764;
  --silk-muted: #78716c;
  --silk-wave: rgba(196, 181, 253, 0.15);

  /* Crystal Theme - Prismatic glass */
  --crystal-bg: #f8fafc;
  --crystal-surface: rgba(255, 255, 255, 0.98);
  --crystal-accent: #7dd3fc;
  --crystal-border: rgba(125, 211, 252, 0.3);
  --crystal-text: #164e63;
  --crystal-muted: #64748b;
  --crystal-prism: linear-gradient(135deg, rgba(125,211,252,0.15), rgba(196,181,253,0.15), rgba(147,197,253,0.15));

  /* Snow Theme - Crisp winter elegance */
  --snow-bg: #fafafa;
  --snow-surface: #ffffff;
  --snow-accent: #94a3b8;
  --snow-border: rgba(148, 163, 184, 0.2);
  --snow-text: #1e293b;
  --snow-muted: #64748b;
  --snow-frost: rgba(148, 163, 184, 0.08);

  /* Marble Theme - Classic stone texture */
  --marble-bg: linear-gradient(135deg, #fefefe 0%, #f5f5f4 50%, #fefefe 100%);
  --marble-surface: #ffffff;
  --marble-accent: #a1a1aa;
  --marble-vein: rgba(120, 113, 108, 0.1);
  --marble-border: rgba(161, 161, 170, 0.2);
  --marble-text: #27272a;
  --marble-muted: #71717a;

  /* Cloud Theme - Floating ethereal */
  --cloud-bg: linear-gradient(180deg, #f0f9ff 0%, #ffffff 50%, #f0f9ff 100%);
  --cloud-surface: rgba(255, 255, 255, 0.9);
  --cloud-accent: #bae6fd;
  --cloud-border: rgba(186, 230, 253, 0.4);
  --cloud-text: #0369a1;
  --cloud-muted: #64748b;
  --cloud-float: 0 8px 32px rgba(186, 230, 253, 0.25);

  /* Platinum Theme - Premium metallic */
  --platinum-bg: #fafafa;
  --platinum-surface: linear-gradient(145deg, #ffffff, #f4f4f5);
  --platinum-accent: #a1a1aa;
  --platinum-metallic: linear-gradient(135deg, #e4e4e7, #a1a1aa, #e4e4e7);
  --platinum-border: rgba(161, 161, 170, 0.3);
  --platinum-text: #18181b;
  --platinum-muted: #52525b;

  /* Ivory Theme - Warm classic elegance */
  --ivory-bg: #fffbf5;
  --ivory-surface: #ffffff;
  --ivory-accent: #fbbf24;
  --ivory-warm: rgba(251, 191, 36, 0.08);
  --ivory-border: rgba(251, 191, 36, 0.2);
  --ivory-text: #78350f;
  --ivory-muted: #92400e;

  /* Diamond Theme - Brilliant sparkle */
  --diamond-bg: #fefefe;
  --diamond-surface: #ffffff;
  --diamond-accent: #e2e8f0;
  --diamond-sparkle: linear-gradient(135deg, #fff, rgba(255,255,255,0.5), #fff);
  --diamond-border: rgba(226, 232, 240, 0.5);
  --diamond-text: #1e293b;
  --diamond-muted: #475569;

  /* Moonlight Theme - Soft lunar glow */
  --moonlight-bg: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --moonlight-surface: rgba(255, 255, 255, 0.95);
  --moonlight-accent: #cbd5e1;
  --moonlight-glow: rgba(148, 163, 184, 0.15);
  --moonlight-border: rgba(203, 213, 225, 0.4);
  --moonlight-text: #334155;
  --moonlight-muted: #64748b;

  /* Porcelain Theme - Refined delicate */
  --porcelain-bg: #fefefe;
  --porcelain-surface: #ffffff;
  --porcelain-accent: #e0f2fe;
  --porcelain-glaze: linear-gradient(180deg, rgba(224,242,254,0.3), transparent);
  --porcelain-border: rgba(186, 230, 253, 0.3);
  --porcelain-text: #0c4a6e;
  --porcelain-muted: #64748b;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Prism Edge Animations */
@keyframes prism-corner-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes prism-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Nexus Frame Animations */
@keyframes nexus-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nexus-node-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--nexus-accent);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 12px 3px var(--nexus-accent);
  }
}

@keyframes nexus-scan {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Vortex Shell Animations */
@keyframes vortex-flow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes vortex-breathe {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.02);
  }
}

@keyframes vortex-corner-pulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.4);
  }
}

/* Shared entrance animation */
@keyframes geo-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   WHITISH THEME ANIMATIONS
   ============================================ */

/* Frost crystallize effect */
@keyframes frost-crystallize {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
    filter: brightness(1.1);
  }
}

/* Pearl shimmer effect */
@keyframes pearl-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Pearl iridescent glow */
@keyframes pearl-iridescent {
  0%, 100% {
    filter: hue-rotate(0deg);
    opacity: 0.5;
  }
  50% {
    filter: hue-rotate(30deg);
    opacity: 0.8;
  }
}

/* Silk wave effect */
@keyframes silk-wave {
  0%, 100% {
    transform: translateY(0) skewY(0deg);
  }
  25% {
    transform: translateY(-2px) skewY(0.5deg);
  }
  75% {
    transform: translateY(2px) skewY(-0.5deg);
  }
}

/* Crystal prism refraction */
@keyframes crystal-prism {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 0.6;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.9;
  }
}

/* Snow gentle fall */
@keyframes snow-fall {
  0% {
    transform: translateY(-5px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(5px) rotate(180deg);
    opacity: 0;
  }
}

/* Marble vein pulse */
@keyframes marble-vein {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Cloud float animation */
@keyframes cloud-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-4px) translateX(2px);
  }
  75% {
    transform: translateY(4px) translateX(-2px);
  }
}

/* Platinum metallic shine */
@keyframes platinum-shine {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Diamond sparkle effect */
@keyframes diamond-sparkle {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) rotate(45deg);
  }
}

/* Moonlight glow pulse */
@keyframes moonlight-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(148, 163, 184, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(148, 163, 184, 0.25);
  }
}

/* Porcelain glaze effect */
@keyframes porcelain-glaze {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* Card reveal for whitish themes with glassmorphism */
@keyframes whitish-card-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Shimmer sweep for premium cards */
@keyframes whitish-shimmer-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Rotating border gradient */
@property --whitish-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes whitish-border-rotate {
  from {
    --whitish-border-angle: 0deg;
  }
  to {
    --whitish-border-angle: 360deg;
  }
}

/* ============================================
   PRESET 1: PRISM EDGE
   ============================================ */

/* Dark Variant */
.geo-prism.dark {
  --prism-bg: var(--prism-dark-bg);
  --prism-surface: var(--prism-dark-surface);
  --prism-accent: var(--prism-dark-accent);
  --prism-accent-soft: var(--prism-dark-accent-soft);
  --prism-border: var(--prism-dark-border);
  --prism-text: var(--prism-dark-text);
  --prism-muted: var(--prism-dark-muted);
}

/* Light Variant */
.geo-prism.light {
  --prism-bg: var(--prism-light-bg);
  --prism-surface: var(--prism-light-surface);
  --prism-accent: var(--prism-light-accent);
  --prism-accent-soft: var(--prism-light-accent-soft);
  --prism-border: var(--prism-light-border);
  --prism-text: var(--prism-light-text);
  --prism-muted: var(--prism-light-muted);
}

.geo-prism {
  position: relative;
  background: var(--prism-surface);
  color: var(--prism-text);
  border: 1px solid var(--prism-border);

  /* Diagonal corner cuts */
  clip-path: polygon(
    var(--geo-cut) 0,
    calc(100% - var(--geo-cut)) 0,
    100% var(--geo-cut),
    100% calc(100% - var(--geo-cut)),
    calc(100% - var(--geo-cut)) 100%,
    var(--geo-cut) 100%,
    0 calc(100% - var(--geo-cut)),
    0 var(--geo-cut)
  );

  box-shadow:
    0 4px 24px var(--prism-accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Corner bracket accents */
.geo-prism .geo-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.geo-prism .geo-corner {
  position: absolute;
  width: var(--geo-corner-size);
  height: var(--geo-corner-size);
  border: 2px solid var(--prism-accent);
  animation: prism-corner-pulse 3s ease-in-out infinite;
  will-change: transform, opacity;
}

.geo-prism .geo-corner--tl {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
  animation-delay: 0s;
}

.geo-prism .geo-corner--tr {
  top: 12px;
  right: 12px;
  border-left: none;
  border-bottom: none;
  animation-delay: 0.75s;
}

.geo-prism .geo-corner--bl {
  bottom: 12px;
  left: 12px;
  border-right: none;
  border-top: none;
  animation-delay: 1.5s;
}

.geo-prism .geo-corner--br {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
  animation-delay: 2.25s;
}

/* ============================================
   PRESET 2: NEXUS FRAME
   ============================================ */

/* Dark Variant */
.geo-nexus.dark {
  --nexus-bg: var(--nexus-dark-bg);
  --nexus-surface: var(--nexus-dark-surface);
  --nexus-accent: var(--nexus-dark-accent);
  --nexus-accent-alt: var(--nexus-dark-accent-alt);
  --nexus-border: var(--nexus-dark-border);
  --nexus-text: var(--nexus-dark-text);
  --nexus-muted: var(--nexus-dark-muted);
}

/* Light Variant */
.geo-nexus.light {
  --nexus-bg: var(--nexus-light-bg);
  --nexus-surface: var(--nexus-light-surface);
  --nexus-accent: var(--nexus-light-accent);
  --nexus-accent-alt: var(--nexus-light-accent-alt);
  --nexus-border: var(--nexus-light-border);
  --nexus-text: var(--nexus-light-text);
  --nexus-muted: var(--nexus-light-muted);
}

.geo-nexus {
  position: relative;
  background: var(--nexus-surface);
  color: var(--nexus-text);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--nexus-border);
}

/* Rotating conic gradient border glow */
.geo-nexus::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--nexus-accent) 10%,
    var(--nexus-accent-alt) 20%,
    transparent 30%
  );
  animation: nexus-rotate 8s linear infinite;
  z-index: -1;
  opacity: 0.5;
  filter: blur(2px);
  will-change: transform;
}

/* Inner surface overlay */
.geo-nexus::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--nexus-surface);
  border-radius: 3px;
  z-index: 0;
}

.geo-nexus > * {
  position: relative;
  z-index: 1;
}

/* Circuit node corners */
.geo-nexus .geo-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.geo-nexus .geo-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--nexus-accent);
  animation: nexus-node-pulse 2s ease-in-out infinite;
  will-change: box-shadow, opacity;
}

.geo-nexus .geo-node::before,
.geo-nexus .geo-node::after {
  content: '';
  position: absolute;
  background: var(--nexus-accent);
  opacity: 0.6;
}

.geo-nexus .geo-node--tl {
  top: 12px;
  left: 12px;
  animation-delay: 0s;
}
.geo-nexus .geo-node--tl::before {
  width: 24px;
  height: 1px;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.geo-nexus .geo-node--tl::after {
  width: 1px;
  height: 24px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.geo-nexus .geo-node--tr {
  top: 12px;
  right: 12px;
  animation-delay: 0.5s;
}
.geo-nexus .geo-node--tr::before {
  width: 24px;
  height: 1px;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.geo-nexus .geo-node--tr::after {
  width: 1px;
  height: 24px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.geo-nexus .geo-node--bl {
  bottom: 12px;
  left: 12px;
  animation-delay: 1s;
}
.geo-nexus .geo-node--bl::before {
  width: 24px;
  height: 1px;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.geo-nexus .geo-node--bl::after {
  width: 1px;
  height: 24px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.geo-nexus .geo-node--br {
  bottom: 12px;
  right: 12px;
  animation-delay: 1.5s;
}
.geo-nexus .geo-node--br::before {
  width: 24px;
  height: 1px;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.geo-nexus .geo-node--br::after {
  width: 1px;
  height: 24px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Scanning line effect */
.geo-nexus .geo-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--nexus-accent),
    var(--nexus-accent-alt),
    transparent
  );
  animation: nexus-scan 4s ease-in-out infinite;
  z-index: 15;
  opacity: 0.7;
  pointer-events: none;
}

/* ============================================
   PRESET 3: VORTEX SHELL
   ============================================ */

/* Dark Variant */
.geo-vortex.dark {
  --vortex-bg: var(--vortex-dark-bg);
  --vortex-surface: linear-gradient(145deg, var(--vortex-dark-surface-start), var(--vortex-dark-surface-end));
  --vortex-accent-1: var(--vortex-dark-accent-1);
  --vortex-accent-2: var(--vortex-dark-accent-2);
  --vortex-accent-3: var(--vortex-dark-accent-3);
  --vortex-border: var(--vortex-dark-border);
  --vortex-text: var(--vortex-dark-text);
  --vortex-muted: var(--vortex-dark-muted);
}

/* Light Variant */
.geo-vortex.light {
  --vortex-bg: var(--vortex-light-bg);
  --vortex-surface: linear-gradient(145deg, var(--vortex-light-surface-start), var(--vortex-light-surface-end));
  --vortex-accent-1: var(--vortex-light-accent-1);
  --vortex-accent-2: var(--vortex-light-accent-2);
  --vortex-accent-3: var(--vortex-light-accent-3);
  --vortex-border: var(--vortex-light-border);
  --vortex-text: var(--vortex-light-text);
  --vortex-muted: var(--vortex-light-muted);
}

.geo-vortex {
  position: relative;
  background: var(--vortex-surface);
  color: var(--vortex-text);
  border: 1px solid var(--vortex-border);
  overflow: hidden;

  /* Asymmetric angular clip-path */
  clip-path: polygon(
    0 16px,
    24px 0,
    100% 0,
    100% calc(100% - 24px),
    calc(100% - 16px) 100%,
    0 100%
  );
}

/* Flowing gradient border glow */
.geo-vortex::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: linear-gradient(
    90deg,
    var(--vortex-accent-1),
    var(--vortex-accent-2),
    var(--vortex-accent-3),
    var(--vortex-accent-1)
  );
  background-size: 300% 100%;
  animation: vortex-flow 6s ease-in-out infinite;
  z-index: -1;
  opacity: 0.4;
  filter: blur(3px);

  /* Match clip-path */
  clip-path: polygon(
    0 16px,
    24px 0,
    100% 0,
    100% calc(100% - 24px),
    calc(100% - 16px) 100%,
    0 100%
  );
  will-change: background-position;
}

/* Inner breathing glow */
.geo-vortex::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(139, 92, 246, 0.12) 0%,
    transparent 50%
  );
  animation: vortex-breathe 4s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Corner accent - top left */
.geo-vortex .geo-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.geo-vortex .geo-accent {
  position: absolute;
}

.geo-vortex .geo-accent--tl {
  top: 6px;
  left: 32px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--vortex-accent-1), transparent);
  animation: vortex-corner-pulse 3s ease-in-out infinite;
}

.geo-vortex .geo-accent--tl::after {
  content: '';
  position: absolute;
  top: 0;
  left: -28px;
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--vortex-accent-1));
  transform: rotate(-33deg);
  transform-origin: top left;
}

.geo-vortex .geo-accent--br {
  bottom: 6px;
  right: 24px;
  width: 40px;
  height: 2px;
  background: linear-gradient(270deg, var(--vortex-accent-2), transparent);
  animation: vortex-corner-pulse 3s ease-in-out infinite 1.5s;
}

.geo-vortex .geo-accent--br::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -12px;
  width: 2px;
  height: 40px;
  background: linear-gradient(0deg, transparent, var(--vortex-accent-2));
  transform: rotate(33deg);
  transform-origin: bottom right;
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */

.sec-dark {
  background: #0a0a0f;
  --section-text: #f5f5f7;
  --section-muted: #a1a1aa;
  --section-border: rgba(255, 255, 255, 0.1);
  --section-surface: rgba(255, 255, 255, 0.03);
}

.sec-light {
  background: #16161e;
  --section-text: #f5f5f7;
  --section-muted: #a1a1aa;
  --section-border: rgba(255, 255, 255, 0.08);
  --section-surface: rgba(255, 255, 255, 0.02);
}

/* ============================================
   SECTION CONTAINER STYLES
   ============================================ */

.sec-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px;
  border-radius: 32px;
}

/* Geometric Section Frames */
.geo-section-frame,
.geo-reviews-frame,
.geo-social-frame {
  position: relative;
  padding: 48px;
  border-radius: 24px;
  margin-bottom: 0;
}

.geo-section-frame.geo-prism,
.geo-reviews-frame.geo-prism,
.geo-social-frame.geo-prism {
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.geo-section-frame.geo-nexus,
.geo-reviews-frame.geo-nexus,
.geo-social-frame.geo-nexus {
  background: rgba(2, 6, 23, 0.9);
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.geo-section-frame.geo-vortex,
.geo-reviews-frame.geo-vortex,
.geo-social-frame.geo-vortex {
  clip-path: polygon(
    0 16px,
    24px 0,
    100% 0,
    100% calc(100% - 24px),
    calc(100% - 16px) 100%,
    0 100%
  );
  background: linear-gradient(145deg, rgba(26, 31, 60, 0.9), rgba(15, 22, 41, 0.9));
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Geo Section Header */
.geo-section-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 5;
}

.geo-section-header.center {
  text-align: center;
}

.geo-section-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #f5f5f7;
  margin: 0 0 12px;
  line-height: 1.2;
}

.geo-section-subtitle {
  font-size: 1rem;
  color: #a1a1aa;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Geo Section Cover Image */
.geo-section-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
}

.geo-section-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.geo-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6));
}

/* Geo Featured Grid */
.geo-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  position: relative;
  z-index: 5;
}

.geo-featured-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 8px 0;
  scrollbar-width: none;
  position: relative;
  z-index: 5;
}

.geo-featured-scroll::-webkit-scrollbar {
  display: none;
}

.geo-featured-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 5;
}

.geo-featured-item {
  animation: geo-fade-in 0.6s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.1s);
  opacity: 0;
}

/* Section CTA container */
.geo-section-cta {
  text-align: center;
  margin-top: 40px;
  position: relative;
  z-index: 5;
}

/* Section CTA color variants */
.sec-cta.indigo {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.sec-cta.emerald {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #0a0a0f;
}

.sec-cta.amber {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #0a0a0f;
}

.sec-cta.cyan {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  color: #0a0a0f;
}

.sec-cta.blue {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
}

/* Sec tag blue variant */
.sec-tag.blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* Section header */
.sec-header {
  text-align: center;
  margin-bottom: 48px;
}

.sec-tag {
  display: inline-block;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 20px;
  margin-bottom: 16px;
}

.sec-tag.indigo {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

.sec-tag.emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.sec-tag.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.sec-tag.cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}

.sec-tag.purple {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

.sec-title {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  color: var(--section-text, #fff);
  margin: 0 0 12px;
  line-height: 1.2;
}

.sec-subtitle {
  font-size: clamp(14px, 2vw, 17px);
  color: var(--section-muted, #a1a1aa);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Section cover image */
.sec-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 40px;
}

.sec-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6));
}

/* Featured items container */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.featured-item {
  background: var(--section-surface);
  border: 1px solid var(--section-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
  animation: geo-fade-in 0.6s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.1s);
  opacity: 0;
}

.featured-item:hover {
  transform: translateY(-8px);
  border-color: var(--section-accent, rgba(99, 102, 241, 0.5));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.featured-item-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.featured-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.featured-item:hover .featured-item-img img {
  transform: scale(1.1);
}

.featured-item-info {
  padding: 20px;
}

.featured-item-title {
  color: var(--section-text, #fff);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

.featured-item-subtitle {
  color: var(--section-muted, #a1a1aa);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* Section CTA */
.sec-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sec-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

/* ============================================
   HERO SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* Hero section spacing */
.hero,
section.hero {
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .hero,
  section.hero {
    margin-bottom: 48px;
  }
}

/* ============================================
   HERO ANIMATED TYPOGRAPHY
   ============================================ */

@keyframes hero-word-reveal {
  0% {
    opacity: 0;
    transform: translateY(40px) rotateX(-45deg);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    filter: blur(0);
  }
}

@keyframes hero-underline-expand {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 120px;
    opacity: 1;
  }
}

@keyframes hero-underline-dot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.6;
  }
}

@keyframes hero-subtitle-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-image-reveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes hero-glow-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* ============================================
   ENHANCED HERO ANIMATIONS (Glitch, Particles, Spinner)
   ============================================ */

/* GLITCH REVEAL - Dramatic tech-style text reveal */
@keyframes hero-glitch-reveal {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(20px);
  }
  10% {
    opacity: 1;
    clip-path: inset(80% 0 0 0);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(-3px, 3px);
  }
  25% {
    clip-path: inset(40% 0 30% 0);
    transform: translate(3px, -2px);
  }
  30% {
    clip-path: inset(20% 0 50% 0);
    transform: translate(-2px, 1px);
  }
  35% {
    clip-path: inset(0% 0 70% 0);
    transform: translate(2px, -1px);
  }
  40% {
    clip-path: inset(30% 0 40% 0);
    transform: translate(-1px, 2px);
  }
  50% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
    opacity: 1;
  }
}

/* Glitch clone color shift */
@keyframes hero-glitch-clone {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.8; transform: translate(-4px, 0); }
  25% { opacity: 0; }
  40% { opacity: 0.6; transform: translate(4px, 0); }
  45% { opacity: 0; }
  60% { opacity: 0.4; transform: translate(-2px, 2px); }
  65% { opacity: 0; }
}

/* Glitch scanline */
@keyframes hero-glitch-scanline {
  0% { top: 0%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Particle drift with depth */
@keyframes hero-particle-drift {
  0%, 100% {
    transform: translate(0, 0) scale(var(--s, 1));
    opacity: 0.4;
  }
  25% {
    transform: translate(15px, -25px) scale(calc(var(--s, 1) * 1.1));
    opacity: 0.7;
  }
  50% {
    transform: translate(-10px, -45px) scale(calc(var(--s, 1) * 0.9));
    opacity: 0.5;
  }
  75% {
    transform: translate(20px, -20px) scale(calc(var(--s, 1) * 1.05));
    opacity: 0.6;
  }
}

/* Rotating border spinner for image loading */
@keyframes hero-border-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulsing glow behind spinner */
@keyframes hero-spinner-glow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.03); }
}

/* SVG corner bracket draw animation */
@keyframes hero-corner-draw {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Corner bracket pulse */
@keyframes hero-corner-pulse {
  0%, 100% {
    opacity: 0.6;
    filter: drop-shadow(0 0 2px currentColor);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px currentColor);
  }
}

/* Scan line sweep effect */
@keyframes hero-scan-sweep {
  0% { top: -5%; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { top: 105%; opacity: 0; }
}

/* CTA button pulse ring */
@keyframes hero-cta-pulse {
  0% { box-shadow: 0 0 0 0 var(--cta-glow-color, rgba(139, 92, 246, 0.4)); }
  70% { box-shadow: 0 0 0 15px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Morphing blob for background */
@keyframes hero-blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

/* Float animation for scroll hint */
@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

/* Base Hero Styles */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 120px 24px 80px;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-text {
  width: 100%;
  max-width: 900px;
  margin-bottom: 48px;
}

.hero-title-animated {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  perspective: 1000px;
}

.hero-word {
  display: inline-block;
  opacity: 0;
  animation: hero-word-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--word-i, 0) * 0.15s + 0.2s);
  transform-origin: center bottom;
}

/* Animated Underline */
.hero-title-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 20px;
  margin-bottom: 24px;
}

.underline-bar {
  height: 4px;
  width: 0;
  border-radius: 2px;
  animation: hero-underline-expand 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.8s;
}

.underline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: hero-underline-dot-pulse 2s ease-in-out infinite;
  animation-delay: 1.5s;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 32px;
  opacity: 0;
  animation: hero-subtitle-fade 0.8s ease forwards;
  animation-delay: 1s;
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-subtitle-fade 0.8s ease forwards;
  animation-delay: 1.2s;
}

/* Hero Image Container (below title) */
.hero-image-container {
  width: 100%;
  max-width: 900px;
  opacity: 0;
  animation: hero-image-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.4s;
}

.hero-image-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-image-glow {
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 32px;
  animation: hero-glow-pulse 4s ease-in-out infinite;
}

.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: float 2s ease-in-out infinite;
}

/* Background Elements */
.hero-mesh {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 48px 48px;
  z-index: 0;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
  animation: float 10s ease-in-out infinite;
}

.hero-glow-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   HERO PARTICLES SYSTEM
   ============================================ */

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-particles .particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  left: var(--x, 50%);
  top: var(--y, 50%);
  animation: hero-particle-drift var(--d, 10s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.5s);
  --s: var(--scale, 1);
}

/* Particle colors per theme */
.hero-dark .hero-particles .particle {
  background: rgba(139, 92, 246, 0.6);
}

.hero-dark .hero-particles .particle:nth-child(3n) {
  background: rgba(6, 182, 212, 0.5);
}

.hero-dark .hero-particles .particle:nth-child(5n) {
  background: rgba(236, 72, 153, 0.4);
}

.hero-light .hero-particles .particle {
  background: rgba(99, 102, 241, 0.5);
}

/* ============================================
   HERO GLITCH TITLE EFFECT
   ============================================ */

.hero-title-glitch {
  position: relative;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.hero-title-glitch .glitch-main {
  display: block;
  animation: hero-glitch-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title-glitch .glitch-clone {
  position: absolute;
  inset: 0;
  animation: hero-glitch-clone 3s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}

.hero-title-glitch .glitch-clone-cyan {
  color: var(--accent-cyan, #06b6d4);
  z-index: -1;
}

.hero-title-glitch .glitch-clone-pink {
  color: var(--accent-pink, #ec4899);
  z-index: -2;
  animation-delay: 1.7s;
}

/* Glitch scanline overlay */
.hero-title-glitch::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.8), transparent);
  animation: hero-glitch-scanline 4s linear infinite;
  animation-delay: 2s;
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================
   HERO IMAGE LOADING SPINNER
   ============================================ */

.hero-image-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
}

/* Rotating border spinner (conic gradient) */
.hero-image-frame::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--spinner-color-1, #8b5cf6) 10%,
    var(--spinner-color-2, #06b6d4) 20%,
    var(--spinner-color-3, #ec4899) 30%,
    transparent 40%
  );
  animation: hero-border-spin 1.5s linear infinite;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: -1;
}

/* Pulsing glow behind spinner */
.hero-image-frame::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 30px;
  background: radial-gradient(ellipse at center,
    var(--spinner-glow, rgba(139, 92, 246, 0.3)) 0%,
    transparent 70%);
  animation: hero-spinner-glow 2s ease-in-out infinite;
  z-index: -2;
}

/* Hide spinner when loaded */
.hero-image-frame.loaded::before,
.hero-image-frame.loaded::after {
  opacity: 0;
  animation: none;
}

/* Image starts hidden, reveals on load */
.hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-image-frame.loaded img {
  opacity: 1;
}

/* Image skeleton placeholder */
.hero-image-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 200% 100%;
  animation: prism-shimmer 1.5s ease-in-out infinite;
  border-radius: 20px;
  transition: opacity 0.5s ease;
}

.hero-image-frame.loaded .hero-image-skeleton {
  opacity: 0;
}

/* ============================================
   HERO SVG CORNER BRACKETS
   ============================================ */

.hero-corner {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 5;
  color: var(--corner-color, rgba(139, 92, 246, 0.6));
  pointer-events: none;
}

.hero-corner path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hero-corner-draw 1s ease forwards;
}

.hero-corner.corner-tl {
  top: 20px;
  left: 20px;
}

.hero-corner.corner-tr {
  top: 20px;
  right: 20px;
  transform: scaleX(-1);
}

.hero-corner.corner-bl {
  bottom: 20px;
  left: 20px;
  transform: scaleY(-1);
}

.hero-corner.corner-br {
  bottom: 20px;
  right: 20px;
  transform: scale(-1);
}

/* Staggered animation delays for corners */
.hero-corner.corner-tl path { animation-delay: 0.3s; }
.hero-corner.corner-tr path { animation-delay: 0.5s; }
.hero-corner.corner-bl path { animation-delay: 0.7s; }
.hero-corner.corner-br path { animation-delay: 0.9s; }

/* Corner pulse after draw */
.hero-corner.animated {
  animation: hero-corner-pulse 3s ease-in-out infinite;
  animation-delay: 2s;
}

/* ============================================
   HERO SCAN LINE EFFECT
   ============================================ */

.hero-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--scan-color, rgba(139, 92, 246, 0.5)) 20%,
    var(--scan-color, rgba(139, 92, 246, 0.8)) 50%,
    var(--scan-color, rgba(139, 92, 246, 0.5)) 80%,
    transparent
  );
  z-index: 2;
  pointer-events: none;
  animation: hero-scan-sweep 6s linear infinite;
  animation-delay: 2s;
  opacity: 0.6;
}

/* ============================================
   HERO CTA MOBILE CENTERING
   ============================================ */

@media (max-width: 768px) {
  .hero-cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
  }

  .hero-cta .btn-primary,
  .hero-cta .btn-ghost,
  .hero-cta > a,
  .hero-cta > button {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    text-align: center;
  }

  /* Reduce particles on tablet */
  .hero-particles .particle:nth-child(n+16) {
    display: none;
  }

  /* Smaller corners on mobile */
  .hero-corner {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .hero-cta .btn-primary,
  .hero-cta .btn-ghost,
  .hero-cta > a,
  .hero-cta > button {
    max-width: 100%;
    padding: 18px 28px;
    font-size: 16px;
  }

  /* Hide particles on small mobile for performance */
  .hero-particles .particle:nth-child(n+10) {
    display: none;
  }

  /* Hide scan line on mobile */
  .hero-scan-line {
    display: none;
  }

  /* Smaller corners */
  .hero-corner {
    width: 25px;
    height: 25px;
    top: 12px;
    left: 12px;
  }

  .hero-corner.corner-tr { top: 12px; right: 12px; left: auto; }
  .hero-corner.corner-bl { bottom: 12px; left: 12px; top: auto; }
  .hero-corner.corner-br { bottom: 12px; right: 12px; top: auto; left: auto; }
}

/* ============================================
   SECTION SVG CORNER BRACKETS
   ============================================ */

/* Base section corner styles */
.sec-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 10;
  pointer-events: none;
}

.sec-corner path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: sec-corner-draw 0.8s ease forwards;
}

@keyframes sec-corner-draw {
  0% { stroke-dashoffset: 80; opacity: 0; }
  30% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.sec-corner.corner-tl {
  top: 24px;
  left: 24px;
}

.sec-corner.corner-tr {
  top: 24px;
  right: 24px;
  transform: scaleX(-1);
}

.sec-corner.corner-bl {
  bottom: 24px;
  left: 24px;
  transform: scaleY(-1);
}

.sec-corner.corner-br {
  bottom: 24px;
  right: 24px;
  transform: scale(-1);
}

/* Staggered animation delays */
.sec-corner.corner-tl path { animation-delay: 0.1s; }
.sec-corner.corner-tr path { animation-delay: 0.2s; }
.sec-corner.corner-bl path { animation-delay: 0.3s; }
.sec-corner.corner-br path { animation-delay: 0.4s; }

/* Color variants per section */
.sec-blogs .sec-corner { color: rgba(99, 102, 241, 0.4); }
.sec-courses .sec-corner { color: rgba(6, 182, 212, 0.4); }
.sec-resources .sec-corner { color: rgba(16, 185, 129, 0.4); }
.sec-practice .sec-corner { color: rgba(139, 92, 246, 0.4); }
.sec-reviews .sec-corner { color: rgba(245, 158, 11, 0.4); }
.sec-about .sec-corner { color: rgba(249, 115, 22, 0.4); }
.sec-social .sec-corner { color: rgba(59, 130, 246, 0.4); }
.counters .sec-corner { color: rgba(139, 92, 246, 0.4); }

/* Hover effect for corners */
section:hover .sec-corner {
  animation: sec-corner-pulse 2s ease-in-out infinite;
}

@keyframes sec-corner-pulse {
  0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 2px currentColor); }
  50% { opacity: 0.8; filter: drop-shadow(0 0 8px currentColor); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .sec-corner {
    width: 30px;
    height: 30px;
    top: 16px;
    left: 16px;
  }

  .sec-corner.corner-tr { top: 16px; right: 16px; left: auto; }
  .sec-corner.corner-bl { bottom: 16px; left: 16px; top: auto; }
  .sec-corner.corner-br { bottom: 16px; right: 16px; top: auto; left: auto; }
}

@media (max-width: 480px) {
  .sec-corner {
    display: none;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .sec-corner path {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.4;
  }

  section:hover .sec-corner {
    animation: none;
  }
  .hero-particles .particle,
  .hero-corner path,
  .hero-scan-line,
  .hero-title-glitch .glitch-main,
  .hero-title-glitch .glitch-clone,
  .hero-image-frame::before,
  .hero-image-frame::after {
    animation: none;
  }

  .hero-title-glitch .glitch-main {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .hero-corner path {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .hero-image-frame img {
    opacity: 1;
  }

  .hero-image-frame::before,
  .hero-image-frame::after {
    opacity: 0;
  }
}

/* ============================================
   HERO PRESET 1: AURORA (Dark)
   Ethereal northern lights with flowing gradients
   ============================================ */

.hero-aurora.hero-dark {
  background: linear-gradient(135deg, #0a0a1a 0%, #0f1629 50%, #0a0a1a 100%);
  color: #f5f5f7;
}

.hero-aurora.hero-dark .hero-title-animated {
  background: linear-gradient(135deg, #fff 0%, #a78bfa 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-aurora.hero-dark .underline-bar {
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
}

.hero-aurora.hero-dark .underline-dot {
  background: #8b5cf6;
  box-shadow: 0 0 20px #8b5cf6;
}

.hero-aurora.hero-dark .hero-subtitle {
  color: #a1a1aa;
}

.hero-aurora.hero-dark .hero-image-frame {
  border: 2px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2);
}

.hero-aurora.hero-dark .hero-image-overlay {
  background: linear-gradient(to top, rgba(10, 10, 26, 0.4), transparent 50%);
}

.hero-aurora.hero-dark .hero-image-glow {
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.3), transparent 70%);
}

.hero-aurora.hero-dark .orb-1 {
  width: 500px;
  height: 500px;
  background: rgba(139, 92, 246, 0.12);
  top: 10%;
  left: 5%;
}

.hero-aurora.hero-dark .orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(6, 182, 212, 0.1);
  top: 50%;
  right: 5%;
  animation-delay: 3s;
}

.hero-aurora.hero-dark .orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(236, 72, 153, 0.08);
  bottom: 10%;
  left: 40%;
  animation-delay: 6s;
}

.hero-aurora.hero-dark .scroll-hint {
  color: #8b5cf6;
}

/* ============================================
   HERO PRESET 2: EMBER (Dark)
   Warm fiery gradients with golden accents
   ============================================ */

.hero-ember.hero-dark {
  background: linear-gradient(135deg, #1a0a0a 0%, #2d1810 50%, #1a0a0a 100%);
  color: #f5f5f7;
}

.hero-ember.hero-dark .hero-title-animated {
  background: linear-gradient(135deg, #fff 0%, #fbbf24 50%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-ember.hero-dark .underline-bar {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.hero-ember.hero-dark .underline-dot {
  background: #f59e0b;
  box-shadow: 0 0 20px #f59e0b;
}

.hero-ember.hero-dark .hero-subtitle {
  color: #d4a574;
}

.hero-ember.hero-dark .hero-image-frame {
  border: 2px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 20px 60px rgba(245, 158, 11, 0.2);
}

.hero-ember.hero-dark .hero-image-overlay {
  background: linear-gradient(to top, rgba(26, 10, 10, 0.5), transparent 50%);
}

.hero-ember.hero-dark .hero-image-glow {
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.25), transparent 70%);
}

.hero-ember.hero-dark .orb-1 {
  width: 500px;
  height: 500px;
  background: rgba(245, 158, 11, 0.15);
  top: 10%;
  left: 5%;
}

.hero-ember.hero-dark .orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(239, 68, 68, 0.1);
  top: 50%;
  right: 5%;
  animation-delay: 3s;
}

.hero-ember.hero-dark .orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(249, 115, 22, 0.1);
  bottom: 10%;
  left: 40%;
  animation-delay: 6s;
}

.hero-ember.hero-dark .scroll-hint {
  color: #f59e0b;
}

/* ============================================
   HERO PRESET 3: FROST (Light)
   Cool, clean with ice blue accents
   ============================================ */

.hero-frost.hero-light {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
  color: #0f172a;
}

.hero-frost.hero-light .hero-title-animated {
  background: linear-gradient(135deg, #0f172a 0%, #0284c7 50%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-frost.hero-light .underline-bar {
  background: linear-gradient(90deg, #0284c7, #22d3ee);
}

.hero-frost.hero-light .underline-dot {
  background: #0284c7;
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.5);
}

.hero-frost.hero-light .hero-subtitle {
  color: #64748b;
}

.hero-frost.hero-light .hero-image-frame {
  border: 2px solid rgba(2, 132, 199, 0.2);
  box-shadow: 0 20px 60px rgba(2, 132, 199, 0.15);
}

.hero-frost.hero-light .hero-image-overlay {
  background: linear-gradient(to top, rgba(240, 249, 255, 0.3), transparent 50%);
}

.hero-frost.hero-light .hero-image-glow {
  background: radial-gradient(ellipse, rgba(2, 132, 199, 0.2), transparent 70%);
}

.hero-frost.hero-light .orb-1 {
  width: 500px;
  height: 500px;
  background: rgba(2, 132, 199, 0.1);
  top: 10%;
  left: 5%;
}

.hero-frost.hero-light .orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(34, 211, 238, 0.08);
  top: 50%;
  right: 5%;
  animation-delay: 3s;
}

.hero-frost.hero-light .orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(56, 189, 248, 0.06);
  bottom: 10%;
  left: 40%;
  animation-delay: 6s;
}

.hero-frost.hero-light .hero-mesh {
  background-image: radial-gradient(circle at 1px 1px, rgba(2, 132, 199, 0.06) 1px, transparent 0);
}

.hero-frost.hero-light .scroll-hint {
  color: #0284c7;
}

.hero-frost.hero-light .btn-primary {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #fff;
}

.hero-frost.hero-light .btn-ghost {
  color: #0f172a;
  border-color: #cbd5e1;
}

/* ============================================
   HERO PRESET 4: BLOOM (Light)
   Soft, organic with purple/pink florals
   ============================================ */

.hero-bloom.hero-light {
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 50%, #fdf4ff 100%);
  color: #1e1b4b;
}

.hero-bloom.hero-light .hero-title-animated {
  background: linear-gradient(135deg, #1e1b4b 0%, #9333ea 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-bloom.hero-light .underline-bar {
  background: linear-gradient(90deg, #9333ea, #ec4899);
}

.hero-bloom.hero-light .underline-dot {
  background: #9333ea;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
}

.hero-bloom.hero-light .hero-subtitle {
  color: #6b7280;
}

.hero-bloom.hero-light .hero-image-frame {
  border: 2px solid rgba(147, 51, 234, 0.2);
  box-shadow: 0 20px 60px rgba(147, 51, 234, 0.15);
}

.hero-bloom.hero-light .hero-image-overlay {
  background: linear-gradient(to top, rgba(253, 244, 255, 0.3), transparent 50%);
}

.hero-bloom.hero-light .hero-image-glow {
  background: radial-gradient(ellipse, rgba(147, 51, 234, 0.2), transparent 70%);
}

.hero-bloom.hero-light .orb-1 {
  width: 500px;
  height: 500px;
  background: rgba(147, 51, 234, 0.1);
  top: 10%;
  left: 5%;
}

.hero-bloom.hero-light .orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(236, 72, 153, 0.08);
  top: 50%;
  right: 5%;
  animation-delay: 3s;
}

.hero-bloom.hero-light .orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(192, 132, 252, 0.08);
  bottom: 10%;
  left: 40%;
  animation-delay: 6s;
}

.hero-bloom.hero-light .hero-mesh {
  background-image: radial-gradient(circle at 1px 1px, rgba(147, 51, 234, 0.05) 1px, transparent 0);
}

.hero-bloom.hero-light .scroll-hint {
  color: #9333ea;
}

.hero-bloom.hero-light .btn-primary {
  background: linear-gradient(135deg, #9333ea, #ec4899);
  color: #fff;
}

.hero-bloom.hero-light .btn-ghost {
  color: #1e1b4b;
  border-color: #e9d5ff;
}

/* ============================================
   HERO RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 140px 16px 80px;
  }

  .hero-text {
    margin-bottom: 32px;
  }

  .hero-title-animated {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-image-frame {
    border-radius: 16px;
  }

  .hero-image-glow {
    inset: -10px;
  }
}

/* ============================================
   BLOGS SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* BLOGS PRESET 1: JOURNAL (Dark) - Editorial magazine style */
.sec-blogs.blogs-journal {
  background: linear-gradient(180deg, #0a0a12 0%, #12121a 100%);
}

.blogs-journal .blog-frame {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 24px;
  padding: 48px;
  overflow: hidden;
}

.blogs-journal .blog-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 48px;
  right: 48px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
}

.blogs-journal .blog-frame::after {
  content: 'INSIGHTS';
  position: absolute;
  top: 60px;
  right: -40px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 100px;
  font-weight: 800;
  color: rgba(99, 102, 241, 0.03);
  transform: rotate(90deg);
  white-space: nowrap;
  pointer-events: none;
}

.blogs-journal .sec-tag { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.blogs-journal .geo-section-title { color: #f5f5f7; }
.blogs-journal .geo-section-subtitle { color: #a1a1aa; }

.blogs-journal .blog-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.blogs-journal .blog-card:hover {
  border-color: #6366f1;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
}

.blogs-journal .read-more { color: #6366f1; }
.blogs-journal .sec-cta { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }

/* BLOGS PRESET 2: NEON (Dark) - Cyberpunk neon glow */
.sec-blogs.blogs-neon {
  background: linear-gradient(180deg, #050510 0%, #0a0a1a 100%);
}

.blogs-neon .blog-frame {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 4px;
  padding: 48px;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(236, 72, 153, 0.1),
    inset 0 0 60px rgba(236, 72, 153, 0.03);
}

.blogs-neon .blog-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, #ec4899, #8b5cf6, #06b6d4, #ec4899);
  background-size: 400% 100%;
  animation: neon-border-flow 8s linear infinite;
  z-index: -1;
  opacity: 0.5;
}

@keyframes neon-border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

.blogs-neon .sec-tag {
  background: rgba(236, 72, 153, 0.2);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.4);
  text-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}

.blogs-neon .geo-section-title {
  color: #fff;
  text-shadow: 0 0 30px rgba(236, 72, 153, 0.3);
}

.blogs-neon .blog-card {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(236, 72, 153, 0.2);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.blogs-neon .blog-card:hover {
  border-color: #ec4899;
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.3);
}

.blogs-neon .read-more { color: #f472b6; }
.blogs-neon .sec-cta { background: linear-gradient(135deg, #ec4899, #8b5cf6); }

/* BLOGS PRESET 3: PAPER (Light) - Clean newspaper style */
.sec-blogs.blogs-paper {
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

.blogs-paper .blog-frame {
  position: relative;
  background: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 0;
  padding: 48px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.blogs-paper .blog-frame::before,
.blogs-paper .blog-frame::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid #18181b;
}

.blogs-paper .blog-frame::before {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
}

.blogs-paper .blog-frame::after {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
}

.blogs-paper .sec-tag {
  background: #18181b;
  color: #fff;
  border-radius: 0;
  font-weight: 800;
}

.blogs-paper .geo-section-title { color: #18181b; font-weight: 900; }
.blogs-paper .geo-section-subtitle { color: #525252; }

.blogs-paper .blog-card {
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 0;
  transition: all 0.3s ease;
}

.blogs-paper .blog-card:hover {
  border-color: #18181b;
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 #18181b;
}

.blogs-paper .blog-info h3 { color: #18181b; }
.blogs-paper .blog-info p { color: #525252; }
.blogs-paper .read-more { color: #18181b; font-weight: 700; }
.blogs-paper .sec-cta { background: #18181b; color: #fff; border-radius: 0; }

/* BLOGS PRESET 4: GARDEN (Light) - Soft organic feel */
.sec-blogs.blogs-garden {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}

.blogs-garden .blog-frame {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 32px;
  padding: 48px;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.1);
}

.blogs-garden .blog-frame::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 40px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.2), transparent 70%);
  border-radius: 50%;
}

.blogs-garden .sec-tag {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border-radius: 20px;
}

.blogs-garden .geo-section-title { color: #14532d; }
.blogs-garden .geo-section-subtitle { color: #4d7c0f; }

.blogs-garden .blog-card {
  background: #fff;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.blogs-garden .blog-card:hover {
  border-color: #22c55e;
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(34, 197, 94, 0.15);
}

.blogs-garden .blog-info h3 { color: #14532d; }
.blogs-garden .blog-info p { color: #4d7c0f; }
.blogs-garden .read-more { color: #16a34a; }
.blogs-garden .sec-cta { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }

/* ============================================
   COURSES SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* COURSES PRESET 1: ACADEMY (Dark) - Professional education */
.sec-courses.courses-academy {
  background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

.courses-academy .course-frame {
  position: relative;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 20px;
  padding: 48px;
  overflow: hidden;
}

.courses-academy .course-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.05), transparent 30%);
  pointer-events: none;
}

.courses-academy .sec-tag { background: rgba(14, 165, 233, 0.15); color: #38bdf8; }
.courses-academy .geo-section-title { color: #f8fafc; }

.courses-academy .course-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 16px;
  transition: all 0.4s ease;
}

.courses-academy .course-card:hover {
  border-color: #0ea5e9;
  box-shadow: 0 0 40px rgba(14, 165, 233, 0.2);
}

.courses-academy .course-badge { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.courses-academy .course-foot span { color: #38bdf8; }
.courses-academy .sec-cta { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }

/* COURSES PRESET 2: MATRIX (Dark) - Tech/coding style */
.sec-courses.courses-matrix {
  background: linear-gradient(180deg, #000 0%, #0a1a0a 100%);
}

.courses-matrix .course-frame {
  position: relative;
  background: rgba(0, 20, 0, 0.6);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  padding: 48px;
  overflow: hidden;
}

.courses-matrix .course-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(34, 197, 94, 0.03) 2px,
      rgba(34, 197, 94, 0.03) 4px
    );
  pointer-events: none;
}

.courses-matrix .sec-tag {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.courses-matrix .geo-section-title {
  color: #4ade80;
  font-family: 'JetBrains Mono', monospace;
}

.courses-matrix .course-card {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.courses-matrix .course-card:hover {
  border-color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.courses-matrix .course-badge {
  background: #22c55e;
  color: #000;
  font-family: 'JetBrains Mono', monospace;
}

.courses-matrix .course-body h3 { color: #4ade80; }
.courses-matrix .course-foot span { color: #4ade80; }
.courses-matrix .sec-cta { background: #22c55e; color: #000; }

/* COURSES PRESET 3: CANVAS (Light) - Creative learning */
.sec-courses.courses-canvas {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}

.courses-canvas .course-frame {
  position: relative;
  background: #fff;
  border: 2px solid #fbbf24;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15);
}

.courses-canvas .course-frame::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 24px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #fbbf24 50%, transparent 50%);
  opacity: 0.3;
}

.courses-canvas .sec-tag { background: #fbbf24; color: #78350f; }
.courses-canvas .geo-section-title { color: #78350f; }
.courses-canvas .geo-section-subtitle { color: #92400e; }

.courses-canvas .course-card {
  background: #fff;
  border: 2px solid #fde68a;
  border-radius: 20px;
  transition: all 0.4s ease;
}

.courses-canvas .course-card:hover {
  border-color: #fbbf24;
  transform: translateY(-8px) rotate(1deg);
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2);
}

.courses-canvas .course-badge { background: #f59e0b; color: #fff; }
.courses-canvas .course-body h3 { color: #78350f; }
.courses-canvas .course-body p { color: #92400e; }
.courses-canvas .course-foot span { color: #f59e0b; }
.courses-canvas .sec-cta { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* COURSES PRESET 4: MINIMAL (Light) - Clean modern */
.sec-courses.courses-minimal {
  background: #fff;
}

.courses-minimal .course-frame {
  position: relative;
  background: #fff;
  border: none;
  padding: 48px;
}

.courses-minimal .course-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #18181b, transparent);
}

.courses-minimal .sec-tag {
  background: transparent;
  color: #18181b;
  border: 2px solid #18181b;
  font-weight: 800;
}

.courses-minimal .geo-section-title { color: #18181b; }
.courses-minimal .geo-section-subtitle { color: #71717a; }

.courses-minimal .course-card {
  background: #fafafa;
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.courses-minimal .course-card:hover {
  background: #f5f5f5;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.courses-minimal .course-badge { background: #18181b; color: #fff; }
.courses-minimal .course-body h3 { color: #18181b; }
.courses-minimal .course-body p { color: #71717a; }
.courses-minimal .course-foot span { color: #18181b; font-weight: 700; }
.courses-minimal .sec-cta { background: #18181b; color: #fff; }

/* ============================================
   RESOURCES SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* RESOURCES PRESET 1: VAULT (Dark) - Secure archive */
.sec-resources.resources-vault {
  background: linear-gradient(180deg, #0a0a0f 0%, #141420 100%);
}

.resources-vault .resource-frame {
  position: relative;
  background: rgba(20, 20, 32, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 20px;
  padding: 48px;
}

.resources-vault .resource-frame::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border: 3px solid #f59e0b;
  border-right: none;
  border-bottom: none;
}

.resources-vault .resource-frame::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 3px solid #f59e0b;
  border-left: none;
  border-top: none;
}

.resources-vault .sec-tag { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.resources-vault .geo-section-title { color: #fbbf24; }

.resources-vault .resource-item {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.resources-vault .resource-item:hover {
  border-color: #f59e0b;
  transform: translateX(8px);
  box-shadow: -8px 0 20px rgba(245, 158, 11, 0.15);
}

.resources-vault .resource-meta h3 { color: #fbbf24; }
.resources-vault .resource-meta p { color: #a1a1aa; }
.resources-vault .resource-dl { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; }
.resources-vault .sec-cta { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* RESOURCES PRESET 2: GRID (Dark) - Tech dashboard */
.sec-resources.resources-grid {
  background: linear-gradient(180deg, #0c0c14 0%, #1a1a28 100%);
}

.resources-grid .resource-frame {
  position: relative;
  background: rgba(26, 26, 40, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 48px;
  overflow: hidden;
}

.resources-grid .resource-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.resources-grid .sec-tag { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.resources-grid .geo-section-title { color: #a78bfa; }

.resources-grid .resource-item {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.resources-grid .resource-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
}

.resources-grid .resource-meta h3 { color: #f5f5f7; }
.resources-grid .resource-dl { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.resources-grid .sec-cta { background: linear-gradient(135deg, #8b5cf6, #6366f1); }

/* RESOURCES PRESET 3: FOLDER (Light) - File manager style */
.sec-resources.resources-folder {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

.resources-folder .resource-frame {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.resources-folder .resource-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 48px;
  width: 120px;
  height: 32px;
  background: #3b82f6;
  border-radius: 8px 8px 0 0;
  transform: translateY(-100%);
}

.resources-folder .sec-tag { background: #3b82f6; color: #fff; }
.resources-folder .geo-section-title { color: #1e293b; }
.resources-folder .geo-section-subtitle { color: #64748b; }

.resources-folder .resource-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.resources-folder .resource-item:hover {
  background: #fff;
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.resources-folder .resource-meta h3 { color: #1e293b; }
.resources-folder .resource-meta p { color: #64748b; }
.resources-folder .resource-dl { background: #dbeafe; color: #2563eb; }
.resources-folder .sec-cta { background: #3b82f6; color: #fff; }

/* RESOURCES PRESET 4: SHELF (Light) - Library/bookshelf */
.sec-resources.resources-shelf {
  background: linear-gradient(180deg, #fef7ed 0%, #ffedd5 100%);
}

.resources-shelf .resource-frame {
  position: relative;
  background: linear-gradient(180deg, #fefce8 0%, #fff 100%);
  border: 2px solid #d6a56a;
  border-radius: 0;
  padding: 48px;
}

.resources-shelf .resource-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, #92400e, #d6a56a, #92400e);
}

.resources-shelf .sec-tag { background: #92400e; color: #fef3c7; border-radius: 0; }
.resources-shelf .geo-section-title { color: #78350f; font-family: 'Georgia', serif; }
.resources-shelf .geo-section-subtitle { color: #92400e; }

.resources-shelf .resource-item {
  background: #fffbeb;
  border: 1px solid #d6a56a;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.resources-shelf .resource-item:hover {
  transform: translateX(8px);
  box-shadow: -4px 4px 0 #92400e;
}

.resources-shelf .resource-meta h3 { color: #78350f; }
.resources-shelf .resource-meta p { color: #92400e; }
.resources-shelf .resource-dl { background: #fde68a; color: #78350f; }
.resources-shelf .sec-cta { background: #92400e; color: #fef3c7; border-radius: 0; }

/* ============================================
   RESOURCES WHITISH PRESETS
   ============================================ */

/* RESOURCES PRESET 5: FROST (White) - Ice crystal elegance */
.sec-resources.resources-frost {
  background: var(--frost-bg);
}

.resources-frost .resource-frame {
  position: relative;
  background: var(--frost-surface);
  border: 1px solid var(--frost-border);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 8px 32px var(--frost-glow);
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.resources-frost .resource-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent,
    var(--frost-accent),
    rgba(56, 189, 248, 0.5),
    var(--frost-accent),
    transparent
  );
  animation: frost-crystallize 4s ease-in-out infinite;
}

.resources-frost .resource-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(56, 189, 248, 0.03) 0%,
    transparent 50%,
    rgba(186, 230, 253, 0.05) 100%
  );
  pointer-events: none;
}

.resources-frost .sec-tag {
  background: var(--frost-accent-soft);
  color: var(--frost-accent);
  border: 1px solid var(--frost-border);
  backdrop-filter: blur(4px);
}

.resources-frost .geo-section-title {
  color: var(--frost-text);
}

.resources-frost .geo-section-subtitle {
  color: var(--frost-muted);
}

.resources-frost .resource-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--frost-border);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.05);
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
  position: relative;
  overflow: hidden;
}

.resources-frost .resource-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s ease;
}

.resources-frost .resource-item:hover::before {
  left: 100%;
}

.resources-frost .resource-item:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--frost-accent);
  box-shadow: 0 20px 48px var(--frost-glow);
}

.resources-frost .resource-meta h3 {
  color: var(--frost-text);
}

.resources-frost .resource-meta p {
  color: var(--frost-muted);
}

.resources-frost .resource-dl {
  background: var(--frost-accent-soft);
  color: #0284c7;
  border: 1px solid var(--frost-border);
}

.resources-frost .sec-cta {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #fff;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
}

/* RESOURCES PRESET 6: PEARL (White) - Luminous opalescent */
.sec-resources.resources-pearl {
  background: var(--pearl-bg);
}

.resources-pearl .resource-frame {
  position: relative;
  background: var(--pearl-surface);
  border: 1px solid var(--pearl-border);
  border-radius: 28px;
  padding: 48px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.resources-pearl .resource-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #fdf4ff, #fce7f3, #dbeafe);
  background-size: 200% 200%;
  animation: pearl-iridescent 8s ease-in-out infinite;
  z-index: -1;
  border-radius: 30px;
  filter: blur(20px);
}

.resources-pearl .resource-frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  background-size: 200% 100%;
  animation: pearl-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.resources-pearl .sec-tag {
  background: linear-gradient(135deg, rgba(240, 171, 252, 0.15), rgba(219, 234, 254, 0.15));
  color: #a855f7;
  border: 1px solid rgba(240, 171, 252, 0.3);
}

.resources-pearl .geo-section-title {
  color: var(--pearl-text);
}

.resources-pearl .geo-section-subtitle {
  color: var(--pearl-muted);
}

.resources-pearl .resource-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(240, 171, 252, 0.2);
  border-radius: 20px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.resources-pearl .resource-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--pearl-shimmer);
  transition: left 0.6s ease;
}

.resources-pearl .resource-item:hover::after {
  left: 100%;
}

.resources-pearl .resource-item:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--pearl-accent-solid);
  box-shadow: 0 20px 48px rgba(240, 171, 252, 0.2);
}

.resources-pearl .resource-meta h3 {
  color: var(--pearl-text);
}

.resources-pearl .resource-meta p {
  color: var(--pearl-muted);
}

.resources-pearl .resource-dl {
  background: linear-gradient(135deg, rgba(251, 207, 232, 0.3), rgba(224, 231, 255, 0.3));
  color: #9333ea;
}

.resources-pearl .sec-cta {
  background: linear-gradient(135deg, #f0abfc, #c084fc);
  color: #fff;
}

/* RESOURCES PRESET 7: SILK (White) - Soft flowing fabric */
.sec-resources.resources-silk {
  background: var(--silk-bg);
}

.resources-silk .resource-frame {
  position: relative;
  background: var(--silk-surface);
  border: none;
  border-radius: 32px;
  padding: 48px;
  box-shadow: 0 4px 24px rgba(196, 181, 253, 0.1);
  backdrop-filter: blur(12px);
}

.resources-silk .resource-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    var(--silk-wave) 10px,
    var(--silk-wave) 11px
  );
  border-radius: 32px;
  animation: silk-wave 6s ease-in-out infinite;
  opacity: 0.5;
  pointer-events: none;
}

.resources-silk .sec-tag {
  background: rgba(196, 181, 253, 0.15);
  color: #7c3aed;
  border: none;
  border-radius: 999px;
}

.resources-silk .geo-section-title {
  color: var(--silk-text);
  font-weight: 600;
}

.resources-silk .geo-section-subtitle {
  color: var(--silk-muted);
}

.resources-silk .resource-item {
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 12px rgba(196, 181, 253, 0.08);
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.resources-silk .resource-item:hover {
  transform: translateY(-10px) scale(1.03) rotate(-0.5deg);
  box-shadow: 0 24px 48px rgba(196, 181, 253, 0.22);
}

.resources-silk .resource-meta h3 {
  color: var(--silk-text);
}

.resources-silk .resource-meta p {
  color: var(--silk-muted);
}

.resources-silk .resource-dl {
  background: rgba(196, 181, 253, 0.2);
  color: #6d28d9;
  border-radius: 12px;
}

.resources-silk .sec-cta {
  background: linear-gradient(135deg, #c4b5fd, #a78bfa);
  color: #fff;
  border-radius: 999px;
}

/* RESOURCES PRESET 8: CRYSTAL (White) - Prismatic glass */
.sec-resources.resources-crystal {
  background: var(--crystal-bg);
}

.resources-crystal .resource-frame {
  position: relative;
  background: var(--crystal-surface);
  border: 1px solid var(--crystal-border);
  border-radius: 20px;
  padding: 48px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.resources-crystal .resource-frame::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: var(--crystal-prism);
  background-size: 200% 200%;
  animation: crystal-prism 8s ease-in-out infinite;
  z-index: -1;
}

.resources-crystal .resource-frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.4) 50%, transparent 55%),
    linear-gradient(225deg, transparent 45%, rgba(255,255,255,0.4) 50%, transparent 55%);
  background-size: 30px 30px;
  opacity: 0.3;
  pointer-events: none;
}

.resources-crystal .sec-tag {
  background: rgba(125, 211, 252, 0.15);
  color: #0891b2;
  border: 1px solid var(--crystal-border);
  backdrop-filter: blur(4px);
}

.resources-crystal .geo-section-title {
  color: var(--crystal-text);
}

.resources-crystal .geo-section-subtitle {
  color: var(--crystal-muted);
}

.resources-crystal .resource-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--crystal-border);
  border-radius: 16px;
  transition: all 0.4s ease;
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
  position: relative;
  overflow: hidden;
}

.resources-crystal .resource-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(125, 211, 252, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.resources-crystal .resource-item:hover::before {
  opacity: 1;
}

.resources-crystal .resource-item:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--crystal-accent);
  box-shadow:
    0 20px 48px rgba(125, 211, 252, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
}

.resources-crystal .resource-meta h3 {
  color: var(--crystal-text);
}

.resources-crystal .resource-meta p {
  color: var(--crystal-muted);
}

.resources-crystal .resource-dl {
  background: rgba(125, 211, 252, 0.2);
  color: #0e7490;
  border: 1px solid var(--crystal-border);
}

.resources-crystal .sec-cta {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  color: #0c4a6e;
  box-shadow: 0 4px 20px rgba(125, 211, 252, 0.3);
}

/* ============================================
   PRACTICE SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* PRACTICE PRESET 1: ARENA (Dark) - Gaming competition */
.sec-practice.practice-arena {
  background: linear-gradient(180deg, #0f0515 0%, #1a0a2e 100%);
}

.practice-arena .practice-frame {
  position: relative;
  background: rgba(26, 10, 46, 0.8);
  border: 2px solid rgba(168, 85, 247, 0.4);
  border-radius: 16px;
  padding: 48px;
  overflow: hidden;
}

.practice-arena .practice-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899, #8b5cf6);
  background-size: 200% 200%;
  animation: arena-glow 4s ease-in-out infinite;
  z-index: -1;
  opacity: 0.3;
  filter: blur(10px);
}

@keyframes arena-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.practice-arena .sec-tag {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.practice-arena .geo-section-title {
  color: #fff;
  text-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
}

.practice-arena .practice-card {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.practice-arena .practice-card:hover {
  border-color: #a855f7;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}

.practice-arena .practice-start { color: #c084fc; }
.practice-arena .sec-cta { background: linear-gradient(135deg, #8b5cf6, #ec4899); }

/* PRACTICE PRESET 2: CIRCUIT (Dark) - Technical/CPU style */
.sec-practice.practice-circuit {
  background: linear-gradient(180deg, #0a0a0a 0%, #171717 100%);
}

.practice-circuit .practice-frame {
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  padding: 48px;
}

.practice-circuit .practice-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(6, 182, 212, 0.2);
  border-radius: 4px;
  pointer-events: none;
}

.practice-circuit .sec-tag {
  background: transparent;
  color: #22d3ee;
  border: 1px solid #22d3ee;
  font-family: 'JetBrains Mono', monospace;
}

.practice-circuit .geo-section-title {
  color: #22d3ee;
  font-family: 'JetBrains Mono', monospace;
}

.practice-circuit .practice-card {
  background: rgba(6, 182, 212, 0.05);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.practice-circuit .practice-card:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: #06b6d4;
}

.practice-circuit .practice-content h3 { color: #22d3ee; }
.practice-circuit .practice-start { color: #06b6d4; }
.practice-circuit .sec-cta { background: #06b6d4; color: #0a0a0a; }

/* PRACTICE PRESET 3: STUDIO (Light) - Creative workspace */
.sec-practice.practice-studio {
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%);
}

.practice-studio .practice-frame {
  position: relative;
  background: #fff;
  border: 2px solid #f9a8d4;
  border-radius: 32px;
  padding: 48px;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.15);
}

.practice-studio .sec-tag { background: #ec4899; color: #fff; border-radius: 20px; }
.practice-studio .geo-section-title { color: #831843; }
.practice-studio .geo-section-subtitle { color: #9d174d; }

.practice-studio .practice-card {
  background: #fff;
  border: 2px solid #fbcfe8;
  border-radius: 24px;
  transition: all 0.4s ease;
}

.practice-studio .practice-card:hover {
  border-color: #ec4899;
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 20px 40px rgba(236, 72, 153, 0.2);
}

.practice-studio .practice-content h3 { color: #831843; }
.practice-studio .practice-content p { color: #9d174d; }
.practice-studio .practice-start { color: #ec4899; }
.practice-studio .sec-cta { background: linear-gradient(135deg, #ec4899, #db2777); }

/* PRACTICE PRESET 4: LAB (Light) - Scientific/clean */
.sec-practice.practice-lab {
  background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
}

.practice-lab .practice-frame {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 16px;
  padding: 48px;
}

.practice-lab .practice-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #14b8a6, #0d9488, #14b8a6);
}

.practice-lab .sec-tag {
  background: rgba(20, 184, 166, 0.15);
  color: #0d9488;
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.practice-lab .geo-section-title { color: #134e4a; }
.practice-lab .geo-section-subtitle { color: #0f766e; }

.practice-lab .practice-card {
  background: #fff;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.practice-lab .practice-card:hover {
  border-color: #14b8a6;
  box-shadow: 0 12px 32px rgba(20, 184, 166, 0.15);
}

.practice-lab .practice-content h3 { color: #134e4a; }
.practice-lab .practice-content p { color: #0f766e; }
.practice-lab .practice-start { color: #14b8a6; }
.practice-lab .sec-cta { background: linear-gradient(135deg, #14b8a6, #0d9488); }

/* ============================================
   REVIEWS SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* REVIEWS PRESET 1: SPOTLIGHT (Dark) - Theater/awards */
.sec-reviews.reviews-spotlight {
  background: linear-gradient(180deg, #0a0a0f 0%, #18181b 100%);
}

.reviews-spotlight .reviews-frame {
  position: relative;
  background: radial-gradient(ellipse at center top, rgba(245, 158, 11, 0.08), transparent 60%);
  padding: 48px 0;
}

.reviews-spotlight .sec-tag { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.reviews-spotlight .geo-section-title {
  color: #fbbf24;
  text-shadow: 0 0 60px rgba(245, 158, 11, 0.3);
}

.reviews-spotlight .review {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 20px;
}

.reviews-spotlight .review:hover {
  border-color: #f59e0b;
  box-shadow: 0 10px 40px rgba(245, 158, 11, 0.15);
}

.reviews-spotlight .review-quote { color: #f59e0b; }
.reviews-spotlight .author-pic { border: 2px solid #f59e0b; }

/* REVIEWS PRESET 2: WAVE (Dark) - Flowing/dynamic */
.sec-reviews.reviews-wave {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.reviews-wave .reviews-frame {
  position: relative;
  padding: 48px 0;
}

.reviews-wave .reviews-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,60 C300,120 600,0 900,60 C1050,90 1150,60 1200,60 L1200,0 L0,0 Z' fill='rgba(99,102,241,0.1)'/%3E%3C/svg%3E");
  background-size: cover;
}

.reviews-wave .sec-tag { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.reviews-wave .geo-section-title { color: #e2e8f0; }

.reviews-wave .review {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 24px;
}

.reviews-wave .review:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

.reviews-wave .review-quote { color: #6366f1; }

/* REVIEWS PRESET 3: CARDS (Light) - Clean testimonial cards */
.sec-reviews.reviews-cards {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.reviews-cards .reviews-frame {
  padding: 48px 0;
}

.reviews-cards .sec-tag { background: #3b82f6; color: #fff; }
.reviews-cards .geo-section-title { color: #1e293b; }

.reviews-cards .review {
  background: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.reviews-cards .review:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.reviews-cards .review p { color: #475569; }
.reviews-cards .review-quote { color: #3b82f6; }
.reviews-cards .review-author strong { color: #1e293b; }
.reviews-cards .review-author span { color: #64748b; }

/* REVIEWS PRESET 4: BUBBLE (Light) - Speech bubble style */
.sec-reviews.reviews-bubble {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
}

.reviews-bubble .reviews-frame {
  padding: 48px 0;
}

.reviews-bubble .sec-tag { background: #78350f; color: #fef3c7; }
.reviews-bubble .geo-section-title { color: #78350f; }

.reviews-bubble .review {
  background: #fff;
  border: 2px solid #fbbf24;
  border-radius: 20px;
  position: relative;
}

.reviews-bubble .review::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 40px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-right: 2px solid #fbbf24;
  border-bottom: 2px solid #fbbf24;
  transform: rotate(45deg);
}

.reviews-bubble .review p { color: #78350f; }
.reviews-bubble .review-quote { color: #f59e0b; }
.reviews-bubble .review-author strong { color: #78350f; }

/* ============================================
   REVIEWS WHITISH PRESETS
   ============================================ */

/* REVIEWS PRESET 5: SNOW (White) - Crisp winter elegance */
.sec-reviews.reviews-snow {
  background: var(--snow-bg);
}

.reviews-snow .reviews-frame {
  position: relative;
  padding: 48px 0;
}

.reviews-snow .reviews-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--snow-frost), transparent 40%),
    radial-gradient(circle at 80% 70%, var(--snow-frost), transparent 40%);
  pointer-events: none;
}

.reviews-snow .sec-tag {
  background: var(--snow-surface);
  color: var(--snow-text);
  border: 1px solid var(--snow-border);
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.1);
}

.reviews-snow .geo-section-title {
  color: var(--snow-text);
}

.reviews-snow .geo-section-subtitle {
  color: var(--snow-muted);
}

.reviews-snow .review {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--snow-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
  position: relative;
  overflow: hidden;
}

.reviews-snow .review::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transition: left 0.6s ease;
}

.reviews-snow .review:hover::before {
  left: 100%;
}

.reviews-snow .review:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 48px rgba(148, 163, 184, 0.15);
  border-color: var(--snow-accent);
}

.reviews-snow .review p {
  color: #475569;
}

.reviews-snow .review-quote {
  color: var(--snow-accent);
}

.reviews-snow .review-author strong {
  color: var(--snow-text);
}

.reviews-snow .review-author span {
  color: var(--snow-muted);
}

.reviews-snow .author-pic {
  border: 2px solid var(--snow-border);
}

/* REVIEWS PRESET 6: MARBLE (White) - Classic stone texture */
.sec-reviews.reviews-marble {
  background: var(--marble-bg);
}

.reviews-marble .reviews-frame {
  position: relative;
  padding: 48px 0;
}

.reviews-marble .reviews-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--marble-vein) 25%, transparent 25%),
    linear-gradient(225deg, var(--marble-vein) 25%, transparent 25%);
  background-size: 60px 60px;
  opacity: 0.4;
  animation: marble-vein 6s ease-in-out infinite;
  pointer-events: none;
}

.reviews-marble .sec-tag {
  background: #fafaf9;
  color: var(--marble-text);
  border: 1px solid var(--marble-border);
  font-weight: 700;
}

.reviews-marble .geo-section-title {
  color: var(--marble-text);
  font-family: 'Georgia', serif;
}

.reviews-marble .geo-section-subtitle {
  color: var(--marble-muted);
}

.reviews-marble .review {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--marble-border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.reviews-marble .review::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #d4d4d8, #a1a1aa, #d4d4d8);
}

.reviews-marble .review:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
}

.reviews-marble .review p {
  color: #3f3f46;
}

.reviews-marble .review-quote {
  color: var(--marble-accent);
}

.reviews-marble .review-author strong {
  color: var(--marble-text);
}

.reviews-marble .author-pic {
  border: 2px solid var(--marble-border);
}

/* REVIEWS PRESET 7: CLOUD (White) - Floating ethereal */
.sec-reviews.reviews-cloud {
  background: var(--cloud-bg);
}

.reviews-cloud .reviews-frame {
  position: relative;
  padding: 48px 0;
}

.reviews-cloud .reviews-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 200px 100px at 25% 20%, rgba(186, 230, 253, 0.3), transparent),
    radial-gradient(ellipse 180px 90px at 75% 60%, rgba(186, 230, 253, 0.25), transparent),
    radial-gradient(ellipse 150px 75px at 50% 80%, rgba(186, 230, 253, 0.2), transparent);
  animation: cloud-float 12s ease-in-out infinite;
  pointer-events: none;
}

.reviews-cloud .sec-tag {
  background: rgba(186, 230, 253, 0.3);
  color: var(--cloud-text);
  border: none;
  border-radius: 999px;
}

.reviews-cloud .geo-section-title {
  color: var(--cloud-text);
}

.reviews-cloud .geo-section-subtitle {
  color: var(--cloud-muted);
}

.reviews-cloud .review {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--cloud-border);
  border-radius: 28px;
  box-shadow: var(--cloud-float);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  animation: cloud-float 8s ease-in-out infinite, whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
  backdrop-filter: blur(12px);
}

.reviews-cloud .review:nth-child(2) {
  animation-delay: -2s;
}

.reviews-cloud .review:nth-child(3) {
  animation-delay: -4s;
}

.reviews-cloud .review:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 24px 56px rgba(186, 230, 253, 0.4);
}

.reviews-cloud .review p {
  color: #334155;
}

.reviews-cloud .review-quote {
  color: #0ea5e9;
}

.reviews-cloud .review-author strong {
  color: var(--cloud-text);
}

.reviews-cloud .author-pic {
  border: 3px solid var(--cloud-border);
  box-shadow: 0 4px 12px rgba(186, 230, 253, 0.3);
}

/* REVIEWS PRESET 8: PLATINUM (White) - Premium metallic */
.sec-reviews.reviews-platinum {
  background: var(--platinum-bg);
}

.reviews-platinum .reviews-frame {
  position: relative;
  padding: 48px 0;
}

.reviews-platinum .reviews-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg,
    rgba(161, 161, 170, 0.08),
    transparent
  );
  pointer-events: none;
}

.reviews-platinum .sec-tag {
  background: var(--platinum-metallic);
  background-size: 200% 100%;
  animation: platinum-shine 4s ease-in-out infinite;
  color: var(--platinum-text);
  border: none;
  font-weight: 700;
}

.reviews-platinum .geo-section-title {
  color: var(--platinum-text);
  font-weight: 800;
}

.reviews-platinum .geo-section-subtitle {
  color: var(--platinum-muted);
}

.reviews-platinum .review {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--platinum-border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.reviews-platinum .review::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.8s ease;
}

.reviews-platinum .review:hover::before {
  left: 100%;
}

.reviews-platinum .review:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1);
  border-color: #a1a1aa;
}

.reviews-platinum .review p {
  color: #3f3f46;
}

.reviews-platinum .review-quote {
  color: var(--platinum-accent);
}

.reviews-platinum .review-author strong {
  color: var(--platinum-text);
}

.reviews-platinum .author-pic {
  border: 2px solid var(--platinum-metallic);
}

/* ============================================
   ABOUT SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* ABOUT PRESET 1: SPOTLIGHT (Dark) - Dramatic lighting */
.sec-about.about-spotlight {
  background: linear-gradient(180deg, #0a0a0f 0%, #1a1a24 100%);
}

.about-spotlight .about-frame {
  position: relative;
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.05), transparent 70%);
  padding: 48px;
  text-align: center;
}

.about-spotlight .about-photo-circular {
  border: 4px solid #f59e0b;
  box-shadow: 0 0 60px rgba(245, 158, 11, 0.3);
}

.about-spotlight .about-photo-ring {
  border-color: #f59e0b;
}

.about-spotlight .about-photo-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent 70%);
}

.about-spotlight .sec-tag { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.about-spotlight .about-text h2 { color: #fbbf24; }
.about-spotlight .about-text p { color: #a1a1aa; }
.about-spotlight .about-list li {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: #f5f5f7;
}

/* ABOUT PRESET 2: GRADIENT (Dark) - Multi-color gradient */
.sec-about.about-gradient {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
}

.about-gradient .about-frame {
  padding: 48px;
  text-align: center;
}

.about-gradient .about-photo-circular {
  border: 4px solid transparent;
  background: linear-gradient(135deg, #8b5cf6, #ec4899, #06b6d4) padding-box,
              linear-gradient(135deg, #8b5cf6, #ec4899, #06b6d4) border-box;
}

.about-gradient .about-photo-ring {
  border: 2px solid;
  border-image: linear-gradient(135deg, #8b5cf6, #ec4899) 1;
}

.about-gradient .about-photo-glow {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 70%);
}

.about-gradient .sec-tag { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
.about-gradient .about-text h2 {
  background: linear-gradient(135deg, #c4b5fd, #f9a8d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-gradient .about-text p { color: #c4b5fd; }
.about-gradient .about-list li {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8b5cf6;
  color: #e0e7ff;
}

/* ABOUT PRESET 3: CLEAN (Light) - Minimal professional */
.sec-about.about-clean {
  background: #fff;
}

.about-clean .about-frame {
  padding: 48px;
  text-align: center;
}

.about-clean .about-photo-circular {
  border: 4px solid #e5e7eb;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-clean .about-photo-ring {
  border-color: #e5e7eb;
}

.about-clean .about-photo-glow {
  display: none;
}

.about-clean .sec-tag { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.about-clean .about-text h2 { color: #111827; }
.about-clean .about-text p { color: #6b7280; }
.about-clean .about-list li {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #374151;
}
.about-clean .about-list svg { color: #10b981; }

/* ABOUT PRESET 4: WARM (Light) - Friendly/approachable */
.sec-about.about-warm {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
}

.about-warm .about-frame {
  padding: 48px;
  text-align: center;
}

.about-warm .about-photo-circular {
  border: 4px solid #fb923c;
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.2);
}

.about-warm .about-photo-ring {
  border-color: #fb923c;
}

.about-warm .about-photo-glow {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.2), transparent 70%);
}

.about-warm .sec-tag { background: #f97316; color: #fff; }
.about-warm .about-text h2 { color: #7c2d12; }
.about-warm .about-text p { color: #9a3412; }
.about-warm .about-list li {
  background: rgba(249, 115, 22, 0.1);
  border-color: #fb923c;
  color: #7c2d12;
}
.about-warm .about-list svg { color: #f97316; }

/* ============================================
   SOCIAL SECTION - 4 UNIQUE PRESETS
   ============================================ */

/* SOCIAL PRESET 1: CONNECT (Dark) - Network nodes */
.sec-social.social-connect {
  background: linear-gradient(180deg, #0a0a12 0%, #141428 100%);
}

.social-connect .social-frame {
  position: relative;
  padding: 48px;
  text-align: center;
}

.social-connect .social-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.1), transparent 30%);
  pointer-events: none;
}

.social-connect .sec-tag { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.social-connect .geo-section-title { color: #60a5fa; }

.social-connect .social-card {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
}

.social-connect .social-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}

/* SOCIAL PRESET 2: GLOW (Dark) - Neon social */
.sec-social.social-glow {
  background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);
}

.social-glow .social-frame {
  padding: 48px;
  text-align: center;
}

.social-glow .sec-tag {
  background: transparent;
  color: #ec4899;
  border: 1px solid #ec4899;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}

.social-glow .geo-section-title {
  color: #fff;
  text-shadow: 0 0 40px rgba(236, 72, 153, 0.4);
}

.social-glow .social-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 12px;
}

.social-glow .social-card:hover {
  border-color: #ec4899;
  box-shadow: 0 0 40px rgba(236, 72, 153, 0.3);
}

.social-glow .social-icon { box-shadow: 0 0 30px rgba(236, 72, 153, 0.4); }

/* SOCIAL PRESET 3: FLAT (Light) - Material design */
.sec-social.social-flat {
  background: #f5f5f5;
}

.social-flat .social-frame {
  padding: 48px;
  text-align: center;
}

.social-flat .sec-tag { background: #1976d2; color: #fff; }
.social-flat .geo-section-title { color: #212121; }

.social-flat .social-card {
  background: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.social-flat .social-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.social-flat .social-info strong { color: #212121; }
.social-flat .social-info span { color: #757575; }

/* SOCIAL PRESET 4: ROUNDED (Light) - Soft friendly */
.sec-social.social-rounded {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}

.social-rounded .social-frame {
  padding: 48px;
  text-align: center;
}

.social-rounded .sec-tag { background: #22c55e; color: #fff; border-radius: 20px; }
.social-rounded .geo-section-title { color: #14532d; }

.social-rounded .social-card {
  background: #fff;
  border: 2px solid #86efac;
  border-radius: 24px;
}

.social-rounded .social-card:hover {
  border-color: #22c55e;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.2);
}

.social-rounded .social-info strong { color: #14532d; }
.social-rounded .social-info span { color: #166534; }

/* ============================================
   SOCIAL WHITISH PRESETS
   ============================================ */

/* SOCIAL PRESET 5: IVORY (White) - Warm classic elegance */
.sec-social.social-ivory {
  background: var(--ivory-bg);
}

.social-ivory .social-frame {
  position: relative;
  padding: 48px;
  text-align: center;
}

.social-ivory .social-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, var(--ivory-warm), transparent 50%),
    radial-gradient(ellipse at 70% 80%, var(--ivory-warm), transparent 50%);
  pointer-events: none;
}

.social-ivory .sec-tag {
  background: var(--ivory-warm);
  color: var(--ivory-text);
  border: 1px solid var(--ivory-border);
}

.social-ivory .geo-section-title {
  color: var(--ivory-text);
}

.social-ivory .geo-section-subtitle {
  color: var(--ivory-muted);
}

.social-ivory .social-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--ivory-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
  position: relative;
  overflow: hidden;
}

.social-ivory .social-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.1), transparent);
  transition: left 0.6s ease;
}

.social-ivory .social-card:hover::before {
  left: 100%;
}

.social-ivory .social-card:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--ivory-accent);
  box-shadow: 0 20px 48px rgba(251, 191, 36, 0.18);
}

.social-ivory .social-icon {
  background: var(--ivory-warm);
  border: 1px solid var(--ivory-border);
}

.social-ivory .social-info strong {
  color: var(--ivory-text);
}

.social-ivory .social-info span {
  color: var(--ivory-muted);
}

.social-ivory .social-btn {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
}

/* SOCIAL PRESET 6: DIAMOND (White) - Brilliant sparkle */
.sec-social.social-diamond {
  background: var(--diamond-bg);
}

.social-diamond .social-frame {
  position: relative;
  padding: 48px;
  text-align: center;
  overflow: hidden;
}

.social-diamond .social-frame::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 20px 5px rgba(255, 255, 255, 0.8),
    0 0 40px 10px rgba(226, 232, 240, 0.6);
  animation: diamond-sparkle 3s ease-in-out infinite;
}

.social-diamond .social-frame::after {
  content: '';
  position: absolute;
  bottom: 30%;
  right: 15%;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 15px 3px rgba(255, 255, 255, 0.7),
    0 0 30px 8px rgba(226, 232, 240, 0.5);
  animation: diamond-sparkle 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

.social-diamond .sec-tag {
  background: var(--diamond-surface);
  color: var(--diamond-text);
  border: 1px solid var(--diamond-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.social-diamond .geo-section-title {
  color: var(--diamond-text);
}

.social-diamond .geo-section-subtitle {
  color: var(--diamond-muted);
}

.social-diamond .social-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--diamond-border);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.social-diamond .social-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--diamond-sparkle);
  background-size: 50px 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.social-diamond .social-card:hover::after {
  opacity: 0.5;
}

.social-diamond .social-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.1);
}

.social-diamond .social-icon {
  background: #f8fafc;
  border: 1px solid var(--diamond-border);
}

.social-diamond .social-info strong {
  color: var(--diamond-text);
}

.social-diamond .social-info span {
  color: var(--diamond-muted);
}

.social-diamond .social-btn {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #1e293b;
}

/* SOCIAL PRESET 7: MOONLIGHT (White) - Soft lunar glow */
.sec-social.social-moonlight {
  background: var(--moonlight-bg);
}

.social-moonlight .social-frame {
  position: relative;
  padding: 48px;
  text-align: center;
}

.social-moonlight .social-frame::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--moonlight-glow), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.social-moonlight .sec-tag {
  background: var(--moonlight-surface);
  color: var(--moonlight-text);
  border: 1px solid var(--moonlight-border);
}

.social-moonlight .geo-section-title {
  color: var(--moonlight-text);
}

.social-moonlight .geo-section-subtitle {
  color: var(--moonlight-muted);
}

.social-moonlight .social-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--moonlight-border);
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  animation: moonlight-glow 4s ease-in-out infinite, whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
  backdrop-filter: blur(12px);
}

.social-moonlight .social-card:nth-child(2) {
  animation-delay: 1s;
}

.social-moonlight .social-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 24px 56px rgba(148, 163, 184, 0.25);
}

.social-moonlight .social-icon {
  background: var(--moonlight-glow);
  border: 1px solid var(--moonlight-border);
}

.social-moonlight .social-info strong {
  color: var(--moonlight-text);
}

.social-moonlight .social-info span {
  color: var(--moonlight-muted);
}

.social-moonlight .social-btn {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #1e293b;
}

/* SOCIAL PRESET 8: PORCELAIN (White) - Refined delicate */
.sec-social.social-porcelain {
  background: var(--porcelain-bg);
}

.social-porcelain .social-frame {
  position: relative;
  padding: 48px;
  text-align: center;
}

.social-porcelain .social-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--porcelain-glaze);
  animation: porcelain-glaze 5s ease-in-out infinite;
  pointer-events: none;
}

.social-porcelain .sec-tag {
  background: var(--porcelain-accent);
  color: var(--porcelain-text);
  border: none;
  border-radius: 8px;
}

.social-porcelain .geo-section-title {
  color: var(--porcelain-text);
}

.social-porcelain .geo-section-subtitle {
  color: var(--porcelain-muted);
}

.social-porcelain .social-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--porcelain-border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(186, 230, 253, 0.1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  backdrop-filter: blur(12px);
  animation: whitish-card-reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--card-index, 0) * 0.1s);
}

.social-porcelain .social-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.3), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

.social-porcelain .social-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 48px rgba(186, 230, 253, 0.25);
  border-color: #7dd3fc;
}

.social-porcelain .social-icon {
  background: var(--porcelain-accent);
  border: none;
}

.social-porcelain .social-info strong {
  color: var(--porcelain-text);
}

.social-porcelain .social-info span {
  color: var(--porcelain-muted);
}

.social-porcelain .social-btn {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  color: #0c4a6e;
}

/* ============================================
   CAROUSEL SECTION
   ============================================ */

.carousel-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

.carousel-track {
  position: relative;
  aspect-ratio: 16 / 9;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: scale(0.95);
}

.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: #fff;
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

.carousel-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot.active {
  background: #fff;
  transform: scale(1.2);
}

.carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  animation: carousel-progress var(--carousel-interval, 5s) linear infinite;
}

@keyframes carousel-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* ============================================
   REVIEWS SECTION
   ============================================ */

.reviews-track {
  display: flex;
  gap: 24px;
  animation: reviews-scroll 40s linear infinite;
}

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

.review-card {
  flex: 0 0 360px;
  padding: 32px;
  border-radius: 20px;
}

.review-quote {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--section-muted, #a1a1aa);
  opacity: 0.5;
}

.review-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--section-text, #fff);
  margin: 0 0 24px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-name {
  font-weight: 600;
  color: var(--section-text, #fff);
  margin: 0 0 4px;
}

.review-identity {
  font-size: 13px;
  color: var(--section-muted, #a1a1aa);
  margin: 0;
}

/* ============================================
   ABOUT SECTION - CIRCULAR IMAGE
   ============================================ */

.about-photo-circular {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 48px;
}

.about-photo-circular img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  border: 4px solid rgba(255, 255, 255, 0.1);
}

.about-photo-ring {
  position: absolute;
  inset: -10px;
  border: 3px solid;
  border-color: var(--vortex-accent-1, #8b5cf6);
  border-radius: 50%;
  animation: prism-corner-pulse 3s ease-in-out infinite;
}

.about-photo-glow {
  position: absolute;
  inset: -24px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
  border-radius: 50%;
  animation: vortex-breathe 4s ease-in-out infinite;
}

/* ============================================
   RESPONSIVE - MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 960px) {
  .sec-container {
    padding: 32px;
  }

  .geo-section-frame,
  .geo-reviews-frame,
  .geo-social-frame {
    padding: 32px;
  }

  --geo-corner-size: var(--geo-corner-size-md);
  --geo-cut: var(--geo-cut-md);
}

@media (max-width: 760px) {
  :root {
    --geo-corner-size: var(--geo-corner-size-md);
    --geo-cut: var(--geo-cut-md);
  }

  .sec-container {
    padding: 24px;
    border-radius: 20px;
  }

  .geo-section-frame,
  .geo-reviews-frame,
  .geo-social-frame {
    padding: 24px;
    border-radius: 16px;
  }

  .sec-header {
    margin-bottom: 32px;
  }

  .geo-section-header {
    margin-bottom: 24px;
  }

  .geo-section-title {
    font-size: 1.5rem;
  }

  .geo-featured-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .featured-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Slow down animations on mobile */
  .geo-prism .geo-corner {
    animation-duration: 4s;
  }

  .geo-nexus::before {
    animation-duration: 12s;
  }

  .geo-nexus .geo-scan {
    animation-duration: 6s;
  }

  .geo-vortex::before {
    animation-duration: 8s;
  }

  .about-photo-circular {
    width: 200px;
    height: 200px;
  }

  .review-card {
    flex: 0 0 300px;
    padding: 24px;
  }
}

@media (max-width: 420px) {
  :root {
    --geo-corner-size: var(--geo-corner-size-sm);
    --geo-cut: var(--geo-cut-sm);
  }

  .sec-container {
    padding: 16px;
    border-radius: 16px;
  }

  .geo-section-frame,
  .geo-reviews-frame,
  .geo-social-frame {
    padding: 16px;
    border-radius: 12px;
  }

  .geo-section-title {
    font-size: 1.25rem;
  }

  .geo-section-subtitle {
    font-size: 0.875rem;
  }

  /* Hide connector lines on very small screens */
  .geo-nexus .geo-node::before,
  .geo-nexus .geo-node::after {
    display: none;
  }

  .geo-vortex .geo-accent--tl::after,
  .geo-vortex .geo-accent--br::after {
    display: none;
  }

  .about-photo-circular {
    width: 160px;
    height: 160px;
  }
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .geo-prism .geo-corner,
  .geo-nexus::before,
  .geo-nexus .geo-node,
  .geo-nexus .geo-scan,
  .geo-vortex::before,
  .geo-vortex::after,
  .geo-vortex .geo-accent,
  .carousel-progress,
  .reviews-track,
  .about-photo-ring,
  .about-photo-glow {
    animation: none !important;
  }

  .featured-item {
    animation: none;
    opacity: 1;
  }
}

/* ============================================
   WHITISH PRESETS - RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Reduce animation intensity on tablet */
  .resources-pearl .resource-frame::before,
  .resources-crystal .resource-frame::before,
  .reviews-cloud .review,
  .social-moonlight .social-card {
    animation-duration: 10s;
  }

  /* Reduce border-radius on smaller screens */
  .resources-silk .resource-frame,
  .reviews-cloud .review,
  .social-moonlight .social-card {
    border-radius: 20px;
  }

  .resources-pearl .resource-item,
  .resources-silk .resource-item {
    border-radius: 16px;
  }

  /* Reduce hover lift on tablets */
  .resources-frost .resource-item:hover,
  .resources-pearl .resource-item:hover,
  .resources-silk .resource-item:hover,
  .resources-crystal .resource-item:hover,
  .reviews-snow .review:hover,
  .reviews-marble .review:hover,
  .reviews-cloud .review:hover,
  .reviews-platinum .review:hover,
  .social-ivory .social-card:hover,
  .social-diamond .social-card:hover,
  .social-moonlight .social-card:hover,
  .social-porcelain .social-card:hover {
    transform: translateY(-6px) scale(1.01);
  }
}

@media (max-width: 480px) {
  /* Disable complex animations on mobile for performance */
  .resources-pearl .resource-frame::before,
  .resources-pearl .resource-frame::after,
  .resources-crystal .resource-frame::before,
  .reviews-cloud .reviews-frame::before,
  .social-diamond .social-frame::before,
  .social-diamond .social-frame::after {
    display: none;
  }

  /* Simplify hover effects on mobile */
  .resources-frost .resource-item:hover,
  .resources-pearl .resource-item:hover,
  .resources-silk .resource-item:hover,
  .resources-crystal .resource-item:hover,
  .reviews-snow .review:hover,
  .reviews-marble .review:hover,
  .reviews-cloud .review:hover,
  .reviews-platinum .review:hover,
  .social-ivory .social-card:hover,
  .social-diamond .social-card:hover,
  .social-moonlight .social-card:hover,
  .social-porcelain .social-card:hover {
    transform: translateY(-4px);
  }

  /* Hide sparkle and shimmer effects on mobile */
  .resources-frost .resource-item::before,
  .resources-pearl .resource-item::after,
  .reviews-snow .review::before,
  .reviews-platinum .review::before,
  .social-ivory .social-card::before,
  .social-diamond .social-card::after {
    display: none;
  }

  /* Reduce blur for performance */
  .resources-frost .resource-item,
  .resources-pearl .resource-item,
  .resources-silk .resource-item,
  .resources-crystal .resource-item,
  .reviews-snow .review,
  .reviews-marble .review,
  .reviews-cloud .review,
  .reviews-platinum .review,
  .social-ivory .social-card,
  .social-diamond .social-card,
  .social-moonlight .social-card,
  .social-porcelain .social-card {
    backdrop-filter: blur(8px);
  }
}

/* Whitish presets - Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .resources-frost .resource-frame::before,
  .resources-frost .resource-item::before,
  .resources-pearl .resource-frame::before,
  .resources-pearl .resource-frame::after,
  .resources-pearl .resource-item::after,
  .resources-silk .resource-frame::before,
  .resources-crystal .resource-frame::before,
  .reviews-snow .review::before,
  .reviews-marble .reviews-frame::before,
  .reviews-cloud .reviews-frame::before,
  .reviews-cloud .review,
  .reviews-platinum .sec-tag,
  .reviews-platinum .review::before,
  .social-diamond .social-frame::before,
  .social-diamond .social-frame::after,
  .social-moonlight .social-card,
  .social-porcelain .social-frame::before,
  .social-ivory .social-card::before {
    animation: none !important;
  }

  .resources-frost .resource-item,
  .resources-pearl .resource-item,
  .resources-silk .resource-item,
  .resources-crystal .resource-item,
  .reviews-snow .review,
  .reviews-marble .review,
  .reviews-cloud .review,
  .reviews-platinum .review,
  .social-ivory .social-card,
  .social-diamond .social-card,
  .social-moonlight .social-card,
  .social-porcelain .social-card {
    animation: none;
    opacity: 1;
  }
}

/* ============================================
   NEON RAINBOW 3D PRESET STYLES
   Vibrant creative palette for Three.js sections
   ============================================ */

:root {
  /* Neon Rainbow Palette */
  --neon-pink: #ff6bd6;
  --neon-purple: #a855f7;
  --neon-cyan: #22d3ee;
  --neon-green: #4ade80;
  --neon-blue: #3b82f6;
  --neon-magenta: #ec4899;
  --neon-yellow: #facc15;
  --neon-orange: #fb923c;

  /* Gradient combinations */
  --gradient-rainbow: linear-gradient(135deg, #ff6bd6, #a855f7, #22d3ee, #4ade80);
  --gradient-sunset: linear-gradient(135deg, #ff6bd6, #a855f7, #3b82f6);
  --gradient-aurora: linear-gradient(135deg, #22d3ee, #4ade80, #a855f7);
  --gradient-cosmic: linear-gradient(135deg, #a855f7, #ec4899, #ff6bd6);
  --gradient-neon-flow: linear-gradient(90deg, #ff6bd6, #a855f7, #22d3ee, #4ade80, #ff6bd6);

  /* Glow effects */
  --glow-pink: 0 0 30px rgba(255, 107, 214, 0.5);
  --glow-purple: 0 0 30px rgba(168, 85, 247, 0.5);
  --glow-cyan: 0 0 30px rgba(34, 211, 238, 0.5);
  --glow-green: 0 0 30px rgba(74, 222, 128, 0.5);
  --glow-blue: 0 0 30px rgba(59, 130, 246, 0.5);
  --glow-rainbow: 0 0 40px rgba(168, 85, 247, 0.4), 0 0 80px rgba(34, 211, 238, 0.2);
}

/* ============================================
   VIBRANT ANIMATION KEYFRAMES
   ============================================ */

/* Rainbow pulse animation */
@keyframes neon-pulse {
  0%, 100% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.2) saturate(1.3);
    transform: scale(1.02);
  }
}

/* Vibrant border sweep */
@keyframes rainbow-sweep {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Energetic card pop */
@keyframes card-pop {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.01);
  }
}

/* Floating element drift */
@keyframes gentle-drift {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-6px) translateX(3px);
  }
  50% {
    transform: translateY(0) translateX(6px);
  }
  75% {
    transform: translateY(6px) translateX(3px);
  }
}

/* Color cycling gradient */
@keyframes color-cycle {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Sparkle twinkle */
@keyframes sparkle-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Neon glow pulse */
@keyframes neon-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3),
                0 0 40px rgba(34, 211, 238, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5),
                0 0 60px rgba(34, 211, 238, 0.3),
                0 0 80px rgba(255, 107, 214, 0.2);
  }
}

/* Wireframe rotation */
@keyframes wireframe-rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(180deg);
  }
}

/* Wave undulation */
@keyframes wave-undulate {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  25% {
    transform: translateY(-5px) scaleY(1.05);
  }
  50% {
    transform: translateY(0) scaleY(0.95);
  }
  75% {
    transform: translateY(5px) scaleY(1.02);
  }
}

/* Iridescent shimmer */
@keyframes iridescent-shimmer {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  33% {
    filter: hue-rotate(120deg) brightness(1.1);
  }
  66% {
    filter: hue-rotate(240deg) brightness(1.05);
  }
  100% {
    filter: hue-rotate(360deg) brightness(1);
  }
}

/* ============================================
   THREE.JS 3D PRESET: COSMOS (Hero)
   Sparkle stars container styling
   ============================================ */

.hero-cosmos,
[data-preset="cosmos"] {
  position: relative;
  overflow: hidden;
}

.hero-cosmos::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(34, 211, 238, 0.12) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 50%, rgba(255, 107, 214, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-cosmos .hero-content {
  position: relative;
  z-index: 10;
}

/* Mobile fallback for cosmos */
.hero-cosmos.three-mobile-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--neon-pink), transparent),
    radial-gradient(2px 2px at 40% 70%, var(--neon-cyan), transparent),
    radial-gradient(1px 1px at 60% 20%, var(--neon-purple), transparent),
    radial-gradient(2px 2px at 80% 60%, var(--neon-green), transparent),
    radial-gradient(1px 1px at 30% 80%, var(--neon-pink), transparent),
    radial-gradient(2px 2px at 70% 40%, var(--neon-cyan), transparent);
  animation: sparkle-twinkle 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   THREE.JS 3D PRESET: POLYHEDRA (Carousel)
   Wireframe shapes container styling
   ============================================ */

.carousel-polyhedra,
[data-preset="polyhedra"] {
  position: relative;
  overflow: hidden;
}

.carousel-polyhedra::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(168, 85, 247, 0.05) 0%,
    transparent 30%,
    transparent 70%,
    rgba(34, 211, 238, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Frame enhancement for polyhedra */
.carousel-polyhedra .carousel-frame,
.carousel-polyhedra .carousel-card {
  border: 1px solid rgba(168, 85, 247, 0.2);
  animation: neon-glow-pulse 4s ease-in-out infinite;
}

.carousel-polyhedra .carousel-frame:hover,
.carousel-polyhedra .carousel-card:hover {
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: var(--glow-cyan);
}

/* Mobile fallback for polyhedra */
.carousel-polyhedra.three-mobile-fallback::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(168, 85, 247, 0.3);
  animation: wireframe-rotate 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   THREE.JS 3D PRESET: AURORA-WAVE (Content)
   Gradient wave container styling
   ============================================ */

.content-aurora-wave,
[data-preset="aurora-wave"] {
  position: relative;
  overflow: hidden;
}

.content-aurora-wave::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(0deg,
    rgba(255, 107, 214, 0.08) 0%,
    rgba(168, 85, 247, 0.05) 30%,
    rgba(34, 211, 238, 0.03) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.content-aurora-wave .content-card,
.content-aurora-wave .section-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(168, 85, 247, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-aurora-wave .content-card:hover,
.content-aurora-wave .section-card:hover {
  transform: translateY(-6px);
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.15);
}

/* Mobile fallback for aurora-wave */
.content-aurora-wave.three-mobile-fallback::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: var(--gradient-rainbow);
  background-size: 400% 100%;
  animation: rainbow-sweep 8s ease infinite;
  opacity: 0.15;
  mask-image: linear-gradient(0deg, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, black 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   THREE.JS 3D PRESET: MORPHEUS (Reviews/About)
   Iridescent blob container styling
   ============================================ */

.reviews-morpheus,
.about-morpheus,
[data-preset="morpheus"] {
  position: relative;
  overflow: hidden;
}

.reviews-morpheus::before,
.about-morpheus::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 107, 214, 0.15) 0%,
    rgba(168, 85, 247, 0.1) 30%,
    rgba(34, 211, 238, 0.08) 60%,
    transparent 80%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.reviews-morpheus .review,
.about-morpheus .about-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 85, 247, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reviews-morpheus .review:hover,
.about-morpheus .about-card:hover {
  border-color: rgba(255, 107, 214, 0.25);
  box-shadow: 0 15px 50px rgba(168, 85, 247, 0.2);
}

/* Mobile fallback for morpheus */
.reviews-morpheus.three-mobile-fallback::after,
.about-morpheus.three-mobile-fallback::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gradient-cosmic);
  background-size: 200% 200%;
  animation: rainbow-sweep 6s ease infinite, gentle-drift 8s ease-in-out infinite;
  filter: blur(30px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   ENHANCED EXISTING PRESETS (Vibrant Creative)
   ============================================ */

/* Enhanced Aurora - Add floating orbs */
.hero-aurora::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-cyan) 0%, transparent 70%);
  filter: blur(40px);
  animation: gentle-drift 10s ease-in-out infinite;
  opacity: 0.3;
  top: 20%;
  left: 10%;
  pointer-events: none;
}

/* Enhanced Ember - Fire glow */
.hero-ember::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(0deg,
    rgba(251, 146, 60, 0.2) 0%,
    rgba(239, 68, 68, 0.1) 50%,
    transparent 100%);
  animation: neon-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* Enhanced Frost - Crystal shimmer */
.hero-frost .hero-content::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(45deg,
    transparent 45%,
    rgba(56, 189, 248, 0.1) 50%,
    transparent 55%);
  background-size: 30px 30px;
  animation: frost-crystallize 4s ease-in-out infinite;
  pointer-events: none;
}

/* Enhanced Bloom - Petal burst */
.hero-bloom::after {
  content: '';
  position: absolute;
  top: 30%;
  right: 10%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-pink) 0%, transparent 70%);
  filter: blur(35px);
  animation: gentle-drift 12s ease-in-out infinite reverse;
  opacity: 0.25;
  pointer-events: none;
}

/* Enhanced Nexus - Brighter scan line */
.carousel-nexus .carousel-frame::before {
  background: linear-gradient(90deg,
    transparent,
    var(--neon-cyan) 20%,
    var(--neon-purple) 50%,
    var(--neon-cyan) 80%,
    transparent);
  opacity: 0.8;
}

/* Enhanced Prism - Rainbow corners */
.carousel-prism .carousel-frame::after {
  background: conic-gradient(
    from 0deg,
    var(--neon-pink),
    var(--neon-purple),
    var(--neon-cyan),
    var(--neon-green),
    var(--neon-pink)
  );
  opacity: 0.3;
}

/* Enhanced Vortex - Energy trails */
.carousel-vortex .carousel-frame {
  background-image: var(--gradient-neon-flow);
  background-size: 400% 100%;
  animation: rainbow-sweep 6s linear infinite;
}

/* ============================================
   3D PRESET RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Reduce intensity on mobile */
  .hero-cosmos::before,
  .carousel-polyhedra::before,
  .content-aurora-wave::before,
  .reviews-morpheus::before,
  .about-morpheus::before {
    opacity: 0.7;
  }

  /* Smaller glow effects */
  .reviews-morpheus::before,
  .about-morpheus::before {
    width: 200px;
    height: 200px;
  }

  /* Disable complex animations */
  .hero-aurora::after,
  .hero-ember::after,
  .hero-frost .hero-content::before,
  .hero-bloom::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable all neon animations for accessibility */
  .hero-cosmos.three-mobile-fallback::after,
  .carousel-polyhedra.three-mobile-fallback::after,
  .content-aurora-wave.three-mobile-fallback::after,
  .reviews-morpheus.three-mobile-fallback::after,
  .about-morpheus.three-mobile-fallback::after,
  .hero-aurora::after,
  .hero-ember::after,
  .hero-frost .hero-content::before,
  .hero-bloom::after {
    animation: none !important;
  }

  .carousel-polyhedra .carousel-frame,
  .carousel-polyhedra .carousel-card {
    animation: none;
  }
}