:root{
  --navy:#061829;
  --navy2:#0B1B2A;
  --teal:#0F8F8A;
  --teal2:#17b3ad;
  --steel:#5B6770;
  --light:#f4f6f7;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--navy2);
  background:#fff;
}
a{text-decoration:none;color:inherit}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:270px 1fr auto;
  align-items:center;
  gap:24px;
  padding:22px 32px;
  background:rgba(4,20,34,.96);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}
.brand{display:flex;flex-direction:column}
.brand-word{
  font-size:31px;
  line-height:1;
  letter-spacing:1px;
  font-weight:700;
  color:#fff;
}
.brand-a{display:inline-block;width:.78em;height:.95em;margin:0 .08em;background:var(--teal2);font-size:0;vertical-align:-.05em;clip-path:polygon(39% 0,61% 0,100% 100%,76% 100%,50% 38%,24% 100%,0 100%)}
.brand-tagline{
  margin-top:8px;
  font-size:8px;
  letter-spacing:1.2px;
  font-weight:600;
}
.main-nav{
  display:flex;
  justify-content:center;
  gap:28px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.main-nav a{padding:11px 0;position:relative}
.main-nav a.active:after,.main-nav a:hover:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;background:var(--teal2);
}
.header-actions{display:flex;align-items:center;gap:24px;font-size:12px;font-weight:600}
.outline-btn{border:1px solid var(--teal2);padding:13px 25px}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:26px}

