/*
Theme Name: iDeaLSunucu
Theme URI: https://idealsunucu.com.tr
Author: Mustafa DEVEBAKAN
Author URI: https://idealsunucu.com.tr
Description: Profesyonel Web Tasarım ve Yazılım Teması - 14 Hizmet, 81 İl, Full SEO Uyumlu
Version: 7.0.0
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: idealsunucu
*/

/* ============================================================================
   CSS CUSTOM PROPERTIES - WEB AJANSI 3D RENK PALETİ
   ============================================================================ */
:root {
    /* 🎨 Web Tasarım Ajansı Renkleri */
    --df-web-design: #3b82f6;
    --df-software: #8b5cf6;
    --df-marketing: #06b6d4;
    --df-seo: #10b981;
    
    /* Ana Renkler */
    --df-primary: #2563eb;
    --df-primary-light: #3b82f6;
    --df-primary-dark: #1d4ed8;
    --df-secondary: #7c3aed;
    --df-secondary-light: #8b5cf6;
    --df-tertiary: #06b6d4;
    --df-accent: #f97316;
    --df-cta: #ea580c;
    --df-cta-dark: #c2410c;
    --df-success: #10b981;
    --df-warning: #f59e0b;
    --df-danger: #ef4444;
    
    /* Arka Planlar */
    --df-bg-primary: #0a0f1a;
    --df-bg-secondary: #111827;
    --df-bg-card: #1e293b;
    --df-bg-card-hover: #334155;
    
    /* Metin */
    --df-text-primary: #f8fafc;
    --df-text-secondary: #cbd5e1;
    --df-text-tertiary: #94a3b8;
    
    /* Borders */
    --df-border: #334155;
    --df-border-light: #475569;
    
    /* Spacing Scale */
    --df-space-xs: 0.25rem;
    --df-space-sm: 0.5rem;
    --df-space-md: 1rem;
    --df-space-lg: 1.5rem;
    --df-space-xl: 2rem;
    --df-space-2xl: 3rem;
    --df-space-3xl: 4rem;
    --df-space-4xl: 6rem;
    
    /* Typography */
    --df-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --df-font-display: 'Plus Jakarta Sans', var(--df-font-sans);
    
    /* Border Radius */
    --df-radius-sm: 0.375rem;
    --df-radius-md: 0.5rem;
    --df-radius-lg: 0.75rem;
    --df-radius-xl: 1rem;
    --df-radius-2xl: 1.5rem;
    --df-radius-full: 9999px;
    
    /* Shadows */
    --df-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --df-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --df-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --df-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
    --df-shadow-glow: 0 0 40px rgba(30, 64, 175, 0.3);
    
    /* Transitions */
    --df-transition-fast: 0.15s ease;
    --df-transition-base: 0.3s ease;
    --df-transition-slow: 0.5s ease;
    
    /* Layout */
    --df-header-height: 80px;
    --df-container-max: 1280px;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--df-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--df-text-secondary);
    background-color: var(--df-bg-primary);
    overflow-x: hidden;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--df-font-display);
    font-weight: 700;
    color: var(--df-text-primary);
    line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.text-gradient {
    background: linear-gradient(135deg, var(--df-primary-light) 0%, var(--df-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
.df-container {
    width: 100%;
    max-width: var(--df-container-max);
    margin: 0 auto;
    padding: 0 var(--df-space-lg);
}

.df-section {
    padding: var(--df-space-4xl) 0;
}

.df-section--compact {
    padding: var(--df-space-3xl) 0;
}

.df-section__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--df-space-3xl);
}

.df-section__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-xs) var(--df-space-md);
    background: rgba(30, 64, 175, 0.15);
    border: 1px solid rgba(30, 64, 175, 0.3);
    border-radius: var(--df-radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--df-primary-light);
    margin-bottom: var(--df-space-lg);
}

.df-section__title {
    margin-bottom: var(--df-space-md);
}

.df-section__desc {
    font-size: 1.1rem;
    color: var(--df-text-tertiary);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.df-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--df-space-sm);
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--df-radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--df-transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.df-btn--primary {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.4);
}

.df-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.5);
    color: white;
}

.df-btn--cta {
    background: linear-gradient(135deg, var(--df-accent) 0%, #ea580c 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.df-btn--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5);
    color: white;
}

.df-btn--outline {
    background: transparent;
    border: 2px solid var(--df-border-light);
    color: var(--df-text-primary);
}

.df-btn--outline:hover {
    border-color: var(--df-primary);
    background: rgba(30, 64, 175, 0.1);
    color: var(--df-primary-light);
}

.df-btn--white {
    background: white;
    color: var(--df-primary);
}

.df-btn--white:hover {
    background: var(--df-text-primary);
    transform: translateY(-2px);
}

.df-btn--whatsapp {
    background: #25D366;
    color: white;
}

.df-btn--whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
    color: white;
}

.df-btn--secondary {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    color: var(--df-text-primary);
}

.df-btn--secondary:hover {
    border-color: var(--df-primary);
    background: var(--df-bg-card-hover);
}

.df-btn--sm {
    padding: 10px 20px;
    font-size: 0.875rem;
}

.df-btn--lg {
    padding: 18px 36px;
    font-size: 1.05rem;
}

.df-btn--block {
    width: 100%;
}

/* ============================================================================
   TOPBAR
   ============================================================================ */
.df-topbar {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    font-size: 0.85rem;
    position: relative;
}

.df-topbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--df-primary) 0%, var(--df-secondary) 50%, var(--df-accent) 100%);
}

.df-topbar__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

.df-topbar__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.df-topbar__item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--df-text-secondary);
    padding: 12px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--df-transition-base);
    white-space: nowrap;
}

.df-topbar__item:first-child {
    padding-left: 0;
}

.df-topbar__item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.df-topbar__item svg {
    color: var(--df-primary-light);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.df-topbar__item a,
.df-topbar__item span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--df-text-secondary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.df-topbar__item a:hover {
    color: var(--df-primary-light);
}

.df-topbar__label {
    color: var(--df-text-tertiary);
    font-weight: 400;
}

.df-topbar__item strong {
    color: var(--df-text-primary);
    font-weight: 600;
}

.df-topbar__cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.df-topbar__btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--df-transition-base);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.df-topbar__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.df-topbar__btn--phone {
    color: var(--df-text-primary);
    background: transparent;
}

.df-topbar__btn--phone:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--df-primary-light);
}

.df-topbar__btn--whatsapp {
    color: #25D366;
    background: rgba(37, 211, 102, 0.08);
}

.df-topbar__btn--whatsapp:hover {
    background: rgba(37, 211, 102, 0.15);
    color: #25D366;
}

/* Topbar Responsive */
.df-topbar__item--hours {
    display: none;
}

@media (min-width: 1200px) {
    .df-topbar__item--hours {
        display: inline-flex;
    }
}

@media (max-width: 992px) {
    .df-topbar__item:nth-child(2) { display: none; }
    .df-topbar__item { padding: 10px 15px; }
    .df-topbar__btn { padding: 10px 15px; }
}

@media (max-width: 768px) {
    .df-topbar { display: none; }
}

/* ============================================================================
   HEADER - Modern Glassmorphism Design
   ============================================================================ */
.df-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(59, 130, 246, 0.5) 20%, 
        rgba(6, 182, 212, 0.5) 50%, 
        rgba(59, 130, 246, 0.5) 80%, 
        transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.df-header.scrolled {
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.df-header.scrolled::before {
    opacity: 1;
}

.df-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--df-header-height);
}

.df-header__logo {
    position: relative;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.df-header__logo:hover {
    transform: scale(1.02);
}

.df-header__logo img {
    height: 45px;
    transition: all 0.3s ease;
}

.df-header__logo-text {
    font-family: var(--df-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--df-text-primary) 0%, var(--df-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.df-header__logo-text span {
    color: var(--df-primary-light);
}

/* Desktop Navigation - Modern Style */
.df-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.df-nav__item {
    position: relative;
}

.df-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--df-text-secondary);
    border-radius: var(--df-radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.df-nav__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

.df-nav__link:hover::before,
.df-nav__link--active::before {
    opacity: 1;
}

.df-nav__link:hover,
.df-nav__link--active {
    color: var(--df-text-primary);
    transform: translateY(-1px);
}

.df-nav__link svg {
    transition: transform 0.3s ease;
}

.df-nav__item:hover .df-nav__link svg {
    transform: rotate(180deg);
}

/* Dropdown - Modern Glass Effect */
.df-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.df-nav__item:hover .df-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.df-nav__dropdown a {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: 12px 16px;
    color: var(--df-text-secondary);
    border-radius: var(--df-radius-lg);
    transition: all 0.25s ease;
    position: relative;
}

.df-nav__dropdown a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--df-primary) 0%, var(--df-primary-light) 100%);
    border-radius: 3px;
    transition: height 0.25s ease;
}

.df-nav__dropdown a:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--df-text-primary);
    padding-left: 20px;
}

.df-nav__dropdown a:hover::before {
    height: 60%;
}
}

.df-nav__dropdown a svg {
    color: var(--df-primary-light);
    transition: transform 0.25s ease;
}

.df-nav__dropdown a:hover svg {
    transform: translateX(3px);
}

/* Mega Menu - Modern Glass Design */
.df-mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.98);
    width: 900px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--df-radius-2xl);
    padding: var(--df-space-xl);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.df-nav__item:hover .df-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

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

.df-mega-menu__category {
    position: relative;
}

.df-mega-menu__category h4 {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--df-primary-light);
    margin-bottom: var(--df-space-md);
    padding-bottom: var(--df-space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.df-mega-menu__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.df-mega-menu__links a {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--df-text-secondary);
    border-radius: var(--df-radius-lg);
    transition: all 0.25s ease;
}

.df-mega-menu__links a:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--df-text-primary);
    padding-left: 18px;
}

.df-mega-menu__links a svg {
    color: var(--df-text-tertiary);
    transition: all 0.25s ease;
}

.df-mega-menu__links a:hover svg {
    color: var(--df-primary-light);
}

/* Header CTA - Animated Button */
.df-header__cta {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
}

.df-header__cta .df-btn--cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--df-cta) 0%, var(--df-cta-dark) 100%);
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
}

.df-header__cta .df-btn--cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.df-header__cta .df-btn--cta:hover::before {
    left: 100%;
}

.df-header__cta .df-btn--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(234, 88, 12, 0.4);
}

@media (max-width: 1024px) {
    .df-nav,
    .df-header__cta { display: none; }
}

/* Mobile Menu Toggle */
.df-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.df-mobile-toggle span {
    width: 24px;
    height: 2px;
    background: var(--df-text-primary);
    transition: all var(--df-transition-fast);
}

@media (max-width: 1024px) {
    .df-mobile-toggle { display: flex; }
}

/* Mobile Menu */
.df-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--df-bg-secondary);
    z-index: 2000;
    transition: right var(--df-transition-base);
    overflow-y: auto;
}

.df-mobile-menu.active {
    right: 0;
}

.df-mobile-menu__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--df-transition-base);
}

.df-mobile-menu__overlay.active {
    opacity: 1;
    visibility: visible;
}

.df-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--df-space-lg);
    border-bottom: 1px solid var(--df-border);
}

.df-mobile-menu__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-md);
    color: var(--df-text-primary);
}

.df-mobile-menu__nav {
    padding: var(--df-space-lg);
}

.df-mobile-menu__item {
    border-bottom: 1px solid var(--df-border);
}

.df-mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--df-space-md) 0;
    font-weight: 500;
    color: var(--df-text-primary);
}

.df-mobile-menu__submenu {
    display: none;
    padding-bottom: var(--df-space-md);
}

.df-mobile-menu__item.active .df-mobile-menu__submenu {
    display: block;
}

