/* ===========================================
   ACUMEN LABS - THEME & ENHANCEMENTS
   Light/Dark mode + Glassmorphism effects
   =========================================== */

/* ==========================================
   COMPLETE LIGHT MODE VARIABLES
   ========================================== */

[data-theme="light"] {
  /* Backgrounds - Light & Clean */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-code: #f8fafc;

  /* Text - Dark for readability */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* Primary colors - Adjusted for light bg */
  --primary: #ea580c;
  --primary-dark: #c2410c;
  --primary-light: #f97316;

  /* Accent colors */
  --accent: #0891b2;
  --accent-dark: #0e7490;
  --accent-light: #06b6d4;

  /* Borders - Darker for visibility on light bg */
  --border-light: #cbd5e1;
  --border-medium: #94a3b8;

  /* Terminal/code colors - Darker for light bg */
  --terminal-green: #059669;
  --terminal-blue: #0284c7;
  --terminal-purple: #7c3aed;
  --terminal-yellow: #ca8a04;

  /* Shadows - Softer for light mode */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ==========================================
   SMOOTH THEME TRANSITIONS
   ========================================== */

html {
  transition: background-color 0.3s ease;
}

body,
.navbar,
.hero,
section,
.service-card,
.audience-card,
.stat-card,
.blog-card,
.footer,
.btn,
.hero-badge,
.section-tag,
.contact-form-card,
input,
textarea,
select {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* ==========================================
   THEME TOGGLE BUTTON - IN NAVBAR
   ========================================== */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  margin-left: var(--space-md);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.05);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Show sun icon by default (dark mode), hide moon */
.theme-toggle .sun-icon {
  display: block;
}

.theme-toggle .moon-icon {
  display: none;
}

/* In light mode, show moon, hide sun */
[data-theme="light"] .theme-toggle .sun-icon {
  display: none;
}

[data-theme="light"] .theme-toggle .moon-icon {
  display: block;
}

/* Light mode button styles */
[data-theme="light"] .theme-toggle {
  border-color: var(--border-light);
  color: var(--text-secondary);
}

[data-theme="light"] .theme-toggle:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary);
  color: var(--primary);
}

/* ==========================================
   LIGHT MODE - NAVBAR
   ========================================== */

[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--border-light);
}

[data-theme="light"] .nav-links a {
  color: var(--text-secondary);
}

[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
  color: var(--text-primary);
}

