/* ========================================
   CSS Variables / Design Tokens
   Professional UI/UX Design System
   ======================================== */

:root {
    /* ==================== COLOR PALETTE ==================== */
    
    /* Primary Purple Gradient */
    --primary: #7c3aed;
    --primary-light: #a78bfa;
    --primary-dark: #5b21b6;
    --primary-gradient: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    
    /* Accent Colors */
    --accent: #ec4899;
    --accent-light: #f9a8d4;
    --accent-dark: #be185d;
    
    /* Dark Theme Colors */
    --bg-dark: #0f0f14;
    --bg-card: #1a1a24;
    --bg-card-hover: #232334;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-modal: rgba(0, 0, 0, 0.9);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #475569;
    
    /* Status Colors */
    --success: #10b981;
    --success-light: #34d399;
    --success-dark: #059669;
    
    --error: #ef4444;
    --error-light: #f87171;
    --error-dark: #dc2626;
    
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    
    --info: #3b82f6;
    --info-light: #60a5fa;
    --info-dark: #2563eb;
    
    /* Border Colors */
    --border-primary: rgba(124, 58, 237, 0.3);
    --border-accent: rgba(236, 72, 153, 0.3);
    --border-default: rgba(148, 163, 184, 0.2);
    --border-error: rgba(239, 68, 68, 0.3);
    
    /* ==================== TYPOGRAPHY ==================== */
    
    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    
    /* Font Sizes - Fluid Typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.813rem);
    --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.938rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.063rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.5rem);
    
    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    /* ==================== SPACING ==================== */
    
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    
    /* ==================== LAYOUT ==================== */
    
    /* Container Widths */
    --container-xs: 475px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;
    
    /* ==================== SHADOWS ==================== */
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
    
    /* Colored Shadows */
    --shadow-primary: 0 10px 40px rgba(124, 58, 237, 0.3);
    --shadow-primary-lg: 0 15px 50px rgba(124, 58, 237, 0.4);
    --shadow-accent: 0 10px 40px rgba(236, 72, 153, 0.3);
    --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.5);
    
    /* ==================== TRANSITIONS ==================== */
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 700ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Easing Functions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ==================== Z-INDEX ==================== */
    
    --z-negative: -1;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-max: 9999;
    
    /* ==================== ANIMATIONS ==================== */
    
    --animation-duration-fast: 200ms;
    --animation-duration-base: 400ms;
    --animation-duration-slow: 600ms;
    --animation-duration-slower: 1000ms;
    --animation-duration-slowest: 2000ms;
}

/* ==================== DARK MODE OVERRIDES ==================== */
/* Already using dark theme by default, but this structure allows for light mode in future */

@media (prefers-color-scheme: light) {
  :root.light-mode {
    --background-color: #ffffff;
    --text-color: #000000;
  }
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
/* Use these in media queries throughout the app */

/* 
  xs: 475px
  sm: 640px
  md: 768px
  lg: 1024px
  xl: 1280px
  2xl: 1400px
*//* ========================================
   Modern CSS Reset / Normalize
   Based on best practices from Josh Comeau & Andy Bell
   ======================================== */

/* ==================== BOX MODEL ==================== */

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

/* ==================== CORE DEFAULTS ==================== */

html {
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Prevent font size adjustments after orientation changes */
    -webkit-text-size-adjust: 100%;
    
    /* Enable smooth scrolling */
    scroll-behavior: smooth;
    
    /* Better focus handling */
    tab-size: 4;
}

/* Focus visible only for keyboard navigation */
html:focus-within {
    scroll-behavior: smooth;
}

/* ==================== BODY DEFAULTS ==================== */

body {
    min-height: 100vh;
    line-height: 1.5;
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--bg-dark);
    
    /* Improve text rendering */
    text-rendering: optimizeSpeed;
    
    /* Prevent horizontal scroll */
    overflow-x: hidden;
    
    /* Better font rendering on Mac */
    -webkit-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;
}

/* ==================== TYPOGRAPHY ==================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    font-weight: var(--font-bold);
    overflow-wrap: break-word;
}

p, li, figcaption {
    max-width: 65ch;
    overflow-wrap: break-word;
}

/* Remove default margins */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
    margin: 0;
}

/* ==================== LISTS ==================== */

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==================== LINKS ==================== */

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* ==================== MEDIA ==================== */

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Remove default spacing */
img, picture, video, canvas, svg,
iframe, embed, object {
    vertical-align: middle;
}

/* Maintain aspect ratio */
img, video {
    object-fit: cover;
}

/* ==================== FORMS ==================== */

input, button, textarea, select {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;   /* Firefox */
  -webkit-appearance: none;     /* Chrome, Safari, Edge (WebKit/Blink) */
  appearance: textfield;        /* Standard */
}


/* Better textarea defaults */
textarea {
    min-height: 6em;
    resize: vertical;
}

/* Remove search input styling */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* ==================== TABLES ==================== */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==================== ACCESSIBILITY ==================== */

