/* Rapid Tech Solutions — Nocturne design system, standalone build.
   Tokens first; nothing below hard-codes a colour that isn't here. */
:root{
  --bg:#0F1018; --bg-alt:#13141F; --surface:#1A1B28; --surface-2:#212333;
  --text:#e9e9ed;
  --n300:#cfd3e5; --n400:#b2b6ca; --n500:#9397ab; --n600:#75798c; --n700:#595d6c; --n800:#3f424d; --n900:#292b31;
  --accent:#9184d9; --accent-200:#e7e5fe; --accent-300:#d2cefd; --accent-400:#b5abfc;
  --section:#262a60; --section-glow:#353b80;
  /* Conversion actions carry a vibrant colour of their own — deliberately
     outside the desaturated ramps so the call CTA cannot be missed. */
  --cta:#E1345A; --cta-hi:#F4476D; --cta-glow:rgba(225,52,90,.32);
  --star:#FFC53D;
  /* Live "open" indicator. Green reads as available at a glance, which the
     brand purple did not — and being 24/7 it is on every page, all the time. */
  --open:#3DDC84; --open-soft:rgba(61,220,132,.5);
  --r-sm:4px; --r:8px; --r-lg:14px;
  --edge:0 0 0 1px var(--n800); --elev:0 0 0 1px var(--n700),0 6px 18px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
/* No overflow on the body: hidden makes it a scroll container, which kills
   every position:sticky on the page (the header and the pinned process
   stage), and clip propagates to the vertical axis and truncates the
   document. Sections that can overflow horizontally (the hero canvas, the
   brand marquee) clip themselves instead. */
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.08;letter-spacing:-.025em}
p{margin:0}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--accent-300);text-decoration:none}
a:hover{color:var(--accent-200)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:rgba(145,132,217,.3)}
.wrap{width:min(1240px,92vw);margin:0 auto}
.muted{color:var(--n400)}
.dim{color:var(--n500);font-size:13.5px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;top:-100%;left:16px;z-index:200;background:var(--cta);color:#fff;padding:10px 18px;border-radius:0 0 var(--r) var(--r);font-weight:500}
.skip:focus{top:0;color:#fff}
.kicker{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-300);margin-bottom:16px}

/* buttons — secondary outlined per the system; primary is the vibrant CTA */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:500 15px/1.2 inherit;padding:13px 20px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .18s var(--ease)}
.btn-cta{background:var(--cta);border-color:var(--cta);color:#fff;box-shadow:0 8px 26px var(--cta-glow)}
.btn-cta:hover{background:var(--cta-hi);border-color:var(--cta-hi);color:#fff}
.btn-ghost{background:transparent;border-color:var(--n800);color:var(--n300)}
.btn-ghost:hover{border-color:var(--n600);color:var(--text)}
.btn-line{background:rgba(145,132,217,.1);border-color:var(--accent);color:var(--accent-200)}
.btn-line:hover{background:rgba(145,132,217,.2);color:var(--accent-200)}
.btn-lg{font-size:17px;padding:16px 26px}
.btn-block{width:100%}
.btn i{font-size:1.05em}

/* status strip + header */
.status{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:7px 16px;background:#141520;border-bottom:1px solid var(--n900);font-size:12.5px;color:var(--n400)}
.status-live{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;text-align:center}
.status b{color:var(--open);font-weight:600;white-space:nowrap;letter-spacing:.005em}
.status .sep{color:var(--n600)}
.status a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* The dot itself breathes; a second animation throws an expanding halo, which
   is what makes it read as "live" rather than merely decorative. Two separate
   keyframes so the halo can be slower than the pulse. */
.dot{width:7px;height:7px;border-radius:50%;background:var(--open);animation:live 2.4s ease-in-out infinite,halo 2.4s ease-out infinite}
.dot-off{background:var(--n600);animation:none;box-shadow:none}
@keyframes live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
@keyframes halo{0%{box-shadow:0 0 0 0 var(--open-soft)}70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hdr{position:sticky;top:0;z-index:60;background:rgba(15,16,24,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--n900)}
.hdr-in{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);flex:none}
.brand img{border-radius:7px}
.brand span{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.brand b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.brand em{font-style:normal;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--n500)}
.nav{display:flex;gap:20px;margin-left:auto;font-size:13.5px;flex-wrap:wrap}
.nav a{color:var(--n400);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--text)}
.nav a.on{color:var(--text);border-bottom-color:var(--accent)}
.hdr-cta{display:flex;gap:9px;flex:none}
.hdr-cta .btn{font-size:13.5px;padding:8px 14px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--text);cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s}
.bars{position:relative}
.bars::before,.bars::after{content:'';position:absolute;left:0}
.bars::before{top:-7px}.bars::after{top:7px}
.burger[aria-expanded=true] .bars{background:transparent}
.burger[aria-expanded=true] .bars::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] .bars::after{transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{position:relative;display:flex;align-items:center;min-height:min(880px,94vh);padding:clamp(56px,9vh,120px) 0 clamp(40px,6vh,72px);overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.hero-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 60% at 30% 35%,rgba(15,16,24,.32),rgba(15,16,24,.84) 68%,var(--bg))}
.hero .wrap{position:relative;z-index:2}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--n800);border-radius:100px;padding:5px 13px 5px 9px;font-size:12px;color:var(--n400);background:rgba(35,37,50,.55);backdrop-filter:blur(6px);margin-bottom:26px}
.pill i{color:var(--accent-300);font-size:14px}
.hero h1{font-size:clamp(42px,7.4vw,88px);letter-spacing:-.035em;max-width:15ch;margin-bottom:24px}
.hero h1 span{color:var(--accent-300)}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--n400);max-width:54ch;margin-bottom:34px;text-wrap:pretty}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.ring{animation:ring 3.4s ease-out infinite}
@keyframes ring{0%{box-shadow:0 8px 26px var(--cta-glow),0 0 0 0 rgba(255,61,99,.45)}70%{box-shadow:0 8px 26px var(--cta-glow),0 0 0 14px rgba(255,61,99,0)}100%{box-shadow:0 8px 26px var(--cta-glow),0 0 0 0 rgba(255,61,99,0)}}
.proof{display:flex;gap:14px 46px;flex-wrap:wrap;border-top:1px solid var(--n900);padding-top:26px;max-width:820px;list-style:none;margin:0;padding-left:0}
.proof b{display:flex;align-items:baseline;gap:3px;font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.03em}
.proof b span{color:var(--accent-300)}
.proof small{display:block;font-size:12.5px;color:var(--n500);margin-top:2px}

