/* =============================================
   Serbul3D — Design System & Styles
   ============================================= */
/* Inter */
@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url('assets/fonts/Inter-300.ttf') format('truetype');
}

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('assets/fonts/Inter-400.ttf') format('truetype');
}

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('assets/fonts/Inter-500.ttf') format('truetype');
}

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('assets/fonts/Inter-600.ttf') format('truetype');
}

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('assets/fonts/Inter-700.ttf') format('truetype');
}

/* Space Grotesk */
@font-face {
   font-family: 'Space Grotesk';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('assets/fonts/SpaceGrotesk-400.ttf') format('truetype');
}

@font-face {
   font-family: 'Space Grotesk';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('assets/fonts/SpaceGrotesk-500.ttf') format('truetype');
}

@font-face {
   font-family: 'Space Grotesk';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('assets/fonts/SpaceGrotesk-600.ttf') format('truetype');
}

@font-face {
   font-family: 'Space Grotesk';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('assets/fonts/SpaceGrotesk-700.ttf') format('truetype');
}

/* ---- CSS Custom Properties ---- */
:root {
   --color-bg: #0a0a0a;
   --color-surface: #111111;
   --color-surface-2: #1a1a1a;
   --color-surface-3: #222222;
   --color-card: rgba(255, 255, 255, 0.03);
   --color-card-hover: rgba(255, 255, 255, 0.06);
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-hover: rgba(255, 255, 255, 0.15);
   --color-text: #ffffff;
   --color-text-secondary: #a0a0a0;
   --color-text-muted: #666666;
   --color-accent: #B5CC18;
   --color-accent-dark: #8fa610;
   --color-accent-hover: #c8df2a;
   --color-accent-glow: rgba(181, 204, 24, 0.15);
   --font-heading: 'Space Grotesk', sans-serif;
   --font-body: 'Inter', sans-serif;
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-2xl: 3rem;
   --space-3xl: 4rem;
   --space-4xl: 6rem;
   --space-section: clamp(5rem, 10vw, 8rem);
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-full: 9999px;
   --transition-fast: 0.2s ease;
   --transition-base: 0.3s ease;
   --transition-slow: 0.5s ease;
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
   --shadow-glow: 0 0 30px var(--color-accent-glow);
   --container-max: 1200px;
   --container-wide: 1400px;
   --header-height: 80px;
}

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

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

body {
   font-family: var(--font-body);
   background: var(--color-bg);
   color: var(--color-text);
   line-height: 1.6;
   overflow-x: hidden
}

/* ---- Bilingual ---- */
html[lang="en"] [data-lang="de"]:not(.lang-btn),
html[lang="de"] [data-lang="en"]:not(.lang-btn) {
   display: none !important
}

/* ---- Typography ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-heading);
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-text)
}

h1 {
   font-size: clamp(2.5rem, 6vw, 4.5rem)
}

h2 {
   font-size: clamp(2rem, 4vw, 3rem)
}

h3 {
   font-size: clamp(1.25rem, 2vw, 1.5rem)
}

p {
   color: var(--color-text-secondary);
   line-height: 1.7
}

a {
   color: var(--color-accent);
   text-decoration: none;
   transition: color var(--transition-fast)
}

a:hover {
   color: var(--color-accent-hover)
}

.accent-text {
   color: var(--color-accent)
}

.gradient-text {
   background: linear-gradient(135deg, var(--color-accent), #e0f050);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

/* ---- Layout ---- */
.container {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: 0 var(--space-xl)
}

.container-wide {
   max-width: var(--container-wide);
   margin: 0 auto;
   padding: 0 var(--space-xl)
}

.section {
   padding: var(--space-section) 0
}

.section-header {
   text-align: center;
   margin-bottom: var(--space-3xl)
}

.section-header h2 {
   margin-bottom: var(--space-md)
}

.section-header p {
   max-width: 600px;
   margin: 0 auto;
   font-size: 1.125rem
}

