/* ===========================================================
   TattvaApp — design tokens
   Palette: deep indigo-navy base, antique brass + steel-blue
   dual accent, warm ivory text. Two accents (not one flat
   accent-on-black) plus a blueprint-grid texture and an
   interactive phone mockup carry the "white-label" idea
   literally, rather than just claiming it in copy.
   =========================================================== */
:root{
	--bg:            #090D18;
	--bg-alt:        #0C1120;
	--surface:       #121A2E;
	--surface-2:     #1A2338;
	--border:        rgba(240,237,228,0.09);
	--text:          #F1EDE3;
	--text-muted:    #9AA3BC;
	--text-faint:    #6B7490;

	--accent:        #C9A227; /* antique brass */
	--accent-soft:   #E8C766;
	--accent-2:      #4A6FA5; /* steel blue */
	--accent-2-soft: #7FA1D6;

	--font-display: 'Fraunces', Georgia, serif;
	--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 28px;

	--container: 1180px;
}

/* ===========================================================
   Reset
   =========================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body{
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4{ font-family: var(--font-display); margin: 0; font-weight: 600; }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input{ font-family: inherit; }

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.skip-link:focus{
	position: fixed; top: 1rem; left: 1rem; z-index: 999;
	width: auto; height: auto; padding: .75rem 1.25rem;
	background: var(--accent); color: #14100a; border-radius: 8px;
	clip: auto;
}
:focus-visible{
	outline: 2px solid var(--accent-soft);
	outline-offset: 3px;
}

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

.eyebrow{
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-soft);
	margin: 0 0 .9rem;
}
.section-title{
	font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
	line-height: 1.15;
	max-width: 32ch;
	margin-bottom: 1rem;
}
.text-accent{ color: var(--accent-soft); }

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.6rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	border: 1px solid transparent;
	transition: transform .15s ease, background .2s ease, border-color .2s ease;
	white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
	background: linear-gradient(135deg, var(--accent-soft), var(--accent));
	color: #171104;
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ghost{
	background: transparent;
	border-color: var(--border);
	color: var(--text);
}
.btn-ghost:hover{ border-color: var(--accent-2-soft); color: var(--accent-2-soft); }
.btn-small{ padding: .6rem 1.2rem; font-size: .85rem; }
.btn-full{ width: 100%; }

/* ===========================================================
   Header
   =========================================================== */
