/* ============================================
   IHUB — ENHANCED DESIGN SYSTEM V2
   Cinematic, Multi-Theme, Premium
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&family=Cairo:wght@400;600;700&display=swap');

/* ============================================
   THEME 1: MIDNIGHT GOLD (Default)
   ============================================ */
:root, [data-theme="midnight-gold"] {
  --color-bg-primary: #0a0e27;
  --color-bg-secondary: #0f1635;
  --color-bg-tertiary: #141a3d;
  --color-bg-card: rgba(15, 22, 53, 0.7);
  --color-bg-glass: rgba(255, 255, 255, 0.05);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.1);
  --color-accent: #c9a84c;
  --color-accent-light: #f0d68a;
  --color-accent-dark: #a08530;
  --gradient-accent: linear-gradient(135deg, #c9a84c, #f0d68a);
  --gradient-accent-text: linear-gradient(135deg, #f0d68a, #c9a84c, #f0d68a);
  --color-text-primary: #ffffff;
  --color-text-secondary: #b8c0d4;
  --color-text-muted: #6b7394;
  --color-text-accent: #f0d68a;
  --shadow-accent: 0 4px 20px rgba(201, 168, 76, 0.2);
  --shadow-glow: 0 0 30px rgba(201, 168, 76, 0.15);
  --color-teal: #00b4d8;
  --color-green: #00c853;
  --color-magenta: #e63988;
  --color-orange: #ff8c00;
  --gradient-teal: linear-gradient(135deg, #0096c7, #00b4d8);
  --gradient-green: linear-gradient(135deg, #009624, #00c853);
  --gradient-magenta: linear-gradient(135deg, #c0265e, #e63988);
  --gradient-orange: linear-gradient(135deg, #ff8c00, #ffb347);
  --border-glass: 1px solid rgba(255, 255, 255, 0.08);
  --border-accent: 1px solid rgba(201, 168, 76, 0.3);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-xl: 30px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-arabic: 'Cairo', sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;
  --max-width: 1280px;
  --nav-height: 80px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   THEME 2: EMERALD NOIR
   ============================================ */
[data-theme="emerald-noir"] {
  --color-bg-primary: #0a1a14;
  --color-bg-secondary: #0d2118;
  --color-bg-tertiary: #112b20;
  --color-bg-card: rgba(13, 33, 24, 0.7);
  --color-bg-glass: rgba(255, 255, 255, 0.04);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.08);
  --color-accent: #00e676;
  --color-accent-light: #69f0ae;
  --color-accent-dark: #00c853;
  --gradient-accent: linear-gradient(135deg, #00c853, #69f0ae);
  --gradient-accent-text: linear-gradient(135deg, #69f0ae, #00e676, #69f0ae);
  --color-text-accent: #69f0ae;
  --shadow-accent: 0 4px 20px rgba(0, 230, 118, 0.2);
  --shadow-glow: 0 0 30px rgba(0, 230, 118, 0.15);
  --border-accent: 1px solid rgba(0, 230, 118, 0.3);
}

/* ============================================
   THEME 3: ROYAL CRIMSON
   ============================================ */
[data-theme="royal-crimson"] {
  --color-bg-primary: #1a0a0e;
  --color-bg-secondary: #210d12;
  --color-bg-tertiary: #2b1118;
  --color-bg-card: rgba(33, 13, 18, 0.7);
  --color-bg-glass: rgba(255, 255, 255, 0.04);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.08);
  --color-accent: #ff1744;
  --color-accent-light: #ff616f;
  --color-accent-dark: #d50000;
  --gradient-accent: linear-gradient(135deg, #d50000, #ff1744, #ff616f);
  --gradient-accent-text: linear-gradient(135deg, #ff616f, #ff1744, #ff616f);
  --color-text-accent: #ff616f;
  --shadow-accent: 0 4px 20px rgba(255, 23, 68, 0.2);
  --shadow-glow: 0 0 30px rgba(255, 23, 68, 0.15);
  --border-accent: 1px solid rgba(255, 23, 68, 0.3);
}

/* ============================================
   RESET & BASE
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:var(--nav-height);}
body{font-family:var(--font-body);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background 0.5s ease,color 0.3s ease;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;transition:var(--transition-normal);}
ul,ol{list-style:none;}

/* ============================================
   THEME SWITCHER
   ============================================ */
.theme-switcher{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;padding:12px 10px;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);border:var(--border-glass);border-right:none;}
.theme-btn{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);cursor:pointer;transition:var(--transition-normal);position:relative;}
.theme-btn:hover{transform:scale(1.2);border-color:white;}
.theme-btn.active{border-color:white;box-shadow:0 0 10px currentColor;}
.theme-btn[data-set="midnight-gold"]{background:linear-gradient(135deg,#0a0e27,#c9a84c);}
.theme-btn[data-set="emerald-noir"]{background:linear-gradient(135deg,#0a1a14,#00e676);}
.theme-btn[data-set="royal-crimson"]{background:linear-gradient(135deg,#1a0a0e,#ff1744);}
.theme-label{font-size:0.6rem;color:var(--color-text-muted);text-align:center;writing-mode:vertical-rl;letter-spacing:2px;text-transform:uppercase;}

/* ============================================
   PRELOADER
   ============================================ */
.preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg-primary);display:flex;align-items:center;justify-content:center;z-index:10000;transition:opacity 0.6s ease,visibility 0.6s ease;}
.preloader.loaded{opacity:0;visibility:hidden;}
.preloader-inner{text-align:center;}
.preloader-logo{font-family:var(--font-heading);font-size:3.5rem;font-weight:900;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:preloaderPulse 1.5s ease-in-out infinite;}
.preloader-bar{width:200px;height:3px;background:rgba(255,255,255,0.1);border-radius:10px;margin:20px auto 0;overflow:hidden;}
.preloader-bar-fill{width:0%;height:100%;background:var(--gradient-accent);border-radius:10px;animation:preloaderFill 1.5s ease-in-out forwards;}
@keyframes preloaderPulse{0%,100%{opacity:.4;transform:scale(.95);}50%{opacity:1;transform:scale(1.05);}}
@keyframes preloaderFill{0%{width:0%;}100%{width:100%;}}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar{position:fixed;top:0;left:0;width:100%;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-xl);z-index:1000;transition:var(--transition-normal);background:transparent;}
.navbar.scrolled{background:rgba(10,14,39,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:var(--border-glass);box-shadow:var(--shadow-sm);height:70px;}
.nav-logo{display:flex;align-items:center;gap:4px;z-index:1001;text-decoration:none;}
.nav-logo-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-accent);}
.nav-logo-icon svg{width:58px;height:58px;}
.nav-logo-text{display:flex;flex-direction:column;line-height:1;}
.nav-logo-main{font-family:var(--font-heading);font-weight:800;font-size:1.7rem;color:var(--color-accent);letter-spacing:0.3px;}
.nav-logo-sub{font-family:var(--font-heading);font-weight:500;font-size:0.85rem;color:var(--color-accent);letter-spacing:0.3px;margin-top:0px;opacity:0.85;}
.nav-logo-text span{background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav-links{display:flex;align-items:center;gap:var(--space-md);}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--color-text-secondary);position:relative;padding:8px 4px;transition:var(--transition-normal);}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gradient-accent);transition:var(--transition-normal);}
.nav-links a:hover,.nav-links a.active{color:var(--color-text-primary);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{background:var(--gradient-accent)!important;color:var(--color-bg-primary)!important;padding:10px 24px!important;border-radius:var(--border-radius-xl)!important;font-weight:600!important;font-size:.85rem!important;}
.nav-cta::after{display:none!important;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent);}
.nav-dropdown{position:relative;}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(15,22,53,0.95);backdrop-filter:blur(20px);border:var(--border-glass);border-radius:var(--border-radius-md);padding:var(--space-sm);min-width:220px;opacity:0;visibility:hidden;transition:var(--transition-normal);box-shadow:var(--shadow-lg);}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-dropdown-menu a{display:block;padding:10px 16px;border-radius:var(--border-radius-sm);font-size:.85rem;white-space:nowrap;}
.nav-dropdown-menu a:hover{background:var(--color-bg-glass-hover);}
.nav-dropdown-menu a::after{display:none;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;padding:5px;}
.hamburger span{width:28px;height:2.5px;background:var(--color-text-primary);border-radius:2px;transition:var(--transition-normal);}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ============================================
   SUB-PAGE HERO
   ============================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--color-bg-primary);overflow:hidden;padding:calc(var(--nav-height) + var(--space-2xl)) var(--space-xl) var(--space-2xl);}
.hero-page{min-height:55vh;}
.hero .hero-orb,.hero-page .hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.15;pointer-events:none;}
.hero-orb-1{width:500px;height:500px;background:var(--color-accent);top:-150px;left:-100px;animation:orbFloat 15s ease-in-out infinite alternate;}
.hero-orb-2{width:400px;height:400px;background:var(--color-teal);bottom:-100px;right:-80px;animation:orbFloat 12s ease-in-out infinite alternate-reverse;}
.hero-orb-3{width:300px;height:300px;background:var(--color-magenta);top:30%;right:20%;animation:orbFloat 18s ease-in-out infinite alternate;}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-20px) scale(1.1);}100%{transform:translate(-20px,30px) scale(0.95);};}
.hero .hero-content,.hero-page .hero-content{position:relative;z-index:3;max-width:800px;}
.hero .hero-badge,.hero-page .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--color-bg-glass);border:var(--border-accent);padding:8px 20px;border-radius:var(--border-radius-xl);font-size:.85rem;color:var(--color-text-accent);margin-bottom:var(--space-lg);backdrop-filter:blur(10px);}
.hero .hero-badge-dot,.hero-page .hero-badge-dot{width:8px;height:8px;background:var(--color-accent);border-radius:50%;animation:pulse 2s ease-in-out infinite;}
.hero h1,.hero-page h1{font-family:var(--font-heading);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;line-height:1.1;margin-bottom:var(--space-md);}
.hero h1 .highlight,.hero-page h1 .highlight{background:var(--gradient-accent-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero p,.hero-page p{font-size:clamp(1rem,2vw,1.15rem);color:var(--color-text-secondary);max-width:600px;margin:0 auto;line-height:1.8;}
.hero .hero-buttons,.hero-page .hero-buttons{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;margin-top:var(--space-xl);}

/* ============================================
   CINEMATIC HERO SLIDER
   ============================================ */
.hero-slider{position:relative;width:100%;height:100vh;overflow:hidden;}
.hero-slider-track{display:flex;height:100%;transition:transform 1.2s cubic-bezier(0.77,0,0.175,1);}
.hero-slide{min-width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero-slide-bg{position:absolute;inset:0;z-index:0;}
.hero-slide-bg img{width:100%;height:100%;object-fit:cover;animation:slowZoom 20s ease-in-out infinite alternate;}
.hero-slide-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,14,39,0.92),rgba(15,22,53,0.75));z-index:1;}
@keyframes slowZoom{0%{transform:scale(1) translate(0,0);}100%{transform:scale(1.15) translate(-2%,-1%);}}