.df-mobile-menu__submenu a {
    display: block;
    padding: var(--df-space-sm) var(--df-space-md);
    color: var(--df-text-secondary);
    font-size: 0.95rem;
}

.df-mobile-menu__footer {
    padding: var(--df-space-lg);
    border-top: 1px solid var(--df-border);
    margin-top: auto;
}

.df-mobile-menu__footer .df-btn {
    width: 100%;
    margin-bottom: var(--df-space-sm);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */
.df-hero {
    position: relative;
    min-height: calc(100vh - var(--df-header-height));
    display: flex;
    align-items: center;
    padding: var(--df-space-4xl) 0;
    overflow: hidden;
}

.df-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.df-hero__gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(30, 64, 175, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(8, 145, 178, 0.2) 0%, transparent 50%);
}

.df-hero__pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(rgba(30, 64, 175, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
}

.df-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 20s ease-in-out infinite;
}

.df-hero__orb--1 {
    width: 400px;
    height: 400px;
    background: var(--df-primary);
    top: -100px;
    right: -100px;
}

.df-hero__orb--2 {
    width: 300px;
    height: 300px;
    background: var(--df-secondary);
    bottom: -50px;
    left: -50px;
    animation-delay: -10s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.1); }
}

.df-hero__content {
    position: relative;
    z-index: 1;
    max-width: 750px;
}

.df-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) var(--df-space-lg);
    background: rgba(30, 64, 175, 0.15);
    border: 1px solid rgba(30, 64, 175, 0.3);
    border-radius: var(--df-radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-primary-light);
    margin-bottom: var(--df-space-xl);
}

.df-hero__title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--df-space-lg);
}

.df-hero__desc {
    font-size: 1.2rem;
    color: var(--df-text-secondary);
    margin-bottom: var(--df-space-2xl);
    max-width: 600px;
}

.df-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-md);
    margin-bottom: var(--df-space-3xl);
}

.df-hero__stats {
    display: flex;
    gap: var(--df-space-2xl);
}

.df-hero__stat {
    text-align: left;
}

.df-hero__stat-value {
    font-family: var(--df-font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--df-text-primary);
}

.df-hero__stat-label {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
}

@media (max-width: 768px) {
    .df-hero__stats {
        flex-direction: column;
        gap: var(--df-space-lg);
    }
}

/* Hero with Background Image */
.df-hero[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.df-hero[style*="background-image"] .df-hero__gradient {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
}

/* Hero Scroll Indicator */
.df-hero__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--df-text-tertiary);
    font-size: 0.85rem;
    animation: fadeInUp 1s ease 1s both;
}

.df-hero__scroll-icon {
    width: 30px;
    height: 50px;
    border: 2px solid var(--df-text-tertiary);
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
}

.df-hero__scroll-icon svg {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.5; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 768px) {
    .df-hero__scroll {
        display: none;
    }
    .df-hero__stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   3D ANIMATED SLIDER
   ============================================================================ */
.df-slider {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--df-bg-primary);
}

/* 3D Animated Background */
.df-slider__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.df-slider__gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 100% 80% at 20% 0%, rgba(37, 99, 235, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 80% 100%, rgba(124, 58, 237, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%);
    animation: gradientPulse 8s ease-in-out infinite;
}

@keyframes gradientPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.df-slider__mesh {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: meshMove 20s linear infinite;
}

@keyframes meshMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* 3D Floating Orbs */
.df-slider__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat 15s ease-in-out infinite;
}

.df-slider__orb--1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.4) 0%, rgba(124, 58, 237, 0.2) 100%);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.df-slider__orb--2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(16, 185, 129, 0.2) 100%);
    bottom: -100px;
    left: -100px;
    animation-delay: -5s;
}

.df-slider__orb--3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(234, 88, 12, 0.15) 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(30px, -40px) scale(1.1) rotate(90deg); }
    50% { transform: translate(-20px, 30px) scale(0.95) rotate(180deg); }
    75% { transform: translate(40px, 20px) scale(1.05) rotate(270deg); }
}

/* Slider Wrapper */
.df-slider__wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Slides Container */
.df-slider__slides {
    position: relative;
    min-height: 500px;
}

/* Individual Slide */
.df-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--df-space-3xl);
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-slider__slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Slide Content */
.df-slider__content {
    max-width: 600px;
}

.df-slider__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) var(--df-space-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--df-radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slide-color, var(--df-primary-light));
    margin-bottom: var(--df-space-xl);
    backdrop-filter: blur(10px);
}

.df-slider__title {
    margin-bottom: var(--df-space-lg);
}

.df-slider__title-main {
    display: block;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--df-text-primary);
}

.df-slider__title-sub {
    display: block;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-top: var(--df-space-sm);
}

/* 3D Gradient Text */
.text-gradient-3d {
    background: linear-gradient(
        135deg,
        #3b82f6 0%,
        #8b5cf6 25%,
        #06b6d4 50%,
        #10b981 75%,
        #3b82f6 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient3D 6s ease infinite;
    text-shadow: 0 0 80px rgba(59, 130, 246, 0.3);
}

@keyframes gradient3D {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.df-slider__desc {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--df-text-secondary);
    margin-bottom: var(--df-space-xl);
}

/* Features List */
.df-slider__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-sm);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--df-space-2xl);
}

.df-slider__features li {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-size: 0.95rem;
    color: var(--df-text-secondary);
}

.df-slider__features li svg {
    color: var(--df-success);
}

/* Actions */
.df-slider__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-md);
}

/* Glowing Button */
.df-btn--glow {
    position: relative;
    background: linear-gradient(135deg, var(--df-cta) 0%, var(--df-cta-dark) 100%);
    box-shadow: 0 0 30px rgba(234, 88, 12, 0.4);
    animation: btnGlow 3s ease-in-out infinite;
}

@keyframes btnGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(234, 88, 12, 0.4); }
    50% { box-shadow: 0 0 50px rgba(234, 88, 12, 0.6), 0 0 80px rgba(234, 88, 12, 0.3); }
}

/* Glass Button */
.df-btn--glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: var(--df-text-primary);
}

.df-btn--glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Slide Visual - 3D Icon */
.df-slider__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.df-slider__icon-3d {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: icon3DFloat 6s ease-in-out infinite;
    backdrop-filter: blur(20px);
}

.df-slider__icon-3d::before {
    content: '';
    position: absolute;
    inset: -20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    animation: icon3DRing 8s linear infinite;
}

.df-slider__icon-3d::after {
    content: '';
    position: absolute;
    inset: -40px;
    border: 1px dashed rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    animation: icon3DRing 12s linear infinite reverse;
}

.df-slider__icon-3d svg {
    color: var(--slide-color, var(--df-primary-light));
    filter: drop-shadow(0 0 30px var(--slide-color));
    animation: iconPulse 3s ease-in-out infinite;
}

@keyframes icon3DFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

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

@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* Slider Navigation Dots */
.df-slider__nav {
    display: flex;
    justify-content: center;
    gap: var(--df-space-md);
    margin-top: var(--df-space-3xl);
}

.df-slider__dot {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) var(--df-space-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--df-radius-full);
    color: var(--df-text-tertiary);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-slider__dot:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--df-text-primary);
}

.df-slider__dot.active {
    background: var(--dot-color, var(--df-primary));
    border-color: var(--dot-color, var(--df-primary));
    color: white;
    box-shadow: 0 0 20px color-mix(in srgb, var(--dot-color, var(--df-primary)) 50%, transparent);
}

.df-slider__dot-icon {
    display: flex;
}

.df-slider__dot-text {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Slider Arrows */
.df-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--df-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.df-slider__arrow:hover {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.df-slider__arrow--prev { left: -80px; }
.df-slider__arrow--next { right: -80px; }

/* Stats Bar */
.df-slider__stats {
    display: flex;
    justify-content: center;
    gap: var(--df-space-3xl);
    margin-top: var(--df-space-3xl);
    padding-top: var(--df-space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.df-slider__stat {
    text-align: center;
}

.df-slider__stat-value {
    font-family: var(--df-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--df-primary-light) 0%, var(--df-secondary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.df-slider__stat-label {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    margin-top: var(--df-space-xs);
}

/* Scroll Indicator */
.df-slider__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--df-space-sm);
    color: var(--df-text-tertiary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.df-slider__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--df-primary-light) 0%, transparent 100%);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.5); opacity: 0.5; }
}

/* Slider Responsive */
@media (max-width: 1200px) {
    .df-slider__arrow--prev { left: 20px; }
    .df-slider__arrow--next { right: 20px; }
}

@media (max-width: 1024px) {
    .df-slider__slide {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .df-slider__content {
        max-width: 100%;
    }
    
    .df-slider__features {
        justify-content: center;
    }
    
    .df-slider__actions {
        justify-content: center;
    }
    
    .df-slider__visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .df-slider {
        min-height: auto;
        padding: var(--df-space-4xl) 0;
    }
    
    .df-slider__nav {
        flex-wrap: wrap;
    }
    
    .df-slider__dot-text {
        display: none;
    }
    
    .df-slider__stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--df-space-xl);
    }
    
    .df-slider__scroll {
        display: none;
    }
    
    .df-slider__features {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   SERVICE CARDS
   ============================================================================ */
.df-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--df-space-lg);
    width: 100%;
}

.df-services-grid > * {
    min-width: 0;
}

@media (max-width: 1024px) {
    .df-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .df-services-grid { grid-template-columns: 1fr; }
}

.df-service-card {
    position: relative;
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
    transition: all var(--df-transition-base);
    overflow: hidden;
}

.df-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    opacity: 0;
    transition: opacity var(--df-transition-base);
}

.df-service-card:hover {
    border-color: var(--df-primary);
    transform: translateY(-8px);
    box-shadow: var(--df-shadow-glow);
}

.df-service-card:hover::before {
    opacity: 1;
}

.df-service-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.2) 0%, rgba(8, 145, 178, 0.1) 100%);
    border-radius: var(--df-radius-lg);
    margin-bottom: var(--df-space-lg);
    color: var(--df-primary-light);
}

.df-service-card__title {
    font-size: 1.25rem;
    margin-bottom: var(--df-space-sm);
}

.df-service-card__title a {
    color: var(--df-text-primary);
}

.df-service-card__title a:hover {
    color: var(--df-primary-light);
}

.df-service-card__desc {
    font-size: 0.95rem;
    color: var(--df-text-tertiary);
    margin-bottom: var(--df-space-lg);
    line-height: 1.6;
}

.df-service-card__price {
    display: inline-block;
    padding: var(--df-space-xs) var(--df-space-md);
    background: rgba(5, 150, 105, 0.15);
    color: var(--df-success);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--df-radius-full);
    margin-bottom: var(--df-space-md);
}

.df-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-weight: 600;
    color: var(--df-primary-light);
    transition: gap var(--df-transition-fast);
}

.df-service-card__link:hover {
    gap: var(--df-space-md);
}

/* ============================================================================
   TABS (SEO Optimized Service Tabs)
   ============================================================================ */
.df-tabs {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-2xl);
    overflow: hidden;
}

.df-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    background: var(--df-bg-secondary);
    border-bottom: 1px solid var(--df-border);
    padding: var(--df-space-sm);
    gap: var(--df-space-sm);
}

.df-tabs__btn {
    flex: 1;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-md) var(--df-space-lg);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--df-radius-lg);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--df-text-tertiary);
    cursor: pointer;
    transition: all var(--df-transition-fast);
}

.df-tabs__btn:hover {
    color: var(--df-text-primary);
    background: var(--df-bg-card);
}

.df-tabs__btn.active {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    color: white;
    border-color: var(--df-primary);
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}

.df-tabs__btn svg {
    flex-shrink: 0;
}

.df-tabs__content {
    padding: var(--df-space-2xl);
}

