/* ═══════════════════════════════════════════════════════════════════
   Thermosyn — thermosyn.com

   Ye app nahi, uska saamne wala chehra hai. Log yahan search, ads,
   reference — aur chhape hue kaagaz ke QR — sab raaston se aate hain,
   isliye page pehle ye batata hai ke cheez KYA hai, phir ye ke KISKE
   liye hai.

   ── RANG ──
   Do theme, dono poore. Brand ka gradient (#2563EB → #22D3EE) dono me
   ek jaisa rehta hai; sirf zameen badalti hai. `--alarm` (amber) wahan
   lagta hai jahan baat paise ki ho — warranty khatam, AMC due, bill ab
   customer ka. Is trade ka poora tanaav isi ek lakeer par tika hai:
   uske idhar claim bharta hai, udhar grahak.

   ── SIGNATURE ──
   Warranty ki khidki. Install se aaj tak ki ek patti, jis par us unit ke
   service events lage hote hain — aur har event batata hai ke uska bill
   claim ne bhara ya customer ne.

   Pehle yahan temperature ka trace tha. Wo hataya gaya kyunki is product
   me temperature ka koi feature HAI HI NAHI — na telemetry, na logger,
   DB me ek column tak nahi. Wo tasveer isliye chuni gayi thi ke reefer
   matlab thanda matlab chart, isliye nahi ke product wo karta hai. Is
   trade ka banda use dekh kar telematics samajhta, aur neeche padhta job
   card aur invoice — wahi faasla page ko banawati bana deta tha.

   Warranty ki khidki us jagah isliye hai ke YAHI product ki asli aql hai:
   tareekh tay karti hai ke paisa kis ka. Page ka apna daawa bhi yahi hai
   — "claim isliye atak jata hai ke install date sabit nahi hoti".

   `--alarm` (amber) ka matlab bhi is ke saath badla: pehle "kuch garam
   hua", ab "yahan se paisa aapka". Doosra matlab is product ke liye sach
   hai; pehla kabhi tha hi nahi.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────── */
