:root {
  --primary: #3368A0;
  --primary-dark: #28547F;
  --teal: #66A3BF;
  --teal-dark: #4F8DAA;
  --mint: #C8DFDB;
  --beige: #F2EFE7;
  --white: #FFFFFF;
  --black: #1F2933;
  --text: #263746;
  --muted: #64748B;
  --border: #D6E0E5;
  --shadow: 0 12px 32px rgba(51, 104, 160, .10);
  --green: var(--primary);
  --green-dark: var(--primary-dark);
  --green-light: var(--teal);
  --grey: var(--muted);
  --cream: var(--beige);
  --cream-dark: #E7E1D5;
  --blue-grey: #8EA8BF;
  --teal-light: #9CCBD9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); }
p { margin-top: 0; }
.container { width: min(1180px, 92%); margin-inline: auto; }

/* ================= HEADER - SAME STYLE ON MANIXIL + RAMSUN ================= */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav,
.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--primary);
}
.brand > div:last-child,
.brand-text { display: flex; flex-direction: column; }
.brand strong,
.brand-text strong {
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: .14em;
  font-weight: 900;
}
.brand small,
.brand-text small {
  margin-top: 4px;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .24em;
  color: var(--muted);
}
/* ================= MANIXIL LOGO ================= */

.logo-slot,
.logo-placeholder {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    border-radius: 0;

    padding: 0;
    margin: 0;

    overflow: hidden;
}

.logo-slot img,
.logo-placeholder img {
    width: 72px;
    height: 72px;

    display: block;

    object-fit: contain;

    padding: 0;
    margin: 0;
}
.logo-placeholder span { font-size: 11px; }
nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  margin-left: auto;
}
nav a {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s ease, transform .2s ease;
}
nav a:hover { color: var(--teal-dark); }
.menu,
.menu-button {
  display: none;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 28px;
  cursor: pointer;
}