/* Remove animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus styles for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Remove focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ==================== SELECTION ==================== */

::selection {
    background-color: var(--primary);
    color: var(--text-primary);
}

::-moz-selection {
    background-color: var(--primary);
    color: var(--text-primary);
}

/* ==================== SCROLLBAR ==================== */

/* Custom scrollbar for Webkit browsers */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-card);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-card);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--bg-card);
}

/* ==================== MISC ==================== */

/* Prevent text selection on UI elements */
button, 
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Better defaults for dialog */
dialog {
    padding: 0;
    border: none;
    background: transparent;
}

/* Remove details marker */
details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

/* Better hr */
hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

/* Ensure hidden elements stay hidden */
[hidden] {
    display: none !important;
}/* ========================================
   Base Element Styles
   Foundation styles for HTML elements
   ======================================== */

/* ==================== DOCUMENT ==================== */

html {
    font-size: 16px;
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: var(--font-regular);
}

/* Animated gradient background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: var(--z-0);
    animation: floatBackground 20s ease-in-out infinite;
}

/* ==================== TYPOGRAPHY ==================== */

h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

mark {
    background: var(--primary);
    color: var(--text-primary);
    padding: 0.125em 0.25em;
    border-radius: var(--radius-sm);
}

/* ==================== LINKS ==================== */

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
    position: relative;
}

a:hover {
    color: var(--primary);
}

a:active {
    color: var(--primary-dark);
}

/* Underline animation for text links */
a:not([class])::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-gradient);
    transition: width var(--transition-base);
}

a:not([class]):hover::after {
    width: 100%;
}

/* ==================== LISTS ==================== */

ul:not([class]),
ol:not([class]) {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

ul:not([class]) li,
ol:not([class]) li {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

ul:not([class]) {
    list-style-type: disc;
}

ol:not([class]) {
    list-style-type: decimal;
}

ul:not([class]) ul,
ol:not([class]) ol {
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* ==================== QUOTES ==================== */

blockquote {
    border-left: 4px solid var(--primary);
    padding-left: var(--space-4);
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--text-secondary);
}

blockquote cite {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    font-style: normal;
}

blockquote cite::before {
    content: '— ';
}

/* ==================== CODE ==================== */

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--bg-card);
    color: var(--primary-light);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow-x: auto;
    margin: var(--space-4) 0;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: none;
    font-size: inherit;
}

/* ==================== DIVIDERS ==================== */

hr {
    border: none;
    height: 1px;
    background: var(--border-default);
    margin: var(--space-8) 0;
    position: relative;
}

/* Gradient divider variant */
hr.gradient {
    background: var(--primary-gradient);
    opacity: 0.5;
}

/* ==================== TABLES ==================== */

table {
    width: 100%;
    margin: var(--space-4) 0;
    border-collapse: collapse;
}

table th,
table td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border-default);
}

table th {
    background: var(--bg-card);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

table tbody tr:hover {
    background: rgba(124, 58, 237, 0.05);
}

/* ==================== DEFINITION LISTS ==================== */

dl {
    margin: var(--space-4) 0;
}

dt {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

dd {
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    padding-left: var(--space-4);
}

/* ==================== DETAILS/SUMMARY ==================== */

details {
    margin: var(--space-4) 0;
    padding: var(--space-3);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
}

summary {
    cursor: pointer;
    font-weight: var(--font-medium);
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

summary:hover {
    color: var(--primary-light);
}

details[open] summary {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-default);
}

/* ==================== FIGURES ==================== */

figure {
    margin: var(--space-6) 0;
}

figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* ==================== ADDRESSES ==================== */

address {
    font-style: normal;
    color: var(--text-secondary);
    margin: var(--space-4) 0;
}/* ========================================
   UI Components
   All reusable interface components
   ======================================== */

/* ==================== LAYOUT COMPONENTS ==================== */

.app-container {
    max-width: var(--container-2xl);
    margin: 0 auto;
    padding: var(--space-4);
    position: relative;
    z-index: var(--z-10);
}

/* ==================== HEADER ==================== */

.header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
        "logo . header-right lang"
        "tagline tagline tagline tagline";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding: 0;
    margin-bottom: var(--space-8);
    animation: fadeInDown 0.8s ease;
    position: relative;
    z-index: var(--z-sticky); /* ensure dropdown stays above slides */
}

.header-right {
    grid-area: header-right;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    grid-area: logo;
}

.logo img {
    height: 45px;
    width: auto;
}

.tagline {
    grid-area: tagline;
    display: block;
    margin: 0;
    padding: 0 var(--space-4);
    text-align: center;
    font-size: var(--text-lg);
    font-weight: var(--font-light);
    color: var(--text-secondary);
    white-space: normal;
    line-height: var(--leading-normal);
    padding-top: var(--space-3);
}

/* ==================== LANGUAGE SWITCHER ==================== */

.language-switcher {
    position: relative;
    z-index: var(--z-dropdown);
    grid-area: lang;
    justify-self: end;
}

.language-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-card);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.language-trigger:hover {
    border-color: var(--primary);
    background: rgba(124, 58, 237, 0.1);
}

