/* =========================================================================
   ANMAT LTD — COMPONENTS
   ========================================================================= */

/* -----------------------------------------------------------------------
   1. Navigation
   ----------------------------------------------------------------------- */

.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  padding-block:var(--sp-5);
  transition:padding var(--dur-med) var(--ease-out),
             background var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out);
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-6);
}

.site-header.is-scrolled{
  padding-block:var(--sp-3);
  background:rgba(8,21,38,0.86);
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:var(--shadow-md);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  color:var(--text-inverse);
}

.brand img{ height:42px; width:auto; transition:height var(--dur-med) var(--ease-out); }
.is-scrolled .brand img{ height:34px; }

.brand-word{
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:0.04em;
  line-height:1;
}
.brand-word small{
  display:block;
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.24em;
  color:var(--gold-300);
  font-weight:400;
  margin-top:3px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--sp-7);
}

.nav-links li{ list-style:none; }

.nav-links a{
  position:relative;
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--text-inverse-muted);
  padding-block:var(--sp-2);
  transition:color var(--dur-fast) var(--ease-out);
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:2px;
  background:var(--grad-gold-sheen);
  transition:right var(--dur-med) var(--ease-out);
}

.nav-links a:hover,
.nav-links a:focus-visible{ color:var(--text-inverse); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ right:0; }

.nav-cta{
  display:none;
}
@media (min-width:860px){ .nav-cta{ display:inline-flex; } }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:28px;
  color:var(--text-inverse);
}
.nav-toggle span{
  height:2px; width:100%;
  background:currentColor;
  transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

@media (max-width:860px){
  .nav-links{
    position:fixed;
    inset:0 0 0 auto;
    width:min(78vw,340px);
    height:100vh;
    background:var(--grad-navy-steel);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:var(--sp-6);
    padding:var(--sp-8) var(--sp-7);
    transform:translateX(100%);
    transition:transform var(--dur-med) var(--ease-in-out);
    box-shadow:var(--shadow-lg);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* -----------------------------------------------------------------------
   2. Buttons
   ----------------------------------------------------------------------- */

.btn{
  --btn-fg:var(--navy-950);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  padding:0.95em 1.9em;
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--btn-fg);
  background:var(--grad-gold-sheen);
  background-size:220% 100%;
  background-position:0% 0%;
  border-radius:var(--radius-sm);
  isolation:isolate;
  overflow:hidden;
  transition:background-position var(--dur-slow) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:var(--shadow-gold);
}

.btn:hover,.btn:focus-visible{
  background-position:100% 0%;
  transform:translateY(-2px);
}
.btn:active{ transform:translateY(0); }

.btn-ghost{
  --btn-fg:var(--text-inverse);
  background:transparent;
  box-shadow:none;
  border:1px solid var(--border-inverse);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  border-color:var(--gold-400);
  background:rgba(237,208,140,0.06);
}

.btn-arrow{
  display:inline-block;
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-arrow{ transform:translateX(4px); }

/* -----------------------------------------------------------------------
   3. Z-Slash divider — signature element.
   A single diagonal beam, drawn on scroll, echoing the logo's Z-mark.
   Used between every major section instead of a plain <hr>.
   ----------------------------------------------------------------------- */

.z-divider{
  position:relative;
  height:clamp(64px,10vw,140px);
  overflow:hidden;
}

.z-divider svg{
  width:100%;
  height:100%;
  display:block;
}

.z-divider path{
  fill:none;
  /* stroke color is set per-instance via the path's stroke="url(#...)"
     attribute in markup, pointing at that SVG's own <linearGradient> —
     keeps each divider self-contained so IDs never collide on the page */
  stroke-width:3;
  stroke-linecap:square;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  transition:stroke-dashoffset var(--dur-draw) var(--ease-out);
}

.z-divider.is-visible path{ stroke-dashoffset:0; }

/* -----------------------------------------------------------------------
   4. Service cards — parallelogram-clipped, echoing the Z geometry
   ----------------------------------------------------------------------- */

.card-grid{
  display:grid;
  gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.service-card{
  position:relative;
  padding:var(--sp-7) var(--sp-6) var(--sp-6);
  background:var(--grad-navy-steel);
  clip-path:var(--clip-card);
  color:var(--text-inverse);
  overflow:hidden;
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--grad-gold-sheen);
  opacity:0;
  mix-blend-mode:overlay;
  transition:opacity var(--dur-med) var(--ease-out);
}

.service-card:hover,.service-card:focus-within{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}
.service-card:hover::before{ opacity:0.5; }

.service-card .index{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--gold-300);
  letter-spacing:var(--tr-eyebrow);
}

.service-card h3{
  font-size:1.5rem;
  margin-block:var(--sp-4) var(--sp-3);
}

.service-card p{ color:var(--text-inverse-muted); }

.service-card .icon{
  width:44px;height:44px;
  margin-bottom:var(--sp-5);
  color:var(--gold-400);
}

.service-card a.card-link{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin-top:var(--sp-5);
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--gold-300);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.service-card a.card-link:hover{ border-color:var(--gold-300); }

/* -----------------------------------------------------------------------
   5. Stat band — monospace counters on a slashed navy field
   ----------------------------------------------------------------------- */

.stat-band{
  background:var(--grad-navy-steel);
  padding-block:var(--sp-8);
  position:relative;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--sp-6);
  text-align:center;
}

.stat{ color:var(--text-inverse); }

.stat .num{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,3.6rem);
  color:var(--gold-300);
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.stat .label{
  margin-top:var(--sp-2);
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;
  color:var(--text-inverse-muted);
}

/* -----------------------------------------------------------------------
   6. Process / timeline (used sparingly — only where order is real,
      e.g. the manpower deployment or export shipment sequence)
   ----------------------------------------------------------------------- */

.process{
  display:grid;
  gap:0;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  counter-reset:step;
}

.process-step{
  position:relative;
  padding:var(--sp-6) var(--sp-5);
  border-inline-start:1px solid var(--border);
}
.process-step:first-child{ border-inline-start:none; }

.process-step::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--accent-strong);
  letter-spacing:var(--tr-eyebrow);
  display:block;
  margin-bottom:var(--sp-3);
}