/* Cinematic light rays */
.hero-slide-bg::before{content:'';position:absolute;top:-50%;left:30%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(201,168,76,0.03) 40deg,transparent 80deg,transparent 180deg,rgba(201,168,76,0.02) 220deg,transparent 260deg);z-index:2;animation:lightRotate 25s linear infinite;pointer-events:none;}
@keyframes lightRotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

.hero-slide-content{position:relative;z-index:3;text-align:center;max-width:900px;padding:0 var(--space-xl);opacity:0;transform:translateY(40px);transition:opacity 1s ease .3s,transform 1s ease .3s;}
.hero-slide.active .hero-slide-content{opacity:1;transform:translateY(0);}
.hero-slide-badge{display:inline-flex;align-items:center;gap:8px;background:var(--color-bg-glass);border:var(--border-accent);padding:8px 20px;border-radius:var(--border-radius-xl);font-size:.85rem;color:var(--color-text-accent);margin-bottom:var(--space-lg);backdrop-filter:blur(10px);}
.hero-slide-badge-dot{width:8px;height:8px;background:var(--color-accent);border-radius:50%;animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}
.hero-slide h1{font-family:var(--font-heading);font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:1.08;margin-bottom:var(--space-md);letter-spacing:-0.02em;}
.hero-slide h1 .highlight{background:var(--gradient-accent-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-slide p{font-size:clamp(1rem,2vw,1.2rem);color:var(--color-text-secondary);max-width:650px;margin:0 auto var(--space-xl);line-height:1.8;}
.hero-slide-buttons{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;}

/* Slider Controls */
.slider-nav{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:12px;}
.slider-dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,0.4);background:transparent;cursor:pointer;transition:var(--transition-normal);}
.slider-dot.active{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 15px var(--color-accent);}
.slider-dot:hover{border-color:white;}
.slider-arrow{position:absolute;top:50%;z-index:10;width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,0.3);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:white;font-size:1.2rem;transition:var(--transition-normal);}
.slider-arrow:hover{background:var(--gradient-accent);color:var(--color-bg-primary);border-color:transparent;transform:translateY(-50%) scale(1.1);}
.slider-arrow-left{left:30px;transform:translateY(-50%);}
.slider-arrow-right{right:30px;transform:translateY(-50%);}
.slider-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--gradient-accent);z-index:10;transition:width 0.3s linear;}