/* ---- Buttons ---- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   padding: 14px 32px;
   border-radius: var(--radius-full);
   font-family: var(--font-body);
   font-weight: 600;
   font-size: 1rem;
   cursor: pointer;
   border: none;
   transition: all var(--transition-base);
   text-decoration: none
}

.btn-primary {
   background: var(--color-accent);
   color: #0a0a0a
}

.btn-primary:hover {
   background: var(--color-accent-hover);
   color: #0a0a0a;
   transform: translateY(-2px);
   box-shadow: var(--shadow-glow)
}

.btn-secondary {
   background: transparent;
   color: var(--color-text);
   border: 1px solid var(--color-border-hover)
}

.btn-secondary:hover {
   border-color: var(--color-accent);
   color: var(--color-accent);
   transform: translateY(-2px)
}

.btn-icon {
   display: inline-flex;
   transition: transform var(--transition-fast)
}

.btn:hover .btn-icon {
   transform: translateX(4px)
}

/* =============================================
   HEADER
   ============================================= */
.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 0 var(--space-xl);
   height: var(--header-height);
   display: flex;
   align-items: center;
   transition: all var(--transition-base)
}

.header.scrolled {
   background: rgba(10, 10, 10, 0.85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--color-border)
}

.header-inner {
   max-width: var(--container-wide);
   width: 100%;
   height: 100%;
   /* Ensure full height for centering */
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.logo {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   font-family: var(--font-heading);
   font-weight: 700;
   font-size: 1.5rem;
   color: var(--color-text);
   text-decoration: none;
   margin: 0;
   /* Remove any potential default margin */
   padding: 0;
   line-height: 1;
   /* Fix vertical alignment */
}

.logo img {
   height: 40px;
   width: auto
}

.logo-text {
   display: flex;
   align-items: baseline;
   gap: 2px;
   letter-spacing: -0.5px
}

.logo-s,
.logo-d {
   color: #757575
}

.logo-3 {
   color: var(--color-accent)
}

.nav {
   display: flex;
   align-items: center;
   gap: var(--space-xl)
}

.nav-link {
   color: var(--color-text-secondary);
   font-size: 0.9rem;
   font-weight: 500;
   transition: color var(--transition-fast);
   text-decoration: none
}

.nav-link:hover {
   color: var(--color-text)
}

.header-actions {
   display: flex;
   align-items: center;
   gap: var(--space-lg)
}

/* Language Switcher */
.lang-switcher {
   display: flex;
   align-items: center;
   gap: 4px;
   background: rgba(255, 255, 255, 0.06);
   border-radius: var(--radius-full);
   padding: 4px;
   border: 1px solid rgba(255, 255, 255, 0.12)
}

.lang-btn {
   padding: 6px 14px;
   border-radius: var(--radius-full);
   font-size: 0.8rem;
   font-weight: 600;
   font-family: var(--font-body);
   cursor: pointer;
   border: none;
   background: transparent;
   color: #bbb;
   transition: all var(--transition-fast);
   text-transform: uppercase;
   letter-spacing: .5px
}

.lang-btn.active {
   background: var(--color-accent);
   color: #0a0a0a
}

.lang-btn:hover:not(.active) {
   color: #fff;
   background: rgba(255, 255, 255, 0.08)
}

/* Mobile Menu */
.menu-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   background: none;
   border: none;
   padding: 8px;
   z-index: 1001
}

.menu-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--color-text);
   transition: all var(--transition-base);
   border-radius: 2px
}

.menu-toggle.active span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px)
}

.menu-toggle.active span:nth-child(2) {
   opacity: 0
}

.menu-toggle.active span:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px)
}

/* ---- Header Socials ---- */
.header-socials {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-right: 0;
   padding-right: 24px;
   border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.social-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.05);
   color: var(--color-text-muted);
   transition: all var(--transition-fast);
}

.social-btn:hover {
   background: rgba(255, 255, 255, 0.1);
   color: var(--color-accent);
   transform: translateY(-2px);
}

.social-btn svg {
   width: 20px;
   height: 20px;
}

/* =============================================
   HERO
   ============================================= */
.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   overflow: hidden;
   padding-top: var(--header-height)
}

.hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0
}

/* ---- Hero Video Background ---- */
.hero-video {
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   transform: translate(-50%, -50%);
   object-fit: cover;
   z-index: 0;
   opacity: 0;
   transition: opacity 1.2s ease;
}

.hero-video.loaded {
   opacity: 1;
}

.hero-video-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg,
         rgba(10, 10, 10, 0.65) 0%,
         rgba(10, 10, 10, 0.45) 40%,
         rgba(10, 10, 10, 0.7) 100%);
   z-index: 1;
}

/* When video is loaded, hide orbs for cleaner look */
.hero-video.loaded~.hero-orb {
   opacity: 0;
   transition: opacity 1s ease;
}