/* ================= GLOBAL SECTIONS ================= */
.section { padding: 90px 0; }
.section.light {
  background:
    linear-gradient(rgba(242,239,231,.88), rgba(242,239,231,.88)),
    url("chemistry-bg.png");
  background-size: cover;
  background-position: center;
}
.section.mint { background: var(--mint); }
.heading,
.section-heading {
  max-width: 850px;
  margin: 0 auto 45px;
  text-align: center;
}
.heading h2,
.section-heading h2 { margin: 0 0 14px; }
.eyebrow {
  margin: 0 0 12px;
  color: #666d74;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1,h2,h3,h4 { color: var(--primary); }
h1,h2,h3 { line-height: 1.15; }
h2 { font-size: clamp(32px, 4vw, 46px); letter-spacing: -.03em; }
.lead,
.hero-description { color: var(--muted); font-size: 18px; line-height: 1.8; }

/* ================= MANIXIL HERO ================= */
.hero {
  padding: 105px 0;
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    url("chemistry-bg.png");
  background-size: cover;
  background-position: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 75px;
  align-items: center;
}
.hero h1 {
  max-width: 850px;
  margin: 0 0 25px;
  color: var(--primary);
  font-size: clamp(44px, 6vw, 76px);
  letter-spacing: -.045em;
}
.buttons,
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  transition: .2s ease;
  cursor: pointer;
}
.btn.primary,
.btn:not(.ghost):not(.secondary):not(.btn-outline) { background: var(--primary); color: var(--white); }
.btn.primary:hover,
.btn:not(.ghost):not(.secondary):not(.btn-outline):hover { background: var(--teal-dark); color: var(--white); transform: translateY(-2px); }
.btn.ghost,
.btn.secondary,
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn.ghost:hover,
.btn.secondary:hover,
.btn-outline:hover { background: var(--primary); color: var(--white); }
.hero-panel,
.hero-card {
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
}
.hero-panel p,
.hero-list div {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.hero-panel p:last-child { border-bottom: 0; }
.hero-icon,
.hero-logo {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 28px;
  font-weight: 900;
}
.small-hero { padding: 75px 0; }

/* ================= MANIXIL TWO-COLUMN CONTENT ================= */
.two,
.two-column {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
  gap: 70px;
  align-items: start;
}
.two > div:first-child,
.two-column > div:first-child { position: relative; }
.two p,
.two-column p { color: var(--muted); }
.content p { color: var(--muted); }

/* ================= STATS ================= */
.stats,
.company-highlights {
  padding: 25px 0;
  background: var(--primary);
  color: white;
}
.stats-grid,
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stats-grid > div,
.highlight {
  padding: 15px 22px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.25);
}
.stats-grid > div:last-child,
.highlight:last-child { border-right: 0; }
.stats strong,
.highlight strong { display: block; color: white; font-size: 21px; }
.stats span,
.highlight span { display: block; color: rgba(255,255,255,.78); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* ================= PRODUCTS ================= */
.product-categories,
.ramsun-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}
.category-card,
.card,
.product-card,
.ramsun-product-card {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.category-card { text-decoration: none; }
.category-card:hover,
.card:hover,
.product-card:hover,
.ramsun-product-card:hover { transform: translateY(-4px); border-color: var(--teal); }
.category-card h3,
.ramsun-product-card h3 { margin: 0 0 8px; color: var(--primary); }
.category-card p,
.ramsun-product-card p { color: var(--muted); }
.category-icon { font-size: 34px; margin-bottom: 10px; }
.product-search { max-width: 650px; margin: 0 auto 25px; }
.product-search input {
  width: 100%; padding: 15px 20px; border: 1px solid var(--border); border-radius: 999px;
  background: white; font: inherit; outline: none;
}
.product-search input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(102,163,191,.15); }
.product-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:45px; }
.filter-button { padding:9px 17px; border:1px solid var(--blue-grey); border-radius:999px; background:white; color:var(--primary); font-weight:700; cursor:pointer; }
.filter-button:hover,.filter-button.active { background:var(--primary); color:white; border-color:var(--primary); }
.products-loading,.products-empty,.products-error { padding:45px; text-align:center; background:white; border:1px solid var(--border); border-radius:20px; }