.language-trigger.active .dropdown-arrow {
    transform: rotate(180deg);
}

.globe-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1) opacity(0.8);
}

.current-lang {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.current-lang img {
    width: 20px;
    height: 15px;
    object-fit: cover;
}

.dropdown-arrow {
    width: 12px;
    height: 12px;
    margin-left: var(--space-1);
    transition: transform var(--transition-base);
    filter: brightness(0) invert(1) opacity(0.6);
}

.language-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-2xl);
}

.language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    width: 100%;
    text-align: left;
}

.lang-option:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
}

.lang-option.active {
    background: var(--primary);
    color: white;
}

.lang-option img {
    width: 20px;
    height: 15px;
    object-fit: cover;
}

/* ==================== STATS SECTION ==================== */

.stats {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
    margin: var(--space-8) 0;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--primary-light);
}

.stat-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

/* ==================== MAIN CARD ==================== */

.main-card {
    background: var(--bg-card);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--border-primary);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease;
    margin-bottom: var(--space-8);
}

.main-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

.main-card.hidden {
    display: none;
}

/* ==================== VOICE SECTION ==================== */

.voice-section {
    text-align: center;
}

.voice-section h2 {
    padding-bottom: var(--space-3);
}

.mic-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-3) 0;
    width: 150px;
    height: 150px;
}

.mic-button {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--primary-gradient);
    border: none;
    cursor: pointer;
    position: relative;
    z-index: var(--z-10);
    transition: all var(--transition-base);
    box-shadow: 0 10px 40px rgba(124, 58, 237, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mic-button img {
    width: 48px;
    height: 48px;
    filter: brightness(0) invert(1);
    transition: transform var(--transition-base);
    object-fit: contain;
}

.mic-button:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 50px rgba(124, 58, 237, 0.5);
}

.mic-button:hover img {
    transform: scale(1.1) rotate(5deg);
}

.mic-button:active {
    transform: scale(0.96);
}

.mic-button.recording {
    animation: pulse 1.5s infinite;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

.mic-button.recording img {
    animation: micShake 0.3s infinite;
}

.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    animation: rippleEffect 2s ease-out infinite;
    pointer-events: none;
}

/* ==================== LIVE TRANSCRIPT ==================== */

.live-transcript {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-8) 0;
    min-height: 70px;
}

.transcript-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    text-align: left;
}

.transcript-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    text-align: left;
}

.transcript-text.placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

/* ==================== RECORDING STATUS ==================== */

.recording-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-error);
    margin-top: var(--space-4);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: blink 1.5s ease-in-out infinite;
}

.status-dot.active {
    background: var(--error);
}

/* ==================== TEXT ALTERNATIVE ==================== */

.text-alternative {
    margin-top: var(--space-8);
    text-align: center;
}

.divider {
    display: flex;
    align-items: center;
    margin: var(--space-8) 0;
    color: white;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-accent);
}

.divider span {
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
}

.text-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: var(--text-primary);
    font-size: var(--text-base);
    resize: vertical;
    min-height: 120px;
    transition: all var(--transition-base);
}

.text-alternative .text-input {
    margin-bottom: var(--space-3);
}

.text-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* ==================== STEPS INDICATOR ==================== */

.steps {
    display: none;
    justify-content: center;
    gap: var(--space-12);
    margin: var(--space-12) auto;
    position: relative;
    max-width: 500px;
}

.steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: calc(33.33% - 25px);
    right: calc(33.33% - 25px);
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(124, 58, 237, 0.2) 0%, 
        rgba(124, 58, 237, 0.3) 50%, 
        rgba(124, 58, 237, 0.2) 100%);
    z-index: 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
    min-width: 100px;
}

.step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(26, 26, 36, 0.8);
    border: 3px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    color: var(--text-secondary);
    transition: all 0.4s var(--ease-in-out);
    position: relative;
    backdrop-filter: blur(10px);
}

.step.active .step-icon {
    background: var(--primary-gradient);
    border-color: transparent;
    color: white;
    transform: scale(1.15);
    box-shadow: 
        0 8px 25px rgba(124, 58, 237, 0.5),
        0 0 0 8px rgba(124, 58, 237, 0.1);
}

.step.active .step-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--primary);
    animation: stepPulse 2s ease-out infinite;
}

.step span:last-child {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    transition: all var(--transition-base);
}

.step.active span:last-child {
    color: var(--primary);
    font-weight: var(--font-bold);
}

/* ==================== FIELDS EDITOR ==================== */

.fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.field-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.field-label.required {
    color: var(--accent);
}

.field-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.field-icon img {
    width: 20px;
    height: 20px;
}

.field-input {
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: all var(--transition-base);
}

.field-input.field-required {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.05);
}

