/*
 * Balaji marketing site. Same navy-plus-gold-accent tokens as
 * balajiapp.closebee.com's theme.css (repointed from Balaji's neutral
 * charcoal to match the conch-shell icon's navy/gold palette) -- kept as
 * its own file here since a landing page needs hero/feature-grid rules the
 * app's component-driven theme.css doesn't have, not the app-chrome rules
 * (.form-control, .card, etc.) it does.
 */
:root {
	--bg-dark: #0c0f1a;
	--maroon-mid: #1a2140;
	--maroon-card: #12172a;
	--maroon-border: #2A3A63;
	--gold-accent: #9C6B1F;
	--gold-hover: #C99A3D;
	--text-light: #F3E8E0;
	--text-muted: #C4A691;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: radial-gradient(ellipse 1200px 700px at 50% -10%, var(--maroon-mid) 0%, var(--bg-dark) 60%);
	color: var(--text-light);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}

h1, h2, h3, .display {
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

a { color: var(--gold-hover); }

/* Nav */
.nav {
	position: sticky; top: 0; z-index: 20;
	background: rgba(8, 10, 20, 0.88);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--maroon-border);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.nav .brand-plate { background: #fff; border-radius: 10px; padding: 3.5px 7px; display: inline-flex; align-items: center; }
.nav .brand-plate img { height: 30px; display: block; }
.nav .nav-links { display: flex; align-items: center; gap: 28px; }
.nav .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav .nav-links a:hover { color: var(--text-light); }
.nav .btn { white-space: nowrap; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 26px; border-radius: 9px; font-weight: 600; font-size: 15px;
	text-decoration: none; border: 1px solid transparent; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold-accent); color: #1A0A0B; }
.btn-gold:hover { background: var(--gold-hover); color: #1A0A0B; }
.btn-outline { border-color: var(--maroon-border); color: var(--text-light); background: rgba(255,255,255,0.02); }
.btn-outline:hover { border-color: var(--gold-accent); }

/* Hero */
.hero {
	position: relative; padding: 86px 0 65px; text-align: left;
	/* "contain" instead of "cover" -- on a wide/short viewport, cover was
	   scaling the image up well past its natural size to fill the box,
	   cropping most of the vertical composition (looked "zoomed in"). This
	   shows the whole banner at its natural scale; any leftover strip is
	   filled by the near-black background color, which already matches the
	   image's own dark starfield corners closely enough to be seamless. */
	background: #0a0a0b url('../images/hero-bg.jpg') left center / contain no-repeat;
}
.hero::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,10,11,0.35) 0%, rgba(10,10,11,0.55) 55%, var(--bg-dark) 100%);
}
.hero .wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; max-width: 1290px; }
.hero .hero-content { max-width: 560px; }
.hero .eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--gold-hover); font-size: 13px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	border: 1px solid var(--maroon-border); border-radius: 999px;
	padding: 6px 16px; margin-bottom: 25px;
}
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.12; margin: 0 0 20px; }
.hero h1 .accent { color: var(--gold-hover); }
.hero p.lede { color: var(--text-muted); font-size: 18.5px; margin: 0 0 32px; }
@media (max-width: 860px) {
	.hero { text-align: center; }
	.hero .wrap { justify-content: center; }
	.hero .hero-content { max-width: 100%; }
	/* Text sits centered directly over the banner image here (desktop's
	   flex-end pushes it onto the emptier starfield instead) -- the default
	   top-to-bottom scrim alone isn't dark enough behind a bright face/gold
	   crown, so add a darkening layer behind the content specifically. */
	.hero::before { background: rgba(10,10,11,0.6); }
	.hero .hero-content { background: rgba(10,10,11,0.55); border-radius: 16px; padding: 28px 20px; }
}
.hero .cta-row { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
@media (max-width: 860px) {
	.hero .cta-row { justify-content: center; }
}
.hero .fine-print { color: var(--text-muted); font-size: 13px; }

/* Scale hero -- a bold standalone stat band on the platform's economics,
   distinct from the softer side-by-side .problem strip below it. */
.scale-hero {
	background: linear-gradient(180deg, var(--maroon-mid) 0%, var(--bg-dark) 100%);
	border-top: 1px solid var(--maroon-border); border-bottom: 1px solid var(--maroon-border);
	padding: 76px 0; text-align: center;
}
.scale-hero .kicker { color: var(--gold-hover); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; }
.scale-hero .figures { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 22px; }
.scale-hero .figure .num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(52px, 8vw, 84px); line-height: 1; color: var(--text-light); }
.scale-hero .figure .num .gold { color: var(--gold-hover); }
.scale-hero .figure .cap { color: var(--text-muted); font-size: 14.5px; margin-top: 10px; }
.scale-hero .divider { width: 1px; height: 64px; background: var(--maroon-border); }
.scale-hero p { color: var(--text-muted); font-size: 17px; max-width: 560px; margin: 0 auto; }
@media (max-width: 640px) {
	.scale-hero .figures { gap: 20px; }
	.scale-hero .divider { display: none; }
}