/* ================= TABLE ================= */
.table-wrap,
.table-container { overflow-x:auto; background:white; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
table { width:100%; min-width:650px; border-collapse:collapse; }
thead { background:var(--primary); color:white; }
th,td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--border); }
th { font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
tbody tr:hover { background:var(--mint); }
tbody tr:last-child td { border-bottom:0; }

/* ================= R&D / VALUES / MISSION ================= */
.pill-grid,
.service-tags {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.pill-grid span,
.service-tags span {
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--cream);
  color:var(--primary);
  font-size:14px;
  font-weight:700;
}
.rd-grid,.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rd-grid div,.values-grid div { padding:25px; background:white; border:1px solid var(--border); border-radius:18px; }
.values-grid strong { color:var(--teal-dark); font-size:13px; }
.values-grid h3 { margin:8px 0; }
.values-grid p { color:var(--muted); }
.mission { margin-top:70px; display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.mission-list { display:grid; gap:12px; }
.mission-list div { padding:15px 18px; background:var(--cream); border:1px solid var(--border); border-radius:12px; }

/* ================= LOCATIONS ================= */
.locations {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
  width:100%;
}
.location-card {
  min-height:190px;
  padding:28px;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:20px;
}
.location-card h3 { margin:0 0 10px; color:var(--primary); }
.location-card p { color:var(--muted); }

/* ================= SISTER CONCERN ================= */
.ramsun-section,
.cta {
  padding:70px 0;
  background:var(--primary);
  color:white;
}
.ramsun-content,
.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
}
.ramsun-content h2,
.cta h2 { margin:0 0 10px; color:white; }
.ramsun-content p,
.cta p { color:rgba(255,255,255,.82); }
.lightbtn,
.btn.lightbtn { background:white; color:var(--primary); }
.lightbtn:hover,.btn.lightbtn:hover { background:var(--mint); color:var(--primary); }

/* ================= CONTACT ================= */
.contact-box,
.contact-card {
  padding:38px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.contact-box p,
.contact-card p { color:var(--muted); }
.contact-box a,
.contact-details a { font-weight:700; color:var(--primary); text-decoration:none; }
.contact-details { margin:22px 0; }
.business-info { padding:18px; margin-bottom:22px; background:var(--cream); border-radius:15px; }

/* ================= RAMSUN PAGE ================= */
.ramsun-hero {
  min-height:620px;
  display:flex;
  align-items:center;
  background:linear-gradient(135deg,var(--mint),var(--white));
}
.ramsun-hero-content { max-width:900px; }
.ramsun-hero h1 { margin:15px 0 25px; color:var(--primary); font-size:clamp(42px,7vw,78px); line-height:1.05; }
.ramsun-partnership { max-width:800px; margin:auto; text-align:center; }
.ramsun-partnership p:not(.eyebrow) { color:var(--muted); line-height:1.8; font-size:18px; }
.about-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:50px; align-items:center; }
.about-grid p { color:var(--muted); line-height:1.8; }
.about-highlight { display:grid; gap:15px; }
.about-highlight div { padding:25px; background:var(--mint); border-left:5px solid var(--teal); border-radius:10px; }
.about-highlight strong { display:block; color:var(--primary); font-size:25px; }
.about-highlight span { color:var(--muted); }

/* ================= FOOTER ================= */
footer { background:var(--primary-dark); color:white; }
.foot,
.footer-grid {
  min-height:125px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}
.foot strong,.footer-brand { letter-spacing:.12em; font-weight:900; }
.foot p,.footer-grid p { color:rgba(255,255,255,.75); }
footer a { color:var(--mint); }

/* ================= RESPONSIVE ================= */
@media (max-width: 950px) {
  .nav,.site-header { gap:18px; }
  nav { gap:16px; }
  .hero-grid,.two,.two-column,.mission,.about-grid { grid-template-columns:1fr; }
  .hero-grid { gap:40px; }
  .locations { grid-template-columns:1fr 1fr; }
  .product-categories,.ramsun-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rd-grid,.values-grid { grid-template-columns:1fr 1fr; }
  .contact-card { grid-template-columns:1fr; }
}

@media (max-width: 850px) {
  .nav,.site-header { min-height:78px; }
  .menu { display:block; }
  header nav {
    display:none;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    padding:20px 6%;
    background:white;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    border-bottom:1px solid var(--border);
    box-shadow:0 10px 20px rgba(0,0,0,.06);
  }
  header nav.open { display:flex; }
  .stats-grid,.highlights-grid { grid-template-columns:1fr 1fr; }
  .stats-grid > div:nth-child(2),.stats-grid > div:nth-child(4),
  .highlights-grid > div:nth-child(2),.highlights-grid > div:nth-child(4) { border-right:0; }
  .ramsun-content,.cta-inner,.foot,.footer-grid { flex-direction:column; align-items:flex-start; padding:30px 0; }
  .section { padding:65px 0; }
}

@media (max-width: 600px) {
  .container { width:min(92%, 560px); }
  .brand strong { font-size:15px; }
  .brand small { font-size:8px; }
  .logo-slot,.logo-placeholder { width:92px; height:52px; flex-basis:92px; }
  .hero { padding:65px 0; }
  .hero h1,.ramsun-hero h1 { font-size:42px; }
  .hero-buttons,.buttons { flex-direction:column; align-items:stretch; }
  .btn { width:100%; }
  .locations,.product-categories,.ramsun-products,.rd-grid,.values-grid,.stats-grid,.highlights-grid { grid-template-columns:1fr; }
  .stats-grid > div,.highlight { border-right:0; border-bottom:1px solid rgba(255,255,255,.2); }
  .stats-grid > div:last-child,.highlight:last-child { border-bottom:0; }
  .contact-box,.contact-card,.hero-panel,.hero-card { padding:25px; }
}