/* ===================================================
   TeknoTeam – style.css
   Dark, premium electronics/tech aesthetic
   =================================================== */

/* ---------- Reset & variables ---------- */
*, *::before, *::after {margin:0; padding:0; box-sizing:border-box;}
:root {
  --bg:        #080d16;
  --bg-alt:    #0d1523;
  --surface:   #111d2e;
  --border:    #1e3050;
  --accent:    #2563eb;
  --accent-h:  #3b82f6;
  --text:      #cbd5e1;
  --text-hi:   #f1f5f9;
  --muted:     #64748b;
  --yellow:    #f7c948;
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --radius:    10px;
  --transition: 0.25s ease;
}
html {scroll-behavior:smooth;}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
}
a {color:inherit; text-decoration:none;}
img {display:block; max-width:100%;}

/* ---------- Utility ---------- */
.container {max-width:1200px; margin:auto; padding:0 1.5rem;}
.section {padding:5rem 0;}
.section-dark {background: var(--bg-alt);}
.section-title {
  font-size:clamp(1.8rem,3.5vw,2.5rem);
  font-weight:700;
  color: var(--text-hi);
  margin-bottom:.75rem;
}
.section-sub {color: var(--muted); font-size:1.1rem; margin-bottom:3rem; max-width:650px;}

/* ---------- Buttons ---------- */
.btn {
  display:inline-block;
  padding:.7rem 1.6rem;
  border-radius:6px;
  font-weight:600;
  font-size:.95rem;
  transition: all var(--transition);
  cursor:pointer;
}
.btn-primary {
  background: var(--accent);
  color:#fff;
}
.btn-primary:hover {background: var(--accent-h); transform:translateY(-2px);}
.btn-outline {
  border:2px solid var(--accent);
  color: var(--accent);
}
.btn-outline:hover {background: var(--accent); color:#fff; transform:translateY(-2px);}

/* ---------- Navbar ---------- */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  height:64px;
  background: rgba(8,13,22,0.9);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2rem;
  z-index:999;
}
.nav-logo {
  font-size:1.3rem;
  font-weight:700;
  color: var(--text-hi);
  display:flex;
  align-items:center;
  gap:.4rem;
}
.logo-icon {color: var(--accent); font-size:1rem;}
.nav-links {
  list-style:none;
  display:flex;
  align-items:center;
  gap:2rem;
}
.nav-links a {color: var(--text); font-size:.95rem; font-weight:500; transition:color var(--transition);}
.nav-links a:hover {color: var(--text-hi);}
.nav-cta {
  background: var(--accent);
  color:#fff !important;
  padding:.45rem 1.1rem;
  border-radius:6px;
  font-weight:600;
}
.nav-cta:hover {background: var(--accent-h) !important;}
.hamburger {display:none; background:none; border:none; color: var(--text-hi); font-size:1.4rem; cursor:pointer;}

/* ---------- Hero ---------- */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:64px;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.2;
  z-index:0;
}
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
  z-index:1;
}
.hero-content {
  position:relative;
  z-index:2;
  max-width:800px;
  padding:2rem 1.5rem;
}
.hero-tag {
  display:inline-block;
  background: rgba(37,99,235,.15);
  border:1px solid var(--accent);
  color: var(--accent-h);
  font-size:.85rem;
  font-weight:600;
  padding:.3rem .9rem;
  border-radius:20px;
  margin-bottom:1.2rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-content h1 {
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:700;
  color: var(--text-hi);
  line-height:1.15;
  margin-bottom:1.2rem;
}
.hero-sub {
  font-size:1.15rem;
  color: var(--text);
  max-width:600px;
  margin:0 auto 2rem;
}
.hero-actions {display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}

/* ---------- Services ---------- */
.service-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.service-card {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:2rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover {
  transform:translateY(-5px);
  box-shadow: 0 8px 32px rgba(37,99,235,.15);
  border-color: var(--accent);
}
.card-icon {font-size:2rem; margin-bottom:1rem;}
.service-card h3 {color: var(--text-hi); font-size:1.1rem; margin-bottom:.5rem;}
.service-card p {color: var(--muted); font-size:.95rem;}

/* ---------- Projects ---------- */
.project-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem;
  margin-bottom:2.5rem;
}
.project-card {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1.8rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.project-card:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 32px rgba(37,99,235,.2);
  border-color: var(--accent);
}
.project-icon {font-size:1.8rem;}
.project-card h3 {color: var(--text-hi); font-size:1rem; font-weight:600;}
.project-card p {color: var(--muted); font-size:.9rem; flex:1;}
.project-link {
  color: var(--accent-h);
  font-size:.875rem;
  font-weight:600;
  margin-top:.5rem;
}
.projects-menu-link {text-align:center; margin-top:1rem;}

/* ---------- Contact ---------- */
.contact-container {text-align:center;}
.contact-info {
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.contact-item {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1.2rem 2rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  font-size:1rem;
}
.contact-icon {font-size:1.3rem; color: var(--accent);}
.contact-item a {color: var(--text-hi); font-weight:600;}
.contact-item a:hover {color: var(--accent-h);}
.contact-cta {margin-top:.5rem;}

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-alt);
  border-top:1px solid var(--border);
  padding:2rem 0;
  font-size:.875rem;
  color: var(--muted);
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.footer a {color: var(--muted); transition:color var(--transition);}
.footer a:hover {color: var(--text-hi);}

/* ---------- Responsive ---------- */
@media (max-width:768px) {
  .nav-links {
    display:none;
    flex-direction:column;
    position:absolute;
    top:64px; left:0; right:0;
    background: var(--bg-alt);
    border-bottom:1px solid var(--border);
    padding:1.5rem;
    gap:1rem;
  }
  .nav-links.open {display:flex;}
  .hamburger {display:block;}
  .footer-inner {flex-direction:column; text-align:center;}
}