:root {
    /* Brand — theme se azad, dono jagah wahi */
    --brand-1: #2563EB;
    --brand-2: #3B9BF0;
    --brand-3: #22D3EE;
    --grad: linear-gradient(135deg, #2563EB 0%, #3B9BF0 55%, #22D3EE 100%);
    /* Button ka apna gradient — chamakte wale par safed matn 1.81:1 par
       aa jata tha (cyan sire par), yaani padha hi nahi jata. Ye wala
       dono siron par 5.4:1 se upar rehta hai. Chamakta gradient wahin
       chalta hai jahan uspar matn nahi hota — heading, rail, bar. */
    --grad-cta: linear-gradient(120deg, #1D4ED8 0%, #155E9C 55%, #0E7490 100%);

    --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    --wrap: 1180px;
    --pad: clamp(20px, 5vw, 48px);
    --nav-h: 66px;
    /* Section ka upar-neeche ka padding. Ye ek TOKEN isliye hai ke anchor
       wala hisaab isi ko ghata kar chalta hai — warna dono alag-alag jagah
       chhodte hain aur upar ~125px khali reh jata hai. */
    --sec-pad: clamp(44px, 6vw, 78px);
    /* Header ke neeche se section ke pehle matn tak itni jagah chahiye. */
    --anchor-gap: 30px;

    --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --t-fast: 140ms; --t: 260ms;
}

/* ── Dark (default) ── */
:root {
    --bg:        #06111F;
    --surface:   #0B1A2C;
    --surface-2: #102439;
    --card:      #0C1E33;
    --card-hi:   #12293F;
    --paper:     #FFFFFF;
    --paper-ink: #0B1727;

    --text:     #EAF3FA;
    --text-2:   #A9BED2;
    --muted:    #7C93AA;
    /* 3.46:1 tha — chhote matn (meta, legend, footer) ke liye kam.
       Ab 5.7:1. */
    --dim:      #7E96AE;

    --line:   rgba(226, 240, 250, .12);
    --line-2: rgba(226, 240, 250, .06);
    --line-3: rgba(226, 240, 250, .22);

    --brand-glow: rgba(37, 99, 235, .18);
    --brand-12:   rgba(59, 155, 240, .12);
    --brand-28:   rgba(59, 155, 240, .30);
    --chill-12:   rgba(34, 211, 238, .12);

    --ok:      #22DD8A;
    --ok-12:   rgba(34, 221, 138, .12);
    --alarm:   #F59E0B;
    --alarm-12:rgba(245, 158, 11, .13);
    --bad:     #F87171;

    --grid-line: rgba(148, 163, 184, .07);
    --glass: rgba(6, 17, 31, .78);

    --sh-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --sh:    0 10px 30px rgba(0, 0, 0, .42);
    --sh-lg: 0 28px 70px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* ── Light ──
   Sirf zameen badalti hai, brand nahi. Light me line aur saaya dono
   halke hone chahiye — warna page bhaari aur ganda lagta hai. */
[data-theme="light"] {
    --bg:        #EEF3F9;
    --surface:   #FFFFFF;
    --surface-2: #F4F8FC;
    --card:      #FFFFFF;
    --card-hi:   #F7FAFD;
    --paper:     #FFFFFF;
    --paper-ink: #0B1727;

    --text:     #0A1626;
    --text-2:   #3C4E66;
    --muted:    #566780;
    /* Light me 3.0:1 tha — safed card par chhota matn padha nahi jata.
       Ab 5.2:1 (card) aur 4.7:1 (page). */
    --dim:      #5D6E85;

    --line:   #DCE5F0;
    --line-2: #E9EFF6;
    --line-3: #C4D3E4;

    --brand-glow: rgba(37, 99, 235, .10);
    --brand-12:   rgba(37, 99, 235, .09);
    --brand-28:   rgba(37, 99, 235, .26);
    --chill-12:   rgba(8, 145, 178, .10);

    --ok:      #059669;
    --ok-12:   rgba(5, 150, 105, .11);
    --alarm:   #B45309;
    --alarm-12:rgba(180, 83, 9, .11);
    --bad:     #DC2626;

    --grid-line: rgba(11, 18, 32, .045);
    --glass: rgba(255, 255, 255, .82);

    --sh-sm: 0 1px 3px rgba(11, 18, 32, .06);
    --sh:    0 10px 30px rgba(11, 18, 32, .08);
    --sh-lg: 0 28px 70px rgba(11, 18, 32, .13);

    color-scheme: light;
}

/* ── 2. Buniyad ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -.024em; }
h1 { font-size: clamp(2.05rem, 5vw, 3.65rem); letter-spacing: -.034em; }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.5rem); }
h3 { font-size: clamp(1.02rem, 1.6vw, 1.2rem); letter-spacing: -.014em; }
p  { color: var(--text-2); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sec-pad); }

/* Anchor par pahunchte hi section ka apna padding gap ban jata hai —
   isliye use ghata dete hain. Nateeja: header ke neeche hamesha utni hi
   jagah (`--anchor-gap`), chahe screen kitni bhi badi ho.

   Ghatane par qeemat manfi bhi ho sakti hai (bade screen par section ka
   padding header se zyada hota hai) — CSS use theek sambhalta hai. */
:where(section[id], main [id]) {
    scroll-margin-top: calc(var(--nav-h) + var(--anchor-gap) - var(--sec-pad));
}
.rule { border-top: 1px solid var(--line-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lede { font-size: clamp(1rem, 1.35vw, 1.1rem); color: var(--text-2); max-width: 56ch; }
.small { font-size: 13.5px; color: var(--muted); }
/* Gradient me rangaa hua lafz har doosre SaaS page par hai — wo koi
   faisla nahi, ek default hai. Yahan uski jagah wo lakeer hai jo register
   ki har qatar ke neeche khinchi hoti hai: matn apne rang me rehta hai,
   aur zor neeche se aata hai. */
/* Lakeer `::after` se nahi, background se banti hai — aur `clone` ke
   saath. Wajah: heading phone par kai line me tootti hai, aur ek
   absolute `::after` poore block par ek hi lambi lakeer khinch deta
   (ya kahin dikhta hi nahi). `box-decoration-break: clone` har line ke
   tukde ko uski apni lakeer deta hai — jaise register me har qatar ki
   apni hoti hai. */
.ruled {
    white-space: nowrap;
    background-image: var(--grad);
    background-repeat: no-repeat;
    background-position: 0 calc(100% - .04em);
    background-size: 0% .085em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    animation: ruledraw .8s var(--ease) .45s forwards;
}
@keyframes ruledraw { to { background-size: 100% .085em; } }
/* Chhoti screen par poora fiqra ek line me nahi aata — wahan lafz tootne
   dene chahiye, warna heading kinare se bahar nikal jati hai. */
@media (max-width: 560px) { .ruled { white-space: normal; } }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 3px; border-radius: var(--r-sm); }

.skip {
    position: absolute; left: 16px; top: -70px; z-index: 300;
    background: var(--surface); border: 1px solid var(--line);
    padding: 12px 20px; border-radius: var(--r); transition: top var(--t);
}
.skip:focus { top: 16px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Eyebrow ── */
.eyebrow {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .17em; text-transform: uppercase; color: var(--brand-3);
    display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .6; }
[data-theme="light"] .eyebrow { color: var(--brand-1); }

.head { max-width: 660px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.head h2 { margin-top: 16px; }
.head p { margin-top: 16px; }
.head--mid { margin-inline: auto; text-align: center; }
.head--mid .eyebrow::before { display: none; }

/* ── 3. Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--r); border: 1px solid transparent;
    font-family: var(--body); font-size: .94rem; font-weight: 600; white-space: nowrap;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t),
                background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--brand { background: var(--grad-cta); color: #fff; box-shadow: 0 4px 16px var(--brand-glow); }
.btn--brand:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--brand-glow); }
.btn--brand:active { transform: translateY(0); }
.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--line-3); }
.btn--ghost:hover { border-color: var(--brand-28); background: var(--card-hi); }
.btn--plain { color: var(--text-2); padding-inline: 12px; }
.btn--plain:hover { color: var(--text); }
.btn--lg { padding: 15px 26px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ── 4. Pills ──────────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
    border-radius: var(--r-full); border: 1px solid var(--line-3);
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
    color: var(--muted); background: var(--surface-2);
}
.pill--ok    { color: var(--ok);    border-color: var(--ok);    background: var(--ok-12); }
.pill--warn  { color: var(--alarm); border-color: var(--alarm); background: var(--alarm-12); }
.pill--cool  { color: var(--brand-3); border-color: var(--brand-3); background: var(--chill-12); }
[data-theme="light"] .pill--cool { color: var(--brand-1); border-color: var(--brand-1); }
.dot { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex: none; }

.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    transition: border-color var(--t), transform var(--t) var(--ease), background var(--t), box-shadow var(--t);
}

/* ── 5. Announce + nav ─────────────────────────────────────────── */
.announce {
    background: var(--surface-2); border-bottom: 1px solid var(--line-2);
    font-size: .82rem; color: var(--text-2); text-align: center; padding: 9px 16px;
}
.announce a { color: var(--brand-3); font-weight: 600; border-bottom: 1px solid transparent; }
[data-theme="light"] .announce a { color: var(--brand-1); }
.announce a:hover { border-bottom-color: currentColor; }
.announce .pill { margin-right: 8px; }

.top {
    position: sticky; top: 0; z-index: 100; height: var(--nav-h);
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t);
}
.top.is-stuck { border-bottom-color: var(--line); box-shadow: var(--sh-sm); }
.top__in { display: flex; align-items: center; gap: 26px; height: 100%; }
.top__logo { display: flex; align-items: center; flex: none; }
.top__logo img { height: 27px; width: auto; }
/* Logo ki jodi — zameen ke hisaab se.
   `lg-on-dark` ka wordmark safed hai, `lg-on-light` ka kaala. Dono header
   aur footer me lagti hai, isliye rule dono par ek saath. */
.lg-on-light { display: none; }
[data-theme="light"] .lg-on-dark  { display: none; }
[data-theme="light"] .lg-on-light { display: block; }
.top__nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.top__nav a {
    padding: 8px 12px; border-radius: var(--r-sm); font-size: .9rem; font-weight: 500;
    color: var(--text-2); transition: color var(--t-fast), background var(--t-fast);
}
.top__nav a:hover { color: var(--text); background: var(--surface-2); }
.top__act { display: flex; align-items: center; gap: 8px; }

.iconbtn {
    width: 38px; height: 38px; flex: none; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--surface-2); display: grid; place-items: center; color: var(--muted);
    transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.iconbtn:hover { color: var(--brand-3); border-color: var(--brand-28); }
.iconbtn svg { width: 17px; height: 17px; }
/* Sooraj/chaand — wahi dikhe jispar jaana hai */
.i-sun { display: none; } .i-moon { display: block; }
[data-theme="light"] .i-sun { display: block; }
[data-theme="light"] .i-moon { display: none; }

.burger { display: none; }
.mnav {
    display: none; position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 90;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 18px var(--pad) 28px; box-shadow: var(--sh-lg);
}
.mnav.is-open { display: block; }
.mnav a { display: block; padding: 13px 0; font-size: 1.02rem; border-bottom: 1px solid var(--line-2); color: var(--text-2); }
.mnav .btn { margin-top: 18px; }
/* Menu ke andar theme ka qatar — baaki links jaisa hi dikhta hai, taaki
   wo ek alag cheez na lage. */
.mnav__theme {
    display: none; width: 100%; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line-2);
    background: none; color: var(--text-2); font: inherit; font-size: 1.02rem;
    cursor: pointer; text-align: left;
}
.mnav__theme svg { width: 19px; height: 19px; flex: none; }


/* ── 6. Hero ───────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: clamp(44px, 6.5vw, 84px) clamp(40px, 6vw, 78px); }
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(760px 420px at 80% -10%, var(--brand-glow), transparent 68%),
        radial-gradient(560px 360px at 4% 6%, var(--chill-12), transparent 70%);
}
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(circle at 52% 22%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 52% 22%, #000 0%, transparent 72%);
}
.hero__grid {
    display: grid; gap: clamp(34px, 5vw, 60px); align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}
.hero h1 { margin: 18px 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: .84rem; color: var(--muted); }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust svg { width: 14px; height: 14px; color: var(--ok); }

/* ── 7. SIGNATURE: unit ka live readout ───────────────────────── */
.rig { position: relative; padding-bottom: 26px; }
.win { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--line-3); }
.win__url {
    /* `min-width: 0` ke bina neeche wala `ellipsis` bekaar hai.
       Flex item ka `min-width` bina kahe `auto` hota hai — wo apne matn ki
       poori chaudai se neeche sikudta hi nahi, isliye `overflow: hidden` ki
       naubat kabhi aati hi nahi. Phone par yahi dabba poore hero ko 21px
       bahar dhakel raha tha. */
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: 11px; color: var(--dim);
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ye kisi grahak ki asli screen nahi hai, aur wo saaf dikhna chahiye. */
.win__tag {
    flex: none; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
    border: 1px solid var(--line-3); border-radius: var(--r-sm); padding: 3px 7px;
}

.win__body { padding: 18px; display: grid; gap: 15px; }

.unit { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.unit__id { font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: .05em; }
.unit__name { font-family: var(--display); font-weight: 600; font-size: 1.04rem; margin-top: 3px; }


/* ── Warranty ki khidki — page ka signature ───────────────────────
   Patti khud waqt hai: baayan sira install ka din, daayan sira aaj.
   Bhara hua hissa wo arsa hai jo warranty ne dhaka; amber lakeer wo din
   jis ke baad bill customer ka.

   Har event ek chhota nishaan hai, aur uska rang batata hai ke us job ka
   paisa kis ne bhara. Isliye rang yahan sajawat nahi — wahi jaankari hai
   jo patti dena chahti hai.                                          */
.ww { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px 12px; }
.ww__cap {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--dim);
}
.ww__cap .mono { letter-spacing: .04em; text-transform: none; }

.ww__plot { margin-top: 14px; }

/* Events ki apni qatar, patti ke UPAR.
   Pehle ye dot patti par baithe the — teen hare neele gradient par aur ek
   amber dhaari wali dum par. Dono thande rang aapas me gum ho jate the,
   aur jo hissa sabse zyada batata hai wahi sabse kam dikhta tha. */
.ww__events { position: relative; height: 22px; }
.ww__bar {
    position: relative; height: 14px;
    border-radius: var(--r-full);
    /* Bina-dhaka arsa: halki dhaari, jaise khaali qatar. Thos rang dena
       use ek aur "haalat" bana deta; ye khaali hai, aur khaali hi lagna
       chahiye. */
    background:
        repeating-linear-gradient(115deg,
            var(--line-2) 0 5px, transparent 5px 10px),
        var(--surface-2);
    border: 1px solid var(--line);
}
.ww__in {
    position: absolute; inset: 0 auto 0 0; width: 81%;
    border-radius: var(--r-full); background: var(--grad);
    transform-origin: left center;
    animation: wwfill 1s var(--ease) .25s both;
}
@keyframes wwfill { from { transform: scaleX(.04); } to { transform: scaleX(1); } }

/* Wo din jab warranty khatam hui — poore page ka sabse ahem nuqta. Us se
   pehle bill claim ka, us ke baad grahak ka. Pehle ye 2px ki dhaari thi
   aur us baat ka wazan nahi utha rahi thi; ab patti ke dono taraf nikalti
   hai taaki nazar wahin ruke. */
.ww__x {
    position: absolute; top: -19px; bottom: -8px; left: 81%;
    width: 2px; margin-left: -1px; background: var(--alarm);
}
.ww__x::before {
    content: ""; position: absolute; left: 50%; top: -4px;
    width: 8px; height: 8px; margin-left: -4px;
    background: var(--alarm); transform: rotate(45deg);
}

/* Har event: ek dot aur uske neeche patti tak jati baareek dandi. */
.ww__n {
    position: absolute; bottom: 0; left: var(--at);
    width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
    opacity: 0; animation: pop .4s var(--ease) forwards;
}
.ww__n::after {
    content: ""; position: absolute; left: 50%; top: 100%;
    width: 1px; height: 8px; margin-left: -.5px;
    background: currentColor; opacity: .45;
}
.ww__n--claim { background: var(--ok);    color: var(--ok);    animation-delay: 1.05s; }
.ww__n--cust  { background: var(--alarm); color: var(--alarm); animation-delay: 1.35s; }
@keyframes pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.ww__ends {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
    padding-top: 11px; font-family: var(--mono); font-size: 10px; line-height: 1.45;
    color: var(--dim);
}
/* Amber lakeer 81% par hai — uska label bhi wahin hona chahiye, beech me
   nahi. Warna aankh label ko ghalat din se jodti hai. */
.ww__end-x { color: var(--alarm); text-align: center; margin-right: 8%; }

.ww__verdict {
    margin: 11px 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-2);
}
.ww__k { color: var(--ok); font-weight: 600; }
.ww__k--cust { color: var(--alarm); }

/* Chhoti screen par teen tareekhein ek qatar me nahi samatin — beech wali
   apni line le leti hai, warna teenon ek doosre par chadh jati hain. */
@media (max-width: 460px) {
    .ww__ends { flex-wrap: wrap; }
    .ww__end-x { order: 3; width: 100%; }
}

.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; }
.mini dt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.mini dd { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin-top: 4px; }
/* Tareekh wala khaana. `1.2rem` par "Ended 18 Mar 26" do line me tootta
   hai aur teenon khaane alag oonchai ke ho jate hain. */
.mini dd.mini__sm { font-family: var(--mono); font-weight: 600; font-size: .82rem; line-height: 1.35; letter-spacing: -.01em; }

.qbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qbox__h { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--muted); }
.qrow { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--line-2); }
.qrow:last-child { border-bottom: 0; }
.av { width: 26px; height: 26px; flex: none; border-radius: var(--r-full); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fff; }
.qrow__m { flex: 1; min-width: 0; }
.qrow__m b { display: block; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow__m small { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }

/* Card ke bahar, uske neeche wale kinare par — pehle ye service history
   ki rows par chadh jata tha aur do cheezein ek doosre me ghus'ti thin. */
.chip {
    position: absolute; right: -18px; bottom: -22px;
    background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r);
    padding: 11px 15px; box-shadow: var(--sh); display: flex; align-items: center; gap: 10px;
    animation: bob 5.5s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.chip b { display: block; font-size: .82rem; }
.chip small { font-family: var(--mono); font-size: 10px; color: var(--dim); }

/* ── 8. Trust strip ────────────────────────────────────────────── */


/* ── 9. Problem → solution ─────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 36px); }
.panel--before { background: var(--surface); border-style: dashed; }
.panel--after { background: var(--card); position: relative; overflow: hidden; }
.panel--after::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); }
.panel h3 { margin-bottom: 18px; }
.panel li { display: flex; gap: 12px; padding-block: 11px; font-size: .94rem; color: var(--text-2); border-bottom: 1px solid var(--line-2); }
.panel li:last-child { border-bottom: 0; }
.panel li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.panel--before svg { color: var(--bad); }
.panel--after svg { color: var(--ok); }

/* ── 10. Bento ─────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .card { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.bento .card:hover { border-color: var(--brand-28); transform: translateY(-3px); background: var(--card-hi); box-shadow: var(--sh); }
.b-4 { grid-column: span 4; } .b-3 { grid-column: span 3; } .b-2 { grid-column: span 2; }
.ficon { width: 38px; height: 38px; border-radius: var(--r); display: grid; place-items: center; background: var(--brand-12); color: var(--brand-3); border: 1px solid var(--brand-28); }
[data-theme="light"] .ficon { color: var(--brand-1); }
.ficon svg { width: 18px; height: 18px; }
.bento h3 { font-size: 1.05rem; }
.bento p { font-size: .9rem; }

.trail { margin-top: auto; padding-top: 16px; display: grid; gap: 7px; }
.trail div { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.trail div span { margin-left: auto; color: var(--dim); }
.trail i { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--brand-3); flex: none; }

.wbar { height: 8px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line-2); overflow: hidden; }
.wbar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 1.3s var(--ease); }
.wmeta { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.wwrap { margin-top: auto; padding-top: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; }

/* ── 11. Lifecycle rail ────────────────────────────────────────── */
.life { background: var(--surface); border-block: 1px solid var(--line-2); }
.rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; margin-top: 40px; }
.rail::before { content: ""; position: absolute; top: 18px; left: 7%; right: 7%; height: 2px; background: var(--grad); opacity: .32; }
.stage { position: relative; padding-top: 52px; }
.stage__n {
    position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: var(--r-full);
    background: var(--bg); border: 2px solid var(--brand-28); color: var(--brand-3);
    display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700;
}
[data-theme="light"] .stage__n { color: var(--brand-1); }
.stage h3 { font-size: 1rem; margin-bottom: 7px; }
.stage p { font-size: .87rem; }
.stage .pill { margin-top: 14px; }