.df-tabs__panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.df-tabs__panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.df-tabs__panel h3 {
    margin-bottom: var(--df-space-lg);
}

.df-tabs__panel p {
    color: var(--df-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--df-space-lg);
}

.df-tabs__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-md);
    margin-top: var(--df-space-xl);
}

@media (max-width: 768px) {
    .df-tabs__features { grid-template-columns: 1fr; }
}

.df-tabs__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--df-space-md);
    padding: var(--df-space-md);
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-lg);
}

.df-tabs__feature svg {
    color: var(--df-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.df-tabs__feature span {
    color: var(--df-text-secondary);
}

/* ============================================================================
   ACCORDION (FAQ - Schema.org Ready)
   ============================================================================ */
.df-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-md);
}

.df-accordion__item {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    overflow: hidden;
    transition: all var(--df-transition-base);
}

.df-accordion__item:hover {
    border-color: var(--df-primary);
}

.df-accordion__item.active {
    border-color: var(--df-primary);
    box-shadow: 0 4px 20px rgba(30, 64, 175, 0.15);
}

.df-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--df-space-md);
    width: 100%;
    padding: var(--df-space-lg) var(--df-space-xl);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all var(--df-transition-fast);
}

.df-accordion__header:hover {
    background: var(--df-bg-card-hover);
}

.df-accordion__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--df-text-primary);
}

.df-accordion__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-md);
    color: var(--df-primary-light);
    transition: all var(--df-transition-base);
    flex-shrink: 0;
}

.df-accordion__item.active .df-accordion__icon {
    background: var(--df-primary);
    color: white;
    transform: rotate(180deg);
}

.df-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--df-transition-base);
}

.df-accordion__item.active .df-accordion__body {
    max-height: 500px;
}

.df-accordion__content {
    padding: 0 var(--df-space-xl) var(--df-space-xl);
    color: var(--df-text-secondary);
    line-height: 1.8;
}

/* ============================================================================
   FEATURE CARDS (Why Us)
   ============================================================================ */
.df-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .df-features-grid { grid-template-columns: 1fr; }
}

.df-feature-card {
    text-align: center;
    padding: var(--df-space-2xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    transition: all var(--df-transition-base);
}

.df-feature-card:hover {
    border-color: var(--df-primary);
    transform: translateY(-5px);
    box-shadow: var(--df-shadow-glow);
}

.df-feature-card__icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    border-radius: var(--df-radius-xl);
    margin: 0 auto var(--df-space-lg);
    color: white;
}

.df-feature-card__title {
    font-size: 1.15rem;
    margin-bottom: var(--df-space-sm);
}

.df-feature-card__desc {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    line-height: 1.6;
}

/* ============================================================================
   STATS ROW
   ============================================================================ */
.df-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--df-space-lg);
    padding: var(--df-space-3xl) 0;
}

@media (max-width: 768px) {
    .df-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.df-stat-item {
    text-align: center;
    padding: var(--df-space-xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
}

.df-stat-item__value {
    font-family: var(--df-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--df-primary-light) 0%, var(--df-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: var(--df-space-sm);
}

.df-stat-item__label {
    font-size: 0.95rem;
    color: var(--df-text-tertiary);
}

/* ============================================================================
   TESTIMONIALS
   ============================================================================ */
.df-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .df-testimonials-grid { grid-template-columns: 1fr; }
}

.df-testimonial-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
    transition: all var(--df-transition-base);
}

.df-testimonial-card:hover {
    border-color: var(--df-primary);
    transform: translateY(-5px);
}

.df-testimonial-card__stars {
    display: flex;
    gap: 4px;
    color: var(--df-accent);
    margin-bottom: var(--df-space-md);
}

.df-testimonial-card__text {
    font-size: 1rem;
    color: var(--df-text-secondary);
    font-style: italic;
    margin-bottom: var(--df-space-lg);
    line-height: 1.7;
}

.df-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
}

.df-testimonial-card__avatar {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    border-radius: var(--df-radius-full);
    font-weight: 700;
    color: white;
    font-size: 1.25rem;
}

.df-testimonial-card__name {
    font-weight: 600;
    color: var(--df-text-primary);
}

.df-testimonial-card__role {
    font-size: 0.85rem;
    color: var(--df-text-tertiary);
}

/* ============================================================================
   CITIES GRID (Modern & SEO)
   ============================================================================ */
.df-cities-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--df-space-md);
}

@media (max-width: 1024px) {
    .df-cities-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    .df-cities-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .df-cities-grid { grid-template-columns: repeat(2, 1fr); }
}

.df-city-card {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-md) var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    font-size: 0.9rem;
    color: var(--df-text-secondary);
    transition: all var(--df-transition-fast);
    text-decoration: none;
}

.df-city-card:hover {
    border-color: var(--df-primary);
    background: var(--df-bg-card-hover);
    color: var(--df-text-primary);
    transform: translateY(-3px);
    box-shadow: var(--df-shadow-md);
}

.df-city-card__plate {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    border-radius: var(--df-radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.df-city-card__name {
    font-weight: 500;
}

/* Cities Region Section */
.df-cities-region {
    margin-bottom: var(--df-space-3xl);
}

.df-cities-region__title {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    font-size: 1.25rem;
    margin-bottom: var(--df-space-lg);
    padding-bottom: var(--df-space-md);
    border-bottom: 2px solid var(--df-primary);
}

.df-cities-region__title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--df-primary);
    border-radius: 2px;
}

/* ============================================================================
   REFERENCES / PORTFOLIO
   ============================================================================ */
.df-references-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--df-space-xl);
}

@media (max-width: 1024px) {
    .df-references-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .df-references-grid { grid-template-columns: 1fr; }
}

.df-reference-card {
    position: relative;
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-2xl);
    overflow: hidden;
    transition: all var(--df-transition-base);
}

.df-reference-card:hover {
    border-color: var(--df-primary);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(30, 64, 175, 0.2);
}

.df-reference-card__image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.df-reference-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--df-transition-slow);
}

.df-reference-card:hover .df-reference-card__image img {
    transform: scale(1.08);
}

.df-reference-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--df-space-xl);
    opacity: 0;
    transition: opacity var(--df-transition-base);
}

.df-reference-card:hover .df-reference-card__overlay {
    opacity: 1;
}

.df-reference-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: 12px 24px;
    background: var(--df-primary);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--df-radius-lg);
    transition: all var(--df-transition-fast);
}

.df-reference-card__link:hover {
    background: var(--df-primary-dark);
    color: white;
}

.df-reference-card__content {
    padding: var(--df-space-xl);
}

.df-reference-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-sm);
    margin-bottom: var(--df-space-md);
}

.df-reference-card__badge {
    padding: 6px 14px;
    background: rgba(30, 64, 175, 0.15);
    color: var(--df-primary-light);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--df-radius-full);
}

.df-reference-card__badge--sector {
    background: rgba(8, 145, 178, 0.15);
    color: var(--df-secondary-light);
}

.df-reference-card__title {
    font-size: 1.15rem;
    margin-bottom: var(--df-space-xs);
}

.df-reference-card__title a {
    color: var(--df-text-primary);
}

.df-reference-card__title a:hover {
    color: var(--df-primary-light);
}

.df-reference-card__company {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    margin-bottom: var(--df-space-md);
}

.df-reference-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-xs);
}

.df-reference-card__tech span {
    padding: 4px 12px;
    background: var(--df-bg-secondary);
    color: var(--df-text-secondary);
    font-size: 0.75rem;
    border-radius: var(--df-radius-md);
}

/* Filter Bar */
.df-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--df-space-sm);
    margin-bottom: var(--df-space-2xl);
    padding: var(--df-space-md);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
}

.df-filter-btn {
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    color: var(--df-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--df-transition-fast);
}

.df-filter-btn:hover,
.df-filter-btn.active {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: white;
}

/* ============================================================================
   PAGINATION (FIXED - Horizontal Layout!)
   ============================================================================ */
.df-pagination {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--df-space-sm);
    margin-top: var(--df-space-3xl);
}

.df-pagination .page-numbers,
.df-pagination a,
.df-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 16px;
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    color: var(--df-text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all var(--df-transition-fast);
}

.df-pagination .page-numbers:hover,
.df-pagination a:hover {
    background: var(--df-bg-card-hover);
    border-color: var(--df-primary);
    color: var(--df-text-primary);
}

.df-pagination .page-numbers.current,
.df-pagination .current {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    border-color: var(--df-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.4);
}

.df-pagination .prev,
.df-pagination .next {
    padding: 0 20px;
}

.df-pagination .dots {
    background: transparent;
    border: none;
    color: var(--df-text-tertiary);
}

/* WordPress default pagination fix */
.nav-links {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--df-space-sm);
}

/* WordPress paginate_links list fix */
.df-pagination ul,
.df-pagination ol,
.page-numbers {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--df-space-sm);
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.df-pagination ul li,
.df-pagination ol li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================================
   BLOG / POST CARDS
   ============================================================================ */
.df-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--df-space-xl);
}

.df-posts-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .df-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .df-posts-grid,
    .df-posts-grid--2 { grid-template-columns: 1fr; }
}

.df-post-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    overflow: hidden;
    transition: all var(--df-transition-base);
}

.df-post-card:hover {
    border-color: var(--df-primary);
    transform: translateY(-5px);
    box-shadow: var(--df-shadow-lg);
}

.df-post-card__image {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.df-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--df-transition-slow);
}

.df-post-card:hover .df-post-card__image img {
    transform: scale(1.05);
}

.df-post-card__content {
    padding: var(--df-space-xl);
}

.df-post-card__meta {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    margin-bottom: var(--df-space-md);
}

.df-post-card__category {
    padding: 4px 12px;
    background: rgba(30, 64, 175, 0.15);
    color: var(--df-primary-light);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--df-radius-full);
}

.df-post-card__date {
    font-size: 0.85rem;
    color: var(--df-text-tertiary);
}

.df-post-card__title {
    font-size: 1.15rem;
    margin-bottom: var(--df-space-sm);
    line-height: 1.4;
}

.df-post-card__title a {
    color: var(--df-text-primary);
}

.df-post-card__title a:hover {
    color: var(--df-primary-light);
}

.df-post-card__excerpt {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    margin-bottom: var(--df-space-md);
    line-height: 1.6;
}

.df-post-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-weight: 600;
    color: var(--df-primary-light);
    font-size: 0.9rem;
}

.df-post-card__link:hover {
    gap: var(--df-space-md);
}

/* ============================================================================
   PAGE HERO
   ============================================================================ */
.df-page-hero {
    position: relative;
    padding: var(--df-space-4xl) 0 var(--df-space-3xl);
    background: var(--df-bg-secondary);
    overflow: hidden;
}

.df-page-hero__bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30, 64, 175, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(8, 145, 178, 0.1) 0%, transparent 50%);
}

.df-page-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.df-page-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--df-space-md);
}

.df-page-hero__description {
    font-size: 1.15rem;
    color: var(--df-text-secondary);
    line-height: 1.7;
}

/* ============================================================================
   CTA BOX
   ============================================================================ */
.df-cta-box {
    position: relative;
    border-radius: var(--df-radius-2xl);
    padding: var(--df-space-4xl) var(--df-space-2xl);
    overflow: hidden;
    text-align: center;
}

.df-cta-box__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.df-cta-box__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 50%, var(--df-secondary) 100%);
}

.df-cta-box__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

.df-cta-box__content {
    position: relative;
    z-index: 1;
}

.df-cta-box__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: white;
    margin-bottom: var(--df-space-md);
}

.df-cta-box__text {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--df-space-xl);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.df-cta-box__actions {
    display: flex;
    justify-content: center;
    gap: var(--df-space-md);
    flex-wrap: wrap;
}

/* ============================================================================
   SIDEBAR
   ============================================================================ */