/* Floating particles */
.particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.particle{position:absolute;width:3px;height:3px;background:var(--color-accent);border-radius:50%;opacity:0;animation:particleFloat linear infinite;}
@keyframes particleFloat{0%{opacity:0;transform:translateY(100vh) scale(0);}10%{opacity:0.6;}90%{opacity:0.6;}100%{opacity:0;transform:translateY(-20vh) scale(1);}}

/* ============================================
   HEXAGONAL ABOUT SECTION
   ============================================ */
.about-hex-section{position:relative;padding:var(--space-3xl) var(--space-xl);overflow:hidden;}
.about-hex-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.03) 1px,transparent 0);background-size:40px 40px;pointer-events:none;}
.about-hex-grid{display:flex;align-items:center;gap:var(--space-2xl);max-width:var(--max-width);margin:0 auto;}
.about-hex-text{flex:1;min-width:300px;}
.about-hex-text .section-label{justify-content:flex-start;}
.about-hex-text h2{font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.2;margin-bottom:var(--space-md);}
.about-hex-text h2 .company-name{color:var(--color-accent);}
.about-hex-text p{color:var(--color-text-secondary);line-height:1.8;margin-bottom:var(--space-md);font-size:1rem;}
.about-hex-text .accent-line{width:60px;height:3px;background:var(--gradient-accent);border-radius:2px;margin-bottom:var(--space-lg);}