.hero{
  min-height:520px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:42% 58%;
  background:linear-gradient(115deg,#061829 0%,#061829 42%,#082538 100%);
  color:white;
}
.hero-copy{
  z-index:2;
  padding:58px 48px 26px 70px;
}
.hero h1{
  margin:0;
  font-size:55px;
  line-height:1.05;
  letter-spacing:-1px;
  font-weight:700;
}
.hero h1 span{color:var(--teal2)}
.teal-rule{width:50px;height:3px;background:var(--teal2);margin:24px 0 20px}
.hero p{max-width:540px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.92)}
.hero-actions{display:flex;gap:46px;margin-top:27px}
.primary-btn,.secondary-btn{
  min-width:213px;
  padding:16px 26px;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.primary-btn{background:linear-gradient(90deg,var(--teal),#12aaa5)}
.secondary-btn{border:1px solid var(--teal2)}
.hero-visual{
  background:
    linear-gradient(90deg,#061829 0%,rgba(6,24,41,.15) 30%,rgba(6,24,41,0) 65%),
    url('https://famchem.com/assets/molecular-hero.jpg') center/cover no-repeat;
  filter:saturate(1.05) contrast(1.07);
}

.products-grid{
  margin-top:-1px;
  padding:0 28px 10px;
  background:#071b2c;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.product-card{
  min-height:274px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  border-radius:4px;
  background-position:center;
  background-size:cover;
  color:white;
}
.product-card .card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.72))}
.product-card .card-content{position:relative;z-index:2;padding:34px 30px}
.product-card h2{font-size:26px;margin:10px 0 10px}
.product-card p{font-size:13px;line-height:1.65;max-width:270px}
.product-card span{display:block;margin-top:24px;color:#4ae1dc;font-size:13px;font-weight:700}
.card-icon{font-size:33px}
.filler{background-image:url('https://famchem.com/assets/filler.jpg');}
.black{background-image:url('https://famchem.com/assets/black.jpg');filter:grayscale(1) contrast(1.15)}
.black .card-content{filter:grayscale(0)}
.white{
  background-image:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),url('https://famchem.com/assets/white.jpg');
  color:var(--navy2);
}
.white .card-overlay{background:none}
.white span{color:#087c83}
.additives{background-image:linear-gradient(rgba(0,110,105,.2),rgba(0,80,78,.45)),url('https://famchem.com/assets/additives.jpg')}

.services{
  background:#fff;
  display:grid;
  grid-template-columns:1.35fr repeat(5,1fr);
  padding:28px 60px 32px;
  border-top:1px solid #dfe4e7;
}
.services-intro{padding-right:30px}
.services small,.content-section small,.contact-section small{
  color:var(--teal);font-size:11px;font-weight:700;letter-spacing:.4px
}
.services h2{font-size:22px;line-height:1.15;margin:8px 0 12px}
.services p{font-size:12px;line-height:1.65}
.services-intro>a{
  display:inline-flex;background:linear-gradient(90deg,var(--navy2),var(--teal));color:#fff;
  padding:11px 16px;margin-top:7px;font-size:9px;font-weight:700
}
.services article{
  border-left:1px solid #d8dde0;
  padding:0 24px;
}
.service-icon{font-size:40px;color:#087c83;text-align:center;min-height:58px}
.services article h3{font-size:12px;text-align:center;margin:8px 0}
.services article p{font-size:11px;line-height:1.6}

.content-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding:75px 8%;
  align-items:center;
}
.content-section h2,.contact-section h2{font-size:34px;line-height:1.25;margin:10px 0}
.content-section p{font-size:15px;line-height:1.85;max-width:650px}
.content-section.dark{background:var(--navy2);color:white}
.content-section.light{background:#f7f9fa}
.knowledge-links{display:grid;gap:12px}
.knowledge-links a{
  border:1px solid #d6dde1;background:white;padding:18px 22px;
  display:flex;justify-content:space-between;font-weight:600;font-size:13px
}
.contact-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  padding:72px 8%;
  background:white;
}
.contact-card{display:grid;align-content:center;gap:14px;font-size:17px}
.contact-card a{color:var(--teal);font-weight:600}
footer{
  background:#061829;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 4%;
  font-size:11px;
}
.footer-brand .brand-word{font-size:27px}

@media(max-width:1180px){
  .site-header{grid-template-columns:220px 1fr auto;padding:18px 22px}
  .main-nav{gap:16px;font-size:10px}
  .header-actions .lang{display:none}
  .services{grid-template-columns:repeat(3,1fr)}
  .services-intro{grid-column:1/-1;margin-bottom:30px}
  .services article{min-height:190px}
}
@media(max-width:860px){
  .site-header{grid-template-columns:1fr auto}
  .header-actions{display:none}
  .nav-toggle{display:block}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:#061829;
    flex-direction:column;padding:20px 28px;gap:6px
  }
  .main-nav.open{display:flex}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:48px 28px 36px}
  .hero h1{font-size:44px}
  .hero-visual{height:320px;order:-1}
  .products-grid{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:1fr 1fr;padding:30px 26px}
  .services article{border-left:0;border-top:1px solid #d8dde0;padding:24px 10px}
  .content-section,.contact-section{grid-template-columns:1fr;gap:25px;padding:55px 8%}
}
@media(max-width:560px){
  .brand-word{font-size:25px}
  .brand-tagline{font-size:6px}
  .hero h1{font-size:36px}
  .hero-actions{flex-direction:column;gap:12px}
  .primary-btn,.secondary-btn{min-width:0}
  .products-grid{grid-template-columns:1fr;padding:10px 14px}
  .services{grid-template-columns:1fr}
  footer{flex-direction:column;gap:12px;text-align:center}
}

.inner-hero{min-height:390px;display:grid;grid-template-columns:1.05fr .95fr;background:#061829;color:#fff;overflow:hidden}
.inner-hero-copy{padding:78px 7%}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.4px;color:#18b4ae;text-transform:uppercase}
.inner-hero h1{font-size:48px;line-height:1.08;margin:12px 0 18px}.inner-hero p{max-width:670px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.85)}
.inner-hero-visual{background:url('https://famchem.com/assets/molecular-hero.jpg') center/cover no-repeat;position:relative}.inner-hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061829 0%,rgba(6,24,41,.18) 38%,rgba(6,24,41,.04) 100%)}
.section-shell{padding:72px 7%}.section-shell.alt{background:#f6f8f9}.section-title{max-width:760px;margin-bottom:35px}
.section-title h2{font-size:34px;line-height:1.25;margin:8px 0 14px}.section-title p{line-height:1.8;color:#55616b}
.product-overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-tile{min-height:360px;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;position:relative;overflow:hidden;background-size:cover;background-position:center}
.product-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.82))}
.product-tile>*{position:relative;z-index:2}.product-tile h3{font-size:27px;margin:8px 0}.product-tile p{font-size:13px;line-height:1.7}.product-tile span{margin-top:18px;color:#46ddd6;font-size:12px;font-weight:700}
.product-tile.filler-tile{background-image:url('https://famchem.com/assets/filler.jpg')}.product-tile.black-tile{background-image:url('https://famchem.com/assets/black.jpg');filter:grayscale(1)}
.product-tile.white-tile{background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.88)),url('https://famchem.com/assets/white.jpg');color:#0B1B2A}.product-tile.white-tile:before{background:none}.product-tile.additives-tile{background-image:url('https://famchem.com/assets/additives.jpg')}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.service-box{border:1px solid #d9e0e4;padding:26px;background:#fff}
.service-box h3{font-size:15px;margin:12px 0}.service-box p{font-size:13px;line-height:1.7;color:#5d6871}
.product-detail-intro{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}.product-detail-intro h2{font-size:36px;margin:0 0 18px}.product-detail-intro p{line-height:1.85;color:#56616a}
.benefit-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.benefit{border-top:2px solid #0F8F8A;padding:16px 0;font-weight:600;font-size:13px}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.app-card{min-height:210px;padding:24px;color:#fff;background:linear-gradient(145deg,#0c2939,#0f8f8a);display:flex;align-items:flex-end;font-size:17px;font-weight:700}
.app-card:nth-child(2n){background:linear-gradient(145deg,#111b25,#263d4d)}
.tech-table{width:100%;border-collapse:collapse;background:#fff}.tech-table th,.tech-table td{border-bottom:1px solid #dce2e5;padding:16px;text-align:left;font-size:13px}.tech-table th{background:#0B1B2A;color:#fff}
.cta-band{padding:58px 7%;background:linear-gradient(90deg,#071a2a,#0f8f8a);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px}.cta-band h2{font-size:31px;margin:0 0 8px}.cta-band p{margin:0;opacity:.85}.cta-band a{border:1px solid #fff;padding:15px 24px;font-size:12px;font-weight:700;white-space:nowrap}
.kb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.kb-card{border:1px solid #d9e0e4;padding:30px;background:#fff}.kb-card h3{margin:8px 0 10px}.kb-card p{line-height:1.7;color:#5b6670;font-size:13px}.kb-card a{color:#0F8F8A;font-weight:700;font-size:12px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.contact-panel{padding:34px;background:#f6f8f9}.contact-panel a{display:block;color:#0F8F8A;font-weight:700;margin:12px 0}
.contact-form{display:grid;gap:14px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:14px;border:1px solid #ccd5da;font:inherit}.contact-form textarea{min-height:145px}.contact-form button{background:#0F8F8A;color:#fff;border:0;padding:15px;font-weight:700;cursor:pointer}
@media(max-width:980px){.product-overview-grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr 1fr}.app-grid{grid-template-columns:1fr 1fr}.inner-hero{grid-template-columns:1fr}.inner-hero-visual{min-height:260px;order:-1}.product-detail-intro,.contact-grid{grid-template-columns:1fr}}
@media(max-width:580px){.product-overview-grid,.service-grid,.app-grid,.kb-grid,.benefit-list{grid-template-columns:1fr}.inner-hero h1{font-size:36px}.cta-band{flex-direction:column;align-items:flex-start}}