.df-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: var(--df-space-2xl);
    align-items: start;
}

.df-with-sidebar--reverse {
    grid-template-columns: 350px minmax(0, 1fr);
}

@media (max-width: 1024px) {
    .df-with-sidebar,
    .df-with-sidebar--reverse {
        grid-template-columns: 1fr;
    }
}

.df-sidebar {
    position: sticky;
    top: calc(var(--df-header-height) + var(--df-space-lg));
    display: flex;
    flex-direction: column;
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-sidebar { position: static; }
}

.df-sidebar-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
}

.df-sidebar-card h3,
.df-sidebar-card h4 {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-size: 1.05rem;
    margin-bottom: var(--df-space-lg);
}

.df-sidebar-card h3 svg,
.df-sidebar-card h4 svg {
    color: var(--df-primary-light);
}

.df-sidebar-card--cta {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.15) 0%, rgba(8, 145, 178, 0.1) 100%);
    border-color: var(--df-primary);
}

.df-sidebar-card--cta p {
    font-size: 0.9rem;
    color: var(--df-text-secondary);
    margin-bottom: var(--df-space-md);
}

.df-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-xs);
}

.df-sidebar-list a {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: 12px 16px;
    color: var(--df-text-secondary);
    border-radius: var(--df-radius-lg);
    transition: all var(--df-transition-fast);
}

.df-sidebar-list a:hover,
.df-sidebar-list a.active {
    background: rgba(30, 64, 175, 0.1);
    color: var(--df-text-primary);
}

.df-sidebar-list a.active {
    border-left: 3px solid var(--df-primary);
}

.df-sidebar-list a svg {
    color: var(--df-primary-light);
    flex-shrink: 0;
}

/* ============================================================================
   FORMS
   ============================================================================ */
.df-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-lg);
}

@media (max-width: 600px) {
    .df-form-row { grid-template-columns: 1fr; }
}

.df-form-group {
    margin-bottom: var(--df-space-lg);
}

.df-form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-bottom: var(--df-space-sm);
}

.df-form-group label .required {
    color: var(--df-danger);
}

.df-form-group input[type="text"],
.df-form-group input[type="email"],
.df-form-group input[type="tel"],
.df-form-group input[type="url"],
.df-form-group textarea,
.df-form-group select {
    width: 100%;
    padding: 16px 20px;
    background: var(--df-bg-secondary);
    border: 2px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    color: var(--df-text-primary);
    font-size: 1rem;
    transition: all var(--df-transition-fast);
}

.df-form-group input:focus,
.df-form-group textarea:focus,
.df-form-group select:focus {
    outline: none;
    border-color: var(--df-primary);
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.15);
}

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

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

.df-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 50px;
    cursor: pointer;
}

.df-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--df-space-sm);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--df-text-secondary);
}

.df-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--df-primary);
    flex-shrink: 0;
}

.df-checkbox a {
    color: var(--df-primary-light);
    text-decoration: underline;
}

.df-form-message {
    margin-top: var(--df-space-lg);
    padding: var(--df-space-md) var(--df-space-lg);
    border-radius: var(--df-radius-lg);
    font-size: 0.95rem;
    display: none;
}

.df-form-message.success {
    display: block;
    background: rgba(5, 150, 105, 0.15);
    border: 1px solid rgba(5, 150, 105, 0.3);
    color: var(--df-success);
}

.df-form-message.error {
    display: block;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: var(--df-danger);
}

.df-honeypot {
    position: absolute;
    left: -9999px;
}

/* Service Selector for Quote Form */
.df-service-selector {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-xl);
}

.df-service-category h4 {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-size: 0.95rem;
    margin-bottom: var(--df-space-md);
    color: var(--df-primary-light);
}

.df-service-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-md);
}

@media (max-width: 600px) {
    .df-service-options { grid-template-columns: 1fr; }
}

.df-service-option {
    cursor: pointer;
}

.df-service-option input {
    display: none;
}

.df-service-option__content {
    display: flex;
    flex-direction: column;
    padding: var(--df-space-lg);
    background: var(--df-bg-secondary);
    border: 2px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    transition: all var(--df-transition-fast);
}

.df-service-option input:checked + .df-service-option__content {
    border-color: var(--df-primary);
    background: rgba(30, 64, 175, 0.1);
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1);
}

.df-service-option__name {
    display: block;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-bottom: var(--df-space-xs);
}

.df-service-option__price {
    font-size: 0.85rem;
    color: var(--df-success);
    font-weight: 600;
}

/* Multi-step Form */
.df-form-steps {
    display: flex;
    justify-content: center;
    gap: var(--df-space-md);
    margin-bottom: var(--df-space-2xl);
}

.df-form-step-indicator {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) var(--df-space-lg);
    background: var(--df-bg-secondary);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-full);
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
}

.df-form-step-indicator.active {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: white;
}

.df-form-step-indicator.completed {
    background: var(--df-success);
    border-color: var(--df-success);
    color: white;
}

.df-form-step-indicator__number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: var(--df-radius-full);
    font-weight: 700;
    font-size: 0.8rem;
}

.df-form-step {
    display: none;
}

.df-form-step.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.df-form-actions {
    display: flex;
    gap: var(--df-space-md);
    margin-top: var(--df-space-xl);
}

/* ============================================================================
   PRICE CARD
   ============================================================================ */
.df-price-card {
    background: linear-gradient(135deg, var(--df-bg-card) 0%, var(--df-bg-card-hover) 100%);
    border: 2px solid var(--df-primary);
    border-radius: var(--df-radius-2xl);
    padding: var(--df-space-2xl);
    text-align: center;
}

.df-price-card__icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--df-space-lg);
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    border-radius: var(--df-radius-xl);
    color: white;
}

.df-price-card__label {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    margin-bottom: var(--df-space-xs);
}

.df-price-card__price {
    font-family: var(--df-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--df-primary-light);
    margin-bottom: var(--df-space-lg);
}

.df-price-card__features {
    text-align: left;
    margin-bottom: var(--df-space-xl);
}

.df-price-card__features li {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) 0;
    font-size: 0.9rem;
    color: var(--df-text-secondary);
    border-bottom: 1px solid var(--df-border);
}

.df-price-card__features li:last-child {
    border-bottom: none;
}

.df-price-card__features li svg {
    color: var(--df-success);
    flex-shrink: 0;
}

/* ============================================================================
   WHY US CARDS
   ============================================================================ */
.df-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-lg);
}

@media (max-width: 640px) {
    .df-why-grid { grid-template-columns: 1fr; }
}

.df-why-card {
    padding: var(--df-space-xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    text-align: center;
    transition: all var(--df-transition-base);
}

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

.df-why-card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--df-space-md);
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    border-radius: var(--df-radius-lg);
    color: white;
}

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

.df-why-card__text {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
}

/* ============================================================================
   CONTACT INFO
   ============================================================================ */
.df-contact-info-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-2xl);
    padding: var(--df-space-2xl);
}

.df-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-md);
}

.df-contact-info-item {
    display: flex;
    align-items: center;
    gap: var(--df-space-lg);
    padding: var(--df-space-lg);
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-xl);
    transition: all var(--df-transition-fast);
}

.df-contact-info-item:hover {
    background: var(--df-bg-card-hover);
    transform: translateX(5px);
}

.df-contact-info-item__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--df-radius-lg);
    color: white;
    flex-shrink: 0;
}

.df-contact-info-item__icon--phone { background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%); }
.df-contact-info-item__icon--whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }
.df-contact-info-item__icon--email { background: linear-gradient(135deg, var(--df-secondary) 0%, #0e7490 100%); }
.df-contact-info-item__icon--address { background: linear-gradient(135deg, var(--df-accent) 0%, #ea580c 100%); }

.df-contact-info-item__label {
    display: block;
    font-size: 0.85rem;
    color: var(--df-text-tertiary);
    margin-bottom: 4px;
}

.df-contact-info-item__value {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--df-text-primary);
}

.df-map-wrapper {
    border-radius: var(--df-radius-2xl);
    overflow: hidden;
    border: 1px solid var(--df-border);
    margin-top: var(--df-space-2xl);
}

.df-map-wrapper iframe {
    width: 100%;
    height: 450px;
    display: block;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.df-footer {
    background: var(--df-bg-secondary);
    border-top: 1px solid var(--df-border);
    padding-top: var(--df-space-4xl);
}

.df-footer__main {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--df-space-3xl);
    padding-bottom: var(--df-space-3xl);
}

@media (max-width: 1024px) {
    .df-footer__main { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .df-footer__main { grid-template-columns: 1fr; }
}

.df-footer__logo {
    display: inline-block;
    margin-bottom: var(--df-space-lg);
}

.df-footer__logo img {
    height: 50px;
}

.df-footer__logo-text {
    font-family: var(--df-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--df-text-primary);
}

.df-footer__logo-text span {
    color: var(--df-primary-light);
}

.df-footer__description {
    color: var(--df-text-tertiary);
    font-size: 0.95rem;
    margin-bottom: var(--df-space-lg);
    max-width: 320px;
    line-height: 1.7;
}

.df-footer__social {
    display: flex;
    gap: var(--df-space-sm);
}

.df-footer__social a {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    color: var(--df-text-secondary);
    transition: all var(--df-transition-fast);
}

.df-footer__social a:hover {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: white;
    transform: translateY(-3px);
}

.df-footer__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--df-text-primary);
    margin-bottom: var(--df-space-lg);
}

.df-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-sm);
}

.df-footer__links a {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    color: var(--df-text-tertiary);
    font-size: 0.9rem;
    padding: var(--df-space-xs) 0;
    transition: all var(--df-transition-fast);
}

.df-footer__links a:hover {
    color: var(--df-primary-light);
    padding-left: 8px;
}

.df-footer__links a svg {
    opacity: 0;
    transition: opacity var(--df-transition-fast);
}

.df-footer__links a:hover svg {
    opacity: 1;
}

.df-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--df-space-md);
    margin-bottom: var(--df-space-md);
}

.df-footer__contact-item svg {
    color: var(--df-primary-light);
    flex-shrink: 0;
    margin-top: 2px;
}

.df-footer__contact-item span,
.df-footer__contact-item a {
    color: var(--df-text-tertiary);
    font-size: 0.9rem;
}

.df-footer__contact-item a:hover {
    color: var(--df-primary-light);
}

.df-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--df-space-md);
    padding: var(--df-space-lg) 0;
    border-top: 1px solid var(--df-border);
}

.df-footer__copyright {
    color: var(--df-text-tertiary);
    font-size: 0.85rem;
}

.df-footer__legal {
    display: flex;
    gap: var(--df-space-lg);
}

.df-footer__legal a {
    color: var(--df-text-tertiary);
    font-size: 0.85rem;
}

.df-footer__legal a:hover {
    color: var(--df-primary-light);
}

/* WhatsApp Float Button */
.df-whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.df-whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: var(--df-radius-full);
    color: white;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all var(--df-transition-fast);
}

.df-whatsapp-float a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

/* ============================================================================
   404 & EMPTY STATE
   ============================================================================ */
.df-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--df-space-4xl) 0;
}

