/* ============================================================
   SYNOD ELECTRIC — Complete Stylesheet v3
   Mobile-first, App-style responsive
   ============================================================ */

:root {
  --navy:         #070d1b;
  --navy-mid:     #0c1628;
  --navy-light:   #112038;
  --navy-card:    #0f1e35;
  --blue:         #4f9cf9;
  --blue-dark:    #2563eb;
  --blue-dim:     rgba(79,156,249,0.12);
  --amber:        #f59e0b;
  --amber-light:  #fbbf24;
  --amber-dim:    rgba(245,158,11,0.12);
  --white:        #eef4ff;
  --white-pure:   #ffffff;
  --gray:         #637490;
  --gray-light:   #94a3b8;
  --success:      #10b981;
  --danger:       #ef4444;
  --font-display: 'Outfit', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --radius:       10px;
  --radius-lg:    16px;
  --shadow-blue:  0 10px 40px rgba(79,156,249,0.25);
  --shadow-amber: 0 10px 40px rgba(245,158,11,0.25);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 32px; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background: rgba(4,8,18,0.98);
  border-bottom: 1px solid rgba(79,156,249,0.08);
  height: 42px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
.topbar-inner {
  width:100%; max-width:1280px; margin:0 auto;
  padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar-left { display:flex; align-items:center; gap:24px; }
.topbar-item {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--gray-light); font-weight:500; transition:color 0.3s;
}
.topbar-item:hover { color:var(--blue); }
.topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-social {
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05); border-radius:7px;
  transition:all 0.3s; cursor:pointer;
}
.topbar-social[title="Facebook"]:hover  { background:rgba(24,119,242,0.2); }
.topbar-social[title="LinkedIn"]:hover  { background:rgba(10,102,194,0.2); }
.topbar-social[title="YouTube"]:hover   { background:rgba(255,0,0,0.18); }
.topbar-social[title="WhatsApp"]:hover  { background:rgba(37,211,102,0.18); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 42px; left:0; right:0; z-index:999;
  background: rgba(7,13,27,0.96);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: all 0.4s;
}
.navbar.scrolled {
  top: 0;
  background: rgba(7,13,27,0.99);
  border-bottom-color: rgba(79,156,249,0.15);
  box-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 32px;
  height:70px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Logo */
.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-logo-icon {
  width:44px; height:44px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-blue); flex-shrink:0;
}
.nav-logo-img { height:44px; width:auto; max-width:160px; object-fit:contain; border-radius:6px; }
.nav-logo-name { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--white-pure); line-height:1.1; letter-spacing:-0.3px; }
.nav-logo-tagline { font-size:10px; letter-spacing:2px; color:var(--amber); text-transform:uppercase; font-weight:600; margin-top:2px; }
/* Menu */
.nav-menu { display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.nav-link { display:inline-block; padding:8px 14px; font-size:13px; font-weight:600; color:var(--gray-light); border-radius:8px; transition:all 0.3s; }
.nav-link:hover { color:var(--white-pure); background:rgba(255,255,255,0.06); }
.nav-link.active { color:var(--blue); background:var(--blue-dim); }
/* Actions */
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-quote-btn {
  display:flex; align-items:center; gap:8px; padding:9px 18px;
  background:linear-gradient(135deg,var(--amber),var(--amber-light));
  border-radius:9px; font-size:12px; font-weight:700;
  color:var(--navy); transition:all 0.3s; box-shadow:var(--shadow-amber);
}
.nav-quote-btn:hover { transform:translateY(-2px); box-shadow:0 15px 40px rgba(245,158,11,0.4); }
.quote-nav-count { background:var(--navy); color:var(--amber); font-size:10px; font-weight:900; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--white); transition:all 0.3s; border-radius:2px; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* Mobile Menu */
.mobile-menu { display:none; background:rgba(7,13,27,0.99); border-top:1px solid rgba(79,156,249,0.1); }
.mobile-menu.open { display:block; }
.mobile-nav-list li a { display:block; padding:12px 32px; font-size:13px; font-weight:600; color:var(--gray-light); transition:all 0.3s; border-left:3px solid transparent; }
.mobile-nav-list li a:hover { color:var(--blue); border-left-color:var(--blue); background:rgba(79,156,249,0.05); padding-left:40px; }

body { padding-top: 112px; }

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
.quote-float { position:fixed; bottom:90px; right:24px; width:52px; height:52px; background:linear-gradient(135deg,var(--amber),var(--amber-light)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--navy); z-index:990; box-shadow:var(--shadow-amber); transition:all 0.3s; cursor:pointer; }
.quote-float:hover { transform:translateY(-4px) scale(1.1); }
.quote-float-count { position:absolute; top:-4px; right:-4px; background:var(--danger); color:#fff; font-size:9px; font-weight:900; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--navy); }
.whatsapp-float { position:fixed; bottom:28px; right:24px; width:52px; height:52px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; z-index:990; box-shadow:0 8px 24px rgba(37,211,102,0.4); transition:all 0.3s; }
.whatsapp-float:hover { transform:translateY(-4px) scale(1.1); }
.back-to-top { position:fixed; bottom:90px; right:88px; width:44px; height:44px; background:rgba(79,156,249,0.12); border:1px solid rgba(79,156,249,0.25); border-radius:50%; color:var(--blue); font-size:18px; cursor:pointer; z-index:990; display:none; align-items:center; justify-content:center; transition:all 0.3s; }
.back-to-top.visible { display:flex; }
.back-to-top:hover { background:var(--blue); color:#fff; }

/* ============================================================
   SECTION COMMON
   ============================================================ */
.section-label { display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; background:var(--blue-dim); border:1px solid rgba(79,156,249,0.2); padding:6px 14px; border-radius:100px; }
.section-label .line { display:none; }
.section-label span { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--blue); font-weight:700; font-family:var(--font-display); }
.section-title { font-family:var(--font-display); font-size:clamp(30px,4vw,50px); font-weight:800; color:var(--white-pure); line-height:1.15; margin-bottom:16px; letter-spacing:-0.5px; }
.section-title em { font-style:normal; color:var(--blue); }
.section-title strong { color:var(--amber); font-weight:800; }
.section-desc { font-size:15px; color:var(--gray-light); max-width:560px; line-height:1.8; margin-bottom:48px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:all 0.3s; font-family:var(--font-body); min-height:44px; }
.btn-primary { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 15px 40px rgba(79,156,249,0.45); }
.btn-outline { background:transparent; border:2px solid rgba(255,255,255,0.15); color:var(--white); }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }
.btn-amber { background:linear-gradient(135deg,var(--amber),var(--amber-light)); color:var(--navy); box-shadow:var(--shadow-amber); }
.btn-sm { padding:8px 18px; font-size:12px; min-height:38px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height:calc(100vh - 112px); position:relative; overflow:hidden; display:flex; align-items:center; background:var(--navy); }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 70% 70% at 70% 40%,rgba(37,99,235,0.18) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 10% 80%,rgba(245,158,11,0.06) 0%,transparent 50%); }
.hero-grid-overlay { position:absolute; inset:0; background-image:linear-gradient(rgba(79,156,249,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,156,249,0.04) 1px,transparent 1px); background-size:60px 60px; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.hero-glow-1 { width:600px; height:600px; background:rgba(37,99,235,0.08); top:-100px; right:5%; }
.hero-glow-2 { width:400px; height:400px; background:rgba(245,158,11,0.05); bottom:-50px; left:10%; }
.hero-slide { width:100%; display:flex; align-items:center; min-height:calc(100vh - 112px); }
.hero-content { position:relative; z-index:3; max-width:760px; padding:60px 0; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; background:rgba(79,156,249,0.1); border:1px solid rgba(79,156,249,0.2); padding:8px 16px; border-radius:100px; margin-bottom:28px; }
.hero-eyebrow .dot { width:8px; height:8px; background:var(--blue); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.8);} }
.hero-eyebrow span { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue); font-weight:700; }
.hero-title { font-family:var(--font-display); font-size:clamp(44px,6.5vw,88px); font-weight:800; color:var(--white-pure); line-height:1.05; margin-bottom:24px; letter-spacing:-1px; }
.t-italic { color:var(--blue); font-style:normal; }
.t-outline { color:var(--amber); }
.hero-description { font-size:16px; color:var(--gray-light); max-width:520px; line-height:1.85; margin-bottom:40px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ============================================================
   STATS BAR
   ============================================================ */
.hero-stats { background:rgba(11,19,38,0.95); border-top:1px solid rgba(79,156,249,0.1); border-bottom:1px solid rgba(79,156,249,0.1); }
.hero-stats-inner { max-width:1280px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:32px 24px; text-align:center; border-right:1px solid rgba(255,255,255,0.06); transition:background 0.3s; }
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:rgba(79,156,249,0.04); }
.stat-num { font-family:var(--font-display); font-size:46px; font-weight:800; color:var(--blue); line-height:1; margin-bottom:6px; letter-spacing:-1px; }
.stat-label { font-size:11px; letter-spacing:2px; color:var(--gray); text-transform:uppercase; font-weight:600; }