.hex-collage{flex:1;min-width:350px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:8px;aspect-ratio:1;max-width:500px;margin-left:auto;}
.hex-item{position:relative;overflow:hidden;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--color-bg-glass);border:none;transition:var(--transition-slow);}
.hex-item img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow);}
.hex-item:hover{transform:scale(1.08);z-index:2;}
.hex-item:hover img{transform:scale(1.15);}
.hex-item.hex-logo{display:flex;align-items:center;justify-content:center;background:var(--gradient-accent);}
.hex-item.hex-logo span{font-family:var(--font-heading);font-weight:900;font-size:1.5rem;color:var(--color-bg-primary);}
.hex-item:nth-child(1){grid-column:2/4;grid-row:1/2;}
.hex-item:nth-child(2){grid-column:4/6;grid-row:1/2;}
.hex-item:nth-child(3){grid-column:1/3;grid-row:2/3;}
.hex-item:nth-child(4){grid-column:3/5;grid-row:2/3;}
.hex-item:nth-child(5){grid-column:5/6;grid-row:2/3;}
.hex-item:nth-child(6){grid-column:2/4;grid-row:3/4;}
.hex-item:nth-child(7){grid-column:4/6;grid-row:3/4;}
.hex-item:nth-child(8){grid-column:1/3;grid-row:4/5;}
.hex-item:nth-child(9){grid-column:3/5;grid-row:4/5;}
.hex-item:nth-child(10){grid-column:5/6;grid-row:4/5;}
.hex-item:nth-child(11){grid-column:2/4;grid-row:5/6;}
.hex-item:nth-child(12){grid-column:4/6;grid-row:5/6;}

