/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}



/* Navigation */
.nav-link {
    @apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200;
}

.nav-link.mobile {
    @apply block px-3 py-2 text-base;
}

/* Language Toggle Button */
#languageToggle {
    @apply inline-flex items-center px-3 py-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg transition-all duration-300 cursor-pointer;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    min-width: 80px;
    justify-content: center;
    position: absolute;
    top: 24px;
    right: 24px;
}

/* Language Toggle for Light Navigation */
nav.bg-white\/95 #languageToggle,
nav[class*="bg-white"] #languageToggle {
    @apply bg-gray-100 hover:bg-gray-200 border-gray-300;
    text-shadow: none;
}

nav.bg-white\/95 #languageToggle .current-lang,
nav[class*="bg-white"] #languageToggle .current-lang {
    color: #FF6A00;
}

nav.bg-white\/95 #languageToggle .divider,
nav[class*="bg-white"] #languageToggle .divider {
    color: #FF6A00;
}

nav.bg-white\/95 #languageToggle .next-lang,
nav[class*="bg-white"] #languageToggle .next-lang {
    color: #6B7280;
}

#languageToggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.15);
}

#languageToggle .current-lang {
    @apply font-semibold;
    color: #FF6A00;
}

#languageToggle .divider {
    @apply mx-2 opacity-60;
    color: #FF6A00;
}

#languageToggle .next-lang {
    @apply opacity-75 hover:opacity-100 transition-opacity duration-200;
    color: white;
}

/* Mobile language toggle */
@media (max-width: 768px) {
    #languageToggle {
        @apply text-sm px-2 py-1 relative top-0 right-0;
        min-width: 70px;
        position: static;
        margin-left: auto;
    }
    
    #languageToggleMobile {
        @apply block w-full text-left bg-black/30 hover:bg-black/50 border-white/20 text-center;
        margin-top: 8px;
        position: static;
        color: #FF6A00;
    }
    
    #languageToggleMobile .current-lang {
        @apply font-semibold;
        color: #FF6A00;
    }

    #languageToggleMobile .divider {
        @apply mx-2 opacity-60;
        color: #FF6A00;
    }

    #languageToggleMobile .next-lang {
        @apply opacity-75 hover:opacity-100 transition-opacity duration-200;
        color: white;
    }
}

/* Hero Section */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-bg {
    /* Default: Desktop image */
    background-image: url('/static/images/NL_wallpaper_desktop.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Tablet optimization (768px and below) */
@media (max-width: 768px) {
    .hero-bg {
        /* Switch to mobile-optimized image */
        background-image: url('/static/images/NL_wallpaper_phone.jpg');
        background-attachment: scroll;
        background-position: center center;
        background-size: cover;
    }
}

/* Extra small mobile devices (480px and below) */
@media (max-width: 480px) {
    .hero-bg {
        background-image: url('/static/images/NL_wallpaper_phone.jpg');
        background-position: center top;
        background-size: cover;
    }
}

/* Parallax Background */
.parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120vh; /* Extend beyond viewport */
    background: url('/static/images/NL_wallpaper_desktop.png') center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -2;
    will-change: transform;
}

/* Responsive parallax background for mobile */
@media (max-width: 768px) {
    .parallax-bg {
        background: url('/static/images/NL_wallpaper_phone.jpg') center center;
    }
}

/* Parallax Overlay */
.parallax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120vh;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.8) 0%, rgba(0, 61, 165, 0.8) 100%);
    z-index: -1;
    will-change: transform;
}

.hero-title {
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: 1.1;
}

.text-gradient {
    background: linear-gradient(135deg, #FF6600, #003DA5, #FFFFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.cta-button {
    @apply inline-flex items-center px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-xl;
}

.secondary-button {
    @apply inline-flex items-center px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-full transition-all duration-300 hover:bg-white hover:text-primary-600;
}

/* Sections */
.section-title {
    opacity: 0;
    transform: translateY(30px);
}

/* Portfolio Section */
.portfolio-card {
    @apply bg-white dark:bg-gray-900 rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-100 dark:border-gray-800;
    opacity: 0;
    transform: translateY(50px);
}

.portfolio-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dark .portfolio-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

.card-header {
    @apply relative h-40 overflow-hidden;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.1) 0%, rgba(0, 61, 165, 0.1) 100%);
}