.hero-video.loaded~.hero-grid {
   opacity: 0.3;
}

.hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(100px);
   opacity: .4;
   animation: float 8s ease-in-out infinite
}

.hero-orb-1 {
   width: 500px;
   height: 500px;
   background: var(--color-accent);
   top: -10%;
   right: -10%
}

.hero-orb-2 {
   width: 400px;
   height: 400px;
   background: #1a4a1a;
   bottom: -10%;
   left: -5%;
   animation-delay: -3s
}

.hero-orb-3 {
   width: 300px;
   height: 300px;
   background: var(--color-accent-dark);
   top: 40%;
   left: 30%;
   opacity: .2;
   animation-delay: -5s
}

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

.hero-content {
   position: relative;
   z-index: 1;
   max-width: 900px;
   padding: 0 var(--space-xl)
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-sm);
   padding: 8px 20px;
   border-radius: var(--radius-full);
   background: var(--color-accent-glow);
   border: 1px solid rgba(181, 204, 24, .2);
   font-size: .85rem;
   color: var(--color-accent);
   font-weight: 500;
   margin-bottom: var(--space-xl);
   animation: fadeInUp .6s ease forwards
}

.hero-badge-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--color-accent);
   animation: pulse 2s ease-in-out infinite
}

.hero h1 {
   margin-bottom: var(--space-lg);
   animation: fadeInUp .6s ease .2s forwards;
   opacity: 0
}

.hero-subtitle {
   font-size: clamp(1.1rem, 2vw, 1.3rem);
   color: var(--color-text-secondary);
   max-width: 600px;
   margin: 0 auto var(--space-2xl);
   animation: fadeInUp .6s ease .4s forwards;
   opacity: 0
}

.hero-cta {
   animation: fadeInUp .6s ease .6s forwards;
   opacity: 0;
   display: flex;
   gap: var(--space-md);
   justify-content: center;
   flex-wrap: wrap
}

/* =============================================
   FORM
   ============================================= */
.form-section {
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border)
}

.form-wrapper {
   max-width: 700px;
   margin: 0 auto
}

.form-card {
   background: var(--color-surface-2);
   border-radius: var(--radius-xl);
   border: 1px solid var(--color-border);
   overflow: hidden
}

.form-tabs {
   display: flex;
   border-bottom: 1px solid var(--color-border)
}

.form-tab {
   flex: 1;
   padding: 16px;
   text-align: center;
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .95rem;
   cursor: pointer;
   background: transparent;
   border: none;
   color: var(--color-text-muted);
   transition: all var(--transition-base);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.form-tab::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--color-accent);
   transform: scaleX(0);
   transition: transform var(--transition-base)
}

.form-tab.active {
   color: var(--color-accent)
}

.form-tab.active::after {
   transform: scaleX(1)
}

.form-tab:hover:not(.active) {
   color: var(--color-text-secondary)
}

.form-body {
   padding: var(--space-2xl)
}

.form-panel {
   display: none
}

.form-panel.active {
   display: block;
   animation: fadeIn .3s ease
}

/* File Upload */
.upload-zone {
   border: 2px dashed var(--color-border-hover);
   border-radius: var(--radius-lg);
   padding: var(--space-2xl);
   text-align: center;
   cursor: pointer;
   transition: all var(--transition-base);
   margin-bottom: var(--space-xl);
   background: rgba(255, 255, 255, .01)
}

.upload-zone:hover,
.upload-zone.drag-over {
   border-color: var(--color-accent);
   background: var(--color-accent-glow)
}

.upload-zone.error {
   border-color: #ff4444;
   background: rgba(255, 68, 68, 0.05);
}

.upload-error-message {
   color: #ff4444;
   font-size: 0.85rem;
   margin-top: -10px;
   margin-bottom: 20px;
   text-align: center;
   display: none;
   animation: fadeIn 0.3s ease;
}

.upload-zone-icon {
   width: 48px;
   height: 48px;
   margin: 0 auto var(--space-md);
   color: var(--color-accent)
}

.upload-zone-text {
   font-size: .95rem;
   color: var(--color-text-secondary);
   margin-bottom: var(--space-sm)
}

.upload-zone-text strong {
   color: var(--color-accent)
}

.upload-zone-hint {
   font-size: .8rem;
   color: var(--color-text-muted)
}

