/* ===== VARIABLES & FONTS ===== */
:root {
  --primary: #0ea5e9;       /* Electric Cerulean */
  --primary-glow: rgba(14, 165, 233, 0.4);
  --secondary: #3b82f6;     /* Bright Blue */
  --accent: #22d3ee;        /* Neon Cyan */
  --dark: #020617;          /* Slate 950 Deep Space */
  --darker: #0f172a;        /* Slate 900 */
  --dark-panel: #1e293b;    /* Slate 800 */
  --light: #f8fafc;
  --white: #ffffff;
  --text-main: #334155;
  --text-muted: #64748b;
  --text-dark: #f8fafc;
  --text-dark-muted: #94a3b8;
  --border: #e2e8f0;
  --border-dark: #334155;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ===== RESET & BASE ===== */
*{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--light);color:var(--text-main);font-family:var(--font-main);font-size:16px;line-height:1.65; -webkit-font-smoothing: antialiased; scroll-behavior: smooth;}
a,a:visited{color:var(--primary);text-decoration:none;transition:var(--transition);}
a:hover{color:var(--secondary);}

/* ===== HEADER & NAV W/ GLASSMORPHISM ===== */
#header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(2, 6, 23, 0.85); /* Deep dark */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
#header{padding:16px 24px;}
#header-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
#header h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-0.5px;}
#header h1 a{color:var(--white);text-decoration:none; background: linear-gradient(to right, var(--accent), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.tagline{color:var(--text-dark-muted);font-size:13px;font-weight:500;margin-left:12px;letter-spacing:0.5px;text-transform:uppercase;}

#nav{padding:0 24px;}
#nav ul{max-width:1280px;margin:0 auto;padding:0;list-style:none;display:flex;gap:4px;flex-wrap:wrap;}
#nav li{margin:0;}
#nav a{display:block;color:var(--text-dark-muted);padding:14px 20px;font-size:14px;font-weight:600;border-radius:8px;transition:var(--transition);margin-bottom:8px;}
#nav a.current,#nav a:hover{background:rgba(255,255,255,0.08);color:var(--white); transform: translateY(-2px);}
#nav a.current {box-shadow: 0 4px 12px rgba(0,0,0,0.2);}

/* ===== LAYOUT ===== */
#shell{max-width:1280px;margin:0 auto;padding:48px 24px 80px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;}
#main{width:auto;margin-right:0;min-width:0; animation: fadeUp 0.6s ease-out forwards;}
#main h1{font-size:40px;color:var(--dark);font-weight:800;margin:0 0 16px 0;line-height:1.15;letter-spacing:-1px;}
#main h2{font-size:32px;color:var(--dark);font-weight:800;margin:64px 0 24px 0;padding-top:24px;border-top:1px solid var(--border); letter-spacing:-0.5px;}
#main h3{font-size:20px;color:var(--dark);margin:40px 0 16px 0;font-weight:700;}
#main p{color:var(--text-main);line-height:1.8;font-size:16px;}
#main ul,#main ol{color:var(--text-main);font-size:16px;line-height:1.8;}
#main strong{color:var(--dark);font-weight:700;}

#sidebar{width:auto;float:none;padding:32px;border-radius:var(--radius-md);background:var(--white);box-shadow:0 12px 32px rgba(0,0,0,0.04);border:1px solid var(--border);position:sticky;top:140px;}
#sidebar h3{font-size:15px;font-weight:700;color:var(--dark);margin:0 0 16px 0;text-transform:uppercase;letter-spacing:1px;}

