/* ============================================================================
   Solution Enterprises — base: reset, typography, a11y, layout primitives
   RTL: har directional property LOGICAL hai (inline-start/end, margin-inline).
   left/right kahin nahi — Arabic page baad me bina layout dobara likhe chalega.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;   /* sticky header ke neeche anchor na chhupe */
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
	-webkit-font-smoothing: antialiased;
	/* clip, hidden NAHI — overflow:hidden position:sticky ko tod deta hai */
	overflow-x: clip;
}

/* --- Ambient aurora -------------------------------------------------------
   Glass ko peeche kuch chahiye jisme se jhalke, warna frosted panel sirf halka
   safed dikhta hai. Ye fixed, static gradients hain: zero JS, zero animation,
   zero image request.

   Tints jaan-boojh kar bahut halke hain (<=9%): cards ka background translucent
   hai, isliye jo peeche hai wo text ke contrast me JUD jaata hai. Gehra tint =
   chup-chaap toota contrast — aur wahi cheez baad me pakadni mushkil hoti hai. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(72rem 50rem at 16% -14%, var(--bg-glow-a), transparent 62%),
		radial-gradient(56rem 42rem at 92% 6%,  var(--bg-glow-b), transparent 60%),
		radial-gradient(64rem 48rem at 62% 86%, var(--bg-glow-c), transparent 62%),
		/* Honeycomb — paper honeycomb pallet hi site ka sabse bada differentiator hai,
		   to background me wahi shakl. Hexagon repeating-gradient se banta nahi, isliye
		   SVG tile. Stroke ka rang tile ke ANDAR hai (data URI me var() nahi chalta) —
		   badalna ho to yahin badalna padega, aur badalne ke baad contrast dobara naapo. */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='rgba(16,35,27,0.055)' stroke-width='1.15'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 48.5 L56 64.5 L56 96.5 L28 112.5 L0 96.5 L0 64.5 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: auto, auto, auto, 56px 97px;
	/* Yahan aakhir me `var(--c-bg)` ki OPAQUE parat jaan-boojh kar nahi hai -
	   wo apne hi upar wale pattern ko dhak deti. Page ka rang body par set hai. */
}

/* Honeycomb pattern ab UPAR wale fixed layer me hai (body::before), body par
   `background-attachment: fixed` ke roop me NAHI.
   Wajah: attachment:fixed har scroll frame par repaint maangta hai aur mobile par
   saaf jank deta hai. `position: fixed` wala pseudo-element ek hi baar paint hota hai. */

/* Paper grain poore page par — bahut halka, taaki gradient plastic na lage.
   Product hi kaagaz hai; texture bhi wahin se aana chahiye. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-head);
	color: var(--c-ink);
	margin: 0 0 var(--s-4);
	font-weight: 700;
	line-height: var(--lh-head);
	letter-spacing: var(--ls-head);
	text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 650; }
h4 { font-size: var(--t-h4); font-weight: 650; }

p  { margin: 0 0 var(--s-5); text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
	color: var(--c-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--d-1) var(--e-out);
}
a:hover { color: var(--c-accent-text); }   /* -deep sirf 3.6:1 deta hai light bg par */

strong, b { font-weight: 650; }
small { font-size: var(--t-small); }

ul, ol { margin: 0 0 var(--s-5); padding-inline-start: var(--s-6); }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--c-kraft); }

hr {
	border: 0;
	border-top: 1px solid var(--c-line);
	margin: var(--s-12) 0;
}

blockquote {
	margin: var(--s-8) 0;
	padding-inline-start: var(--s-5);
	border-inline-start: 3px solid var(--c-accent);
	color: var(--c-ink-2);
	font-size: 1.06em;
}

code, kbd, samp, pre { font-family: var(--f-mono); font-size: .92em; }
code {
	background: var(--c-bg-warm);
	border: 1px solid var(--c-line);
	padding: 1px 5px;
	border-radius: var(--r-1);
}

img, svg, video, picture { max-width: 100%; height: auto; display: block; }

/* --- Focus: har interactive element par dikhna chahiye (WCAG 2.4.7) ------ */
:focus { outline: none; }
:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: var(--r-1);
}
/* Dark band ke andar orange outline bhi dikhta hai — par kraft zyada saaf hai */
.band--dark :focus-visible { outline-color: var(--c-kraft); }

::selection { background: var(--c-accent); color: var(--c-accent-ink); }

/* --- Screen-reader only + skip link -------------------------------------- */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: var(--s-4);
	z-index: 999;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	padding: var(--s-3) var(--s-5);
	font-weight: 650;
	text-decoration: none;
}
.skip-link:focus-visible { inset-block-start: var(--s-3); color: var(--c-accent-ink); }

