/*
Theme Name: Velora Weddings Infinity
Theme URI: https://weddings.collablynx.com
Author: CollabLynx
Author URI: https://collablynx.com
Description: The #1 AI-powered Indian Wedding Planning Platform. Netflix + Pinterest + The Knot + Taj Hotels — built for South Asian couples across North America.
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velora-infinity
Tags: wedding, indian, south-asian, luxury, ai, platform, dark-mode, full-width-template
*/

/* ═══════════════════════════════════════════════════════════════
   VELORA WEDDINGS INFINITY — MASTER DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --vi-midnight:    #0B0B1A;
  --vi-deep:        #12122A;
  --vi-crimson:     #8B0A2A;
  --vi-crimson-lt:  #B01035;
  --vi-gold:        #D4A017;
  --vi-gold-lt:     #E8B84B;
  --vi-gold-pale:   #F5E6B0;
  --vi-blush:       #F2C4CE;
  --vi-rose:        #E8899A;
  --vi-pearl:       #FAFAF8;
  --vi-sage:        #4A7C6F;
  --vi-slate:       #1E1E38;
  --vi-muted:       #6B6B8A;
  --vi-border:      rgba(212,160,23,0.18);

  /* ── Typography ── */
  --font-display:   'Cormorant Garant', 'Georgia', serif;
  --font-body:      'DM Sans', 'Inter', sans-serif;
  --font-utility:   'DM Mono', 'Courier New', monospace;

  /* ── Type Scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   19px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  86px;
  --text-hero: clamp(56px, 8vw, 116px);

  /* ── Spacing ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;
  --space-2xl: 140px;

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   28px;
  --radius-xl:   48px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-glow-gold:    0 0 60px rgba(212,160,23,0.25);
  --shadow-glow-crimson: 0 0 60px rgba(139,10,42,0.35);
  --shadow-card:         0 8px 40px rgba(0,0,0,0.4);
  --shadow-card-hover:   0 24px 80px rgba(0,0,0,0.6);

  /* ── Gradients ── */
  --grad-hero:    linear-gradient(160deg, #0B0B1A 0%, #1a0515 45%, #0B0B1A 100%);
  --grad-gold:    linear-gradient(135deg, #8B5A00, #D4A017, #F5E6B0, #D4A017);
  --grad-crimson: linear-gradient(135deg, #4A0012, #8B0A2A, #C41040);
  --grad-glass:   linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  --grad-section: linear-gradient(180deg, #0B0B1A 0%, #12122A 50%, #0B0B1A 100%);

  /* ── Transitions ── */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:  0.18s;
  --t-med:   0.35s;
  --t-slow:  0.6s;

  /* ── Z-Layers ── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--vi-midnight);
  color: var(--vi-pearl);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.light-mode {
  --vi-midnight: #FAFAF8;
  --vi-deep:     #F0EEE8;
  --vi-pearl:    #1a1a2e;
  --vi-slate:    #F5F3EE;
  --vi-muted:    #6B6B6B;
  background: #FAFAF8;
  color: #1a1a2e;
}

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

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

.vi-display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.vi-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.vi-kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--vi-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vi-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--vi-gold);
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.vi-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.vi-container--wide  { max-width: 1560px; }
.vi-container--narrow { max-width: 860px; }

.vi-section {
  padding: var(--space-2xl) 0;
  position: relative;
}

.vi-section--dark { background: var(--vi-midnight); }
.vi-section--deep { background: var(--vi-deep); }
.vi-section--glass {
  background: rgba(18,18,42,0.85);
  backdrop-filter: blur(24px);
}

/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM CARDS
   ═══════════════════════════════════════════════════════════════ */

.vi-card {
  background: var(--grad-glass);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  transition: transform var(--t-med) var(--ease-smooth),
              box-shadow var(--t-med) var(--ease-smooth),
              border-color var(--t-med) var(--ease-smooth);
}

.vi-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(212,160,23,0.4);
}

.vi-card--glow:hover {
  box-shadow: var(--shadow-card-hover), var(--shadow-glow-gold);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.vi-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--t-med) var(--ease-smooth);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.vi-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.vi-btn:hover::after { opacity: 1; }

.vi-btn--primary {
  background: var(--grad-gold);
  color: #1a0a00;
  box-shadow: 0 4px 24px rgba(212,160,23,0.4);
}
.vi-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(212,160,23,0.6);
}

.vi-btn--crimson {
  background: var(--grad-crimson);
  color: #fff;
  box-shadow: 0 4px 24px rgba(139,10,42,0.5);
}
.vi-btn--crimson:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(139,10,42,0.7);
}

.vi-btn--ghost {
  background: transparent;
  color: var(--vi-pearl);
  border: 1.5px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
}
.vi-btn--ghost:hover {
  border-color: var(--vi-gold);
  color: var(--vi-gold);
  transform: translateY(-2px);
}

.vi-btn--sm {
  padding: 10px 22px;
  font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENT TEXT
   ═══════════════════════════════════════════════════════════════ */

.vi-gradient-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vi-gradient-text--crimson {
  background: linear-gradient(135deg, var(--vi-rose), var(--vi-crimson-lt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   DECORATIVE ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

.vi-mandala-ring {
  width: 480px;
  height: 480px;
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: 50%;
  position: absolute;
  animation: vi-spin-slow 60s linear infinite;
}

.vi-mandala-ring--inner {
  width: 320px;
  height: 320px;
  border-color: rgba(139,10,42,0.12);
  animation-direction: reverse;
  animation-duration: 40s;
}

@keyframes vi-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.vi-noise-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

.vi-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.vi-reveal.vi-visible {
  opacity: 1;
  transform: translateY(0);
}

.vi-reveal--left {
  transform: translateX(-32px);
}
.vi-reveal--left.vi-visible {
  transform: translateX(0);
}

.vi-reveal--scale {
  transform: scale(0.94);
}
.vi-reveal--scale.vi-visible {
  transform: scale(1);
}

/* Staggered children */
.vi-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.vi-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  padding: 0;
  transition: all var(--t-med) var(--ease-smooth);
}

.vi-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  transition: all var(--t-med) var(--ease-smooth);
}

.vi-nav--scrolled .vi-nav__inner {
  background: rgba(11,11,26,0.92);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-bottom: 1px solid var(--vi-border);
  padding: 14px 40px;
}

.vi-nav__logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vi-nav__logo-mark {
  width: 36px;
  height: 36px;
  background: var(--grad-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.vi-nav__menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.vi-nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(250,250,248,0.75);
  letter-spacing: 0.02em;
  transition: color var(--t-fast);
  position: relative;
}

.vi-nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--vi-gold);
  transform: scaleX(0);
  transition: transform var(--t-fast) var(--ease-smooth);
}

.vi-nav__link:hover {
  color: var(--vi-pearl);
}

.vi-nav__link:hover::after { transform: scaleX(1); }

.vi-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vi-nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--vi-border);
  color: var(--vi-pearl);
  font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   PILLS / TAGS
   ═══════════════════════════════════════════════════════════════ */

.vi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--vi-border);
  background: rgba(212,160,23,0.08);
  color: var(--vi-gold-lt);
  cursor: pointer;
  transition: all var(--t-fast);
}

