/* ==========================================================================
   DIXUSTECH — shared stylesheet
   Design tokens: navy #0A2540 (primary), deep navy #071A30, accent orange
   #FF6B35 (hover #E8551F), light bg #F5F7FA, slate text #33415A.
   Type: "Space Grotesk" for headings/display, "Inter" for body/UI.
   Motif: thin connecting lines + nodes (network topology) used sparingly
   as a background texture behind hero/CTA sections and as section dividers.
   ========================================================================== */

:root{
  --navy:        #0A2540;
  --navy-deep:   #071A30;
  --navy-soft:   #12335A;
  --accent:      #FF6B35;
  --accent-dark: #E8551F;
  --bg-light:    #F5F7FA;
  --bg-white:    #FFFFFF;
  --text-main:   #1B2A3D;
  --text-soft:   #52667A;
  --line:        #E3E8EF;
  --ok:          #1E9E63;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-main);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,.display{
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.container-x{ max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
@media(min-width:1024px){ .container-x{ padding-inline: 2rem; } }

/* ---------- Network-line motif (background texture) ---------- */
.net-field{
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.net-field svg{ width: 100%; height: 100%; }

/* ---------- Top utility bar ---------- */
.topbar{
  background: var(--navy-deep);
  color: #C9D6E6;
  font-size: 0.8rem;
}
.topbar a{ color: #C9D6E6; }
.topbar a:hover{ color: var(--accent); }

/* ---------- Sticky nav ---------- */
header.site-nav{
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-white);
  border-bottom: 1px solid var(--line);
}
.nav-link{
  font-weight: 500; font-size: 0.95rem; color: var(--navy);
  padding: 0.5rem 0; position: relative;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background: var(--accent); transition: width .2s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color: var(--accent); }

.dropdown{ position: relative; }
.dropdown-panel{
  position:absolute; top:100%; left:0; min-width: 240px;
  background: var(--bg-white); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: 0 12px 28px -8px rgba(10,37,64,.18);
  padding: .5rem; display:none; border-radius: 6px;
}
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{ display:block; }
.dropdown-panel a{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; border-radius:4px; font-size:.9rem; color: var(--text-main);
}
.dropdown-panel a:hover{ background: var(--bg-light); color: var(--accent-dark); }
.dropdown-caret{ font-size:.65rem; margin-left:.25rem; transition: transform .2s; }
.dropdown:hover .dropdown-caret{ transform: rotate(180deg); }

/* mobile menu */
#mobile-menu{ display:none; }
#mobile-menu.open{ display:block; }
.mobile-accordion > button .fa-chevron-down{ transition: transform .2s; }
.mobile-accordion.open > button .fa-chevron-down{ transform: rotate(180deg); }
.mobile-accordion .accordion-panel{ display:none; }
.mobile-accordion.open .accordion-panel{ display:block; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem; padding:.75rem 1.4rem; border-radius:6px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-accent{ background: var(--accent); color:#fff; }
.btn-accent:hover{ background: var(--accent-dark); }
.btn-outline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.btn-navy{ background: var(--navy); color:#fff; }
.btn-navy:hover{ background: var(--navy-soft); }
.btn-ghost-navy{ background:transparent; color:var(--navy); border:1.5px solid var(--line); }
.btn-ghost-navy:hover{ border-color:var(--navy); }

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  border-top: 3px solid transparent;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{
  border-top-color: var(--accent);
  box-shadow: 0 16px 32px -14px rgba(10,37,64,.22);
  transform: translateY(-3px);
}
.icon-tile{
  width:52px; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background: rgba(10,37,64,.06); color: var(--navy); font-size:1.2rem;
}
.card:hover .icon-tile{ background: var(--accent); color:#fff; }

/* ---------- Section dividers ---------- */
.eyebrow-line{
  display:flex; align-items:center; gap:.6rem; color: var(--accent-dark); font-weight:600; font-size:.85rem;
}
.eyebrow-line::before{ content:""; width:22px; height:2px; background: var(--accent); display:inline-block; }

/* ---------- Trust badge strip ---------- */
.badge-strip{ background: var(--navy); color:#EAF0F8; }
.badge-item{ border-left: 1px solid rgba(255,255,255,.14); }
.badge-item:first-child{ border-left: none; }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--navy-deep); color:#B9C6D6; }
footer.site-footer a:hover{ color: var(--accent); }
footer.site-footer h4{ color:#fff; }

/* ---------- Floating action buttons ---------- */
.fab-stack{ position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display:flex; flex-direction:column; gap:.7rem; align-items:flex-end; }
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; color:#fff; box-shadow: 0 10px 22px -6px rgba(10,37,64,.4);
  transition: transform .15s ease;
}
.fab:hover{ transform: scale(1.07); }
.fab-whatsapp{ background:#25D366; }
.fab-quote{ background: var(--accent); }

/* ---------- Forms ---------- */
.field label{ font-size:.85rem; font-weight:600; color: var(--navy); display:block; margin-bottom:.35rem; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:.65rem .8rem; font-size:.95rem;
  background:#fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,53,.15); outline:none;
}

/* ---------- Tabs (products page) ---------- */
.tab-btn{
  padding:.7rem 1.1rem; border-radius:6px; font-weight:600; font-size:.9rem; color: var(--text-soft);
  border:1px solid var(--line); background:#fff;
}
.tab-btn.active{ background: var(--navy); color:#fff; border-color: var(--navy); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- Gallery ---------- */
.gallery-item{ position:relative; overflow:hidden; border-radius:8px; }
.gallery-item img{ transition: transform .35s ease; display:block; width:100%; height:100%; object-fit:cover; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-caption{
  position:absolute; inset:auto 0 0 0; padding:.9rem 1rem;
  background: linear-gradient(to top, rgba(7,26,48,.92), rgba(7,26,48,0));
  color:#fff; font-size:.85rem;
}

/* ---------- Misc ---------- */
.text-accent{ color: var(--accent); }
.text-navy{ color: var(--navy); }
.bg-navy{ background: var(--navy); }
.bg-navy-deep{ background: var(--navy-deep); }
.bg-light{ background: var(--bg-light); }
.line-t{ border-top:1px solid var(--line); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}