/* ============================================================
   CLIENTS STRIP
   ============================================================ */
.clients-strip { background:var(--navy-mid); padding:32px 0; border-bottom:1px solid rgba(255,255,255,0.05); overflow:hidden; }
.clients-label-text { text-align:center; font-size:11px; letter-spacing:3px; color:var(--gray); text-transform:uppercase; margin-bottom:20px; font-weight:600; }
.clients-track-wrap { overflow:hidden; }
.clients-track { display:flex; gap:48px; animation:ticker 25s linear infinite; width:max-content; }
@keyframes ticker { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
.clients-track:hover { animation-play-state:paused; }
.client-item { display:flex; align-items:center; padding:0 24px; white-space:nowrap; color:var(--gray); font-size:14px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; opacity:0.45; transition:opacity 0.3s; }
.client-item:hover { opacity:0.85; }
.client-item img { height:32px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:0.5; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-section { background:var(--navy); padding:100px 0; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card { background:var(--navy-card); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:36px 30px; position:relative; overflow:hidden; transition:all 0.4s; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--blue-dark)); transform:scaleX(0); transition:transform 0.4s; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.service-card:hover { border-color:rgba(79,156,249,0.25); transform:translateY(-6px); box-shadow:0 25px 60px rgba(0,0,0,0.4); }
.service-card:hover::before { transform:scaleX(1); }
.service-card-num { font-family:var(--font-display); font-size:56px; font-weight:900; color:rgba(79,156,249,0.06); position:absolute; top:16px; right:20px; line-height:1; }
.service-icon { width:52px; height:52px; background:var(--blue-dim); border:1px solid rgba(79,156,249,0.2); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; }
.service-title { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--white-pure); margin-bottom:10px; }
.service-desc { font-size:13px; color:var(--gray-light); line-height:1.8; margin-bottom:20px; }
.service-link { font-size:12px; font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:6px; transition:gap 0.3s; }
.service-link:hover { gap:12px; }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products-section { background:var(--navy-mid); padding:100px 0; }
.products-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; flex-wrap:wrap; gap:20px; }
.filter-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.filter-tab { padding:8px 18px; border:1px solid rgba(255,255,255,0.1); background:transparent; color:var(--gray-light); font-size:12px; font-weight:600; cursor:pointer; border-radius:8px; transition:all 0.3s; font-family:var(--font-body); }
.filter-tab:hover { border-color:var(--blue); color:var(--blue); }
.filter-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card { background:var(--navy-card); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); overflow:hidden; transition:all 0.4s; }
.product-card:hover { border-color:rgba(79,156,249,0.25); transform:translateY(-6px); box-shadow:0 25px 60px rgba(0,0,0,0.4); }
.product-img-wrap { height:200px; background:linear-gradient(135deg,#0c1a30,#122040); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.product-card:hover .product-img-wrap img { transform:scale(1.07); }
.product-img-placeholder { font-size:60px; opacity:0.15; }
.product-badge-wrap { position:absolute; top:12px; right:12px; }
.badge { display:inline-block; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:700; text-transform:uppercase; }
.badge-gold { background:var(--amber); color:var(--navy); }
.badge-blue { background:var(--blue); color:#fff; }
.product-info { padding:20px; }
.product-cat { font-size:10px; letter-spacing:2px; color:var(--blue); text-transform:uppercase; font-weight:700; margin-bottom:8px; }
.product-name { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--white-pure); margin-bottom:8px; line-height:1.3; }
.product-desc { font-size:12px; color:var(--gray-light); line-height:1.7; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-actions { display:flex; gap:8px; }
.btn-add-quote { flex:1; padding:9px 12px; background:var(--blue-dim); border:1px solid rgba(79,156,249,0.25); color:var(--blue); font-size:10px; font-weight:700; text-transform:uppercase; cursor:pointer; border-radius:8px; transition:all 0.3s; font-family:var(--font-body); }
.btn-add-quote:hover,.btn-add-quote.added { background:var(--blue); color:#fff; }
.btn-view-detail { padding:9px 14px; background:transparent; border:1px solid rgba(255,255,255,0.1); color:var(--gray-light); font-size:10px; font-weight:600; text-transform:uppercase; cursor:pointer; border-radius:8px; transition:all 0.3s; }
.btn-view-detail:hover { border-color:var(--blue); color:var(--blue); }
.products-view-all { text-align:center; margin-top:48px; }

/* ============================================================
   WHY SECTION
   ============================================================ */
.why-section { background:var(--navy); padding:100px 0; position:relative; overflow:hidden; }
.why-bg-word { position:absolute; font-family:var(--font-display); font-size:260px; font-weight:900; color:rgba(79,156,249,0.025); right:-40px; top:50%; transform:translateY(-50%); pointer-events:none; line-height:1; }
.why-inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; position:relative; z-index:2; }
.why-visual { position:relative; }
.why-main-card { height:440px; background:linear-gradient(135deg,#0c1a30,#122040); border:1px solid rgba(79,156,249,0.12); border-radius:var(--radius-lg); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.why-main-card img { width:100%; height:100%; object-fit:cover; }
.why-accent-card { position:absolute; bottom:-24px; right:-24px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); padding:24px 28px; border-radius:var(--radius-lg); text-align:center; box-shadow:var(--shadow-blue); }
.why-accent-card .big-num { font-family:var(--font-display); font-size:46px; font-weight:900; color:#fff; line-height:1; }
.why-accent-card .small-text { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.7); font-weight:700; margin-top:4px; }
.why-features { display:flex; flex-direction:column; gap:0; margin-top:32px; }
.why-feature { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.why-feature:last-child { border-bottom:none; }
.why-feature-icon { font-size:20px; flex-shrink:0; width:46px; height:46px; background:var(--blue-dim); border:1px solid rgba(79,156,249,0.15); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.why-feature-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--white-pure); margin-bottom:4px; }
.why-feature-desc { font-size:13px; color:var(--gray-light); line-height:1.7; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-section { background:var(--navy-mid); padding:100px 0; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery-item { position:relative; overflow:hidden; cursor:pointer; background:var(--navy-light); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); }
.gallery-item:first-child { grid-column:span 2; height:320px; }
.gallery-item { height:220px; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:48px; opacity:0.15; background:linear-gradient(135deg,#0c1a30,#122040); }
.gallery-cat-tag { position:absolute; top:12px; left:12px; background:rgba(7,13,27,0.85); color:var(--blue); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:5px 10px; border-radius:6px; border:1px solid rgba(79,156,249,0.2); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(7,13,27,0.9) 0%,transparent 60%); opacity:0; transition:opacity 0.4s; display:flex; align-items:flex-end; padding:16px; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay-title { font-size:14px; font-weight:700; color:var(--white-pure); }
.gallery-view-all { text-align:center; margin-top:40px; }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-section { background:var(--navy); padding:100px 0; }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.project-card { background:var(--navy-card); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:32px 28px; transition:all 0.4s; position:relative; overflow:hidden; }
.project-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--amber-light)); transform:scaleX(0); transition:transform 0.4s; }
.project-card:hover { border-color:rgba(245,158,11,0.2); transform:translateY(-5px); box-shadow:0 25px 60px rgba(0,0,0,0.4); }
.project-card:hover::after { transform:scaleX(1); }
.project-year { font-size:11px; letter-spacing:2px; color:var(--amber); text-transform:uppercase; font-weight:700; margin-bottom:12px; }
.project-title { font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--white-pure); margin-bottom:8px; line-height:1.3; }
.project-client { font-size:12px; color:var(--gray-light); margin-bottom:16px; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; }
.project-tag { font-size:10px; padding:4px 10px; background:var(--amber-dim); border:1px solid rgba(245,158,11,0.2); color:var(--amber); border-radius:100px; font-weight:600; }

/* ============================================================
   TEAM
   ============================================================ */
.team-section { background:var(--navy-mid); padding:100px 0; }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.team-card { background:var(--navy-card); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); overflow:hidden; transition:all 0.4s; }
.team-card:hover { border-color:rgba(79,156,249,0.2); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.team-photo { height:220px; background:linear-gradient(135deg,#0c1a30,#122040); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.team-photo img { width:100%; height:100%; object-fit:cover; }
.team-info { padding:20px; }
.team-name { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--white-pure); margin-bottom:4px; }
.team-role { font-size:11px; letter-spacing:2px; color:var(--blue); text-transform:uppercase; font-weight:700; margin-bottom:10px; }
.team-bio { font-size:12px; color:var(--gray-light); line-height:1.7; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { background:linear-gradient(135deg,#0a1628 0%,#0f2044 50%,#0a1628 100%); padding:90px 0; text-align:center; border-top:1px solid rgba(79,156,249,0.12); border-bottom:1px solid rgba(79,156,249,0.12); position:relative; overflow:hidden; }
.cta-strip::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(79,156,249,0.08),transparent); }
.cta-content { position:relative; z-index:2; }
.cta-title { font-family:var(--font-display); font-size:clamp(30px,4vw,50px); font-weight:800; color:var(--white-pure); margin-bottom:16px; letter-spacing:-0.5px; }
.cta-title em { font-style:normal; color:var(--blue); }
.cta-desc { font-size:15px; color:var(--gray-light); margin-bottom:36px; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section { display:grid; grid-template-columns:1fr 1fr; min-height:600px; }
.contact-left { background:var(--navy); padding:80px 64px; border-right:1px solid rgba(255,255,255,0.06); }
.contact-right { background:var(--navy-mid); padding:80px 64px; }
.contact-info-list { display:flex; flex-direction:column; gap:24px; margin-top:32px; }
.contact-info-item { display:flex; align-items:flex-start; gap:16px; }
.contact-info-icon { width:44px; height:44px; background:var(--blue-dim); border:1px solid rgba(79,156,249,0.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.contact-info-label { font-size:10px; letter-spacing:2px; color:var(--blue); text-transform:uppercase; font-weight:700; margin-bottom:4px; }
.contact-info-val { font-size:14px; color:var(--white); line-height:1.6; }
.contact-form { display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size:11px; letter-spacing:1.5px; color:var(--blue); text-transform:uppercase; font-weight:700; }
.form-field input,.form-field select,.form-field textarea { background:rgba(7,13,27,0.7); border:1px solid rgba(255,255,255,0.1); color:var(--white); padding:12px 16px; border-radius:10px; font-size:14px; font-family:var(--font-body); transition:border-color 0.3s; width:100%; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,156,249,0.1); }
.form-field textarea { min-height:120px; resize:vertical; }
.form-field select option { background:var(--navy-mid); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:#040810; }
.footer-newsletter { background:linear-gradient(135deg,#0a1628,#0e1e38); border-top:1px solid rgba(79,156,249,0.1); border-bottom:1px solid rgba(79,156,249,0.08); padding:44px 0; }
.newsletter-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.newsletter-title { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--white-pure); margin-bottom:4px; }
.newsletter-sub { font-size:13px; color:var(--gray-light); }
.newsletter-form { display:flex; flex:1; max-width:400px; min-width:280px; }
.newsletter-input { flex:1; background:rgba(7,13,27,0.8); border:1px solid rgba(79,156,249,0.2); border-right:none; color:var(--white); padding:12px 16px; font-size:13px; font-family:var(--font-body); border-radius:10px 0 0 10px; }
.newsletter-input:focus { outline:none; border-color:var(--blue); }
.newsletter-btn { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); border:none; color:#fff; padding:12px 22px; font-size:12px; font-weight:700; cursor:pointer; border-radius:0 10px 10px 0; font-family:var(--font-body); transition:all 0.3s; }
.footer-main { padding:64px 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; }
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.footer-logo-icon { width:40px; height:40px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; font-weight:900; flex-shrink:0; }
.footer-logo-name { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--white-pure); line-height:1.1; }
.footer-logo-tag { font-size:9px; letter-spacing:2px; color:var(--amber); text-transform:uppercase; font-weight:600; }
.footer-about { font-size:13px; color:var(--gray-light); line-height:1.8; margin-bottom:20px; }
.footer-socials { display:flex; gap:10px; }
.footer-social-link { width:40px; height:40px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.footer-social-fb:hover { background:rgba(24,119,242,0.15); border-color:rgba(24,119,242,0.4); transform:translateY(-3px); }
.footer-social-li:hover { background:rgba(10,102,194,0.15); border-color:rgba(10,102,194,0.4); transform:translateY(-3px); }
.footer-social-yt:hover { background:rgba(255,0,0,0.12); border-color:rgba(255,0,0,0.35); transform:translateY(-3px); }
.footer-social-wa:hover { background:rgba(37,211,102,0.12); border-color:rgba(37,211,102,0.35); transform:translateY(-3px); }
.footer-col-title { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--white-pure); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.07); }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:13px; color:var(--gray); transition:all 0.3s; }
.footer-links a:hover { color:var(--blue); padding-left:6px; }
.footer-contact-list { display:flex; flex-direction:column; gap:14px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--gray); }
.footer-contact-item a { color:var(--gray); transition:color 0.3s; }
.footer-contact-item a:hover { color:var(--blue); }
.footer-contact-icon { font-size:14px; flex-shrink:0; margin-top:2px; }
.footer-bottom { background:rgba(0,0,0,0.4); border-top:1px solid rgba(255,255,255,0.05); padding:20px 0; }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:12px; color:var(--gray); }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { font-size:12px; color:var(--gray); transition:color 0.3s; }
.footer-bottom-links a:hover { color:var(--blue); }

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero { background:linear-gradient(135deg,#070d1b 0%,#0f2044 100%); padding:130px 0 70px; position:relative; overflow:hidden; border-bottom:1px solid rgba(79,156,249,0.1); }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(79,156,249,0.07),transparent); }
.page-hero-title { font-family:var(--font-display); font-size:clamp(38px,6vw,68px); font-weight:800; color:var(--white-pure); line-height:1.1; margin-bottom:16px; letter-spacing:-1px; }
.page-hero-title em { font-style:normal; color:var(--blue); }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--gray); }
.breadcrumb a { color:var(--gray); transition:color 0.3s; }
.breadcrumb a:hover { color:var(--blue); }
.breadcrumb .sep { opacity:0.4; }
.breadcrumb .current { color:var(--blue); font-weight:600; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ============================================================
   TABLET (769px - 1024px)
   ============================================================ */
@media (min-width:769px) and (max-width:1024px) {
  .container { padding:0 24px; }
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .why-inner { grid-template-columns:1fr; }
  .why-visual { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .nav-link { padding:6px 10px; font-size:12px; }
  .nav-inner { padding:0 24px; }
}

/* ============================================================
   MOBILE (max 768px) — FULL APP STYLE
   ============================================================ */
@media (max-width:768px) {

  /* Global */
  body { padding-top:64px !important; }
  .container { padding:0 16px; }

  /* Topbar hidden */
  .topbar { display:none !important; }

  /* Navbar — App Header */
  .navbar { top:0 !important; box-shadow:0 2px 20px rgba(0,0,0,0.4); }
  .nav-inner { height:64px !important; padding:0 16px !important; gap:0 !important; }

  /* Logo compact */
  .nav-logo { flex:1; min-width:0; gap:8px; }
  .nav-logo-img { height:30px !important; max-width:90px !important; width:auto !important; flex-shrink:0; border-radius:4px; }
  .nav-logo-icon { width:34px !important; height:34px !important; border-radius:9px !important; flex-shrink:0; }
  .nav-logo-tagline { display:none !important; }
  .nav-logo-name { font-size:14px !important; max-width:120px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Hide desktop menu */
  .nav-menu { display:none !important; }

  /* Actions */
  .nav-actions { gap:8px; flex-shrink:0; }
  .nav-quote-btn { padding:8px 10px !important; border-radius:9px !important; gap:4px !important; }
  .btn-quote-text { display:none !important; }
  .nav-quote-btn svg { width:17px !important; height:17px !important; }
  .quote-nav-count { width:16px !important; height:16px !important; font-size:9px !important; }

  /* Hamburger */
  .hamburger { display:flex !important; width:38px; height:38px; background:rgba(255,255,255,0.07); border-radius:9px; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0; flex-shrink:0; }

  /* Mobile Menu — App Drawer */
  .mobile-menu { background:rgba(7,13,27,0.98); border-top:1px solid rgba(79,156,249,0.12); padding:8px 12px 20px; backdrop-filter:blur(20px); }
  .mobile-menu.open { display:block !important; }
  .mobile-nav-list { display:flex; flex-direction:column; gap:3px; }
  .mobile-nav-list li a { display:flex !important; align-items:center; padding:13px 16px !important; font-size:14px !important; font-weight:600 !important; color:var(--gray-light) !important; border-radius:10px !important; border-left:none !important; letter-spacing:0.2px; transition:all 0.2s !important; }
  .mobile-nav-list li a:hover { background:rgba(79,156,249,0.08) !important; color:var(--blue) !important; padding-left:20px !important; }
  .mobile-quote-link { margin-top:8px !important; background:rgba(245,158,11,0.07) !important; border:1px solid rgba(245,158,11,0.2) !important; color:var(--amber) !important; border-radius:10px; }
  .mobile-nav-list li:last-child { padding-top:8px; margin-top:4px; border-top:1px solid rgba(255,255,255,0.06); }

  /* Hero */
  .hero { min-height:auto; }
  .hero-slide { min-height:calc(100svh - 64px) !important; padding:32px 0 60px !important; align-items:flex-end; }
  .hero-content { padding:0 !important; max-width:100%; }
  .hero-eyebrow { margin-bottom:16px; }
  .hero-eyebrow span { font-size:10px; }
  .hero-title { font-size:clamp(30px,8vw,46px) !important; letter-spacing:-0.5px; margin-bottom:14px; }
  .hero-description { font-size:14px; margin-bottom:28px; }
  .hero-actions { flex-direction:column !important; gap:10px !important; width:100%; }
  .hero-actions .btn { width:100% !important; justify-content:center; padding:14px 24px; }

  /* Stats */
  .hero-stats-inner { grid-template-columns:repeat(2,1fr) !important; }
  .stat-item { padding:20px 10px !important; }
  .stat-num { font-size:30px !important; }
  .stat-label { font-size:9px !important; }

  /* Sections padding */
  .services-section,.products-section,.why-section,.gallery-section,
  .projects-section,.team-section { padding:56px 0 !important; }
  .cta-strip { padding:56px 0 !important; }

  /* Section title */
  .section-title { font-size:clamp(24px,6vw,34px) !important; }
  .section-desc { font-size:13px !important; margin-bottom:28px !important; }

  /* Services */
  .services-grid { grid-template-columns:1fr !important; gap:12px !important; }
  .service-card { padding:24px 20px !important; border-radius:14px !important; }

  /* Products */
  .products-header { flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:20px; }
  .filter-tabs { overflow-x:auto !important; flex-wrap:nowrap !important; width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
  .filter-tabs::-webkit-scrollbar { display:none; }
  .filter-tab { flex-shrink:0 !important; border-radius:20px !important; padding:7px 14px !important; font-size:11px !important; }
  .products-grid { grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .product-img-wrap { height:140px !important; }
  .product-info { padding:12px !important; }
  .product-name { font-size:13px !important; }
  .product-desc { font-size:11px !important; }
  .btn-add-quote { font-size:9px !important; padding:7px 6px !important; }
  .btn-view-detail { font-size:9px !important; padding:7px 8px !important; }

  /* Why */
  .why-inner { grid-template-columns:1fr !important; }
  .why-visual { display:none !important; }
  .why-feature { padding:14px 0 !important; }

  /* Gallery */
  .gallery-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  .gallery-item:first-child { grid-column:span 2 !important; height:180px !important; }
  .gallery-item { height:130px !important; border-radius:10px !important; }

  /* Projects */
  .projects-grid { grid-template-columns:1fr !important; gap:12px !important; margin-top:24px !important; }

  /* Team */
  .team-grid { grid-template-columns:repeat(2,1fr) !important; gap:12px !important; margin-top:24px !important; }
  .team-photo { height:150px !important; }

  /* CTA */
  .cta-title { font-size:clamp(22px,6vw,32px) !important; }
  .cta-actions { flex-direction:column !important; align-items:stretch !important; gap:10px !important; padding:0 16px !important; }
  .cta-actions .btn { width:100% !important; justify-content:center !important; }

  /* Contact */
  .contact-section { grid-template-columns:1fr !important; }
  .contact-left { padding:40px 16px 28px !important; border-right:none; border-bottom:1px solid rgba(255,255,255,0.06); }
  .contact-right { padding:28px 16px 40px !important; }
  .form-row { grid-template-columns:1fr !important; }

  /* Footer */
  .footer-newsletter { padding:28px 0 !important; }
  .newsletter-inner { flex-direction:column !important; gap:16px !important; }
  .newsletter-form { max-width:100% !important; width:100% !important; min-width:0 !important; }
  .footer-main { padding:36px 0 !important; }
  .footer-grid { grid-template-columns:1fr !important; gap:28px !important; }
  .footer-bottom-inner { flex-direction:column !important; align-items:center !important; gap:8px !important; text-align:center; }

  /* Page hero */
  .page-hero { padding:85px 0 36px !important; }
  .page-hero-title { font-size:clamp(26px,7vw,38px) !important; }

  /* Floating buttons */
  .quote-float { width:48px !important; height:48px !important; bottom:76px !important; right:16px !important; }
  .whatsapp-float { width:48px !important; height:48px !important; bottom:18px !important; right:16px !important; }
  .back-to-top { bottom:76px !important; right:74px !important; width:40px !important; height:40px !important; }
}

/* Very small phones */
@media (max-width:400px) {
  .nav-logo-name { max-width:85px !important; font-size:12px !important; }
  .nav-logo-img  { max-width:65px !important; height:26px !important; }
  .nav-inner { padding:0 10px !important; }
  .products-grid { grid-template-columns:1fr !important; }
  .team-grid { grid-template-columns:1fr !important; }
}

/* ── Footer Google Map ── */
@media (max-width: 768px) {
  .footer-map-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FOOTER MAP SECTION
   ============================================================ */
.footer-map-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
  min-height: 280px;
}
.footer-map-label {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 768px) {
  .footer-map-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-map-label {
    padding: 28px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
}

/* ============================================================
   FOOTER GOOGLE MAP SECTION
   ============================================================ */
.footer-map-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  min-height: 280px;
}
.footer-map-label {
  padding: 40px 32px;
  background: rgba(12,22,40,0.6);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer-map-label a:hover { opacity: 0.8; }

@media (max-width: 768px) {
  .footer-map-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-map-label {
    padding: 24px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
}

/* ============================================================
   SECTION VISUAL FLOW FIX
   Clients strip থেকে CTA পর্যন্ত connected look
   ============================================================ */

/* ── Section backgrounds পরিষ্কার করা ── */
.services-section  { background: #0b1628; }
.products-section  { background: #070d1b; }
.why-section       { background: #0b1628; }
.gallery-section   { background: #070d1b; }
.projects-section  { background: #0b1628; }
.team-section      { background: #070d1b; }

/* ── Section dividers — top border ── */
.services-section,
.products-section,
.why-section,
.gallery-section,
.projects-section,
.team-section {
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Container max-width wider ── */
.services-section .container,
.products-section .container,
.why-section .container,
.gallery-section .container,
.projects-section .container,
.team-section .container {
  max-width: 1400px;
  padding-left: 40px;
  padding-right: 40px;
}

/* ── Services grid — full width feel ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

/* ── Products grid — full width ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

/* ── Why section inner full ── */
.why-inner {
  width: 100%;
}

/* ── Gallery grid full ── */
.gallery-grid {
  width: 100%;
}

/* ── Section header text center optional ── */
.services-section .section-label,
.products-section .section-label {
  margin-bottom: 12px;
}

/* ── Subtle gradient between sections ── */
.clients-strip {
  border-bottom: none;
  position: relative;
}
.clients-strip::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,156,249,0.2), transparent);
}

.cta-strip {
  border-top: none;
  position: relative;
}
.cta-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,156,249,0.3), transparent);
}

/* ── Section padding tighter ── */
.services-section  { padding: 80px 0; }
.products-section  { padding: 80px 0; }
.why-section       { padding: 80px 0; }
.gallery-section   { padding: 80px 0; }
.projects-section  { padding: 80px 0; }
.team-section      { padding: 80px 0; }

/* Mobile overrides */
@media (max-width: 768px) {
  .services-section .container,
  .products-section .container,
  .why-section .container,
  .gallery-section .container,
  .projects-section .container,
  .team-section .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .services-section,
  .products-section,
  .why-section,
  .gallery-section,
  .projects-section,
  .team-section { padding: 52px 0 !important; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .services-section .container,
  .products-section .container,
  .why-section .container,
  .gallery-section .container,
  .projects-section .container,
  .team-section .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .products-grid { grid-template-columns: repeat(3,1fr) !important; }
}