.field-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.field-input.field-required:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* ==================== BUTTONS ==================== */

.btn {
    padding: var(--space-4) var(--space-6);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.btn img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-light);
    border: 1px solid var(--primary);
}

.btn-secondary:hover {
    background: rgba(124, 58, 237, 0.1);
}

.actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

/* ==================== MODALS ==================== */

.text-variants-modal,
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-8);
}

.text-variants-modal.active,
.share-modal.active {
    display: flex;
}

.text-variants-card,
.share-card {
    background: var(--bg-card);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--border-primary);
}

.share-card {
    max-width: 500px;
}

.text-variant-option {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    cursor: pointer;
    transition: all var(--transition-base);
}

.text-variant-option:hover {
    border-color: var(--primary);
    background: rgba(124, 58, 237, 0.1);
}

.text-variant-option.selected {
    border-color: var(--primary);
    background: rgba(124, 58, 237, 0.2);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.variant-number {
    display: block;
    font-size: var(--text-sm);
    color: var(--primary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

.variant-text {
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
}

/* corrections to edit save cance modal */
/* === Buttons inside the text variants card only === */
.text-variants-card .edit-variant-btn,
.text-variants-card .variant-save-btn,
.text-variants-card .variant-cancel-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .325rem 1rem;
  margin-right:1rem;
  border-radius: 9999px;                  /* pill */
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease,
              box-shadow .2s ease,
              background .2s ease,
              border-color .2s ease,
              color .2s ease;
}

.text-variants-card .edit-variant-btn{margin-bottom:1rem;}

.text-variants-card .variant-save-btn,
.text-variants-card .variant-cancel-btn{margin-top:1rem;}

/* optional: tidy icons if present */
.text-variants-card .edit-variant-btn svg,
.text-variants-card .variant-save-btn svg,
.text-variants-card .variant-cancel-btn svg,
.text-variants-card .edit-variant-btn img,
.text-variants-card .variant-save-btn img,
.text-variants-card .variant-cancel-btn img{
  width: 18px; height: 18px; flex: 0 0 auto;
}

/* Primary (use same violet→pink vibe as the app CTA) */
.text-variants-card .variant-save-btn{
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124,58,237,.25);
}
.text-variants-card .variant-save-btn:hover{ transform: translateY(-1px); }
.text-variants-card .variant-save-btn:active{ transform: translateY(0); }
.text-variants-card .variant-save-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,.35);
}

/* Ghost/outline (like “BACK”) */
.text-variants-card .variant-cancel-btn,
.text-variants-card .edit-variant-btn{
  background: transparent;
  color: var(--text-primary, #e5e7eb);
  border-color: rgba(124,58,237,.35);
}
.text-variants-card .variant-cancel-btn:hover,
.text-variants-card .edit-variant-btn:hover{
  background: rgba(124,58,237,.10);
  box-shadow: 0 8px 24px rgba(124,58,237,.12) inset;
}
.text-variants-card .variant-cancel-btn:focus-visible,
.text-variants-card .edit-variant-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,.35);
}

/* make “Editează” a touch smaller to feel link-like */
.text-variants-card .edit-variant-btn{
  padding: .375rem .75rem;
  font-size: .9rem;
}

/* Textareas only inside the text variants card */
.text-variants-card textarea{
  /* Allow vertical resizing for user control */
  resize: vertical;
  
  /* Proper sizing */
  width: 100%;
  min-height: 120px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  
  /* avoid horizontal bar so no corner shows */
  overflow-x: hidden;
  overflow-y: auto;

  /* nice thin scrollbar in Firefox */
  scrollbar-width: thin;
  scrollbar-color: #7c3aed transparent; /* thumb, track */
}

/* Chrome / Edge / Safari */
.text-variants-card textarea::-webkit-scrollbar{
  width: 10px;
}
.text-variants-card textarea::-webkit-scrollbar-track{
  background: transparent;
}
.text-variants-card textarea::-webkit-scrollbar-thumb{
  background: #7c3aed;
  border-radius: 9999px;
  border: 2px solid transparent;    /* creates a little gap */
  background-clip: padding-box;
}

/* Hide the arrow buttons and the bottom-right corner square */
.text-variants-card textarea::-webkit-scrollbar-button{
  height: 0; display: none;
}
.text-variants-card textarea::-webkit-scrollbar-corner{
  background: transparent;
}
/* In some browsers the resize grip is its own pseudo-element */
.text-variants-card textarea::-webkit-resizer{
  display: none;
}

/* ==================== RESULT CONTAINER ==================== */

.result-container {
    display: none;
}

.result-container.active {
    display: block;
}

.invitation-preview {
    text-align: center;
    margin: var(--space-8) 0;
}

.invitation-preview img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3xl);
}

/* ==================== PROCESSING OVERLAY ==================== */

.processing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-modal);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

.processing-overlay.active {
    display: flex;
}

.processing-card {
    text-align: center;
}

.processing-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(124, 58, 237, 0.3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-8);
}

