/* ============================================
   DUCKBIT UG — Stylesheet
   ============================================ */

:root {
  --primary: #6C3FE0;
  --primary-light: #8B5CF6;
  --accent: #00E5A0;
  --accent-light: #34FFC6;
  --bg-dark: #0A0A0F;
  --bg-darker: #050508;
  --bg-glass: rgba(255,255,255,0.05);
  --bg-glass-hover: rgba(255,255,255,0.08);
  --text-primary: #F0F0F5;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --border-color: rgba(255,255,255,0.08);
  --border-glow: rgba(108,63,224,0.4);
  --container-max: 1080px;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out-expo);
  --transition-normal: 0.4s var(--ease-out-expo);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-glow: 0 0 40px rgba(108,63,224,0.15);
  --section-pad: clamp(3rem, 6vw, 6rem);
}

[data-theme="light"] {
  --bg-dark: #F8F9FC;
  --bg-darker: #FFFFFF;
  --bg-glass: rgba(0,0,0,0.03);
  --bg-glass-hover: rgba(0,0,0,0.06);
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --border-color: rgba(0,0,0,0.08);
  --shadow-glow: 0 0 40px rgba(108,63,224,0.08);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

a { color: inherit; text-decoration: none; }
img { max-width:100%; height:auto; display:block; }
ul, ol { list-style:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; color:inherit; }

/* ── Grain ── */
.grain-overlay {
  position:fixed; inset:0; z-index:10000; pointer-events:none; opacity:0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:256px 256px;
}
[data-theme="light"] .grain-overlay { opacity:0.02; }

/* ── Cursor Glow ── */
.cursor-glow {
  position:fixed; width:400px; height:400px; border-radius:50%; pointer-events:none; z-index:1;
  background: radial-gradient(circle, rgba(108,63,224,0.06) 0%, transparent 70%);
  transform:translate(-50%,-50%); will-change:left,top;
}
[data-theme="light"] .cursor-glow { background: radial-gradient(circle, rgba(108,63,224,0.03) 0%, transparent 70%); }

/* ── Container ── */
.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 1.5rem; }
@media (min-width:768px) { .container { padding:0 2rem; } }

/* ── Navigation ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1rem 0; transition: all var(--transition-normal);
}
.nav.scrolled {
  padding:0.6rem 0;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
}
[data-theme="light"] .nav.scrolled { background: rgba(255,255,255,0.88); }

.nav-inner { display:flex; align-items:center; justify-content:space-between; }

.nav-logo { display:flex; align-items:center; }
.logo-img { height:32px; width:auto; }
[data-theme="light"] .logo-img.light-hide { display:none; }
[data-theme="dark"] .logo-img.dark-hide { display:none; }

.nav-links { display:none; align-items:center; gap:0.25rem; }
@media (min-width:768px) { .nav-links { display:flex; } }

.nav-link {
  padding:0.5rem 1rem; font-size:0.875rem; font-weight:500;
  color:var(--text-secondary); border-radius:var(--radius-sm);
  transition: all var(--transition-fast); position:relative;
}
.nav-link:hover, .nav-link.active { color:var(--text-primary); background:var(--bg-glass); }

.nav-actions { display:flex; align-items:center; gap:0.75rem; }

.theme-toggle {
  width:40px; height:40px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--transition-fast); color:var(--text-secondary); font-size:1.1rem;
}
.theme-toggle:hover { background:var(--bg-glass); color:var(--text-primary); }

/* Mobile toggle */
.nav-mobile-toggle { display:flex; flex-direction:column; gap:5px; width:28px; padding:4px 0; }
@media (min-width:768px) { .nav-mobile-toggle { display:none; } }
.nav-mobile-toggle span { display:block; width:100%; height:2px; background:var(--text-primary); border-radius:2px; transition:all 0.3s ease; transform-origin:center; }
.nav-mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-mobile-toggle.active span:nth-child(2) { opacity:0; }
.nav-mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  position:fixed; inset:0; z-index:999;
  background:rgba(10,10,15,0.95); backdrop-filter:blur(40px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  opacity:0; visibility:hidden; transition:all 0.4s ease;
}
[data-theme="light"] .mobile-menu { background:rgba(248,249,252,0.95); }
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a { font-size:1.5rem; font-weight:700; color:var(--text-primary); padding:0.5rem 1rem; transition:color var(--transition-fast); }
.mobile-menu a:hover { color:var(--primary-light); }

