/*
Theme Name: Gaspro
Theme URI: https://gaspro.deshito.com/
Author: Hatsoft
Author URI: https://deshito.com
Description: Marketing site theme for Gaspro — LPG seller SaaS for Bangladesh. Mobile-first, Bangla-primary.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: gaspro
*/

:root {
	--color-bg: #ffffff;
	--color-surface: #f7f9fb;
	--color-text: #263238;
	--color-muted: #607d8b;
	--color-border: #e3e9ee;
	--color-primary: #0a7b5f;
	--color-primary-dark: #075e48;
	--color-accent: #f2994a;
	--color-whatsapp: #25d366;
	--color-whatsapp-dark: #1da851;
	--color-popular-bg: #e8f5f0;
	--color-popular-border: #0a7b5f;
	--font-bangla: 'Hind Siliguri', system-ui, sans-serif;
	--max-width: 1120px;
	--max-width-narrow: 760px;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow-sm: 0 1px 3px rgba(38, 50, 56, 0.06);
	--shadow-md: 0 4px 12px rgba(38, 50, 56, 0.08);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--font-bangla);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; line-height: 1.3; }
p { margin: 0; }
a { color: var(--color-primary); text-decoration: none; }

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}
.container--narrow { max-width: var(--max-width-narrow); }

/* ===== Header ===== */
.site-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
}
.site-header__brand {
	font-weight: 700;
	font-size: 22px;
	color: var(--color-primary);
}
.site-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}
.site-header__nav a {
	color: var(--color-text);
	font-weight: 500;
}

/* ===== Hero ===== */
.hero {
	padding: 56px 0 48px;
	background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
	text-align: center;
}
.hero__badge {
	display: inline-block;
	background: var(--color-popular-bg);
	color: var(--color-primary-dark);
	font-weight: 600;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.hero__title {
	font-size: 36px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 14px;
}
.hero__subtitle {
	font-size: 17px;
	color: var(--color-muted);
	max-width: 640px;
	margin: 0 auto 28px;
}
.hero__ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ===== Buttons ===== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 15px;
	font-family: inherit;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
	min-height: 48px;
	min-width: 180px;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
	background: var(--color-primary);
	color: #fff;
}
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn--ghost {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn--ghost:hover { background: var(--color-popular-bg); }
.btn--whatsapp {
	background: var(--color-whatsapp);
	color: #fff;
	width: 100%;
}
.btn--whatsapp:hover { background: var(--color-whatsapp-dark); color: #fff; }

/* ===== Section defaults ===== */
section { padding: 56px 0; }
.section__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-text);
	text-align: center;
	margin-bottom: 8px;
}
.section__subtitle {
	font-size: 15px;
	color: var(--color-muted);
	text-align: center;
	margin-bottom: 36px;
}

/* ===== Value props ===== */
.value-props { background: var(--color-surface); }
.value-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.value-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: var(--shadow-sm);
}
/* No icon here by choice. Eight different coloured emoji in one grid is the
   strongest "generated landing page" tell there is, and SVG has failed in this
   theme before (see CLAUDE.md design rule 5). A short brand rule gives each
   card the same vertical rhythm the icon gave it, with nothing to render. */
.value-card::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-primary);
	margin-bottom: 14px;
}
.value-card__title {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--color-text);
}
.value-card__desc {
	font-size: 14px;
	color: var(--color-muted);
	line-height: 1.55;
}
.value-card__badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	background: var(--color-accent, #f2994a);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.5px;
}

/* ===== Free features ===== */
.free-features { background: var(--color-bg); }
.free-grid {
	display: grid;
	/* 3 free features now. 280px min x 3 + 2 gaps fits inside 1000px, so the
	   third card joins the row instead of orphaning; below ~900px viewport
	   auto-fit drops to 2, then 1. Mobile-first still holds at 375px. */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
}
.free-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.15s, transform 0.15s;
}
.free-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.free-card__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}
.free-card__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-popular-bg);
	border-radius: 12px;
	font-size: 24px;
	flex-shrink: 0;
}
.free-card__heading { flex: 1; min-width: 0; }
.free-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 4px;
}
.free-card__pill {
	display: inline-block;
	background: var(--color-popular-bg);
	color: var(--color-primary-dark);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 999px;
	letter-spacing: 0.5px;
}
.free-card__desc {
	font-size: 14px;
	color: var(--color-muted);
	line-height: 1.55;
	margin-bottom: 0;
}
.free-card__list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}
.free-card__list li {
	font-size: 13px;
	color: var(--color-text);
	padding: 4px 0 4px 22px;
	position: relative;
}
.free-card__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--color-primary);
	font-weight: 700;
}
.free-card__cta {
	margin-top: 4px;
	min-width: auto;
	width: 100%;
}