.processing-text {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.processing-subtitle {
    color: var(--text-secondary);
}

/* ==================== TOAST NOTIFICATIONS ==================== */

.toast {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    transform: translateY(100px);
    opacity: 0;
    transition: all var(--transition-base);
    z-index: var(--z-notification);
    border: 1px solid var(--border-primary);
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.toast.error {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

/* ==================== SHARE OPTIONS ==================== */

.share-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.share-option {
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
}

.share-option:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: var(--primary);
}

.share-icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
}

.share-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ==================== SLIDESHOW ==================== */

.slideshow-section {
    margin: var(--space-12) auto;
    max-width: 1200px;
    padding: 0;
}

.slideshow-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.slideshow-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-2);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.slideshow-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin:auto;
    padding-bottom: var(--space-4);
}

.slideshow-arrow {
    animation: bounce 2s infinite;
    display: inline-block;
    margin-top: var(--space-2);
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 600px;  /* Taller container for desktop */
    overflow: hidden;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    padding: var(--space-4);  /* Add some padding */
}

.slideshow-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
    align-items: center;
}

.slideshow-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: var(--space-4);  /* For when we add 2 images */
}

.slideshow-slide img {
    width: auto;
    height: calc(100% - var(--space-4));  /* Fill height minus padding */
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
}

/* Desktop: Option for 2 images side by side */
@media (min-width: 1024px) {
    .slideshow-slide.double img {
        max-width: 48%;
        height: calc(100% - var(--space-6));
    }
}

.slideshow-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-3); /* was var(--space-2) */
    z-index: var(--z-10);
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-full);
    backdrop-filter: blur(6px);
}

.slideshow-dot {
    width: 14px;        /* was 10px */
    height: 14px;       /* was 10px */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}
.slideshow-dot:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.slideshow-arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(124, 58, 237, 0.8);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: var(--z-10);
}

.slideshow-arrow-btn:hover {
    background: var(--primary);
    transform: translateY(-50%) scale(1.1);
}
.slideshow-arrow-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.slideshow-arrow-btn.prev {
    left: 20px;
}

.slideshow-arrow-btn.next {
    right: 20px;
}

.slideshow-cta {
    text-align: center;
    margin-top: var(--space-8);
}

.slideshow-cta-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    padding-bottom: var(--space-4);
    margin:auto;
}

.slideshow-cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-10);
    background: var(--primary-gradient);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-primary);
    border: none;
    cursor: pointer;
}

.slideshow-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary-lg);
}

/* ==================== FOOTER ==================== */

.footer {
    margin-top: var(--space-20);
    padding: var(--space-12) 0 var(--space-8);
    background: linear-gradient(180deg, transparent 0%, rgba(124, 58, 237, 0.05) 100%);
    border-top: 1px solid var(--border-primary);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-12);
    align-items: start;
    margin-bottom: var(--space-8);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-logo {
    height: 40px;
    width: auto;
}

.footer-tagline {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 400px;
}

.footer-social {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-end;
}

.footer-social-title {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.social-links {
    display: flex;
    gap: var(--space-4);
}

.social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    text-decoration: none;
}

.social-link:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

.footer-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-8) 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.footer-links {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--primary);
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.footer-heart {
    color: var(--accent);
    animation: heartbeat 1.5s ease-in-out infinite;
}/* ========================================
   Utility Classes
   Single-purpose utility classes
   ======================================== */

/* ==================== DISPLAY ==================== */

.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* ==================== VISIBILITY ==================== */

.visible { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ==================== POSITION ==================== */

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ==================== FLEXBOX ==================== */

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* ==================== GRID ==================== */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==================== SPACING ==================== */

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ==================== SIZING ==================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }
.w-min { width: min-content; }
.w-max { width: max-content; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.h-min { height: min-content; }
.h-max { height: max-content; }

.max-w-xs { max-width: var(--container-xs); }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }
.max-w-2xl { max-width: var(--container-2xl); }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }

/* ==================== TYPOGRAPHY ==================== */

/* Font Size */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* Font Weight */
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Line Height */
.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* Letter Spacing */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

/* ==================== COLORS ==================== */

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-purple { color: var(--primary); }
.text-purple-light { color: var(--primary-light); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }

/* Background Colors */
.bg-dark { background: var(--bg-dark); }
.bg-card { background: var(--bg-card); }
.bg-transparent { background: transparent; }
.bg-primary { background: var(--primary); }
.bg-primary-gradient { background: var(--primary-gradient); }
.bg-success { background: var(--success); }
.bg-error { background: var(--error); }
.bg-warning { background: var(--warning); }

/* Border Colors */
.border-primary { border-color: var(--border-primary); }
.border-accent { border-color: var(--border-accent); }
.border-default { border-color: var(--border-default); }
.border-error { border-color: var(--border-error); }

/* ==================== BORDERS ==================== */