/* sections */
.sec{padding:clamp(72px,10vh,132px) 0}
.sec-alt{background:var(--bg-alt);border-top:1px solid var(--n900);border-bottom:1px solid var(--n900)}
.sec-head{max-width:56ch;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4.4vw,54px);margin-bottom:18px}
.sec-head p{font-size:16.5px;color:var(--n400)}

/* symptom chips */
.symptoms{display:flex;gap:9px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--n800);color:var(--n300);border-radius:100px;padding:11px 17px;font-size:14px}
.chip i{color:var(--accent-300);font-size:16px}
.chip:hover{border-color:var(--accent);color:var(--text);background:rgba(145,132,217,.08)}

/* services list */
.svc-list{display:grid;gap:1px;background:var(--n900);border-top:1px solid var(--n900);border-bottom:1px solid var(--n900)}
.svc{display:grid;grid-template-columns:132px 1fr auto;gap:36px;align-items:center;padding:34px 8px;background:var(--bg);color:var(--text);transition:background .25s}
.svc:hover{background:#1c1e2d}
.svc h3{font-size:clamp(21px,2.4vw,29px);margin-bottom:9px}
.svc p{font-size:15px;color:var(--n400);max-width:62ch;margin-bottom:12px}
.svc-tags{display:flex;gap:8px;flex-wrap:wrap}
.svc-tags span{font-size:11.5px;color:var(--n500);border:1px solid var(--n900);background:var(--surface);border-radius:100px;padding:4px 10px}
.svc-price{text-align:right;padding-right:8px}
.svc-price small{display:block;font-size:12px;color:var(--n500);margin-bottom:4px}
.svc-price b{font-size:19px;font-weight:500;color:var(--accent-300);white-space:nowrap}
.svc-price i{display:block;margin-top:10px;font-size:18px;color:var(--n600)}
.draw path{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.draw.in path{stroke-dashoffset:0}

/* pinned process */
.pin{position:relative;height:230vh}
.pin-stage{position:sticky;top:0;height:100vh;min-height:520px;display:flex;align-items:center;overflow:hidden;padding:32px 0;background:var(--bg-alt);border-top:1px solid var(--n900);border-bottom:1px solid var(--n900)}
.pin-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pin-bar{height:3px;flex:1;max-width:220px;background:var(--n900);border-radius:2px;overflow:hidden}
.pin-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
.pin-meter{display:flex;align-items:center;gap:14px}
.pin-meter span{font-size:12.5px;color:var(--n500);font-variant-numeric:tabular-nums}
.steps{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:15px 18px;border:1px solid var(--n900);border-radius:var(--r-lg);background:var(--surface);opacity:.28;transform:scale(.985);transition:opacity .4s,transform .4s,border-color .4s}
.steps li.past{opacity:.5}
.steps li.on{opacity:1;transform:none;border-color:var(--accent)}
.steps b{width:38px;height:38px;border-radius:50%;border:1px solid var(--n700);display:grid;place-items:center;font-size:13px;font-weight:400;color:var(--n400)}
.steps h3{font-size:16.5px;margin-bottom:4px}
.steps p{font-size:13.5px;color:var(--n400);line-height:1.5}

/* pricing table */
.price-table{border:1px solid var(--n900);border-radius:var(--r-lg);overflow:hidden}
.price-row{display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:24px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--n900);background:var(--surface)}
.price-row:hover{background:var(--surface-2)}
.price-row h3{font-size:17px;display:flex;align-items:center;gap:12px}
.price-row h3 i{color:var(--accent-300);font-size:19px}
.price-row p{font-size:14px;color:var(--n500)}
.price-row b{font-size:19px;font-weight:500;white-space:nowrap}
.price-foot{display:flex;align-items:center;gap:12px;padding:18px 24px;background:#1d1f2d;font-size:13.5px;color:var(--n400)}
.price-foot i{color:var(--accent-300);font-size:18px}

/* the one saturated band */
.band{position:relative;overflow:hidden;background:var(--section)}
.band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 78% 20%,var(--section-glow),transparent 70%)}
.band-in{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding:clamp(56px,8vh,92px) 0}
.band h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:14px;max-width:24ch}
.band p{font-size:16px;color:#c9c7e6;max-width:52ch}
.band ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.band li{display:flex;align-items:center;gap:14px;border:1px solid rgba(233,233,237,.16);border-radius:var(--r);padding:15px 18px;background:rgba(22,24,38,.32)}
.band li i{font-size:20px;color:#cfcbf5}
.band li b{display:block;font-size:15px;font-weight:500}
.band li small{font-size:12.5px;color:#a9a6cf}

/* reviews */
.rev{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center}
.rev-score{display:flex;align-items:flex-end;gap:14px;margin-bottom:10px}
.rev-score b{font-size:clamp(52px,7vw,84px);line-height:.9;font-weight:500;letter-spacing:-.04em}
.stars{display:flex;gap:3px;color:var(--star);font-size:15px}
/* Shown on the homepage and /reviews/ whenever the Google feed is unconfigured
   or the cache is cold. It was styled as a build-time placeholder — hatched
   stripes, monospace — which is what a visitor actually saw, so it reads as a
   real panel now. */
.rev-feed{border:1px solid var(--n900);border-radius:var(--r-lg);min-height:320px;display:grid;place-items:center;padding:clamp(28px,5vw,44px);text-align:center;background:var(--surface)}
.rev-feed>div{display:grid;gap:18px;justify-items:center;max-width:48ch}
.rev-feed p{font-size:15.5px;line-height:1.65;color:var(--n300);margin:0}
.rev-feed i{font-size:30px;color:var(--n500)}

/* areas */
.areas{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--n900);border:1px solid var(--n900);border-radius:var(--r-lg);overflow:hidden}
.area-grid a{background:var(--surface);padding:18px;color:var(--text);transition:background .2s}
.area-grid a:hover{background:var(--surface-2)}
.area-grid b{display:block;font-size:15px;font-weight:500;margin-bottom:3px}
.area-grid small{font-size:11.5px;color:var(--n600)}

/* brand marquee */
.marquee{border-top:1px solid var(--n900);border-bottom:1px solid var(--n900);padding:34px 0;overflow:hidden}
.marquee-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.marquee-head span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--n600)}
.marquee-head i{height:1px;flex:1;background:linear-gradient(to right,rgba(233,233,237,.16),transparent)}
.marquee-row{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.marquee-row span{font-size:17px;font-weight:500;color:var(--n700);white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* faq — native details, works without JS */
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.faq details{border-bottom:1px solid var(--n900)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font-size:16.5px;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'\002B';font-size:20px;color:var(--accent-300);line-height:1}
.faq details[open] summary{color:var(--accent-200)}
.faq details[open] summary::after{content:'\2212'}
.faq p{font-size:14.5px;color:var(--n400);padding-bottom:20px;max-width:64ch}

/* closing cta */
.close{text-align:center;max-width:760px;margin:0 auto}
.close h2{font-size:clamp(30px,4.4vw,52px);margin-bottom:18px}
.close p{font-size:17px;color:var(--n400);margin-bottom:32px}
.close div{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* footer */
.ftr{border-top:1px solid var(--n900);background:#141622;padding:56px 0 28px;font-size:14px}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.ftr h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--n600);margin-bottom:14px}
.ftr a{display:block;margin-bottom:9px;color:var(--n400);font-size:13.5px}
.ftr a:hover{color:var(--text)}
.ftr .muted{font-size:13.5px;margin-bottom:14px;max-width:34ch}
.brand-ftr{margin-bottom:16px}
.brand-ftr b{font-size:15px}
.ftr-base{border-top:1px solid var(--n900);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--n600)}
.ftr-links{display:flex;gap:18px}
.ftr-links a{display:inline;margin:0;color:var(--n600)}

/* floating chrome */
.call-pill{position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:9px;background:var(--cta);color:#fff;font-weight:500;font-size:14.5px;padding:14px 22px;border-radius:100px;box-shadow:0 10px 30px rgba(255,61,99,.4);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),background .2s}
.call-pill.in{opacity:1;transform:none;pointer-events:auto}
.call-pill:hover{background:var(--cta-hi);color:#fff}
.wa-fab{position:fixed;left:20px;bottom:20px;z-index:70;width:46px;height:46px;border-radius:50%;border:1px solid var(--n800);background:var(--surface);color:var(--n300);display:grid;place-items:center;cursor:pointer;box-shadow:var(--elev);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),border-color .2s,color .2s}
.wa-fab.in{opacity:1;transform:none;pointer-events:auto}
.wa-fab:hover{border-color:var(--accent);color:var(--accent-300)}
.wa-fab i{font-size:22px}
.wa-panel{position:fixed;left:20px;bottom:78px;z-index:70;width:min(320px,88vw);border:1px solid var(--n800);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--elev);overflow:hidden}
.wa-panel[hidden]{display:none}
.wa-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--n900);font-size:14px;font-weight:500}
.wa-head button{background:none;border:0;color:var(--n500);cursor:pointer;font-size:18px}
.wa-body{padding:16px}
.wa-body p{margin-bottom:12px}
textarea,input,select{width:100%;background:var(--bg);border:1px solid var(--n800);border-radius:var(--r);padding:12px 14px;font:400 15px/1.5 inherit;color:var(--text);outline:none}
textarea:focus,input:focus,select:focus{border-color:var(--accent)}
.wa-body textarea{margin-bottom:12px;resize:vertical}
.cookie{position:fixed;inset:auto 0 0 0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:14px 5vw;background:var(--surface);border-top:1px solid var(--n800)}
.cookie[hidden]{display:none}
.cookie p{font-size:13.5px;color:var(--n400)}
.cookie div{display:flex;gap:9px}

/* reveal-on-scroll: the only JS-driven visual state */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].in{opacity:1;transform:none}