/* ===== Compare table ===== */
.compare { background: var(--color-surface); }
.compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.compare-table thead tr {
	background: #f3f6f8;
}
.compare-table th {
	padding: 16px 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
	text-align: center;
}
.compare-table th.compare-table__feature {
	text-align: left;
	padding-left: 20px;
}
.compare-table th.compare-table__paid {
	background: var(--color-popular-bg);
	color: var(--color-primary-dark);
}
.compare-table td {
	padding: 15px 12px;
	font-size: 15px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
}
.compare-table td:first-child {
	padding-left: 20px;
	font-weight: 500;
}
.compare-table td:not(:first-child) {
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	width: 110px;
}
.compare-table td.yes { color: var(--color-primary); }
.compare-table td.no { color: #c5ccd1; font-weight: 400; font-size: 20px; }
/* 🔒 — the free tier can READ every paid feature's existing data; only writing
   is blocked (Play policy: never lock a seller out of his own data). A dash or
   ✗ would repeat the old, false claim that these features are absent without a
   subscription; a lock says "not yours yet", which is both truthful and still
   sells. Sized 16px against the ✓'s 22px because an emoji at equal px reads
   larger than a text glyph, and desaturated so the green ✓ owns the column. */
.compare-table td.partial {
	font-size: 16px;
	line-height: 1;
	filter: grayscale(1);
	opacity: .55;
}
.compare-table tbody tr:nth-child(even) { background: #fafbfc; }
.compare-legend {
	text-align: center;
	margin-top: 14px;
	font-size: 13px;
	color: var(--color-muted);
}
.compare-note {
	text-align: center;
	margin-top: 22px;
	font-size: 14px;
	color: var(--color-muted);
	line-height: 1.6;
}
.compare-note strong { color: var(--color-primary-dark); }

@media (max-width: 640px) {
	.compare-table th, .compare-table td { padding: 12px 8px; font-size: 13px; }
	.compare-table th.compare-table__feature,
	.compare-table td:first-child { padding-left: 12px; font-size: 13px; }
	.compare-table td:not(:first-child) { font-size: 18px; width: 70px; }
	.compare-table td.no { font-size: 16px; }
	.compare-table td.partial { font-size: 14px; }
}

/* ===== Pricing ===== */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	max-width: 900px;
	margin: 0 auto;
}
.plan-card {
	position: relative;
	background: var(--color-bg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	padding: 28px 24px 24px;
	text-align: center;
	transition: transform 0.15s, box-shadow 0.15s;
	display: flex;
	flex-direction: column;
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan-card--popular {
	border-color: var(--color-popular-border);
	background: var(--color-popular-bg);
	box-shadow: var(--shadow-md);
}
.plan-card__badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 999px;
	letter-spacing: 0.3px;
}
.plan-card__name {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text);
}
.plan-card__duration {
	font-size: 13px;
	color: var(--color-muted);
	margin-top: 4px;
}
.plan-card__price {
	font-size: 44px;
	font-weight: 700;
	color: var(--color-text);
	margin-top: 14px;
	line-height: 1;
}
.plan-card__currency {
	font-size: 26px;
	font-weight: 600;
	vertical-align: super;
	margin-right: 2px;
}
.plan-card__per-month {
	font-size: 13px;
	color: var(--color-muted);
	margin-top: 6px;
}
/* Struck original price — the monthly rate x the term, sitting directly above
   the discounted one so the drop is read rather than explained. */
.plan-card__original {
	font-size: 19px;
	/* Same font as the discounted price below (both inherit Hind Siliguri) —
	   so the difference in how the digits read comes from weight, colour and
	   the strike, not the typeface. Matched to .plan-card__price's 700/near-
	   black to give the glyphs the same ink, and the rule is kept thin and
	   translucent because a line-through lands exactly where a Bengali digit
	   carries its identity. */
	font-weight: 700;
	color: #546e7a;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(84, 110, 122, 0.55);
	letter-spacing: 0.6px;
	line-height: 1.2;
	margin-top: 6px;
}
.plan-card__savings {
	display: inline-block;
	background: var(--color-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	margin-top: 12px;
}
.plan-card > *:nth-last-child(2) { margin-bottom: 20px; }
.plan-card .btn { margin-top: auto; }
.pricing__note {
	text-align: center;
	color: var(--color-muted);
	font-size: 13px;
	margin-top: 24px;
}

/* ===== Enterprise band =====
   Deliberately NOT a fourth card in .pricing-grid: that grid is one product
   across three terms, and a per-month price inside it would read as a fourth
   term. A full-width band below reads as a different class of customer, and
   stacks cleanly at 375px where a 4-up grid would not. */
.enterprise {
	max-width: 900px;
	margin: 32px auto 0;
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	color: #fff;
}
.enterprise__eyebrow {
	display: inline-block;
	background: var(--color-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
}
.enterprise__name {
	margin: 12px 0 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}
.enterprise__desc {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
}
.enterprise__features {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.enterprise__features li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.5;
}
.enterprise__features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #8fe3c4;
}
.enterprise__side {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	padding-top: 20px;
	text-align: center;
}
.enterprise__price {
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
}
.enterprise__currency { font-size: 24px; font-weight: 600; margin-right: 2px; }
.enterprise__period { font-size: 16px; font-weight: 500; opacity: 0.85; margin-left: 4px; }
.enterprise__side .btn {
	margin-top: 18px;
	width: 100%;
}
.enterprise__note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

/* Side-by-side once there is room; the CTA column keeps a fixed width so the
   price and button stay a single visual block. */
@media (min-width: 720px) {
	.enterprise {
		flex-direction: row;
		align-items: center;
		gap: 36px;
		padding: 32px 36px;
	}
	.enterprise__main { flex: 1; }
	.enterprise__features { grid-template-columns: 1fr 1fr; }
	.enterprise__side {
		width: 240px;
		flex-shrink: 0;
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.22);
		padding-top: 0;
		padding-left: 32px;
	}
}

/* ===== FAQ ===== */
.faq { background: var(--color-surface); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0;
	overflow: hidden;
}
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item__q {
	padding: 16px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 44px;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--color-muted);
	line-height: 1;
	font-weight: 400;
}
.faq-item[open] .faq-item__q::after { content: "−"; }
.faq-item__a {
	padding: 0 18px 16px;
	font-size: 14px;
	color: var(--color-muted);
	line-height: 1.6;
}