.upload-file-info {
   display: none;
   align-items: center;
   gap: var(--space-md);
   padding: var(--space-md);
   background: var(--color-accent-glow);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-xl);
   border: 1px solid rgba(181, 204, 24, .2)
}

.upload-file-info.visible {
   display: flex
}

.upload-file-name {
   flex: 1;
   font-size: .9rem;
   color: var(--color-accent);
   font-weight: 500
}

.upload-file-remove {
   background: none;
   border: none;
   color: var(--color-text-muted);
   cursor: pointer;
   padding: 4px;
   transition: color var(--transition-fast)
}

.upload-file-remove:hover {
   color: #ff4444
}

/* Form Fields */
.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-md);
   margin-bottom: var(--space-md)
}

.form-group {
   margin-bottom: var(--space-md)
}

.form-label {
   display: block;
   font-size: .85rem;
   font-weight: 500;
   color: var(--color-text-secondary);
   margin-bottom: var(--space-sm)
}

.form-input,
.form-textarea {
   width: 100%;
   padding: 12px 16px;
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
   background: var(--color-surface);
   color: var(--color-text);
   font-family: var(--font-body);
   font-size: .95rem;
   transition: all var(--transition-fast);
   outline: none
}

.form-input:focus,
.form-textarea:focus {
   border-color: var(--color-accent);
   box-shadow: 0 0 0 3px var(--color-accent-glow)
}

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

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

.form-submit {
   width: 100%;
   margin-top: var(--space-md)
}

/* =============================================
   CLIENTS (Für wen)
   ============================================= */
.clients-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-xl)
}

.client-card {
   background: var(--color-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   padding: var(--space-2xl);
   text-align: center;
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden
}

.client-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--color-accent-glow), transparent);
   opacity: 0;
   transition: opacity var(--transition-base)
}

.client-card:hover {
   border-color: var(--color-border-hover);
   transform: translateY(-4px)
}

.client-card:hover::before {
   opacity: 1
}

.client-card-icon {
   position: relative;
   width: 64px;
   height: 64px;
   margin: 0 auto var(--space-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-lg);
   background: var(--color-accent-glow);
   color: var(--color-accent)
}

.client-card-icon svg {
   width: 32px;
   height: 32px
}

.client-card h3 {
   position: relative;
   margin-bottom: var(--space-md);
   font-size: 1.15rem
}

.client-card p {
   position: relative;
   font-size: .9rem
}

/* =============================================
   SERVICES
   ============================================= */
#services {
   border-top: 1px solid var(--color-border);
}

.services-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-xl)
}

.service-card {
   background: var(--color-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   padding: var(--space-2xl) var(--space-xl);
   transition: all var(--transition-base);
   display: flex;
   gap: var(--space-xl);
   align-items: flex-start
}

.service-card:hover {
   border-color: var(--color-accent);
   background: var(--color-card-hover);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md)
}

.service-card-icon {
   flex-shrink: 0;
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-md);
   background: var(--color-accent-glow);
   color: var(--color-accent)
}

.service-card-icon svg {
   width: 28px;
   height: 28px
}

.service-card h3 {
   margin-bottom: var(--space-sm)
}

.service-card p {
   font-size: .9rem
}

/* =============================================
   WHY US
   ============================================= */
.why-section {
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border)
}

.why-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-xl)
}

.why-card {
   padding: var(--space-xl);
   border-radius: var(--radius-lg);
   background: var(--color-surface-2);
   border: 1px solid var(--color-border);
   transition: all var(--transition-base)
}

.why-card:hover {
   border-color: var(--color-border-hover);
   transform: translateY(-2px)
}

.why-card-icon {
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-md);
   background: var(--color-accent-glow);
   color: var(--color-accent);
   margin-bottom: var(--space-lg)
}

.why-card-icon svg {
   width: 22px;
   height: 22px
}

.why-card h3 {
   margin-bottom: var(--space-sm);
   font-size: 1.05rem
}

.why-card p {
   font-size: .875rem
}

/* =============================================
   PROCESS
   ============================================= */
.process-timeline {
   display: flex;
   align-items: flex-start;
   position: relative;
   max-width: 1000px;
   margin: 0 auto
}

.process-step {
   flex: 1;
   text-align: center;
   position: relative;
   padding: 0 var(--space-md)
}

.process-step-number {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--color-accent);
   color: #0a0a0a;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-heading);
   font-size: 1.5rem;
   font-weight: 700;
   margin: 0 auto var(--space-lg);
   position: relative;
   z-index: 2;
   box-shadow: 0 0 20px var(--color-accent-glow)
}

