/* =========================================================
   Tazinazo IT Services — Professional Light Brand System
   ---------------------------------------------------------
   Main direction requested:
   - White-first website
   - Professional business look
   - No emoji icons
   - Subtle network/data-through-wires visual language
   - Logo/wordmark on the left
   ========================================================= */

:root {
  --clr-primary: #0A3D91;
  --clr-primary-2: #1E88E5;
  --clr-primary-soft: #EAF3FF;
  --clr-primary-line: rgba(10, 61, 145, 0.16);
  --clr-ink: #0F172A;
  --clr-body: #475569;
  --clr-muted: #64748B;
  --clr-white: #FFFFFF;
  --clr-offwhite: #F8FAFC;
  --clr-line: #E2E8F0;
  --clr-card: #FFFFFF;
  --clr-success: #0F766E;
  --clr-warning: #B45309;

  --text-main: var(--clr-ink);
  --text-muted: var(--clr-body);
  --text-subtle: var(--clr-muted);

  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 10px 26px rgba(15, 23, 42, 0.07);

  --sp-xs: 0.45rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2.5rem;
  --sp-2xl: 4rem;

  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--clr-white);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }

/* NAVIGATION */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--clr-line);
}
.navbar .container { display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:1rem; }
.nav-logo { display:flex; align-items:center; gap:.8rem; font-weight:800; }
.nav-logo-img {
  width:190px;
  height:auto;
  border-radius:0;
  object-fit:contain;
  border:0;
  box-shadow:none;
}
.nav-logo-text { display:none; }
.wordmark { letter-spacing:.02em; font-size:1.08rem; color:var(--clr-ink); }
.tagline { color:var(--clr-primary); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.nav-links { display:flex; list-style:none; gap:1.5rem; padding:0; margin:0; color:var(--text-muted); font-size:.94rem; font-weight:600; }
.nav-links a { position:relative; padding:.35rem 0; }
.nav-links a:hover,.nav-links .active,.mobile-nav .active { color:var(--clr-primary); }
.nav-links a.active::after,.nav-links a:hover::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--clr-primary); }
.nav-cta { display:block; }
.hamburger { display:none; width:44px; height:44px; border:1px solid var(--clr-line); background:var(--clr-white); border-radius:12px; }
.hamburger span { display:block; height:2px; background:var(--clr-ink); width:20px; margin:5px auto; }
.mobile-nav { display:none; padding:1rem; border-bottom:1px solid var(--clr-line); background:var(--clr-white); box-shadow:var(--shadow-soft); }
.mobile-nav.open { display:grid; gap:.8rem; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; padding:.78rem 1.15rem; font-weight:800;
  border:1px solid transparent; cursor:pointer; transition:.2s ease;
}
.btn-primary { background:var(--clr-primary); color:var(--clr-white); box-shadow:0 12px 24px rgba(10,61,145,.18); }
.btn-primary:hover { transform:translateY(-2px); background:#083579; }
.navbar .nav-cta .btn-primary,
.hero-actions .btn-primary {
  position:relative;
  overflow:hidden;
}
.navbar .nav-cta .btn-primary::after,
.hero-actions .btn-primary::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -45%;
  width: 40%;
  height: 180%;
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,0));
  transform: rotate(25deg);
  opacity: .6;
  filter: blur(1px);
  animation: btn-shine 2.2s ease-in-out infinite;
}
@keyframes btn-shine {
  0% { right: -45%; opacity:.2; }
  45% { right: 110%; opacity:.85; }
  100% { right: 130%; opacity:.1; }
}
.btn-outline { border-color:var(--clr-primary-line); color:var(--clr-primary); background:var(--clr-white); }
.btn-outline:hover { background:var(--clr-primary-soft); transform:translateY(-2px); }
.btn-ghost { background:var(--clr-offwhite); border-color:var(--clr-line); color:var(--text-main); }