@media(max-width:1080px){
  .rev,.areas,.faq,.band-in,.pin-grid{grid-template-columns:1fr}
  .pin{height:auto}
  .pin-stage{position:static;min-height:0}
  .steps li{opacity:1;transform:none}
}
@media(max-width:880px){
  .burger{display:flex;margin-left:auto}
  .nav{display:none;order:3;width:100%;flex-direction:column;gap:0;margin:0}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--n900);font-size:15px}
  .hdr-cta{margin-left:0}
  .svc{grid-template-columns:1fr;gap:18px}
  .svc-price{text-align:left;padding:0}
  .price-row{grid-template-columns:1fr;gap:8px}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .area-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .call-pill{padding:12px 18px;font-size:13.5px}
  /* The pill is an inline-flex row, so its icon and its two phrases are
     separate flex items that wrap independently — which strands the '/'
     mid-air once the line no longer fits. Inline layout lets the whole
     sentence wrap as one, so the separator stays with the words. */
  .pill{display:inline-block;border-radius:16px;padding:8px 14px;line-height:1.55}
  .pill i{vertical-align:-2px;margin-right:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-rv]{opacity:1;transform:none}
  .draw path{stroke-dashoffset:0}
  html{scroll-behavior:auto}
}


/* ══════════════════════════════════════════════════════════════════════════
   COLOUR — one hue per service, plus the brand green for WhatsApp and gold
   for stars. Used as icon colour, hairline and tint only: the grounds stay
   desaturated, so colour marks the content rather than flooding it.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --c-repair:#5AC8FA;   /* computer repairs — cool blue   */
  --c-virus:#FFB020;    /* virus & malware  — amber       */
  --c-data:#A78BFA;     /* data recovery    — violet      */
  --c-net:#34D399;      /* wi-fi & networks — green       */
  --wa:#25D366;         /* WhatsApp brand green           */
  --hue:var(--accent);  /* default; overridden per service */
}
.svc-computer-repairs{--hue:var(--c-repair)}
.svc-virus-removal{--hue:var(--c-virus)}
.svc-data-recovery{--hue:var(--c-data)}
.svc-network-wifi{--hue:var(--c-net)}