.process-step-connector {
   position: absolute;
   top: 32px;
   left: calc(50% + 32px);
   right: calc(-50% + 32px);
   height: 2px;
   background: var(--color-border-hover);
   z-index: 1
}

.process-step:last-child .process-step-connector {
   display: none
}

.process-step h3 {
   font-size: 1rem;
   margin-bottom: var(--space-sm)
}

.process-step p {
   font-size: .85rem;
   color: var(--color-text-muted)
}

/* =============================================
   PORTFOLIO
   ============================================= */
.portfolio-section {
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border)
}

.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-lg)
}

.portfolio-item {
   aspect-ratio: 4/3;
   border-radius: var(--radius-xl);
   overflow: hidden;
   position: relative;
   cursor: pointer;
   transition: transform var(--transition-base)
}

.portfolio-item:hover {
   transform: scale(1.02)
}

.portfolio-item:nth-child(1) {
   background: linear-gradient(135deg, #1a2a1a, #2a3a1a)
}

.portfolio-item:nth-child(2) {
   background: linear-gradient(135deg, #1a1a2e, #2a2a3e)
}

.portfolio-item:nth-child(3) {
   background: linear-gradient(135deg, #2e1a1a, #3e2a1a)
}

.portfolio-item:nth-child(4) {
   background: linear-gradient(135deg, #1a2e2e, #1a3e3e)
}

.portfolio-item:nth-child(5) {
   background: linear-gradient(135deg, #2e2e1a, #3e3e2a)
}

.portfolio-item:nth-child(6) {
   background: linear-gradient(135deg, #1a1a1a, #2a2a2a)
}

.portfolio-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .8) 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: var(--space-xl);
   opacity: 0;
   transition: opacity var(--transition-base)
}

.portfolio-item:hover .portfolio-overlay {
   opacity: 1
}

.portfolio-overlay h3 {
   font-size: 1.1rem;
   margin-bottom: var(--space-xs)
}

.portfolio-tag {
   font-size: .8rem;
   color: var(--color-accent);
   font-weight: 500
}

.portfolio-demo-label {
   position: absolute;
   top: var(--space-md);
   right: var(--space-md);
   padding: 4px 12px;
   border-radius: var(--radius-full);
   background: var(--color-accent-glow);
   border: 1px solid rgba(181, 204, 24, .2);
   font-size: .75rem;
   color: var(--color-accent);
   font-weight: 500
}

/* =============================================
   FAQ
   ============================================= */
.faq-list {
   max-width: 800px;
   margin: 0 auto
}

.faq-item {
   border-bottom: 1px solid var(--color-border)
}

.faq-question {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-xl) 0;
   background: none;
   border: none;
   cursor: pointer;
   text-align: left;
   font-family: var(--font-heading);
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--color-text);
   transition: color var(--transition-fast)
}

.faq-question:hover {
   color: var(--color-accent)
}

.faq-icon {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 1px solid var(--color-border-hover);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-base);
   margin-left: var(--space-md)
}

.faq-icon svg {
   width: 14px;
   height: 14px;
   color: var(--color-text-secondary);
   transition: transform var(--transition-base)
}

.faq-item.open .faq-icon {
   background: var(--color-accent);
   border-color: var(--color-accent)
}

.faq-item.open .faq-icon svg {
   transform: rotate(45deg);
   color: #0a0a0a
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--transition-slow)
}

.faq-answer-content {
   padding: 0 0 var(--space-xl) 0;
   font-size: .95rem;
   color: var(--color-text-secondary);
   line-height: 1.7
}

/* =============================================
   CTA
   ============================================= */
.cta-section {
   position: relative;
   overflow: hidden
}

.cta-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--color-accent-glow), transparent, var(--color-accent-glow));
   opacity: .5
}

.cta-content {
   position: relative;
   text-align: center;
   max-width: 700px;
   margin: 0 auto
}

.cta-content h2 {
   margin-bottom: var(--space-lg)
}

.cta-content p {
   font-size: 1.125rem;
   margin-bottom: var(--space-2xl)
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
   padding: var(--space-3xl) 0 var(--space-xl) 0
}

.footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--space-xl)
}

.footer-links {
   display: flex;
   gap: var(--space-xl)
}

.footer-link {
   color: var(--color-text-secondary);
   font-size: .9rem;
   transition: color var(--transition-fast);
   text-decoration: none
}

