:root{
  --bg:#0f172a;
  --txt:#0b1220;
  --muted:#667085;
  --brand:#0ea5a8; /* teal */
  --brand-2:#2563eb; /* blue */
  --card:#ffffff;
  --line:#e6e8ec;
  --grad: linear-gradient(90deg, var(--brand), var(--brand-2));
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto; color:var(--txt); background:#f7fafc; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(1120px, 92vw); margin-inline:auto; }

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); backdrop-filter:saturate(180%) blur(8px); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.logo-dot{ width:10px; height:10px; border-radius:50%; background:var(--grad); display:inline-block; }
.nav-links{ display:flex; align-items:center; gap:16px; }
.nav-links a{ padding:8px 10px; font-weight:600; color:#111827; }
.nav-toggle{ display:none; background:none; border:0; width:40px; height:40px; position:relative; }
.nav-toggle span{ position:absolute; left:8px; right:8px; height:2px; background:#111; border-radius:2px; }
.nav-toggle span:nth-child(1){ top:12px; } .nav-toggle span:nth-child(2){ top:19px; } .nav-toggle span:nth-child(3){ top:26px; }

.btn{ background:var(--grad); color:#fff; padding:10px 14px; border-radius:12px; font-weight:700; border:0; display:inline-block; }
.btn--ghost{ background:transparent; color:#111; border:1px solid var(--line); }
.btn--lg{ padding:14px 18px; border-radius:14px; }

/* Hero */
.hero{ position:relative; background:radial-gradient(1200px 400px at 70% -10%, rgba(37,99,235,.25), transparent), linear-gradient(#fff,#fff); }
.hero__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center; padding:48px 0; }
.hero__copy h1{ font-size: clamp(28px, 4.5vw, 48px); line-height:1.06; margin:0 0 10px; }
.hero__copy p{ font-size: clamp(16px, 1.9vw, 18px); margin:0 0 18px; color:#334155; }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__cta{ display:flex; gap:12px; margin:18px 0 10px; flex-wrap:wrap; }
.hero__bullets{ display:flex; gap:14px; flex-wrap:wrap; color:#475569; font-weight:600; }
.hero__art svg{ width:100%; height:auto; }
.hero__wave{ position:absolute; bottom:-1px; left:0; width:100%; height:24px; background:linear-gradient(to right, transparent 0 10%, rgba(14,165,168,.25) 30%, rgba(37,99,235,.25) 70%, transparent 90%); filter:blur(10px); }

/* Sections */
.section{ padding:56px 0; }
.section--alt{ background:#f9fafb; }
.section__head{ margin-bottom:20px; }
.section__head h2{ font-size: clamp(22px, 3.4vw, 32px); margin:0 0 6px; }
.muted{ color:var(--muted); }

/* Cards grid */
.grid--cards{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:8px; box-shadow: 0 6px 12px rgba(15,23,42,.04); }
.card__cta{ margin-top:auto; font-weight:700; color:#0f766e; }
.card__icon{ width:56px; height:56px; border-radius:14px; background:var(--grad); position:relative; }
.ic--paper::after{ content:''; position:absolute; inset:12px; background:linear-gradient(#fff,#f1f5f9); border-radius:6px; box-shadow: inset 0 -6px 0 rgba(37,99,235,.16); }
.ic--electrodes::after{ content:''; position:absolute; left:12px; right:12px; top:12px; bottom:12px; border-radius:50%; border:6px solid #fff; }
.ic--gloves::after{ content:''; position:absolute; inset:12px; background:#fff; border-radius:50% 50% 50% 12px; }
.ic--lab::after{ content:''; position:absolute; inset:12px; background:conic-gradient(from 180deg, #e2e8f0, #fff); border-radius:8px 8px 14px 14px; }

.cta-center{ text-align:center; margin-top:18px; }

/* Brands */
.brands{ padding:48px 0; background:#fff; border-block:1px solid var(--line); }
.brands h2{ text-align:center; margin:0 0 16px; }
.brand-track{ display:flex; gap:36px; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-track img{ width:120px; height:48px; object-fit:contain; filter:grayscale(100%); opacity:.7; animation: marquee 28s linear infinite; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* About */
.about{ display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:start; }
.checks{ list-style:none; padding:0; margin:0 0 12px; }
.checks li{ padding-left:28px; position:relative; margin:8px 0; }
.checks li::before{ content:'✔'; position:absolute; left:0; top:0; color:#10b981; }

.stat{ background:#fff; border:1px dashed #d1d5db; border-radius:14px; padding:16px; margin:8px 0; }
.stat strong{ font-size:28px; display:block; }

/* FAQ */
.faq{ display:grid; gap:10px; }
details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
summary{ cursor:pointer; font-weight:700; }

/* Form */
.form__grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.form__grid label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.form__grid input, .form__grid textarea{ border:1px solid var(--line); border-radius:12px; padding:12px; outline:none; font: inherit; }
.form__grid .full{ grid-column:1/-1; }
.form__actions{ display:flex; align-items:center; gap:12px; margin-top:12px; }

/* Footer */
.site-footer{ background:#0b1220; color:#cdd5df; padding-top:28px; }
.fgrid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:16px; }
.logo--foot span:last-child{ color:#fff; }
.list{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px; }
.list a{ color:#cdd5df; }
.footbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid rgba(255,255,255,.1); padding:12px 0 20px; margin-top:18px; }
.socials{ display:flex; gap:12px; }
.socials a{ color:#93c5fd; }


.carousel {
  position: relative;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: 1rem;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.carousel__track::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0B9393;
  color: #fff;
  border: none;
  font-size: 2rem;
  padding: 0.3em 0.6em;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.carousel__btn.prev { left: 0.5rem; }
.carousel__btn.next { right: 0.5rem; }

.carousel .card {
  flex: 0 0 250px;
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.carousel .card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.8rem;
}


/* WhatsApp FAB */
.wa-fab{ position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%; background:linear-gradient(#25d366, #128c7e); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.wa-fab::after{ content:''; position:absolute; inset:14px; background:#fff; border-radius:6px 12px 12px 12px; transform: rotate(45deg); }

/* Responsive */
@media (max-width: 980px){
  .grid--cards{ grid-template-columns: repeat(2,1fr); }
  .about, .hero__grid{ grid-template-columns: 1fr; }
  .brands .brand-track img{ animation-duration: 22s; }
}
@media (max-width: 720px){
  .nav-links{ display:none; position:absolute; top:60px; right:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; flex-direction:column; min-width:220px; box-shadow:0 12px 24px rgba(0,0,0,.08); }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
  .grid--cards{ grid-template-columns: 1fr; }
  .form__grid{ grid-template-columns: 1fr; }
  .fgrid{ grid-template-columns: 1fr; }
}