/* ===== Final CTA ===== */
.final-cta {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
	text-align: center;
}
.final-cta__title {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 10px;
}
.final-cta__subtitle {
	font-size: 15px;
	margin-bottom: 26px;
	opacity: 0.92;
}
.final-cta .btn--primary {
	background: #fff;
	color: var(--color-primary-dark);
}
.final-cta .btn--primary:hover { background: #f0fdf7; color: var(--color-primary-dark); }
.final-cta__customer-app {
	margin-top: 28px;
	font-size: 13px;
	opacity: 0.9;
}
.final-cta__customer-app a {
	color: #fff;
	text-decoration: underline;
	font-weight: 600;
}

/* ===== Footer ===== */
.site-footer {
	padding: 28px 0;
	border-top: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-muted);
	font-size: 14px;
	text-align: center;
}
.site-footer p { margin-bottom: 12px; }
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-primary); }

/* ===== Mobile ===== */
@media (max-width: 640px) {
	.hero { padding: 40px 0 36px; }
	.hero__title { font-size: 28px; }
	.hero__subtitle { font-size: 15px; }
	.section__title { font-size: 24px; }
	.pricing-grid { grid-template-columns: 1fr; }
	.btn { width: 100%; }
	.hero__ctas { flex-direction: column; align-items: stretch; }
	section { padding: 44px 0; }
	.site-header__nav { display: none; }
	.enterprise { padding: 24px 18px; margin-top: 26px; }
	.enterprise__name { font-size: 23px; }
	.enterprise__desc, .enterprise__features li { font-size: 14px; }
	.enterprise__price { font-size: 36px; }
}