.footer-link:hover {
   color: var(--color-accent)
}

.footer-copyright {
   font-size: .85rem;
   color: var(--color-text-muted)
}

.footer-bottom {
   margin-top: var(--space-2xl);
   padding-top: var(--space-xl);
   border-top: 1px solid var(--color-border);
   text-align: center
}

/* =============================================
   TOAST
   ============================================= */
.toast {
   position: fixed;
   bottom: 30px;
   right: 30px;
   padding: 16px 24px;
   border-radius: var(--radius-md);
   background: var(--color-surface-2);
   border: 1px solid var(--color-accent);
   color: var(--color-text);
   font-size: .9rem;
   z-index: 9999;
   transform: translateY(100px);
   opacity: 0;
   transition: all var(--transition-base);
   box-shadow: var(--shadow-lg)
}

.toast.show {
   transform: translateY(0);
   opacity: 1
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes float {

   0%,
   100% {
      transform: translate(0, 0)
   }

   25% {
      transform: translate(20px, -30px)
   }

   50% {
      transform: translate(-10px, 20px)
   }

   75% {
      transform: translate(15px, 10px)
   }
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .3
   }
}

.reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity .6s ease, transform .6s ease
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0)
}

.reveal-delay-1 {
   transition-delay: .1s
}

.reveal-delay-2 {
   transition-delay: .2s
}

.reveal-delay-3 {
   transition-delay: .3s
}

.reveal-delay-4 {
   transition-delay: .4s
}

/* =============================================
   PORTFOLIO
   ============================================= */
.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-xl);
   width: 100%;
}

.portfolio-item {
   position: relative;
   border-radius: var(--radius-xl);
   overflow: hidden;
   aspect-ratio: 4/3;
   background: #1a1a1a;
   cursor: pointer;
   transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.portfolio-item img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
   transition: transform var(--transition-slow);
}

.portfolio-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-xl);
}

.portfolio-item:hover img {
   transform: scale(1.05);
}

.portfolio-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: var(--space-lg);
   opacity: 0;
   transition: opacity var(--transition-base);
   z-index: 10;
}

.portfolio-item:hover .portfolio-overlay {
   opacity: 1;
}

.portfolio-overlay h3 {
   font-size: 1.25rem;
   margin-bottom: var(--space-xs);
   color: var(--color-text);
}

.portfolio-tag {
   font-size: 0.85rem;
   color: var(--color-accent);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;
}



/* Checkbox Styles */
.form-checkbox-group {
   margin-top: -10px;
   margin-bottom: 20px;
}

.checkbox-title {
   font-size: 0.9rem;
   font-weight: 500;
   margin-bottom: 8px;
   color: var(--color-text);
}

.checkbox-wrapper {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.checkbox-label-only {
   display: flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   margin-top: 2px;
}

.checkbox-text {
   font-size: 0.9rem;
   color: var(--color-text-secondary);
   line-height: 1.5;
}

.checkbox-text a {
   color: var(--color-accent);
   text-decoration: none;
   border-bottom: 1px solid transparent;
   transition: border-color 0.2s;
}

.checkbox-error-message {
   color: #ff4444;
   font-size: 0.85rem;
   margin-top: 6px;
   padding-left: 30px;
   display: none;
   animation: fadeIn 0.3s ease;
}

.checkbox-text a:hover {
   border-bottom-color: var(--color-accent);
}

.checkbox-label-only input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
   appearance: none;
   -webkit-appearance: none;
}

.checkbox-custom {
   position: relative;
   display: block;
   height: 18px;
   width: 18px;
   min-width: 18px;
   background-color: transparent !important;
   border: 1px solid var(--color-border);
   border-radius: 4px;
   transition: all 0.2s ease;
}

.checkbox-label-only:hover input~.checkbox-custom {
   border-color: var(--color-accent);
}

.checkbox-label-only input:checked~.checkbox-custom {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
}

.checkbox-custom:after {
   content: "";
   position: absolute;
   display: none;
   left: 5px;
   top: 1px;
   width: 6px;
   height: 10px;
   border: solid #ffffff;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.checkbox-label-only input:checked~.checkbox-custom:after {
   display: block;
}

