/*
 * DigIT Hulp - Main Stylesheet
 * A unified, modern, and efficient design system.
 */

 :root {
  /* Color Scheme - Light Mode (Default) */
  --c-primary: #1e40af;
  --c-secondary: #3b82f6;
  --c-accent: #60a5fa;
  --c-gradient-start: #6366f1;
  --c-gradient-end: #8b5cf6;
  --c-background: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-elevated: rgba(255, 255, 255, 0.8);
  --c-text: #1e293b;
  --c-text-secondary: #64748b;
  --c-border: #e2e8f0;
  --c-glass-bg: rgba(255, 255, 255, 0.1);
  --c-glass-border: rgba(255, 255, 255, 0.2);
  --c-shadow: rgba(15, 23, 42, 0.1);
  --c-error: #dc2626;
  --c-error-bg: rgba(220, 38, 38, 0.1);
  --c-success: #16a34a;
  --c-success-bg: rgba(22, 163, 74, 0.1);
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  
  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px;
  --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 60px;
  --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --fw-extrabold: 800;
  --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7;
  
  /* Spacing & Sizing */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px;
  --space-96: 96px; --header-height: 80px;
  
  /* Borders & Radius */
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  
  /* Shadows */
  --shadow-md: 0 4px 6px -1px var(--c-shadow), 0 2px 4px -2px var(--c-shadow);
  --shadow-xl: 0 20px 25px -5px var(--c-shadow), 0 8px 10px -6px var(--c-shadow);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.4);

  /* Transitions & Animations */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 300ms;

  /* Glassmorphism */
  --glass-backdrop: blur(12px);
}

[data-theme="dark"] {
  --c-primary: #60a5fa;
  --c-secondary: #3b82f6;
  --c-accent: #1e40af;
  --c-gradient-start: #6366f1;
  --c-gradient-end: #a855f7;
  --c-background: #0f172a;
  --c-surface: #1e293b;
  --c-surface-elevated: rgba(30, 41, 59, 0.8);
  --c-text: #e2e8f0;
  --c-text-secondary: #94a3b8;
  --c-border: #334155;
  --c-glass-bg: rgba(30, 41, 59, 0.5);
  --c-glass-border: rgba(255, 255, 255, 0.1);
  --c-shadow: rgba(0, 0, 0, 0.3);
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Base & Typography */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font-sans); color: var(--c-text); background-color: var(--c-background); scroll-behavior: smooth; }
body { min-height: 100vh; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); line-height: var(--lh-normal); }
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-lg); }
p { margin-bottom: var(--space-16); line-height: var(--lh-relaxed); }
p:last-child { margin-bottom: 0; }
a { color: var(--c-primary); text-decoration: none; }
ul { list-style: none; }

/* Layout */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-24); }
.section { padding: var(--space-96) 0; position: relative; overflow: hidden; }
main { padding-top: var(--header-height); }
.section-header { text-align: center; margin-bottom: var(--space-64); }
.section-title { font-size: var(--fs-5xl); font-weight: var(--fw-extrabold); margin-bottom: var(--space-16); }
.section-subtitle { font-size: var(--fs-xl); color: var(--c-text-secondary); max-width: 60ch; margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Header & Navigation */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--c-glass-bg); backdrop-filter: var(--glass-backdrop); border-bottom: 1px solid transparent; transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.header.scrolled { background: var(--c-surface-elevated); border-bottom-color: var(--c-border); box-shadow: var(--shadow-md); }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: var(--header-height); }
.logo-text { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); }
.logo-accent { background: linear-gradient(135deg, var(--c-gradient-start), var(--c-gradient-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-list { display: flex; gap: var(--space-32); }
.nav-link { color: var(--c-text); font-weight: var(--fw-medium); padding: var(--space-8) 0; position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--c-primary); transform: scaleX(0); transition: transform var(--duration) var(--ease); transform-origin: left; }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--space-16); }
.theme-toggle { background: transparent; border: none; cursor: pointer; font-size: var(--fs-xl); position: relative; width: 24px; height: 24px; }
.theme-toggle .theme-icon { position: absolute; top: 0; left: 0; transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); }
[data-theme='light'] .theme-toggle .theme-icon:last-child { opacity: 0; transform: rotate(-90deg); }
[data-theme='dark'] .theme-toggle .theme-icon:first-child { opacity: 0; transform: rotate(90deg); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--space-8); }
.hamburger-line { width: 25px; height: 3px; background: var(--c-text); border-radius: var(--radius-full); transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-12) var(--space-24); border-radius: var(--radius-lg); font-size: var(--fs-base); font-weight: var(--fw-bold); border: 2px solid transparent; cursor: pointer; transition: all var(--duration) var(--ease); }
.btn-large { padding: var(--space-16) var(--space-32); font-size: var(--fs-lg); }
.btn-full-width { width: 100%; }
.btn-primary { background: linear-gradient(135deg, var(--c-gradient-start), var(--c-gradient-end)); color: white; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.btn-outline { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.btn-outline:hover { background-color: var(--c-surface); transform: translateY(-2px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-icon { transition: transform var(--duration) var(--ease); }
.btn:hover .btn-icon { transform: translateX(4px); }

/* Hero Section */
.hero { text-align: center; padding: var(--space-64) 0; }
.hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; }
.gradient-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: float 20s infinite ease-in-out; }
.orb-1 { width: 400px; height: 400px; background: var(--c-gradient-start); top: -200px; left: -200px; }
.orb-2 { width: 300px; height: 300px; background: var(--c-secondary); top: 50%; right: -150px; animation-delay: -7s; }
.orb-3 { width: 200px; height: 200px; background: var(--c-gradient-end); bottom: -100px; left: 50%; animation-delay: -14s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-30px) rotate(180deg); } }
.hero-title { font-size: var(--fs-6xl); font-weight: var(--fw-extrabold); margin-bottom: var(--space-24); }
.hero-title-main, .hero-title-accent { display: block; }
.hero-card { background: var(--c-glass-bg); backdrop-filter: var(--glass-backdrop); border: 1px solid var(--c-glass-border); border-radius: var(--radius-xl); padding: var(--space-32); margin: var(--space-32) auto; max-width: 60ch; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: center; margin-top: var(--space-32); }
.scroll-indicator { position: absolute; bottom: var(--space-24); left: 50%; transform: translateX(-50%); color: var(--c-text-secondary); animation: bounce 2s infinite; }
.scroll-indicator-text { font-size: var(--fs-sm); }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -10px); } 60% { transform: translate(-50%, -5px); } }