/* --- Layout primitives ---------------------------------------------------- */
.wrap {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* Tables, media bands aur distance grid ko aur chaudai milti hai */
/* `.wrap--wide` (2040px) HATA di gayi (22 Sep, Gaurav): header aur footer 1680px ki
   `.wrap` par hain, to 1920/2560px screen par wide section ke kinare header se mel
   nahi khaate the — 3 page par 120px baahar nikal rahe the (`_local/container-audit.js`).
   Chaudi table ko jagah `.spec__scroll` ke apne overflow se milti hai, container
   chauda karke nahi. Ek hi container = ek hi kinara, poore site par. */
/* Edge-to-edge — gutter sirf itna ki text kinare se na chipke */
.wrap--bleed { max-width: none; padding-inline: var(--gutter); }

/* Prose ki chaudai layout ke saath NAHI badhti. Full-width ka matlab
   "line 200 character lambi" nahi hai — 70-80 character par aankh line
   wapas nahi dhoondh paati. */
.prose { max-width: var(--container-text); }
.prose h2 { margin-top: var(--s-12); }
.prose h3 { margin-top: var(--s-8); }
.prose > :first-child { margin-top: 0; }

/* Compactness pass (21 Sep): 5.5vw par 1440px screen ko 79px upar + 79px neeche
   milte the — homepage 8.3 screen lambi ho gayi thi, mobile par 17.3. Ab 4.2vw
   (1440 par 60px). Naapa `_local/section-metrics.js` se, pehle aur baad dono. */
.section { padding-block: clamp(38px, 4.2vw, 78px); }
.section--tight { padding-block: clamp(30px, 3vw, 56px); }

/* Bands ab translucent hain taaki peeche ki aurora jhalke — thos rang glass ko
   maar deta hai. Alpha itni rakhi hai ki text ka contrast na gire. */
.band--warm {
	background: linear-gradient(180deg, rgba(244, 240, 232, .86), rgba(244, 240, 232, .62));
	border-block: 1px solid var(--glass-line);
}
.band--card { background: var(--glass-panel); }
.band--dark {
	position: relative;
	background:
		radial-gradient(60rem 30rem at 12% 0%, rgba(27, 94, 63, .55), transparent 62%),
		radial-gradient(48rem 26rem at 92% 100%, rgba(232, 130, 31, .16), transparent 60%),
		var(--c-ink-surface);
	color: var(--c-on-dark-2);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--c-on-dark); }
/* Dark band ke andar --c-muted (#5A6B60) sirf 3.06:1 deta hai. Wo token light
   background ke liye hai. Dark surface par muted ka matlab --c-on-dark-2 hai. */
.band--dark [style*="--c-muted"],
.band--dark .card__text,
.band--dark .spec__note,
.band--dark .calc__disclaimer,
.band--dark small { color: var(--c-on-dark-2) !important; }
.band--dark a { color: var(--c-kraft-soft); }
.band--dark a:hover { color: var(--c-accent); }

/* auto-fit + minmax: full width par column apne aap badh jaate hain, aur
   chhoti screen par ek hi column. Koi media query nahi chahiye. */
.grid { display: grid; gap: clamp(16px, 1.6vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* Bahut chaude screen par card patli patti ban jaate the — upper cap */
@media (min-width: 1900px) {
	.grid-3 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
	.grid-4 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
}

.stack > * + * { margin-block-start: var(--s-5); }
.flow-tight > * + * { margin-block-start: var(--s-3); }

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
}

/* --- Section eyebrow — numbered, industrial ------------------------------ */
.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--f-mono);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-brand);
	margin-bottom: var(--s-4);
}
.band--dark .eyebrow { color: var(--c-kraft); }
.eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--c-kraft);
	opacity: .5;
}
.eyebrow__num {
	font-variant-numeric: tabular-nums;
	color: var(--c-accent-text);
}
.band--dark .eyebrow__num { color: var(--c-accent); }

/* Chhoti screen par eyebrow ki rule-line ke saath text do line me tootta tha.
   Wahan rule hata do — wo sirf sajawat hai, jaankari nahi. */
@media (max-width: 640px) {
	.eyebrow { flex-wrap: wrap; gap: var(--s-2); }
	.eyebrow::after { display: none; }
}

/* --- Section head -------------------------------------------------------- */
.sec-head { max-width: 720px; margin-bottom: var(--s-10); }
.sec-head p { color: var(--c-muted); font-size: 1.05em; margin-bottom: 0; }
.band--dark .sec-head p { color: var(--c-on-dark-2); }

/* --- Paper grain: decorative, ek chhota inline SVG. Bahar se image nahi. -- */
.grain { position: relative; isolation: isolate; }
.grain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* --- Print: B2B buyer spec page print karke purchase file me lagata hai --- */
@media print {
	.site-header, .site-footer, .mobile-bar, .cta-band,
	.breadcrumbs, .skip-link, .quote-form, .whatsapp-float { display: none !important; }
	body { background: var(--c-print-paper); color: var(--c-print-ink); font-size: 11pt; }
	.section { padding-block: 12pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--c-print-meta); }
	.spec-table { page-break-inside: avoid; }
	h2, h3 { page-break-after: avoid; }
}