.checkbox-label-only input:focus~.checkbox-custom {
   box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.checkbox-error .checkbox-custom {
   border-color: #ff4444;
}

.checkbox-error~.checkbox-text {
   color: #ff4444;
}

/* =============================================
   RESPONSIVE — 2K+
   ============================================= */
@media(min-width:1441px) {
   :root {
      font-size: 18px
   }

   .container {
      max-width: 1300px
   }

   .container-wide {
      max-width: 1600px
   }
}

/* ---- Tablet landscape ---- */
@media(max-width:1024px) {
   .clients-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .services-grid {
      grid-template-columns: 1fr
   }

   .why-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .portfolio-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .nav {
      display: none
   }

   .nav.open {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      background: #0a0a0a;
      justify-content: center;
      align-items: center;
      gap: var(--space-2xl);
      z-index: 10001;
      padding: 100px 20px 60px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
   }

   .nav.open .nav-link {
      font-size: 1.5rem;
      font-family: var(--font-heading);
      font-weight: 600
   }

   .menu-toggle {
      display: flex;
      z-index: 10002;
   }

   .header-cta-btn {
      display: none
   }

   .header-socials {
      padding-right: 16px;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
   }
}

/* ---- Tablet portrait ---- */
@media(max-width:768px) {
   :root {
      --space-section: clamp(3rem, 8vw, 5rem)
   }

   .clients-grid {
      grid-template-columns: 1fr;
      gap: var(--space-lg)
   }

   .why-grid {
      grid-template-columns: 1fr
   }

   .process-timeline {
      flex-direction: column;
      align-items: center;
      gap: var(--space-xl)
   }

   .process-step {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      text-align: left;
      padding: 0;
      width: 100%;
      max-width: 400px
   }

   .process-step-number {
      width: 48px;
      height: 48px;
      font-size: 1.2rem;
      margin: 0;
      flex-shrink: 0
   }

   .process-step-connector {
      display: none
   }

   .process-timeline {
      flex-direction: column;
      align-items: center;
      gap: var(--space-xl)
   }

   .process-step {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      text-align: left;
      padding: 0;
      width: 100%;
      max-width: 400px
   }

   .process-step-number {
      width: 48px;
      height: 48px;
      font-size: 1.2rem;
      margin: 0;
      flex-shrink: 0
   }

   .portfolio-grid {
      grid-template-columns: 1fr
   }




}

/* ---- Mobile ---- */
@media(max-width:480px) {

   .container,
   .container-wide {
      padding: 0 16px;
   }

   .form-body {
      padding: var(--space-lg)
   }

   .client-card {
      padding: var(--space-xl)
   }

   .service-card {
      flex-direction: column;
      padding: var(--space-xl)
   }

   .hero-cta {
      flex-direction: column;
      align-items: center
   }

   .hero-cta .btn {
      width: 100%;
      justify-content: center
   }

   .form-tab {
      font-size: .8rem;
      padding: 12px
   }

   /* ---- Mobile Header ---- */
   .header {
      padding: 0 12px;
      padding-right: max(12px, env(safe-area-inset-right));
      padding-left: max(12px, env(safe-area-inset-left));
   }

   .header-inner {
      gap: 8px;
      padding: 0;
   }

   .logo {
      font-size: 1rem;
      gap: 4px;
      flex-shrink: 1;
      min-width: 0;
      overflow: hidden;
   }

   .logo img {
      height: 28px;
      flex-shrink: 0;
   }

   .logo-text {
      font-size: inherit;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .header-actions {
      gap: 6px;
      flex-shrink: 0;
   }

   .header-socials {
      gap: 4px;
      padding-right: 6px;
      margin-right: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
   }

   .social-btn {
      width: 32px;
      height: 32px;
   }

   .social-btn svg {
      width: 16px;
      height: 16px;
   }

   .lang-switcher {
      gap: 2px;
      padding: 2px;
   }

   .lang-btn {
      padding: 5px 8px;
      font-size: .7rem;
   }

   .menu-toggle {
      padding: 6px;
      width: 40px;
      height: 40px;
      justify-content: center;
      align-items: center;
      margin-left: 0;
      margin-right: 2px;
      flex-shrink: 0;
      z-index: 10002;
   }

   .menu-toggle span {
      width: 20px;
   }

   /* ---- Mobile Nav Overlay ---- */
   .nav.open {
      z-index: 10001;
      padding: 100px 20px 60px;
   }
}

/* Tablet: reduce header-socials separator */
@media (max-width: 768px) {
   .header-socials {
      padding-right: 12px;
   }
}