:root {
  color-scheme: dark;
  --wd-accent: #ff7a1d;
  --wd-accent-strong: #ff8b33;
  
  /* PURE BLACK for Dark Mode */
  --wd-bg-body: #000000;
  --wd-bg-surface: #000000;
  --wd-card-bg: #0a0a0a;
  
  --wd-border-color: rgba(255, 255, 255, 0.14);
  --wd-text-primary: #ffffff;
  --wd-text-muted: #9ca3af;
  --wd-input-bg: rgba(255, 255, 255, 0.05);
  --wd-input-border: rgba(255, 255, 255, 0.22);
  --wd-pattern-color: rgba(255, 255, 255, 0.03); /* Subtle white stripes for Dark Mode */
}

/* FORCED DARK MODE - REMOVED THEME TRANSITIONS */
html,
body {
  background-color: var(--wd-bg-body);
  color: var(--wd-text-primary);
  /* Removed complex transition to prevent lag on initial load/scroll */
}

/* Ensure sections only have transitions for their specific content, not the background */
.section-bg {
  background-color: var(--wd-bg-body);
  /* Removed background-color transition */
}

.section-border {
  border-color: var(--wd-border-color) !important;
}

.section-card,
.modal-content,
.tool-card,
#signin-modal-content,
#form-container,
#terms-modal-content,
#dropzone,
#success-message,
.surface-card,
.page5-card,
.testimonial-card,
.feature-card {
  background-color: var(--wd-card-bg) !important;
  border-color: var(--wd-border-color) !important;
  color: var(--wd-text-primary);
}

/* Ensure inputs stay visible/readable */
.signin-input,
.form-input,
.surface-input,
.contact-input {
  background-color: var(--wd-input-bg) !important;
  border-color: var(--wd-input-border) !important;
  color: var(--wd-text-primary) !important;
}

.theme-toggle {
  background: var(--wd-input-bg);
  border: 1px solid var(--wd-border-color);
  color: var(--wd-text-primary);
}


/* --- FORM LOADING STATES --- */
.form-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.form-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid var(--wd-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- SMOOTH SCROLL MICRO-ANIMATIONS (RETAINED) --- */

/* Base state: Hidden and slightly pushed down */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Active state: Visible and in place */
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered Delays for lists/grids (Cards appearing one by one) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* Specific Icon Pop Animation */
.icon-pop {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy pop effect */
}

.icon-pop.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* --- DIAGONAL STRIPED BACKGROUND (RETAINED) --- */
.striped-bg {
  background-color: var(--wd-bg-body);
  background-image: linear-gradient(
    45deg, 
    var(--wd-pattern-color) 25%, 
    transparent 25%, 
    transparent 50%, 
    var(--wd-pattern-color) 50%, 
    var(--wd-pattern-color) 75%, 
    transparent 75%, 
    transparent
  );
  background-size: 6px 6px; /* Creates the tight mesh texture */
}

/* --- INTERACTIVE DEMO SCREEN (RETAINED) --- */
#demo-container {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The state when the screen is maximized */
.demo-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  z-index: 99999 !important; /* Extremely high Z-index */
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  background-color: #000 !important; /* Solid black background */
  padding: 0 !important;
}

/* Make the inner content fit the height */
.demo-fullscreen .demo-content-area {
  height: calc(100vh - 50px) !important; /* Full height minus header */
  border-radius: 0 !important;
}

/* --- TYPEWRITER ANIMATION (RETAINED) --- */
.typing-wrapper {
  display: inline-block;
  overflow: hidden; /* Hides text until typed */
  white-space: nowrap; /* Keeps text on one line */
  border-right: 2px solid #FD6316; /* The cursor */
  width: 0;
  animation: 
    typing 3.5s steps(40, end) forwards, /* Type out */
    blink-caret 0.75s step-end infinite; /* Blink cursor */
  animation-delay: 0.5s; /* Wait slightly before starting */
}

/* The typing physics */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The cursor blinking physics */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #FD6316 }
}

/* --- MULTI-LINE TYPING ANIMATION (RETAINED) --- */

/* Line 1: Types immediately, cursor stops blinking after it's done */
.typing-line-1 {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid #FD6316; /* Cursor */
  animation: 
    typing 2.5s steps(30, end) forwards,
    blink-caret 0.75s step-end 3; /* Blink 3 times then stop */
}

/* Line 2: Waits 2.5s, then starts typing */
.typing-line-2 {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid transparent; /* Hidden initially */
  animation: 
    typing 2s steps(20, end) forwards,
    blink-caret 0.75s step-end infinite; /* Cursor blinks forever here */
  animation-delay: 2.8s; /* Wait for Line 1 */
}

/* Ensure border turns orange when animation starts */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #FD6316 }
}

/* =========================================
   FOOTER THEME ENGINE (Updated: Grid for All + No Orange)
   ========================================= */

/* DEFAULT (DARK MODE) */
:root {
    --footer-bg-color: #000000;
    /* White Stripes for Dark Background */
    --footer-stripe-color: rgba(255, 255, 255, 0.03); 
    --footer-bg-image: linear-gradient(
        45deg, 
        var(--footer-stripe-color) 25%, 
        transparent 25%, 
        transparent 50%, 
        var(--footer-stripe-color) 50%, 
        var(--footer-stripe-color) 75%, 
        transparent 75%, 
        transparent
    );
    --footer-bg-size: 6px 6px;
    
    --footer-border: rgba(255, 255, 255, 0.1);
    --footer-text-head: #ffffff;
    --footer-text-body: #9ca3af; /* Gray-400 */
    --footer-glow-opacity: 0;    /* NO ORANGE HUE */
}

/* LIGHT MODE configuration */
[data-theme='light'] {
    --footer-bg-color: #ffffff; 
    /* Black Stripes for Light Background */
    --footer-stripe-color: rgba(0, 0, 0, 0.03); 
    --footer-bg-image: linear-gradient(
        45deg, 
        var(--footer-stripe-color) 25%, 
        transparent 25%, 
        transparent 50%, 
        var(--footer-stripe-color) 50%, 
        var(--footer-stripe-color) 75%, 
        transparent 75%, 
        transparent
    );
    --footer-bg-size: 6px 6px;
    
    --footer-border: rgba(0, 0, 0, 0.1);
    --footer-text-head: #111827; /* Dark Black */
    --footer-text-body: #4b5563; /* Medium Gray */
    --footer-glow-opacity: 0;    /* NO ORANGE HUE */
}

/* UTILITY CLASS FOR FOOTER */
.footer-dynamic-theme {
    background-color: var(--footer-bg-color);
    background-image: var(--footer-bg-image);
    background-size: var(--footer-bg-size);
    border-top: 1px solid var(--footer-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}