.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-none { border-style: none; }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ==================== SHADOWS ==================== */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-3xl { box-shadow: var(--shadow-3xl); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ==================== OVERFLOW ==================== */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* ==================== CURSOR ==================== */

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

/* ==================== USER SELECT ==================== */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ==================== TRANSITIONS ==================== */

.transition-none { transition: none; }
.transition-all { transition: all var(--transition-base); }
.transition-colors { transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); }
.transition-opacity { transition: opacity var(--transition-base); }
.transition-shadow { transition: box-shadow var(--transition-base); }
.transition-transform { transition: transform var(--transition-base); }

/* ==================== Z-INDEX ==================== */

.z-0 { z-index: var(--z-0); }
.z-10 { z-index: var(--z-10); }
.z-20 { z-index: var(--z-20); }
.z-30 { z-index: var(--z-30); }
.z-40 { z-index: var(--z-40); }
.z-50 { z-index: var(--z-50); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-modal { z-index: var(--z-modal); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-max { z-index: var(--z-max); }

/* ==================== HELPERS ==================== */
.voice-section h2{margin:0;}
.text-alternative textarea{margin-bottom:2rem!important;}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.break-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }/* ========================================
   UI/UX Improvements and Fixes
   Mobile-first with desktop enhancements
   ======================================== */

/* ==================== LANGUAGE SWITCHER IMPROVEMENTS ==================== */

.language-switcher {
    transition: transform var(--transition-base);
}

.language-trigger {
    transition: all var(--transition-base);
    min-width: 120px;
}

.language-trigger:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: var(--bg-card-hover);
    border-color: var(--primary);
}

/* Fix icon sizes in language switcher */
.language-trigger img:first-child {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
}

.language-trigger .flag-icon,
.current-lang img {
    width: 24px !important;
    height: 18px !important;
    object-fit: cover !important;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.language-trigger img:last-child {
    width: 16px !important;
    height: 16px !important;
    transition: transform var(--transition-base);
    opacity: 0.7;
}

.language-trigger:hover img:last-child {
    transform: rotate(180deg);
    opacity: 1;
}

/* ==================== SLIDESHOW IMPROVEMENTS ==================== */

/* Better navigation buttons */
.slideshow-nav {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: blur(10px);
    background: rgba(124, 58, 237, 0.85) !important;
}

.slideshow-nav:hover {
    background: var(--primary);
    box-shadow: var(--shadow-primary);
}

.slideshow-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.slideshow-nav img {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) invert(1) !important;
}

/* Better dots container */
.slideshow-dots {
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    gap: var(--space-3);
}

.slideshow-dot {
    width: 10px;
    height: 10px;
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.slideshow-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.3);
}

.slideshow-dot.active {
    width: 25px!important;
    background: var(--primary);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
}

/* ==================== SCROLL INDICATOR ==================== */

.scroll-indicator {
    font-size: var(--text-4xl) !important;
    opacity: 0.6;
    transition: opacity var(--transition-base);
    cursor: pointer;
}

.scroll-indicator:hover {
    opacity: 1;
    transform: translateY(4px);
}

/* ==================== MICROPHONE BUTTON ==================== */

@keyframes micShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-2deg); }
    75% { transform: translateX(2px) rotate(2deg); }
}

/* Better ripple effect */
.ripple {
    pointer-events: none;
}

.ripple.active {
    width: 180px;
    height: 180px;
    animation: rippleEffect 1.5s infinite;
}

/* Removed duplicate @keyframes rippleEffect - using the one from animations.css */

/* ==================== BUTTONS ==================== */

.btn {
    font-weight: var(--font-semibold);
    letter-spacing: 0.025em;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

/* ==================== CTA BUTTON FIX ==================== */

.cta-container button {
    font-size: var(--text-lg) !important;
    padding: var(--space-4) var(--space-8) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

.cta-container button img,
.cta-container button svg {
    display: none !important; /* Hide any accidental icon */
}

/* ==================== HOME BUTTON ==================== */
.home-button-fixed {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-fixed);
}

.home-button {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-base);
  font-size: var(--text-xs);
}

.home-button-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-primary);
  display: grid;
  place-items: center;
  transition: all var(--transition-base);
  backdrop-filter: blur(6px);
}

.home-button-text {
  margin-top: 0.25rem;
  letter-spacing: var(--tracking-wide);
}