/* ===== HERO MEGA BANNER ===== */
.hero{background:var(--dark); background-image:radial-gradient(ellipse at top right, rgba(14, 165, 233, 0.4), transparent 60%), radial-gradient(ellipse at bottom left, rgba(34, 211, 238, 0.15), transparent 60%);border-radius:var(--radius-lg);padding:80px 64px;margin:0 0 48px 0;position:relative;overflow:hidden;box-shadow:0 24px 48px rgba(2, 6, 23, 0.2); border:1px solid rgba(255,255,255,0.05);}
.hero h2{color:var(--white) !important;font-size:48px !important;font-weight:800;margin:0 0 20px 0;border:none;padding:0;line-height:1.1;letter-spacing:-1px;}
.hero p{color:var(--text-dark-muted) !important;font-size:18px !important;margin:0 0 40px 0;max-width:640px;line-height:1.7;}
.hero .hero-btn,.hero a.hero-btn{display:inline-flex;align-items:center;background:linear-gradient(135deg, var(--primary), var(--secondary));color:var(--white) !important;padding:16px 36px;border-radius:100px;font-weight:700;font-size:16px;text-decoration:none;margin-right:16px;transition:var(--transition);box-shadow:0 8px 24px var(--primary-glow); border:1px solid rgba(255,255,255,0.1);}
.hero a.hero-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px var(--primary-glow);color:var(--white) !important;}
.hero a.hero-btn.secondary {background:rgba(255,255,255,0.05); box-shadow:none; backdrop-filter:blur(10px);}
.hero a.hero-btn.secondary:hover {background:rgba(255,255,255,0.1); box-shadow:0 8px 24px rgba(0,0,0,0.2);}

/* ===== STATS BAR ===== */
.stats-bar{display:flex;margin:0 0 64px 0;padding:32px 0;flex-wrap:wrap;background:var(--white);border-radius:var(--radius-md);box-shadow:0 12px 32px rgba(0,0,0,0.04);border:1px solid var(--border);}
.stat-item{flex:1;min-width:160px;text-align:center;padding:16px 24px;}
.stat-item:not(:last-child){border-right:1px solid var(--border);}
.stat-num{display:block;font-size:36px;font-weight:800;color:var(--primary) !important;line-height:1;margin-bottom:8px;background:linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.stat-label{display:block;font-size:12px;color:var(--text-muted) !important;font-weight:700;letter-spacing:1px;text-transform:uppercase;}

/* ===== SECTION HEADER ===== */
.section-header{text-align:center;max-width:700px;margin:0 auto 64px;}
.section-header h2{font-size:36px;color:var(--dark);font-weight:800;margin:0 0 16px 0;border:none;padding:0;letter-spacing:-1px;}
.section-header p{color:var(--text-muted) !important;font-size:18px;margin:0;line-height:1.7;}

/* ===== SOLUTIONS CARDS ===== */
.solutions-list{display:flex;flex-direction:column;gap:32px;margin:0 0 80px 0;}
.solution-item{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:56px;transition:var(--transition);box-shadow:0 4px 12px rgba(0,0,0,0.02);}
.solution-item:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,0.08);}
/* Dark version of solution item */
.solution-item:nth-child(even){background:var(--dark-panel);border-color:rgba(255,255,255,0.05);}
.solution-item:nth-child(even):hover{box-shadow:0 24px 48px rgba(2,6,23,0.4);}
.solution-item h3{font-size:24px;font-weight:800;margin:0 0 16px 0;border:none;padding:0;color:var(--dark);}
.solution-item:nth-child(even) h3{color:var(--white) !important;}
.solution-item h2, .solution-item h4 {border:none !important; margin-bottom:12px;}
.solution-item:nth-child(even) h2, .solution-item:nth-child(even) h4 {color:var(--white) !important;}
.solution-item p{font-size:16px;line-height:1.8;margin:0 0 24px 0;color:var(--text-main);}
.solution-item:nth-child(even) p{color:var(--text-dark-muted) !important;}
.solution-item ul{margin:0 0 24px 0;padding-left:24px;}
.solution-item li{font-size:16px;color:var(--text-main);margin:0.5em 0;font-weight:500;}
.solution-item:nth-child(even) li{color:var(--text-dark-muted) !important;}
.solution-item a{color:var(--primary);font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:8px;transition:var(--transition);}
.solution-item a:hover{gap:12px;}
.solution-item:nth-child(even) a{color:var(--accent) !important;}
.solution-item:nth-child(even) a:hover{color:var(--white) !important;}
.solution-img{width:100%;border-radius:var(--radius-md);object-fit:cover;max-height:320px;display:block;box-shadow:0 12px 24px rgba(0,0,0,0.1);}