/* GLOBAL SECTIONS */
.section { padding: var(--sp-2xl) 0; }
.section--alt { background:var(--clr-offwhite); border-top:1px solid var(--clr-line); border-bottom:1px solid var(--clr-line); }
.section-header { max-width:720px; margin-bottom:2.2rem; }
.text-center { text-align:center; margin-left:auto; margin-right:auto; }
.section-label { color:var(--clr-primary); text-transform:uppercase; letter-spacing:.13em; font-size:.78rem; font-weight:900; }
h1,h2,h3,h4,h5 { margin:0 0 .8rem; line-height:1.1; font-family:var(--font-display); color:var(--clr-ink); }
h1 { font-size:clamp(2.35rem, 6vw, 5rem); letter-spacing:-.055em; }
h1 em { color:var(--clr-primary); font-style:normal; }
h2 { font-size:clamp(1.85rem, 4vw, 3rem); letter-spacing:-.04em; }
h3 { font-size:1.22rem; }
p { color:var(--text-muted); max-width:64ch; }

.card,.svc-card,.why-card,.platform-card,.service-card-full,.cert-card,.info-card,.quote-card {
  background:var(--clr-card);
  border:1px solid var(--clr-line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.card:hover,.svc-card:hover,.why-card:hover,.platform-card:hover,.service-card-full:hover,.cert-card:hover,.info-card:hover { border-color:var(--clr-primary-line); }
.badge { display:inline-flex; padding:.25rem .55rem; border-radius:999px; font-size:.72rem; font-weight:900; }
.badge-blue { background:var(--clr-primary-soft); color:var(--clr-primary); }
.badge-yellow { background:#FFF7ED; color:var(--clr-warning); }

/* PROFESSIONAL NON-EMOJI TECH MARKS */
.tech-icon,
.svc-icon,
.why-icon,
.service-card-full .icon,
.cert-card .icon,
.info-card .icon,
.pb-icon {
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--clr-primary-soft), #fff);
  border:1px solid var(--clr-primary-line);
  position:relative;
  margin-bottom:.9rem;
  overflow:hidden;
  font-size:0 !important;
  flex:0 0 auto;
}
.tech-icon::before,
.svc-icon::before,
.why-icon::before,
.service-card-full .icon::before,
.cert-card .icon::before,
.info-card .icon::before,
.pb-icon::before {
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:15px;
  height:2px;
  background:var(--clr-primary);
  box-shadow:0 8px 0 var(--clr-primary-2), 0 16px 0 rgba(10,61,145,.42);
}
.tech-icon::after,
.svc-icon::after,
.why-icon::after,
.service-card-full .icon::after,
.cert-card .icon::after,
.info-card .icon::after,
.pb-icon::after {
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  right:9px;
  top:12px;
  background:var(--clr-primary-2);
  box-shadow:-15px 8px 0 var(--clr-primary), -4px 16px 0 rgba(30,136,229,.55);
}

/* FOOTER */
.footer { padding:3rem 0 1.5rem; border-top:1px solid var(--clr-line); background:#F8FAFC; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; }
.footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; color:var(--text-muted); }
.footer h5 { color:var(--clr-primary); text-transform:uppercase; letter-spacing:.09em; font-size:.78rem; }
.footer p { font-size:.9rem; }
.footer-contact p { margin:.35rem 0; }
.footer a { color:var(--text-muted) !important; }
.footer a:hover { color:var(--clr-primary) !important; }
.footer-bottom { border-top:1px solid var(--clr-line); margin-top:2rem; padding-top:1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--text-subtle); font-size:.82rem; }

.fade-up { opacity:0; transform:translateY(20px); animation:fadeUp .75s ease forwards; }
.fade-up-delay-1 { animation-delay:.12s; } .fade-up-delay-2 { animation-delay:.24s; } .fade-up-delay-3 { animation-delay:.36s; }
@keyframes fadeUp { to { opacity:1; transform:none; } }

input, select, textarea {
  width:100%; padding:.9rem 1rem; border-radius:14px; border:1px solid var(--clr-line);
  background:var(--clr-white); color:var(--text-main); outline:none;
}
input:focus, select:focus, textarea:focus { border-color:var(--clr-primary); box-shadow:0 0 0 4px var(--clr-primary-line); }
label { display:block; color:var(--text-muted); font-size:.88rem; margin-bottom:.35rem; font-weight:700; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field.full { grid-column:1/-1; }

@media (max-width: 900px) {
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:block; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .nav-logo-img { width:170px; }
}
@media (max-width: 640px) {
  .container { width:min(100% - 1.1rem, var(--container)); }
  .section { padding:2.8rem 0; }
  .footer-grid,.form-grid { grid-template-columns:1fr; }
  .nav-logo-img { width:155px; }
}