.vi-pill:hover,
.vi-pill--active {
  background: rgba(212,160,23,0.2);
  border-color: rgba(212,160,23,0.5);
  color: var(--vi-gold);
}

/* Culture pills - colorful */
.vi-culture-pill { border-radius: var(--radius-full); padding: 12px 24px; font-size: 15px; font-weight: 700; transition: all var(--t-med) var(--ease-spring); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.vi-culture-pill:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.vi-culture-pill--hindu    { background: linear-gradient(135deg,#FF6B00,#FFB347); color: #1a0800; }
.vi-culture-pill--telugu   { background: linear-gradient(135deg,#8B0A2A,#D4A017); color: #fff; }
.vi-culture-pill--tamil    { background: linear-gradient(135deg,#1B4332,#52B788); color: #fff; }
.vi-culture-pill--bengali  { background: linear-gradient(135deg,#1a1a8e,#6C63FF); color: #fff; }
.vi-culture-pill--punjabi  { background: linear-gradient(135deg,#E85D04,#F48C06); color: #fff; }
.vi-culture-pill--gujarati { background: linear-gradient(135deg,#006494,#00B4D8); color: #fff; }
.vi-culture-pill--kannada  { background: linear-gradient(135deg,#6A0572,#D4A017); color: #fff; }
.vi-culture-pill--sikh     { background: linear-gradient(135deg,#1B4332,#D4A017); color: #fff; }
.vi-culture-pill--muslim   { background: linear-gradient(135deg,#0D3B2E,#2DC653); color: #fff; }
.vi-culture-pill--christian{ background: linear-gradient(135deg,#1565C0,#42A5F5); color: #fff; }
.vi-culture-pill--interfaith{ background: linear-gradient(135deg,#6A0572,#D4A017); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   STAT COUNTERS
   ═══════════════════════════════════════════════════════════════ */

.vi-stat {
  text-align: center;
}

.vi-stat__number {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}

.vi-stat__label {
  font-size: var(--text-sm);
  color: var(--vi-muted);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.vi-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--vi-pearl);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.vi-input:focus {
  border-color: rgba(212,160,23,0.5);
  box-shadow: 0 0 0 3px rgba(212,160,23,0.12);
}

.vi-input::placeholder { color: var(--vi-muted); }

/* ═══════════════════════════════════════════════════════════════
   DARK/LIGHT MODE TOGGLE
   ═══════════════════════════════════════════════════════════════ */

.vi-mode-toggle {
  width: 44px; height: 24px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background var(--t-fast);
}

.vi-mode-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--vi-gold);
  border-radius: 50%;
  transition: transform var(--t-med) var(--ease-spring);
}

body.light-mode .vi-mode-toggle::after { transform: translateX(20px); }

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--vi-midnight); }
::-webkit-scrollbar-thumb { background: rgba(212,160,23,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--vi-gold); }

/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════════════════════════ */

.vi-loader {
  position: fixed;
  inset: 0;
  background: var(--vi-midnight);
  z-index: 9999;
  display: grid;
  place-items: center;
  transition: opacity var(--t-slow) var(--ease-smooth);
}

.vi-loader.vi-loaded { opacity: 0; pointer-events: none; }

.vi-loader__ring {
  width: 80px; height: 80px;
  border: 2px solid rgba(212,160,23,0.15);
  border-top-color: var(--vi-gold);
  border-radius: 50%;
  animation: vi-spin 1s linear infinite;
}

@keyframes vi-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.vi-footer {
  background: #060610;
  border-top: 1px solid var(--vi-border);
  padding: var(--space-2xl) 0 var(--space-lg);
}

.vi-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}

.vi-footer__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--vi-gold);
  margin-bottom: var(--space-md);
}

.vi-footer__link {
  display: block;
  font-size: var(--text-sm);
  color: var(--vi-muted);
  margin-bottom: 12px;
  transition: color var(--t-fast);
}

.vi-footer__link:hover { color: var(--vi-pearl); }

.vi-footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.vi-footer__copy {
  font-size: var(--text-sm);
  color: var(--vi-muted);
}

/* ═══════════════════════════════════════════════════════════════
   AI VERA FLOAT BUTTON
   ═══════════════════════════════════════════════════════════════ */

.vi-vera-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.vi-vera-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vi-crimson), var(--vi-gold));
  border: 2px solid rgba(212,160,23,0.4);
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 8px 32px rgba(139,10,42,0.5), 0 0 0 0 rgba(212,160,23,0.3);
  animation: vi-pulse-ring 2.5s infinite;
  transition: transform var(--t-med) var(--ease-spring);
}

.vi-vera-btn:hover { transform: scale(1.1); }

@keyframes vi-pulse-ring {
  0%   { box-shadow: 0 8px 32px rgba(139,10,42,0.5), 0 0 0 0 rgba(212,160,23,0.3); }
  70%  { box-shadow: 0 8px 32px rgba(139,10,42,0.5), 0 0 0 18px rgba(212,160,23,0); }
  100% { box-shadow: 0 8px 32px rgba(139,10,42,0.5), 0 0 0 0 rgba(212,160,23,0); }
}

.vi-vera-label {
  background: rgba(11,11,26,0.95);
  border: 1px solid var(--vi-border);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--vi-gold);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   VENDOR CARDS
   ═══════════════════════════════════════════════════════════════ */

.vi-vendor-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--vi-slate);
  border: 1px solid var(--vi-border);
  transition: all var(--t-med) var(--ease-smooth);
}

.vi-vendor-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212,160,23,0.4);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), var(--shadow-glow-gold);
}

.vi-vendor-card__cover {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.vi-vendor-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-smooth);
}

.vi-vendor-card:hover .vi-vendor-card__cover img { transform: scale(1.08); }

.vi-vendor-card__body { padding: 20px 22px; }

.vi-vendor-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
}

.vi-vendor-card__meta {
  font-size: var(--text-sm);
  color: var(--vi-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vi-vendor-card__rating {
  color: var(--vi-gold);
  font-weight: 700;
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════
   INSPIRATION BOARD (MASONRY)
   ═══════════════════════════════════════════════════════════════ */

.vi-masonry {
  columns: 4 240px;
  column-gap: 16px;
}

.vi-pin {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.vi-pin__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--t-med);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.vi-pin:hover .vi-pin__overlay { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════ */

.vi-dash-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.vi-dash-sidebar {
  background: var(--vi-slate);
  border-right: 1px solid var(--vi-border);
  padding: var(--space-lg) var(--space-md);
}

.vi-dash-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--vi-muted);
  transition: all var(--t-fast);
  margin-bottom: 4px;
}

.vi-dash-nav-item:hover,
.vi-dash-nav-item--active {
  background: rgba(212,160,23,0.1);
  color: var(--vi-gold);
}

.vi-kpi-card {
  background: var(--grad-glass);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  backdrop-filter: blur(20px);
}

.vi-kpi-card__value {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 300;
  color: var(--vi-gold);
  line-height: 1;
  margin-bottom: 6px;
}

.vi-kpi-card__label {
  font-size: var(--text-sm);
  color: var(--vi-muted);
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════════════════════════ */

.vi-progress {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.vi-progress__fill {
  height: 100%;
  background: var(--grad-gold);
  border-radius: var(--radius-full);
  transition: width 1.2s var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .vi-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
  :root {
    --space-2xl: 80px;
    --space-xl:  60px;
    --space-lg:  40px;
  }
  .vi-nav__menu { display: none; }
  .vi-nav__toggle { display: flex; }
  .vi-nav__inner { padding: 16px 20px; }
  .vi-footer__grid { grid-template-columns: 1fr 1fr; }
  .vi-masonry { columns: 2 160px; }
  .vi-dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .vi-masonry { columns: 2 120px; }
  .vi-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vi-reveal, .vi-mandala-ring, .vi-loader__ring, .vi-vera-btn { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* v1.0.4: Hide duplicate/free Vera widgets while keeping the theme's orange Vera UI intact. */
.vera-free,
.vera-free-widget,
.vera-chat-free,
.vera-badge-free,
.velora-free-vera,
#vera-free,
#vera-free-chat,
[data-vera="free"],
[data-widget="vera-free"] {
  display: none !important;
}