/* ── 12. Role tabs ─────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tab {
    padding: 9px 17px; border-radius: var(--r-full); font-size: .88rem; font-weight: 600;
    border: 1px solid var(--line); color: var(--muted); background: var(--surface);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tab:hover { color: var(--text); border-color: var(--line-3); }
.tab[aria-selected="true"] { background: var(--brand-12); color: var(--brand-3); border-color: var(--brand-28); }
[data-theme="light"] .tab[aria-selected="true"] { color: var(--brand-1); }

.tp { display: none; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 48px); align-items: center; }
.tp.is-on { display: grid; animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.tp h3 { font-size: clamp(1.28rem, 2.1vw, 1.65rem); margin-bottom: 14px; }
.tp ul { margin-top: 18px; display: grid; gap: 11px; }
.tp li { display: flex; gap: 11px; font-size: .93rem; color: var(--text-2); }
.tp li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--brand-3); }
[data-theme="light"] .tp li svg { color: var(--brand-1); }

.screen { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh); }
.screen__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.rows { display: grid; gap: 9px; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); }
.row b { font-size: .85rem; font-weight: 600; }
.row small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 1px; }
.row .pill { margin-left: auto; }
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bar__t { height: 9px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-full); overflow: hidden; }
.bar__f { display: block; height: 100%; width: 0; background: var(--grad); transition: width 1.1s var(--ease); }

/* ── 13. Pricing ───────────────────────────────────────────────── */
.toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 38px; flex-wrap: wrap; }
.toggle__l { font-size: .9rem; font-weight: 600; color: var(--muted); transition: color var(--t-fast); }
.toggle__l.is-on { color: var(--text); }
.switch { width: 50px; height: 28px; flex: none; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line-3); position: relative; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--grad); transition: transform var(--t) var(--ease); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }
.save { font-family: var(--mono); font-size: 10.5px; color: var(--ok); background: var(--ok-12); border: 1px solid var(--ok); padding: 3px 10px; border-radius: var(--r-full); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan { padding: 30px 26px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.plan--hi { border-color: var(--brand-28); background: var(--card-hi); box-shadow: 0 0 0 1px var(--brand-12), var(--sh); }
.plan__flag { position: absolute; top: -11px; left: 26px; background: var(--grad-cta); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-full); }
.plan__n { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.plan__d { font-size: .86rem; color: var(--muted); margin-top: 4px; }
.plan__p { display: flex; align-items: flex-end; gap: 6px; }
.plan__p .amt { font-family: var(--display); font-weight: 700; font-size: 2.25rem; letter-spacing: -.03em; line-height: 1; }
.plan__p .per { font-size: .8rem; color: var(--dim); padding-bottom: 5px; }
.plan__alt { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.plan ul { display: grid; gap: 10px; font-size: .88rem; color: var(--text-2); }
.plan li { display: flex; gap: 10px; }
.plan li svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--ok); }
.plan .btn { margin-top: auto; }

/* ── 14. Apps ──────────────────────────────────────────────────── */
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.appc { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.appc__m { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* ── 15. FAQ ───────────────────────────────────────────────────── */
.faq { max-width: 820px; margin-inline: auto; }
.faq__i { border-bottom: 1px solid var(--line-2); }
.faq__q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 20px 0; text-align: left; font-family: var(--display); font-weight: 600; font-size: 1.02rem;
    transition: color var(--t-fast);
}
.faq__q:hover { color: var(--brand-3); }
[data-theme="light"] .faq__q:hover { color: var(--brand-1); }
.faq__q svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform var(--t) var(--ease), color var(--t-fast); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); color: var(--brand-3); }
.faq__a { overflow: hidden; height: 0; transition: height var(--t) var(--ease); }
.faq__a p { padding-bottom: 20px; font-size: .94rem; max-width: 70ch; }

