:root{
--ink:#111827;
--gray-700:#374151;
--gray-500:#6B7280;
--gray-300:#D1D5DB;
--gray-200:#E5E7EB;
--gray-100:#F3F4F6;
--gray-50:#F9FAFB;
--white:#FFFFFF;
--blue:#2563EB;
--blue-dark:#1D4ED8;
--blue-50:#EFF6FF;
--graphite:#1F2937;
--graphite-dark:#0B0F19;
--red:#DC2626;
--red-dark:#B91C1C;
--radius:8px;
--max-w:1160px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color:var(--ink);
background:var(--white);
line-height:1.55;
-webkit-font-smoothing:antialiased;
padding-bottom:64px;
}
h1,h2,h3,h4{ font-family:'IBM Plex Sans',sans-serif; margin:0; letter-spacing:-0.015em; font-weight:700; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 20px; position:relative; }
@media (min-width:900px){ .wrap{ padding:0 40px; } }

section{ padding:48px 0; position:relative; }
@media (min-width:900px){ section{ padding:88px 0; } }

.eyebrow{
font-family:'IBM Plex Mono',monospace;
font-size:12.5px; font-weight:600;
color:var(--blue); text-transform:uppercase; letter-spacing:0.05em;
margin-bottom:10px;
display:flex; align-items:center; gap:7px;
}
.eyebrow::before{ content:"+"; font-weight:600; }

h2{ font-size:24px; margin-bottom:12px; }
@media (min-width:900px){ h2{ font-size:32px; } }
.lede{ color:var(--gray-500); font-size:15.5px; max-width:560px; }
@media (min-width:900px){ .lede{ font-size:17px; } }