/* homepage service rows pick up their hue on the line art, price and edge */
.svc:nth-child(1){--hue:var(--c-repair)}
.svc:nth-child(2){--hue:var(--c-virus)}
.svc:nth-child(3){--hue:var(--c-data)}
.svc:nth-child(4){--hue:var(--c-net)}
.svc .draw path{stroke:var(--hue)}
.svc-price b{color:var(--hue)}
.svc{position:relative}
.svc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--hue);opacity:0;transition:opacity .25s}
.svc:hover::before{opacity:1}
.svc-ico{font-size:22px;color:var(--hue);display:block;margin-bottom:14px}

/* pricing rows take the same four hues, in the same order */
.price-row:nth-child(1) h3 i,.price-row:nth-child(1) h2 i{color:var(--c-repair)}
.price-row:nth-child(2) h3 i,.price-row:nth-child(2) h2 i{color:var(--c-virus)}
.price-row:nth-child(3) h3 i,.price-row:nth-child(3) h2 i{color:var(--c-data)}
.price-row:nth-child(4) h3 i,.price-row:nth-child(4) h2 i{color:var(--c-net)}

/* symptom chips: colour by kind, left to right */
.symptoms .chip:nth-child(1) i{color:var(--c-repair)}
.symptoms .chip:nth-child(2) i{color:var(--c-virus)}
.symptoms .chip:nth-child(3) i{color:var(--cta)}
.symptoms .chip:nth-child(4) i{color:var(--c-net)}
.symptoms .chip:nth-child(5) i{color:var(--c-data)}
.symptoms .chip:nth-child(6) i{color:var(--accent-400)}