/* ============================================
   SECTIONS, CONTAINERS, GRIDS
   ============================================ */
.section{padding:var(--space-3xl) var(--space-xl);position:relative;}
.section-dark{background:var(--color-bg-secondary);}
.container{max-width:var(--max-width);margin:0 auto;width:100%;}
.section-header{text-align:center;margin-bottom:var(--space-2xl);}
.section-label{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:3px;margin-bottom:var(--space-sm);}
.section-label::before,.section-label::after{content:'';width:30px;height:1px;background:var(--color-accent);}
.section-title{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.2;margin-bottom:var(--space-sm);}
.section-title .highlight{background:var(--gradient-accent-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.section-subtitle{font-size:1.1rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);}

/* ============================================
   BUTTONS
   ============================================ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:var(--border-radius-xl);font-family:var(--font-body);font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:var(--transition-normal);position:relative;overflow:hidden;}
.btn-primary{background:var(--gradient-accent);color:var(--color-bg-primary);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-accent);}
.btn-outline{background:transparent;color:var(--color-text-primary);border:2px solid rgba(255,255,255,0.2);}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-3px);}
.btn-teal{background:var(--gradient-teal);color:white;}
.btn-magenta{background:var(--gradient-magenta);color:white;}
.btn-sm{padding:10px 20px;font-size:.85rem;}

/* ============================================
   CARDS
   ============================================ */
.card{background:var(--color-bg-glass);border:var(--border-glass);border-radius:var(--border-radius-lg);padding:var(--space-xl);transition:var(--transition-slow);position:relative;overflow:hidden;backdrop-filter:blur(10px);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-accent);opacity:0;transition:var(--transition-normal);}
.card:hover{background:var(--color-bg-glass-hover);transform:translateY(-5px);border-color:rgba(201,168,76,0.2);box-shadow:var(--shadow-glow);}
.card:hover::before{opacity:1;}
.card-icon{width:60px;height:60px;border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:var(--space-md);background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.2);color:var(--color-accent);}
.card-icon-teal{background:rgba(0,180,216,0.1);border-color:rgba(0,180,216,0.2);color:var(--color-teal);}
.card-icon-green{background:rgba(0,200,83,0.1);border-color:rgba(0,200,83,0.2);color:var(--color-green);}
.card-icon-magenta{background:rgba(230,57,136,0.1);border-color:rgba(230,57,136,0.2);color:var(--color-magenta);}
.card-icon-orange{background:rgba(255,140,0,0.1);border-color:rgba(255,140,0,0.2);color:var(--color-orange);}
.card h3{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;margin-bottom:var(--space-xs);}
.card p{color:var(--color-text-secondary);font-size:.95rem;line-height:1.7;}
.card-link{display:inline-flex;align-items:center;gap:6px;color:var(--color-accent);font-weight:600;font-size:.9rem;margin-top:var(--space-md);transition:var(--transition-normal);}
.card-link:hover{gap:12px;}

/* ============================================
   STATS COUNTER
   ============================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);padding:var(--space-2xl) 0;}
.stat-item{text-align:center;padding:var(--space-lg);position:relative;}
.stat-item::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,0.1);}
.stat-item:last-child::after{display:none;}
.stat-number{font-family:var(--font-heading);font-size:3rem;font-weight:900;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:var(--space-xs);}
.stat-label{font-size:.9rem;color:var(--color-text-secondary);font-weight:500;}

/* ============================================
   MARQUEE
   ============================================ */
.marquee-wrapper{overflow:hidden;padding:var(--space-lg) 0;position:relative;}
.marquee-wrapper::before,.marquee-wrapper::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;}
.marquee-wrapper::before{left:0;background:linear-gradient(90deg,var(--color-bg-primary),transparent);}
.marquee-wrapper::after{right:0;background:linear-gradient(-90deg,var(--color-bg-primary),transparent);}
.marquee-wrapper.dark::before{background:linear-gradient(90deg,var(--color-bg-secondary),transparent);}
.marquee-wrapper.dark::after{background:linear-gradient(-90deg,var(--color-bg-secondary),transparent);}
.marquee-track{display:flex;gap:var(--space-2xl);animation:marquee 30s linear infinite;width:max-content;}
.marquee-track:hover{animation-play-state:paused;}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.marquee-item{display:flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);background:var(--color-bg-glass);border:var(--border-glass);border-radius:var(--border-radius-md);min-width:180px;height:70px;font-family:var(--font-heading);font-weight:600;font-size:.85rem;color:var(--color-text-secondary);white-space:nowrap;backdrop-filter:blur(5px);transition:var(--transition-normal);}
.marquee-item:hover{border-color:rgba(201,168,76,0.3);color:var(--color-text-primary);}

