/* =====================================================================
   Fluisol — Design System
   Direction: industrial precision. Deep gunmetal canvas, molten-orange
   accent (from the brand mark), engineered grid, technical mono labels.
   Display: "Space Grotesk" (mechanical humanist). Body: "Inter".
   Mono (specs/labels): "JetBrains Mono".
   ===================================================================== */

:root {
  /* Palette */
  --ink:        #0E1419;   /* near-black gunmetal (dominant) */
  --ink-2:      #161E26;   /* raised panel */
  --ink-3:      #1F2A35;   /* card / border base */
  --steel:      #2A3744;   /* hairline borders */
  --mist:       #8A99A8;   /* muted text */
  --paper:      #F4F6F8;   /* light section bg */
  --paper-2:    #E8ECF0;
  --white:      #FFFFFF;
  --text:       #D7DEE5;   /* body on dark */
  --text-dark:  #1A2129;   /* body on light */

  --flame:      #F47920;   /* primary accent (brand orange) */
  --flame-2:    #FF9244;   /* hover / lighter */
  --flame-deep: #C75A0E;   /* pressed */
  --ember:      rgba(244,121,32,.12);

  /* Type */
  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Scale */
  --step--1: clamp(.78rem, .74rem + .2vw, .86rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

  /* Layout */
  --maxw: 1220px;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 10px 40px -12px rgba(0,0,0,.5);
  --shadow-card: 0 2px 20px -8px rgba(0,0,0,.35);

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--light { background: var(--paper); color: var(--text-dark); }
.section--ink2 { background: var(--ink-2); }

/* ---------- Type helpers ---------- */
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--white); }
.section--light h1, .section--light h2, .section--light h3 { color: var(--text-dark); }
.display { font-size: var(--step-4); font-weight: 700; }
.h-xl { font-size: var(--step-3); }
.h-lg { font-size: var(--step-2); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--flame);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px; background: var(--flame); display: inline-block;
}
.lead { font-size: var(--step-1); color: var(--mist); max-width: 60ch; }
.section--light .lead { color: #55636f; }
.muted { color: var(--mist); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-mono); font-size: var(--step--1);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: .9rem 1.6rem; border-radius: var(--radius);
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
  will-change: transform;
}
.btn--primary { background: var(--flame); color: #1a0f04; }
.btn--primary:hover { background: var(--flame-2); transform: translateY(-2px); box-shadow: 0 8px 24px -8px var(--flame); }
.btn--ghost { border: 1px solid var(--steel); color: var(--white); }
.btn--ghost:hover { border-color: var(--flame); color: var(--flame); transform: translateY(-2px); }
.btn--light { background: var(--ink); color: var(--white); }
.btn--light:hover { background: var(--ink-3); transform: translateY(-2px); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent;
  transition: background .35s var(--ease), border-color .35s, box-shadow .35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(14,20,25,.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--steel);
  box-shadow: 0 8px 30px -16px rgba(0,0,0,.6);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav__logo { display: flex; align-items: center; gap: .65rem; }
.nav__logo svg { height: 38px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: var(--step--1); font-weight: 500; letter-spacing: .02em;
  color: var(--text); position: relative; padding-block: .4rem;
  transition: color .2s;
}
.nav__links a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--flame); transition: width .28s var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__toggle span { width: 26px; height: 2px; background: var(--white); transition: .3s var(--ease); display:block; }

/* ---------- Hero slider ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 6s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(95deg, rgba(14,20,25,.94) 0%, rgba(14,20,25,.72) 42%, rgba(14,20,25,.28) 100%);
}
.hero__inner { position: relative; z-index: 3; padding-block: 9rem 4rem; max-width: 760px; }
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero h1 { font-size: var(--step-4); margin-bottom: 1.4rem; }
.hero__sub { font-size: var(--step-1); color: var(--text); max-width: 54ch; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__dots { position: absolute; left: var(--gut); bottom: 2.4rem; z-index: 4; display: flex; gap: .7rem; }
.hero__dot { width: 38px; height: 3px; background: rgba(255,255,255,.25); border-radius: 2px; transition: background .3s; }
.hero__dot.is-active { background: var(--flame); }
.hero__meta {
  position: absolute; right: var(--gut); bottom: 2.4rem; z-index: 4;
  font-family: var(--f-mono); font-size: var(--step--1); color: var(--mist);
  text-align: right; display: none;
}
.hero__meta b { color: var(--white); font-weight: 500; }

/* ---------- Marquee strip ---------- */
.strip {
  background: var(--flame); color: #1a0f04; overflow: hidden;
  border-block: 1px solid var(--flame-deep);
}
.strip__track { display: flex; gap: 3rem; padding-block: .85rem; white-space: nowrap; animation: marquee 28s linear infinite; }
.strip__track span { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 3rem; }
.strip__track span::after { content:"◆"; opacity:.5; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section heading block ---------- */
.head { max-width: 64ch; margin-bottom: clamp(2rem,5vw,3.5rem); }
.head .eyebrow { margin-bottom: 1rem; }
.head h2 { font-size: var(--step-3); margin-bottom: 1rem; }

/* ---------- Capability grid (services) ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 1px; background: var(--steel); border: 1px solid var(--steel); border-radius: var(--radius-lg); overflow: hidden; }
.cap {
  background: var(--ink-2); padding: 2.2rem 1.8rem; position: relative;
  transition: background .3s var(--ease); overflow: hidden;
}
.cap::before {
  content:""; position:absolute; left:0; top:0; height:100%; width:3px; background: var(--flame);
  transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.cap:hover { background: var(--ink-3); }
.cap:hover::before { transform: scaleY(1); }
.cap__icon { font-size: 1.6rem; width: 52px; height: 52px; display: grid; place-items: center; background: var(--ember); border-radius: var(--radius); margin-bottom: 1.3rem; }
.cap__no { position:absolute; top:1.6rem; right:1.6rem; font-family: var(--f-mono); font-size: var(--step--1); color: var(--steel); }
.cap h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.cap p { color: var(--mist); font-size: var(--step-0); }
.cap__link { margin-top: 1.2rem; display: inline-flex; gap: .5rem; align-items:center; font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing:.06em; color: var(--flame); }
.cap__link .arr { transition: transform .25s var(--ease); }
.cap:hover .cap__link .arr { transform: translateX(4px); }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1px; background: var(--steel); border:1px solid var(--steel); border-radius: var(--radius-lg); overflow:hidden; }
.stat { background: var(--ink-2); padding: 2.4rem 1.8rem; }
.stat__num { font-family: var(--f-display); font-weight: 700; font-size: var(--step-3); color: var(--flame); line-height: 1; }
.stat__label { margin-top: .7rem; color: var(--mist); font-size: var(--step-0); }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); position: relative; }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 3/4; }

/* ---------- Product cards ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px,1fr)); gap: 1.4rem; }
.pcard {
  background: var(--ink-2); border: 1px solid var(--steel); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.pcard:hover { transform: translateY(-4px); border-color: var(--flame); box-shadow: var(--shadow-card); }
.pcard__img { aspect-ratio: 4/3; overflow: hidden; background: var(--ink-3); }
.pcard__img img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.06); }
.pcard__body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.pcard__cat { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--flame); margin-bottom: .5rem; }
.pcard h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.pcard p { color: var(--mist); font-size: var(--step--1); flex: 1; }
.pcard__spec { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--steel); font-family: var(--f-mono); font-size: .72rem; color: var(--text); display: flex; align-items: center; gap: .5rem; }
.pcard__spec b { color: var(--flame); }

/* ---------- Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 1.4rem; }
.catcard { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; isolation: isolate; }
.catcard img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; z-index:-2; transition: transform .6s var(--ease); }
.catcard::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(14,20,25,.96) 8%, rgba(14,20,25,.35) 70%, rgba(14,20,25,.1) 100%); }
.catcard:hover img { transform: scale(1.07); }
.catcard__body { padding: 1.8rem; width: 100%; }
.catcard__icon { font-size: 1.5rem; margin-bottom: .6rem; }
.catcard h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.catcard p { color: var(--text); font-size: var(--step--1); margin-bottom: 1rem; max-width: 42ch; }
.catcard__link { font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--flame); display: inline-flex; gap: .5rem; align-items: center; }
.catcard:hover .catcard__link .arr { transform: translateX(4px); }
.catcard__link .arr { transition: transform .25s var(--ease); }

/* ---------- Page hero (inner pages) ---------- */
.phero { position: relative; padding-block: 10rem 4rem; overflow: hidden; }
.phero img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; z-index:-2; }
.phero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(95deg, rgba(14,20,25,.95), rgba(14,20,25,.72) 60%, rgba(14,20,25,.45)); }
.phero h1 { font-size: var(--step-3); margin-block: 1rem .8rem; max-width: 20ch; }
.phero p { color: var(--text); max-width: 56ch; font-size: var(--step-1); }
.crumb { font-family: var(--f-mono); font-size: var(--step--1); color: var(--mist); }
.crumb a:hover { color: var(--flame); }

