/* ═══════════════════════════════════════════════════════════
   MEDIATECH — Single Light Theme (Modern Azerbaijani Corporate)
   Bright · Confident · Professional · No theme switching
═══════════════════════════════════════════════════════════ */

/* Fonts loaded via <link> in header.php for better performance */




/* ── ROOT VARIABLES ─────────────────────────────────────── */
:root {
  /* Brand colors — inspired by Azerbaijani flag blues + corporate gold */
  --blue:        #0057B8;   /* primary brand blue */
  --blue-dark:   #00429A;
  --blue-light:  #2176D2;
  --gold:        #C9A84C;   /* prestige accent */
  --red:         #E8001D;   /* MediaTech dot red */

  /* Backgrounds */
  --bg:          #F7F8FA;
  --bg-white:    #FFFFFF;
  --bg-light:    #EEF1F6;
  --bg-dark:     #0A1628;   /* deep navy for contrast sections */
  --bg-card:     #FFFFFF;

  /* Text */
  --text:        #0A1628;
  --text-sec:    #3A4A5C;
  --text-muted:  #7A8A9A;
  --text-light:  #B0BCC8;

  /* Borders */
  --border:      #DDE3ED;
  --border-soft: #EEF1F6;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,87,184,0.08);
  --shadow:      0 4px 20px rgba(0,87,184,0.12);
  --shadow-lg:   0 8px 40px rgba(0,87,184,0.18);
  --shadow-card: 0 2px 16px rgba(10,22,40,0.08);
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; background:#F7F8FA; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > footer { margin-top:auto; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { font-family:'Inter',sans-serif; cursor:pointer; }
input,textarea,select { font-family:'Inter',sans-serif; }

/* ── UTILITIES ──────────────────────────────────────────── */
.container    { max-width:1240px; margin:0 auto; padding:0 40px; }
.container-sm { max-width:900px;  margin:0 auto; padding:0 40px; }

.sec-label {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--blue); font-size:11px; font-weight:700;
   letter-spacing:3px; margin-bottom:12px;
}
.sec-label::before { content:''; display:block; width:20px; height:2px; background:var(--blue); }

