/* ========================
	 Tanjan Chemicals Theme
	 ======================== */
:root {
	--bg-deep: #0d1b2a;
	--bg-alt: #13293d;
	--grad-main: linear-gradient(135deg,#0d47a1 0%,#0088cc 45%,#00bcd4 70%,#8ceaff 100%);
	--grad-accent: linear-gradient(135deg,#ffb300 0%,#ffcb3e 60%,#ffe278 100%);
	--brand: #0088cc;
	--accent: #ffb300;
	--accent-alt: #00bcd4;
	--text: #e6edf3;
	--text-soft: #b9c7d6;
	--danger: #e53935;
	--radius-sm: 6px;
	--radius: 12px;
	--shadow: 0 4px 20px rgba(0,0,0,0.35);
	--transition: 0.25s cubic-bezier(.4,.0,.2,1);
	font-size: 16px;
}

* { box-sizing: border-box; }
body { margin:0; font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg-deep); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-alt); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width:100%; display:block; }
h1,h2,h3,h4 { font-weight:600; line-height:1.2; }
p { line-height:1.55; }

/* Header */
.site-header, .sub-header { position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:0.9rem 2rem; background:rgba(13,27,42,.85); backdrop-filter: blur(10px); z-index:1000; border-bottom:1px solid rgba(255,255,255,0.08);} 
.logo { font-size:1.25rem; font-weight:700; letter-spacing:.5px; }
.logo span { background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.main-nav a { margin:0 .9rem; padding:.45rem .9rem; border-radius: var(--radius-sm); font-weight:500; position:relative; font-size:.95rem; color: var(--text-soft); transition: var(--transition); }
.main-nav a:hover, .main-nav a.active { color: #fff; background: rgba(255,255,255,0.08); }
body { padding-top:70px; }

/* Hero */
.video-hero { position:relative; min-height:72vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-video { position:absolute; width:100%; height:100%; object-fit:cover; top:0; left:0; filter:brightness(.55) saturate(1.2); }
.hero-overlay { position:absolute; inset:0; background: radial-gradient(circle at 30% 40%, rgba(0,188,212,0.35), rgba(13,27,42,0.85)); mix-blend-mode:overlay; }
.hero-content { position:relative; max-width:850px; text-align:center; padding:2rem 1.5rem; }
.hero-content h1 { font-size:clamp(2rem,5vw,3.2rem); margin:0 0 1rem; }
.hero-content p { font-size:1.1rem; color: var(--text-soft); margin:0 0 1.5rem; }
.cert-badge { display:inline-block; margin-top:1rem; padding:.5rem .9rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); font-size:.75rem; letter-spacing:1px; border-radius:40px; text-transform:uppercase; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* Buttons */
.btn { --btn-bg: var(--brand); --btn-color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.4em; font-weight:600; letter-spacing:.5px; padding:.85rem 1.4rem; border-radius:40px; background: var(--btn-bg); color: var(--btn-color); border: none; cursor:pointer; position:relative; overflow:hidden; text-decoration:none; font-size:.95rem; box-shadow:0 4px 18px -4px rgba(0,188,212,0.55); transition: var(--transition); }
.btn.primary { --btn-bg: var(--grad-main); }
.btn.outline { background: transparent; border:1.5px solid var(--accent-alt); color: var(--accent-alt); box-shadow:none; }
.btn.small { padding:.55rem 1.1rem; font-size:.8rem; }
.btn.wide { width:100%; }
.btn:hover { transform:translateY(-3px); box-shadow:0 6px 28px -6px rgba(0,188,212,0.7); }
.btn.outline:hover { background: var(--accent-alt); color:#04202f; }

/* Stats */
.quick-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1.2rem; margin:3rem auto 2.5rem; max-width:1000px; padding:0 1.5rem; }
.stat { background: linear-gradient(145deg,#13293d,#0d1b2a); border:1px solid rgba(255,255,255,0.08); padding:1rem .9rem 1.1rem; border-radius: var(--radius); text-align:center; position:relative; overflow:hidden; }
.stat:before { content:''; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(0,188,212,0.25), transparent 60%); opacity:.7; }
.stat .num { font-size:1.6rem; font-weight:700; display:block; background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .label { font-size:.75rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-soft); }

/* Feature Grid */
.feature-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); max-width:1100px; margin:0 auto 3.2rem; padding:0 1.5rem; }
.feature { background: linear-gradient(160deg,#13293d 0%,#0d1b2a 90%); padding:1.3rem 1.1rem 1.4rem; border-radius: var(--radius); border:1px solid rgba(255,255,255,0.07); position:relative; overflow:hidden; }
.feature:after { content:''; position:absolute; width:140%; height:140%; top:-70%; left:-50%; background:radial-gradient(circle at 70% 70%, rgba(255,179,0,0.16), transparent 60%); transform:rotate(25deg); }
.feature h3 { margin:.2rem 0 .7rem; font-size:1.05rem; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.feature p { font-size:.9rem; color: var(--text-soft); margin:0; }

/* Gallery */
.gallery { max-width:1100px; margin:0 auto 3.5rem; padding:0 1.5rem; }
.gallery h2 { text-align:center; margin:0 0 1.6rem; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.image-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.image-grid figure { margin:0; position:relative; background:#13293d; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.06); }
.image-grid img { width:100%; height:180px; object-fit:cover; filter: saturate(1.1); transition: var(--transition); }
.image-grid figure:hover img { transform:scale(1.05); filter: saturate(1.25) brightness(1.1); }
.image-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:.5rem .7rem; font-size:.75rem; letter-spacing:.5px; background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0)); color:#fff; }

/* Testimonials */
.home-testimonials { max-width:1100px; margin:0 auto 4rem; padding:0 1.5rem; }
.home-testimonials h2 { text-align:center; margin:0 0 1.8rem; }
.testimonial-row { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
blockquote { margin:0; padding:1.1rem 1rem 1.1rem; background: linear-gradient(140deg,#13293d,#0d1b2a); border-radius: var(--radius); position:relative; font-size:.9rem; color: var(--text-soft); border:1px solid rgba(255,255,255,0.07); }
blockquote:before { content:'“'; position:absolute; font-size:3rem; left:.35rem; top:.2rem; line-height:1; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.35; }
blockquote cite { display:block; margin-top:.9rem; font-style:normal; font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--accent-alt); }
.center-link { text-align:center; margin-top:1.6rem; }

/* Layout wrappers */
.content-wrap { position:relative; }
.narrow { max-width:880px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.wide { max-width:1200px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.two-col { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:2.2rem 0 2.5rem; }
.lead { font-size:1.15rem; color: var(--text-soft); margin:0 0 1.2rem; }
.check-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.check-list li { position:relative; padding-left:1.4rem; font-size:.92rem; }
.check-list li:before { content:'✔'; position:absolute; left:0; top:0; color: var(--accent); }

/* Product Grid */
.product-grid { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:2rem 0 2.5rem; }
.product-card { background: linear-gradient(165deg,#13293d,#0d1b2a 85%); border:1px solid rgba(255,255,255,0.08); padding:1rem .9rem 1.2rem; border-radius: var(--radius); position:relative; overflow:hidden; }
.product-card.highlight { background: linear-gradient(135deg,#ffb300,#ffca55,#ffd677); color:#10212f; box-shadow:0 4px 22px -6px rgba(255,179,0,0.55); }
.product-card h3 { margin:.35rem 0 .75rem; font-size:1rem; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.product-card.highlight h3 { background:none; color:#10212f; }
.product-card ul { margin:0; padding:0 0 0 1.1rem; font-size:.85rem; display:grid; gap:.35rem; }
.product-card p { font-size:.8rem; margin:.4rem 0 0; }

/* Contact Layout */
.contact-layout { display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); max-width:1200px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.card { background: linear-gradient(155deg,#13293d,#0d1b2a 90%); border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding:1.4rem 1.3rem 1.8rem; position:relative; overflow:hidden; }
.card:after { content:''; position:absolute; width:170%; height:170%; top:-70%; left:-50%; background:radial-gradient(circle at 70% 70%, rgba(0,188,212,0.15), transparent 60%); pointer-events:none; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:.75rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:.35rem; color: var(--text-soft); }
.form-group input, .form-group textarea { width:100%; background:#0f2232; border:1px solid rgba(255,255,255,0.12); padding:.7rem .75rem; border-radius: var(--radius-sm); color: var(--text); font-size:.9rem; font-family:inherit; resize:vertical; }
.form-group input:focus, .form-group textarea:focus { outline:none; border-color: var(--accent-alt); box-shadow:0 0 0 3px rgba(0,188,212,0.25); }
.error { color: var(--danger); font-size:.7rem; letter-spacing:.5px; margin-top:.25rem; display:block; min-height:1em; }
.form-success { margin-top:1rem; background: rgba(0,188,212,0.15); border:1px solid var(--accent-alt); padding:.8rem 1rem; border-radius: var(--radius-sm); font-size:.85rem; }
.contact-info h2, .contact-map h2 { font-size:1rem; letter-spacing:1px; text-transform:uppercase; margin:0 0 1rem; }
.contact-info p { font-size:.85rem; margin:.5rem 0; }
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#0f2232; color: var(--accent-alt); margin-right:.6rem; font-size:.85rem; border:1px solid rgba(255,255,255,0.12); transition: var(--transition); }
.social-icon:hover { background: var(--accent-alt); color:#04202f; }

/* Testimonials Page */
.testimonial-cards { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:2rem 0 2.5rem; }
.t-card { background: linear-gradient(155deg,#13293d,#0d1b2a 85%); border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding:1rem 1rem 1.2rem; position:relative; overflow:hidden; font-size:.85rem; line-height:1.45; }
.t-card:before { content:'“'; position:absolute; font-size:3rem; left:.4rem; top:.1rem; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.3; }
.t-card .quote { margin:.2rem 0 .8rem; color: var(--text-soft); }
.t-card .who { font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color: var(--accent-alt); }

/* Footer */
.site-footer { background:#09121c; padding:2.5rem 1.5rem 1.5rem; border-top:1px solid rgba(255,255,255,0.08); }
.site-footer.simple { padding:1.5rem 1.2rem; text-align:center; }
.footer-cols { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); max-width:1100px; margin:0 auto 1.5rem; }
.footer-cols h4 { margin:0 0 .9rem; font-size:.85rem; letter-spacing:1px; text-transform:uppercase; color: var(--accent-alt); }
.footer-cols p, .footer-cols li { font-size:.75rem; color: var(--text-soft); line-height:1.45; }
.footer-cols ul { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.footer-cols a { color: var(--text-soft); }
.footer-cols a:hover { color:#fff; }
footer .copyright { text-align:center; font-size:.7rem; letter-spacing:1px; color: var(--text-soft); }

/* Utilities */
.center { text-align:center; }

/* Responsive Tweaks */
@media (max-width:760px) {
	.hero-content h1 { font-size:clamp(1.9rem,7vw,2.4rem); }
	.main-nav a { margin:0 .3rem; padding:.45rem .6rem; }
	body { padding-top:66px; }
	.quick-stats { margin:2.2rem auto 1.8rem; }
	.feature-grid { margin-bottom:2.5rem; }
	.gallery { margin-bottom:2.8rem; }
}

/* Client Marquee Styles */

/* Stable Client Ribbon Styles */
.client-ribbon {
	background: var(--bg-alt);
	padding: 24px 0 18px 0;
	margin-bottom: 24px;
	border-top: 1px solid rgba(255,255,255,0.08);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ribbon-title {
	color: var(--accent);
	font-size: 1.15rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 12px;
	letter-spacing: 1px;
}
.ribbon-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
}
.client-logo {
	background: var(--grad-main);
	border-radius: var(--radius);
	padding: 10px 18px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
	display: flex;
	align-items: center;
	min-width: 90px;
	min-height: 64px;
}
.client-logo img {
	height: 48px;
	width: auto;
	object-fit: contain;
	filter: grayscale(0.2) brightness(0.95);
	transition: filter 0.3s;
}
.client-logo img:hover {
	filter: none;
}