/*
Theme Name: AQI Purifier
Author: RoboArt Private Limited
Description: Custom theme for aqipurifier.com. Content lives in inc/data.php and inc/products.php.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: aqipurifier
*/

/* ------------------------------------------------------------ Tokens */
:root {
	/* Colours taken from the logo: navy #1e4c90, sky #2392bd, lime #8cc63f. */
	--ink: #0d1b2e;
	--ink-2: #45546b;
	--muted: #6b7a90;
	--line: #e2e9f1;
	--bg: #ffffff;
	--tint-50: #f4f9f2;
	--tint-100: #eaf4e1;
	--tint-200: #d6ebc3;
	--sky-100: #e5f0f9;
	--brand: #1d5495;
	--brand-600: #174579;
	--brand-800: #0f2f5c;
	--accent: #4d8a1c;
	--lime: #b6e070;
	--grad: linear-gradient(110deg, #1e4c90 0%, #2392bd 55%, #8cc63f 100%);
	--grad-soft: linear-gradient(135deg, #1e4c90, #2392bd 60%, #6fae35);
	--foot: #0b1a30;
	--radius: 22px;
	--radius-sm: 14px;
	--shadow: 0 1px 2px rgba(13, 27, 46, .04), 0 8px 24px rgba(13, 27, 46, .06);
	--shadow-lg: 0 2px 4px rgba(13, 27, 46, .04), 0 24px 48px rgba(13, 27, 46, .10);
	--wrap: 1200px;
	--head-h: 64px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.65 var(--font);
	-webkit-font-smoothing: antialiased;
	padding-bottom: 76px; /* room for the phone WhatsApp bar */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(2.3rem, 8vw, 4.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 5vw, 2.75rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; border-radius: 8px; }
.icon { width: 22px; height: 22px; flex: none; }

/* ------------------------------------------------------------ TO CONFIRM label (slim) */
.tbd {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	max-width: 100%;
	padding: 1px 8px;
	border: 1px solid #e9cf6b;
	border-radius: 6px;
	background: #fff8d9;
	color: #6b5200;
	font-size: .72rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	vertical-align: middle;
	white-space: normal;
}
.tbd b { font-weight: 700; text-transform: uppercase; font-size: .62rem; letter-spacing: .06em; white-space: nowrap; }

/* ------------------------------------------------------------ Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1.5px solid var(--brand);
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font: 600 .98rem/1.2 var(--font);
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(29, 84, 149, .25); }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--tint-100); color: var(--brand-600); box-shadow: none; }
.btn-wa { background: var(--grad); border-color: transparent; }
.btn-wa:hover { background: var(--grad); border-color: transparent; filter: brightness(1.06); }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }
.btn-sm { padding: 8px 14px; font-size: .9rem; }
.btn .icon { width: 20px; height: 20px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--brand); }
.link-arrow .icon { width: 18px; height: 18px; transition: transform .2s; }
.link-arrow:hover .icon, .guide:hover .link-arrow .icon { transform: translateX(4px); }

/* ------------------------------------------------------------ Header (sticky) */
.site-head {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid rgba(226, 233, 241, .8);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--head-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo img { height: 42px; width: auto; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; }
.logo-mark .icon { width: 20px; height: 20px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) { padding: 8px 10px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav a:not(.btn):hover { background: var(--tint-100); color: var(--ink); }
.head-wa { display: none; margin-left: 8px; }


/* ------------------------------------------------------------ Hero */
.hero {
	position: relative;
	padding: 28px 0 40px;
	background: linear-gradient(120deg, #1e4c90 0%, #2392bd 55%, #8cc63f 115%);
	color: #fff;
	overflow: hidden;
}
.hero-grid { display: grid; gap: 28px; align-items: center; }
.hero h1 { margin-bottom: .35em; color: #fff; }
.hero .btn { background: #fff; color: var(--brand); border-color: #fff; }
.hero .btn:hover { background: #f2f7fc; color: var(--brand-600); box-shadow: 0 10px 24px rgba(8, 30, 60, .25); }
.hero .btn-wa { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .7); }
.hero .btn-wa:hover { background: rgba(255, 255, 255, .24); color: #fff; filter: none; }
.hero .tbd { background: #fff8d9; }
.hero-sub { font-size: clamp(1.08rem, 2.6vw, 1.3rem); color: rgba(255, 255, 255, .88); max-width: 34ch; margin-bottom: 28px; }
.hero-media { position: relative; }
.hero-media img, .hero-media .ph {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: 0 30px 60px rgba(8, 30, 60, .35);
}
.hero-specs {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.hero-specs li {
	display: flex;
	flex-direction: column;
	padding: 14px 16px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--radius-sm);
}
.hero-specs strong { font-size: 1.25rem; letter-spacing: -.02em; color: #fff; }
.hero-specs span { font-size: .85rem; color: rgba(255, 255, 255, .75); }

/* ------------------------------------------------------------ Page header (non-home) */
.page-head { padding: 56px 0 8px; }
.page-head h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); max-width: 18ch; }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--ink-2); max-width: 62ch; }

/* ------------------------------------------------------------ Sections */
.sec { padding: 44px 0; }
.sec-tight { padding: 8px 0 24px; }
.sec-tint { background: var(--tint-50); }
.sec-head { max-width: 720px; margin-bottom: 28px; }
.sec-head h2 { margin-bottom: .3em; }
.sec-sub { color: var(--ink-2); font-size: 1.08rem; margin: 0; }
.eyebrow { display: inline-block; margin: 0 0 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.sec-link { margin: 24px 0 0; }

.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.prose p { color: var(--ink-2); font-size: 1.06rem; }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--tint-50); border-radius: var(--radius-sm); color: var(--ink-2); }
.checks .icon { color: var(--brand); margin-top: 2px; }

/* Feature (icon) cards */
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.feature {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--tint-200); }
.feature strong { font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.3; margin-top: 10px; }
.feature > span:last-child { font-size: .88rem; color: var(--muted); }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--sky-100), var(--tint-100)); color: var(--brand); }

/* Product cards */
.cards { display: grid; gap: 18px; }
.pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .3s, box-shadow .3s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pcard-media { display: block; background: var(--tint-50); overflow: hidden; }
.pcard-media img, .pcard-media .ph { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; transition: transform .5s; border-radius: 0; border: 0; }
.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard h3 { margin: 0; font-size: 1.2rem; }
.pcard h3 a { color: var(--ink); text-decoration: none; }
.pcard-short { color: var(--ink-2); font-size: .95rem; margin: 0; }
.pcard-btns { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
.pcard-btns .btn { flex: 1; padding: 11px 16px; }
.price { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.price-lg { font-size: clamp(1.8rem, 5vw, 2.4rem); }

/* Colour swatches */
.swatches { display: inline-flex; gap: 6px; flex: none; }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c3cfdc; transition: box-shadow .2s; vertical-align: middle; }
.swatch[aria-current], .swatch:hover { box-shadow: 0 0 0 2px var(--brand); }
.swatch-white { background: #f1efe7; }
.swatch-black { background: #1d201f; }

/* Comparison table */
.compare { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--tint-50); font-size: .95rem; }
.compare thead a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.compare tbody th { font-weight: 600; color: var(--muted); width: 26%; font-size: .92rem; }
.compare thead th:first-child { width: 26%; }
.compare td, .compare thead th { font-size: .9rem; overflow-wrap: anywhere; }
.compare .tbd { display: inline-block; }

/* Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.step { position: relative; padding: 22px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; }
.step h3 { margin-bottom: .35em; }
.step p { margin: 0; color: var(--ink-2); font-size: .96rem; }

/* Guide cards */
.guides { display: grid; gap: 14px; }
.guide {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: var(--radius);
	background: linear-gradient(160deg, var(--tint-50), #fff 60%);
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	transition: transform .25s, box-shadow .25s;
}
.guide:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.guide h3 { font-size: 1.25rem; }
.guide p { color: var(--ink-2); font-size: .95rem; }
.guide .link-arrow { margin-top: auto; }

/* Delivery & service */
.delivery { padding: 28px 20px; background: var(--grad-soft); color: #e6eef8; border-radius: 28px; }
.delivery h2 { color: #fff; }
.dgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dgrid li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: rgba(255, 255, 255, .07); border-radius: var(--radius-sm); }
.dgrid .icon { color: var(--lime); margin-top: 2px; }
.dgrid b { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .62); }
.delivery .tbd { background: #fff3c2; }
.dgrid .tbd b { display: inline; color: #6b5200; font-size: .62rem; letter-spacing: .06em; }
.stock-tbd { margin: 10px 0 0; }

.cta { padding: 32px 22px; border-radius: 28px; background: var(--tint-100); }

/* ------------------------------------------------------------ Placeholder image */
.ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	aspect-ratio: 4 / 5;
	text-align: center;
	background: linear-gradient(160deg, #f5f8fb, #e9eef4);
	border-radius: var(--radius);
	color: #a3b0c0;
}
.ph-icon { width: 40px; height: 40px; }

/* ------------------------------------------------------------ Product page */
.product-top { padding-top: 20px; }
.product { display: grid; gap: 28px; }
.gallery { display: grid; gap: 12px; }
.gallery img, .gallery .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; background: var(--tint-50); }
.buy h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
.buy-colour { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.buy-colour b { color: var(--ink); }
.stock { display: inline-block; margin: 10px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--tint-100); color: var(--brand-600); font-weight: 600; font-size: .88rem; }
.buy-short { margin: 16px 0 24px; font-size: 1.08rem; color: var(--ink-2); }
.buy-notes { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-2); font-size: .93rem; }
.buy-notes li { display: inline-flex; align-items: center; gap: 8px; }
.buy-notes .icon { color: var(--brand); width: 20px; height: 20px; }
.detail-grid { display: grid; gap: 36px; }
.detail-grid h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.specs { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.specs th, .specs td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .95rem; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 42%; font-weight: 600; color: var(--muted); }

/* ------------------------------------------------------------ Order */
.order-grid { display: grid; gap: 20px; align-items: start; }
.order-card { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.order-form { display: grid; gap: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .92rem; }
.order-form input, .order-form select, .order-form textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid #d2dce7;
	border-radius: 12px;
	background: #fff;
	font: inherit;
	color: var(--ink);
	transition: border-color .2s, box-shadow .2s;
}
.order-form input:focus, .order-form select:focus, .order-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(29, 84, 149, .12); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-foot span { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: .93rem; }
.form-foot .icon { color: var(--brand); }
.order-side { padding: 24px; border-radius: var(--radius); background: var(--tint-50); border: 1px solid var(--line); }
.order-side h2 { font-size: 1.4rem; margin-top: 14px; }
.order-side p { color: var(--ink-2); }
.hp { position: absolute; left: -9999px; }
.notice { padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.notice.ok { background: var(--tint-100); color: var(--brand-800); }
.notice.err { background: #fdecec; color: #7a1c1c; }

/* ------------------------------------------------------------ Footer */
.site-foot { margin-top: 40px; padding: 48px 0 20px; background: var(--foot); color: #c5d0de; font-size: .95rem; }
.site-foot a { color: #eef3f9; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.foot-brand { grid-column: 1 / -1; }
.logo-light { color: #fff; margin-bottom: 12px; }
.logo-light:hover { color: #fff; text-decoration: none !important; }
.logo-chip { display: inline-block; margin-bottom: 14px; padding: 8px 14px; background: #fff; border-radius: 14px; }
.logo-chip img { height: 44px; width: auto; }
.social { display: flex; gap: 16px; }
.foot-h { margin-bottom: 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #8a9bb3; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 8px; }
.copy { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; color: #8a9bb3; }

/* ------------------------------------------------------------ Phone WhatsApp bar */
.mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
}
.mobile-bar .btn { width: 100%; padding: 14px; font-size: 1.02rem; }

/* ------------------------------------------------------------ Motion */
/* Scroll reveal (assets/js/site.js adds .in when an element scrolls into view) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .feature.reveal, .js .step.reveal { transform: translateY(28px) scale(.94); }
.js .guide.reveal { transform: translateY(36px) rotate(-1deg); }
.js .reveal.in.feature, .js .reveal.in.step, .js .reveal.in.guide { transform: none; }

/* Scroll progress bar + header */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
.site-head { transition: box-shadow .3s, background .3s; }
.site-head.scrolled { background: rgba(255, 255, 255, .95); box-shadow: 0 6px 24px rgba(13, 27, 46, .08); }

/* Hero: slowly drifting gradient and flowing air lines */
.hero { background-size: 180% 180%; animation: grad-shift 16s ease-in-out infinite alternate; }
.hero-grid, .hero > .wrap { position: relative; z-index: 1; }
.hero-air { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-air path { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 18; vector-effect: non-scaling-stroke; animation: air-flow 12s linear infinite; }
.hero-air path:nth-child(2) { stroke: rgba(255, 255, 255, .16); animation-duration: 16s; }
.hero-air path:nth-child(3) { stroke: rgba(255, 255, 255, .2); animation-duration: 20s; }
.hero-air path:nth-child(4) { stroke: rgba(255, 255, 255, .12); animation-duration: 24s; }
@keyframes grad-shift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
@keyframes air-flow { to { stroke-dashoffset: -400; } }

/* Headline words rise in one after another */
.in .split .w { display: inline-block; animation: word-in .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(.5em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-specs li { transition: transform .3s, background .3s; }
.hero-specs li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .2); }

/* Scrolling fact strip */
.ticker { overflow: hidden; padding: 16px 0; background: var(--brand-800); color: #fff; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker ul { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker li { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.ticker li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Buttons: light sweep on hover; WhatsApp gradient gently moves */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.btn:hover::after { transform: translateX(120%); }
.btn-wa { background-size: 200% 100%; animation: grad-shift 6s ease-in-out infinite alternate; }

/* Product images open up as they scroll in */
.js .pcard.reveal .pcard-media img { clip-path: inset(10% 10% 10% 10% round 20px); transform: scale(1.12); transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.js .pcard.reveal.in .pcard-media img { clip-path: inset(0 0 0 0 round 0); transform: scale(1); }
.js .pcard.reveal.in:hover .pcard-media img { transform: scale(1.05); }

/* Section details */
.eyebrow::before { content: ""; display: inline-block; width: 0; height: 2px; margin-right: 0; vertical-align: middle; background: var(--grad); transition: width .8s .3s, margin .8s .3s; }
.in .eyebrow::before, .in.eyebrow::before { width: 28px; margin-right: 10px; }
.in .step-n, .step.in .step-n { animation: pop .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * 80ms + 250ms); }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.feature:hover .feature-icon { transform: translateY(-2px) rotate(-6deg); }
.feature-icon { transition: transform .3s; }
.delivery { background-size: 160% 160%; animation: grad-shift 18s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .reveal, .js .reveal.in { opacity: 1; transform: none; }
	.js .pcard.reveal .pcard-media img { clip-path: none; transform: none; }
	.ticker-track { width: auto; }
	.ticker ul + ul { display: none; }
	.ticker ul { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}

/* ------------------------------------------------------------ Larger screens */
@media (min-width: 640px) {
	.wrap { padding: 0 24px; }
	.hero-specs { grid-template-columns: repeat(4, 1fr); }
	.features { grid-template-columns: repeat(3, 1fr); }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.guides { grid-template-columns: repeat(2, 1fr); }
	.dgrid { grid-template-columns: repeat(2, 1fr); }
	.order-form { grid-template-columns: 1fr 1fr; }
	.field-wide { grid-column: 1 / -1; }
	.delivery { padding: 40px; }
	.order-card { padding: 32px; }
	.compare th, .compare td { padding: 14px 18px; }
}

@media (min-width: 960px) {
	:root { --head-h: 76px; }
	.logo img { height: 50px; }
	body { padding-bottom: 0; }
	.mobile-bar { display: none; }
	.head-wa { display: inline-flex; }
	.nav { gap: 6px; }
	.nav a:not(.btn) { padding: 8px 14px; }
	.sec { padding: 72px 0; }
	.sec-tight { padding: 8px 0 32px; }
	.hero { padding: 56px 0 64px; }
	.hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; }
	.hero-media img, .hero-media .ph { aspect-ratio: 4 / 4.6; }
	.features { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.feature { padding: 24px; }
	.cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.steps { grid-template-columns: repeat(4, 1fr); }
	.guides { grid-template-columns: repeat(3, 1fr); }
	.dgrid { grid-template-columns: repeat(3, 1fr); }
	.product { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
	.buy { position: sticky; top: calc(var(--head-h) + 24px); }
	.detail-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
	.order-grid { grid-template-columns: 1.6fr 1fr; gap: 28px; }
	.order-side { position: sticky; top: calc(var(--head-h) + 24px); }
	.foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
	.foot-brand { grid-column: auto; }
}

/* Small label on an image, e.g. "Illustrative image" */
.tilt { position: relative; }
.img-note { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(13, 27, 46, .55); color: #fff; font-size: .72rem; font-weight: 500; letter-spacing: .02em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }

/* Hero extras: label, price line, floating spec chips */
.hero-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .88rem; font-weight: 600; letter-spacing: .01em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-pill .icon { width: 18px; height: 18px; color: var(--lime); }
.hero-price { margin: 22px 0 0; color: rgba(255, 255, 255, .85); font-size: .98rem; }
.hero-price b { color: #fff; font-size: 1.15rem; }
.chip {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 10px;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 18px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 14px 34px rgba(8, 30, 60, .22);
	color: var(--ink);
	line-height: 1.2;
	animation: float 6s ease-in-out infinite;
}
.chip b { display: block; font-size: 1rem; letter-spacing: -.01em; color: var(--ink); }
.chip > span:last-child { font-size: .78rem; color: var(--muted); }
.chip-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: #fff; }
.chip-icon .icon { width: 20px; height: 20px; }
.chip-1 { top: 8%; left: 12px; }
.chip-2 { bottom: 12%; right: 12px; animation-delay: -3s; }
@media (min-width: 960px) {
	.hero-grid { grid-template-columns: 1fr 1.05fr; }
	.hero-media img { aspect-ratio: 4 / 4.7; }
	.chip-1 { left: -36px; }
	.chip-2 { right: -28px; }
}

/* =====================================================================
   Design v3 — built from the Claude Design home-page mock-up (Oct 2026).
   These rules come last and override the earlier styles above.
   ===================================================================== */
@font-face {
	font-family: "Outfit";
	src: url("assets/fonts/outfit-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
:root {
	--font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--page-tint: #f3f7fb;
	--green-tint: #f5f9f0;
	--green-ink: #3f7d1c;
	--grad-btn: linear-gradient(110deg, #1e4c90 0%, #2392bd 100%);
}
body { font-size: 16.5px; }
h1, h2, h3 { font-weight: 700; }

/* Header: centred menu, current page highlighted, navy WhatsApp button */
.site-head { background: #fff; }
.nav { flex: 1; }
.nav a:not(.btn) { color: var(--ink); font-weight: 500; }
.nav a:not(.btn):first-child { margin-left: auto; }
.nav a[aria-current="page"] { background: #eaf2fb; color: var(--brand); }
.head-wa { margin-left: auto !important; background: var(--brand); border-color: var(--brand); animation: none; }
.head-wa:hover { background: var(--brand-600); border-color: var(--brand-600); filter: none; }

/* Buttons */
.btn-grad { background: var(--grad-btn); border-color: transparent; color: #fff; }
.btn-grad:hover { background: var(--grad-btn); color: #fff; filter: brightness(1.08); border-color: transparent; }
.btn-outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: #eaf2fb; color: var(--brand-600); border-color: var(--brand-600); box-shadow: none; }
.btn .icon { width: 18px; height: 18px; }

/* Hero: light, calm, photo on the right */
.hero { background: var(--page-tint); color: var(--ink); animation: none; padding: 32px 0 48px; }
.hero h1 { color: var(--ink); font-size: clamp(2.4rem, 6.6vw, 4.5rem); letter-spacing: -.04em; line-height: 1.04; margin-bottom: .3em; }
.hl, .hl .w { background: linear-gradient(100deg, #1d5495 0%, #2392bd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-rule { display: block; width: 120px; height: 4px; margin: 4px 0 24px; border-radius: 4px; background: var(--grad); }
.hero-sub { color: var(--ink-2); font-size: clamp(1.08rem, 2.4vw, 1.25rem); max-width: 40ch; }
.hero-pill { background: #fff; border: 1px solid var(--line); color: var(--brand); padding: 7px 14px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #7cc242; }
.hero .btn-grad { background: var(--grad-btn); color: #fff; border-color: transparent; }
.hero .btn-grad:hover { background: var(--grad-btn); color: #fff; box-shadow: 0 10px 24px rgba(29, 84, 149, .25); }
.hero .btn-outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.hero .btn-outline:hover { background: #eaf2fb; color: var(--brand-600); }
.hero-price { color: var(--ink-2); }
.hero-price b { color: var(--ink); }
.hero-media img { border-radius: 28px; box-shadow: 0 30px 60px rgba(13, 27, 46, .14); }
.img-note { top: 16px; left: 16px; right: auto; bottom: auto; background: #fff; color: var(--ink); font-weight: 600; }
.hero-specs li { background: #fff; border: 1px solid var(--line); padding: 18px 22px; border-radius: 18px; }
.hero-specs li:hover { background: #fff; box-shadow: var(--shadow); }
.hero-specs strong { color: var(--brand); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; }
.hero-specs span { color: var(--muted); }

/* Fact strip: light with a gradient line on top */
.ticker { background: #fff; color: var(--ink); border-top: 3px solid transparent; border-image: var(--grad) 1; border-bottom: 1px solid var(--line); -webkit-mask-image: none; mask-image: none; }
.ticker li { font-weight: 600; }
.ticker li::after { background: #7cc242; }

/* Section headings and backgrounds */
h2 { font-size: clamp(1.9rem, 4.8vw, 3.1rem); letter-spacing: -.035em; }
.eyebrow { color: var(--brand); letter-spacing: .14em; }
.eyebrow::before { display: none; }
.sec-tint { background: var(--page-tint); }
.sec-tint-green { background: var(--green-tint); }
.sec-tint-green .eyebrow { color: var(--green-ink); }
.sec-center .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
.sec-center .compare { max-width: 900px; margin: 0 auto; }
.sec-head.has-link { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.sec-head-link { margin-bottom: .6em; }

/* Spec cards: blue icons on the first row, green on the second */
.feature-icon { background: #eaf2fb; color: var(--brand); }
.features .feature:nth-child(n+5) .feature-icon { background: #eef6e6; color: var(--green-ink); }
.feature strong { font-size: 1.2rem; font-weight: 700; }

/* Product cards */
.pcard-media { background: #f6f9fc; }
.pcard-top { align-items: center; }
.badge { flex: none; padding: 3px 10px; border-radius: 999px; background: #eef6e6; color: var(--green-ink); font-size: .8rem; font-weight: 600; }
.price { color: var(--brand); font-size: 1.75rem; font-weight: 700; }
.pcard .swatches { margin: 2px 0 4px; }
.pcard .swatch { width: 28px; height: 28px; }

/* Comparison table */
.compare thead th { background: var(--page-tint); font-weight: 700; }
.compare thead th:first-child { color: var(--muted); font-weight: 600; font-size: .9rem; }
.compare tbody th { color: var(--ink-2); font-weight: 500; }

/* Numbered steps */
.step { background: #fff; }
.step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-btn); }

/* Guide cards with an icon panel */
.guide { padding: 0; overflow: hidden; background: #fff; }
.guide-art { display: grid; place-items: center; height: 124px; background: #eaf2fb; color: var(--brand); }
.guide-art .icon { width: 54px; height: 54px; stroke-width: 1.6; }
.guide-art-2 { background: #eef6e6; color: var(--green-ink); }
.guide-art-3 { background: #e6f3f9; color: #1f6f8b; }
/* Block, not grid: Safari on iPhone will not stretch a grid item's img to 100% height. */
.guide-photo { display: block; height: 180px; overflow: hidden; background: #eef3f8; }
.guide-photo img { display: block; width: 100%; height: 180px; object-fit: cover; }
.guide-art-contain { background: #fff; }
.guide-art-contain img { object-fit: contain; padding: 14px; }
.guide-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.guide-body .link-arrow { margin-top: auto; }

/* Delivery & service: light tiles */
.dgrid li { align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); }
.dgrid .feature-icon { flex: none; width: 46px; height: 46px; }
.dgrid .icon { margin: 0; color: var(--brand); }
.dgrid small { display: block; color: var(--muted); font-size: .85rem; }
.dgrid li > span > b { display: block; color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.dgrid li > span > b::first-letter { text-transform: uppercase; }

/* Footer */
.site-foot { background: #0d1b2e; border-top: 4px solid transparent; border-image: var(--grad) 1; }
.foot-h { color: #9ed255; }
.foot-by { margin-bottom: 6px; color: #fff; font-weight: 700; }
.social a { text-decoration: underline; font-weight: 600; }

/* Phone WhatsApp bar */
.mobile-bar .btn-wa { background: var(--grad-btn); animation: none; }

/* Fact strip: exact sizes from the Claude Design file */
.ticker { padding: 22px 0; }
.ticker-track { animation-duration: 28s; }
.ticker li { gap: 28px; padding-right: 28px; font-size: 18px; font-weight: 600; color: #0d1b2e; }
.ticker li::after { width: 8px; height: 8px; background: #8cc63f; }

/* Footer social icons */
.social { gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; transition: background .25s, transform .25s, border-color .25s; }
.social a:hover { background: var(--grad-btn); border-color: transparent; transform: translateY(-2px); text-decoration: none; }
.social .icon { width: 20px; height: 20px; }
.foot-sites { margin-top: 18px; }
.foot-sites p { margin: 0 0 8px; }
.foot-sites a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Statistics with sources */
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.stat { display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.stat strong { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat p { margin: 12px 0 18px; color: var(--ink-2); }
.stat-source { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.stat-source a { color: var(--brand); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* No white "bounce" area below the footer.
   1) Stop the elastic over-scroll at the page edges.
   2) On phones, the space for the WhatsApp bar sits inside the dark footer, not below it. */
html { overscroll-behavior-y: none; background: #0d1b2e; }
body { padding-bottom: 0; }
.site-foot { padding-bottom: calc(20px + 76px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .site-foot { padding-bottom: 20px; } }

/* Plain data tables in guides */
.data-table { max-width: 760px; }
.data-table table { table-layout: auto; }
.data-table tbody th { width: auto; color: var(--ink); font-weight: 600; }
.table-note { margin: 12px 0 0; font-size: .85rem; color: var(--muted); }
.table-note a { color: var(--brand); }