/* ── Buttons ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.65rem 1.5rem; font-size:0.875rem; font-weight:600; color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius:var(--radius-full); transition:all var(--transition-fast);
  position:relative; overflow:hidden;
}
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--primary-light), var(--accent)); opacity:0; transition:opacity var(--transition-fast); }
.btn-primary:hover::before { opacity:1; }
.btn-primary span { position:relative; z-index:1; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--shadow-glow); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.65rem 1.5rem; font-size:0.875rem; font-weight:600;
  color:var(--text-primary); background:var(--bg-glass);
  border:1px solid var(--border-color); border-radius:var(--radius-full);
  transition:all var(--transition-fast); backdrop-filter:blur(10px);
}
.btn-secondary:hover { background:var(--bg-glass-hover); border-color:var(--primary-light); transform:translateY(-1px); }
.btn-large { padding:0.9rem 2.25rem; font-size:1rem; }

/* ── Hero ── */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:5rem; }

.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35; animation:orbFloat 20s ease-in-out infinite; }
.hero-orb-1 { width:500px; height:500px; background:var(--primary); top:-200px; right:-100px; }
.hero-orb-2 { width:350px; height:350px; background:var(--accent); bottom:-100px; left:-100px; animation-delay:-7s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(30px,-40px) scale(1.05)} 50%{transform:translate(-20px,20px) scale(0.95)} 75%{transform:translate(15px,35px) scale(1.02)} }

.hero-grid {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent);
}

.hero-content { position:relative; z-index:2; max-width:700px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.4rem 1rem 0.4rem 0.5rem; background:var(--bg-glass);
  border:1px solid var(--border-color); border-radius:var(--radius-full);
  font-size:0.8rem; font-weight:500; color:var(--text-secondary); margin-bottom:2rem; backdrop-filter:blur(10px);
}
.hero-badge-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,229,160,0.4)} 50%{opacity:0.8;box-shadow:0 0 0 8px rgba(0,229,160,0)} }

.hero-title { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; line-height:1.08; letter-spacing:-0.03em; margin-bottom:1.25rem; }
.gradient-text { background:linear-gradient(135deg, var(--primary-light), var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-description { font-size:clamp(1rem,1.5vw,1.2rem); color:var(--text-secondary); max-width:550px; margin-bottom:2.5rem; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; }

/* ── Sections ── */
section { padding:var(--section-pad) 0; position:relative; }
.section-label { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--primary-light); margin-bottom:1rem; }
.section-label::before { content:''; width:20px; height:1px; background:var(--primary-light); }
.section-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800; line-height:1.1; letter-spacing:-0.02em; margin-bottom:1rem; }
.section-description { font-size:1rem; color:var(--text-secondary); max-width:500px; line-height:1.7; }

/* ── Service Cards ── */
.services-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2rem; }
@media (min-width:640px) { .services-grid { grid-template-columns:repeat(2,1fr); } }