/* Hover/focus states (keyboard friendly) */
.home-button:hover .home-button-icon,
.home-button:focus-visible .home-button-icon {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.home-button:hover,
.home-button:focus-visible {
  color: var(--text-primary);
}

/* ==================== FOOTER IMPROVEMENTS ==================== */

.footer-social {
    gap: var(--space-3);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(124, 58, 237, 0.1);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.footer-social a > svg,
.footer-social a > img,
.footer-social a > span {   /* whatever holds the icon */
  position: relative;
  z-index: 1;
  fill: currentColor;
}

.footer-social a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #ffffff;               /* fill with white on hover */
    transform: translate(-50%, -50%);
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
    z-index: -1;
    pointer-events: none;
}

.footer-social a:hover::before {
    width: 100%;
    height: 100%;
}

.footer-social a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.footer-social img {
    width: 22px !important;
    height: 22px !important;
    filter: brightness(0) invert(1) !important; /* white on dark */
    opacity: 0.9;
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
}

.footer-social a:hover img {
    filter: none !important;           /* dark icon on white */
    opacity: 1;
    transform: scale(1.06);
}

/* Fix footer logo */
.footer-brand img {
    width: auto !important;
    max-width: 150px !important;
    height: 40px !important;
    object-fit: contain !important;
}

/* ==================== TYPOGRAPHY IMPROVEMENTS ==================== */

h2 {
    font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

p {
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* ==================== CARD IMPROVEMENTS ==================== */

.main-card {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(124, 58, 237, 0.1);
    position: relative;
    overflow: hidden;
}

.main-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--primary-gradient);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transition-slow);
    z-index: -1;
}

.main-card:hover::before {
    opacity: 0.1;
}

/* ==================== TOAST IMPROVEMENTS ==================== */

.toast {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    font-weight: var(--font-medium);
    animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==================== FORM IMPROVEMENTS ==================== */

.text-input {
    transition: all var(--transition-base);
    font-size: var(--text-base);
}

.text-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    background: rgba(124, 58, 237, 0.02);
}

.text-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.7;
}

/* ==================== MODAL IMPROVEMENTS ==================== */

.modal {
    backdrop-filter: blur(10px);
}

.modal-content {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(124, 58, 237, 0.2);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translate(-50%, -45%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* ==================== DESKTOP ENHANCEMENTS ==================== */

   
@media (min-width: 768px) {
    /* Larger touch targets on desktop */
    
    /* Better hover effects on desktop */
    .main-card {
        transition: transform var(--transition-base);
    }
    
    .main-card:hover {
        transform: translateY(-4px);
    }
    
}

@media (min-width: 1024px) {
    /* Even larger elements on big screens */
    
    .slideshow-container {
        height: 650px;  /* Even taller on large screens */
    }
    
    /* Better spacing on large screens */
    .main-card {
        padding: var(--space-12);
    }
    
    .footer-content {
        padding: var(--space-16) var(--space-8);
    }
}

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

/* Removed duplicate @keyframes fadeIn - using the one from animations.css */

/* Performance hints for frequently animated elements */
.slideshow-track,
.processing-spinner,
.main-card::before {
  will-change: transform;
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations to elements on load */
.header {
    animation: fadeIn 0.6s ease-out;
}

.main-card {
    animation: slideIn 0.8s ease-out;
}

.slideshow-hero {
    animation: fadeIn 1s ease-out;
}

/* ==================== ACCESSIBILITY ==================== */

/* Better focus states */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

button:focus-visible {
    outline-offset: 6px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .main-card {
        border: 2px solid var(--text-primary);
    }
    
    .text-input {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Explicitly stop infinite animations for motion safety */
    .ripple,
    .processing-spinner,
    .animate-bounce,
    .animate-pulse,
    .animate-shimmer {
        animation: none !important;
    }
}

/* ==================== CSS FIXING 2 IMPROVEMENTS ==================== */

/* Stop always-on shimmer - make it on-demand */
.main-card::before {
  animation: none; /* override current animation */
}

/* Bring shimmer back only when the card is interacted with */
@media (hover: hover) and (pointer: fine) {
  .main-card:hover::before {
    animation: shimmer 2s ease-in-out infinite;
  }
}

/* Stronger, consistent focus rings on slideshow controls */
.slideshow-arrow-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  box-shadow: var(--shadow-primary);
}

/* Performance boost for below-the-fold sections */
.slideshow-section,
.footer,
.result-container {
  content-visibility: auto;
  contain-intrinsic-size: 700px; /* reserves space to prevent jumps */
}

/* Keep slideshow images from "breathing" */
.slideshow-slide img {
  aspect-ratio: 16 / 9;  /* or 4/5 if your artwork is portraitish */
  object-fit: contain;
}

/* ==== Steps Indicator: responsive sizing & spacing ==== */
:root {
  --step-size: 48px; /* Fixed size for perfect circles */
  --step-gap: clamp(20px, 6vw, 96px);
  --step-padding-x: clamp(8px, 2vw, 24px);
}

.steps {
  /* becomes fluid inside your container */
  display: flex;                /* JS will toggle visibility as before */
  justify-content: space-between;
  align-items: center;
  gap: var(--step-gap);
  width: min(100%, 1040px);
  margin: var(--space-12) auto;
  padding-inline: var(--step-padding-x);
  position: relative;
  max-width: none;              /* remove the 500px cap */
}

.steps::before {
  content: "";
  position: absolute;
  top: calc(var(--step-size) / 2);
  /* line stops at the center of the first/last circles */
  left: calc(var(--step-padding-x) + var(--step-size) / 2);
  right: calc(var(--step-padding-x) + var(--step-size) / 2);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(124, 58, 237, 0.2) 0%,
    rgba(124, 58, 237, 0.3) 50%,
    rgba(124, 58, 237, 0.2) 100%);
  z-index: 0;
}

.step {
  min-width: 0;                 /* drop the 100px min to avoid forced spacing */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.step-icon {
  width: var(--step-size);
  height: var(--step-size);
  min-width: var(--step-size); /* Force square aspect */
  min-height: var(--step-size); /* Force square aspect */
  border-radius: 50%;
  border-width: 2px;
  font-size: 1rem;
  backdrop-filter: blur(10px);
  flex-shrink: 0; /* Prevent squishing */
}

.step.active .step-icon {
  /* keep the glow, drop heavy scale so type stays proportional */
  transform: none;
  box-shadow:
    0 8px 24px rgba(124, 58, 237, 0.45),
    0 0 0 8px rgba(124, 58, 237, 0.10);
}

/* ==== Info note (restored) ==== */
.info-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-primary);
  background: linear-gradient(90deg, rgba(124,58,237,.10), rgba(236,72,153,.10));
  color: var(--text-primary);
}

.info-note--primary {
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 4px 24px rgba(124,58,237,.12) inset;
}

.info-note__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  opacity: .9;
}