/* ── 16. CTA + contact + footer ────────────────────────────────── */
.cta {
    position: relative; overflow: hidden; text-align: center;
    border: 1px solid var(--line-3); border-radius: var(--r-xl); background: var(--surface);
    padding: clamp(36px, 6vw, 76px) var(--pad);
}
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 240px at 50% 0%, var(--brand-glow), transparent 70%); }
.cta > * { position: relative; }
.cta p { max-width: 54ch; margin: 16px auto 0; }
.cta .hero__cta { justify-content: center; }

.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.cbox { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 6px; background: var(--card); }
.cbox a { font-family: var(--mono); font-size: 15px; word-break: break-all; }
.cbox a:hover { color: var(--brand-3); }

.foot { border-top: 1px solid var(--line-2); background: var(--surface); padding-block: 56px 30px; margin-top: clamp(54px, 8vw, 96px); }
.foot__g { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 32px; }
.foot__a img { height: 26px; }
.foot__a p { font-size: .88rem; margin-top: 16px; max-width: 36ch; }
.foot__c h4 { font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.foot__c li { margin-bottom: 10px; }
.foot__c a { font-size: .89rem; color: var(--text-2); transition: color var(--t-fast); }
.foot__c a:hover { color: var(--brand-3); }
[data-theme="light"] .foot__c a:hover { color: var(--brand-1); }
.foot__b { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-2); margin-top: 44px; padding-top: 24px; font-size: .82rem; color: var(--dim); }
.foot__b nav { display: flex; gap: 20px; }

