:root{
--g:#1C9323; /* action green — buttons, links, green text on LIGHT */
--gi:#00A82D; /* icon green — strokes, gradient stops, glows */
--g2:#3FD15F; /* glow green — green on DARK only */
--glogo:#3BA341; /* logo mark only */
--gsoft:rgba(59, 163, 65, 0.05); /* the only tinted fill */
--gline:#C2E2C4; /* the only pill border */
--ink:#0E0E0E; --muted:#4E4E4E; --faint:#7A827A;
--line:#EBEBEB; --line2:#ECECEC;
--black:#000; --black2:#0A0A0A; --panel:#F7F9F8;
/* The live site keeps two dark grounds: a neutral black for the home page
and a dark green-black for product pages. Both are in use — do not
collapse them into one. */
--darkg:#0B1A12; --darkg2:#10241A;
/* Two soft tints, also both in use: the home page's is far lighter. */
--tint-home:rgba(59,163,65,.05); --tint-page:#E8F7EC;
--lined:rgba(255,255,255,.10);
--serif:"Libertinus Serif Display",Georgia,serif;
--sans:'Inter',system-ui,-apple-system,sans-serif;
--r-pill:999px; --r-xl:24px; --r-lg:20px; --r-md:16px; --r-sm:14px; --r-xs:10px;
--sh-flat:0 1px 2px rgba(15,23,42,.04);
--sh-lift:0 20px 40px -20px rgba(0,168,45,.18);
--sh-cta:0 12px 30px -8px rgba(0,168,45,.4);
--sh-ui:0 10px 30px rgba(15,23,42,.08);
--muted2:#6B6B6B; /* --pp-muted. Card paragraphs, NOT --muted. */
--ink2:#334155; /* --cr-ink-2. Check lists and dense body. */
--link:#35B23E; /* the "Know more" green */
--cardgrey:#F8F8F8; /* pp-feature-card ground */
/* measured off the live site, 23 Sep 2026 */
--sh-card:0 26px 50px -30px rgba(15,23,42,.32);
--sh-soft:0 24px 46px -30px rgba(15,23,42,.30);
--sh-photo:0 30px 60px -20px rgba(0,0,0,.35);
--sh-btn:0 4px 10px rgba(0,168,45,.25);
--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:#0f172a;background:#fff;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.cr-sec{padding:100px 0;background:#fff;position:relative}
.cr-sec--dark{background:var(--black);color:#fff}
.cr-sec--ink{background:var(--black2);color:#fff}
.cr-sec--tint{background:var(--gsoft)}
.cr-sec--panel{background:var(--panel)}
/* --container-max on the live site is 1320px. Measured 23 Sep 2026. */
.cr-wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.cr-wrap--wide{max-width:1320px}
.cr-wrap--narrow{max-width:1100px}
.cr-head{margin-bottom:64px} /* .hc-sec-head{padding-bottom:64px} */
.cr-head--center{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.cr-head .cr-pill{margin-bottom:22px}
.cr-g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cr-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cr-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cr-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cr-split--rev>*:first-child{order:2}
.cr-bento-a{display:grid;grid-template-columns:1fr 1.6fr;gap:20px;margin-bottom:20px}
.cr-bento-b{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cr-headrow{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;
margin-bottom:56px}
/* ── TYPE ───────────────────────────────────────────────────────────────── */
.cr-t{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em;
margin:0;color:var(--ink);text-wrap:balance}
.cr-t--hero{font-size:64px;color:#fff}
.cr-t--feat{font-size:56px}
.cr-t--sec{font-size:48px}
.cr-t em{font-style:normal;color:var(--g)}
.cr-sec--dark .cr-t,.cr-sec--ink .cr-t{color:#fff}
.cr-sec--dark .cr-t em,.cr-sec--ink .cr-t em{color:var(--g2)}
.cr-lead{font-size:16px;line-height:24px;letter-spacing:-.011em;font-weight:400;
color:var(--muted);max-width:520px;margin:0}
.cr-sec--dark .cr-lead,.cr-sec--ink .cr-lead{color:rgba(255,255,255,.72)}
.cr-lead--fade{color:var(--ink)}
.cr-lead--fade span{color:rgba(78,78,78,.55)}
.cr-sec--dark .cr-lead--fade{color:#fff}
.cr-sec--dark .cr-lead--fade span{color:rgba(255,255,255,.45)}
.cr-ct{font-size:16px;line-height:24px;letter-spacing:-.02em;font-weight:500;
color:var(--ink);margin:0 0 8px}
.cr-cb{font-size:14px;line-height:20px;letter-spacing:-.01em;font-weight:400;
color:var(--muted);margin:0}
.cr-sec--dark .cr-ct,.cr-sec--ink .cr-ct{color:#fff}
.cr-sec--dark .cr-cb,.cr-sec--ink .cr-cb{color:rgba(255,255,255,.6)}
.cr-micro{font-size:13px;line-height:18px;color:var(--faint);margin:0}
/* ── PILLS / TAGS ───────────────────────────────────────────────────────── */
.cr-pill{display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--gline);background:#fff;color:var(--g);border-radius:99px;
padding:6px 12px;font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.02em}
.cr-sec--dark .cr-pill,.cr-sec--ink .cr-pill{background:transparent;
border-color:rgba(63,209,95,.35);color:var(--g2)}
.cr-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;
font-size:12px;font-weight:500;color:var(--g);background:var(--gsoft)}
.cr-eyebrow{display:inline-block;padding:8px 10px;border-radius:200px;
background:rgba(235,235,235,.4);color:#0a0a0a;font-size:12px;font-weight:600;
line-height:16px;letter-spacing:.04em;text-transform:uppercase}
/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.cr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 32px;border-radius:99px;border:0;font-family:var(--sans);
font-size:16px;font-weight:500;line-height:23.52px;letter-spacing:-.02em;
text-decoration:none;cursor:pointer;transition:transform .2s ease}
.cr-btn:hover{transform:scale(1.02)}
.cr-btn--p{background:var(--g);color:#fff;box-shadow:var(--sh-cta)}
.cr-btn--w{background:#fff;color:rgba(7,11,18,1)}
.cr-btn--ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.45)}
.cr-btn--soft{background:rgba(235,246,236,1);color:var(--g)}
.cr-btn--lg{padding:16px 32px;font-size:15px}
.cr-btns{display:flex;flex-wrap:wrap;gap:14px}
.cr-link{display:inline-flex;align-items:center;gap:6px;color:var(--g);font-size:14px;
font-weight:500;text-decoration:none;transition:gap .2s ease}
.cr-link:hover{gap:11px}
.cr-sec--dark .cr-link,.cr-sec--ink .cr-link{color:var(--g2)}
/* ── CARDS ──────────────────────────────────────────────────────────────── */
.cr-card{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);
padding:26px;height:100%;box-shadow:var(--sh-flat);
display:flex;flex-direction:column;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
/* THE VISUAL SLOT INSIDE A CARD.
Fixed height is deliberate: it is what keeps three cards in a row aligned.
Never replace this with an inline style — unequal visual heights are the
single most common cause of a page looking "misaligned". */
.cr-vis{height:216px;flex:none;border-radius:var(--r-md);background:var(--panel);
display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;
margin:-4px -4px 22px;position:relative}
.cr-vis--tall{height:270px}
.cr-vis--short{height:158px}
.cr-vis>*{max-width:100%}
/* The text block under a card visual. Because .cr-vis has a fixed height,
every card in a row starts its text at the same y automatically. Do not add
margin-top:auto here — that pushes shorter cards down and breaks the row. */
.cr-card__txt{margin-top:0}
.cr-card:hover{transform:translateY(-4px);border-color:rgba(0,168,45,.3);box-shadow:var(--sh-lift)}
.cr-card--green{background:radial-gradient(100.15% 100.15% at 0% -0.15%,#28BE56 0%,#00A62F 100%);
border:0;color:#fff}
.cr-card--green .cr-ct,.cr-card--green .cr-cb{color:#fff}
.cr-card--green .cr-cb{color:rgba(255,255,255,.85)}
.cr-card--green .cr-link{color:#fff}
.cr-card--flat{box-shadow:none}
.cr-card--flat:hover{transform:none;box-shadow:var(--sh-lift)}
.cr-card--dark{background:var(--black2);border:1px solid rgba(63,209,95,.25);
border-radius:var(--r-md);box-shadow:0 0 40px rgba(63,209,95,.08) inset;color:#fff;padding:0;
overflow:hidden;height:100%;display:flex;flex-direction:column}
.cr-card--dark .cr-vis{background:transparent;margin:0;height:200px}
.cr-card--dark .cr-card__txt{padding:0 22px 26px}
.cr-card--pad{padding:26px}
/* .hc-feat-ic on the live site: 48 square, radius 10, 5% green, icon 22. */
.cr-chip{width:48px;height:48px;border-radius:10px;flex:none;background:var(--gsoft);
color:var(--gi);display:inline-flex;align-items:center;justify-content:center}
/* on a dark section the chip is SOLID green, not a gradient — .hc-plat-feat-ic */
.cr-chip--solid{background:var(--g);color:#fff}
.cr-chip--lg{width:48px;height:48px;border-radius:14px}
.cr-chip svg{width:22px;height:22px;stroke-width:1.75;fill:none;stroke:currentColor;
stroke-linecap:round;stroke-linejoin:round}
.cr-sec--dark .cr-chip{background:rgba(63,209,95,.14);color:var(--g2)}
/* row: chip + text, the most-used sub-layout on the site */
.cr-row{display:flex;gap:16px;align-items:flex-start}
.cr-rows{display:flex;flex-direction:column}
.cr-rows>.cr-row{padding:20px 0;border-top:1px solid var(--line)}
.cr-rows>.cr-row:first-child{border-top:0;padding-top:0}
.cr-sec--dark .cr-rows>.cr-row{border-color:var(--lined)}
/* ── SIGNATURE DEVICES ──────────────────────────────────────────────────── */
.cr-mesh{background-image:radial-gradient(rgba(63,209,95,.07) 1px,transparent 1px);
background-size:22px 22px}
.cr-mesh--dark{background-image:radial-gradient(rgba(63,209,95,.10) 1px,transparent 1px);
background-size:22px 22px}
.cr-panel{background:var(--panel);border-radius:var(--r-lg);padding:34px;position:relative;
overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center}
/* the green dome — ONCE per page, between the closing CTA and the footer */
/* ── THE DOME ───────────────────────────────────────────────────────────────
Copied verbatim from the live site (.gradient-section + .dome). Do not
rewrite the gradient — this is the developer's own CSS.
How it reads: the element's base is WHITE and the gradient radiates out
from the bottom centre, so you get a white bloom along the bottom, a green
ribbon above it, and black at the top and corners. It is a glow rising out
of the light section below, not a hole in a black one.
⚠ The base colour is the part that goes wrong. Painted on black instead of
white, the same gradient puts a dark ellipse at the bottom and blows the
green out into a slab — that is the "ugly green band" defect. (F-29)
WHERE IT GOES: exactly once per solutions page, between the closing CTA and
the footer. Never against the hero — on a solutions page the hero ends in
solid black and cuts straight to the next section, with no transition
device at all. Only the home page runs a second, mid-page dome. (F-32/F-34) */
.cr-dome{position:relative;width:100%;height:340px;overflow:hidden;isolation:isolate;
background-color:#fff;
background-image:radial-gradient(140.64% 100% at 50% 100%,
rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 38.07%,#00A62F 73.08%,#000 100%)}
.cr-dome--up{transform:scaleY(-1)}
/* the full-width gradient CTA band that closes a bento section */
.cr-band{margin-top:56px;padding:24px 32px;border-radius:var(--r-md);
background:linear-gradient(90deg,#35BA55,#0F8A2A);color:#fff;display:flex;flex-wrap:wrap;
align-items:center;justify-content:space-between;gap:16px}
.cr-band p{font-size:18px;font-weight:500;line-height:24px;letter-spacing:-.02em;margin:0}
.cr-band a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
/* ── PHOTO SLOT ─────────────────────────────────────────────────────────────
Artifacts cannot load external images. This renders a deliberate, designed
dark banner so the page reads as complete, and carries the production
markup in a comment for the developer. Never leave a bare broken . */
.cr-photo{position:relative;width:100%;height:100%;overflow:hidden;
background:
radial-gradient(65% 55% at 74% 26%,rgba(150,175,160,.42) 0%,transparent 62%),
radial-gradient(48% 42% at 86% 58%,rgba(63,209,95,.20) 0%,transparent 64%),
radial-gradient(80% 62% at 16% 34%,rgba(52,86,70,.42) 0%,transparent 66%),
radial-gradient(120% 90% at 50% 120%,rgba(0,166,47,.30) 0%,transparent 58%),
linear-gradient(180deg,#182020 0%,#0d1210 52%,#000 100%)}
.cr-photo::before{content:"";position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
background-size:64px 64px,64px 64px,15px 15px;
-webkit-mask-image:radial-gradient(90% 70% at 60% 40%,#000 0%,transparent 78%);
mask-image:radial-gradient(90% 70% at 60% 40%,#000 0%,transparent 78%)}
.cr-photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 58%,#000 100%)}
/* Bottom-left, not top-right: the fixed header lives top-right and the two
collided on every hero. (F-17) */
.cr-photo__note{position:absolute;left:16px;bottom:16px;z-index:3;font-size:10.5px;
letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.40);
border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;
backdrop-filter:blur(4px)}
/* ══════════════════════════════════════════════════════════════════════════
THE DRAWN-UI KIT
This is what makes a Crelio page look expensive. Never draw a plain box
with a label in it — build the real thing out of these parts.
══════════════════════════════════════════════════════════════════════════ */
/* app frame — the browser/dashboard shell */
.ui{background:#fff;border:1px solid var(--line2);border-radius:var(--r-sm);
box-shadow:var(--sh-ui);overflow:hidden;font-size:12px;color:#0f172a;width:100%}
.ui__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;
border-bottom:1px solid var(--line2);background:#fbfcfb}
.ui__dot{width:8px;height:8px;border-radius:50%;background:#E2E6E2}
.ui__dot--g{background:#4ED06A}.ui__dot--a{background:#F0C674}.ui__dot--r{background:#EE8878}
.ui__title{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--ink)}
.ui__body{padding:14px}
.ui__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ui__hd h5{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
/* data rows — patient lists, order lists, sample lists */
.ui-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-xs);
border:1px solid var(--line2);background:#fff;margin-bottom:7px}
.ui-row:last-child{margin-bottom:0}
.ui-row--hi{border-color:rgba(0,168,45,.35);background:rgba(232,247,236,.5)}
.ui-av{width:26px;height:26px;border-radius:50%;flex:none;background:var(--gsoft);
color:var(--g);display:flex;align-items:center;justify-content:center;
font-size:9.5px;font-weight:600}
.ui-row__m{flex:1;min-width:0}
.ui-row__m b{display:block;font-size:11.5px;font-weight:600;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-row__m span{display:block;font-size:10px;color:var(--faint);margin-top:1px}
/* status pills — colour AND word, never colour alone */
.ui-pill{font-size:9.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;
flex:none}
.ui-pill--g{background:var(--gsoft);color:#137019}
.ui-pill--a{background:#FEF6E7;color:#8C6410}
.ui-pill--r{background:#FCEBE9;color:#A63325}
.ui-pill--b{background:#E9F0FD;color:#1856B8}
.ui-pill--n{background:#F1F3F1;color:#5C655C}
/* KPI tiles */
.ui-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px}
.ui-kpi{border:1px solid var(--line2);border-radius:var(--r-xs);padding:10px 11px;background:#fff}
.ui-kpi span{display:block;font-size:9.5px;color:var(--faint);letter-spacing:.03em;
text-transform:uppercase;margin-bottom:4px}
.ui-kpi b{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1.1}
.ui-kpi i{display:block;font-style:normal;font-size:9.5px;margin-top:3px;color:var(--g)}
.ui-kpi i.dn{color:#C0392B}
/* key/value grid */
.ui-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.ui-kv div span{display:block;font-size:9.5px;color:var(--faint);margin-bottom:2px}
.ui-kv div b{display:block;font-size:12px;font-weight:600;color:var(--ink);
font-variant-numeric:tabular-nums}
/* table */
.ui-tb{width:100%;border-collapse:collapse;font-size:11px}
.ui-tb th{text-align:left;font-size:9px;font-weight:600;letter-spacing:.07em;
text-transform:uppercase;color:var(--faint);padding:7px 8px;border-bottom:1px solid var(--line2)}
.ui-tb td{padding:8px;border-bottom:1px solid #F4F6F4;color:#293029;
font-variant-numeric:tabular-nums}
.ui-tb tr:last-child td{border-bottom:0}
/* bar chart */
.ui-bars{display:flex;align-items:flex-end;gap:6px;height:88px;padding-top:8px}
.ui-bars i{flex:1;background:#EDF0ED;border-radius:3px 3px 0 0;display:block;position:relative}
.ui-bars i.on{background:linear-gradient(180deg,#3FD15F,#00A82D)}
.ui-bars i.on::after{content:attr(data-v);position:absolute;top:-15px;left:50%;
transform:translateX(-50%);font-size:9px;font-weight:600;color:var(--g)}
.ui-axis{display:flex;gap:6px;margin-top:6px}
.ui-axis span{flex:1;text-align:center;font-size:8.5px;color:var(--faint)}
/* area chart — inline SVG, scales to its box */
.ui-area{width:100%;height:96px;display:block}
/* donut — pure CSS conic */
.ui-donut{width:104px;height:104px;border-radius:50%;flex:none;position:relative;
background:conic-gradient(var(--g) 0 62%,#7DE083 62% 79%,#CFE9D4 79% 100%)}
.ui-donut::after{content:"";position:absolute;inset:15px;border-radius:50%;background:#fff}
.ui-donut__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;z-index:2}
.ui-donut__c b{font-size:17px;font-weight:600;color:var(--ink);line-height:1;
font-variant-numeric:tabular-nums}
.ui-donut__c span{font-size:8.5px;color:var(--faint);margin-top:2px}
.ui-legend{display:flex;flex-direction:column;gap:7px;font-size:10.5px}
.ui-legend div{display:flex;align-items:center;gap:7px;color:#3A423A}
.ui-legend i{width:8px;height:8px;border-radius:2px;flex:none}
.ui-legend b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink)}
/* progress meter */
.ui-meter{height:6px;border-radius:99px;background:#EDF0ED;overflow:hidden;flex:1}
.ui-meter i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,#3FD15F,#00A82D)}
/* alert card — dark, for exception/critical UI */
.ui-alert{border-radius:var(--r-sm);overflow:hidden;background:#0f1310;
border:1px solid rgba(255,255,255,.09)}
.ui-alert__h{background:linear-gradient(90deg,#00A82D,#067A24);color:#fff;padding:9px 13px;
font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.ui-alert__h.warn{background:linear-gradient(90deg,#C9971C,#96690A)}
.ui-alert__b{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:14px}
.ui-alert__b span{display:block;font-size:9.5px;color:#8A948C;margin-bottom:3px}
.ui-alert__b b{display:block;font-size:12.5px;color:#fff;font-weight:500;
font-variant-numeric:tabular-nums}
.ui-alert__b b.warn{color:#F2C14E}
/* flow diagram — node → node → node */
.ui-flow{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:center;
width:100%}
.ui-node{border:1px solid var(--line2);border-radius:var(--r-xs);background:#fff;padding:10px 6px;
text-align:center;flex:1 1 0;min-width:0;position:relative}
.ui-node b{display:block;width:30px;height:30px;margin:0 auto 7px;border-radius:9px;
background:var(--gsoft);color:var(--gi);display:flex;align-items:center;justify-content:center}
.ui-node b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;
stroke-linecap:round;stroke-linejoin:round}
.ui-node.on b{background:linear-gradient(180deg,#3FD15F,#00A82D);color:#fff}
.ui-node span{font-size:9.5px;color:#3A423A;display:block;line-height:1.3}
.ui-node__i{position:absolute;top:6px;right:7px;font-size:8.5px;color:var(--faint);
font-weight:600}
.ui-arrow{color:#C8D0C9;flex:none}
.ui-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
/* hub-and-spoke — the "everything connects to Crelio" diagram */
.ui-hub{position:relative;width:100%;max-width:330px;aspect-ratio:1/.72;margin:0 auto}
.ui-hub__c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;
height:78px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#4EE07A 0%,
#17B93E 60%,#009E29 100%);box-shadow:0 12px 34px -10px rgba(0,168,45,.55);display:flex;
align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;z-index:2}
.ui-hub__n{position:absolute;width:38px;height:38px;border-radius:11px;background:#fff;
border:1px solid var(--line2);box-shadow:var(--sh-flat);display:flex;align-items:center;
justify-content:center;color:var(--gi);z-index:2}
.ui-hub__n svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.ui-hub__l{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}
/* phone frame */
.ui-phone{width:216px;border-radius:26px;border:8px solid #141815;background:#fff;
overflow:hidden;box-shadow:0 26px 60px -22px rgba(0,0,0,.45);margin:0 auto}
.ui-phone__n{height:20px;background:#141815;position:relative}
.ui-phone__n::after{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);
width:56px;height:5px;border-radius:99px;background:#2A302C}
.ui-phone__b{padding:12px}
/* barcode */
.ui-code{display:flex;align-items:flex-end;gap:1.5px;height:38px}
.ui-code i{width:2px;background:var(--ink);border-radius:1px;height:100%}
.ui-code i:nth-child(3n){width:3.5px}
.ui-code i:nth-child(4n){height:76%}
.ui-code i:nth-child(5n){width:1.5px;height:88%}
/* floating stat card — for the panel compositions */
.ui-stat{background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-ui);padding:18px 20px;
display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:212px}
.ui-stat b{display:block;font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
line-height:1.05;font-variant-numeric:tabular-nums}
.ui-stat span{display:block;font-size:11.5px;color:var(--faint);margin-top:3px}
/* ── PROCESS RAIL ───────────────────────────────────────────────────────── */
.cr-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative}
.cr-rail__s{text-align:center;padding:0 10px;position:relative}
.cr-rail__s::before{content:"";position:absolute;top:17px;left:0;width:100%;height:2px;
background:var(--line)}
.cr-rail__s.done::before{background:var(--g)}
.cr-rail__s:first-child::before{left:50%;width:50%}
.cr-rail__s:last-child::before{width:50%}
.cr-rail__d{position:relative;z-index:2;width:36px;height:36px;border-radius:50%;margin:0 auto 14px;
background:#fff;border:2px solid var(--line);display:flex;align-items:center;
justify-content:center;font-size:13px;font-weight:600;color:var(--faint)}
.cr-rail__s.done .cr-rail__d{background:var(--g);border-color:var(--g);color:#fff}
.cr-rail__s.now .cr-rail__d{border-color:var(--g);color:var(--g)}
.cr-rail__s h4{margin:0 0 6px;font-size:16px;font-weight:500;color:var(--ink);
letter-spacing:-.02em}
.cr-rail__s p{margin:0 auto;font-size:14px;line-height:20px;color:var(--muted);max-width:180px}
.cr-rail__f{position:absolute;top:-26px;left:50%;transform:translateX(-50%);background:var(--g);
color:#fff;font-size:11px;font-weight:500;padding:5px 11px;border-radius:99px;
white-space:nowrap;box-shadow:var(--sh-cta)}
/* ── TRUST / SECURITY GRID ──────────────────────────────────────────────── */
.cr-tdark{background:var(--black2);border-radius:var(--r-lg);padding:36px 32px;height:100%;
color:#fff;display:flex;flex-direction:column}
.cr-tdark__e{color:var(--g2);font-size:14px;font-weight:500;margin:0 0 8px}
.cr-tdark h3{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.02em;margin:0 0 22px}
.cr-tlist{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:14px}
.cr-tlist li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;
letter-spacing:-.01em;color:rgba(255,255,255,.92)}
.cr-tlist .ck{width:26px;height:26px;border-radius:50%;background:rgba(63,209,95,.16);
color:var(--g2);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cr-tlist .ck svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
.cr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;padding-top:22px;
border-top:1px solid rgba(255,255,255,.08)}
.cr-chips span{font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.7);
border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:5px 9px}
.cr-cells{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);
border-radius:var(--r-lg);overflow:hidden;height:100%;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.cr-cells:hover{transform:translateY(-4px);border-color:rgba(0,168,45,.3);box-shadow:var(--sh-lift)}
.cr-cell{padding:26px 22px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);
background:#fff}
.cr-cell:nth-child(3n){border-right:0}
.cr-cell:nth-child(n+4){border-bottom:0}
.cr-cell__i{color:var(--gi);margin-bottom:14px}
.cr-cell__i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;
stroke-linecap:round;stroke-linejoin:round}
/* ── PROOF BAND ─────────────────────────────────────────────────────────── */
.cr-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:44px}
.cr-stat{text-align:center;padding:0 16px;border-left:1px solid rgba(0,0,0,.08)}
.cr-stat:first-child{border-left:0}
.cr-stat b{display:block;font-family:var(--serif);font-weight:400;font-size:48px;line-height:1;
letter-spacing:-.02em;color:var(--g)}
.cr-stat span{display:block;font-size:14px;color:var(--muted);margin-top:10px}
.cr-quote{background:#fff;border-radius:var(--r-lg);padding:26px;height:100%;display:flex;
flex-direction:column}
.cr-quote__m{font-size:26px;line-height:1;color:var(--g);opacity:.55;margin-bottom:12px;
font-family:var(--serif)}
.cr-quote p{font-size:16px;line-height:24px;color:var(--ink);margin:0 0 auto;letter-spacing:-.01em}
.cr-quote__w{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;
border-top:1px solid var(--line)}
.cr-quote__w i{width:34px;height:34px;border-radius:50%;background:var(--gsoft);color:var(--g);
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
font-style:normal;flex:none}
.cr-quote__w b{display:block;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.cr-quote__w span{display:block;font-size:14px;color:var(--muted)}
/* ── MOTION ─────────────────────────────────────────────────────────────── */
.cr-words .w{display:inline-block;opacity:0;filter:blur(12px);
transform:translate3d(0,.35em,0);
transition:opacity 700ms var(--ease),filter 700ms var(--ease),transform 700ms var(--ease);
transition-delay:calc(var(--i,0) * 60ms)}
.cr-words.in .w{opacity:1;filter:blur(0);transform:none}
.cr-up{opacity:0;transform:translateY(16px);
transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cr-up.in{opacity:1;transform:none}
@keyframes cr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cr-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.cr-anim-float{animation:cr-float 6s ease-in-out infinite}
.cr-anim-pulse{animation:cr-pulse 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
.cr-words .w{opacity:1!important;filter:none!important;transform:none!important;
transition:none!important}
.cr-up{opacity:1!important;transform:none!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important}
}
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:991px){
.cr-sec{padding:64px 0}
.cr-head,.cr-headrow{margin-bottom:36px}
.cr-t--hero{font-size:40px}.cr-t--feat{font-size:36px}.cr-t--sec{font-size:32px}
.cr-g2,.cr-g3,.cr-g4,.cr-bento-a,.cr-bento-b{grid-template-columns:1fr}
.cr-split,.cr-headrow{grid-template-columns:1fr;gap:32px;align-items:start}
.cr-split--rev>*:first-child{order:0}
.cr-rail{grid-auto-flow:row;gap:26px}
.cr-rail__s::before{display:none}
.cr-cells{grid-template-columns:1fr}
.cr-cell{border-right:0}
.cr-cell:last-child{border-bottom:0}
.cr-stats{grid-template-columns:repeat(2,1fr);gap:28px 0}
.cr-stat:nth-child(3){border-left:0}
.cr-band{flex-direction:column;align-items:flex-start}
.cr-dome{height:220px}
}
@media (max-width:575px){
.cr-sec{padding:48px 0}
.cr-t--hero{font-size:32px}.cr-t--sec{font-size:27px}
.cr-card{padding:20px}
.cr-stats{grid-template-columns:1fr}
.cr-stat{border-left:0}
}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--g);outline-offset:3px;
border-radius:6px}
.cr-sec--dark :where(a,button,[tabindex]):focus-visible{outline-color:var(--g2)}
/* ── GENERATED BANNER ─────────────────────────────────────────────────────
Output of make-banner.py. Unique per page slug, no external file, cannot
break. The inline