.sec-title {
  font-family:'Inter',sans-serif;
  font-size:clamp(28px,4vw,50px); font-weight:900;
   letter-spacing:1px;
  line-height:1; color:#0A1628 !important;
}
.sec-title span { color:var(--blue); }
.sec-line { width:48px; height:3px; background:var(--blue); margin:16px 0 48px; border-radius:2px; }
.sec-line.cx { margin-left:auto; margin-right:auto; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  border:2px solid transparent; border-radius:4px;
  transition:all 0.25s cubic-bezier(.4,0,.2,1);
}
.btn-blue    { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-blue:hover { background:var(--blue-dark); border-color:var(--blue-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-outline { background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-outline:hover { background:var(--blue); color:#fff; }
.btn-white   { background:#fff; color:var(--blue); border-color:#fff; }
.btn-white:hover { background:var(--bg-light); }
.btn-gold    { background:var(--gold); color:#fff; border-color:var(--gold); }
.btn-gold:hover { background:#b8923f; transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-shop    { background:linear-gradient(135deg,#FF6B35,#E8001D); color:#fff; border-color:transparent; }
.btn-shop:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,0,29,0.3); }
.btn-sm { padding:9px 20px; font-size:11px; }

/* Loader removed */

/* ── HEADER ─────────────────────────────────────────────── */
#header {
  position:fixed; top:0; left:0; right:0; z-index:1000; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:#ffffff !important;
  border-bottom:1px solid #DDE3ED !important;
  box-shadow:0 2px 8px rgba(0,87,184,0.08);
  transition:box-shadow 0.3s ease;
  /* Isolation: prevent mix-blend-mode bleed from children */
}
#header.scrolled { box-shadow:0 4px 20px rgba(0,87,184,0.12); }

/* Logo — uses logo-dark.png (dark content, transparent bg) */
.header-logo { display:flex; align-items:center; }
.header-logo img { height:36px; width:auto; max-width:180px; object-fit:contain; display:block; }

/* Nav */
.header-nav { display:flex; align-items:center; gap:28px; }
.header-nav a {
  color:#3A4A5C !important; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px;
  position:relative; padding-bottom:3px; transition:color 0.2s;
}
.header-nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--blue); transition:width 0.25s; }
.header-nav a:hover, .header-nav a.active { color:#0057B8 !important; }
.header-nav a:hover::after, .header-nav a.active::after { width:100%; }

/* Header shop btn */
.header-shop-btn {
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; background:var(--blue);
  padding:7px 16px; border-radius:4px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  transition:all 0.2s;
}
.header-shop-btn:hover { background:var(--blue-dark); transform:translateY(-1px); }

.header-right { display:flex; align-items:center; gap:12px; }

/* Language switcher */
.lang-sw { display:flex; gap:2px; }
.lang-sw a {
  color:#7A8A9A !important; font-size:11px; font-weight:700; letter-spacing:1.5px;
  padding:5px 9px; border:1px solid transparent; border-radius:3px; transition:all 0.2s;
}
.lang-sw a:hover { color:#0057B8 !important; border-color:#DDE3ED; }
.lang-sw a.active { color:#0057B8 !important; border-color:#0057B8; background:rgba(0,87,184,0.06); }


/* ── LANGUAGE PICKER ─────────────────────────────────────── */
.lang-picker { position:relative; }
.lang-current {
  display:flex; align-items:center; gap:5px;
  background:transparent; border:1.5px solid #DDE3ED;
  border-radius:6px; padding:6px 10px; cursor:pointer;
  color:#3A4A5C !important; font-size:11px; font-weight:700;
  letter-spacing:1px; transition:all 0.2s;
}
.lang-current:hover { border-color:#0057B8; color:#0057B8 !important; }
.lang-arrow { font-size:8px; transition:transform 0.2s; color:#7A8A9A; }
.lang-picker.open .lang-arrow { transform:rotate(180deg); }
.lang-picker.open .lang-current { border-color:#0057B8; color:#0057B8 !important; }

.lang-dropdown {
  position:absolute; top:calc(100% + 6px); right:0;
  background:#fff; border:1.5px solid #DDE3ED; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,87,184,0.14);
  overflow:hidden; min-width:72px; z-index:3000;
  opacity:0; transform:translateY(-6px);
  pointer-events:none; transition:all 0.18s ease;
}
.lang-picker.open .lang-dropdown {
  opacity:1; transform:translateY(0);
  pointer-events:all;
}
.lang-option {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:9px 14px; font-size:11px; font-weight:700; letter-spacing:1px;
  color:#3A4A5C; text-decoration:none; transition:background 0.12s;
}
.lang-option:hover { background:#F0F5FF; color:#0057B8; }
.lang-active { color:#0057B8 !important; font-weight:700; background:#F0F5FF; }
.lang-active .fa-check { font-size:9px; color:#0057B8; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:6px; cursor:pointer; }
.hamburger span { display:block; width:22px; height:2px; background:#0A1628 !important; border-radius:2px; transition:all 0.25s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile nav */
.mob-nav { display:none; position:fixed; inset:72px 0 0 0; background:#fff; z-index:999; padding:28px; flex-direction:column; border-top:1px solid var(--border); }
.mob-nav.open { display:flex; }
.mob-nav a { color:var(--text-sec); font-size:20px; font-weight:700;  letter-spacing:2px; padding:16px 0; border-bottom:1px solid var(--border-soft); font-family:'Inter',sans-serif; }
.mob-nav a:hover { color:var(--blue); }
.mob-lang { display:flex; gap:8px; padding-top:20px; }
.mob-lang a { border:1px solid var(--border); color:var(--text-muted); font-size:12px; padding:8px 14px; border-radius:3px; }
.mob-lang a.active, .mob-lang a:hover { border-color:var(--blue); color:var(--blue); background:rgba(0,87,184,0.05); }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden; background:#0A1628;
  padding-top:72px;
}

/* Hero video */
.hero-video-wrap { position:absolute; inset:0; overflow:hidden; }
.hero-video-wrap video {
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw;
  min-height:100vh; min-width:177.77vh;
  transform:translate(-50%,-50%);
  object-fit:cover; pointer-events:none;
}
/* Multi-layer overlay for maximum text readability */
.hero-overlay-1 { position:absolute; inset:0; background:rgba(10,22,40,0.78); }
.hero-overlay-2 { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 0%, rgba(10,22,40,0.3) 100%); }
.hero-overlay-3 { position:absolute; bottom:0; left:0; right:0; height:200px; background:linear-gradient(to top, rgba(10,22,40,0.6), transparent); }

/* Subtle pattern */
.hero-pattern {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
  background-size:60px 60px;
}
/* Blue glow */
.hero-glow { position:absolute; top:20%; left:5%; width:600px; height:600px; background:radial-gradient(circle, rgba(0,87,184,0.25) 0%, transparent 70%); pointer-events:none; }

.hero-content { position:relative; z-index:2; padding:60px 40px; max-width:1240px; margin:0 auto; width:100%; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,87,184,0.3); border:1px solid rgba(0,87,184,0.5);
  color:rgba(255,255,255,0.9); padding:6px 16px; border-radius:30px;
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  margin-bottom:28px;
}
.hero-badge i { font-size:7px; color:#4FC3F7; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero-h1 {
  font-family:'Inter',sans-serif;
  font-size:clamp(42px,6.5vw,88px);
  font-weight:900; color:#ffffff !important; 
  letter-spacing:3px; line-height:1.0; margin-bottom:16px;
  text-shadow:0 2px 30px rgba(0,0,0,0.4);
}
.hero-h1 .accent { color:#4FC3F7; }

.hero-slogan {
  font-size:clamp(12px,1.4vw,15px); font-weight:500;
  color:rgba(255,255,255,0.55) !important; letter-spacing:3px;
  margin-bottom:20px; text-transform:uppercase;
}

.hero-desc { color:rgba(255,255,255,0.55); font-size:15px; max-width:560px; line-height:1.85; margin-bottom:36px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; }

/* Hero stats */
.hero-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,0.08);
  border-top:1px solid rgba(255,255,255,0.1);
  border-radius:8px; overflow:hidden; max-width:640px;
}
.hs-item { padding:16px 20px; background:rgba(0,0,0,0.3); text-align:center; }
.hs-item .n { display:block; font-family:'Inter',sans-serif; font-size:28px; font-weight:900; color:#fff; line-height:1; }
.hs-item .l { font-size:9px; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:2px; margin-top:2px; }

/* ── STATS BAR ──────────────────────────────────────────── */
.stats-bar { background:var(--blue); }
.stats-bar-inner { display:grid; grid-template-columns:repeat(4,1fr); max-width:1240px; margin:0 auto; }
.stat-item { padding:28px 32px; border-right:1px solid rgba(255,255,255,0.12); text-align:center; }
.stat-item:last-child { border-right:none; }
.stat-num { display:block; font-family:'Inter',sans-serif; font-size:46px; font-weight:900; color:#fff; line-height:1; margin-bottom:5px; }
.stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.65); }

/* ── SECTIONS ───────────────────────────────────────────── */
.section        { padding:96px 0; background:var(--bg); }
.section-white  { background:var(--bg-white); }
.section-light  { background:var(--bg-light); }
.section-navy   { background:var(--bg-dark); }

/* ── VIDEO INTRO ────────────────────────────────────────── */
.video-intro { padding:80px 0; background:var(--bg-white); }
.video-intro-inner { display:grid; grid-template-columns:1fr 1.4fr; gap:72px; align-items:center; }
.video-wrap { position:relative; border-radius:12px; overflow:hidden; background:#000; aspect-ratio:16/9; box-shadow:var(--shadow-lg); }
.video-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.video-overlay-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); cursor:pointer; transition:background 0.3s; }
.video-overlay-btn:hover { background:rgba(0,0,0,0.15); }
.video-play-btn { width:72px; height:72px; border-radius:50%; background:var(--blue); border:3px solid rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; transition:all 0.3s; box-shadow:0 8px 32px rgba(0,87,184,0.5); }
.video-overlay-btn:hover .video-play-btn { transform:scale(1.1); background:var(--blue-dark); }
.video-overlay-btn.playing { background:transparent; opacity:0; pointer-events:none; }
.video-overlay-btn.playing:hover { opacity:0; }
.video-text .sec-label { margin-bottom:8px; }
.video-text h2 { font-family:'Inter',sans-serif; font-size:clamp(24px,3vw,40px); font-weight:900; color:var(--text); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.video-text .slogan-tag { font-size:15px; font-style:italic; color:var(--blue); font-weight:500; margin-bottom:18px; }
.video-text p { color:var(--text-sec); font-size:15px; line-height:1.85; margin-bottom:14px; }

/* ── SERVICES ───────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-card {
  background:var(--bg-white); padding:40px 32px;
  border-radius:12px; border:1px solid var(--border);
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
  transition:all 0.3s cubic-bezier(.4,0,.2,1);
}
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s; }
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(0,87,184,0.2); }
.svc-card:hover::before { transform:scaleX(1); }
.svc-icon { width:56px; height:56px; background:rgba(0,87,184,0.08); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:24px; transition:all 0.3s; }
.svc-icon i { font-size:22px; color:var(--blue); }
.svc-card:hover .svc-icon { background:var(--blue); }
.svc-card:hover .svc-icon i { color:#fff; }
.svc-card h3 { font-family:'Inter',sans-serif; font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--text); margin-bottom:10px; }
.svc-card p { color:var(--text-sec); font-size:14px; line-height:1.8; }

/* ── ABOUT ──────────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-img-wrap { position:relative; }
.about-img { width:100%; border-radius:12px; box-shadow:var(--shadow-lg); }
.about-img-accent { position:absolute; bottom:-24px; right:-24px; background:var(--blue); color:#fff; padding:24px 28px; border-radius:8px; box-shadow:var(--shadow-lg); }
.about-img-accent strong { display:block; font-family:'Inter',sans-serif; font-size:44px; font-weight:900; line-height:1; }
.about-img-accent span { font-size:10px; text-transform:uppercase; letter-spacing:2px; opacity:0.75; font-weight:700; }
.about-text p { color:var(--text-sec); font-size:15px; line-height:1.9; margin-bottom:18px; }
.stats-grid4 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; }
.stat-box { background:var(--bg-white); padding:24px; border-radius:10px; border:1px solid var(--border); box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.stat-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); }
.stat-box .num { display:block; font-family:'Inter',sans-serif; font-size:42px; font-weight:900; color:var(--blue); line-height:1; margin-bottom:6px; }
.stat-box p { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:2px; font-weight:700; }

/* ── FILTER ─────────────────────────────────────────────── */
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.fbtn { padding:9px 22px; border:1.5px solid var(--border); background:var(--bg-white); color:var(--text-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; cursor:pointer; border-radius:30px; transition:all 0.2s; }
.fbtn.active, .fbtn:hover { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:var(--shadow-sm); }

/* ── PROJECTS ───────────────────────────────────────────── */
.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; }
.proj-card { background:var(--bg-white); overflow:hidden; cursor:pointer; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow-card); transition:all 0.3s, opacity 0.22s, transform 0.22s; position:relative; display:block; user-select:none; opacity:1; }
.proj-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(0,87,184,0.2); }
.proj-img { width:100%; height:230px; object-fit:cover; display:block; transition:transform 0.5s; }
.proj-card:hover .proj-img { transform:scale(1.05); }
.proj-no-img { width:100%; height:230px; background:var(--bg-light); display:flex; align-items:center; justify-content:center; }
.proj-no-img i { font-size:48px; color:var(--border); }
.proj-hover { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,87,184,0.88); opacity:0; transition:opacity 0.3s; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; text-align:center; }
.proj-card:hover .proj-hover { opacity:1; }
.proj-hover h3 { color:#fff; font-family:'Inter',sans-serif; font-size:18px; text-transform:uppercase; margin-bottom:8px; }
.proj-hover p { color:rgba(255,255,255,0.8); font-size:13px; }
.proj-info { padding:20px 22px; }
.proj-info h3 { color:var(--text); font-size:14px; font-weight:600; margin-bottom:10px; }
.proj-meta { display:flex; justify-content:space-between; align-items:center; }
.proj-date { color:var(--text-muted); font-size:12px; }
.proj-cat { background:rgba(0,87,184,0.1); color:var(--blue); padding:3px 10px; font-size:10px; text-transform:uppercase; letter-spacing:1px; font-weight:700; border-radius:30px; }

/* ── PARTNERS ───────────────────────────────────────────── */
.partners-marquee { overflow:hidden; position:relative; background:var(--bg-white); padding:4px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.partners-marquee::before,.partners-marquee::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:1; }
.partners-marquee::before { left:0; background:linear-gradient(to right,var(--bg-white),transparent); }
.partners-marquee::after  { right:0; background:linear-gradient(to left, var(--bg-white),transparent); }
.partners-track { display:flex; width:max-content; animation:marquee 32s linear infinite; will-change:transform; transform:translateZ(0); backface-visibility:hidden; }
@keyframes marquee { to{transform:translateX(-50%)} }
.partner-logo-slide { display:flex; align-items:center; justify-content:center; padding:22px 44px; border-right:1px solid var(--border); min-width:180px; max-width:240px; height:100px; }
.partner-logo-slide img { max-width:140px; max-height:60px; width:auto; height:auto; object-fit:contain; filter:brightness(0) opacity(0.45); transition:filter 0.3s; }
.partner-logo-slide:hover img { filter:none; }
.partner-logo-slide img[src*="percon"] { filter:opacity(0.55); }
.partner-logo-slide:hover img[src*="percon"] { filter:none; }
.partner-logo-slide span { font-family:'Inter',sans-serif; font-size:15px; font-weight:900; color:var(--text-muted); letter-spacing:2px; }
.partner-logo-slide:hover span { color:var(--blue); }

/* PARTNERS GRID — fixed layout */
.partner-cat-label {
  display:flex; align-items:center; gap:16px; margin-bottom:16px;
}
.partner-cat-label span { color:var(--blue); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:3px; white-space:nowrap; }
.partner-cat-label::after { content:''; flex:1; height:1px; background:var(--border); }

.partners-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
/* Responsive partner grid */
@media(max-width:1100px) { .partners-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:768px)  { .partners-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px)  { .partners-grid { grid-template-columns:repeat(2,1fr); } }

.partner-card {
  background:var(--bg-white); border:1.5px solid var(--border);
  border-radius:10px; padding:20px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; cursor:pointer; text-decoration:none;
  min-height:100px; text-align:center;
  box-shadow:var(--shadow-card); transition:all 0.25s;
}
.partner-card:hover { border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-3px); }
.partner-card img {
  height:40px; width:auto; max-width:120px; object-fit:contain;
  filter:none; opacity:0.85; transition:all 0.3s;
}
.partner-card:hover img { filter:none !important; opacity:1 !important; transform:scale(1.05); }
.partner-card span { color:var(--text-muted); font-size:9px; letter-spacing:2px; text-transform:none; font-weight:700; transition:color 0.2s; }
.partner-card:hover span { color:var(--blue); }

/* ── NEWS ───────────────────────────────────────────────── */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; }
.news-card { background:var(--bg-white); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow-card); transition:all 0.3s, opacity 0.22s, transform 0.22s; display:block; user-select:none; opacity:1; }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(0,87,184,0.2); }
.news-img img { width:100%; height:210px; object-fit:cover; display:block; transition:transform 0.5s; }
.news-card:hover .news-img img { transform:scale(1.04); }
.news-no-img { height:210px; background:var(--bg-light); display:flex; align-items:center; justify-content:center; }
.news-no-img i { font-size:48px; color:var(--border); }
.news-body { padding:24px; }
.news-cat { display:inline-block; background:rgba(0,87,184,0.1); color:var(--blue); padding:3px 12px; font-size:10px; text-transform:uppercase; letter-spacing:1px; font-weight:700; border-radius:30px; margin-bottom:12px; }
.news-body h3 { font-size:16px; font-weight:700; color:var(--text); margin-bottom:10px; line-height:1.45; }
.news-body p { color:var(--text-sec); font-size:13.5px; line-height:1.75; margin-bottom:14px; }
.news-date { color:var(--text-muted); font-size:12px; display:flex; align-items:center; gap:6px; }

/* ── CTA ────────────────────────────────────────────────── */
.cta-section { background:var(--bg-dark); padding:80px 0; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%,rgba(0,87,184,0.3) 0%,transparent 60%); }
.cta-inner { text-align:center; position:relative; z-index:1; }
.cta-inner h2 { font-family:'Inter',sans-serif; font-size:clamp(28px,5vw,56px); font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:2px; margin-bottom:6px; }
.cta-inner .cta-slogan { color:rgba(255,255,255,0.6); font-size:16px; font-style:italic; margin-bottom:24px; }
.cta-inner p { color:rgba(255,255,255,0.55); font-size:15px; max-width:500px; margin:0 auto 36px; }
.mediastore-banner { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:28px 36px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; margin-top:28px; max-width:600px; margin-left:auto; margin-right:auto; text-align:center; }
.mediastore-banner .ms-text strong { display:block; color:#fff; font-family:'Inter',sans-serif; font-size:22px; font-weight:800; text-transform:uppercase; margin-bottom:6px; letter-spacing:1px; }
.mediastore-banner .ms-text span { color:rgba(255,255,255,0.45); font-size:13px; }

/* ── CONTACT ────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; }
.ci-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; }
.ci-icon { width:48px; height:48px; background:rgba(0,87,184,0.08); border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ci-icon i { color:var(--blue); font-size:16px; }
.ci-item strong { display:block; color:var(--text); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px; font-weight:700; }
.ci-item span, .ci-item a { color:var(--text-sec); font-size:14px; line-height:1.7; }
.ci-item a:hover { color:var(--blue); }
.contact-form { display:flex; flex-direction:column; gap:14px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-group label { display:block; color:var(--text-muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:7px; }
.cf-group input, .cf-group textarea {
  background:var(--bg-light); border:1.5px solid var(--border); border-radius:8px;
  color:var(--text); padding:12px 16px; font-size:14px; width:100%; transition:all 0.2s;
}
.cf-group input:focus, .cf-group textarea:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(0,87,184,0.1); }
.cf-group textarea { resize:vertical; min-height:130px; }
.cf-msg { font-size:13px; padding:12px 16px; border-radius:8px; display:none; }
.cf-msg.ok  { background:rgba(16,185,129,0.1); border:1.5px solid rgba(16,185,129,0.3); color:#059669; display:block; }
.cf-msg.err { background:rgba(239,68,68,0.1); border:1.5px solid rgba(239,68,68,0.3); color:#dc2626; display:block; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer { background:var(--bg-dark); padding:56px 0 32px; border-top:3px solid var(--blue); }
.footer-top { display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:56px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.06); }
.footer-logo-img { height:34px; width:auto; margin-bottom:16px; mix-blend-mode:screen; }
.footer-brand p { color:rgba(255,255,255,0.35); font-size:13px; line-height:1.8; max-width:280px; }
.footer-social { display:flex; gap:10px; margin-top:20px; }
.footer-social a { width:36px; height:36px; border:1px solid rgba(255,255,255,0.12); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.3); font-size:13px; transition:all 0.2s; }
.footer-social a:hover { border-color:var(--blue); color:#fff; background:var(--blue); }
.footer-col h4 { color:rgba(255,255,255,0.55); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2.5px; margin-bottom:18px; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { color:rgba(255,255,255,0.3); font-size:13px; transition:color 0.2s; }
.footer-col ul li a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px; }
.footer-bottom p, .footer-bottom a { color:rgba(255,255,255,0.2); font-size:11px; letter-spacing:0.5px; text-decoration:none; }
.footer-bottom a:hover { color:rgba(255,255,255,0.6); }

/* ── MODAL ──────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(10,22,40,0.8); z-index:2000; display:none; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--bg-white); max-width:820px; width:100%; max-height:90vh; overflow-y:auto; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow-lg); animation:modalIn 0.25s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:22px 28px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-white); border-radius:16px 16px 0 0; }
.modal-head h2 { color:var(--text); font-family:'Inter',sans-serif; font-size:22px; font-weight:800; text-transform:uppercase; }
.modal-close { background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; transition:color 0.2s; }
.modal-close:hover { color:var(--text); }
.modal-body { padding:28px; }
.modal-body img { width:100%; border-radius:8px; margin-bottom:20px; }
.modal-body p { color:var(--text-sec); font-size:15px; line-height:1.85; }

/* ── PAGE HERO ──────────────────────────────────────────── */
.page-hero { margin-top:72px; padding:64px 0 52px; background:var(--bg-dark); position:relative; overflow:hidden; }
.page-hero .phero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.15; }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%,rgba(0,87,184,0.3) 0%,transparent 60%); }
.page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); }
.page-hero .container { position:relative; z-index:1; }
.breadcrumb { color:rgba(255,255,255,0.4); font-size:11px; letter-spacing:2px; text-transform:uppercase; margin-bottom:20px; display:flex; align-items:center; }
.breadcrumb a { color:rgba(255,255,255,0.4); }
.breadcrumb a:hover, .breadcrumb span { color:rgba(255,255,255,0.9); }
.breadcrumb i { margin:0 10px; font-size:8px; opacity:0.3; }
.page-hero h1 { font-family:'Inter',sans-serif; font-size:clamp(36px,7vw,72px); font-weight:900; color:#fff;  letter-spacing:2px; line-height:1; }
.page-hero .ph-subtitle { color:rgba(255,255,255,0.5); font-size:14px; margin-top:12px; }

/* ── NOTIFICATION ───────────────────────────────────────── */
#notif { position:fixed; bottom:28px; right:28px; background:var(--blue); color:#fff; padding:14px 22px; font-size:13px; font-weight:600; transform:translateY(70px); opacity:0; z-index:3000; border-radius:8px; box-shadow:var(--shadow-lg); max-width:340px; }
#notif.show { transform:translateY(0); opacity:1; transition:all 0.3s ease; }

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.reveal       { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease !important; }
.reveal.in    { opacity:1; transform:none; }
.reveal-l     { opacity:0; transform:translateX(-36px); transition:opacity 0.7s ease, transform 0.7s ease !important; }
.reveal-r     { opacity:0; transform:translateX(36px); transition:opacity 0.7s ease, transform 0.7s ease !important; }
.reveal-l.in, .reveal-r.in { opacity:1; transform:none; }
.d1{transition-delay:.08s!important} .d2{transition-delay:.16s!important} .d3{transition-delay:.24s!important} .d4{transition-delay:.32s!important}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1100px) {
  .footer-top { grid-template-columns:1fr 1fr; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .video-intro-inner { grid-template-columns:1fr; gap:40px; }
}
@media(max-width:900px) {
  #header { padding:0 24px; }
  .header-nav, .lang-sw, .header-shop-btn { display:none !important; }
  .hamburger { display:flex; }
  .container, .container-sm { padding:0 24px; }
  .section { padding:64px 0; }
  .about-grid, .contact-grid { grid-template-columns:1fr; gap:48px; }
  .about-img-accent { bottom:-14px; right:0; }
  .stats-bar-inner { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:640px) {
  .services-grid { grid-template-columns:1fr; }
  .proj-grid, .news-grid { grid-template-columns:1fr; }
  .stats-grid4 { grid-template-columns:1fr 1fr; }
  .cf-row { grid-template-columns:1fr; }
  .stats-bar-inner { grid-template-columns:1fr 1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .hero-h1 { font-size:clamp(44px,13vw,72px); }
  .mediastore-banner { flex-direction:column; text-align:center; }
  .hero-strip { grid-template-columns:1fr 1fr; }
}

/* ── FIX: Section titles visible on light backgrounds ─────── */
.section .sec-title,
.section-white .sec-title,
.section-light .sec-title { color: var(--text) !important; }

.section .sec-label,
.section-white .sec-label,
.section-light .sec-label { color: var(--blue) !important; }

/* Projects & News on light bg */
.section .proj-info h3,
.section-white .proj-info h3 { color: var(--text) !important; }

/* Filter buttons text */
.fbtn { color: var(--text-muted); }
.fbtn.active, .fbtn:hover { color: #fff; }

/* Hero h1 — force white, max weight */
.hero-h1 { color: #ffffff !important; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.hero-slogan { color: rgba(255,255,255,0.85) !important; }
.hero-desc  { color: rgba(255,255,255,0.7) !important; }

/* Hero badge */
.hero-badge { color: #fff !important; }

/* Stats in hero strip */
.hs-item .n { color: #fff !important; }
.hs-item .l { color: rgba(255,255,255,0.5) !important; }

/* ═══════════════════════════════════════════════════════════
   HEADER NUCLEAR FIX — always white bg, always dark text
   Overrides everything, no inheritance, no CSS vars
═══════════════════════════════════════════════════════════ */
#header,
#header.scrolled {
  z-index: 2000 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #DDE3ED !important;
  isolation: isolate !important;

}

/* Force ALL text inside header to be dark, always */
#header *,
#header *::before,
#header *::after {
  mix-blend-mode: normal !important;
}

#header .header-nav a {
  color: #3A4A5C !important;
}
#header .header-nav a:hover,
#header .header-nav a.active {
  color: #0057B8 !important;
}
#header .lang-sw a {
  color: #7A8A9A !important;
}
#header .lang-sw a.active,
#header .lang-sw a:hover {
  color: #0057B8 !important;
}
#header .header-shop-btn {
  color: #ffffff !important;
  background: #0057B8 !important;
}
#header .hamburger span {
  background: #0A1628 !important;
}