/* ============================================
   CEO QUOTE
   ============================================ */
.quote-card{max-width:800px;margin:0 auto;background:var(--color-bg-glass);border:var(--border-accent);border-radius:var(--border-radius-lg);padding:var(--space-2xl);text-align:center;backdrop-filter:blur(10px);}
.quote-mark{font-size:5rem;line-height:1;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Georgia,serif;opacity:.5;}
.quote-text{font-size:1.15rem;color:var(--color-text-secondary);font-style:italic;line-height:1.8;margin:var(--space-sm) 0 var(--space-lg);}
.quote-author{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;color:var(--color-text-accent);}
.quote-title{font-size:.85rem;color:var(--color-text-muted);margin-top:4px;}

/* ============================================
   SERVICE LISTS
   ============================================ */
.service-list{list-style:none;padding:0;}
.service-list li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;color:var(--color-text-secondary);font-size:.95rem;border-bottom:1px solid rgba(255,255,255,0.04);transition:var(--transition-fast);}
.service-list li:hover{color:var(--color-text-primary);padding-left:8px;}
.service-list li::before{content:'✓';color:var(--color-accent);font-weight:700;flex-shrink:0;margin-top:2px;}
.service-list.green li::before{color:var(--color-green);}
.service-list.teal li::before{color:var(--color-teal);}
.service-list.magenta li::before{color:var(--color-magenta);}

/* ============================================
   TABS
   ============================================ */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-xl);justify-content:center;}
.tab-btn{padding:10px 24px;background:var(--color-bg-glass);border:var(--border-glass);border-radius:var(--border-radius-xl);color:var(--color-text-secondary);font-family:var(--font-body);font-size:.9rem;font-weight:500;cursor:pointer;transition:var(--transition-normal);}
.tab-btn:hover{background:var(--color-bg-glass-hover);color:var(--color-text-primary);}
.tab-btn.active{background:var(--gradient-accent);color:var(--color-bg-primary);border-color:transparent;font-weight:600;}
.tab-content{display:none;animation:fadeIn .4s ease;}
.tab-content.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ============================================
   FEATURE SPLIT
   ============================================ */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:center;}
.feature-split.reverse{direction:rtl;}
.feature-split.reverse>*{direction:ltr;}
.feature-image{border-radius:var(--border-radius-lg);overflow:hidden;position:relative;aspect-ratio:4/3;}
.feature-image img{width:100%;height:100%;object-fit:cover;}

/* ============================================
   GALLERY
   ============================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-md);}
.gallery-item{position:relative;border-radius:var(--border-radius-md);overflow:hidden;aspect-ratio:16/10;cursor:pointer;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--space-lg);background:linear-gradient(transparent,rgba(0,0,0,0.8));transform:translateY(20px);opacity:0;transition:var(--transition-normal);}
.gallery-item:hover .gallery-overlay{transform:translateY(0);opacity:1;}
.gallery-overlay h4{font-family:var(--font-heading);font-weight:700;margin-bottom:4px;}
.gallery-overlay p{font-size:.85rem;color:var(--color-text-secondary);}

/* ============================================
   CLIENTS
   ============================================ */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-md);}
.client-logo{background:var(--color-bg-glass);border:var(--border-glass);border-radius:var(--border-radius-md);padding:var(--space-md);display:flex;align-items:center;justify-content:center;min-height:80px;font-family:var(--font-heading);font-weight:600;font-size:.8rem;color:var(--color-text-secondary);text-align:center;transition:var(--transition-normal);}
.client-logo:hover{border-color:rgba(201,168,76,0.3);background:var(--color-bg-glass-hover);color:var(--color-text-primary);transform:translateY(-3px);}