.reveal{ opacity:0; transform:translateY(8px); transition:opacity 450ms ease, transform 450ms ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Background texture system ---------- */
.bg-gray{
background-color:var(--gray-50);
background-image: radial-gradient(circle, rgba(17,24,39,0.09) 1px, transparent 1px);
background-size:20px 20px;
}
.grid-panel{
position:absolute; z-index:0; pointer-events:none;
background-image:
    linear-gradient(rgba(37,99,235,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.14) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image: radial-gradient(circle at 60% 40%, black 0%, black 30%, transparent 72%);
mask-image: radial-gradient(circle at 60% 40%, black 0%, black 30%, transparent 72%);
}
.corner-mark{ position:absolute; width:13px; height:13px; border-color:var(--blue); opacity:0.5; pointer-events:none; }
.corner-mark.tl{ top:10px; left:10px; border-top:2px solid; border-left:2px solid; border-top-left-radius:3px; }
.corner-mark.br{ bottom:10px; right:10px; border-bottom:2px solid; border-right:2px solid; border-bottom-right-radius:3px; }

/* Camera-focus-style hover brackets on interactive cards */
.bracket-card{ position:relative; }
.bracket-card::before, .bracket-card::after{
content:""; position:absolute; width:16px; height:16px;
border-color:var(--graphite); border-style:solid; border-width:0;
opacity:0; transition:opacity 200ms ease, transform 200ms ease;
pointer-events:none; transform:scale(0.85);
}
.bracket-card::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; border-top-left-radius:8px; }
.bracket-card::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:8px; }
.bracket-card:hover::before, .bracket-card:hover::after,
.bracket-card:focus-within::before, .bracket-card:focus-within::after{ opacity:1; transform:scale(1); }
.bracket-card:hover{ border-color:var(--gray-400,#9CA3AF) !important; box-shadow:0 4px 16px -6px rgba(17,24,39,0.22); }

/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-weight:600; font-size:14.5px;
padding:12px 20px; border-radius:var(--radius); border:1px solid transparent;
transition:background 150ms, border-color 150ms, color 150ms, transform 150ms;
cursor:pointer; white-space:nowrap;
}
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--graphite); color:#fff; }
.btn-primary:hover{ background:var(--graphite-dark); }
.btn-urgent{ background:var(--red); color:#fff; }
.btn-urgent:hover{ background:var(--red-dark); }
.btn-outline{ border-color:var(--gray-300); color:var(--ink); background:#fff; }
.btn-outline:hover{ border-color:var(--gray-500); background:var(--gray-50); }
.btn-ghost{ color:var(--blue); font-weight:600; }
.btn-ghost:hover{ text-decoration:underline; }

/* ---------- Header ---------- */
header{
position:sticky; top:0; z-index:60;
background:rgba(255,255,255,0.96); backdrop-filter:blur(6px);
border-bottom:1px solid var(--gray-200);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo{ font-family:'IBM Plex Sans',sans-serif; font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); display:flex; align-items:center; gap:8px; }
.logo-mark{ width:9px; height:9px; border-radius:2px; background:var(--blue); flex:none; }
nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
nav a{ font-size:14.5px; color:var(--gray-700); font-weight:500; transition:color 150ms; }
nav a:hover{ color:var(--ink); }
.nav-desktop{ display:none; align-items:center; gap:32px; }
.nav-call{ display:none; }
@media (min-width:860px){
.nav-desktop{ display:flex; }
.nav-call{ display:inline-flex; }
}
.header-call-mobile{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:var(--radius); background:var(--graphite); color:#fff;
}
@media (min-width:860px){ .header-call-mobile{ display:none; } }

/* ---------- Hero ---------- */
.hero{ padding:36px 0 40px; background:var(--white); overflow:hidden; }
@media (min-width:900px){ .hero{ padding:72px 0 56px; } }
.hero-inner{ display:grid; gap:32px; align-items:center; }
@media (min-width:960px){ .hero-inner{ grid-template-columns:1.05fr 0.95fr; gap:48px; } }
.hero h1{ font-size:32px; line-height:1.15; margin:0 0 16px 0; }
@media (min-width:600px){ .hero h1{ font-size:38px; } }
@media (min-width:960px){ .hero h1{ font-size:44px; } }
.hero .lede{ margin-bottom:26px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }

.hero-visual{ position:relative; }
.hero-visual .grid-panel{ inset:-24px; border-radius:20px; }

/* Simple info card, standard SaaS pattern + precision motif */
.info-card{
position:relative; z-index:1;
background:var(--white);
border:1px solid var(--gray-200);
border-radius:12px;
padding:24px;
max-width:400px;
box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 16px 32px -14px rgba(17,24,39,0.16);
}
.info-card-top{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.info-card-top .icon-wrap{ width:36px; height:36px; border-radius:8px; background:var(--blue-50); display:flex; align-items:center; justify-content:center; color:var(--blue); flex:none; }
.info-card-top h3{ font-size:16px; font-weight:700; }
.info-card-top p{ margin:1px 0 0; font-size:13px; color:var(--gray-500); font-family:'Inter',sans-serif; }
.info-rows{ display:flex; flex-direction:column; }
.info-row{ display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--gray-100); font-size:13.5px; }
.info-row span:first-child{ color:var(--gray-500); }
.info-row span:last-child{ font-weight:600; font-family:'IBM Plex Mono',monospace; font-size:12.5px; }

/* ---------- Quick facts strip ---------- */
.facts-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--gray-200); border-left:1px solid var(--gray-200); }
@media (min-width:700px){ .facts-grid{ grid-template-columns:repeat(4,1fr); } }
.fact{ border-right:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); padding:20px 16px; background:var(--gray-50); }
.fact span{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--gray-500); display:block; margin-bottom:6px; font-weight:500; text-transform:uppercase; letter-spacing:0.03em; }
.fact strong{ font-family:'IBM Plex Sans',sans-serif; font-size:20px; display:block; font-weight:700; }
@media (min-width:600px){ .fact strong{ font-size:22px; } }