/* Services Section */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-32); }
.service-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-xl); padding: var(--space-32); text-align: center; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.service-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--c-gradient-start), var(--c-gradient-end)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-24); color: white; }
.service-icon svg { width: 32px; height: 32px; }
.service-card ul { margin-top: var(--space-16); }
.service-card li { color: var(--c-text-secondary); margin-bottom: var(--space-8); }

/* About Section */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-32); margin-bottom: var(--space-96); }
.team-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-xl); padding: var(--space-32); text-align: center; }
.team-avatar { width: 120px; height: 120px; background: linear-gradient(135deg, var(--c-gradient-start), var(--c-gradient-end)); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-24); color: white; }
.team-avatar svg { width: 60px; height: 60px; }
.team-role { color: var(--c-primary); font-weight: var(--fw-medium); margin: var(--space-4) 0 var(--space-16); }
.skills-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-top: var(--space-24); }
.skill-tag { background: var(--c-background); color: var(--c-secondary); padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); font-size: 12px; font-weight: var(--fw-medium); border: 1px solid var(--c-border); }
.company-values { text-align: center; }
.values-title { margin-bottom: var(--space-48); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-24); }
.value-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: var(--space-24); }
.value-icon { font-size: var(--fs-3xl); display: block; margin-bottom: var(--space-8); }

/* Contact Section */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-48); }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1.5fr; } }
.contact-info { background: var(--c-surface); border-radius: var(--radius-xl); padding: var(--space-32); border: 1px solid var(--c-border); }
.contact-item { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-24); }
.contact-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--c-gradient-start), var(--c-gradient-end)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
.contact-label { font-size: var(--fs-sm); color: var(--c-text-secondary); }
.contact-value { font-weight: var(--fw-medium); }

/* Forms */
.form-group { margin-bottom: var(--space-24); }
.form-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--space-8); }
.form-control { width: 100%; padding: var(--space-12); font-size: var(--fs-base); background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); color: var(--c-text); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.form-control:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-trans); }
[data-theme='light'] { --c-primary-trans: rgba(59, 130, 246, 0.2); }
[data-theme='dark'] { --c-primary-trans: rgba(96, 165, 250, 0.2); }
textarea.form-control { resize: vertical; min-height: 120px; font-family: var(--font-sans); }
.field-error { font-size: var(--fs-sm); color: var(--c-error); min-height: 1.2em; margin-top: var(--space-4); }
.form-control.invalid { border-color: var(--c-error); }
#formMessage { margin-top: var(--space-16); padding: var(--space-12); border-radius: var(--radius-md); text-align: center; font-weight: var(--fw-medium); display: none; }
#formMessage.success { background-color: var(--c-success-bg); color: var(--c-success); }
#formMessage.error { background-color: var(--c-error-bg); color: var(--c-error); }

/* Footer */
.footer { background-color: var(--c-surface); border-top: 1px solid var(--c-border); padding: var(--space-64) 0 var(--space-32); margin-top: var(--space-96); }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-48); margin-bottom: var(--space-48); }
.footer-section h4 { margin-bottom: var(--space-16); }
.footer-section p, .footer-section a { color: var(--c-text-secondary); }
.footer-section a:hover { color: var(--c-primary); }
.footer-section li { margin-bottom: var(--space-8); }
.footer-bottom { text-align: center; padding-top: var(--space-32); border-top: 1px solid var(--c-border); color: var(--c-text-secondary); font-size: var(--fs-sm); }

/* Utilities & Animations */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--c-gradient-start), var(--c-gradient-end)); transform: scaleX(0); transform-origin: left; z-index: 1000; transition: transform 100ms linear; }
.back-to-top { position: fixed; bottom: var(--space-32); right: var(--space-32); width: 48px; height: 48px; background: linear-gradient(135deg, var(--c-gradient-start), var(--c-gradient-end)); border: none; border-radius: var(--radius-full); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); z-index: 50; }
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Mobile Responsive */
@media (max-width: 768px) {
  :root { --fs-5xl: 36px; --fs-6xl: 48px; }
  .nav { position: absolute; top: calc(var(--header-height) - 1px); left: 0; right: 0; background: var(--c-surface); border-bottom: 1px solid var(--c-border); transform: translateY(-100%); transition: transform var(--duration) var(--ease); z-index: -1; }
  .nav.active { transform: translateY(0); }
  .nav-list { flex-direction: column; padding: var(--space-24); gap: var(--space-16); }
  .nav-link::after { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .hero-buttons { flex-direction: column; align-items: center; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .btn { width: 100%; }
}