[data-theme="light"] .logo span {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Logo visibility in light mode - invert white logo */
[data-theme="light"] .logo-img {
  filter: invert(1) brightness(0.15);
}

[data-theme="light"] .nav-toggle span {
  background: var(--text-primary);
}

/* Mobile nav in light mode */
[data-theme="light"] .nav-links.active {
  background: var(--bg-primary);
  border-bottom-color: var(--border-light);
}

/* ==========================================
   LIGHT MODE - HERO
   ========================================== */

[data-theme="light"] .hero {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

[data-theme="light"] .hero h1 {
  color: var(--text-primary);
}

[data-theme="light"] .hero p {
  color: var(--text-secondary);
}

[data-theme="light"] .hero-badge {
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.3);
  color: var(--primary);
}

[data-theme="light"] .hero-badge .dot {
  background: var(--primary);
  box-shadow: 0 0 12px rgba(234, 88, 12, 0.6);
}

/* Code rain opacity reduction in light mode */
[data-theme="light"] .code-rain {
  opacity: 0.4;
}

[data-theme="light"] .code-line .keyword { color: var(--primary); opacity: 0.3; }
[data-theme="light"] .code-line .function { color: var(--accent); opacity: 0.25; }
[data-theme="light"] .code-line .string { color: #059669; opacity: 0.25; }
[data-theme="light"] .code-line .comment { color: var(--text-muted); opacity: 0.2; }
[data-theme="light"] .code-line .operator { color: var(--primary-light); opacity: 0.25; }
[data-theme="light"] .code-line .variable { color: var(--text-secondary); opacity: 0.25; }
[data-theme="light"] .code-line .number { color: var(--accent-light); opacity: 0.25; }

/* Scroll indicator in light mode */
[data-theme="light"] .scroll-indicator {
  color: var(--text-muted);
}

[data-theme="light"] .scroll-indicator:hover {
  color: var(--primary);
}

[data-theme="light"] .scroll-arrow {
  border-color: var(--border-light);
  background: var(--bg-primary);
}

[data-theme="light"] .scroll-indicator:hover .scroll-arrow {
  border-color: var(--primary);
  background: rgba(234, 88, 12, 0.1);
}

/* ==========================================
   LIGHT MODE - SECTIONS
   ========================================== */

[data-theme="light"] .section-tag {
  background: rgba(234, 88, 12, 0.1);
  color: var(--primary);
}

[data-theme="light"] .section-header h2 {
  color: var(--text-primary);
}

[data-theme="light"] .section-header p {
  color: var(--text-secondary);
}

/* ==========================================
   LIGHT MODE - CARDS
   ========================================== */

/* Service Cards */
[data-theme="light"] .service-card {
  background: var(--bg-primary) !important;
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .service-card:hover {
  background: var(--bg-primary) !important;
  border-color: var(--primary);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(234, 88, 12, 0.1);
}

[data-theme="light"] .service-card h3 {
  color: var(--text-primary);
}

[data-theme="light"] .service-card p {
  color: var(--text-secondary);
}

[data-theme="light"] .service-features li {
  color: var(--text-secondary);
}

[data-theme="light"] .service-features li::before {
  color: var(--primary);
}

[data-theme="light"] .service-icon {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(8, 145, 178, 0.1));
}

[data-theme="light"] .service-icon svg {
  stroke: var(--primary);
}

/* Audience Cards */
[data-theme="light"] .audience-card {
  background: var(--bg-primary) !important;
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .audience-card:hover {
  background: var(--bg-primary) !important;
  border-color: var(--primary);
  box-shadow: var(--shadow-xl), 0 0 20px rgba(234, 88, 12, 0.15);
}

[data-theme="light"] .audience-card h3 {
  color: var(--text-primary);
}

[data-theme="light"] .audience-card p {
  color: var(--text-secondary);
}

[data-theme="light"] .audience-benefits li {
  color: var(--text-secondary);
}

[data-theme="light"] .audience-benefits li::before {
  color: var(--accent);
}

[data-theme="light"] .audience-card:hover .audience-benefits li {
  color: var(--text-primary);
}

/* Stat Cards */
[data-theme="light"] .stat-card {
  background: var(--bg-primary);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .stat-card:hover {
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .stat-number {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="light"] .stat-label {
  color: var(--text-secondary);
}

/* Blog Cards */
[data-theme="light"] .blog-card {
  background: var(--bg-primary);
  border-color: var(--border-light);
}

[data-theme="light"] .blog-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] .blog-content h3 {
  color: var(--text-primary);
}

[data-theme="light"] .blog-content p {
  color: var(--text-secondary);
}

[data-theme="light"] .blog-meta {
  color: var(--text-muted);
}

[data-theme="light"] .blog-tag {
  background: rgba(234, 88, 12, 0.1);
  color: var(--primary);
}

/* ==========================================
   LIGHT MODE - STATS SECTION
   ========================================== */

[data-theme="light"] .stats-section {
  background: var(--bg-secondary);
}

/* ==========================================
   LIGHT MODE - AI DIAGRAM
   ========================================== */

[data-theme="light"] .diagram-section {
  background: var(--bg-primary);
}

/* SVG elements in diagram */
[data-theme="light"] .ai-diagram .column-label {
  fill: var(--text-muted);
}

[data-theme="light"] .ai-diagram .node-bg {
  fill: var(--bg-secondary);
  stroke: var(--border-light);
}

[data-theme="light"] .ai-diagram .node text {
  fill: var(--text-primary);
}

[data-theme="light"] .ai-diagram .flow-line {
  stroke: rgba(8, 145, 178, 0.3);
}

[data-theme="light"] .diagram-tooltip {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] .diagram-tooltip::before {
  border-color: var(--bg-primary) transparent transparent;
}

/* ==========================================
   LIGHT MODE - CTA SECTION
   ========================================== */

[data-theme="light"] .cta-section {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, #e0e7ff 100%);
}

[data-theme="light"] .cta-section h2 {
  color: var(--text-primary);
}

[data-theme="light"] .cta-section p {
  color: var(--text-secondary);
}

/* ==========================================
   LIGHT MODE - BUTTONS
   ========================================== */

[data-theme="light"] .btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.25);
}

[data-theme="light"] .btn-primary:hover {
  background: var(--primary-light);
  box-shadow: 0 8px 25px rgba(234, 88, 12, 0.35);
}

[data-theme="light"] .btn-secondary {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

[data-theme="light"] .btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
}

[data-theme="light"] .btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

[data-theme="light"] .btn-outline:hover {
  background: var(--primary);
  color: white;
}

/* ==========================================
   LIGHT MODE - FOOTER
   ========================================== */

[data-theme="light"] .footer {
  background: var(--bg-secondary);
}

[data-theme="light"] .footer-brand .logo {
  color: var(--text-primary);
}

[data-theme="light"] .footer-brand p {
  color: var(--text-muted);
}

[data-theme="light"] .footer-links h4 {
  color: var(--text-primary);
}

[data-theme="light"] .footer-links a {
  color: var(--text-muted);
}

[data-theme="light"] .footer-links a:hover {
  color: var(--primary);
}

[data-theme="light"] .footer-bottom {
  border-top-color: var(--border-light);
  color: var(--text-muted);
}

[data-theme="light"] .social-links a {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border-color: var(--border-light);
}

[data-theme="light"] .social-links a:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ==========================================
   LIGHT MODE - FORMS
   ========================================== */

[data-theme="light"] .contact-form-card {
  background: var(--bg-primary);
  border-color: var(--border-light);
}

[data-theme="light"] .form-group label {
  color: var(--text-primary);
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
  background: var(--bg-secondary);
  border-color: var(--border-light);
  color: var(--text-primary);
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
  color: var(--text-muted);
}

/* ==========================================
   LIGHT MODE - PAGE HEADER
   ========================================== */

[data-theme="light"] .page-header {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

[data-theme="light"] .page-header h1 {
  color: var(--text-primary);
}

[data-theme="light"] .page-header p {
  color: var(--text-secondary);
}

/* ==========================================
   LIGHT MODE - TERMINAL/CODE BLOCKS
   ========================================== */

[data-theme="light"] .hero-terminal,
[data-theme="light"] .quotes-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

[data-theme="light"] .terminal-header,
[data-theme="light"] .quotes-header,
[data-theme="light"] .quotes-footer {
  background: var(--bg-tertiary);
}

[data-theme="light"] .terminal-title,
[data-theme="light"] .quotes-title {
  color: var(--text-muted);
}

[data-theme="light"] .terminal-body,
[data-theme="light"] .quotes-body {
  background: var(--bg-secondary);
}

[data-theme="light"] .terminal-prompt {
  color: var(--terminal-green);
}

[data-theme="light"] .terminal-command {
  color: var(--text-primary);
}

[data-theme="light"] .terminal-output {
  color: var(--text-secondary);
}

[data-theme="light"] .cursor,
[data-theme="light"] .cursor-blink {
  background: var(--terminal-green);
  color: var(--terminal-green);
}

[data-theme="light"] .quote-text {
  color: var(--text-primary);
}

[data-theme="light"] .quote-prefix {
  color: var(--terminal-green);
}

[data-theme="light"] .line-number {
  color: var(--text-muted);
}

[data-theme="light"] .meta-label {
  color: var(--terminal-purple);
}

[data-theme="light"] .meta-value {
  color: var(--terminal-yellow);
}

[data-theme="light"] .stat-text {
  color: var(--text-secondary);
}

[data-theme="light"] .stat-icon {
  color: var(--terminal-green);
}

[data-theme="light"] .quote-divider {
  background: var(--border-light);
}

[data-theme="light"] .quote-counter {
  color: var(--text-muted);
}

[data-theme="light"] .quote-progress {
  background: var(--border-light);
}

/* ==========================================
   LIGHT MODE - ABOUT PAGE SPECIFICS
   ========================================== */

[data-theme="light"] .value-item {
  background: var(--bg-secondary);
  border-left-color: var(--primary);
}

[data-theme="light"] .value-item h4 {
  color: var(--text-primary);
}

[data-theme="light"] .value-item p {
  color: var(--text-secondary);
}

[data-theme="light"] .founder-card {
  background: var(--bg-primary);
  border-color: var(--border-light);
}

[data-theme="light"] .founder-card h3 {
  color: var(--text-primary);
}

[data-theme="light"] .founder-title {
  color: var(--primary);
}

[data-theme="light"] .founder-credentials li {
  color: var(--text-secondary);
}

[data-theme="light"] .founder-credentials li::before {
  color: var(--terminal-green);
}

/* ==========================================
   LIGHT MODE - CONTACT PAGE SPECIFICS
   ========================================== */

[data-theme="light"] .contact-info h3 {
  color: var(--text-primary);
}

[data-theme="light"] .contact-method {
  border-bottom-color: var(--border-light);
}

[data-theme="light"] .contact-method-icon {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(8, 145, 178, 0.1));
}

[data-theme="light"] .contact-method h4 {
  color: var(--text-primary);
}

[data-theme="light"] .contact-method p {
  color: var(--text-secondary);
}

/* ==========================================
   LIGHT MODE - CONVERSATION CARD
   ========================================== */

[data-theme="light"] .conversation-card {
  background: var(--bg-primary);
  box-shadow: var(--shadow-xl);
}

[data-theme="light"] .conversation-body {
  background: var(--bg-secondary);
}

[data-theme="light"] .message-content {
  background: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="light"] .message-question .message-content {
  border-color: var(--border-light);
}

[data-theme="light"] .message-question .message-avatar {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-light);
}

[data-theme="light"] .message-answer .message-content {
  border-color: rgba(234, 88, 12, 0.2);
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.05), rgba(234, 88, 12, 0.03));
}