/* WhatsApp is green wherever it appears */
.wa-fab{color:var(--wa);border-color:rgba(37,211,102,.4)}
.wa-fab:hover{color:#fff;background:var(--wa);border-color:var(--wa)}
.wa-fab.in{box-shadow:0 8px 24px rgba(37,211,102,.22)}
.wa-head{background:rgba(37,211,102,.1)}
.wa-link i{color:var(--wa)}

/* ─────────────────────────── page furniture ─────────────────────────── */
.crumbs{padding:14px 0}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--n600)}
.crumbs li+li::before{content:'\203A';margin-right:8px;color:var(--n700)}
.crumbs a{color:var(--n500)}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--n400)}
.page-head{padding:24px 0 clamp(40px,6vh,64px)}
.page-head h1{font-size:clamp(34px,5.4vw,66px);letter-spacing:-.035em;margin-bottom:20px;max-width:22ch}
.page-head .lead{margin-bottom:24px}
.narrow{width:min(820px,92vw)}
.center{text-align:center}
.center .lead,.center h1{margin-left:auto;margin-right:auto}
.head-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.act{display:flex;gap:12px;flex-wrap:wrap}
.center-act{justify-content:center;margin-top:28px}
.h-mid{font-size:clamp(22px,2.6vw,32px);margin-bottom:24px}
.h-left{font-size:clamp(24px,3vw,36px)}
.trust{display:flex;gap:12px 28px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--n400)}
.trust li{display:flex;align-items:center;gap:8px}
.trust i{color:var(--accent-300);font-size:16px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.duo h2{font-size:24px;margin-bottom:14px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* cards */
.card{border:1px solid var(--n900);border-radius:var(--r-lg);background:var(--surface);padding:26px}
.card h2{font-size:22px;margin-bottom:16px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:14px;color:var(--n400)}
.card-price small,.card-jobs small{display:block;font-size:12px;color:var(--n500);margin-bottom:6px}
.card-price>b{display:block;font-size:34px;font-weight:500;letter-spacing:-.03em;margin-bottom:20px;color:var(--hue)}
.card-price ul,.card-jobs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.card-price li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--n300)}
.card-price li i{color:var(--hue);font-size:16px;margin-top:2px}
.card-jobs{padding:0;overflow:hidden}
.card-jobs small{padding:20px 22px 0}
.card-jobs ul{gap:0}
.card-jobs li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-top:1px solid var(--n900);font-size:14px}
.card-jobs li b{color:var(--accent-300);font-weight:500}
.card-jobs>p{padding:16px 22px;border-top:1px solid var(--n900)}

