/* ============================================================
Triveni Computer — Design System
Chhindwara, Madhya Pradesh · Est. 2013
Tokens → Base → Layout → Components → Sections → Utilities
============================================================ */
/* ---------- 1. TOKENS ----------
Direction: INDUSTRIAL-TECHNICAL / SERVICE-MANUAL.
Reference points are workshop signage, engineering spec sheets and service
dockets: squared corners, hairline rules, monospace data, numbered sections.
Colour is deliberately limited to THREE working colours:
NEUTRAL ink + paper + greys (dominant, carries the whole layout)
PRIMARY signal blue (structure, links, headings on light)
ACCENT amber (CTAs and active states ONLY)
Nothing else earns a colour. No cyan, no purple, no multicolour icons. */
:root{
/* NEUTRAL — dominant */
--ink:#080D14;
--navy-900:#0D1620;
--navy-800:#152231;
--navy-700:#22344A;
--bg:#FFFFFF;
--bg-soft:#F3F5F7;
--bg-tint:#EDF1F6;
--fg:#101820;
--fg-muted:#4C5966; /* 7.1:1 on white */
--fg-ondark:#FFFFFF;
--fg-ondark-muted:#A9B6C4; /* 8.8:1 on --navy-900 */
--border:#D5DCE3;
--border-strong:#B4C0CB;
--rule-dark:rgba(255,255,255,.14);
/* PRIMARY — signal blue */
--brand-600:#1B4DD8; /* 6.8:1 on white */
--brand-500:#1B4DD8;
--brand-400:#4B77E8;
--brand-100:#DCE6FB;
/* ACCENT — amber. CTAs and active states only. */
--accent-500:#F59E0B; /* 8.5:1 on --navy-900 */
--accent-600:#D97706;
--accent-700:#B45309; /* 5.1:1 with white text */
--accent-800:#8A3F07; /* 7.5:1 with white text */
--cyan-400:#F59E0B; /* legacy alias -> accent; cyan is retired */
--success:#15803D;
--destructive:#B3261E;
--whatsapp:#1F2A36; /* neutralised: the glyph carries recognition */
/* gradients — kept flat and industrial */
--grad-navy:linear-gradient(165deg,#0D1620 0%,#152231 55%,#0A121B 100%);
--grad-cta:linear-gradient(180deg,var(--accent-700) 0%,var(--accent-800) 100%);
--grad-brand:linear-gradient(180deg,var(--brand-600) 0%,#143BA8 100%);
/* TYPE — Archivo (grotesque display) + IBM Plex Sans (body) + IBM Plex Mono (data).
Deliberately none of Inter / Roboto / Arial / Poppins. */
--font-head:'Archivo','Arial Narrow',Helvetica,sans-serif;
--font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
--font-deva:'Khand','Noto Sans Devanagari',sans-serif; /* Hindi shop name */
/* space scale */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
--s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
--section-y:clamp(4rem,8vw,7rem);
--gutter:clamp(1.25rem,4vw,2.5rem);
--container:1200px;
/* radii — squared off, technical rather than soft */
--r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:8px; --r-pill:3px;
/* shadows are used sparingly; hairline rules do most of the separation */
--sh-1:0 1px 0 rgba(8,13,20,.04);
--sh-2:0 1px 2px rgba(8,13,20,.06), 0 8px 20px rgba(8,13,20,.06);
--sh-3:0 2px 4px rgba(8,13,20,.07), 0 18px 44px rgba(8,13,20,.10);
--sh-brand:0 8px 22px rgba(27,77,216,.20);
--sh-cta:0 8px 20px rgba(138,63,7,.26);
/* motion */
--t-micro:140ms;
--t-base:300ms;
--t-slow:560ms;
--ease:cubic-bezier(.22,1,.36,1);
/* layers */
--z-base:1; --z-raised:10; --z-sticky:40; --z-header:100; --z-overlay:900; --z-modal:1000;
--header-h:74px;
}
/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body{
font-family:var(--font-body);
font-size:17px;
line-height:1.65;
color:var(--fg);
background:var(--bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
@media (max-width:480px){ body{font-size:16px;} }
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;touch-action:manipulation;}
a{color:var(--brand-600);text-decoration:none;}
a:hover{text-decoration:underline;}
ul,ol{padding:0;list-style:none;}
h1,h2,h3,h4,h5{
font-family:var(--font-head);
font-weight:700;
line-height:1.1;
letter-spacing:-.028em;
color:var(--fg);
text-wrap:balance;
}
/* Scale jumps hard between levels so hierarchy is carried by size + weight,
not by uniform sizing with a colour change. */
h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.75rem);font-weight:800;line-height:1.02;letter-spacing:-.038em;}
h2{font-size:clamp(1.95rem,1.3rem + 2.7vw,3.25rem);font-weight:800;letter-spacing:-.034em;}
h3{font-size:clamp(1.18rem,1.05rem + .55vw,1.45rem);font-weight:700;letter-spacing:-.022em;}
h4{font-size:1.0625rem;font-weight:700;}
p{text-wrap:pretty;}
::selection{background:var(--brand-600);color:#fff;}
/* focus */
:focus-visible{
outline:3px solid var(--accent-600);
outline-offset:3px;
border-radius:6px;
}
.on-dark :focus-visible{outline-color:var(--cyan-400);}
.skip-link{
position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-modal);
background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
font-weight:600;transition:top var(--t-micro) var(--ease);
}
.skip-link:focus{top:0;text-decoration:none;}
/* ---------- 3. LAYOUT ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container-wide{max-width:1380px;}
.section{padding-block:var(--section-y);position:relative;}
.section--soft{background:var(--bg-soft);}
.section--tint{background:linear-gradient(180deg,var(--bg-tint) 0%,#fff 100%);}
.section--dark{background:var(--grad-navy);color:var(--fg-ondark);}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff;}
.grid{display:grid;gap:var(--s-5);}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.g-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr));}
.g-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.section-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3.25rem);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head p{color:var(--fg-muted);font-size:1.0625rem;margin-top:var(--s-3);}
.section--dark .section-head p{color:var(--fg-ondark-muted);}
/* Section labels read like spec-sheet references: 01 — SERVICES.
The number comes from a CSS counter, so the HTML stays clean. */
main{counter-reset:sec;}
.eyebrow{
display:inline-flex;align-items:baseline;gap:9px;
font-family:var(--font-mono);font-size:.75rem;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;
color:var(--brand-600);margin-bottom:var(--s-4);
counter-increment:sec;
}
.eyebrow::before{
content:counter(sec,decimal-leading-zero);
font-weight:600;color:var(--accent-700);
border-bottom:2px solid var(--accent-700);padding-bottom:2px;
}
.section--dark .eyebrow{color:var(--fg-ondark-muted);}
.section--dark .eyebrow::before{background:var(--accent-500);}
/* ---------- 4. BUTTONS ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:54px;padding:15px 26px;
font-family:var(--font-head);font-size:.97rem;font-weight:700;letter-spacing:.005em;
border-radius:var(--r-sm);border:1px solid transparent;
cursor:pointer;text-decoration:none;white-space:nowrap;
transition:transform var(--t-micro) var(--ease),box-shadow var(--t-base) var(--ease),
background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px) scale(.985);}
.btn svg{width:20px;height:20px;flex:none;}
.btn--cta{background:var(--grad-cta);color:#fff;box-shadow:var(--sh-cta);}
.btn--cta:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(154,52,18,.42);}
.btn--brand{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand);}
.btn--brand:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(29,78,216,.34);}
.btn--wa{background:var(--whatsapp);color:#fff;border-color:var(--whatsapp);}
.btn--wa:hover{background:#0B131C;border-color:#0B131C;transform:translateY(-2px);}
.btn--outline{background:transparent;color:var(--brand-600);border-color:var(--fg);border-width:1px;}
.btn--outline:hover{border-color:var(--brand-600);background:var(--bg-tint);transform:translateY(-3px);}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn--ghost-light:hover{background:rgba(255,255,255,.10);border-color:#fff;transform:translateY(-2px);}
.btn--sm{min-height:44px;padding:10px 20px;font-size:.94rem;}
.btn--block{width:100%;}
.link-arrow{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--font-mono);font-weight:600;font-size:.8rem;
letter-spacing:.08em;text-transform:uppercase;
color:var(--brand-600);min-height:44px;
}
.link-arrow svg{width:17px;height:17px;transition:transform var(--t-base) var(--ease);}
.link-arrow:hover{text-decoration:none;color:var(--accent-700);}
.link-arrow:hover svg{transform:translateX(5px);}
/* ---------- 5. HEADER / NAV ---------- */
.header{
position:fixed;inset:0 0 auto 0;z-index:var(--z-header);
background:rgba(255,255,255,.82);
backdrop-filter:blur(16px) saturate(180%);
-webkit-backdrop-filter:blur(16px) saturate(180%);
border-bottom:1px solid transparent;
transition:box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.header.is-scrolled{border-bottom-color:var(--border);box-shadow:0 6px 24px rgba(10,24,50,.07);background:rgba(255,255,255,.94);}
.header__inner{display:flex;align-items:center;gap:var(--s-4);min-height:var(--header-h);}
.brand{display:flex;align-items:center;gap:11px;flex:none;}
.brand:hover{text-decoration:none;}
.brand__mark{width:42px;height:42px;flex:none;border-radius:12px;box-shadow:0 6px 16px rgba(29,78,216,.28);}
.brand__text{display:flex;flex-direction:column;line-height:1.05;}
.brand__name{font-family:var(--font-head);font-weight:700;font-size:1.16rem;color:var(--navy-900);letter-spacing:-.02em;}
.brand__tag{font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-muted);}
.nav{margin-left:auto;}
.nav__list{display:flex;align-items:center;gap:var(--s-1);}
.nav__link{
display:flex;align-items:center;min-height:44px;padding:0 14px;
font-family:var(--font-head);font-size:.97rem;font-weight:500;color:var(--fg);
border-radius:var(--r-sm);position:relative;
transition:color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease);
}
.nav__link:hover{color:var(--brand-600);background:var(--bg-tint);text-decoration:none;}
.nav__link::after{
content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
background:var(--accent-600);transform:scaleX(0);transform-origin:left;
transition:transform var(--t-base) var(--ease);
}
.nav__link:hover::after{transform:scaleX(1);}
.nav__link[aria-current="page"]{color:var(--brand-600);font-weight:600;}
.nav__link[aria-current="page"]::after{transform:scaleX(1);}
.header__cta{display:flex;align-items:center;gap:var(--s-2);flex:none;}
.header__phone{
display:inline-flex;align-items:center;gap:9px;
background:var(--grad-cta);color:#fff;
min-height:46px;padding:0 18px;border-radius:var(--r-sm);
font-family:var(--font-mono);font-weight:600;font-size:.92rem;letter-spacing:.02em;
box-shadow:var(--sh-cta);
transition:transform var(--t-micro) var(--ease),box-shadow var(--t-base) var(--ease);
}
.header__phone:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(154,52,18,.4);text-decoration:none;}
.header__phone svg{width:18px;height:18px;flex:none;}
.nav-toggle{
display:none;width:46px;height:46px;flex:none;
align-items:center;justify-content:center;
border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;
transition:background-color var(--t-micro) var(--ease);
}
.nav-toggle:hover{background:var(--bg-tint);}
.nav-toggle__bars{position:relative;width:20px;height:14px;}
.nav-toggle__bars span{
position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--navy-900);
transition:transform var(--t-base) var(--ease),opacity var(--t-micro) var(--ease);
}
.nav-toggle__bars span:nth-child(1){top:0;}
.nav-toggle__bars span:nth-child(2){top:6px;}
.nav-toggle__bars span:nth-child(3){top:12px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4);}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media (max-width:1023px){
.nav-toggle{display:inline-flex;order:3;}
.header__cta{margin-left:auto;order:2;}
.header__phone-label{display:none;}
.header__phone{padding:0 16px;}
.nav{
order:4;position:fixed;left:0;right:0;top:var(--header-h);
background:#fff;border-top:1px solid var(--border);
box-shadow:0 24px 48px rgba(10,24,50,.14);
padding:var(--s-3) var(--gutter) var(--s-6);
max-height:calc(100dvh - var(--header-h));overflow-y:auto;
transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility 0s linear var(--t-base);
margin-left:0;width:100%;
}
.nav.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
.nav__list{flex-direction:column;align-items:stretch;gap:2px;}
.nav__link{min-height:52px;padding:0 14px;font-size:1.05rem;border-bottom:1px solid var(--bg-soft);border-radius:0;}
.nav__link::after{display:none;}
.nav__link[aria-current="page"]{background:var(--bg-tint);border-radius:var(--r-sm);}
.nav__cta-mobile{margin-top:var(--s-4);display:grid;gap:var(--s-2);}
}
@media (min-width:1024px){ .nav__cta-mobile{display:none;} }
@media (max-width:420px){
.brand__mark{width:38px;height:38px;}
.brand__name{font-size:1.02rem;}
.brand__tag{font-size:.62rem;}
}
/* ---------- 6. HERO ---------- */
.hero{
position:relative;isolation:isolate;overflow:hidden;
background:var(--grad-navy);color:var(--fg-ondark);
padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem));
padding-bottom:clamp(3.5rem,8vw,6.5rem);
}
.hero__bg{position:absolute;inset:0;z-index:-2;opacity:.5;pointer-events:none;width:100%;height:100%;object-fit:cover;}
.hero__glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;}
.hero__glow--a{width:520px;height:520px;top:-180px;right:-120px;background:radial-gradient(circle,var(--brand-600) 0%,transparent 68%);}
.hero__glow--b{width:420px;height:420px;bottom:-160px;left:-140px;background:radial-gradient(circle,var(--accent-700) 0%,transparent 68%);opacity:.26;}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media (max-width:960px){ .hero__inner{grid-template-columns:1fr;} }
.hero__badge{
display:inline-flex;align-items:center;gap:9px;
padding:8px 16px 8px 10px;border-radius:var(--r-pill);
background:rgba(255,255,255,.05);border:1px solid var(--rule-dark);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.06em;
text-transform:uppercase;color:var(--fg-ondark-muted);margin-bottom:var(--s-5);
}
.hero__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-500);box-shadow:0 0 0 3px rgba(245,158,11,.20);flex:none;}
.hero h1{color:#fff;}
.hero h1 .accent{
color:var(--accent-500);
}
.hero__sub{
margin-top:var(--s-5);font-size:clamp(1.04rem,1rem + .3vw,1.2rem);
line-height:1.66;color:var(--fg-ondark-muted);max-width:56ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6);}
.hero__trust{
display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.12);
}
.hero__trust li{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-ondark-muted);font-weight:500;}
.hero__trust svg{width:18px;height:18px;color:var(--fg-ondark-muted);flex:none;}
.hero__visual{position:relative;}
.hero__panel{
position:relative;border-radius:var(--r-xl);overflow:hidden;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
box-shadow:0 30px 70px rgba(3,10,26,.5);
padding:var(--s-3);
}
.hero__panel img{width:100%;border-radius:calc(var(--r-xl) - 10px);}
.hero__float{
position:absolute;display:flex;align-items:center;gap:11px;
padding:12px 16px;border-radius:var(--r-md);
background:rgba(255,255,255,.96);color:var(--navy-900);
box-shadow:0 16px 36px rgba(3,10,26,.34);
font-family:var(--font-head);
}
.hero__float svg{width:22px;height:22px;flex:none;}
.hero__float b{display:block;font-size:1.05rem;font-weight:700;line-height:1.1;}
.hero__float span{font-size:.76rem;color:var(--fg-muted);font-weight:500;}
.hero__float--tl{top:8%;left:-18px;}
.hero__float--br{bottom:9%;right:-14px;}
.hero__float--tl svg{color:var(--brand-600);}
.hero__float--br svg{color:var(--accent-600);}
@media (max-width:1100px){ .hero__float--tl{left:8px;} .hero__float--br{right:8px;} }
@media (max-width:600px){ .hero__float{padding:10px 13px;} .hero__float b{font-size:.95rem;} .hero__float span{font-size:.72rem;} }
/* page hero (inner pages) */
.pagehero{
position:relative;overflow:hidden;background:var(--grad-navy);color:var(--fg-ondark);
padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,4rem));
padding-bottom:clamp(2.75rem,5vw,4.25rem);
text-align:center;
}
.pagehero__bg{position:absolute;inset:0;opacity:.42;z-index:0;pointer-events:none;width:100%;height:100%;object-fit:cover;}
.pagehero .container{position:relative;z-index:1;}
.pagehero h1{color:#fff;}
.pagehero p{margin:var(--s-4) auto 0;max-width:62ch;color:var(--fg-ondark-muted);font-size:1.06rem;}
.crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-ondark-muted);margin-bottom:var(--s-5);}
.crumbs a{color:var(--fg-ondark-muted);}
.crumbs a:hover{color:#fff;}
.crumbs li{display:flex;gap:8px;}
.crumbs li:not(:last-child)::after{content:"/";color:var(--fg-ondark-muted);opacity:.55;}
/* ---------- 7. STATS ---------- */
.stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--border);border:1px solid var(--border);
border-radius:var(--r-lg);overflow:hidden;
}
.stats--float{margin-top:calc(clamp(2rem,5vw,3.5rem) * -1);position:relative;z-index:var(--z-raised);box-shadow:var(--sh-3);}
.stat{background:#fff;padding:clamp(1.4rem,3vw,2rem) var(--s-4);text-align:left;}
.stat__num{
font-family:var(--font-mono);font-weight:600;
font-size:clamp(1.7rem,1.25rem + 1.7vw,2.5rem);line-height:1;
color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
.stat__num .suffix{color:var(--accent-700);}
.stat__label{margin-top:10px;font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-muted);line-height:1.5;}
@media (max-width:700px){ .stats{grid-template-columns:repeat(2,1fr);} .stats--float{margin-top:calc(clamp(1.5rem,4vw,2.5rem) * -1);} }
/* ---------- 8. CARDS ---------- */
.card{
position:relative;background:#fff;border:1px solid var(--border);
border-radius:var(--r-lg);padding:clamp(1.4rem,2.6vw,1.9rem);
transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
height:100%;display:flex;flex-direction:column;overflow:hidden;
}
.card::after{ /* technical rule that arms on hover */
content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
background:var(--accent-700);transform:scaleX(0);transform-origin:left;
transition:transform var(--t-base) var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--fg);}
.card:hover::after{transform:scaleX(1);}
.card h3{margin-bottom:10px;}
.card p{color:var(--fg-muted);font-size:.98rem;}
.card__foot{margin-top:auto;padding-top:var(--s-4);}
.icon-badge{
width:52px;height:52px;border-radius:var(--r-sm);
display:grid;place-items:center;margin-bottom:var(--s-5);
background:var(--bg-tint);
color:var(--brand-600);border:1px solid var(--border);
transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.icon-badge svg{width:27px;height:27px;}
.card:hover .icon-badge{background:var(--fg);color:#fff;border-color:var(--fg);}
.icon-badge--accent{background:#FBF0E2;color:var(--accent-800);border-color:#EBD6BA;}
.card:hover .icon-badge--accent{background:var(--accent-800);color:#fff;border-color:var(--accent-800);}
.card--service::before{
content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;
background:var(--grad-cta);transform:scaleY(0);transform-origin:top;
transition:transform var(--t-base) var(--ease);
}
.card--service:hover::before{transform:scaleY(1);}
.card--dark{
background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--fg-ondark);
}
.card--dark p{color:var(--fg-ondark-muted);}
.card--dark:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);box-shadow:0 24px 56px rgba(3,10,26,.45);}
.card--dark .icon-badge{background:rgba(255,255,255,.07);border-color:var(--rule-dark);color:#fff;}
.card--dark:hover .icon-badge{background:#fff;color:var(--navy-900);}
.ticks{display:grid;gap:11px;margin-top:var(--s-4);}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;color:var(--fg-muted);line-height:1.5;}
.ticks svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--success);}
.section--dark .ticks li{color:var(--fg-ondark-muted);}
.section--dark .ticks svg{color:var(--fg-ondark-muted);}
/* ---------- 10. PRODUCTS ---------- */
.product{
background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
overflow:hidden;height:100%;display:flex;flex-direction:column;
transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.product:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--border-strong);}
.product__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-tint);}
.product__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease);}
.product:hover .product__media img{transform:scale(1.05);}
.product__chip{
position:absolute;top:12px;left:12px;
font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:6px 10px;border-radius:var(--r-sm);
background:var(--fg);color:#fff;
box-shadow:var(--sh-1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.product__body{padding:var(--s-5);display:flex;flex-direction:column;flex:1;}
.product__body h3{font-size:1.12rem;margin-bottom:8px;}
.product__body p{color:var(--fg-muted);font-size:.95rem;}
.product__body .ticks{margin-top:var(--s-3);}
.product__body .ticks li{font-size:.9rem;}
.product__foot{margin-top:auto;padding-top:var(--s-4);}
/* ---------- 11. WHY US ---------- */
.why{display:flex;gap:var(--s-4);align-items:flex-start;}
.why__icon{
width:48px;height:48px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
background:var(--bg-tint);color:var(--brand-600);border:1px solid var(--border);
transition:transform var(--t-base) var(--ease);
}
.why__icon svg{width:24px;height:24px;}
.why:hover .why__icon{transform:translateY(-3px) scale(1.05);}
.why h3{font-size:1.08rem;margin-bottom:6px;}
.why p{color:var(--fg-muted);font-size:.96rem;}
.section--dark .why p{color:var(--fg-ondark-muted);}
.section--dark .why__icon{background:rgba(255,255,255,.05);border-color:var(--rule-dark);color:#fff;}
/* ---------- 12. TESTIMONIALS ---------- */
.tcarousel{position:relative;}
.ttrack{
display:flex;gap:var(--s-5);overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;padding-bottom:var(--s-4);
scrollbar-width:none;-ms-overflow-style:none;
}
.ttrack::-webkit-scrollbar{display:none;}
.tslide{flex:0 0 min(420px,86%);scroll-snap-align:start;}
@media (min-width:1024px){ .tslide{flex-basis:calc((100% - 2 * var(--s-5)) / 3);} }
.quote{
background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
padding:clamp(1.5rem,3vw,2rem);height:100%;display:flex;flex-direction:column;
transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.quote:hover{box-shadow:var(--sh-2);transform:translateY(-3px);}
.quote__mark{width:34px;height:34px;color:var(--brand-100);margin-bottom:var(--s-3);}
.stars{display:flex;gap:3px;margin-bottom:var(--s-3);}
.stars svg{width:16px;height:16px;color:var(--accent-700);}
.quote blockquote{font-size:1rem;line-height:1.68;color:var(--fg);}
.quote__by{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:var(--s-5);}
/* .quote__by span (0-1-1) outranks a bare .avatar (0-1-0), so the initials would
inherit the muted grey and vanish on the blue disc — scope the rule to win. */
.quote__by .avatar{
width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:#fff;
background:var(--grad-brand);
}
.quote__by b{display:block;font-family:var(--font-head);font-size:.97rem;color:var(--navy-900);}
.quote__by span{font-size:.84rem;color:var(--fg-muted);}
.tctrl{display:flex;align-items:center;justify-content:center;gap:var(--s-3);margin-top:var(--s-5);}
.tbtn{
width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--border-strong);background:#fff;color:var(--brand-600);
transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.tbtn:hover:not(:disabled){background:var(--brand-600);color:#fff;border-color:var(--brand-600);transform:translateY(-2px);}
.tbtn:disabled{opacity:.4;cursor:not-allowed;}
.tbtn svg{width:21px;height:21px;}
/* ---------- 13. GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);}
.gitem{
position:relative;overflow:hidden;border-radius:var(--r-md);
border:1px solid var(--border);background:var(--bg-tint);
aspect-ratio:4/3;display:block;
}
.gitem--tall{grid-row:span 2;aspect-ratio:4/6;}
.gitem--wide{grid-column:span 2;aspect-ratio:8/3;}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease);}
.gitem:hover img{transform:scale(1.07);}
.gitem__cap{
position:absolute;inset:auto 0 0 0;padding:26px 16px 14px;
background:linear-gradient(to top,rgba(6,15,34,.9) 0%,rgba(6,15,34,0) 100%);
color:#fff;font-family:var(--font-head);font-weight:600;font-size:.92rem;
transform:translateY(6px);opacity:.94;
transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease);
}
.gitem:hover .gitem__cap{transform:translateY(0);opacity:1;}
@media (max-width:900px){
.gallery{grid-template-columns:repeat(2,1fr);}
.gitem--wide{grid-column:span 2;aspect-ratio:16/7;}
.gitem--tall{grid-row:span 1;aspect-ratio:4/3;}
}
@media (max-width:520px){
.gallery{grid-template-columns:1fr;}
.gitem--wide{grid-column:span 1;aspect-ratio:4/3;}
}
/* ---------- 14. ACCORDION ---------- */
.acc{border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;overflow:hidden;transition:box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);}
.acc + .acc{margin-top:var(--s-4);}
.acc:hover{border-color:var(--border-strong);box-shadow:var(--sh-2);}
.acc.is-open{border-color:var(--brand-400);box-shadow:var(--sh-2);}
.acc__btn{
width:100%;display:flex;align-items:center;gap:var(--s-4);
padding:clamp(1.1rem,2.4vw,1.5rem);text-align:left;min-height:64px;
}
.acc__ico{
width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;
background:var(--bg-tint);color:var(--brand-600);
border:1px solid var(--brand-100);
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.acc__ico svg{width:26px;height:26px;}
.acc.is-open .acc__ico{background:var(--grad-brand);color:#fff;}
.acc__title{flex:1;min-width:0;}
.acc__title h3{font-size:clamp(1.08rem,1rem + .35vw,1.28rem);}
.acc__title p{font-size:.92rem;color:var(--fg-muted);margin-top:3px;}
.acc__chev{
width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
background:var(--bg-soft);color:var(--brand-600);border:1px solid var(--border);
transition:transform var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.acc__chev svg{width:19px;height:19px;}
.acc.is-open .acc__chev{transform:rotate(180deg);background:var(--brand-100);}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-base) var(--ease);}
.acc.is-open .acc__panel{grid-template-rows:1fr;}
.acc__panel > div{overflow:hidden;}
.acc__inner{padding:0 clamp(1.1rem,2.4vw,1.5rem) clamp(1.3rem,2.6vw,1.75rem);}
.acc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px var(--s-5);border-top:1px solid var(--border);padding-top:var(--s-5);}
.acc__grid li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--fg-muted);}
.acc__grid svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--accent-600);}
@media (max-width:560px){ .acc__ico{width:44px;height:44px;} .acc__ico svg{width:22px;height:22px;} .acc__btn{gap:var(--s-3);} }
/* ---------- 15. CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.75rem,4vw,3.25rem);align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.cinfo{display:grid;gap:var(--s-4);}
.cinfo__item{
display:flex;gap:var(--s-4);padding:var(--s-5);
background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.cinfo__item:hover{border-color:var(--border-strong);box-shadow:var(--sh-2);transform:translateY(-2px);}
.cinfo__ico{
width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
background:var(--grad-brand);color:#fff;
}
.cinfo__ico svg{width:22px;height:22px;}
.cinfo__item h3{font-size:1rem;margin-bottom:4px;}
.cinfo__item p,.cinfo__item address{font-size:.96rem;color:var(--fg-muted);font-style:normal;line-height:1.6;}
.cinfo__item a{font-weight:600;}
.form-card{
background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
padding:clamp(1.5rem,3.5vw,2.5rem);box-shadow:var(--sh-2);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--s-4);}
.field label{font-family:var(--font-head);font-size:.92rem;font-weight:600;color:var(--navy-900);}
.field .req{color:var(--destructive);margin-left:2px;}
.field .hint{font-size:.83rem;color:var(--fg-muted);}
.field input,.field select,.field textarea{
width:100%;min-height:50px;padding:13px 15px;
border:1px solid var(--border-strong);border-radius:var(--r-sm);
background:#fff;font-size:1rem;
transition:border-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6;}
.field select{
appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;background-size:19px;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--brand-400);}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--brand-600);box-shadow:0 0 0 4px rgba(37,99,235,.16);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--accent-600);outline-offset:2px;}
.field .err{font-size:.87rem;font-weight:600;color:var(--destructive);display:none;align-items:center;gap:6px;}
.field .err svg{width:15px;height:15px;flex:none;}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--destructive);background:#FEF2F2;}
.field.is-invalid .err{display:flex;}
.form-summary{
display:none;gap:11px;padding:var(--s-4);margin-bottom:var(--s-5);
background:#FEF2F2;border:1px solid #FCA5A5;border-left:4px solid var(--destructive);
border-radius:var(--r-sm);color:#7F1D1D;
}
.form-summary.is-visible{display:flex;}
.form-summary svg{width:21px;height:21px;flex:none;color:var(--destructive);margin-top:2px;}
.form-summary h3{font-size:1rem;color:#7F1D1D;margin-bottom:6px;}
.form-summary ul{display:grid;gap:4px;font-size:.93rem;}
.form-summary a{color:#991B1B;font-weight:600;text-decoration:underline;}
.form-success{
display:none;gap:12px;padding:var(--s-5);
background:#F0FDF4;border:1px solid #86EFAC;border-radius:var(--r-md);color:#14532D;
}
.form-success.is-visible{display:flex;}
.form-success svg{width:24px;height:24px;flex:none;color:var(--success);}
.form-success h3{font-size:1.05rem;color:#14532D;margin-bottom:5px;}
.form-success p{font-size:.96rem;}
/* ---------- 16. MAP ---------- */
.map-frame{
position:relative;border-radius:var(--r-lg);overflow:hidden;
border:1px solid var(--border);box-shadow:var(--sh-2);background:var(--bg-tint);
min-height:360px;
}
.map-frame iframe{display:block;width:100%;height:100%;min-height:360px;border:0;}
.map-fallback{
position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
gap:12px;text-align:center;padding:var(--s-6);color:var(--fg-muted);
background:repeating-linear-gradient(45deg,var(--bg-soft) 0 10px,var(--bg-tint) 10px 20px);
}
.map-fallback svg{width:44px;height:44px;color:var(--brand-600);}
.map-fallback b{font-family:var(--font-head);color:var(--navy-900);font-size:1.05rem;}
.map-fallback p{max-width:44ch;font-size:.95rem;}
.map-fallback code{
font-family:'JetBrains Mono',ui-monospace,'Courier New',monospace;font-size:.82rem;
background:#fff;border:1px solid var(--border);padding:3px 8px;border-radius:6px;color:var(--navy-900);
}
/* ---------- 17. CTA BAND ---------- */
.ctaband{
position:relative;overflow:hidden;border-radius:var(--r-xl);
background:var(--grad-navy);color:var(--fg-ondark);
padding:clamp(2.25rem,5vw,3.75rem) clamp(1.5rem,5vw,3.5rem);
text-align:center;box-shadow:var(--sh-3);
}
.ctaband::before{
content:"";position:absolute;width:460px;height:460px;border-radius:50%;
top:-220px;right:-140px;filter:blur(80px);
background:radial-gradient(circle,rgba(245,158,11,.30) 0%,transparent 68%);pointer-events:none;
}
.ctaband::after{
content:"";position:absolute;width:400px;height:400px;border-radius:50%;
bottom:-220px;left:-120px;filter:blur(80px);
background:radial-gradient(circle,rgba(27,77,216,.42) 0%,transparent 68%);pointer-events:none;
}
.ctaband > *{position:relative;}
.ctaband h2{color:#fff;}
.ctaband p{margin:var(--s-4) auto 0;max-width:56ch;color:var(--fg-ondark-muted);font-size:1.06rem;}
.ctaband__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-6);}
/* ---------- 18. FOOTER ---------- */
.footer{background:var(--ink);color:var(--fg-ondark-muted);padding-top:clamp(3rem,6vw,4.5rem);}
.footer a{color:var(--fg-ondark-muted);}
.footer a:hover{color:#fff;}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(1.75rem,4vw,3rem);padding-bottom:var(--s-8);}
@media (max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer__grid{grid-template-columns:1fr;gap:var(--s-6);} }
.footer h3{font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:var(--s-4);}
.footer__brand{display:flex;align-items:center;gap:11px;margin-bottom:var(--s-4);}
.footer__brand img{width:44px;height:44px;border-radius:12px;}
.footer__brand b{font-family:var(--font-head);font-size:1.18rem;color:#fff;display:block;line-height:1.1;}
.footer__brand span{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-ondark-muted);}
.footer__about{font-size:.95rem;line-height:1.7;max-width:38ch;}
.footer__links{display:grid;gap:3px;}
.footer__links a{display:inline-flex;align-items:center;min-height:38px;font-size:.96rem;}
.footer__contact{display:grid;gap:var(--s-4);font-size:.95rem;font-style:normal;}
.footer__contact li{display:flex;gap:11px;align-items:flex-start;line-height:1.6;}
.footer__contact svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--accent-500);}
.footer__social{display:flex;gap:10px;margin-top:var(--s-5);}
.footer__social a{
width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
background:rgba(255,255,255,.05);border:1px solid var(--rule-dark);color:var(--fg-ondark-muted);
transition:background-color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.footer__social a:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff;transform:translateY(-3px);}
.footer__social svg{width:20px;height:20px;}
.footer__bar{
border-top:1px solid rgba(255,255,255,.09);
padding-block:var(--s-5);
display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
align-items:center;justify-content:space-between;
font-size:.88rem;color:var(--fg-ondark-muted);
}
.footer__bar p{margin:0;}
/* ---------- 19. MOBILE ACTION BAR ---------- */
.mobilebar{
position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
display:none;gap:1px;background:rgba(255,255,255,.14);
padding-bottom:env(safe-area-inset-bottom);
box-shadow:0 -8px 28px rgba(6,15,34,.22);
transform:translateY(110%);
transition:transform var(--t-base) var(--ease);
}
.mobilebar.is-visible{transform:translateY(0);}
.mobilebar a{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-height:60px;padding:8px 4px;font-family:var(--font-head);font-size:.76rem;font-weight:600;
color:#fff;text-decoration:none;
}
.mobilebar a:hover{text-decoration:none;}
.mobilebar svg{width:21px;height:21px;}
.mobilebar .m-call{background:var(--grad-cta);}
.mobilebar .m-wa{background:var(--whatsapp);}
.mobilebar .m-dir{background:var(--grad-brand);}
@media (max-width:767px){
.mobilebar{display:flex;}
body{padding-bottom:calc(60px + env(safe-area-inset-bottom));}
}
/* ---------- 20. MISC ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5);}
.badge{
display:inline-flex;align-items:center;gap:8px;
padding:9px 14px;border-radius:var(--r-sm);
background:#fff;border:1px solid var(--border);
font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.04em;
text-transform:uppercase;color:var(--fg);box-shadow:none;
}
.badge svg{width:17px;height:17px;color:var(--brand-600);}
.section--dark .badge{background:rgba(255,255,255,.05);border-color:var(--rule-dark);color:#fff;box-shadow:none;}
.section--dark .badge svg{color:var(--fg-ondark-muted);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media (max-width:900px){ .split{grid-template-columns:1fr;} }
.prose p + p{margin-top:var(--s-4);}
.prose p{color:var(--fg-muted);font-size:1.03rem;line-height:1.72;}
.section--dark .prose p{color:var(--fg-ondark-muted);}
.prose strong{color:var(--fg);font-weight:600;}
.section--dark .prose strong{color:#fff;}
.media-frame{
position:relative;border-radius:var(--r-xl);overflow:hidden;
border:1px solid var(--border);box-shadow:var(--sh-3);
}
.media-frame img{width:100%;}
.media-frame--tilt{transform:perspective(1200px) rotateY(-4deg);transition:transform var(--t-slow) var(--ease);}
.media-frame--tilt:hover{transform:perspective(1200px) rotateY(0deg);}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ---------- 21. SCROLL REVEAL ---------- */
.reveal{
opacity:0;transform:translateY(18px);
transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1;transform:none;}
.reveal--left{transform:translateX(-22px);}
.reveal--right{transform:translateX(22px);}
.reveal--scale{transform:translateY(14px) scale(.97);}
.no-js .reveal{opacity:1;transform:none;}
/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;
}
.reveal{opacity:1 !important;transform:none !important;}
.media-frame--tilt{transform:none;}
.ttrack{scroll-behavior:auto;}
}
/* ---------- 23. PRINT ---------- */
@media print{
.header,.mobilebar,.nav,.ctaband,.tctrl,.skip-link{display:none !important;}
body{font-size:12pt;color:#000;padding:0;}
.section{padding-block:1rem;}
.hero,.pagehero,.section--dark{background:#fff !important;color:#000 !important;}
}
/* accordion heading text (button label, not a nested heading) */
.acc__name{
display:block;font-family:var(--font-head);font-weight:600;
font-size:clamp(1.08rem,1rem + .35vw,1.28rem);line-height:1.2;
letter-spacing:-.018em;color:var(--fg);
}
/* badge used as a link (services quick-jump) — keep a 44px tap target */
a.badge{
min-height:44px;text-decoration:none;
transition:border-color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease),
transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
a.badge:hover{
text-decoration:none;border-color:var(--brand-400);background:var(--bg-tint);
transform:translateY(-2px);box-shadow:var(--sh-2);
}
.badge-row li{display:flex;}
/* Standalone phone / WhatsApp links inside a contact card are primary actions,
not inline prose links — give them a full 44px tap target. */
.cinfo__item p > a:only-child{
display:inline-flex;align-items:center;min-height:44px;
}
/* breadcrumb links: clear the 24px minimum target size (WCAG 2.2 AA) */
.crumbs a{display:inline-flex;align-items:center;min-height:28px;}
/* ---------- 24. "WHAT WE CAN FIX" PROBLEM CARDS ---------- */
.problem{
position:relative;display:flex;gap:var(--s-4);align-items:flex-start;
background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--s-5);height:100%;
transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.problem:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--border-strong);}
.problem__ico{
width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
background:var(--bg-tint);
color:var(--brand-600);border:1px solid var(--brand-100);
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.problem__ico svg{width:23px;height:23px;}
.problem:hover .problem__ico{background:var(--grad-brand);color:#fff;}
.problem h3{font-size:1.02rem;margin-bottom:5px;}
.problem p{font-size:.93rem;color:var(--fg-muted);line-height:1.55;}
/* ---------- 25. INTERACTIVE LAPTOP FAULT DIAGRAM ---------- */
.faultmap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
@media (max-width:900px){ .faultmap{grid-template-columns:1fr;} }
.faultmap__stage{position:relative;}
.faultmap__stage img{width:100%;height:auto;}
.hotspot{
position:absolute;transform:translate(-50%,-50%);
width:38px;height:38px;border-radius:50%;
display:grid;place-items:center;
font-family:var(--font-head);font-weight:700;font-size:.92rem;
color:#fff;background:var(--grad-cta);
border:2px solid rgba(255,255,255,.85);
box-shadow:0 4px 14px rgba(6,15,34,.4);
cursor:pointer;touch-action:manipulation;
transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.hotspot::after{ /* invisible 44px tap target */
content:"";position:absolute;top:50%;left:50%;
width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;
}
.hotspot:hover{transform:translate(-50%,-50%) scale(1.14);}
.hotspot.is-active{
background:var(--grad-brand);
transform:translate(-50%,-50%) scale(1.2);
box-shadow:0 0 0 6px rgba(37,99,235,.28), 0 6px 18px rgba(6,15,34,.45);
}
.faultmap__list{display:grid;gap:8px;}
.faultmap__item{
display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
padding:14px 16px;min-height:60px;border-radius:var(--r-md);
border:1px solid transparent;background:transparent;color:inherit;
transition:background-color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease);
}
.faultmap__item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);transform:translateX(3px);}
.faultmap__item.is-active{background:rgba(255,255,255,.12);border-color:var(--cyan-400);}
.faultmap__num{
width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
font-family:var(--font-head);font-weight:700;font-size:.88rem;
background:rgba(34,211,238,.14);color:var(--cyan-400);border:1px solid rgba(34,211,238,.38);
transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.faultmap__item.is-active .faultmap__num{background:var(--cyan-400);color:var(--navy-900);border-color:var(--cyan-400);}
.faultmap__item b{display:block;font-family:var(--font-head);font-size:1.05rem;font-weight:600;color:#fff;line-height:1.32;letter-spacing:-.01em;}
.faultmap__item span{display:block;font-size:.94rem;color:var(--fg-ondark-muted);margin-top:3px;line-height:1.5;}
/* Very narrow phones (~360px): brand + phone button + hamburger cannot all fit on
one row. Collapse the header call button to an icon — it keeps its accessible
name from aria-label, and the number is still in the hero CTA and the fixed
bottom action bar. */
@media (max-width:430px){
.header__phone{
padding:0;width:46px;justify-content:center;border-radius:50%;
}
.header__phone > span{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.header__inner{gap:var(--s-2);}
.brand__tag{font-size:.58rem;letter-spacing:.08em;}
}
@media (max-width:340px){
.brand__text{display:none;} /* logo mark alone below ~340px */
}
/* Long CTA labels ("Describe your fault: 9826811733") cannot shrink below their
text width while nowrap is set, which pushes the page wider than the viewport on
~360px phones. Let them wrap onto a second line instead. */
@media (max-width:430px){
.btn{white-space:normal;text-align:center;}
.header__phone{white-space:nowrap;}
}
/* The tilted media frame is a desktop flourish: rotateY makes its painted box wider
than its layout box, which pushes past the viewport once the layout is single
column. Flatten it below the split-layout breakpoint. */
@media (max-width:900px){
.media-frame--tilt{transform:none;}
}
/* ---------- 26. SHOP BOARD ----------
A themed rendering of the actual shop signage: Hindi name, English tagline and
the numbers painted on the board. Built in HTML/CSS rather than as an image so
it stays sharp at every size, is readable by search engines, and the phone
numbers are real tappable links. */
.signboard{
position:relative;overflow:hidden;
border:1px solid var(--rule-dark);border-radius:var(--r-lg);
background:
radial-gradient(120% 90% at 50% 38%, #2154C6 0%, #163a86 38%, #0E2350 68%, #091628 100%);
padding:clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,4vw,2.5rem);
box-shadow:var(--sh-3);
text-align:center;
isolation:isolate;
}
.signboard::before{ /* faint painted-metal grain */
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);
}
.signboard__phones{
display:flex;flex-direction:column;align-items:flex-end;gap:3px;
font-family:var(--font-mono);font-size:clamp(.7rem,.62rem + .3vw,.84rem);
font-weight:500;color:#DCE6FB;margin-bottom:var(--s-4);line-height:1.5;
}
.signboard__phones a{color:#fff;text-decoration:none;white-space:nowrap;
display:inline-flex;align-items:center;min-height:34px;}
.signboard__phones a:hover{text-decoration:underline;}
.signboard__phones .lbl{color:#D3E0F7;}
.signboard__name{
font-family:var(--font-deva);font-weight:700;
font-size:clamp(2.4rem,1.4rem + 5.4vw,4.6rem);
line-height:1.12;color:#fff;letter-spacing:.005em;
text-shadow:0 2px 0 rgba(0,0,0,.22);
margin:0;
}
.signboard__rule{
width:min(320px,80%);height:2px;margin:clamp(.6rem,1.6vw,1rem) auto;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.signboard__tagline{
font-family:var(--font-head);font-weight:800;
font-size:clamp(.86rem,.7rem + .8vw,1.32rem);
letter-spacing:.11em;text-transform:uppercase;color:#fff;margin:0;
}
.signboard__foot{
margin-top:var(--s-5);padding-top:var(--s-4);
border-top:1px solid rgba(255,255,255,.16);
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:#D3E0F7;
}
@media (max-width:520px){
.signboard__phones{align-items:center;}
}
/* Phone list used in contact blocks and the footer */
.phones{display:grid;gap:2px;}
.phones li{display:flex;align-items:baseline;gap:9px;}
.phones .lbl{
font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;
text-transform:uppercase;color:var(--fg-muted);flex:none;min-width:52px;
}
.phones a{
font-family:var(--font-mono);font-weight:600;font-size:1rem;letter-spacing:.01em;
display:inline-flex;align-items:center;min-height:44px;
}
.footer .phones .lbl{color:var(--fg-ondark-muted);}
.footer .phones a{color:#fff;}
.section--dark .phones .lbl{color:var(--fg-ondark-muted);}
/* WhatsApp button on a dark surface: the neutral ink fill would sink into the navy,
so invert it to a solid light surface. Distinct from the outline buttons beside
it, high contrast, and still inside the neutral palette — the glyph carries the
WhatsApp recognition rather than a fourth brand colour. */
.on-dark .btn--wa,
.section--dark .btn--wa{
background:#fff;color:var(--ink);border-color:#fff;
}
.on-dark .btn--wa:hover,
.section--dark .btn--wa:hover{
background:var(--bg-soft);border-color:var(--bg-soft);color:var(--ink);
}
/* ---------- 27. HERO: fit the conversion actions above the fold ----------
The three primary CTAs must be reachable without scrolling on a 720px-tall
laptop screen, so the hero's vertical rhythm is tightened and the headline is
capped below the global h1 scale. */
.hero{padding-top:calc(var(--header-h) + clamp(1.5rem,3vw,2.5rem));}
.hero h1{font-size:clamp(2.05rem,1.3rem + 2.6vw,3.15rem);}
.hero__badge{margin-bottom:var(--s-4);}
.hero__sub{margin-top:var(--s-4);max-width:50ch;}
.hero__actions{margin-top:var(--s-5);}
.hero__promise{
margin-top:var(--s-4);
font-family:var(--font-mono);font-size:.78rem;font-weight:500;
letter-spacing:.06em;text-transform:uppercase;color:var(--fg-ondark-muted);
}
.hero__links{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);
margin-top:var(--s-4);
}
.hero__links a{
display:inline-flex;align-items:center;gap:8px;min-height:44px;
font-family:var(--font-mono);font-size:.78rem;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;
color:#fff;border-bottom:1px solid rgba(255,255,255,.35);
transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.hero__links a:hover{text-decoration:none;border-bottom-color:var(--accent-500);color:var(--accent-500);}
.hero__links svg{width:16px;height:16px;flex:none;}
.hero__trust{margin-top:var(--s-5);padding-top:var(--s-4);}
/* Small phones (360x740 and similar): the three CTAs stack, so the hero needs a
little more compression to keep all of them in the first view. */
@media (max-width:430px){
.hero{padding-top:calc(var(--header-h) + 1rem);padding-bottom:clamp(2.5rem,7vw,3.5rem);}
.hero h1{font-size:clamp(1.9rem,1.2rem + 3vw,2.4rem);}
.hero__badge{margin-bottom:var(--s-3);padding:7px 13px 7px 9px;}
.hero__sub{margin-top:var(--s-3);font-size:1rem;line-height:1.55;}
.hero__actions{margin-top:var(--s-4);gap:10px;}
.hero__promise{margin-top:var(--s-3);}
}
/* ---------- 28. PRODUCT CATALOGUE ---------- */
.catalogue{margin-top:var(--s-6);}
.catalogue__bar{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
margin-bottom:var(--s-5);
}
.catalogue__search{
position:relative;display:flex;align-items:center;flex:1 1 340px;min-width:0;
}
.catalogue__search > svg{
position:absolute;left:14px;width:19px;height:19px;color:var(--fg-muted);pointer-events:none;
}
.catalogue__search input{
width:100%;min-height:54px;padding:14px 46px;
border:1px solid var(--border-strong);border-radius:var(--r-sm);
background:#fff;font-size:1rem;font-family:var(--font-body);
transition:border-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.catalogue__search input::-webkit-search-cancel-button{display:none;}
.catalogue__search input:hover{border-color:var(--brand-400);}
.catalogue__search input:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 4px rgba(27,77,216,.16);}
.catalogue__search input:focus-visible{outline:3px solid var(--accent-700);outline-offset:2px;}
.catalogue__clear{
position:absolute;right:6px;width:40px;height:40px;border-radius:var(--r-sm);
display:grid;place-items:center;color:var(--fg-muted);
}
.catalogue__clear:hover{background:var(--bg-soft);color:var(--fg);}
.catalogue__clear svg{width:17px;height:17px;}
.catalogue__status{
font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.08em;
text-transform:uppercase;color:var(--fg-muted);flex:none;
}
.filterchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-6);}
.filterchip{
display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 14px;
border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;
font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;
text-transform:uppercase;color:var(--fg-muted);
transition:border-color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.filterchip span{
font-size:.68rem;padding:2px 6px;border-radius:2px;
background:var(--bg-tint);color:var(--brand-600);
}
.filterchip:hover{border-color:var(--fg);color:var(--fg);}
.filterchip.is-on{background:var(--fg);border-color:var(--fg);color:#fff;}
.filterchip.is-on span{background:rgba(255,255,255,.16);color:#fff;}
.catalogue__empty{
padding:var(--s-6);text-align:center;color:var(--fg-muted);
border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--bg-soft);
}
.cat{border-top:2px solid var(--fg);padding-top:var(--s-5);margin-bottom:var(--s-8);}
.cat[hidden]{display:none;}
.cat__head{display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-5);}
.cat__ico{
width:46px;height:46px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
background:var(--bg-tint);border:1px solid var(--border);color:var(--brand-600);
}
.cat__ico svg{width:23px;height:23px;}
.cat__head h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.7rem);}
.cat__head p{font-size:.95rem;color:var(--fg-muted);margin-top:4px;max-width:60ch;}
.cat__count{
margin-left:auto;flex:none;white-space:nowrap;
font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;
text-transform:uppercase;color:var(--fg-muted);
}
.cat__count b{color:var(--fg);font-size:.95rem;}
.cat__items{
display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
gap:var(--s-2) var(--s-4);
border-top:1px solid var(--border);padding-top:var(--s-4);
}
.cat__items li{
display:flex;align-items:center;gap:11px;
padding:7px 9px;border:1px solid transparent;border-radius:var(--r-sm);
font-size:.85rem;line-height:1.35;color:var(--fg-muted);
transition:background-color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.cat__items li:hover{background:var(--bg-soft);border-color:var(--border);color:var(--fg);}
.cat__items li[hidden]{display:none;}
/* the item name is a bare text node (anonymous flex item) */
.cat__items li{overflow-wrap:anywhere;}
.item__thumb{
width:38px;height:38px;flex:none;border-radius:var(--r-sm);
border:1px solid var(--border);background:var(--bg-tint);
object-fit:cover;
}
@media (max-width:560px){
.cat__items{grid-template-columns:1fr;}
.cat__count{margin-left:0;width:100%;}
.cat__head{flex-wrap:wrap;}
}
/* A 2,500-item list is a lot of layout work. content-visibility lets the browser
skip rendering categories that are off-screen entirely, which cuts both the
initial render cost and the reflow when the search filter re-runs.
contain-intrinsic-size keeps the scrollbar stable while they are skipped. */
.cat{
content-visibility:auto;
contain-intrinsic-size:auto 640px;
}
/* stock / to-order pills on the software page */
.pill-stock,.pill-order{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;
text-transform:uppercase;padding:6px 11px;border-radius:var(--r-sm);border:1px solid;
}
.pill-stock svg,.pill-order svg{width:14px;height:14px;flex:none;}
.pill-stock{background:#EAF6EE;color:#14532D;border-color:#B7DCC4;}
.pill-order{background:var(--bg-soft);color:var(--fg-muted);border-color:var(--border-strong);}
/* Item thumbnails are drawn from a data attribute so the markup stays small:
2,573 inline ");}
.item__thumb[data-i="camera"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="users"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="ink"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="printer"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="laptop"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="battery"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="plug"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="monitor"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="keyboard"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="mouse"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="speaker"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="drive"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="usb"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="memory"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="network"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="cable"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="fan"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="cpu"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="zap"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="shield"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="book"]{background-image:url("data:image/svg+xml,");}
.item__thumb[data-i="store"]{background-image:url("data:image/svg+xml,");}
/* hover: white glyph on the dark fill */
.cat__items li:hover .item__thumb[data-i="cctv"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="camera"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="users"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="ink"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="printer"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="laptop"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="battery"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="plug"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="monitor"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="keyboard"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="mouse"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="speaker"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="drive"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="usb"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="memory"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="network"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="cable"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="fan"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="cpu"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="zap"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="shield"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="book"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i="store"]{background-image:url("data:image/svg+xml,");}
.cat__items li:hover .item__thumb[data-i]{background-color:var(--fg);border-color:var(--fg);}
/* ---------- 29. HOME PAGE SPOTLIGHT ----------
A featured band for the highest-demand line. Deliberately different from the
surrounding sections: accent rule, tinted ground, mono demand badge. */
.spotlight{
position:relative;overflow:hidden;
background:var(--bg-tint);
border:1px solid var(--border);
border-left:5px solid var(--accent-700);
border-radius:var(--r-lg);
padding:clamp(1.6rem,4vw,2.75rem);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);
align-items:center;
}
@media (max-width:860px){ .spotlight{grid-template-columns:1fr;} }
.spotlight::after{
content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(245,158,11,.16) 0%,transparent 70%);
}
.spotlight > *{position:relative;}
/* `.spotlight p` (0-1-1) outranks a bare `.spotlight__flag` (0-1-0), so the flag
text would inherit the muted grey and sit at 1.05:1 on the amber. Scope it to
win. Same trap as `.quote__by .avatar` — see MASTER.md section 10. */
.spotlight p.spotlight__flag{
display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s-4);
font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:#fff;background:var(--grad-cta);
padding:7px 13px;border-radius:var(--r-sm);
}
.spotlight p.spotlight__flag svg{width:15px;height:15px;}
.spotlight h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.4rem);}
.spotlight p{color:var(--fg-muted);margin-top:var(--s-4);font-size:1.02rem;line-height:1.65;}
.spotlight .hero__actions{margin-top:var(--s-5);}
.spotlist{
display:grid;gap:2px;background:var(--border);
border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
}
.spotlist li{
display:flex;align-items:center;gap:12px;background:#fff;padding:13px 15px;
}
.spotlist__ico{
width:34px;height:34px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
background:var(--bg-tint);border:1px solid var(--brand-100);color:var(--brand-600);
}
.spotlist__ico svg{width:18px;height:18px;}
.spotlist b{
display:block;font-family:var(--font-head);font-weight:700;font-size:.95rem;
color:var(--fg);letter-spacing:-.015em;
}
.spotlist span{display:block;font-size:.85rem;color:var(--fg-muted);margin-top:1px;}
/* ---------- 30. CCTV DISTRIBUTOR BAND (home page only) ---------- */
.cctvband__grid{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.25rem);
align-items:start;
}
@media (max-width:900px){ .cctvband__grid{grid-template-columns:1fr;} }
.brandwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.brandwall li{
display:flex;flex-direction:column;justify-content:center;gap:3px;
padding:14px 15px;min-height:76px;
background:rgba(255,255,255,.05);border:1px solid var(--rule-dark);
border-radius:var(--r-sm);
transition:background-color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.brandwall li:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);}
.brandwall b{
font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:#fff;
letter-spacing:-.02em;line-height:1.15;
}
.brandwall span{
font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--fg-ondark-muted);
}
.brandwall li.is-lead{
background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.38);
}
.brandwall li.is-lead span{color:var(--accent-500);}
.cctvrange{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px var(--s-5);}
.cctvrange li{
display:flex;align-items:center;gap:10px;
font-size:.95rem;color:var(--fg-ondark-muted);line-height:1.4;
}
.cctvrange svg{width:17px;height:17px;flex:none;color:var(--accent-500);}