.card-header-content {
    @apply h-full flex flex-col items-center justify-center p-6 text-center;
}

.card-title-large {
    @apply text-2xl font-bold text-gray-800 dark:text-white mb-2;
}

.card-category {
    @apply inline-block px-3 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 text-sm font-medium rounded-full;
}

.card-content {
    @apply p-6 space-y-4;
}

.card-description {
    @apply text-gray-600 dark:text-gray-300 text-sm leading-relaxed;
}

.tech-stack {
    @apply flex flex-wrap gap-2;
}

.tech-tag {
    @apply px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs font-medium rounded border;
}

.card-actions {
    @apply flex gap-3 pt-4 border-t border-gray-100 dark:border-gray-800;
}

.card-button {
    @apply inline-flex items-center justify-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium rounded-lg transition-all duration-200 hover:shadow-md flex-1;
}

.card-button-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 bg-transparent border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg transition-all duration-200 flex-1;
}

.card-button:hover,
.card-button-secondary:hover {
    transform: translateY(-1px);
}

/* Special category styling */
.portfolio-card[data-category="ai"] .card-header {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(219, 39, 119, 0.1) 100%);
}

.portfolio-card[data-category="ai"] .card-category {
    @apply bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300;
}

.portfolio-card[data-category="business"] .card-header {
    background: linear-gradient(135deg, rgba(0, 61, 165, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.portfolio-card[data-category="business"] .card-category {
    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300;
}

/* Modern Pricing Cards */
.pricing-card {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    transition: all 0.2s ease-out;
    border: 1px solid transparent;
}

.pricing-card:hover {
    border-color: #ff8200;
    transform: scale(1.03);
}

.pricing-card:focus-within {
    border-color: #ff8200;
    transform: scale(1.03);
}

/* Premium card highlighting */
.pricing-card-premium {
    border: 2px solid #ff8200;
}

.pricing-card-premium:hover {
    border-color: #ff8200;
    transform: scale(1.03);
}

/* Popular ribbon for Premium card */
.pricing-ribbon {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff8200;
    color: white;
    padding: 4px 16px;
    border-radius: 0 0 8px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    z-index: 10;
}

.pricing-card-inner {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.pricing-icon {
    width: 3rem;
    height: 3rem;
    color: #0057b8;
    transition: color 0.2s ease-out;
}

.pricing-card:hover .pricing-icon,
.pricing-card:focus-within .pricing-icon {
    color: #ff8200;
}

.pricing-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    color: #1f2937;
}

.pricing-price {
    font-size: 2.25rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem;
    color: #1f2937;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}

.pricing-feature {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    text-align: left;
}

.pricing-check {
    width: 1.25rem;
    height: 1.25rem;
    color: #10b981;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.pricing-cta {
    width: 100%;
    height: 48px;
    background: #0057b8;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
    margin-top: auto;
}

.pricing-cta:hover {
    background: #ff8200;
}

.pricing-cta:active {
    background: #d66f00;
    transition: background 0.15s ease-out;
}

.pricing-cta:focus-visible {
    outline: 2px solid #ff8200;
    outline-offset: 2px;
}

.pricing-card:hover .pricing-cta,
.pricing-card:focus-within .pricing-cta {
    background: #ff8200;
}

.pricing-card:hover .pricing-cta:active,
.pricing-card:focus-within .pricing-cta:active {
    background: #d66f00;
}

/* Responsive Design */
@media (max-width: 1023px) {
    .pricing-card {
        max-width: none;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    #pricing .flex {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    
    .pricing-card {
        flex: 1;
        margin: 0;
    }
}

/* Pricing card adjustments for monthly cost */
.pricing-card-inner .text-center.text-gray-500 {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.pricing-card-inner .text-center.text-sm {
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
}

/* Ribbon adjustments */
.pricing-ribbon {
    font-size: 0.75rem;
    padding: 6px 20px;
    border-radius: 0 0 12px 12px;
}

/* Dark mode support if needed */
.dark .pricing-card {
    background: #1f2937;
    border-color: #374151;
}

.dark .pricing-title,
.dark .pricing-price {
    color: #f9fafb;
}

.dark .pricing-feature span {
    color: #d1d5db;
}

/* ===== MODAL STYLES ===== */
.payment-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-200;
}

.payment-input:focus {
    @apply ring-2 ring-orange-500 border-transparent;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.form-error {
    @apply text-red-500 text-xs mt-1 hidden;
}

.form-error.show {
    @apply block;
}

.submit-loader {
    @apply inline-flex items-center;
}

/* ===== SPOTS COUNTER ANIMATION ===== */
#spots-counter {
    animation: pulse-subtle 2s infinite;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ===== TRUST SIGNALS ===== */
.trust-signal {
    @apply transition-all duration-200;
}

.trust-signal:hover {
    @apply text-orange-600 dark:text-orange-400;
    transform: translateY(-1px);
}

/* ===== MODAL BACKDROP ===== */
#payment-modal, #success-modal {
    backdrop-filter: blur(5px);
}

/* ===== QR CODE HOVER ===== */
.qr-code-container:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* ===== COPY BUTTON ANIMATION ===== */
.copy-success {
    @apply text-green-600;
    animation: copy-flash 0.5s ease;
}

@keyframes copy-flash {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Filter Buttons */
.filter-btn {
    @apply px-4 py-2 text-sm font-medium rounded-md transition-all duration-200;
}

.filter-btn.active {
    @apply bg-primary-600 text-white shadow-md;
}

.filter-btn:not(.active) {
    @apply text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-600;
}

/* About Section */
.about-content {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.skill-item {
    @apply mb-6;
}

.skill-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden;
}

.skill-progress {
    @apply h-full bg-gradient-to-r from-orange-500 to-orange-600 rounded-full transition-all duration-1000 ease-out;
    width: 0%;
}

/* ================== SOPHISTICATED TIMELINE ================== */

:root {
  --accent: #FF6600;        /* orange dots / line */
  --line-width: 4px;
}

.timeline {
  position: relative;
  margin-inline: auto;
  padding-inline-start: 3rem;          /* room for the line & dots */
  max-width: 48rem;
}

/* vertical line */
.timeline::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 1rem;
  width: var(--line-width);
  background: var(--accent);
}

/* each event block */
.timeline__item {
  position: relative;
  margin-block: 2.5rem;
  opacity: 0;                          /* start hidden for scroll-in */
  transform: translateY(40px);
  transition: all .6s ease-out;
}

/* the orange dot - REMOVED by user request */
.timeline__item::before {
  display: none;
}

/* text */
.timeline__year   { 
  font: 700 1.25rem/1 var(--font, sans-serif); 
  color: var(--accent); 
  margin-bottom: 0.5rem;
}

.timeline__content { 
  margin-block-start: .25rem; 
}

.timeline__content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.timeline__content p {
  color: #6b7280;
  line-height: 1.6;
}

/* Reveal animation */
.timeline__item.is-visible {
  opacity: 1;
  transform: none;
}

/* Motion preference support */
@media (prefers-reduced-motion: reduce) {
  .timeline__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ───────── RESPONSIVE: alternate left ↔ right on wide screens ───────── */
@media (min-width: 50rem) {
  .timeline { 
    padding-inline: 0; 
    max-width: 60rem;
  }     /* center the line */
  
  .timeline::before { 
    left: 50%; 
    transform: translateX(-50%);
  }     /* move line to middle */

  .timeline__item {
    width: 50%;
    padding-inline: 2.5rem;
  }
  
  .timeline__item:nth-child(even) {    /* right side */
    margin-left: 50%;
    text-align: left;
  }
  
  .timeline__item:nth-child(odd) {     /* left side */
    text-align: right;
  }
  
  .timeline__item::before {            /* reposition the dots */
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Hover effects */
.timeline__item:hover::before {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px white, 0 0 0 12px rgba(255, 102, 0, 0.3);
}

@media (min-width: 50rem) {
  .timeline__item:hover::before {
    transform: translateX(-50%) scale(1.1);
  }
}

/* Color-blind friendly enhancement */
.timeline__item:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Legacy timeline classes - keeping for compatibility */
.timeline-container {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.timeline-item {
    @apply relative mb-8 cursor-pointer;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.timeline-marker {
    @apply absolute -left-2 top-1 w-4 h-4 bg-orange-600 rounded-full border-4 border-white dark:border-gray-900 transition-all duration-200;
}

.timeline-content {
    @apply bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-md ml-6 transition-all duration-200;
}

.timeline-description {
    @apply text-sm text-gray-600 dark:text-gray-400 mt-2;
    display: block;
}

/* Modern Form Styles */
.form-section {
    @apply bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-300;
}

.section-header {
    @apply px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200 flex items-center gap-3;
}

.section-icon {
    @apply w-10 h-10 rounded-lg bg-[#FF6A00] flex items-center justify-center text-white shadow-sm;
}

.section-title {
    @apply text-lg font-semibold text-gray-900;
}

.form-section .grid {
    @apply p-6;
}

.form-section .space-y-6 {
    @apply p-6;
}

.order-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF6A00] focus:border-transparent transition-all duration-200 bg-white hover:border-gray-400;
}

.order-input:focus {
    @apply shadow-lg ring-[#FF6A00]/20;
}

.order-input::placeholder {
    @apply text-gray-500;
}

/* Modern Checkbox */
.modern-checkbox-label {
    @apply flex items-start gap-3 cursor-pointer p-4 rounded-lg border border-gray-200 hover:border-[#FF6A00] hover:bg-[#FF6A00]/5 transition-all duration-200;
}

.modern-checkbox {
    @apply sr-only;
}

.checkbox-indicator {
    @apply relative w-5 h-5 rounded border-2 border-gray-300 bg-white transition-all duration-200 flex-shrink-0 mt-0.5;
}

.modern-checkbox:checked + .checkbox-indicator {
    @apply border-[#FF6A00] bg-[#FF6A00];
}

.check-icon {
    @apply w-3 h-3 text-white opacity-0 transition-opacity duration-200;
}

.modern-checkbox:checked + .checkbox-indicator .check-icon {
    @apply opacity-100;
}

.checkbox-text {
    @apply text-sm text-gray-700 leading-relaxed;
}

.modern-checkbox:checked + .checkbox-indicator + .checkbox-text {
    @apply text-gray-900;
}

.consent-section {
    @apply p-6;
}

/* Modern Color Picker */
.modern-color-picker {
    @apply bg-gradient-to-br from-gray-50 to-gray-100 border border-gray-200 rounded-xl p-6 space-y-5;
}

.color-picker-header {
    @apply text-center;
}

.color-picker-title {
    @apply text-lg font-semibold text-gray-900 mb-1;
}

.color-picker-subtitle {
    @apply text-sm text-gray-600;
}

.color-selection-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.color-section {
    @apply space-y-2;
}

.color-label {
    @apply text-sm font-medium text-gray-700;
}

.color-input-group {
    @apply flex items-center gap-3 bg-white rounded-lg p-3 border border-gray-200 hover:border-[#FF6A00] transition-colors duration-200;
}

.color-preview {
    @apply w-12 h-12 rounded-lg border-2 border-white shadow-lg cursor-pointer transition-transform duration-200 hover:scale-105 relative overflow-hidden;
}

.color-preview::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black/10;
}

.hidden-color-input {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.color-hex-input {
    @apply flex-1 bg-transparent border-none outline-none text-sm font-mono text-gray-700 placeholder-gray-400;
}

.color-hex-input:focus {
    @apply text-gray-900;
}

/* Color Presets */
.color-presets {
    @apply space-y-3;
}

.presets-title {
    @apply text-sm font-medium text-gray-700 text-center;
}

.preset-grid {
    @apply grid grid-cols-3 md:grid-cols-6 gap-2;
}

.color-preset {
    @apply flex rounded-lg overflow-hidden border border-gray-200 hover:border-[#FF6A00] transition-all duration-200 hover:scale-105 h-10 focus:outline-none focus:ring-2 focus:ring-[#FF6A00] focus:ring-offset-2;
}

.preset-color {
    @apply flex-1 transition-all duration-200;
}

.color-preset:hover .preset-color {
    @apply shadow-inner;
}

/* Color Tips */
.color-tips {
    @apply flex items-start gap-3 bg-blue-50 border border-blue-200 rounded-lg p-4;
}

.tip-icon {
    @apply w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5;
}

.tip-text {
    @apply text-sm text-blue-800 leading-relaxed;
}

/* Legacy Form Styles (for compatibility) */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeInUp 0.3s ease-out;
}

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

.form-group {
    @apply mb-6;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}

.form-input {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-800 dark:text-white transition-all duration-200;
}

.form-input:focus {
    @apply shadow-lg;
}

.form-error {
    @apply mt-2 text-sm text-red-600 dark:text-red-400 hidden;
}

.form-error.show {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Radio and Checkbox Styles */
.radio-group,
.checkbox-grid {
    @apply space-y-3;
}

.checkbox-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-3;
}

.radio-label,
.checkbox-label {
    @apply flex items-center cursor-pointer p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200;
}

.radio-label:has(input:checked),
.checkbox-label:has(input:checked) {
    @apply bg-primary-50 dark:bg-primary-900/20 border-primary-500;
}

.radio-input,
.checkbox-input {
    @apply sr-only;
}

.radio-custom {
    @apply w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3 relative flex-shrink-0;
}

.radio-input:checked + .radio-custom {
    @apply border-primary-500;
}

.radio-input:checked + .radio-custom::after {
    content: '';
    @apply absolute inset-1 rounded-full bg-primary-500;
}

.checkbox-custom {
    @apply w-5 h-5 rounded border-2 border-gray-300 dark:border-gray-600 mr-3 relative flex-shrink-0;
}

.checkbox-input:checked + .checkbox-custom {
    @apply border-primary-500 bg-primary-500;
}

.checkbox-input:checked + .checkbox-custom::after {
    content: '✓';
    @apply absolute inset-0 flex items-center justify-center text-white text-xs font-bold;
}

/* Modern File Upload Components */
.modern-upload-container {
    @apply bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300;
}

.upload-header {
    @apply px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between;
}

.modern-upload-area {
    @apply p-6;
}

.upload-zone {
    @apply relative rounded-lg border-2 border-dashed transition-all duration-300 cursor-pointer;
    min-height: 120px;
}

.upload-zone[data-upload-state="empty"] {
    @apply border-gray-300 hover:border-[#FF6A00] hover:bg-[#FF6A00]/5;
}

.upload-zone[data-upload-state="drag-over"] {
    @apply border-[#FF6A00] bg-[#FF6A00]/10 scale-[1.02];
}

.upload-zone[data-upload-state="success"] {
    @apply border-green-300 bg-green-50;
}

.upload-empty-state {
    @apply flex flex-col items-center justify-center h-full py-8 px-4;
}

.upload-icon-container {
    @apply mb-3 p-2 rounded-full bg-gray-100 transition-colors duration-300;
}

.upload-zone:hover .upload-icon-container {
    @apply bg-[#FF6A00]/10;
}

.upload-icon {
    @apply w-5 h-5 text-gray-400 transition-colors duration-300;
}

.upload-zone:hover .upload-icon {
    @apply text-[#FF6A00];
}

.upload-text {
    @apply text-center;
}

.upload-primary-text {
    @apply text-sm font-medium text-gray-900 mb-1;
}

.upload-secondary-text {
    @apply text-xs text-gray-500;
}

.upload-success-state {
    @apply p-4;
}

.success-icon-container {
    @apply w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0;
}

.remove-file-btn {
    @apply w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-500 hover:text-red-700 transition-colors duration-200;
}

.photo-grid {
    @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mb-4;
}

.photo-preview {
    @apply relative group rounded-lg overflow-hidden bg-gray-100 aspect-square;
}

.photo-preview img {
    @apply w-full h-full object-cover;
}

.photo-preview-overlay {
    @apply absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center;
}

.photo-remove-btn {
    @apply w-8 h-8 rounded-full bg-red-500 hover:bg-red-600 flex items-center justify-center text-white transition-colors duration-200;
}

.add-more-photos-btn {
    @apply w-full py-3 px-4 border-2 border-dashed border-gray-300 hover:border-[#FF6A00] rounded-lg flex items-center justify-center gap-2 text-gray-600 hover:text-[#FF6A00] transition-colors duration-200;
}

.photo-counter {
    @apply px-2 py-1 bg-[#FF6A00]/10 rounded-full;
}

.hidden-file-input {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10;
}

/* Legacy File Upload (for compatibility) */
.file-upload-area {
    @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-center hover:border-primary-500 dark:hover:border-primary-400 transition-colors duration-200 cursor-pointer;
    padding: 1rem; /* compact */
    min-height: 96px;
}

.file-upload-area.drag-over {
    @apply border-primary-500 bg-primary-50 dark:bg-primary-900/20;
}

.file-input {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.file-upload-icon {
    @apply mx-auto text-gray-400 dark:text-gray-500;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: .5rem;
}

.file-upload-text {
    @apply text-gray-600 dark:text-gray-400 font-medium;
    font-size: .875rem;
}

.file-upload-subtext {
    @apply text-gray-500 dark:text-gray-500 mt-1;
    font-size: .75rem;
}

/* Selected style cards highlight */
.qs-style-card[data-selected="true"],
.fb-style-card[data-selected="true"] {
    border-color: #FF6A00 !important;
    box-shadow: 0 0 0 2px rgba(255,106,0,0.9);
}

/* Character Count */
.character-count {
    @apply text-sm text-gray-500 dark:text-gray-400 mt-1 text-right;
}

/* Add Button */
.add-button {
    @apply mt-3 text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium text-sm transition-colors duration-200;
}

/* Navigation Buttons */
.prev-button,
.next-button,
.submit-button {
    @apply inline-flex items-center px-6 py-3 font-medium rounded-lg transition-all duration-200;
}

.prev-button {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600;
}

.next-button {
    @apply bg-primary-600 hover:bg-primary-700 text-white shadow-lg hover:shadow-xl transform hover:scale-105;
}

.submit-button {
    @apply bg-green-600 hover:bg-green-700 text-white shadow-lg hover:shadow-xl transform hover:scale-105;
}

.submit-button:disabled {
    @apply opacity-50 cursor-not-allowed transform-none hover:shadow-lg;
}

/* Success Message */
.success-icon {
    animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* ===== SECTION BACKGROUNDS ===== */
/* Ensure all sections have solid backgrounds over parallax */
#portfolio,
#about,
#pricing,
#contact {
    position: relative;
    background-color: rgb(249 250 251); /* bg-gray-50 */
    z-index: 1;
}

.dark #portfolio,
.dark #about,
.dark #pricing,
.dark #contact {
    background-color: rgb(31 41 55); /* dark:bg-gray-800 */
}

/* Alternate section backgrounds */
#about,
#contact {
    background-color: white;
}

.dark #about,
.dark #contact {
    background-color: rgb(17 24 39); /* dark:bg-gray-900 */
}

/* Mobile Form Optimizations */
@media (max-width: 768px) {
    /* Form sections mobile */
    .form-section {
        @apply mx-2 rounded-lg;
    }
    
    .section-header {
        @apply px-4 py-3 flex-col items-start gap-2;
    }
    
    .section-icon {
        @apply w-8 h-8;
    }
    
    .section-title {
        @apply text-base font-medium;
    }
    
    .form-section .grid {
        @apply p-4 gap-3;
    }
    
    .form-section .space-y-6 {
        @apply p-4 space-y-4;
    }
    
    /* Modern upload mobile */
    .modern-upload-container {
        @apply rounded-lg;
    }
    
    .upload-header {
        @apply px-4 py-3 flex-col items-start gap-2;
    }
    
    .modern-upload-area {
        @apply p-4;
    }
    
    .upload-zone {
        min-height: 100px;
    }
    
    .upload-empty-state {
        @apply py-6 px-3;
    }
    
    .upload-icon-container {
        @apply mb-3 p-2;
    }
    
    .upload-icon {
        @apply w-5 h-5;
    }
    
    .upload-primary-text {
        @apply text-sm;
    }
    
    .upload-secondary-text {
        @apply text-xs;
    }
    
    /* Photo grid mobile */
    .photo-grid {
        @apply grid-cols-2 gap-2;
    }
    
    .photo-preview {
        @apply rounded-md;
    }
    
    .add-more-photos-btn {
        @apply py-2 px-3 text-sm;
    }
    
    /* Checkbox mobile */
    .modern-checkbox-label {
        @apply p-3 text-sm;
    }
    
    .checkbox-indicator {
        @apply w-4 h-4;
    }
    
    .check-icon {
        @apply w-2.5 h-2.5;
    }
    
    .checkbox-text {
        @apply text-xs;
    }
    
    /* Input mobile */
    .order-input {
        @apply px-3 py-2 text-base; /* Prevent zoom on iOS */
    }
    
    /* Toast mobile */
    .fixed.top-4.right-4 {
        @apply top-2 right-2 left-2 w-auto;
    }
    
    /* Color picker mobile */
    .modern-color-picker {
        @apply p-4 space-y-4;
    }
    
    .color-picker-title {
        @apply text-base;
    }
    
    .color-picker-subtitle {
        @apply text-xs;
    }
    
    .color-selection-grid {
        @apply grid-cols-1 gap-3;
    }
    
    .color-input-group {
        @apply p-2;
    }
    
    .color-preview {
        @apply w-10 h-10;
    }
    
    .color-hex-input {
        @apply text-xs;
    }
    
    .preset-grid {
        @apply grid-cols-2 gap-2;
    }
    
    .color-preset {
        @apply h-8;
    }
    
    .color-tips {
        @apply p-3;
    }
    
    .tip-text {
        @apply text-xs;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    .secondary-button {
        @apply mt-4 ml-0;
    }
    
    .checkbox-grid {
        @apply grid-cols-1;
    }
    
    /* Portfolio cards mobile adjustments */
    .portfolio-card {
        @apply mx-4;
    }
    
    .card-header {
        @apply h-32;
    }
    
    .card-title-large {
        @apply text-xl;
    }
    
    .card-content {
        @apply p-4 space-y-3;
    }
    
    .card-actions {
        @apply flex-col gap-2;
    }
    
    .card-button,
    .card-button-secondary {
        @apply w-full;
    }
    
    .tech-stack {
        @apply gap-1;
    }
    
    .tech-tag {
        @apply text-xs px-2 py-1;
    }

    /* Pricing section mobile */
    .pricing-card {
        transform: none !important;
        margin-bottom: 2rem;
    }
    
    .pricing-card:hover {
        transform: translateY(-2px) !important;
    }
    
    .featured-badge {
        @apply text-xs px-2 py-1;
    }
    
    .price-display {
        @apply flex-col items-center;
    }
    
    .pricing-features {
        @apply mb-6;
    }
    
    .pricing-features ul {
        @apply space-y-2;
    }
    
    .pricing-features li {
        @apply text-sm;
    }
    
    .pricing-cta {
        @apply py-3 px-4 text-sm;
    }
    
    /* Modal mobile adjustments */
    .payment-input {
        @apply text-base; /* Prevent zoom on iOS */
    }
    
    #payment-modal .inline-block,
    #success-modal .inline-block {
        @apply w-full mx-4 max-w-sm;
    }

    /* Parallax mobile optimization */
    .parallax-bg,
    .parallax-overlay {
        height: 100vh; /* Reduce height on mobile for performance */
    }
}

/* Dark Mode Transitions */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Scroll Animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-animate.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Three.js Canvas */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Glassmorphism Effects */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Focus States */
.form-input:focus,
.radio-label:focus-within,
.checkbox-label:focus-within {
    outline: 2px solid #FF6600;
    outline-offset: 2px;
}

.card-button:focus,
.card-button-secondary:focus {
    outline: 2px solid #FF6600;
    outline-offset: 2px;
}

/* Portfolio card focus for keyboard navigation */
.portfolio-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(255, 102, 0, 0.15), 0 10px 10px -5px rgba(255, 102, 0, 0.1);
}

/* Print Styles */
@media print {
    nav,
    #hero-canvas,
    .cta-button,
    .secondary-button {
        display: none !important;
    }
}

/* Accessibility and Animation Enhancements */
.upload-zone:focus-within {
    @apply ring-2 ring-[#FF6A00] ring-offset-2;
}

.modern-checkbox:focus + .checkbox-indicator {
    @apply ring-2 ring-[#FF6A00] ring-offset-2;
}

.order-input:focus {
    @apply ring-2 ring-[#FF6A00] ring-offset-1;
}

/* Smooth animations */
.upload-zone[data-upload-state="success"] {
    animation: successPulse 0.5s ease-out;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.photo-preview {
    animation: photoFadeIn 0.3s ease-out;
}

@keyframes photoFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.form-section {
    animation: sectionSlideIn 0.4s ease-out;
}

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

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .upload-zone,
    .photo-preview,
    .form-section {
        animation: none;
    }
    
    .upload-zone[data-upload-state="drag-over"] {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .upload-zone {
        border-width: 3px;
    }
    
    .modern-checkbox:checked + .checkbox-indicator {
        background-color: #000;
        border-color: #000;
    }
    
    .section-icon {
        background-color: #000;
    }
}