.service-card {
  position:relative; padding:2rem; background:var(--bg-glass);
  border:1px solid var(--border-color); border-radius:var(--radius-lg);
  transition:all var(--transition-normal); overflow:hidden; backdrop-filter:blur(10px);
}
.service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(108,63,224,0.05),rgba(0,229,160,0.05)); opacity:0; transition:opacity var(--transition-normal); }
.service-card:hover::before { opacity:1; }
.service-card:hover { transform:translateY(-4px); border-color:var(--border-glow); box-shadow:var(--shadow-glow); }
.service-card .highlight-box { position:absolute; width:200px; height:200px; background:radial-gradient(circle,rgba(108,63,224,0.15),transparent 70%); border-radius:50%; pointer-events:none; opacity:0; transition:opacity 0.3s ease; transform:translate(-50%,-50%); }
.service-card:hover .highlight-box { opacity:1; }
.service-icon { width:48px; height:48px; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.25rem; position:relative; z-index:1; }
.service-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:0.5rem; position:relative; z-index:1; }
.service-card p { font-size:0.9rem; color:var(--text-secondary); line-height:1.6; position:relative; z-index:1; }

/* ── CTA ── */
.cta-section { position:relative; overflow:hidden; }
.cta-box {
  position:relative; padding:3.5rem 2rem;
  background:linear-gradient(135deg,rgba(108,63,224,0.1),rgba(0,229,160,0.05));
  border:1px solid var(--border-color); border-radius:var(--radius-xl);
  text-align:center; overflow:hidden; backdrop-filter:blur(10px);
}
.cta-box::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:conic-gradient(from 0deg,transparent,rgba(108,63,224,0.1),transparent,rgba(0,229,160,0.1),transparent); animation:rotateBorder 15s linear infinite; }
@keyframes rotateBorder { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.cta-box .section-title, .cta-box .section-description, .cta-actions { position:relative; z-index:1; }
.cta-box .section-description { margin:0 auto 2rem; }
.cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }

/* ── About Grid ── */
.about-grid { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; margin-top:2rem; }
@media (min-width:768px) { .about-grid { grid-template-columns:1fr 1fr; } }
.about-visual { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.about-visual-inner {
  width:80%; height:80%; border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--bg-glass),var(--bg-glass-hover));
  border:1px solid var(--border-color); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.about-visual-inner::before { content:''; position:absolute; width:200%; height:200%; background:conic-gradient(from 0deg,transparent,var(--primary),transparent,var(--accent),transparent); animation:rotateBorder 10s linear infinite; opacity:0.1; }
.about-metric-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; position:relative; z-index:1; padding:2rem; width:100%; }
.about-metric { padding:1.25rem; background:var(--bg-glass); border:1px solid var(--border-color); border-radius:var(--radius-md); text-align:center; backdrop-filter:blur(10px); }
.about-metric .metric-number { font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,var(--primary-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.about-metric .metric-label { font-size:0.7rem; color:var(--text-muted); margin-top:0.25rem; text-transform:uppercase; letter-spacing:0.05em; }

.about-text h3 { font-size:1.25rem; font-weight:700; margin-bottom:0.75rem; }
.about-text p { color:var(--text-secondary); margin-bottom:1rem; line-height:1.7; font-size:0.95rem; }

/* ── Contact ── */
.contact-grid { display:grid; grid-template-columns:1fr; gap:3rem; margin-top:2rem; }
@media (min-width:768px) { .contact-grid { grid-template-columns:1fr 1fr; } }
.contact-info { display:flex; flex-direction:column; gap:2rem; }
.contact-item { display:flex; align-items:start; gap:1rem; }
.contact-item-icon { width:48px; height:48px; min-width:48px; border-radius:var(--radius-md); background:var(--bg-glass); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.contact-item h4 { font-size:0.95rem; font-weight:600; margin-bottom:0.25rem; }
.contact-item p { font-size:0.9rem; color:var(--text-secondary); }
.contact-item a { color:var(--primary-light); transition:color var(--transition-fast); }
.contact-item a:hover { color:var(--accent); }

/* ── Page Header ── */
.page-header { padding:10rem 0 3rem; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; top:-200px; right:-200px; width:500px; height:500px; border-radius:50%; background:var(--primary); filter:blur(120px); opacity:0.12; }
.page-header .section-title { font-size:clamp(2rem,5vw,3.5rem); }
.page-breadcrumb { display:flex; align-items:center; gap:0.5rem; margin-top:1rem; font-size:0.85rem; color:var(--text-muted); }
.page-breadcrumb a { transition:color var(--transition-fast); }
.page-breadcrumb a:hover { color:var(--primary-light); }

/* ── Footer ── */
.footer { padding:3rem 0 2rem; border-top:1px solid var(--border-color); }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2rem; }
@media (min-width:640px) { .footer-grid { grid-template-columns:1fr 1fr; } }
.footer-brand p { color:var(--text-secondary); font-size:0.85rem; max-width:280px; line-height:1.6; margin-top:0.75rem; }
.footer-col h4 { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:1rem; }
.footer-col a { display:block; padding:0.25rem 0; font-size:0.85rem; color:var(--text-secondary); transition:color var(--transition-fast); }
.footer-col a:hover { color:var(--primary-light); }
.footer-bottom { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding-top:1.5rem; border-top:1px solid var(--border-color); font-size:0.75rem; color:var(--text-muted); }
@media (min-width:640px) { .footer-bottom { flex-direction:row; justify-content:space-between; } }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:var(--text-muted); transition:color var(--transition-fast); }
.footer-bottom-links a:hover { color:var(--primary-light); }

/* ── Scroll reveal ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* ── Utility ── */
.text-center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }
.mt-2 { margin-top:2rem; }