/* ============================================
   CONTACT
   ============================================ */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-lg);}
.contact-card{background:var(--color-bg-glass);border:var(--border-glass);border-radius:var(--border-radius-lg);padding:var(--space-xl);text-align:center;transition:var(--transition-normal);backdrop-filter:blur(10px);}
.contact-card:hover{border-color:rgba(201,168,76,0.2);transform:translateY(-3px);}
.contact-card-icon{width:60px;height:60px;margin:0 auto var(--space-md);background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--color-accent);}
.contact-card h4{font-family:var(--font-heading);font-weight:700;margin-bottom:var(--space-xs);}
.contact-card p,.contact-card a{color:var(--color-text-secondary);font-size:.9rem;}
.contact-card a:hover{color:var(--color-accent);}
.contact-form{max-width:600px;}
.form-group{margin-bottom:var(--space-md);}
.form-group label{display:block;font-size:.9rem;font-weight:500;color:var(--color-text-secondary);margin-bottom:8px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 18px;background:var(--color-bg-glass);border:var(--border-glass);border-radius:var(--border-radius-md);color:var(--color-text-primary);font-family:var(--font-body);font-size:.95rem;transition:var(--transition-normal);outline:none;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(201,168,76,0.1);}
.form-group textarea{min-height:150px;resize:vertical;}
.form-group select option{background:var(--color-bg-secondary);color:var(--color-text-primary);}

/* ============================================
   GOOGLE MAP
   ============================================ */
.map-section{position:relative;}
.map-container{border-radius:var(--border-radius-lg);overflow:hidden;border:var(--border-glass);}
.map-container iframe{width:100%;height:400px;border:0;filter:grayscale(0.6) contrast(1.1) brightness(0.7) hue-rotate(200deg);transition:filter 0.5s ease;}
.map-container:hover iframe{filter:grayscale(0) contrast(1) brightness(1) hue-rotate(0deg);}

/* ============================================
   FOOTER
   ============================================ */