/* ===== PRODUCT GRID ===== */
.product-grid, .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:24px 0 80px 0;}
.product-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);transition:var(--transition);display:flex;flex-direction:column;}
.product-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,0.08);border-color:var(--primary);}
.product-card img, .product-image img{width:100%;height:220px;object-fit:cover;display:block;background:var(--light);transition:transform 0.5s ease;}
.product-card:hover img{transform:scale(1.05);}
.product-image{overflow:hidden;}
.product-card-body{padding:32px;flex:1;display:flex;flex-direction:column;}
.product-card h3{font-size:18px;font-weight:800;margin:0 0 12px 0;color:var(--dark) !important;border:none;}
.product-tag{color:var(--primary) !important;font-size:12px;font-weight:800;margin:0 0 12px;letter-spacing:1px;text-transform:uppercase;}
.product-card p, .product-desc{font-size:15px;color:var(--text-muted) !important;margin:0 0 24px 0;line-height:1.6;flex:1;}
.product-card a{font-size:15px;font-weight:700;color:var(--primary) !important;display:inline-flex;align-items:center;gap:6px;margin-top:auto;}
.product-specs{padding:16px 24px;background:var(--light);border-top:1px solid var(--border);}
.product-specs h4{font-size:13px;font-weight:700;color:var(--dark) !important;margin:0 0 8px;text-transform:uppercase;}
.product-specs ul{margin:0;padding-left:20px;font-size:13px;color:var(--text-main) !important;}

/* ===== BENEFIT GRID ===== */
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:0 0 64px 0;}
.benefit-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;transition:var(--transition);box-shadow:0 4px 12px rgba(0,0,0,0.02);}
.benefit-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,0.06);border-color:var(--primary);}
.benefit-card h4{font-size:18px;font-weight:800;color:var(--dark) !important;margin:0 0 12px 0;border:none;}
.benefit-card p{font-size:15px;color:var(--text-main) !important;margin:0;line-height:1.7;}

/* ===== CTA BANNER ===== */
.cta-section,.cta-banner{background:var(--dark); background-image:linear-gradient(135deg,rgba(14, 165, 233, 0.2) 0%, transparent 100%), url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNykiLz48L3N2Zz4=');border-radius:var(--radius-lg);padding:80px 48px;text-align:center;margin:64px 0;box-shadow:0 24px 48px rgba(2, 6, 23, 0.2);position:relative;}
.cta-section h2,.cta-banner h2{color:var(--white) !important;font-size:36px;font-weight:800;margin:0 0 16px;border:none;padding:0;letter-spacing:-1px;}
.cta-section p,.cta-banner p{color:var(--text-dark-muted) !important;font-size:18px;margin:0 0 40px;max-width:600px;margin-left:auto;margin-right:auto;}
.cta-section a,.cta-banner a{display:inline-block;background:linear-gradient(135deg, var(--primary), var(--secondary));color:var(--white) !important;padding:16px 40px;border-radius:100px;font-weight:800;font-size:16px;text-decoration:none;transition:var(--transition);box-shadow:0 8px 24px var(--primary-glow);border:1px solid rgba(255,255,255,0.1);}
.cta-section a:hover,.cta-banner a:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px var(--primary-glow);}

/* ===== FOOTER ===== */
#footer{background:var(--dark);color:var(--text-dark-muted);padding:80px 24px 40px;border-top:1px solid rgba(255,255,255,0.05);}
#footer h3{color:var(--white);font-size:14px;font-weight:700;margin:0 0 20px 0;text-transform:uppercase;letter-spacing:1px;}
#footer ul{list-style:none;padding:0;margin:0 0 32px 0;}
#footer li{margin:12px 0;font-size:14px;}
#footer a{color:var(--text-dark-muted);transition:var(--transition);}
#footer a:hover{color:var(--accent);}
#footer-inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;}
#footer p{color:var(--text-dark-muted);font-size:13px;line-height:1.6;}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== MISC FIXES ===== */
img{max-width:100%;height:auto;border-radius:var(--radius-sm);}
.hero h1, .hero h2, .hero h3, .hero h4 {color: var(--white) !important;}
table.specstable{width:100%;border-collapse:collapse;margin:0 0 48px 0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--white);box-shadow:0 4px 12px rgba(0,0,0,0.02);}
table.specstable th,table.specstable td{padding:16px 24px;border-bottom:1px solid var(--border);font-size:15px;text-align:left;}
table.specstable th{background:var(--light);font-weight:700;color:var(--dark) !important;width:35%;text-transform:uppercase;font-size:13px;letter-spacing:1px;}
table.specstable td{color:var(--text-main) !important;}
table.specstable tr:last-child td,table.specstable tr:last-child th{border-bottom:none;}
table.specstable tr:hover td{background:#f1f5f9;}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  #shell{grid-template-columns:1fr;padding:32px 24px 64px;}
  #sidebar{position:static;margin-top:40px;border-top:1px solid var(--border);border-radius:0;box-shadow:none;padding:32px 0 0 0;}
  .product-grid,.products-grid{grid-template-columns:1fr 1fr;}
  .solution-item{grid-template-columns:1fr;gap:32px;padding:40px;}
}
@media(max-width:768px){
  .hero{padding:48px 32px;}
  .hero h2{font-size:32px !important;}
  .stats-bar{flex-direction:column;gap:0;}
  .stat-item{border-right:none !important;border-bottom:1px solid var(--border);padding:24px;}
  .stat-item:last-child{border-bottom:none;}
  .benefit-grid,.products-grid{grid-template-columns:1fr;}
  .cta-section,.cta-banner{padding:48px 24px;}
  #header-inner{flex-direction:column;gap:16px;}
  #nav ul{justify-content:center;}
}
@media(max-width:480px){
  .hero h2{font-size:28px !important;}
  .stat-num{font-size:32px;}
  #nav a{padding:10px 12px;font-size:13px;}
}