.df-404__code {
    font-family: var(--df-font-display);
    font-size: clamp(8rem, 20vw, 12rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.df-404__title {
    font-size: 1.5rem;
    margin-bottom: var(--df-space-md);
}

.df-404__text {
    color: var(--df-text-tertiary);
    margin-bottom: var(--df-space-xl);
}

.df-empty-state {
    text-align: center;
    padding: var(--df-space-4xl) var(--df-space-xl);
}

.df-empty-state svg {
    color: var(--df-text-tertiary);
    opacity: 0.3;
    margin-bottom: var(--df-space-lg);
}

.df-empty-state h2 {
    font-size: 1.25rem;
    color: var(--df-text-secondary);
    margin-bottom: var(--df-space-sm);
}

.df-empty-state p {
    color: var(--df-text-tertiary);
}

/* ============================================================================
   CONTENT AREA
   ============================================================================ */
.df-content {
    color: var(--df-text-secondary);
    line-height: 1.8;
}

.df-content h2,
.df-content h3,
.df-content h4 {
    margin-top: var(--df-space-xl);
    margin-bottom: var(--df-space-md);
}

.df-content p {
    margin-bottom: var(--df-space-md);
}

.df-content ul,
.df-content ol {
    margin-bottom: var(--df-space-md);
    padding-left: var(--df-space-xl);
}

.df-content ul { list-style: disc; }
.df-content ol { list-style: decimal; }

.df-content li {
    margin-bottom: var(--df-space-sm);
}

.df-content a {
    color: var(--df-primary-light);
    text-decoration: underline;
}

.df-content img {
    border-radius: var(--df-radius-xl);
    margin: var(--df-space-lg) 0;
}

.df-content blockquote {
    padding: var(--df-space-lg) var(--df-space-xl);
    background: var(--df-bg-card);
    border-left: 4px solid var(--df-primary);
    border-radius: var(--df-radius-lg);
    margin: var(--df-space-lg) 0;
    font-style: italic;
}

/* ============================================================================
   LOADING & UTILITIES
   ============================================================================ */
.df-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--df-border);
    border-top-color: var(--df-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   PRINT & ACCESSIBILITY
   ============================================================================ */
@media print {
    .df-topbar,
    .df-header,
    .df-footer,
    .df-mobile-menu,
    .df-cta-box,
    .df-whatsapp-float,
    .df-btn,
    .df-sidebar { display: none !important; }
    
    body {
        background: white;
        color: black;
    }
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

:focus-visible {
    outline: 2px solid var(--df-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   BREADCRUMB
   ============================================================================ */
.df-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--df-space-sm);
    font-size: 0.9rem;
    margin-bottom: var(--df-space-lg);
}

.df-breadcrumb a {
    color: var(--df-text-tertiary);
}

.df-breadcrumb a:hover {
    color: var(--df-primary-light);
}

.df-breadcrumb span {
    color: var(--df-text-tertiary);
}

.df-breadcrumb span:last-child {
    color: var(--df-text-secondary);
}

/* ============================================================================
   SERVICES PAGE LAYOUT
   ============================================================================ */
.df-services-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--df-space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .df-services-layout {
        grid-template-columns: 1fr;
    }
}

.df-services-sidebar {
    position: sticky;
    top: calc(var(--df-header-height) + var(--df-space-lg));
    display: flex;
    flex-direction: column;
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-services-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .df-services-sidebar {
        grid-template-columns: 1fr;
    }
}

.df-services-main {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-3xl);
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

/* Category List */
.df-category-list {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-xs);
}

.df-category-list a {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: 12px 16px;
    background: var(--df-bg-secondary);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    color: var(--df-text-secondary);
    font-size: 0.9rem;
    transition: all var(--df-transition-fast);
}

.df-category-list a:hover {
    background: var(--df-bg-card-hover);
    border-color: var(--df-primary);
    color: var(--df-text-primary);
}

.df-category-list a.active {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: white;
}

.df-category-list a svg {
    color: var(--cat-color, var(--df-primary-light));
    flex-shrink: 0;
}

.df-category-list a.active svg {
    color: white;
}

.df-category-count {
    margin-left: auto;
    padding: 2px 8px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--df-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Services Category Section */
.df-services-category-section {
    margin-bottom: var(--df-space-xl);
}

.df-services-category-title {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    font-size: 1.25rem;
    margin-bottom: var(--df-space-lg);
    padding-bottom: var(--df-space-md);
    border-bottom: 2px solid var(--cat-color, var(--df-primary));
}

.df-services-category-title svg {
    color: var(--cat-color, var(--df-primary));
}

/* Service Card V2 */
.df-service-card-v2 {
    display: flex;
    align-items: center;
    gap: var(--df-space-lg);
    padding: var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    text-decoration: none;
    transition: all var(--df-transition-base);
}

.df-service-card-v2:hover {
    border-color: var(--df-primary);
    transform: translateY(-4px);
    box-shadow: var(--df-shadow-lg);
}

.df-service-card-v2__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.15) 0%, rgba(8, 145, 178, 0.1) 100%);
    border-radius: var(--df-radius-lg);
    color: var(--cat-color, var(--df-primary-light));
    flex-shrink: 0;
}

.df-service-card-v2__content {
    flex: 1;
    min-width: 0;
}

.df-service-card-v2__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-bottom: var(--df-space-xs);
}

.df-service-card-v2__desc {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    margin-bottom: var(--df-space-sm);
    line-height: 1.5;
}

.df-service-card-v2__price {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(5, 150, 105, 0.15);
    color: var(--df-success);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--df-radius-full);
}

.df-service-card-v2__arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-md);
    color: var(--df-text-tertiary);
    flex-shrink: 0;
    transition: all var(--df-transition-fast);
}

.df-service-card-v2:hover .df-service-card-v2__arrow {
    background: var(--df-primary);
    color: white;
}

/* Large Service Card */
.df-service-card-v2--large {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--df-space-xl);
    min-width: 0;
    width: 100%;
}

.df-service-card-v2--large .df-service-card-v2__icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--df-space-md);
}

.df-service-card-v2--large .df-service-card-v2__title {
    font-size: 1.25rem;
}

.df-service-card-v2--large .df-service-card-v2__desc {
    margin-bottom: var(--df-space-md);
}

.df-service-card-v2__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-sm);
    margin-bottom: var(--df-space-md);
}

.df-service-card-v2__features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--df-text-secondary);
}

.df-service-card-v2__features li svg {
    color: var(--df-success);
}

.df-service-card-v2--large .df-service-card-v2__arrow {
    position: absolute;
    top: var(--df-space-lg);
    right: var(--df-space-lg);
}

.df-services-grid--full {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-lg);
    width: 100%;
}

.df-services-grid--full > * {
    min-width: 0;
}

@media (max-width: 768px) {
    .df-services-grid--full {
        grid-template-columns: 1fr;
    }
}

/* Sidebar Stats */
.df-sidebar-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--df-space-sm);
    text-align: center;
}

.df-sidebar-stat {
    padding: var(--df-space-md);
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-lg);
}

.df-sidebar-stat-value {
    display: block;
    font-family: var(--df-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--df-primary-light);
    line-height: 1;
    margin-bottom: 4px;
}

.df-sidebar-stat-label {
    font-size: 0.75rem;
    color: var(--df-text-tertiary);
}

/* ============================================================================
   BLOG PAGE LAYOUT
   ============================================================================ */
.df-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: var(--df-space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .df-blog-layout {
        grid-template-columns: 1fr;
    }
}

.df-blog-main {
    min-width: 0;
}

.df-blog-sidebar {
    position: sticky;
    top: calc(var(--df-header-height) + var(--df-space-lg));
    display: flex;
    flex-direction: column;
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-blog-sidebar {
        position: static;
    }
}

/* Sidebar Search */
.df-sidebar-search {
    padding: var(--df-space-md) !important;
}

.df-search-input {
    display: flex;
    background: var(--df-bg-secondary);
    border: 2px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    transition: all var(--df-transition-fast);
}

.df-search-input:focus-within {
    border-color: var(--df-primary);
}

.df-search-input input {
    flex: 1;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: var(--df-text-primary);
    font-size: 0.95rem;
    outline: none;
}

.df-search-input input::placeholder {
    color: var(--df-text-tertiary);
}

.df-search-input button {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--df-primary);
    border: none;
    color: white;
    cursor: pointer;
    transition: background var(--df-transition-fast);
}

.df-search-input button:hover {
    background: var(--df-primary-dark);
}

/* Sidebar Count Badge */
.df-sidebar-count {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-full);
    font-size: 0.75rem;
    color: var(--df-text-tertiary);
}

/* Sidebar Posts List */
.df-sidebar-posts {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-md);
}

.df-sidebar-posts li a {
    display: flex;
    gap: var(--df-space-md);
    padding: var(--df-space-sm);
    border-radius: var(--df-radius-lg);
    transition: background var(--df-transition-fast);
}

.df-sidebar-posts li a:hover {
    background: var(--df-bg-secondary);
}

.df-sidebar-post-img {
    width: 70px;
    height: 50px;
    border-radius: var(--df-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.df-sidebar-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.df-sidebar-post-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.df-sidebar-post-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--df-text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.df-sidebar-post-date {
    font-size: 0.75rem;
    color: var(--df-text-tertiary);
}

/* Sidebar Tags */
.df-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-sm);
}

.df-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--df-bg-secondary);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-full);
    font-size: 0.8rem;
    color: var(--df-text-secondary);
    transition: all var(--df-transition-fast);
}

.df-tag:hover {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: white;
}

/* ============================================================================
   SINGLE POST WITH SIDEBAR
   ============================================================================ */
.df-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: var(--df-space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .df-single-layout {
        grid-template-columns: 1fr;
    }
}

.df-single-main {
    min-width: 0;
}

.df-single-sidebar {
    position: sticky;
    top: calc(var(--df-header-height) + var(--df-space-lg));
    display: flex;
    flex-direction: column;
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-single-sidebar {
        position: static;
    }
}

/* Table of Contents */
.df-toc {
    padding: 0 !important;
}

.df-toc h4 {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-lg);
    margin: 0;
    border-bottom: 1px solid var(--df-border);
    font-size: 0.95rem;
}

.df-toc h4 svg {
    color: var(--df-primary-light);
}

.df-toc-list {
    padding: var(--df-space-md);
}

.df-toc-list a {
    display: block;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--df-text-secondary);
    border-radius: var(--df-radius-md);
    transition: all var(--df-transition-fast);
}

.df-toc-list a:hover {
    background: var(--df-bg-secondary);
    color: var(--df-primary-light);
}

/* Share Buttons */
.df-share-buttons {
    display: flex;
    gap: var(--df-space-sm);
}

.df-share-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--df-bg-secondary);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    color: var(--df-text-secondary);
    transition: all var(--df-transition-fast);
}

.df-share-btn:hover {
    transform: translateY(-2px);
}

.df-share-btn--facebook:hover { background: #1877F2; border-color: #1877F2; color: white; }
.df-share-btn--twitter:hover { background: #1DA1F2; border-color: #1DA1F2; color: white; }
.df-share-btn--linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: white; }
.df-share-btn--whatsapp:hover { background: #25D366; border-color: #25D366; color: white; }

/* Related Posts */
.df-related-posts {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-md);
}

.df-related-post {
    display: flex;
    gap: var(--df-space-md);
    padding: var(--df-space-sm);
    border-radius: var(--df-radius-lg);
    transition: background var(--df-transition-fast);
}

.df-related-post:hover {
    background: var(--df-bg-secondary);
}

.df-related-post__image {
    width: 80px;
    height: 60px;
    border-radius: var(--df-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.df-related-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.df-related-post__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.df-related-post__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--df-text-primary);
    line-height: 1.3;
}

.df-related-post__date {
    font-size: 0.75rem;
    color: var(--df-text-tertiary);
}

/* Author Box */
.df-author-box {
    display: flex;
    gap: var(--df-space-lg);
    padding: var(--df-space-xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    margin-top: var(--df-space-3xl);
}

.df-author-box__avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--df-radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

.df-author-box__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.df-author-box__content h4 {
    font-size: 1.1rem;
    margin-bottom: var(--df-space-xs);
}

.df-author-box__content p {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    line-height: 1.6;
}

/* Post Navigation */
.df-post-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-lg);
    margin-top: var(--df-space-3xl);
    padding-top: var(--df-space-2xl);
    border-top: 1px solid var(--df-border);
}