.info-note__text {
  margin: 0;
  line-height: 1.4;
  flex: 1 1 auto;   /* ia tot spațiul disponibil pe desktop */
  min-width: 0;
}
.info-note__text strong { color: var(--text-primary); }

/* ——— Mobile: icon SUS, text 100% lățime ——— */
@media (max-width: 768px) {
  .info-note {
    flex-direction: column;      /* icon deasupra */
    align-items: flex-center;     /* aliniat la stânga */
  }
  .info-note__text {
    width: 100%;                 /* text pe toată lățimea */
    text-align:center;
    }
  .info-note__icon {height:30px;}
}

/* If you want to re-use your existing field notes area as an info-note: */
.field-notes { margin-top: var(--space-8); }
.field-notes .field-required-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-primary);
  background: rgba(124,58,237,.08);
}

/* ==== Theme select and field layout improvements ==== */
/* Make selects render like text inputs and fill column width */
.fields-grid select.field-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.25;
  padding-right: 2.5rem; /* room for caret */
}
.fields-grid select.field-input::-ms-expand { display: none; }

/* Draw a custom caret for any select that sits inside a .field-item */
.field-item { position: relative; }
.field-item:has(select.field-input)::after {
  content: "▾";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .7;
}

/* Desktop layout: place theme select + custom theme side by side */
@media (min-width: 1024px) {
  .fields-grid {
    grid-template-columns: repeat(3, minmax(300px, 1fr)); /* keeps widths consistent */
    grid-auto-flow: dense;                                /* allow compaction */
  }

  /* Try the most common IDs/names used in your app */
  #field_theme_select,
  #fieldThemeSelect,
  [name="themeSelect"]    { grid-column: 1 / span 1; }

  #field_theme,
  #fieldTheme,
  [name="theme"]          { grid-column: 2 / span 1; }

  /* Phone goes to its own row (full width), so the two theme fields sit above it */
  #field_phone,
  #fieldPhone,
  input[type="tel"]       { grid-column: 1 / -1; }

  /* Notes centered in the middle column — switch to 1 / -1 if you prefer full width */
  #field_notes,
  #fieldNotes,
  textarea[name*="note" i] { grid-column: 2 / span 1; }
  
  /* Steps: better desktop proportions */
  .steps { width: min(100%, 980px); }
}

/* Signup Benefits Modal */
.signup-benefits-modal {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(20px);
  padding: 20px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease-out;
}

.signup-benefits-modal.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.signup-benefits-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 48px;
  max-width: 600px;
  width: 90%;
  margin: auto;
  animation: slideUp 0.4s ease-out;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: rotate(90deg);
}

.signup-benefits-title {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #c084fc 0%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 12px;
  font-family: 'Space Grotesk', sans-serif;
}

.signup-benefits-subtitle {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 32px;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.benefit-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(192, 132, 252, 0.3);
  transform: translateY(-2px);
}

.benefit-icon {
  font-size: 1.2rem;
  font-weight: 600;
  color: #f472b6;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.benefit-text {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.signup-benefits-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.btn-large {
  padding: 16px 32px;
  font-size: 1.1rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.already-have-account {
  margin-top: 8px;
  text-align: center;
}

.signin-link {
  color: #c084fc;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.signin-link:hover {
  color: #f472b6;
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .signup-benefits-card {
    padding: 32px 24px;
    width: 95%;
  }
  
  .signup-benefits-title {
    font-size: 1.5rem;
  }
  
  .signup-benefits-subtitle {
    font-size: 1rem;
  }
  
  .benefit-item {
    padding: 16px;
  }
  
  .benefit-icon {
    font-size: 1.1rem;
  }
  
  .benefit-text {
    font-size: 0.95rem;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}