/* ── HERO STATS — prevent text concatenation ──────────────── */
.hs-item { display:flex; flex-direction:column; align-items:center; }
.hs-item .n { display:block !important; }
.hs-item .l { display:block !important; }

/* ── HERO TEXT — maximum visibility ───────────────────────── */
.hero-h1,
.hero .hero-h1 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 4px 24px rgba(0,0,0,0.4) !important;
}
.hero-slogan { color: rgba(255,255,255,0.65) !important; }
.hero-badge  { color: #ffffff !important; }
.hero-desc   { color: rgba(255,255,255,0.75) !important; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }

/* ── STRONGER VIDEO OVERLAY ────────────────────────────────── */
.hero-overlay-1 {
  background: rgba(10,22,40,0.75) !important;
}

/* ── SECTION TITLES — always dark on light bg ─────────────── */
.section .sec-title,
.section-white .sec-title,
.section-light .sec-title,
.section .sec-label {
  color: #0A1628 !important;
}
.section .sec-label,
.section-white .sec-label {
  color: #0057B8 !important;
}
.section .proj-info h3,
.section-white .proj-info h3,
.section .news-body h3,
.section-white .news-body h3 {
  color: #0A1628 !important;
}




/* ── PAGE TRANSITIONS ────────────────────────────────────── */

/* ── PARTNER LOGOS — clean hover behavior ─────────────────── */
.partner-card { background:#fff; }
.partner-card:hover { background:#F0F5FF; }

.partner-card img {
  height:40px; width:auto; max-width:120px;
  object-fit:contain; display:block; margin:0 auto;
  filter:none;
  opacity:0.85;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.partner-card:hover img {
  /* Hover: full color, slight scale */
  filter:none !important;
  transform:scale(1.06);
}

/* Sony SVG (white text) — invert so visible on white card */
.partner-card img[src*="sony-light.svg"] {
  filter:brightness(0) !important;
  opacity:0.75 !important;
}
.partner-card:hover img[src*="sony-light.svg"] {
  filter:brightness(0) !important;
  opacity:1 !important;
  transform:scale(1.06);
}

/* Marquee logos — handled by main .partner-logo-slide img rule */

/* Specific logo size overrides */
.partner-card img[src*="haivision"] { height:52px !important; max-width:160px !important; }
.partner-card img[src*="percon"] { height:52px !important; max-width:160px !important; }

.partner-card img[src*="blackmagic"] { height:52px !important; max-width:160px !important; }
.partner-card img[src*="vizrt"] { height:52px !important; max-width:160px !important; }

/* Prevent locale-specific uppercase for brand names */
.partner-card span { text-transform:uppercase; font-variant-ligatures:none; }

/* ═══════════════════════════════════════════════════════════
   MOBILE FIXES
═══════════════════════════════════════════════════════════ */

/* Prevent horizontal overflow everywhere */
html, body { overflow-x: hidden; max-width: 100vw; }
* { box-sizing: border-box; }

/* Partner page - fix grid on mobile */
@media (max-width: 768px) {
  /* Partner main content grid */
  div[style*="grid-template-columns:1.6fr 1fr"],
  div[style*="grid-template-columns:1.5fr 1fr"] {
    display: block !important;
  }

  /* Page hero padding */
  .page-hero { padding: 48px 0 36px; }
  .page-hero .container { padding: 0 20px; }
  .page-hero h1 { font-size: clamp(24px, 8vw, 48px) !important; }

  /* Brand image height on mobile */
  div[style*="height:500px"],
  div[style*="height:440px"] {
    height: 260px !important;
  }

  /* Partner hero title overlay */
  div[style*="padding:32px 40px"] {
    padding: 20px !important;
  }

  /* Solution page grid */
  div[style*="grid-template-columns:1.5fr 1fr"],
  div[style*="grid-template-columns:1.2fr 1fr"],
  div[style*="grid-template-columns:1fr 1.2fr"] {
    display: block !important;
  }

  /* Solutions category tabs */
  div[style*="display:flex;gap:0;overflow-x:auto"] a {
    padding: 14px 16px !important;
    font-size: 11px !important;
  }

  /* Contact modal */
  #contact-modal-overlay > div {
    margin: 12px;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Contact form grid */
  div[style*="grid-template-columns:1fr 1fr"] {
    display: block !important;
  }
  div[style*="grid-template-columns:1fr 1fr"] > div {
    margin-bottom: 14px;
  }

  /* Partners grid on partner page */
  .partners-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Fix sidebar blocks showing side by side */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Solutions page cards */
  div[style*="grid-template-columns:1.2fr 1fr"] > div,
  div[style*="grid-template-columns:1fr 1.2fr"] > div {
    min-height: auto !important;
  }

  /* Fix buttons wrapping */
  .btn { padding: 12px 20px !important; font-size: 11px !important; }

  /* Fix about grid */
  .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Fix container padding */
  .container { padding: 0 16px !important; }

  /* News modal */
  .modal-box { margin: 12px; max-height: 88vh; overflow-y: auto; }
  .modal-body img { max-height: 200px; object-fit: cover; }

  /* Video intro */
  .video-intro-inner { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Stat items */
  .stats-bar-inner { grid-template-columns: repeat(2,1fr) !important; }
  .stat-item { padding: 20px 16px !important; }
  .stat-num { font-size: 36px !important; }

  /* Hero buttons */
  .hero-btns { flex-direction: column; gap: 10px !important; }
  .hero-btns .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr !important; gap: 32px !important; }
}

@media (max-width: 480px) {
  .partner-card { min-height: 80px !important; padding: 14px 8px !important; }
  .partner-card img { height: 28px !important; }
  .partner-card span { font-size: 8px !important; }

  .page-hero h1 { font-size: clamp(20px, 7vw, 36px) !important; }

  div[style*="height:500px"],
  div[style*="height:440px"] {
    height: 220px !important;
  }
}

/* Partner content grid responsive */
@media (max-width: 768px) {
  .partner-content-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ── MOBILE CONTACT BUTTON FIX ──────────────────────────── */
@media (max-width: 768px) {
  /* Stat boxes - keep 2 columns */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* Contact button visible on mobile */
  .btn-outline-dark, .btn-outline {
    display: inline-flex !important;
  }

  /* Fix partner page buttons */
  div[style*="display:flex;gap:12px;flex-wrap:wrap;margin-top:8px"] {
    flex-direction: column;
    gap: 10px !important;
  }
  div[style*="display:flex;gap:12px;flex-wrap:wrap;margin-top:8px"] .btn {
    width: 100%;
    justify-content: center;
  }

  /* Solutions sticky tabs scroll */
  div[style*="position:sticky;top:72px"] > .container > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── SERVICE ROW CARDS ──────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="grid-template-columns:1fr 1fr"] .svc-row-card {
    border-right: none !important;
  }
  div[style*="grid-template-columns:1fr 1fr"]:has(.svc-row-card) {
    grid-template-columns: 1fr !important;
  }
}


/* ── CERTIFICATES ───────────────────────────────────────── */
.cert-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; }
.cert-card { background:var(--bg-white); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-card); transition:all 0.3s; display:flex; flex-direction:column; }
.cert-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.cert-img-wrap { position:relative; overflow:hidden; background:#f8f9fa; display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; }
.cert-img-wrap img { width:100%; height:100%; object-fit:contain; display:block; }
.cert-overlay { position:absolute; inset:0; background:rgba(0,87,184,0.7); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; color:#fff; font-size:24px; }
.cert-card:hover .cert-overlay { opacity:1; }
.cert-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--text-muted); opacity:0.3; }
.cert-info { padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.cert-info h4 { font-size:14px; font-weight:700; color:var(--text); line-height:1.4; margin:0; }
.cert-info p { font-size:12px; color:var(--text-muted); margin:0; }
.cert-year { display:inline-block !important; background:var(--blue-light) !important; color:#fff !important; font-size:11px !important; font-weight:800 !important; padding:4px 14px !important; border-radius:20px !important; align-self:flex-start !important; margin-top:6px !important; }
.cert-info .cert-year { color:#fff !important; }