/* ---------- Progressive-disclosure system (shared) ---------- */
.xd-trigger{ cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.xd-icon{ position:relative; width:16px; height:16px; flex:none; margin-top:2px; }
.xd-icon::before,.xd-icon::after{ content:""; position:absolute; background:var(--blue); top:50%; left:50%; transform:translate(-50%,-50%); border-radius:2px; }
.xd-icon::before{ width:12px; height:2px; }
.xd-icon::after{ width:2px; height:12px; transition:transform 200ms; }
.expand-item.open .xd-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.xd-panel{ max-height:0; overflow:hidden; transition:max-height 280ms ease; }
.expand-item.open .xd-panel{ max-height:320px; }
.xd-panel-inner{ padding-top:14px; }
.mini-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.mini-list li{ font-size:13.5px; color:var(--gray-700); padding-left:16px; position:relative; }
.mini-list li::before{ content:"–"; position:absolute; left:0; color:var(--blue); font-weight:600; }
.hint-text{ font-size:12px; color:var(--gray-500); margin-top:3px; }

/* ---------- Lab status queue (horizontal scroll-snap) ---------- */
.lab-queue-wrap{ position:relative; margin-top:28px; }
.lab-queue{
display:flex; gap:20px; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding:14px 20px 22px; margin:0 -20px;
-ms-overflow-style:none; scrollbar-width:none;
}
.lab-queue::-webkit-scrollbar{ display:none; }
.lab-queue .svc-card{
scroll-snap-align:center; flex:0 0 auto; width:78%; max-width:340px;
transition:transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease, opacity 260ms ease;
transform:scale(0.92); opacity:0.55;
}
@media (min-width:560px){ .lab-queue .svc-card{ width:320px; } }
.lab-queue .svc-card.is-active{
transform:scale(1); opacity:1;
border-color:var(--graphite);
box-shadow:0 14px 34px -16px rgba(11,15,25,0.32);
}
.lab-fade{ position:absolute; top:0; bottom:22px; width:56px; z-index:2; pointer-events:none; }
.lab-fade-l{ left:0; background:linear-gradient(90deg, var(--gray-50) 0%, transparent 100%); }
.lab-fade-r{ right:0; background:linear-gradient(270deg, var(--gray-50) 0%, transparent 100%); }
.lab-arrow{
position:absolute; top:calc(50% - 11px); z-index:3;
width:38px; height:38px; border-radius:50%; border:1px solid var(--gray-200);
background:#fff; color:var(--ink); display:none; align-items:center; justify-content:center;
cursor:pointer; box-shadow:0 6px 16px -8px rgba(17,24,39,0.25);
transition:background 150ms, border-color 150ms, opacity 150ms;
}
.lab-arrow:hover{ background:var(--gray-50); border-color:var(--gray-300); }
.lab-arrow[disabled]{ opacity:0.35; cursor:default; }
.lab-arrow-l{ left:-6px; }
.lab-arrow-r{ right:-6px; }
@media (min-width:860px){ .lab-arrow{ display:flex; } }

/* Stage status badges — semantic color-coding for quick scanning, not a brand accent */
.stage-badge{
display:inline-flex; align-items:center; gap:6px;
font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
padding:4px 9px; border-radius:20px; white-space:nowrap;
}
.stage-badge::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none; }
.stage-badge.st-intake{ background:#F3F4F6; color:#4B5563; }
.stage-badge.st-intake::before{ background:#9CA3AF; }
.stage-badge.st-diagnosis{ background:#EFF6FF; color:#1D4ED8; }
.stage-badge.st-diagnosis::before{ background:#2563EB; }
.stage-badge.st-repair{ background:#FFF7ED; color:#C2410C; }
.stage-badge.st-repair::before{ background:#EA580C; }
.stage-badge.st-calibration{ background:#FEFCE8; color:#A16207; }
.stage-badge.st-calibration::before{ background:#CA8A04; }
.stage-badge.st-dispatch{ background:#F0FDF4; color:#15803D; }
.stage-badge.st-dispatch::before{ background:#16A34A; }

/* ---------- Services ---------- */
.svc-grid{ display:grid; gap:16px; margin-top:28px; }
@media (min-width:700px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
.svc-card{ background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:22px; transition:border-color 150ms, box-shadow 150ms; }
.svc-num{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--blue); font-weight:600; display:block; margin-bottom:4px; }
.svc-card h3{ font-size:16.5px; margin-bottom:5px; }
.svc-card .svc-teaser{ font-size:14px; color:var(--gray-500); margin:0; font-family:'Inter',sans-serif; }

/* ---------- Equipment ---------- */
.equip-list{ margin-top:28px; }
.equip-row{ border-top:1px solid var(--gray-200); padding:16px 4px; }
.equip-row:last-of-type{ border-bottom:1px solid var(--gray-200); }
.equip-row-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; }
.equip-row-top h4{ font-size:15.5px; font-weight:600; font-family:'IBM Plex Sans',sans-serif; }
.equip-row-top span.tag{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--gray-500); }
.tag-row-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.pill{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:500; padding:8px 14px; border:1px solid var(--gray-200); border-radius:20px; color:var(--gray-700); background:#fff; }

/* ---------- Process ---------- */
.process-list{ display:flex; flex-direction:column; margin-top:28px; }
.proc-step{ border-top:1px solid var(--gray-200); padding:16px 4px; }
.proc-step:last-child{ border-bottom:1px solid var(--gray-200); }
.proc-step-top{ display:flex; gap:16px; cursor:pointer; align-items:flex-start; justify-content:space-between; }
.proc-step-left{ display:flex; gap:16px; }
.proc-num{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--blue); flex:none; width:24px; padding-top:2px; }
.proc-step h4{ font-size:15.5px; margin-bottom:3px; font-family:'IBM Plex Sans',sans-serif; }
.proc-step .proc-teaser{ font-size:14px; color:var(--gray-500); margin:0; font-family:'Inter',sans-serif; }
.proc-step .xd-panel-inner{ padding-left:40px; }
.proc-step .xd-panel-inner p{ font-size:13.5px; color:var(--gray-700); margin:0; }
.proc-step .xd-panel-inner .dur{ font-family:'IBM Plex Mono',monospace; color:var(--blue); font-weight:600; }

/* ---------- Why choose ---------- */
.split{ display:grid; gap:28px; align-items:start; }
@media (min-width:900px){ .split{ grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; } }
.point-list{ list-style:none; margin:20px 0 0; padding:0; }
.point-list li{ display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--gray-200); font-size:14.5px; color:var(--gray-700); }
.point-list li:first-child{ border-top:none; }
.point-check{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--blue-50); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px; }
.why-card{ background:var(--gray-50); border:1px solid var(--gray-200); border-radius:12px; padding:22px; }
.why-card span{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--gray-500); font-weight:600; }
.why-card p{ font-size:14.5px; color:var(--gray-700); margin:10px 0 0; font-family:'Inter',sans-serif; }

/* ---------- Quality ---------- */
.stat-row{ display:grid; gap:16px; margin-top:28px; }
@media (min-width:700px){ .stat-row{ grid-template-columns:repeat(3,1fr); } }
.stat{ background:var(--white); border:1px solid var(--gray-200); border-radius:12px; padding:22px; }
.stat span{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--blue); font-weight:700; display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em; }
.stat p{ font-size:14.5px; color:var(--gray-700); margin:0; font-family:'Inter',sans-serif; }

/* ---------- FAQ ---------- */
.faq{ max-width:720px; margin-top:24px; }
.faq-item{ border-top:1px solid var(--gray-200); }
.faq-item:last-child{ border-bottom:1px solid var(--gray-200); }
.faq-q{
width:100%; text-align:left; background:none; border:none; cursor:pointer;
padding:18px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px;
font-size:15px; font-weight:600; color:var(--ink); font-family:'IBM Plex Sans',sans-serif;
}
.faq-icon{ position:relative; width:16px; height:16px; flex:none; }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; background:var(--gray-500); top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-icon::before{ width:16px; height:2px; border-radius:2px; }
.faq-icon::after{ width:2px; height:16px; border-radius:2px; transition:transform 200ms; }
.faq-item.open .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 220ms ease; }
.faq-a p{ font-size:14.5px; color:var(--gray-500); padding:0 4px 18px; margin:0; font-family:'Inter',sans-serif; }
.faq-item.open .faq-a{ max-height:200px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:32px; margin-top:28px; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1.1fr 0.9fr; gap:56px; } }
form{ display:flex; flex-direction:column; gap:16px; }
.field label{ font-size:13px; font-weight:600; color:var(--gray-700); display:block; margin-bottom:6px; }
.field input, .field textarea{
width:100%; border:1px solid var(--gray-300); border-radius:var(--radius);
padding:11px 13px; font-family:inherit; font-size:15px; color:var(--ink);
background:#fff; transition:border-color 150ms, box-shadow 150ms;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-50); }
textarea{ resize:vertical; min-height:88px; }
.facility-card{ background:var(--white); border:1px solid var(--gray-200); border-radius:12px; padding:24px; }
.facility-card h4{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:18px; font-weight:600; }
.facility-card .line{ font-size:15px; margin-bottom:14px; color:var(--ink); }
.facility-card .line span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--gray-500); margin-bottom:2px; font-weight:500; }
.facility-card .line a{ font-weight:600; }
.facility-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }

/* Copy-to-clipboard on phone / email lines */
.copy-line{ display:flex; align-items:center; gap:8px; }
.copy-btn{
flex:none; display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:6px; border:1px solid var(--gray-200);
background:#fff; color:var(--gray-500); cursor:pointer; transition:background 150ms, color 150ms, border-color 150ms;
position:relative;
}
.copy-btn:hover{ background:var(--gray-50); color:var(--ink); border-color:var(--gray-300); }
.copy-btn svg{ width:13px; height:13px; }
.copy-btn::after{
content:"Copied"; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
background:var(--ink); color:#fff; font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px;
white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 150ms, transform 150ms;
}
.copy-btn.copied::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Accessories / Shop ---------- */
.shop-chips{
display:flex; gap:10px; overflow-x:auto; padding:4px 2px 6px; margin:24px 0 4px;
-ms-overflow-style:none; scrollbar-width:none;
}
.shop-chips::-webkit-scrollbar{ display:none; }
.shop-chip{
flex:none; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
padding:8px 15px; border-radius:20px; border:1px solid var(--gray-200); background:#fff; color:var(--gray-700);
cursor:pointer; transition:background 150ms, border-color 150ms, color 150ms; white-space:nowrap;
}
.shop-chip:hover{ border-color:var(--gray-300); }
.shop-chip.is-active{ background:var(--graphite); border-color:var(--graphite); color:#fff; }

.shop-category{ margin-top:40px; scroll-margin-top:76px; }
.shop-category:first-of-type{ margin-top:28px; }
.shop-category h3{ font-size:17px; margin-bottom:14px; }
.shop-grid{ display:grid; gap:16px; }
@media (min-width:640px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .shop-grid{ grid-template-columns:repeat(3,1fr); } }

.shop-card{ background:#fff; border:1px solid var(--gray-200); border-radius:12px; display:flex; flex-direction:column; }
.shop-photos{ position:relative; aspect-ratio:4/3; background:var(--gray-100); overflow:hidden; border-radius:11px 11px 0 0; }
.shop-photo-strip{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.shop-photo-strip::-webkit-scrollbar{ display:none; }
.shop-photo-slide{
flex:0 0 100%; scroll-snap-align:start; display:flex; align-items:center; justify-content:center;
font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gray-500); text-align:center; padding:12px;
}
.shop-condition{
position:absolute; top:10px; left:10px; z-index:2;
font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;
padding:4px 9px; border-radius:20px; background:rgba(255,255,255,0.92); color:var(--gray-700); border:1px solid var(--gray-200);
}
.shop-dots{ position:absolute; bottom:9px; left:0; right:0; display:flex; justify-content:center; gap:5px; z-index:2; pointer-events:none; }
.shop-dot{ width:5px; height:5px; border-radius:50%; background:rgba(17,24,39,0.25); }
.shop-dot.is-active{ background:var(--graphite); }

.shop-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.shop-name{ font-size:15px; font-weight:700; font-family:'IBM Plex Sans',sans-serif; }
.shop-brand{ font-size:12.5px; color:var(--gray-500); margin-top:-6px; }
.shop-specs{ display:flex; flex-direction:column; gap:0; }
.shop-spec-row{ display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid var(--gray-100); font-size:12.5px; }
.shop-spec-row span:first-child{ color:var(--gray-500); }
.shop-spec-row span:last-child{ font-weight:600; font-family:'IBM Plex Mono',monospace; font-size:12px; }
.shop-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.shop-price{ font-family:'IBM Plex Sans',sans-serif; font-size:18px; font-weight:700; }
.shop-price small{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:500; color:var(--gray-500); }
.shop-whatsapp{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
margin-top:4px; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--gray-200);
font-size:13px; font-weight:600; color:var(--ink); background:#fff; transition:background 150ms, border-color 150ms;
}
.shop-whatsapp:hover{ background:var(--gray-50); border-color:var(--gray-300); }
.shop-whatsapp svg{ width:15px; height:15px; flex:none; }

/* ---------- Back to top ---------- */
.to-top{
position:fixed; right:16px; bottom:80px; z-index:65;
width:42px; height:42px; border-radius:50%; background:var(--graphite); color:#fff;
display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
box-shadow:0 8px 20px -8px rgba(11,15,25,0.45);
opacity:0; transform:translateY(8px); pointer-events:none;
transition:opacity 200ms ease, transform 200ms ease, background 150ms;
}
.to-top.visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--graphite-dark); }
@media (min-width:860px){ .to-top{ bottom:24px; } }