/* ===== NEW COMPONENTS: TECH, CASES, SERVICE ===== */

/* CASE STUDIES GRID */
.cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; padding: 24px 0; }
.case-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 400px; display: flex; align-items: flex-end; text-decoration: none; cursor: pointer; transition: var(--transition); box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
.case-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,6,23,0.9) 0%, rgba(2,6,23,0.4) 50%, transparent 100%); z-index: 1; }
.case-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 0; }
.case-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(14, 165, 233, 0.2); }
.case-card:hover img { transform: scale(1.08); }
.case-content { position: relative; z-index: 2; padding: 40px; color: var(--white); width: 100%; }
.case-tag { display: inline-block; background: var(--primary); color: var(--white); font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 100px; margin-bottom: 16px; letter-spacing: 1px; text-transform: uppercase; }
.case-title { font-size: 24px; font-weight: 800; margin: 0 0 8px 0; border: none; padding: 0; line-height: 1.2; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.case-metric { display: flex; gap: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2); }
.metric-box strong { display: block; font-size: 20px; color: var(--accent); }
.metric-box span { font-size: 12px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; }

/* TECH OVERVIEW BLOCKS */
.tech-features { padding: 48px 0 0; }
.tech-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 80px; }
.tech-row:nth-child(even) .tech-text { order: 2; }
.tech-row:nth-child(even) .tech-image { order: 1; }
.tech-image img { border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgba(0,0,0,0.1); width: 100%; }
.tech-text h2 { font-size: 32px; font-weight: 800; color: var(--dark); margin: 0 0 24px; border: none; padding: 0; letter-spacing: -0.5px; }
.tech-text p { font-size: 18px; color: var(--text-muted); line-height: 1.7; margin-bottom: 32px; }
.tech-list { list-style: none; padding: 0; margin: 0; }
.tech-list li { display: flex; align-items: flex-start; margin-bottom: 24px; }
.tech-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(14, 165, 233, 0.1); color: var(--primary); margin-right: 24px; flex-shrink: 0; font-size: 24px; font-weight: bold; }
.tech-list h4 { font-size: 18px; font-weight: 800; color: var(--dark); margin: 0 0 8px; border: none; }
.tech-list p { font-size: 15px; margin: 0; }

/* SERVICE TIMELINE */
.service-journey { position: relative; padding: 48px 0; margin-top: 32px; }
.service-journey::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.s-step { position: relative; padding-left: 80px; margin-bottom: 48px; }
.s-node { position: absolute; left: 16px; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--white); border: 3px solid var(--primary); box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.1); display: flex; align-items: center; justify-content: center; z-index: 2; font-weight: 800; color: var(--primary); font-size: 14px; }
.s-content { background: var(--white); border-radius: var(--radius-md); padding: 32px; box-shadow: 0 12px 32px rgba(0,0,0,0.04); border: 1px solid var(--border); transition: var(--transition); }
.s-content:hover { transform: translateX(8px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); border-color: var(--primary); }
.s-content h3 { font-size: 20px; font-weight: 800; color: var(--dark); margin: 0 0 12px; border:none; padding:0; }
.s-content p { font-size: 15px; color: var(--text-main); margin: 0; line-height: 1.6; }