.site-header{
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(9,13,24,0.78);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.site-header-inner{
	display: flex;
	align-items: center;
	gap: 2rem;
	height: 76px;
}
.site-logo{ display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.1rem; }
.site-logo-mark{
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 9px;
	background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
	color: #12172a; font-family: var(--font-display); font-weight: 700;
}
.custom-logo-link img{ max-height: 40px; width: auto; }

.site-nav{ margin-left: auto; }
.nav-menu{ display: flex; gap: 1.9rem; }
.nav-menu a{
	font-size: .95rem; color: var(--text-muted);
	transition: color .15s ease;
}
.nav-menu a:hover{ color: var(--text); }

.site-header-cta{ display: flex; }
.nav-toggle{
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none; border: none; padding: 8px;
}
.nav-toggle-bar{ width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

@media (max-width: 880px){
	.site-nav{
		position: absolute; top: 76px; left: 0; right: 0;
		background: var(--bg-alt);
		border-bottom: 1px solid var(--border);
		display: none;
		padding: 1rem 24px 1.5rem;
	}
	.site-nav.is-open{ display: block; }
	.nav-menu{ flex-direction: column; gap: 1rem; }
	.site-header-cta{ display: none; }
	.nav-toggle{ display: flex; margin-left: auto; }
}

/* ===========================================================
   Hero
   =========================================================== */
.hero{
	position: relative;
	overflow: hidden;
	padding: 4.5rem 0 4rem;
}
.hero-grid{
	position: absolute; inset: -10% -10% auto -10%;
	height: 130%;
	background-image:
		linear-gradient(var(--border) 1px, transparent 1px),
		linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 60% 55% at 30% 20%, black 40%, transparent 75%);
	opacity: .7;
	pointer-events: none;
}
.hero-inner{
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 3rem;
	align-items: center;
}
.hero-title{
	font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin-bottom: 1.4rem;
}
.hero-sub{
	color: var(--text-muted);
	max-width: 46ch;
	font-size: 1.08rem;
	margin-bottom: 2rem;
}
.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---- phone mockup ---- */
.hero-visual{ display: flex; justify-content: center; }
.brand-demo{ display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.phone{
	--brand: #C9A227;
	--brand-soft: rgba(201,162,39,0.16);
	width: 260px;
	background: #0E1424;
	border: 6px solid #1D2438;
	border-radius: 36px;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
	overflow: hidden;
	transition: box-shadow .3s ease;
}
.phone-notch{
	height: 22px;
	background: #0E1424;
	position: relative;
}
.phone-notch::after{
	content: '';
	position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
	width: 70px; height: 10px; border-radius: 8px; background: #1D2438;
}
.phone-screen{ background: var(--surface); min-height: 400px; }
.phone-status-bar{
	display: flex; justify-content: space-between;
	font-family: var(--font-mono); font-size: .62rem; color: var(--text-faint);
	padding: 6px 16px 2px;
}
.phone-app-bar{
	display: flex; align-items: center; gap: .55rem;
	padding: .9rem 1rem;
	border-bottom: 1px solid var(--border);
	transition: background .3s ease;
	background: var(--brand-soft);
}
.phone-app-mark{
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 8px;
	background: var(--brand);
	color: #14100a;
	font-family: var(--font-display); font-weight: 700; font-size: .85rem;
	transition: background .3s ease;
}
.phone-app-name{ font-weight: 600; font-size: .9rem; transition: color .2s ease; }
.phone-search{
	margin: .8rem 1rem 0;
	padding: .55rem .8rem;
	border-radius: 10px;
	background: var(--surface-2);
	color: var(--text-faint);
	font-size: .75rem;
}
.phone-cards{ padding: .9rem 1rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.phone-card{
	display: flex; gap: .65rem; align-items: center;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: .5rem;
}
.phone-card-img{
	width: 44px; height: 44px; border-radius: 8px; flex: none;
	background: linear-gradient(135deg, var(--brand-soft), var(--surface));
	transition: background .3s ease;
}
.phone-card-body{ display: flex; flex-direction: column; gap: .2rem; }
.phone-card-body b{ font-size: .78rem; }
.phone-card-body i{ font-style: normal; font-size: .68rem; color: var(--text-faint); }

.brand-swatches{ text-align: center; }
.swatch-label{ font-size: .82rem; color: var(--text-muted); margin-bottom: .7rem; }
.swatch-label span{ color: var(--accent-soft); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
.swatch-row{ display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.swatch{
	display: inline-flex; align-items: center; gap: .45rem;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: .78rem;
	padding: .45rem .8rem;
	border-radius: 999px;
	transition: border-color .15s ease, color .15s ease;
}
.swatch-dot{ width: 9px; height: 9px; border-radius: 50%; }
.swatch:hover{ color: var(--text); }
.swatch[aria-pressed="true"]{ border-color: currentColor; color: var(--text); background: var(--surface-2); }

/* ===========================================================
   Stats bar
   =========================================================== */
.stats{
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--bg-alt);
}
.stats-row{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 2.2rem 24px;
	gap: 1.5rem;
}
.stat{ text-align: center; }
.stat-num{
	display: block;
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--accent-soft);
}
.stat-label{ font-size: .82rem; color: var(--text-muted); }

@media (max-width: 700px){
	.stats-row{ grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================
   Features
   =========================================================== */
.features{ padding: 6rem 0; }
.features-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	margin-top: 2.5rem;
}
.feature-card{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.8rem;
	transition: border-color .2s ease, transform .2s ease;
}
.feature-card:hover{ border-color: rgba(201,162,39,0.35); transform: translateY(-2px); }
.feature-icon{
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--surface-2);
	color: var(--accent-soft);
	margin-bottom: 1.1rem;
}
.feature-icon svg{ width: 22px; height: 22px; }
.feature-card h3{ font-size: 1.08rem; margin-bottom: .5rem; }
.feature-card p{ color: var(--text-muted); font-size: .92rem; }

@media (max-width: 880px){
	.features-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
	.features-grid{ grid-template-columns: 1fr; }
}

/* ===========================================================
   How it works
   =========================================================== */
.how-it-works{ padding: 5rem 0; background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.steps{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4rem;
	margin-top: 2.5rem;
}
.step{
	position: relative;
	padding: 1.6rem 1.4rem 1.4rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}
.step-num{
	display: block;
	font-family: var(--font-mono);
	font-size: .82rem;
	color: var(--accent-2-soft);
	margin-bottom: .9rem;
}
.step h3{ font-size: 1rem; margin-bottom: .45rem; }
.step p{ color: var(--text-muted); font-size: .88rem; }

@media (max-width: 880px){
	.steps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
	.steps{ grid-template-columns: 1fr; }
}

/* ===========================================================
   Showcase
   =========================================================== */
.showcase{ padding: 6rem 0; }
.showcase-inner{
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 3rem;
	align-items: center;
}
.showcase-copy p{ color: var(--text-muted); margin-bottom: 1.4rem; max-width: 48ch; }
.showcase-list{ display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.showcase-list li{
	position: relative;
	padding-left: 1.5rem;
	color: var(--text-muted);
	font-size: .94rem;
}
.showcase-list li::before{
	content: '';
	position: absolute; left: 0; top: .5em;
	width: 8px; height: 8px; border-radius: 2px;
	background: var(--accent);
}
.showcase-visual{ display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.showcase-card{
	display: flex; align-items: center; gap: .7rem;
	width: 100%; max-width: 300px;
	padding: 1rem 1.3rem;
	border-radius: var(--radius-sm);
	background: var(--surface);
	border: 1px solid var(--border);
	transform: rotate(var(--tilt));
	font-weight: 600;
	transition: transform .25s ease;
}
.showcase-card:hover{ transform: rotate(0deg); }
.showcase-dot{ width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }

@media (max-width: 880px){
	.showcase-inner{ grid-template-columns: 1fr; }
	.showcase-visual{ margin-top: 1rem; }
}

/* ===========================================================
   Testimonials
   =========================================================== */
.testimonials{ padding: 6rem 0; background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.testimonial-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	margin-top: 2.5rem;
}
.testimonial-card{
	margin: 0;
	padding: 1.8rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}
.testimonial-card blockquote{
	margin: 0 0 1.2rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--text);
}
.testimonial-card figcaption{ display: flex; flex-direction: column; font-size: .85rem; }
.testimonial-card figcaption b{ color: var(--accent-soft); }
.testimonial-card figcaption span{ color: var(--text-faint); }

@media (max-width: 880px){
	.testimonial-grid{ grid-template-columns: 1fr; }
}

/* ===========================================================
   CTA / contact
   =========================================================== */
.cta{ padding: 6rem 0; }
.cta-inner{
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 3rem;
	align-items: start;
	background: linear-gradient(160deg, var(--surface), var(--bg-alt));
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 3rem;
}
.cta-copy p{ color: var(--text-muted); margin-top: .8rem; max-width: 40ch; }
.cta-form{ display: flex; flex-direction: column; gap: .9rem; }
.cta-form input{
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .85rem 1rem;
	color: var(--text);
	font-size: .95rem;
}
.cta-form input::placeholder{ color: var(--text-faint); }
.cta-form input:focus{ border-color: var(--accent-2-soft); }

@media (max-width: 880px){
	.cta-inner{ grid-template-columns: 1fr; padding: 2rem; }
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ border-top: 1px solid var(--border); background: var(--bg-alt); }
.footer-top{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
	padding: 3rem 24px 2rem;
}
.footer-tagline{ color: var(--text-muted); font-size: .88rem; margin-top: .6rem; }
.footer-menu{ display: flex; gap: 1.5rem; }
.footer-menu a{ color: var(--text-muted); font-size: .9rem; }
.footer-menu a:hover{ color: var(--text); }
.footer-bottom{
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
	padding: 1.4rem 24px 2rem;
	border-top: 1px solid var(--border);
	font-size: .8rem;
	color: var(--text-faint);
}

/* ===========================================================
   Generic content pages
   =========================================================== */
.generic-content{ padding: 4rem 0; max-width: 760px; }
.generic-content .page-title{ font-size: 2rem; margin-bottom: 1.5rem; }
.generic-content .entry-content{ color: var(--text-muted); }
.generic-content .entry-content > * + *{ margin-top: 1.1rem; }

/* ===========================================================
   Scroll reveal (progressive enhancement — see main.js)
   =========================================================== */
[data-reveal]{
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{ opacity: 1; transform: none; }

@media (max-width: 980px){
	.hero-inner{ grid-template-columns: 1fr; }
	.hero-visual{ order: -1; }
}