.footer{background:var(--color-bg-secondary);border-top:var(--border-glass);padding:var(--space-3xl) var(--space-xl) var(--space-lg);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-2xl);max-width:var(--max-width);margin:0 auto;padding-bottom:var(--space-2xl);border-bottom:1px solid rgba(255,255,255,0.06);}
.footer-brand{max-width:350px;}
.footer-logo{display:flex;align-items:center;gap:4px;margin-bottom:var(--space-md);}
.footer-logo-icon{width:45px;height:45px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-accent);}
.footer-logo-icon svg{width:45px;height:45px;}
.footer-logo-text{display:flex;flex-direction:column;line-height:1;}
.footer-logo-main{font-family:var(--font-heading);font-weight:800;font-size:1.4rem;color:var(--color-accent);}
.footer-logo-sub{font-family:var(--font-heading);font-weight:500;font-size:0.9rem;color:var(--color-accent);letter-spacing:0.5px;margin-top:0px;opacity:0.85;}
.footer-logo-text span{background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.footer-desc{color:var(--color-text-muted);font-size:.9rem;line-height:1.7;margin-bottom:var(--space-md);}
.footer-column h4{font-family:var(--font-heading);font-weight:700;font-size:1rem;margin-bottom:var(--space-md);color:var(--color-text-primary);}
.footer-column a{display:block;color:var(--color-text-muted);font-size:.9rem;padding:6px 0;transition:var(--transition-fast);}
.footer-column a:hover{color:var(--color-accent);padding-left:8px;}
.footer-bottom{max-width:var(--max-width);margin:0 auto;padding-top:var(--space-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-sm);}
.footer-bottom p{font-size:.85rem;color:var(--color-text-muted);}
.footer-bottom-links{display:flex;gap:var(--space-md);}
.footer-bottom-links a{font-size:.85rem;color:var(--color-text-muted);}
.footer-bottom-links a:hover{color:var(--color-accent);}

/* ============================================
   WHATSAPP & BACK TO TOP
   ============================================ */
.whatsapp-float{position:fixed;bottom:30px;right:30px;width:60px;height:60px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.4);z-index:999;transition:var(--transition-normal);cursor:pointer;}
.whatsapp-float:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 6px 30px rgba(37,211,102,0.5);}
.whatsapp-float svg{width:30px;height:30px;fill:white;}
.back-to-top{position:fixed;bottom:30px;right:100px;width:45px;height:45px;background:var(--color-bg-glass);border:var(--border-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-accent);font-size:1.2rem;cursor:pointer;z-index:998;opacity:0;visibility:hidden;transition:var(--transition-normal);backdrop-filter:blur(10px);}
.back-to-top.visible{opacity:1;visibility:visible;}
.back-to-top:hover{background:var(--gradient-accent);color:var(--color-bg-primary);transform:translateY(-3px);}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease;}
.reveal.revealed{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease;}
.reveal-left.revealed{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease;}
.reveal-right.revealed{opacity:1;transform:translateX(0);}
.stagger-children>*{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;}
.stagger-children.revealed>*:nth-child(1){transition-delay:.05s;}
.stagger-children.revealed>*:nth-child(2){transition-delay:.1s;}
.stagger-children.revealed>*:nth-child(3){transition-delay:.15s;}
.stagger-children.revealed>*:nth-child(4){transition-delay:.2s;}
.stagger-children.revealed>*:nth-child(5){transition-delay:.25s;}
.stagger-children.revealed>*:nth-child(6){transition-delay:.3s;}
.stagger-children.revealed>*:nth-child(7){transition-delay:.35s;}
.stagger-children.revealed>*:nth-child(8){transition-delay:.4s;}
.stagger-children.revealed>*{opacity:1;transform:translateY(0);}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-xl);}
  .feature-split{grid-template-columns:1fr;gap:var(--space-xl);}
  .feature-split.reverse{direction:ltr;}
  .about-hex-grid{flex-direction:column;}
  .hex-collage{margin:0 auto;max-width:400px;}
}
@media(max-width:768px){
  :root{--space-xl:2rem;--space-2xl:3rem;--space-3xl:5rem;}
  .nav-links{position:fixed;top:0;right:-100%;width:80%;max-width:350px;height:100vh;background:rgba(10,14,39,0.97);backdrop-filter:blur(20px);flex-direction:column;align-items:flex-start;padding:calc(var(--nav-height) + var(--space-xl)) var(--space-xl);gap:var(--space-sm);transition:var(--transition-slow);border-left:var(--border-glass);overflow-y:auto;}
  .nav-links.open{right:0;}
  .nav-dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;background:rgba(255,255,255,0.03);border:none;padding:0 0 0 var(--space-sm);min-width:auto;box-shadow:none;display:none;}
  .nav-dropdown.open .nav-dropdown-menu{display:block;}
  .hamburger{display:flex;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat-item::after{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .slider-arrow{display:none;}
  .theme-switcher{top:auto;bottom:100px;right:0;flex-direction:column;}
  .hex-collage{max-width:300px;}
}
@media(max-width:480px){
  .navbar{padding:0 var(--space-sm);}
  .section{padding:var(--space-2xl) var(--space-sm);}
  .stats{grid-template-columns:1fr 1fr;gap:var(--space-sm);}
  .stat-number{font-size:2.2rem;}
  .nav-logo-main{font-size:1.2rem;}
  .nav-logo-sub{font-size:0.5rem;}
  .nav-logo-icon{width:40px;height:40px;}
  .nav-logo-icon svg{width:40px;height:40px;}
}

/* UTILITIES */
.text-center{text-align:center;}
.text-gold{color:var(--color-accent);}
.text-teal{color:var(--color-teal);}
.text-green{color:var(--color-green);}
.text-magenta{color:var(--color-magenta);}
.text-orange{color:var(--color-orange);}
.text-muted{color:var(--color-text-muted);}
.mt-1{margin-top:var(--space-sm);}
.mt-2{margin-top:var(--space-lg);}
.mt-3{margin-top:var(--space-xl);}
.mb-1{margin-bottom:var(--space-sm);}
.mb-2{margin-bottom:var(--space-lg);}
.mb-3{margin-bottom:var(--space-xl);}
.mx-auto{margin-left:auto;margin-right:auto;}
.w-full{width:100%;}