/* Problem strip */
.problem {
	background: var(--maroon-card); border-top: 1px solid var(--maroon-border);
	border-bottom: 1px solid var(--maroon-border); padding: 56px 0;
}
.problem .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.problem .stat { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 46px; color: var(--gold-hover); line-height: 1; }
.problem .stat-label { color: var(--text-muted); font-size: 14px; margin-top: 8px; }
.problem p { color: var(--text-light); font-size: 17px; }
.problem p + p { margin-top: 14px; }

/* Spotlight rows -- deeper dive on the 3 flagship capabilities, alternating
   text/visual sides for rhythm against the feature grid above it. */
.spotlight-row {
	display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
	padding: 52px 0; border-bottom: 1px solid var(--maroon-border);
}
.spotlight-row:last-child { border-bottom: none; }
.spotlight-row:nth-child(even) .spotlight-text { order: 2; }
.spotlight-row:nth-child(even) .spotlight-visual { order: 1; }
.spotlight-text .kicker { color: var(--gold-hover); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.spotlight-text h3 { font-size: 26px; margin-bottom: 14px; }
.spotlight-text p { color: var(--text-muted); font-size: 16px; }
.spotlight-visual {
	display: flex; align-items: center; justify-content: center;
	background: var(--maroon-card); border: 1px solid var(--maroon-border); border-radius: 16px;
	min-height: 220px; position: relative; overflow: hidden;
}
.spotlight-visual::before {
	content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
	background: radial-gradient(circle, rgba(156,107,31,0.18) 0%, transparent 70%);
}
.spotlight-visual .vicon {
	width: 84px; height: 84px; border-radius: 20px; position: relative; z-index: 1;
	background: rgba(156,107,31,0.14); border: 1px solid rgba(156,107,31,0.4);
	display: flex; align-items: center; justify-content: center;
	color: var(--gold-hover); font-size: 34px;
}
.spotlight-visual .chip-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; padding: 0 20px; }
.spotlight-visual .chip {
	background: rgba(255,255,255,0.05); border: 1px solid var(--maroon-border); color: var(--text-light);
	font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
}
.spotlight-visual .sync-flow { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.spotlight-visual .sync-flow .node {
	width: 64px; height: 64px; border-radius: 14px; background: rgba(255,255,255,0.05);
	border: 1px solid var(--maroon-border); display: flex; align-items: center; justify-content: center;
	color: var(--text-light); font-size: 24px;
}
.spotlight-visual .sync-flow i.fa-arrow-right-long { color: var(--gold-hover); font-size: 20px; }

@media (max-width: 860px) {
	.spotlight-row { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
	.spotlight-row:nth-child(even) .spotlight-text,
	.spotlight-row:nth-child(even) .spotlight-visual { order: unset; }
}

/* Section headers */
.section { padding: 88px 0; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 52px; }
.section-head .kicker { color: var(--gold-hover); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.section-head h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: 16.5px; }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
	background: var(--maroon-card); border: 1px solid var(--maroon-border); border-radius: 14px;
	padding: 28px 26px;
}
.feature-card .ficon {
	width: 46px; height: 46px; border-radius: 11px;
	background: rgba(156,107,31,0.14); border: 1px solid rgba(156,107,31,0.35);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 18px; color: var(--gold-hover); font-size: 20px;
}
.feature-card h3 { font-size: 17px; margin-bottom: 9px; }
.feature-card p { color: var(--text-muted); font-size: 14.5px; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.step { text-align: center; padding: 0 20px; position: relative; }
.step .num {
	width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 20px;
	background: var(--bg-dark); border: 2px solid var(--gold-accent); color: var(--gold-hover);
	display: flex; align-items: center; justify-content: center;
	font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px;
	position: relative; z-index: 2;
}
.step h3 { font-size: 16.5px; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 14.5px; max-width: 260px; margin: 0 auto; }
.step .free-shout {
	display: inline-block; margin: 12px 0 2px;
	background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.45);
	color: #fbbf24; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12.5px;
	letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.step .apps { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.step .apps a {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,0.05); border: 1px solid var(--maroon-border); border-radius: 999px;
	padding: 5px 12px 5px 5px; text-decoration: none; color: var(--text-light);
	font-size: 12.5px; font-weight: 600; transition: border-color .15s ease, background .15s ease;
}
.step .apps a:hover { border-color: var(--gold-accent); background: rgba(156,107,31,0.12); }
.step .apps img { width: 20px; height: 20px; border-radius: 5px; display: block; }
.steps::before {
	content: ''; position: absolute; top: 22px; left: 12.5%; right: 12.5%; height: 2px;
	background: linear-gradient(90deg, var(--maroon-border), var(--gold-accent), var(--maroon-border));
	z-index: 1;
}

/* Roles */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.role-card { background: var(--maroon-card); border: 1px solid var(--maroon-border); border-radius: 14px; padding: 30px 28px; }
.role-card .role-badge {
	display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--gold-hover); background: rgba(156,107,31,0.14); border: 1px solid rgba(156,107,31,0.35);
	border-radius: 999px; padding: 4px 12px; margin-bottom: 16px;
}
.role-card h3 { font-size: 19px; margin-bottom: 12px; }
.role-card ul { list-style: none; }
.role-card li { color: var(--text-muted); font-size: 14.5px; padding: 6px 0 6px 24px; position: relative; }
.role-card li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-hover); font-weight: 700; }
.role-card li.no::before { content: '—'; color: var(--maroon-border); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--maroon-card); border: 1px solid var(--maroon-border); border-radius: 14px; padding: 28px 24px;
}
.price-card.price-featured { border-color: var(--gold-accent); box-shadow: 0 0 0 1px var(--gold-accent); }
.price-default-badge {
	position: absolute; top: 0; right: 0;
	background: var(--gold-accent); color: #fff; font-size: 11px; font-weight: 700;
	letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 14px 5px 16px;
	border-radius: 0 0 0 12px;
}
.price-icon {
	width: 42px; height: 42px; border-radius: 11px;
	background: rgba(156,107,31,0.16); border: 1px solid rgba(156,107,31,0.4);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px; color: var(--gold-hover); font-size: 18px;
}
.price-card .role-badge {
	display: inline-block; width: max-content; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--text-light); background: rgba(156,107,31,0.16); border: 1px solid rgba(156,107,31,0.4);
	border-radius: 999px; padding: 4px 12px; margin-bottom: 16px;
}
.price-card .price-scope { color: var(--text-muted); font-size: 14px; margin-bottom: 8px; }
.price-card .price-amount { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; margin-bottom: 18px; }
.price-card .price-amount span { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; color: var(--text-muted); }
.price-card ul { list-style: none; margin-bottom: 24px; flex: 1; }
.price-card li { color: var(--text-muted); font-size: 14px; padding: 6px 0 6px 24px; position: relative; }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-hover); font-weight: 700; }
.price-desc { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 24px; flex: 1; }
.price-desc p { margin-bottom: 10px; }
.price-desc strong { color: var(--text-light); }
.price-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.price-tab {
	font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
	color: var(--text-muted); background: rgba(255,255,255,0.03); border: 1px solid var(--maroon-border);
	border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.price-tab:hover { border-color: var(--gold-accent); color: var(--text-light); }
.price-tab.active { color: #fff; background: var(--gold-accent); border-color: var(--gold-accent); }
.price-cta { width: 100%; }

/* Closing CTA */
.closing { text-align: center; padding: 90px 0 110px; }
.closing h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 16px; }
.closing p { color: var(--text-muted); font-size: 17px; max-width: 520px; margin: 0 auto 34px; }

/* Footer */
footer { border-top: 1px solid var(--maroon-border); padding: 32px 0; }
footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer .brand-plate { background: #fff; border-radius: 10px; padding: 3.5px 7px; display: inline-flex; align-items: center; }
footer .brand-plate img { height: 30px; display: block; }
footer .fine { color: var(--text-muted); font-size: 13px; }

@media (max-width: 860px) {
	.problem .grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
	.feature-grid { grid-template-columns: 1fr 1fr; }
	.steps { grid-template-columns: 1fr; gap: 40px; }
	.steps::before { display: none; }
	.roles { grid-template-columns: 1fr; }
	.pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.feature-grid { grid-template-columns: 1fr; }
	.pricing-grid { grid-template-columns: 1fr; }
	.nav .nav-links { display: none; }
}