/* ── 20. Chhapa hua document ─────────────────────────────────────
   `#paperwork` me namoona job card. Ye asli kaagaz jaisa dikhna
   chahiye — isliye hamesha safed, dono theme me. Reader ke haath me
   jo cheez jati hai wo safed hi hoti hai; use dark kar dena jhoot
   bolna hoga.

   Halka sa tirchha (rotate) — mez par pada hua kaagaz bilkul seedha
   nahi hota, aur yahi ek chhoti si baat use screenshot ke bajaye
   cheez bana deti hai. */
.doc {
    background: var(--paper);
    color: var(--paper-ink);
    border-radius: var(--r);
    padding: 20px;
    font-size: 12px;
    max-width: 420px;
    margin-inline: auto;
    box-shadow: var(--sh-lg), 0 2px 0 rgba(255, 255, 255, .5) inset;
    transform: rotate(-1.1deg);
    transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.doc:hover { transform: rotate(0deg) translateY(-4px); }
[data-theme="light"] .doc { border: 1px solid var(--line); }

.doc__top { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--paper-ink); }
.doc__title { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.doc__no { font-family: var(--mono); font-size: 10.5px; color: #4A6076; margin-top: 2px; }
.doc__sp { flex: 1; }
.doc__tk { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .06em; color: #4A6076; }

.doc__rows { display: grid; gap: 7px; margin: 12px 0; }
.doc__row { display: flex; align-items: baseline; gap: 10px; }
.doc__k { width: 96px; flex: none; font-size: 10.5px; color: #6B8095; }
.doc__v { font-family: var(--mono); font-size: 11px; color: var(--paper-ink); }

.doc__foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed #C3D2DF; }
.doc__qr { position: relative; width: 62px; height: 62px; flex: none; }
.doc__qr img { width: 100%; height: 100%; }
/* QR ke gird halki dhadkan — wahi nishaan jise scan kar ke log yahan
   pahunchte hain. Ek hi jagah harkat, isliye ye shor nahi banti. */
.doc__qr::after {
    content: ""; position: absolute; inset: -7px; border-radius: 10px;
    border: 1.5px solid var(--brand-1);
    animation: qrpulse 2.6s ease-in-out infinite;
}
@keyframes qrpulse { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .85; transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .doc__qr::after { animation: none; opacity: .55; } }
.doc__pitch { font-size: 10.5px; line-height: 1.45; color: #4A6076; }
.doc__pitch strong { display: block; font-size: 11.5px; color: var(--paper-ink); }
/* ── 17. Reveal ────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

/* ── 18. Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* `minmax(0, …)` yahan bhi chahiye. Sirf `1fr` likhna asal me
       `minmax(auto, 1fr)` hai, aur wo `auto` apne andar ki cheez ki
       kam-se-kam chaudai maan leta hai — yaani mock apne column ko bahar
       dhakel deta hai. Bade screen par ye hifazat lagi hui thi; chhoti par
       theek wahin kho jati thi jahan jagah sabse kam hai. */
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .chip { right: 8px; }
    .b-4, .b-3, .b-2 { grid-column: span 3; }
    .rail { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .rail::before { display: none; }
    .plans { grid-template-columns: 1fr; }
    .plan--hi { order: -1; }
    .foot__g { grid-template-columns: 1fr 1fr; }
    .foot__a { grid-column: span 2; }
}
@media (max-width: 860px) {
    /* Header par ab sirf naam, ek asli kaam, aur menu. Theme ka chunav
       menu me chala jata hai — 375px par teen se zyada cheezein samati
       hi nahi, aur pehle wo 21px bahar nikal jati thin. */
    .top__act > [data-theme-btn] { display: none; }
    .mnav__theme { display: flex; }
    .top__logo img { width: 132px; height: auto; }
    .top__nav { display: none; }
    .top__act .btn--plain { display: none; }
    .burger { display: grid; }
    .tp.is-on { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; }
    .b-4, .b-3, .b-2 { grid-column: span 1; }
    .rail { grid-template-columns: 1fr; gap: 30px; }
    .stage { padding-top: 0; padding-left: 54px; }
    .stage__n { top: -2px; }
    .mini { grid-template-columns: 1fr; gap: 8px; }
    .mini > div { display: flex; align-items: baseline; justify-content: space-between; }
    .mini dd { margin-top: 0; }
    .chip { position: static; margin-top: 16px; width: 100%; animation: none; }
    .hero__cta .btn { flex: 1 1 100%; }
    .foot__g { grid-template-columns: 1fr; }
    .foot__a { grid-column: span 1; }
    .foot__b { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bar { grid-template-columns: 72px 1fr 36px; }
    .top__act .btn--brand { padding-inline: 14px; }
}

/* ── 19. Kam harkat ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .rv { opacity: 1; transform: none; }
    /* Jo cheezein animation ke bharose par nazar aati hain, unhe
       yahan HAATH SE poora karna padta hai — warna kam-harkat wale
       ke liye wo kabhi dikhti hi nahi. */
    .ww__in { transform: none; }
    .ww__n { opacity: 1; transform: none; }
    .ruled { background-size: 100% .085em; }
}

/* ── 21. Ungli ke naap ─────────────────────────────────────────────
   Phone par footer ke link 19px oonche the aur pricing ka switch 28px —
   dono ungli ke liye chhote. WCAG kam se kam 24px kehta hai, aur amal me
   44px ke aas-paas hi galti se dabna band hota hai.

   Sirf chhoti screen par — desktop par mouse ka nishana barik hota hai,
   wahan itni jagah faltu lagti hai. */
@media (max-width: 860px) {
    .foot__c a,
    .foot__b nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .foot__c li { margin-bottom: 0; }

    .switch { width: 58px; height: 34px; }
    .switch::after { width: 26px; height: 26px; }
    .switch[aria-checked="true"]::after { transform: translateX(24px); }
}