[data-theme="light"] .message-answer .message-content p {
  color: var(--text-primary);
}

[data-theme="light"] .outcome-list li {
  color: var(--text-secondary);
  border-bottom-color: var(--border-light);
}

[data-theme="light"] .outcome-value {
  color: var(--primary);
  background: rgba(234, 88, 12, 0.1);
}

[data-theme="light"] .typing-indicator span {
  background: var(--text-muted);
}

/* ==========================================
   LIGHT MODE - BODY BACKGROUND
   ========================================== */

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 100% 80% at 10% 10%, rgba(234, 88, 12, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 90% 20%, rgba(8, 145, 178, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 80%, rgba(234, 88, 12, 0.03) 0%, transparent 50%);
}

[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 60% 40% at 70% 20%, rgba(234, 88, 12, 0.02) 0%, transparent 40%);
}

/* ==========================================
   GLASSMORPHISM - DARK MODE ENHANCEMENTS
   ========================================== */

/* Service Cards - Glassmorphism */
.service-card,
.audience-card {
  background: rgba(30, 30, 40, 0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover,
.audience-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(6, 182, 212, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(6, 182, 212, 0.3) inset;
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(35, 35, 50, 0.8) !important;
}

/* Light mode - remove glassmorphism, use solid backgrounds */
[data-theme="light"] .service-card,
[data-theme="light"] .audience-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Enhanced Shadows & Depth */
.stat-card {
  background: rgba(25, 25, 35, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(251, 146, 60, 0.1);
}

[data-theme="light"] .stat-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ==========================================
   FADE-IN ANIMATIONS
   ========================================== */

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay for grid items */
.fade-in:nth-child(1) { transition-delay: 0s; }
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }
.fade-in:nth-child(5) { transition-delay: 0.4s; }
.fade-in:nth-child(6) { transition-delay: 0.5s; }

/* Service icon glow on hover */
.service-card:hover .service-icon,
.audience-card:hover .audience-icon {
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.5));
  transform: scale(1.1);
  transition: all 0.3s ease;
}