/* Page Header Wrapper to unify title banners */
.page-header { background: radial-gradient(ellipse at center, var(--dark-panel) 0%, var(--darker) 100%); padding: 80px 24px; text-align: center; border-radius: var(--radius-lg); margin-bottom: 64px; box-shadow: 0 24px 48px rgba(0,0,0,0.2); }
.page-header h1 { font-size: 48px; font-weight: 800; color: var(--white) !important; margin: 0 0 16px; border: none; padding: 0; letter-spacing: -1px; }
.page-header p { font-size: 20px; color: var(--text-dark-muted) !important; max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* ===== NAVIGATION 2.0: BEAUTIFUL & MODERN ===== */

#header-wrapper {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header-inner {
  max-width: 1440px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
}

#header h1 {
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#header h1::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 15px var(--primary-glow); }
  100% { transform: scale(1); opacity: 0.8; }
}

#nav {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0;
}

#nav ul {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav li {
  position: relative;
}

#nav a {
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  transition: color 0.3s ease;
}

#nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent), var(--primary));
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateX(-50%);
}

#nav a:hover, #nav a.current {
  color: #fff !important;
  transform: none !important;
}

#nav a:hover::after, #nav a.current::after {
  width: 60%;
}

/* Header Quote Button */
.header-cta {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 8px 20px var(--primary-glow);
  transition: var(--transition);
  margin-left: 24px;
}

.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px var(--primary-glow);
  filter: brightness(1.1);
}


/* ===== NAVIGATION 3.0: MOBILE RESPONSIVE & ULTRA-PREMIUM ===== */

#header-wrapper {
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

#header-inner {
  height: 80px;
  padding: 0 64px;
}

#header h1 a {
  font-size: 28px;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, #fff 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#nav {
  display: flex !important;
  gap: 32px;
}

#nav ul {
  gap: 24px;
}

#nav a {
  font-size: 14px !important;
  letter-spacing: 0.1em;
  opacity: 0.8;
  padding: 0 4px !important;
}

#nav a:hover, #nav a.current {
  opacity: 1;
}

/* Ripple effect on Header CTA */
.header-cta {
  position: relative;
  overflow: hidden;
  padding: 12px 32px;
}

.header-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: rgba(255,255,255,0.15);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.6s ease;
}

.header-cta:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Mobile Fixes */
@media(max-width: 968px) {
  #header-inner { padding: 0 24px; }
  #nav ul { display: none; } /* We will hide it and user can add a mobile script/checkbox if needed */
  .header-cta { padding: 10px 20px; font-size: 12px; }
}

/* Sidebar & Generic Cleanups */
#sidebar h3 {
  font-size: 14px;
  color: var(--primary);
  border-bottom: 2px solid var(--primary-glow);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
#sidebar ul { list-style: none; padding: 0; }
#sidebar li { margin-bottom: 12px; font-size: 14px; color: var(--text-dark-muted); }

/* Force zeroing out any remaining sidebar if layouts are mixed */
.full-width-layout #shell { grid-template-columns: 1fr; }
.full-width-layout #sidebar { display: none; }


/* ===== MOBILE HAMBURGER MENU ===== */

.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1100;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 24px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
}

.nav-toggle-label span::before { top: -8px; }
.nav-toggle-label span::after { top: 8px; }

@media(max-width: 968px) {
  .nav-toggle-label { display: block; }
  
  #nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background: rgba(2, 6, 23, 0.95);
    backdrop-filter: blur(20px);
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1050;
    box-shadow: -10px 0 40px rgba(0,0,0,0.5);
    padding: 80px 40px;
  }

  #nav ul {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    display: flex !important;
  }

  #nav a { 
    font-size: 18px !important; 
  }

  #nav-toggle:checked ~ #nav {
    right: 0;
  }

  #nav-toggle:checked ~ .nav-toggle-label span {
    background: transparent;
  }

  #nav-toggle:checked ~ .nav-toggle-label span::before {
    transform: rotate(45deg);
    top: 0;
  }

  #nav-toggle:checked ~ .nav-toggle-label span::after {
    transform: rotate(-45deg);
    top: 0;
  }
}


/* ===== NAVIGATION 4.0: SOLID & CONSISTENT (NON-STICKY) ===== */

#header-wrapper {
  position: relative !important; /* Not sticky! */
  background: var(--dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none;
  border-bottom: 2px solid rgba(255,255,255,0.05);
  box-shadow: none;
}