.process-step h4{ margin-bottom:var(--sp-2); }
.process-step p{ color:var(--text-muted); font-size:0.95rem; }

/* -----------------------------------------------------------------------
   7. Testimonial / quote
   ----------------------------------------------------------------------- */

.quote-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-inline-start:3px solid var(--accent);
  padding:var(--sp-6);
  border-radius:var(--radius-md);
}
.quote-card blockquote{
  margin:0 0 var(--sp-4);
  font-family:var(--font-display);
  font-size:1.3rem;
  text-transform:none;
  line-height:var(--lh-snug);
  letter-spacing:0;
}
.quote-card cite{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--text-muted);
}

/* -----------------------------------------------------------------------
   8. Forms (RFQ / contact)
   ----------------------------------------------------------------------- */

.field{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}

.field label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;
  color:var(--gold-300);
}

.field input,.field textarea,.field select{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-inverse);
  color:var(--text-inverse);
  padding:0.85em 1em;
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--gold-400);
  background:rgba(255,255,255,0.06);
  outline:none;
}
.field textarea{ resize:vertical; min-height:120px; }

/* -----------------------------------------------------------------------
   9. Footer
   ----------------------------------------------------------------------- */

.site-footer{
  background:var(--navy-950);
  color:var(--text-inverse-muted);
  padding-block:var(--sp-8) var(--sp-6);
}

.footer-grid{
  display:grid;
  gap:var(--sp-7);
  grid-template-columns:2fr 1fr 1fr 1fr;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

.footer-grid h4{
  color:var(--text-inverse);
  font-size:0.85rem;
  letter-spacing:var(--tr-wide);
  margin-bottom:var(--sp-4);
}

.footer-grid ul li{ margin-bottom:var(--sp-2); }
.footer-grid a{ transition:color var(--dur-fast) var(--ease-out); }
.footer-grid a:hover{ color:var(--gold-300); }

.footer-base{
  margin-top:var(--sp-8);
  padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--sp-3);
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.04em;
}

/* -----------------------------------------------------------------------
   10. Badges / pills (certifications, country flags for import-export)
   ----------------------------------------------------------------------- */

.pill{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:0.4em 0.9em;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  border:1px solid var(--border);
  border-radius:100px;
  color:var(--text-muted);
}
.on-dark .pill{ border-color:var(--border-inverse); color:var(--text-inverse-muted); }