@media (max-width: 640px) {
    .df-post-nav {
        grid-template-columns: 1fr;
    }
}

.df-post-nav__item {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-sm);
    padding: var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    transition: all var(--df-transition-fast);
}

.df-post-nav__item:hover {
    border-color: var(--df-primary);
}

.df-post-nav__item--next {
    text-align: right;
}

.df-post-nav__label {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-size: 0.85rem;
    color: var(--df-text-tertiary);
}

.df-post-nav__item--next .df-post-nav__label {
    justify-content: flex-end;
}

.df-post-nav__title {
    font-weight: 600;
    color: var(--df-text-primary);
    font-size: 0.95rem;
}

/* ============================================================================
   CONTACT PAGE STYLES (EKSİK OLANLAR)
   ============================================================================ */
.df-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--df-space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .df-contact-layout {
        grid-template-columns: 1fr;
    }
}

.df-contact-form-wrapper {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-2xl);
    padding: var(--df-space-2xl);
}

.df-contact-form-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
}

.df-contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-lg);
}

.df-contact-info-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
}

.df-contact-info-card h3 {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-size: 1.1rem;
    margin-bottom: var(--df-space-lg);
}

.df-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-md);
}

.df-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--df-space-md);
    padding: var(--df-space-md);
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-lg);
    transition: all var(--df-transition-fast);
}

.df-contact-info-item:hover {
    background: var(--df-bg-card-hover);
}

.df-contact-info-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    border-radius: var(--df-radius-lg);
    color: white;
    flex-shrink: 0;
}

.df-contact-info-icon--phone { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.df-contact-info-icon--email { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.df-contact-info-icon--address { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.df-contact-info-icon--whatsapp { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); }

.df-contact-info-content {
    flex: 1;
}

.df-contact-info-label {
    display: block;
    font-size: 0.85rem;
    color: var(--df-text-tertiary);
    margin-bottom: 4px;
}

.df-contact-info-value {
    font-weight: 600;
    color: var(--df-text-primary);
}

.df-contact-info-value a {
    color: var(--df-text-primary);
    transition: color var(--df-transition-fast);
}

.df-contact-info-value a:hover {
    color: var(--df-primary-light);
}

.df-contact-hours-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
}

.df-contact-hours-card h4 {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    font-size: 1rem;
    margin-bottom: var(--df-space-md);
}

.df-contact-hours-note {
    font-size: 0.85rem;
    color: var(--df-text-tertiary);
    margin-top: var(--df-space-md);
    padding-top: var(--df-space-md);
    border-top: 1px solid var(--df-border);
}

.df-contact-cta {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
    text-align: center;
    color: white;
}

.df-contact-cta h4 {
    color: white;
    margin-bottom: var(--df-space-sm);
}

.df-contact-cta p {
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--df-space-lg);
}

/* ============================================================================
   QUOTE FORM STYLES (EKSİK OLANLAR)
   ============================================================================ */
.df-quote-form-wrapper {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-2xl);
    padding: var(--df-space-2xl);
}

.df-quote-form {
    max-width: 100%;
}

/* ============================================================================
   SIDEBAR CTA STYLES (EKSİK)
   ============================================================================ */
.df-sidebar-cta,
.df-sidebar-card--cta {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    border: none;
    color: white;
}

.df-sidebar-cta h3,
.df-sidebar-cta h4,
.df-sidebar-card--cta h3,
.df-sidebar-card--cta h4 {
    color: white;
}

.df-sidebar-cta p,
.df-sidebar-card--cta p {
    color: rgba(255,255,255,0.85);
}

/* ============================================================================
   PRICE CARD (Sidebar için)
   ============================================================================ */
.df-price-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
    text-align: center;
}

.df-price-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--df-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.15) 0%, rgba(8, 145, 178, 0.1) 100%);
    border-radius: var(--df-radius-lg);
    color: var(--df-primary-light);
}

.df-price-card__label {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    margin-bottom: var(--df-space-xs);
}

.df-price-card__price {
    font-family: var(--df-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--df-primary-light);
    margin-bottom: var(--df-space-lg);
}

.df-price-card__features {
    text-align: left;
    margin-bottom: var(--df-space-lg);
}

.df-price-card__features li {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) 0;
    font-size: 0.9rem;
    color: var(--df-text-secondary);
    border-bottom: 1px solid var(--df-border);
}

.df-price-card__features li:last-child {
    border-bottom: none;
}

.df-price-card__features li svg {
    color: var(--df-success);
    flex-shrink: 0;
}

/* ============================================================================
   CONTENT BLOCK STYLES
   ============================================================================ */
.df-content-block {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    padding: var(--df-space-xl);
}

.df-content-block h2 {
    font-size: 1.5rem;
    margin-bottom: var(--df-space-lg);
}

.df-content-block p {
    color: var(--df-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--df-space-md);
}

.df-content-block p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   GLOBAL FIXES
   ============================================================================ */
/* Ensure posts grid works */
.df-posts-grid--2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 768px) {
    .df-posts-grid--2 {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   SERVICE DETAIL PAGE
   ============================================================================ */
.df-service-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--df-space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .df-service-detail-grid {
        grid-template-columns: 1fr;
    }
}

.df-service-detail-main {
    min-width: 0;
}

.df-service-detail-sidebar {
    position: sticky;
    top: calc(var(--df-header-height) + var(--df-space-lg));
    display: flex;
    flex-direction: column;
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-service-detail-sidebar {
        position: static;
    }
}

.df-service-section {
    margin-bottom: var(--df-space-3xl);
}

.df-service-section:last-child {
    margin-bottom: 0;
}

.df-service-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--df-text-primary);
    margin-bottom: var(--df-space-lg);
}

.df-service-section p {
    color: var(--df-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--df-space-md);
}

/* Features List */
.df-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-md);
}

@media (max-width: 640px) {
    .df-features-list {
        grid-template-columns: 1fr;
    }
}

.df-feature-item {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    padding: var(--df-space-md) var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    transition: all var(--df-transition-fast);
}

.df-feature-item:hover {
    border-color: var(--df-primary);
    background: var(--df-bg-card-hover);
}

.df-feature-item__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 150, 105, 0.15);
    border-radius: var(--df-radius-md);
    color: var(--df-success);
    flex-shrink: 0;
}

.df-feature-item__text {
    font-size: 0.95rem;
    color: var(--df-text-primary);
    font-weight: 500;
}

/* FAQ Styles */
.df-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-md);
}

.df-faq-item {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    transition: all var(--df-transition-fast);
}

.df-faq-item:hover {
    border-color: var(--df-primary);
}

.df-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--df-space-lg);
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--df-text-primary);
    text-align: left;
    cursor: pointer;
    transition: all var(--df-transition-fast);
}

.df-faq-question:hover {
    color: var(--df-primary-light);
}

.df-faq-question svg {
    flex-shrink: 0;
    transition: transform var(--df-transition-fast);
    color: var(--df-text-tertiary);
}

.df-faq-item.active .df-faq-question svg {
    transform: rotate(180deg);
    color: var(--df-primary-light);
}

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

.df-faq-item.active .df-faq-answer {
    max-height: 500px;
}

.df-faq-answer__content {
    padding: 0 var(--df-space-lg) var(--df-space-lg);
    color: var(--df-text-secondary);
    line-height: 1.7;
}

/* City Card with Plate */
.df-city-card {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    padding: var(--df-space-md) var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    color: var(--df-text-primary);
    font-weight: 500;
    transition: all var(--df-transition-fast);
}

.df-city-card:hover {
    border-color: var(--df-primary);
    background: var(--df-bg-card-hover);
    transform: translateY(-2px);
}

.df-city-card__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    border-radius: var(--df-radius-md);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.df-city-card__name {
    font-weight: 500;
    color: var(--df-text-primary);
}

/* ============================================================================
   CITY + SERVICE PAGE (SEO OPTIMIZED)
   ============================================================================ */

/* Breadcrumb */
.df-breadcrumb {
    margin-bottom: var(--df-space-xl);
}

.df-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--df-space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.df-breadcrumb__list li {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    color: var(--df-text-tertiary);
}

.df-breadcrumb__list li:not(:last-child)::after {
    content: '/';
    color: var(--df-text-tertiary);
    margin-left: var(--df-space-sm);
}

.df-breadcrumb__list li a {
    color: var(--df-text-secondary);
    transition: color var(--df-transition-fast);
}

.df-breadcrumb__list li a:hover {
    color: var(--df-primary-light);
}

.df-breadcrumb__list li[aria-current="page"] {
    color: var(--df-primary-light);
    font-weight: 500;
}

/* Trust Badges */
.df-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-lg);
    margin-top: var(--df-space-xl);
}

.df-trust-badge {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) var(--df-space-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--df-radius-full);
    font-size: 0.9rem;
    color: var(--df-text-secondary);
}

.df-trust-badge svg {
    color: var(--df-success);
}

/* Hero Actions */
.df-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-md);
    margin-top: var(--df-space-xl);
}

/* Service Page Layout */
.df-service-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--df-space-2xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .df-service-page-layout {
        grid-template-columns: 1fr;
    }
}

.df-service-page-main {
    min-width: 0;
}

.df-service-page-sidebar {
    position: sticky;
    top: calc(var(--df-header-height) + var(--df-space-lg));
    display: flex;
    flex-direction: column;
    gap: var(--df-space-lg);
}

@media (max-width: 1024px) {
    .df-service-page-sidebar {
        position: static;
    }
}

/* Content Article */
.df-content-article {
    margin-bottom: var(--df-space-3xl);
}

.df-content-article:last-child {
    margin-bottom: 0;
}

.df-content-article h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--df-text-primary);
    margin-bottom: var(--df-space-lg);
    line-height: 1.3;
}

.df-content-article h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-bottom: var(--df-space-sm);
}

.df-content-article p {
    color: var(--df-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--df-space-md);
}

.df-content-article p:last-child {
    margin-bottom: 0;
}

.df-lead {
    font-size: 1.15rem;
    color: var(--df-text-primary);
    line-height: 1.7;
}

/* Features Grid */
.df-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-md);
    margin-top: var(--df-space-lg);
}

@media (max-width: 640px) {
    .df-features-grid {
        grid-template-columns: 1fr;
    }
}

.df-feature-box {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    padding: var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    transition: all var(--df-transition-fast);
}

.df-feature-box:hover {
    border-color: var(--df-primary);
    transform: translateY(-2px);
}

.df-feature-box__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 150, 105, 0.15);
    border-radius: var(--df-radius-lg);
    color: var(--df-success);
    flex-shrink: 0;
}

.df-feature-box__content h3 {
    margin-bottom: 0;
    font-size: 1rem;
}

/* Why Us Grid */
.df-why-us-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--df-space-lg);
    margin-top: var(--df-space-lg);
}

@media (max-width: 640px) {
    .df-why-us-grid {
        grid-template-columns: 1fr;
    }
}

.df-why-us-card {
    padding: var(--df-space-xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    text-align: center;
    transition: all var(--df-transition-base);
}

.df-why-us-card:hover {
    border-color: var(--df-primary);
    transform: translateY(-4px);
    box-shadow: var(--df-shadow-lg);
}

.df-why-us-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--df-space-md);
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.15) 0%, rgba(8, 145, 178, 0.1) 100%);
    border-radius: var(--df-radius-lg);
    color: var(--df-primary-light);
}

.df-why-us-card h3 {
    font-size: 1.1rem;
    margin-bottom: var(--df-space-sm);
    color: var(--df-text-primary);
}

.df-why-us-card p {
    font-size: 0.9rem;
    color: var(--df-text-tertiary);
    margin: 0;
    line-height: 1.6;
}

/* Process Steps */
.df-process-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-md);
    margin-top: var(--df-space-lg);
}

.df-process-step {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    padding: var(--df-space-md) var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    flex: 1;
    min-width: 150px;
}