[data-theme="light"] .service-card:hover .service-icon,
[data-theme="light"] .audience-card:hover .audience-icon {
  filter: drop-shadow(0 0 12px rgba(234, 88, 12, 0.4));
}

/* ==========================================
   RESPONSIVE - THEME TOGGLE
   ========================================== */

@media (max-width: 768px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
    margin-left: var(--space-sm);
    order: 2;
  }
  
  .theme-toggle svg {
    width: 18px;
    height: 18px;
  }
  
  /* Position theme toggle before nav-toggle on mobile */
  .navbar .container {
    flex-wrap: nowrap;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .navbar,
  .hero,
  section,
  .service-card,
  .audience-card,
  .stat-card,
  .blog-card,
  .footer,
  .btn,
  .theme-toggle {
    transition: none !important;
  }
}

/* ==========================================
   RESPECT SYSTEM COLOR SCHEME PREFERENCE
   ========================================== */

@media (prefers-color-scheme: light) {
  /* If no theme is set, respect system preference */
  html:not([data-theme]) {
    /* This is a hint - JS will handle the actual theme setting */
  }
}

/* ===========================================
   CONTACT FORM STYLES
   =========================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-full {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
}

/* Success message styling */
.form-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-success h4 {
  color: #22c55e;
  margin-bottom: 0.5rem;
}