/* ---------- Footer ---------- */
footer{ background:var(--gray-50); color:var(--gray-500); padding:44px 0 24px; border-top:1px solid var(--gray-200); }
.footer-grid{ display:grid; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--gray-200); }
@media (min-width:700px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-brand p{ font-size:13.5px; max-width:280px; color:var(--gray-500); margin-top:12px; }
.footer-grid h5{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; font-weight:600; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ font-size:13.5px; color:var(--gray-700); }
.footer-grid a:hover{ color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; color:var(--gray-500); flex-wrap:wrap; gap:10px; }

/* ---------- Mobile sticky action bar ---------- */
.mobile-bar{
position:fixed; bottom:0; left:0; right:0; z-index:70;
display:flex; background:#fff; border-top:1px solid var(--gray-200);
padding:8px 10px calc(8px + env(safe-area-inset-bottom));
gap:8px;
box-shadow:0 -4px 12px -8px rgba(17,24,39,0.15);
}
.mobile-bar a{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
padding:8px 4px; border-radius:var(--radius); font-size:11px; font-weight:600;
}
.mobile-bar a svg{ width:19px; height:19px; }
.mobile-bar .mb-call{ background:var(--red); color:#fff; }
.mobile-bar .mb-whatsapp{ background:var(--gray-100); color:var(--gray-700); }
.mobile-bar .mb-request{ background:var(--graphite); color:#fff; }
@media (min-width:860px){ .mobile-bar{ display:none; } body{ padding-bottom:0; } }