/* tiles */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--n900);border:1px solid var(--n900);border-radius:var(--r-lg);overflow:hidden}
.tile-4{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--surface);padding:22px;color:var(--text);border-left:2px solid transparent;transition:background .2s,border-color .2s}
.tile:hover{background:var(--surface-2);border-left-color:var(--hue)}
.tile b{display:block;font-size:16px;font-weight:500;margin-bottom:6px}
.tile small{font-size:13px;color:var(--n500)}

/* services index */
.svc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.svc-card{color:var(--text);border-top:2px solid var(--hue);transition:background .2s,transform .25s var(--ease)}
.svc-card:hover{background:var(--surface-2);transform:translateY(-2px)}
.svc-card h2{font-size:26px;margin-bottom:10px}
.svc-card .kicker{color:var(--hue)}
.svc-card ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.svc-card li{display:flex;gap:9px;font-size:13.5px;color:var(--n400)}
.svc-card li i{color:var(--hue)}
.svc-card-price{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:19px;font-weight:500;color:var(--hue)}

/* areas index */
.area-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.area-card{color:var(--text);transition:background .2s,transform .25s var(--ease)}
.area-card:hover{background:var(--surface-2);transform:translateY(-2px)}
.area-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.area-card h2{font-size:20px;margin:0}
.area-card-top i{color:var(--n600)}
.area-card p{margin-bottom:14px}
.area-card small{font-size:12px;color:var(--accent-300);line-height:1.5;display:block}

/* guides */
.post-list{display:grid;gap:1px;background:var(--n900);border-top:1px solid var(--n900);border-bottom:1px solid var(--n900)}
.post-row{display:grid;grid-template-columns:150px 1fr auto;gap:32px;align-items:center;background:var(--bg);padding:26px 8px;color:var(--text);transition:background .2s}
.post-row:hover{background:#1c1e2d}
.post-row b{display:block;font-size:20px;font-weight:500;margin-bottom:6px}
.post-row small{display:block;font-size:14px;color:var(--n500);max-width:70ch}
.prose{width:min(760px,92vw);margin:0 auto;padding:8px 0 clamp(64px,9vh,110px)}
.prose h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.035em;margin:12px 0 20px}
.prose h2{font-size:24px;margin:36px 0 12px}
.prose p{font-size:16.5px;color:var(--n400);line-height:1.7;margin-bottom:20px}
.prose .stand{font-size:19px;color:var(--n300);margin-bottom:32px}
/* Long-form blocks. .prose previously styled only h1/h2/p, which capped how
   structured a guide could be — no subheadings, no lists, no callouts. */
.prose h3{font-size:18.5px;color:var(--text);margin:28px 0 10px;letter-spacing:-.01em}
.prose strong{color:var(--n200);font-weight:600}
.prose a{color:var(--accent-200);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--accent)}
.prose-list{margin:0 0 20px;padding-left:22px;color:var(--n400);font-size:16.5px;line-height:1.7}
.prose-list li{margin-bottom:9px}
.prose-list li::marker{color:var(--accent-300)}
.prose .note{display:block;margin:24px 0;padding:16px 18px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:rgba(145,132,217,.09);color:var(--n300);font-size:15.5px;line-height:1.65}
.prose-dl{margin:0 0 22px}
.prose-dl dt{color:var(--text);font-weight:600;font-size:16px;margin-top:16px}
.prose-dl dd{margin:5px 0 0;color:var(--n400);font-size:16px;line-height:1.7}
.wrap-narrow{max-width:780px}
/* Area pages reuse the prose rhythm inside a normal section. */
.area-prose h2{font-size:23px;margin:34px 0 12px;color:var(--text)}
.area-prose h3{font-size:18px;margin:24px 0 9px;color:var(--text)}
.area-prose p{font-size:16.5px;color:var(--n400);line-height:1.7;margin-bottom:18px}
.inline-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;border:1px solid var(--n900);border-radius:var(--r-lg);background:var(--surface);padding:26px}
.inline-cta b{display:block;font-size:17px;font-weight:500;margin-bottom:4px}
.inline-cta small{font-size:14px;color:var(--n500)}