.df-process-step__number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    border-radius: var(--df-radius-md);
    color: white;
    font-weight: 700;
    flex-shrink: 0;
}

.df-process-step__content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin: 0;
}

/* Districts Grid */
.df-districts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--df-space-sm);
    margin-top: var(--df-space-lg);
}

.df-district-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-xs);
    padding: var(--df-space-sm) var(--df-space-md);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-full);
    font-size: 0.85rem;
    color: var(--df-text-secondary);
    transition: all var(--df-transition-fast);
}

.df-district-tag:hover {
    border-color: var(--df-primary);
    color: var(--df-primary-light);
}

.df-district-tag svg {
    color: var(--df-primary-light);
}

/* Sidebar Buttons */
.df-sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--df-space-sm);
}

/* Sidebar List */
.df-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.df-sidebar-list li {
    border-bottom: 1px solid var(--df-border);
}

.df-sidebar-list li:last-child {
    border-bottom: none;
}

.df-sidebar-list li a {
    display: flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) 0;
    color: var(--df-text-secondary);
    font-size: 0.9rem;
    transition: all var(--df-transition-fast);
}

.df-sidebar-list li a:hover {
    color: var(--df-primary-light);
    padding-left: var(--df-space-sm);
}

.df-sidebar-list li a svg {
    color: var(--df-primary-light);
    flex-shrink: 0;
}

/* Page Hero Service Variant */
.df-page-hero--service {
    padding-bottom: var(--df-space-3xl);
}

.df-page-hero--service .df-page-hero__content {
    max-width: 800px;
}

/* ============================================================================
   MODERN ANIMATIONS & 3D EFFECTS
   ============================================================================ */

/* Keyframe Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.5); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotate-3d {
    0% { transform: perspective(1000px) rotateY(0deg); }
    100% { transform: perspective(1000px) rotateY(360deg); }
}

/* Animated Background Gradient */
.df-animated-bg {
    background: linear-gradient(-45deg, #0f172a, #1e3a8a, #0891b2, #0f172a);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

/* Floating Animation */
.df-float {
    animation: float 6s ease-in-out infinite;
}

/* Glow Effect */
.df-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* Scroll Reveal Animations */
.df-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.df-reveal--delay-1 { transition-delay: 0.1s; }
.df-reveal--delay-2 { transition-delay: 0.2s; }
.df-reveal--delay-3 { transition-delay: 0.3s; }
.df-reveal--delay-4 { transition-delay: 0.4s; }

/* 3D Card Hover Effect */
.df-3d-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-3d-card:hover {
    transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
}

/* Glassmorphism Card */
.df-glass {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Animated Border */
.df-border-animate {
    position: relative;
    overflow: hidden;
}

.df-border-animate::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(90deg, var(--df-primary), var(--df-secondary), var(--df-primary));
    background-size: 200% auto;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gradient-shift 3s linear infinite;
    border-radius: inherit;
}

/* Modern Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, var(--df-primary-light) 0%, var(--df-secondary-light) 50%, var(--df-primary-light) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 5s ease infinite;
}

/* Shimmer Effect on Buttons */
.df-btn--shimmer {
    position: relative;
    overflow: hidden;
}

.df-btn--shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s infinite;
}

/* Interactive Hover Cards */
.df-hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Magnetic Button Effect (needs JS) */
.df-magnetic {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading Spinner */
.df-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--df-border);
    border-top-color: var(--df-primary-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton Loading */
.df-skeleton {
    background: linear-gradient(90deg, var(--df-bg-card) 25%, var(--df-bg-card-hover) 50%, var(--df-bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--df-radius-md);
}

/* Parallax Container */
.df-parallax {
    transform-style: preserve-3d;
}

.df-parallax__layer {
    position: absolute;
    inset: 0;
    transition: transform 0.3s ease-out;
}

/* Modern Badge with Glow */
.df-badge-glow {
    position: relative;
}

.df-badge-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--df-primary), var(--df-secondary));
    border-radius: inherit;
    filter: blur(8px);
    opacity: 0.5;
    z-index: -1;
}

/* Neon Text Effect */
.df-neon {
    text-shadow: 
        0 0 5px var(--df-primary-light),
        0 0 10px var(--df-primary-light),
        0 0 20px var(--df-primary-light),
        0 0 40px var(--df-primary);
}

/* Morphing Shape Background */
.df-morph-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.3) 0%, rgba(8, 145, 178, 0.3) 100%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter: blur(60px);
    animation: morph 8s ease-in-out infinite;
    z-index: -1;
}

@keyframes morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
    75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

/* Service Card Hover Animation */
.df-service-card,
.df-service-card-v2 {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-service-card:hover,
.df-service-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    border-color: var(--df-primary);
}

.df-service-card:hover .df-service-card__icon,
.df-service-card-v2:hover .df-service-card-v2__icon {
    transform: scale(1.1);
}

/* CTA Box Enhanced */
.df-cta-box {
    position: relative;
    overflow: hidden;
}

.df-cta-box__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 50%, var(--df-secondary) 100%);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

.df-cta-box__pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
    background-size: 40px 40px;
}

/* Hero Section Enhancements */
.df-page-hero {
    position: relative;
    overflow: hidden;
}

.df-page-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--df-bg-primary) 0%, var(--df-bg-secondary) 100%);
}

.df-page-hero__bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(30, 64, 175, 0.2) 0%, transparent 60%);
    border-radius: 50%;
}

.df-page-hero__bg::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.15) 0%, transparent 60%);
    border-radius: 50%;
}

/* Icon Hover Animation */
.df-service-card__icon,
.df-service-card-v2__icon,
.df-why-card__icon,
.df-feature-box__icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stats Counter Animation */
.df-stat-value {
    display: inline-block;
}

/* Animated Underline Links */
.df-underline-link {
    position: relative;
    display: inline-block;
}

.df-underline-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--df-primary-light), var(--df-secondary-light));
    transition: width 0.3s ease;
}

.df-underline-link:hover::after {
    width: 100%;
}

/* ============================================================================
   3D ANİMASYONLU SLIDER - WEB AJANSI TEMA
   ============================================================================ */

/* 3D Gradient Text */
.text-gradient-3d {
    background: linear-gradient(
        135deg,
        var(--df-web-design) 0%,
        var(--df-software) 25%,
        var(--df-marketing) 50%,
        var(--df-seo) 75%,
        var(--df-web-design) 100%
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient3D 8s ease infinite;
    text-shadow: 
        0 0 30px rgba(59, 130, 246, 0.5),
        0 0 60px rgba(139, 92, 246, 0.3),
        0 0 90px rgba(6, 182, 212, 0.2);
}

@keyframes gradient3D {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 50%; }
}

/* Slider Background 3D Effects */
.df-slider__gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 120% 80% at 20% 0%, rgba(59, 130, 246, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 80% 100%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 50% 50%, rgba(6, 182, 212, 0.2) 0%, transparent 50%);
    animation: bgPulse3D 10s ease-in-out infinite;
}

@keyframes bgPulse3D {
    0%, 100% { 
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    25% { 
        opacity: 0.8;
        transform: scale(1.05) rotate(1deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1) rotate(0deg);
    }
    75% { 
        opacity: 0.9;
        transform: scale(1.05) rotate(-1deg);
    }
}

/* 3D Orbs */
.df-slider__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    mix-blend-mode: screen;
}

.df-slider__orb--1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--df-web-design) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: orb3D1 15s ease-in-out infinite;
}

.df-slider__orb--2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--df-software) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: orb3D2 18s ease-in-out infinite;
}

.df-slider__orb--3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--df-marketing) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orb3D3 12s ease-in-out infinite;
}

@keyframes orb3D1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-50px, 30px) scale(1.1); }
    50% { transform: translate(-30px, -40px) scale(0.9); }
    75% { transform: translate(40px, 20px) scale(1.05); }
}

@keyframes orb3D2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, -30px) scale(1.15); }
    66% { transform: translate(-40px, 50px) scale(0.95); }
}

@keyframes orb3D3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50% { transform: translate(-50%, -50%) scale(1.3) rotate(180deg); }
}

/* 3D Mesh Grid */
.df-slider__mesh {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: meshMove 20s linear infinite;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: center top;
}

@keyframes meshMove {
    0% { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}

/* Glow Button */
.df-btn--glow {
    position: relative;
    background: linear-gradient(135deg, var(--df-cta) 0%, var(--df-accent) 100%);
    box-shadow: 
        0 0 20px rgba(234, 88, 12, 0.4),
        0 0 40px rgba(234, 88, 12, 0.2),
        0 0 60px rgba(234, 88, 12, 0.1);
    animation: btnGlow 3s ease-in-out infinite;
}

@keyframes btnGlow {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(234, 88, 12, 0.4),
            0 0 40px rgba(234, 88, 12, 0.2);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(234, 88, 12, 0.6),
            0 0 60px rgba(234, 88, 12, 0.4),
            0 0 90px rgba(234, 88, 12, 0.2);
    }
}

/* Glass Button */
.df-btn--glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--df-text-primary);
}

.df-btn--glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Slider Slide Transitions */
.df-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.df-slider__slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

.df-slider__slide.prev {
    transform: translateX(-100px) scale(0.95);
}

/* Slider Navigation Dots */
.df-slider__nav {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.df-slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.df-slider__dot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--df-web-design), var(--df-software));
    border-radius: inherit;
    transform: scale(0);
    transition: transform 0.3s ease;
}

.df-slider__dot:hover::before,
.df-slider__dot.active::before {
    transform: scale(1);
}

.df-slider__dot.active {
    width: 40px;
    border-radius: 10px;
}

/* Progress Bar in Dot */
.df-slider__dot-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--df-marketing), var(--df-seo));
    border-radius: inherit;
}

.df-slider__dot.active .df-slider__dot-progress {
    animation: dotProgress 5s linear forwards;
}

@keyframes dotProgress {
    0% { width: 0; }
    100% { width: 100%; }
}

/* Slider Arrows */
.df-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.df-slider__arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.df-slider__arrow--prev { left: 30px; }
.df-slider__arrow--next { right: 30px; }

/* Stats Bar */
.df-slider__stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 0;
    z-index: 5;
}

.df-slider__stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.df-slider__stat {
    display: flex;
    align-items: center;
    gap: 15px;
}

.df-slider__stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--df-primary-light);
}

.df-slider__stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    display: block;
}

.df-slider__stat-label {
    font-size: 0.85rem;
    color: var(--df-text-tertiary);
}

@media (max-width: 768px) {
    .df-slider__arrow { display: none; }
    .df-slider__stats-grid { 
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-around;
    }
    .df-slider__stat { gap: 10px; }
    .df-slider__stat-icon { width: 40px; height: 40px; }
    .df-slider__stat-value { font-size: 1.2rem; }
}

/* Floating Cards in Slider */
.df-floating-card {
    position: absolute;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    animation: floatCard 6s ease-in-out infinite;
}

.df-floating-card svg {
    color: var(--df-success);
}

.df-floating-card--1 {
    top: 20%;
    right: 10%;
    animation-delay: 0s;
}

.df-floating-card--2 {
    top: 50%;
    right: 5%;
    animation-delay: 2s;
}

.df-floating-card--3 {
    bottom: 20%;
    right: 15%;
    animation-delay: 4s;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

/* 3D Icon Animation */
.df-slider__icon-3d {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.1;
}

.df-slider__icon-3d svg {
    width: 300px;
    height: 300px;
    animation: icon3D 10s ease-in-out infinite;
}

@keyframes icon3D {
    0%, 100% { 
        transform: perspective(500px) rotateY(0deg) rotateX(0deg);
        filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.5));
    }
    25% { 
        transform: perspective(500px) rotateY(15deg) rotateX(5deg);
        filter: drop-shadow(0 0 50px rgba(139, 92, 246, 0.5));
    }
    50% { 
        transform: perspective(500px) rotateY(0deg) rotateX(-5deg);
        filter: drop-shadow(0 0 30px rgba(6, 182, 212, 0.5));
    }
    75% { 
        transform: perspective(500px) rotateY(-15deg) rotateX(5deg);
        filter: drop-shadow(0 0 50px rgba(16, 185, 129, 0.5));
    }
}