/* ── Projects ── */
.projects-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2rem; }
@media (min-width:640px) { .projects-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px) { .projects-grid { grid-template-columns:repeat(3,1fr); } }

.project-card {
  position:relative; padding:2rem; background:var(--bg-glass);
  border:1px solid var(--border-color); border-radius:var(--radius-lg);
  transition:all var(--transition-normal); overflow:hidden; backdrop-filter:blur(10px);
}
.project-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(108,63,224,0.05),rgba(0,229,160,0.05)); opacity:0; transition:opacity var(--transition-normal); }
.project-card:hover::before { opacity:1; }
.project-card:hover { transform:translateY(-4px); border-color:var(--border-glow); box-shadow:var(--shadow-glow); }
.project-card .highlight-box { position:absolute; width:200px; height:200px; background:radial-gradient(circle,rgba(108,63,224,0.15),transparent 70%); border-radius:50%; pointer-events:none; opacity:0; transition:opacity 0.3s ease; transform:translate(-50%,-50%); }
.project-card:hover .highlight-box { opacity:1; }
.project-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:0.5rem; position:relative; z-index:1; }
.project-card p { font-size:0.9rem; color:var(--text-secondary); line-height:1.6; position:relative; z-index:1; }

.project-badge {
  display:inline-block; padding:0.25rem 0.75rem; font-size:0.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em;
  background:rgba(108,63,224,0.15); color:var(--primary-light);
  border:1px solid rgba(108,63,224,0.25); border-radius:var(--radius-full);
  margin-bottom:1rem; position:relative; z-index:1;
}

.project-status {
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:1.25rem; font-size:0.8rem; font-weight:500;
  color:var(--text-muted); position:relative; z-index:1;
}
.project-status-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); animation:pulse 2s ease-in-out infinite;
}

/* ── Impressum ── */
.impressum-content { max-width:720px; }
.impressum-content h3 { font-size:1.15rem; font-weight:700; margin-top:2rem; margin-bottom:0.5rem; }
.impressum-content h3:first-child { margin-top:0; }
.impressum-content h4 { font-size:0.95rem; font-weight:600; margin-top:1.25rem; margin-bottom:0.4rem; }
.impressum-content p { color:var(--text-secondary); line-height:1.7; font-size:0.9rem; margin-bottom:0.75rem; }
.impressum-content a { color:var(--primary-light); transition:color var(--transition-fast); }
.impressum-content a:hover { color:var(--accent); }

/* ── Focus / A11y ── */
:focus-visible { outline:2px solid var(--primary-light); outline-offset:2px; }
::selection { background:rgba(108,63,224,0.3); color:var(--text-primary); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-darker); }
::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-light); }