#header-inner {
  height: 100px;
  padding: 0 48px;
}

#header h1 a {
  font-size: 32px;
  letter-spacing: -2px;
}

#nav a {
  font-size: 15px !important;
  opacity: 0.7;
}

#nav a::after {
  height: 3px;
}

/* More premium CTA button - Ghost Style */
.header-cta {
  background: transparent !important;
  border: 2px solid var(--primary);
  color: var(--primary) !important;
  box-shadow: none;
}

.header-cta:hover {
  background: var(--primary) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px var(--primary-glow);
}


/* ===== TECH ARCHITECTURE GRID ===== */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 64px;
}

.tech-card {
  padding: 40px;
  background: rgba(255,255,255,0.03);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s ease;
}

.tech-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--primary);
  transform: translateY(-10px);
}

.tech-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 16px;
  opacity: 0.5;
}

.tech-card h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #fff;
}

.tech-card p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.6);
}

/* ===== PRODUCT TABLES ===== */
.product-specs {
  width: 100%;
  margin-top: 32px;
  border-collapse: collapse;
}

.product-specs th, .product-specs td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.product-specs th {
  color: var(--primary);
  font-weight: 600;
  width: 150px;
}

.product-specs td {
  color: rgba(255,255,255,0.8);
}


/* ===== RESTORED HUB GRID ===== */
.hub-title {
  margin: 80px 0 40px;
  text-align: center;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
  padding-bottom: 8px;
}

.hub-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.hub-item {
  display: block;
  padding: 24px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  text-decoration: none;
  transition: all 0.3s ease;
}

.hub-item:hover {
  background: var(--primary);
  transform: translateY(-5px);
}

.hub-item h4 {
  color: #fff;
  font-size: 16px;
  margin: 0;
  line-height: 1.4;
}

.hub-item:hover h4 {
  color: #000;
}

/* ===== TECHNOLOGY PAGE BEAUTIFICATION (VECTOR) ===== */
.tech-bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(45, 108, 223, 0.05) 1px, transparent 1px), 
                    linear-gradient(90deg, rgba(45, 108, 223, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
  pointer-events: none;
}

.tech-card {
  position: relative;
  overflow: hidden;
}

.tech-card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  color: var(--primary);
  background: rgba(45, 108, 223, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tech-card:hover .tech-card-icon {
  background: var(--primary);
  color: #000;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 20px rgba(45, 108, 223, 0.4);
}

.tech-card-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.tech-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(45, 108, 223, 0.1) 0%, transparent 70%);
  z-index: -1;
  transition: opacity 0.4s ease;
  opacity: 0;
}

.tech-card:hover::after {
  opacity: 1;
}

/* ===== SOLUTIONS PAGE VISIBILITY FIX ===== */
.hub-item {
  background: rgba(45, 108, 223, 0.08); /* Higher visibility background */
  border: 1px solid rgba(45, 108, 223, 0.2);
}

.hub-item h4 {
  color: #1a1a1a; /* Dark text for visibility */
  font-weight: 700;
}

.hub-item:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.hub-item:hover h4 {
  color: #000;
}

.hub-title {
  margin: 40px auto 24px; /* Reduced top margin to 40px */
  font-size: 28px;
  color: var(--primary);
}

.hub-container {
  margin-top: 20px; /* Reduced gap from 40px to 20px */
}

/* Sidebar refinement */
#sidebar h3 {
  margin-top: 32px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
  padding-bottom: 4px;
}

#sidebar ul {
  margin-top: 16px;
  padding-left: 16px;
}

#sidebar ul li {
  margin-bottom: 12px;
}

/* ===== CONTRAST & READABILITY OVERHAUL ===== */
p.subtitle {
  color: #334155 !important; /* Dark slate for subtitles on light backgrounds */
  font-weight: 500;
}

.product-specs {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  overflow: hidden;
}

.product-specs th {
  background: rgba(45, 108, 223, 0.1);
  color: #1e293b;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-weight: 600;
  width: 40%;
}

.product-specs td {
  padding: 12px;
  color: #0f172a !important; /* Absolute dark contrast */
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-weight: 500;
}

.feature-card p {
  color: #475569 !important;
}

/* Footer Fix */
#footer {
  color: #94a3b8;
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Redundant header removal helper */
.body-hero { display: none; } /* We will hide any internal heroes if layout provides one */