@media (max-width: 1024px) {
    .df-slider__icon-3d,
    .df-floating-card { display: none; }
}

/* ============================================================================
   TABS COMPONENT
   ============================================================================ */
.df-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--df-space-sm);
    margin-bottom: var(--df-space-2xl);
}

.df-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--df-space-sm);
    padding: var(--df-space-sm) var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text-secondary);
    cursor: pointer;
    transition: all var(--df-transition-base);
}

.df-tabs__tab:hover {
    background: var(--df-bg-card-hover);
    border-color: var(--tab-color, var(--df-primary));
    color: var(--df-text-primary);
}

.df-tabs__tab.active {
    background: linear-gradient(135deg, var(--tab-color, var(--df-primary)) 0%, color-mix(in srgb, var(--tab-color, var(--df-primary)) 80%, #000) 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--tab-color, var(--df-primary)) 40%, transparent);
}

.df-tabs__tab svg { width: 18px; height: 18px; }
.df-tabs__panels { min-height: 400px; }
.df-tabs__panel { display: none; animation: fadeInUp 0.4s ease; }
.df-tabs__panel.active { display: block; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   ACCORDION COMPONENT
   ============================================================================ */
.df-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--df-space-md);
}

.df-accordion__item {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    transition: all var(--df-transition-base);
}

.df-accordion__item:hover { border-color: var(--df-primary); }

.df-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--df-space-md);
    padding: var(--df-space-lg) var(--df-space-xl);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all var(--df-transition-base);
}

.df-accordion__header:hover { background: rgba(255, 255, 255, 0.02); }

.df-accordion__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin: 0;
}

.df-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--df-bg-secondary);
    border-radius: var(--df-radius-md);
    color: var(--df-primary);
    transition: all var(--df-transition-base);
    flex-shrink: 0;
}

.df-accordion__header[aria-expanded="true"] .df-accordion__icon {
    background: var(--df-primary);
    color: white;
    transform: rotate(180deg);
}

.df-accordion__content {
    padding: 0 var(--df-space-xl) var(--df-space-lg);
    color: var(--df-text-secondary);
    line-height: 1.7;
}

.df-accordion__content[hidden] { display: none; }
.df-accordion__content p { margin: 0; }

/* ============================================================================
   ABOUT SECTION
   ============================================================================ */
.df-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--df-space-4xl);
    align-items: center;
}

.df-section__header--left {
    text-align: left;
    margin: 0 0 var(--df-space-xl);
    max-width: none;
}

.df-about-text {
    color: var(--df-text-secondary);
    line-height: 1.8;
}

.df-about-text p { margin-bottom: var(--df-space-lg); }
.df-about-text p:last-child { margin-bottom: 0; }
.df-about-text strong { color: var(--df-text-primary); }

.df-about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--df-space-lg);
    margin: var(--df-space-2xl) 0;
}

.df-about-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--df-space-md);
    padding: var(--df-space-md);
    background: var(--df-bg-card);
    border-radius: var(--df-radius-lg);
    border: 1px solid var(--df-border);
}

.df-about-feature svg { color: var(--df-success); flex-shrink: 0; }
.df-about-feature strong { display: block; color: var(--df-text-primary); font-size: 0.95rem; margin-bottom: 2px; }
.df-about-feature span { font-size: 0.85rem; color: var(--df-text-tertiary); }
.df-about-cta { margin-top: var(--df-space-2xl); }

.df-about-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.df-about-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    padding: var(--df-space-lg) var(--df-space-xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    box-shadow: var(--df-shadow-lg);
    animation: floatCard 6s ease-in-out infinite;
}

.df-about-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    border-radius: var(--df-radius-lg);
    color: white;
}

.df-about-card__value { display: block; font-size: 2rem; font-weight: 800; color: var(--df-text-primary); font-family: var(--df-font-display); }
.df-about-card__label { font-size: 0.9rem; color: var(--df-text-secondary); }
.df-about-card--main { top: 10%; left: 10%; animation-delay: 0s; }
.df-about-card--secondary { top: 40%; right: 5%; animation-delay: 2s; }
.df-about-card--tertiary { bottom: 10%; left: 20%; animation-delay: 4s; }

/* ============================================================================
   PROCESS SECTION
   ============================================================================ */
.df-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--df-space-xl);
    margin-bottom: var(--df-space-2xl);
}

.df-process-card {
    position: relative;
    text-align: center;
    padding: var(--df-space-xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    transition: all var(--df-transition-base);
}

.df-process-card:hover {
    transform: translateY(-5px);
    border-color: var(--df-primary);
    box-shadow: var(--df-shadow-glow);
}

.df-process-card__number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    border-radius: var(--df-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.df-process-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--df-radius-lg);
    color: var(--df-primary);
    margin-bottom: var(--df-space-md);
}

.df-process-card__title { font-size: 1.1rem; margin-bottom: var(--df-space-sm); }
.df-process-card__desc { font-size: 0.9rem; color: var(--df-text-secondary); line-height: 1.6; }

.df-process-card__arrow {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--df-primary);
    opacity: 0.5;
    z-index: 10;
}

.df-process-info {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: var(--df-text-secondary);
    line-height: 1.8;
}

/* ============================================================================
   WHY US SECTION
   ============================================================================ */
.df-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--df-space-xl);
}

.df-why-card {
    padding: var(--df-space-2xl);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-xl);
    text-align: center;
    transition: all var(--df-transition-base);
}

.df-why-card:hover {
    transform: translateY(-5px);
    border-color: var(--df-primary);
    box-shadow: var(--df-shadow-glow);
}

.df-why-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-radius: var(--df-radius-xl);
    color: var(--df-primary);
    margin-bottom: var(--df-space-lg);
}

.df-why-card__title { font-size: 1.25rem; margin-bottom: var(--df-space-sm); }
.df-why-card__desc { font-size: 0.95rem; color: var(--df-text-secondary); line-height: 1.7; }

/* ============================================================================
   CITIES SECTION
   ============================================================================ */
.df-cities-featured__title {
    text-align: center;
    font-size: 1.1rem;
    color: var(--df-text-secondary);
    margin-bottom: var(--df-space-xl);
}

.df-cities-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--df-space-md);
    margin-bottom: var(--df-space-2xl);
}

.df-city-card {
    display: flex;
    align-items: center;
    gap: var(--df-space-md);
    padding: var(--df-space-md) var(--df-space-lg);
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    transition: all var(--df-transition-base);
}

.df-city-card:hover {
    transform: translateY(-3px);
    border-color: var(--df-primary);
    box-shadow: var(--df-shadow-glow);
}

.df-city-card__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-secondary) 100%);
    border-radius: var(--df-radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
}

.df-city-card__name { flex: 1; font-weight: 600; color: var(--df-text-primary); font-size: 0.9rem; }
.df-city-card__arrow { color: var(--df-text-tertiary); opacity: 0; transition: all var(--df-transition-base); }
.df-city-card:hover .df-city-card__arrow { opacity: 1; color: var(--df-primary); }

.df-cities-info {
    max-width: 900px;
    margin: 0 auto var(--df-space-2xl);
    text-align: center;
    color: var(--df-text-secondary);
    line-height: 1.8;
}

.df-cities-info p { margin-bottom: var(--df-space-md); }

/* ============================================================================
   FAQ CONTACT & SEO CONTENT
   ============================================================================ */
.df-faq-contact {
    text-align: center;
    margin-top: var(--df-space-3xl);
    padding: var(--df-space-2xl);
    background: var(--df-bg-card);
    border-radius: var(--df-radius-xl);
    border: 1px solid var(--df-border);
}

.df-faq-contact p { color: var(--df-text-secondary); margin-bottom: var(--df-space-lg); }
.df-faq-contact__buttons { display: flex; gap: var(--df-space-md); justify-content: center; flex-wrap: wrap; }

.df-seo-content {
    padding: var(--df-space-4xl) 0;
    background: var(--df-bg-secondary);
}

.df-seo-article {
    max-width: 900px;
    margin: 0 auto;
    color: var(--df-text-secondary);
    line-height: 1.8;
}

.df-seo-article h2 { font-size: 1.75rem; margin-bottom: var(--df-space-xl); color: var(--df-text-primary); }
.df-seo-article h3 { font-size: 1.25rem; margin: var(--df-space-2xl) 0 var(--df-space-md); color: var(--df-text-primary); }
.df-seo-article p { margin-bottom: var(--df-space-lg); }

/* ============================================================================
   CTA BOX ENHANCEMENTS
   ============================================================================ */
.df-cta-box__orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.df-cta-box__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; }
.df-cta-box__orb--1 { width: 300px; height: 300px; background: var(--df-primary); top: -100px; right: -100px; animation: orbFloat 8s ease-in-out infinite; }
.df-cta-box__orb--2 { width: 200px; height: 200px; background: var(--df-secondary); bottom: -50px; left: -50px; animation: orbFloat 10s ease-in-out infinite reverse; }

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

.df-cta-box__stats { display: flex; justify-content: center; gap: var(--df-space-3xl); margin: var(--df-space-2xl) 0; }
.df-cta-box__stat { text-align: center; }
.df-cta-box__stat-value { display: block; font-size: 2rem; font-weight: 800; color: white; font-family: var(--df-font-display); }
.df-cta-box__stat-label { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.df-btn--glass-white { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: white; }
.df-btn--glass-white:hover { background: rgba(255, 255, 255, 0.25); }

/* ============================================================================
   CATEGORY INFO & MISC
   ============================================================================ */
.df-category-info {
    margin-top: var(--df-space-2xl);
    padding: var(--df-space-xl);
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: var(--df-radius-xl);
    text-align: center;
}

.df-category-info h3 { font-size: 1.1rem; margin-bottom: var(--df-space-md); color: var(--df-text-primary); }
.df-category-info p { color: var(--df-text-secondary); line-height: 1.8; max-width: 900px; margin: 0 auto; }

.df-section__footer { text-align: center; margin-top: var(--df-space-3xl); }
.df-slider__stat-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: var(--df-radius-md); margin-bottom: var(--df-space-sm); }
.df-slider__stat-icon svg { color: var(--df-primary-light); }

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 1200px) {
    .df-cities-grid { grid-template-columns: repeat(4, 1fr); }
    .df-process-grid { grid-template-columns: repeat(2, 1fr); }
    .df-process-card__arrow { display: none; }
}

@media (max-width: 992px) {
    .df-about-grid { grid-template-columns: 1fr; gap: var(--df-space-3xl); }
    .df-about-visual { display: none; }
    .df-why-grid { grid-template-columns: repeat(2, 1fr); }
    .df-cities-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .df-tabs { gap: var(--df-space-xs); }
    .df-tabs__tab { padding: var(--df-space-xs) var(--df-space-md); font-size: 0.8rem; }
    .df-tabs__tab span { display: none; }
    .df-about-features { grid-template-columns: 1fr; }
    .df-process-grid { grid-template-columns: 1fr; }
    .df-why-grid { grid-template-columns: 1fr; }
    .df-cities-grid { grid-template-columns: repeat(2, 1fr); }
    .df-cta-box__stats { flex-direction: column; gap: var(--df-space-lg); }
    .df-accordion__header { padding: var(--df-space-md); }
    .df-accordion__content { padding: 0 var(--df-space-md) var(--df-space-md); }
    .df-faq-contact__buttons { flex-direction: column; }
}