/* ---------- Contact ---------- */
.field { margin-bottom: 1.1rem; }
.field label { display:block; font-family: var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--mist); margin-bottom:.45rem; }
.field input, .field textarea, .field select {
  width:100%; padding:.85rem 1rem; background: var(--ink); border:1px solid var(--steel);
  border-radius: var(--radius); color: var(--white); font:inherit; font-size: var(--step-0);
  transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--flame); background: var(--ink-2); outline: none; }
.field textarea { resize: vertical; min-height: 130px; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }

.alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: var(--step-0); }
.alert--ok { background: rgba(46,160,67,.12); border: 1px solid rgba(46,160,67,.4); color: #7ee2a0; }
.alert--err { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.4); color: #ff9b95; }

.contact-info { display:flex; flex-direction:column; gap: 1.6rem; }
.cinfo { display:flex; gap:1rem; align-items:flex-start; }
.cinfo__ic { width:46px; height:46px; flex:none; display:grid; place-items:center; background: var(--ember); border-radius: var(--radius); font-size:1.2rem; }
.cinfo h4 { color: var(--white); font-size: var(--step-0); margin-bottom:.2rem; font-family: var(--f-display); }
.cinfo a, .cinfo p { color: var(--mist); }
.cinfo a:hover { color: var(--flame); }

/* ---------- Footer ---------- */
.footer { background: #0A0E12; border-top: 1px solid var(--steel); padding-block: 4rem 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer h4 { font-family: var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--mist); margin-bottom:1.2rem; font-weight:500; }
.footer a { color: var(--text); font-size: var(--step--1); display:block; padding-block:.35rem; transition: color .2s; }
.footer a:hover { color: var(--flame); }
.footer__brand p { color: var(--mist); font-size: var(--step--1); margin-block: 1rem 1.4rem; max-width: 34ch; }
.footer__bottom { border-top: 1px solid var(--steel); padding-top: 1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer__bottom p { color: var(--mist); font-size: var(--step--1); }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; box-shadow: 0 8px 24px -6px rgba(37,211,102,.6);
  transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 1024px){ .hero__meta { display:block; } }
@media (max-width: 900px){
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media--tall img { aspect-ratio: 16/10; }
}
@media (max-width: 768px){
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-open .nav__links {
    display: flex; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--ink-2);
    border-bottom: 1px solid var(--steel); padding: 1rem var(--gut) 1.5rem;
  }
  .nav.is-open .nav__links a { padding-block: .9rem; border-bottom: 1px solid var(--steel); }
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero__meta { display:none; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity:1; transform:none; }
}