/* Hexitronics Gradient Blue Theme • 2025 */
:root{
  --blue-start:#0057FF;
  --blue-end:#00C6FF;
  --blue:#0A74FF;
  --ink:#0B1220;
  --text:#0f172a;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f5f7fb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.header-glow{
  position:absolute; inset: -10vmax -20vmax auto auto; width:50vmax;height:50vmax;
  background:radial-gradient(closest-side, rgba(0,198,255,0.35), transparent 70%);
  filter: blur(40px); pointer-events:none;
}

/* Navbar */
header{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--blue-start),var(--blue-end)); color:#fff;}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; position:sticky; top:0; background:rgba(255,255,255,0.04); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,0.12);}
.logo{font-weight:700; letter-spacing:0.5px; font-size:1.25rem}
nav a{padding:10px 12px; border-radius:10px; transition:all .2s ease; color:#fff; opacity:0.9}
nav a:hover{background:rgba(255,255,255,0.12); opacity:1}
.nav-toggle{display:none; background:transparent; border:0; color:#fff; font-size:1.25rem}

/* Hero */
.hero{display:grid; place-items:center; text-align:center; padding:80px 20px 100px; position:relative;}
.hero h1{font-size: clamp(1.9rem, 4vw, 3.25rem); margin:0 0 12px; line-height:1.1}
.hero p{margin:0 auto 24px; max-width:760px; opacity:0.95}
.btn{display:inline-block; padding:12px 20px; border-radius:14px; background:#fff; color:var(--blue-start); font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,0.12); transition: transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,0.18);}

/* Sections */
.section{padding:56px 20px}
.container{max-width:1100px; margin:0 auto}
.section h2{font-size: clamp(1.4rem, 2.4vw, 2rem); margin:0 0 12px}
.lead{color:var(--muted); max-width:900px}

/* Cards Grid */
.grid{display:grid; gap:18px; grid-template-columns: repeat(12, 1fr);}
.card{grid-column: span 12; background:var(--card); border:1px solid #e5e7eb; border-radius:18px; padding:18px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; position:relative; overflow:hidden;}
.card:hover{transform: translateY(-3px); box-shadow:0 18px 48px rgba(10,20,40,0.08); border-color:#d1d5db}
.card .tag{position:absolute; top:14px; right:14px; font-size:12px; padding:6px 10px; border-radius:999px; color:#0b1220; background:linear-gradient(135deg,#e6f1ff,#f0fbff); border:1px solid #dbeafe}
.card h3{margin:6px 0 8px; font-size:1.1rem}
.card p{margin:0; color:#475569}

/* Product grid responsive */
@media (min-width:700px){ .card{grid-column: span 6;} }
@media (min-width:1024px){ .card{grid-column: span 4;} }

/* Solutions grid layout */
.solution{display:flex; gap:16px; align-items:flex-start}
.solution .icon{flex:0 0 46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--blue-start),var(--blue-end)); display:grid;place-items:center; color:white; font-weight:700}

/* Footer */
footer{margin-top:40px; background:#0a1022; color:#9db0d7;}
footer .container{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px 20px;}
.footer-brand{font-weight:700; color:#e6eeff}
footer a{color:#cdddff; opacity:0.9}
footer a:hover{opacity:1}

/* About page layout */
.kv{display:grid; grid-template-columns: 1.2fr 1fr; gap:22px; align-items:center}
.kv .panel{background:white; border-radius:18px; padding:18px; border:1px solid #e5e7eb}
.kv .panel h3{margin:0 0 8px}
.kv .bullets{display:grid; gap:10px}
.kv .bullets li{margin-left:18px; color:#334155}

/* Contact form (mail-to style) */
.form{background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:20px}
.input{width:100%; padding:12px 14px; border:1px solid #d1d5db; border-radius:12px; margin:8px 0 14px; font:inherit}
.submit{padding:12px 18px; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--blue-start),var(--blue-end)); font-weight:600; cursor:pointer}
.submit:hover{filter:brightness(1.05)}

/* Mobile adjustments */
@media (max-width: 760px){
  nav{display:none}
  nav.open{display:flex; flex-direction:column; gap:6px; background:rgba(0,0,0,0.25); position:absolute; right:12px; top:60px; padding:10px; border-radius:12px}
  .nav-toggle{display:block}
  .kv{grid-template-columns: 1fr}
}


/* --- Mobile Compact Enhancements (Hexitronics) --- */
:root{ --touch-pad:16px; }
.nav-toggle{display:none; background:transparent; border:0; color:#fff; font-size:1.25rem}
@media (max-width: 768px){
  .navbar{padding:12px 16px}
  .hero{padding:64px 16px 80px}
  nav{display:none}
  nav.open{display:flex; flex-direction:column; gap:6px; background:rgba(0,0,0,0.25); position:absolute; right:12px; top:56px; padding:10px; border-radius:12px}
  .nav-toggle{display:inline-block}
  .section{padding:36px 16px}
  .card{padding:14px}
  .btn{padding:10px 16px; border-radius:12px}
}

/* Mobile CTA (less intrusive: appears near footer) */
.mobile-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:40;
  display:none; gap:10px; justify-content:space-between; align-items:center;
  background:linear-gradient(135deg,var(--blue-start),var(--blue-end)); color:#fff;
  border-radius:14px; padding:10px 12px; box-shadow:0 10px 26px rgba(0,0,0,.2);
}
.mobile-cta a{background:rgba(255,255,255,.15); color:#fff; padding:10px 14px; border-radius:10px; font-weight:600; flex:1; text-align:center}
@media (max-width:768px){ .mobile-cta{display:flex; opacity:0; transform: translateY(12px); transition: all .25s ease} .mobile-cta.show{opacity:1; transform:none} }