/* stat band — the one place the saturated ground reappears */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--n900);border:1px solid var(--n900);border-radius:var(--r-lg);overflow:hidden}
.stat-band div{background:var(--surface);padding:26px}
.stat-band b{display:flex;align-items:baseline;gap:2px;font-size:32px;font-weight:500;letter-spacing:-.03em}
.stat-band b span+span{color:var(--accent-300)}
.stat-band small{display:block;font-size:12.5px;color:var(--n500);margin-top:4px}

/* reviews page */
.rev-score.big{align-items:flex-end;gap:18px;margin-bottom:14px}
.rev-score.big b{font-size:clamp(60px,9vw,110px);line-height:.86}
.stars-lg{font-size:19px;gap:4px}
.rev-feed.tall{min-height:420px}

/* forms and the wizard */
.field{margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lbl{display:block;font-size:13px;color:var(--n400);margin-bottom:7px}
fieldset{border:0;margin:0 0 8px;padding:0}
legend{display:block;margin-bottom:20px}
.step-h{display:block;font-size:26px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.wiz-bar{display:flex;gap:10px;list-style:none;margin:0 0 32px;padding:0}
.wiz-bar li{flex:1}
.wiz-bar i{display:block;height:3px;border-radius:2px;background:var(--n900);margin-bottom:10px;transition:background .3s}
.wiz-bar span{font-size:12px;color:var(--n600);transition:color .3s}
.wiz-bar li.on i{background:var(--accent)}
.wiz-bar li.on span{color:var(--text)}
.wiz-bar li.done i{background:var(--c-net)}
.opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt{display:flex;align-items:center;gap:14px;border:1px solid var(--n900);background:var(--surface);border-radius:var(--r-lg);padding:18px 20px;cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:rgba(145,132,217,.12)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt i{font-size:22px;color:var(--accent-300)}
.opt b{display:block;font-size:15.5px;font-weight:500}
.opt small{display:block;font-size:12.5px;color:var(--n500)}
.opt:nth-child(1) i{color:var(--c-repair)}
.opt:nth-child(2) i{color:var(--c-virus)}
.opt:nth-child(3) i{color:var(--cta)}
.opt:nth-child(4) i{color:var(--c-net)}
.opt:nth-child(5) i{color:var(--c-data)}
.opt:nth-child(6) i{color:var(--accent-400)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill-opt{border:1px solid var(--n800);background:var(--surface);color:var(--n300);border-radius:100px;padding:9px 16px;font-size:13.5px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.pill-opt:hover{border-color:var(--accent)}
.pill-opt.sel{border-color:var(--accent);background:rgba(145,132,217,.14);color:var(--accent-200)}
.pill-opt input{position:absolute;opacity:0;width:0;height:0}
.wiz-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.wiz-nav .dim{margin-left:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border:1px solid var(--cta);background:rgba(255,61,99,.08);border-radius:var(--r);padding:14px 18px;margin-bottom:24px;font-size:14px;color:var(--n300)}
.alert ul{margin:6px 0 0;padding-left:18px}
.contact-list{display:flex;flex-direction:column;gap:1px;background:var(--n900);border:1px solid var(--n900);border-radius:var(--r-lg);overflow:hidden;margin:28px 0 20px}
.contact-list a{display:flex;align-items:center;gap:16px;padding:20px 22px;background:var(--surface);color:var(--text);transition:background .2s}
.contact-list a:hover{background:var(--surface-2)}
.contact-list i{font-size:20px;color:var(--accent-300)}
.contact-list small{display:block;font-size:12px;color:var(--n600)}
.contact-list b{display:block;font-size:15.5px;font-weight:500}
.done{font-size:46px;color:var(--c-net);margin-bottom:16px}
.faq-single details{border-bottom:1px solid var(--n900)}
.faq-single summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:17px;font-weight:500;cursor:pointer;list-style:none}
.faq-single summary::-webkit-details-marker{display:none}
.faq-single summary::after{content:'\002B';font-size:20px;color:var(--accent-300)}
.faq-single details[open] summary{color:var(--accent-200)}
.faq-single details[open] summary::after{content:'\2212'}
.faq-single p{font-size:15px;color:var(--n400);padding-bottom:22px;max-width:70ch}

@media(max-width:1080px){
  .head-grid,.duo,.svc-cards{grid-template-columns:1fr}
  .trio,.area-cards{grid-template-columns:repeat(2,1fr)}
  .tile-4{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .trio,.area-cards,.tile-grid,.tile-4,.opt-grid,.field-row{grid-template-columns:1fr}
  .post-row{grid-template-columns:1fr;gap:8px}
  .wiz-bar span{font-size:11px}
}


/* review wall — rendered from the cached Places payload */
.rev-wall{columns:3 300px;column-gap:16px}
.rev-card{break-inside:avoid;margin:0 0 16px;padding:22px}
.rev-card blockquote{margin:12px 0 14px;font-size:14.5px;color:var(--n300);line-height:1.6}
.rev-card figcaption{display:flex;align-items:center;gap:10px}
.rev-card figcaption img{border-radius:50%}
.rev-card figcaption b{display:block;font-size:13px;font-weight:500}
.rev-card figcaption small{display:block;font-size:12px;color:var(--n600)}
.rev-card .stars{font-size:12px}
.wall-note{margin-top:8px}
@media(max-width:760px){.rev-wall{columns:1}}


/* hero booking card — the funnel starts above the fold, as it did before */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start}
.hero h1{font-size:clamp(38px,5.4vw,74px)}
.slash{color:var(--n700)}
.hero-book{background:var(--color-surface,var(--surface));border:1px solid var(--n800);border-top:2px solid var(--cta);border-radius:var(--r-lg);padding:22px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.hero-book h2{display:flex;align-items:center;gap:9px;font-size:19px;margin-bottom:4px}
.hero-book h2 i{color:var(--cta);font-size:20px}
.hero-book>.dim{margin-bottom:16px}
.hero-book form{display:flex;flex-direction:column;gap:9px}
.hero-book input,.hero-book select,.hero-book textarea{padding:11px 13px;font-size:14px}
.hero-book textarea{min-height:72px;resize:vertical}
.hero-book .btn{margin-top:3px;padding:14px;font-size:15.5px}
.hb-trust{display:flex;justify-content:space-between;gap:8px;list-style:none;margin:14px 0 0;padding:0;font-size:11px;color:var(--n500)}
.hb-trust li{display:inline-flex;align-items:center;gap:5px}
.hb-trust i{font-size:14px}
.hb-trust li:nth-child(1) i{color:var(--c-net)}
.hb-trust li:nth-child(2) i{color:var(--c-repair)}
.hb-trust li:nth-child(3) i{color:var(--c-virus)}
.proof{margin-top:12px}
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-book{max-width:520px}
  .hero{min-height:0}
}

/* Local icon sprite. The <i> wrapper keeps every existing `i` selector
   working; the svg is 1em square and inherits currentColor, so font-size
   and color on the parent still size and tint the icon. */
i.ico{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
i.ico>svg{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stars i.ico>svg{fill:currentColor;stroke:none}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION — ambient and interaction only. Everything here is switched off by
   the prefers-reduced-motion block above, which uses !important and therefore
   still wins despite appearing earlier in the file.
   ══════════════════════════════════════════════════════════════════════ */

/* A very slow drift behind the hero. Two offset radial gradients moving on
   different periods never quite repeat, so the background stays alive without
   any element visibly sliding. */
.hero::before{content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 44% at 22% 30%,rgba(145,132,217,.16),transparent 70%),
    radial-gradient(32% 38% at 78% 66%,rgba(225,52,90,.11),transparent 72%);
  animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.02)}}

/* Cards and tiles lift toward the pointer. Small distances — a 2px rise reads
   as responsive, a 10px one reads as a toy. */
.tile{transition:background .2s,border-color .2s,transform .22s var(--ease),box-shadow .22s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.area-grid a{transition:background .2s,transform .22s var(--ease),box-shadow .22s var(--ease)}
.area-grid a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.42)}
.card{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.42);border-color:var(--n800)}

/* The call button is the one thing on the page that should feel eager. */
.btn{transition:background .2s,border-color .2s,color .2s,transform .18s var(--ease),box-shadow .22s var(--ease)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(225,52,90,.42)}
.btn-cta:active{transform:translateY(0)}
.btn-ghost:hover{transform:translateY(-2px)}

/* Nav links get an underline that grows from the left rather than appearing. */
.hdr nav a{position:relative}
.hdr nav a::after{content:'';position:absolute;left:0;bottom:-5px;height:1.5px;width:0;
  background:var(--accent);transition:width .24s var(--ease)}
.hdr nav a:hover::after{width:100%}

/* Service tiles pick up their own hue on hover instead of a generic grey. */
.tile:hover b{color:var(--accent-200)}

/* The FAQ chevron rotates rather than swapping character. */
.faq summary::after{transition:transform .22s var(--ease),color .22s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}

/* The existing [data-rv] reveal (18px, .7s) is deliberately left alone. An
   override here would be more specific than the reduced-motion rule that
   resets it, which would strand content 8px off-position for anyone who has
   reduced motion switched on. */