/* =========================================================
   The PC Doctor — colourful Services page (add-on to style.css)
   Each service gets its own colour; scrolling banner in the header.
   ========================================================= */
:root{
  --c-phone:#00A19A;   --c-phone-2:#00756F;
  --c-pc:#2F6FED;      --c-pc-2:#1B47B5;
  --c-net:#7B4DE0;     --c-net-2:#5229B0;
  --c-soft:#FF8A1F;    --c-soft-2:#D85600;
  --c-data:#14A3D9;    --c-data-2:#0B6FA8;
  --c-clean:#2DB56B;   --c-clean-2:#18864A;
  --c-tune:#EF4B4B;    --c-tune-2:#B9262D;
  --c-car:#F2A20C;     --c-car-2:#C47600;
  --c-solar:#FFC23D;   --c-solar-2:#F08C00;
  --c-hw:#E0459B;      --c-hw-2:#A8236E;
  --c-stats:#1B3550;   --c-stats-2:#0C2033;
}

/* ---------- Page head with scrolling banner ---------- */
.svc-head{background:
  radial-gradient(520px 260px at 92% 10%,rgba(123,77,224,.35),transparent 70%),
  radial-gradient(420px 240px at 70% 120%,rgba(0,161,154,.45),transparent 70%),
  radial-gradient(360px 200px at 10% -20%,rgba(255,194,61,.22),transparent 70%),
  var(--ink)}
.svc-head .title-row{display:flex;align-items:center;gap:28px;margin-bottom:10px}
.svc-head h1{margin:0;flex-shrink:0}
.ticker{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:999px;
  background:linear-gradient(90deg,var(--sun),#FFD978 50%,var(--sun));color:var(--ink);
  box-shadow:0 0 0 3px rgba(255,194,61,.25),0 10px 30px rgba(0,0,0,.25);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 26s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-item{margin:0;max-width:none;display:flex;align-items:center;gap:14px;padding:14px 26px;white-space:nowrap;
  font-weight:800;font-size:clamp(1rem,1.6vw,1.25rem);font-variation-settings:"wdth" 110}
.svc-head .ticker-item{color:var(--ink);font-size:clamp(1rem,1.6vw,1.25rem)}
.ticker-item b{font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.ticker-item a{color:#fff;background:var(--ink);border-radius:999px;padding:6px 14px;text-decoration:none;font-weight:800}
.ticker-item a:hover{background:var(--sea-deep)}
.ticker-item .dot{width:10px;height:10px;border-radius:50%;background:var(--alert);flex-shrink:0}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:820px){
  .svc-head .title-row{flex-direction:column;align-items:stretch;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto}
  .ticker-item{white-space:normal}
  .ticker-item[aria-hidden="true"]{display:none}
  .ticker{-webkit-mask-image:none;mask-image:none;border-radius:18px}
}

/* ---------- Video band ---------- */
.vid-band{background:linear-gradient(180deg,var(--sea-wash),#fff 70%)}
.vid-split{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.vid-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0A6F80;
  box-shadow:0 22px 50px rgba(12,32,51,.28);border:4px solid #fff;aspect-ratio:16/9}
.vid-frame video{width:100%;height:100%;object-fit:cover}
.vid-copy h2 span{color:var(--sea-deep)}
.vid-copy .ticks{margin-bottom:22px}
.vid-copy .cta-row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.vid-split{grid-template-columns:1fr;gap:28px}}

/* ---------- Colourful service cards ---------- */
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.scard{--c:var(--sea);--c2:var(--sea-deep);display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease;
  animation:rise .6s ease both}
.scard:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,32,51,.18)}
.scard .art{position:relative;background:linear-gradient(135deg,var(--c),var(--c2));aspect-ratio:12/7;overflow:hidden}
.scard .art::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12)}
.scard .art::after{content:"";position:absolute;left:-30px;bottom:-50px;width:130px;height:130px;border-radius:50%;background:rgba(0,0,0,.08)}
.scard .art svg{position:relative;z-index:1;width:100%;height:100%;display:block;transition:transform .35s ease}
.scard:hover .art svg{transform:scale(1.05)}
.scard .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1;border-top:5px solid var(--c)}
.scard .kicker{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c2)}
.scard h3{margin:0;font-size:1.3rem}
.scard p{margin:0;color:var(--ink-2);font-size:1rem}
.scard .go{margin-top:auto;padding-top:10px;font-weight:800;color:var(--c2);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.scard .go:hover{text-decoration:underline}
.scard.phone{--c:var(--c-phone);--c2:var(--c-phone-2)}
.scard.pc{--c:var(--c-pc);--c2:var(--c-pc-2)}
.scard.net{--c:var(--c-net);--c2:var(--c-net-2)}
.scard.soft{--c:var(--c-soft);--c2:var(--c-soft-2)}
.scard.data{--c:var(--c-data);--c2:var(--c-data-2)}
.scard.clean{--c:var(--c-clean);--c2:var(--c-clean-2)}
.scard.tune{--c:var(--c-tune);--c2:var(--c-tune-2)}
.scard.car{--c:var(--c-car);--c2:var(--c-car-2)}
.scard.solar{--c:var(--c-solar);--c2:var(--c-solar-2)}
.scard.hw{--c:var(--c-hw);--c2:var(--c-hw-2)}
.scard.stats{--c:var(--c-stats);--c2:var(--c-stats-2)}
.scard.ask{--c:#00A19A;--c2:#7B4DE0}
.scard.ask .art{background:linear-gradient(135deg,#00A19A,#7B4DE0 60%,#E0459B)}
.scard.solar .kicker,.scard.car .kicker{color:#9A5B00}
.scard.solar .go,.scard.car .go{color:#9A5B00}
.scard:nth-child(2){animation-delay:.05s}.scard:nth-child(3){animation-delay:.1s}
.scard:nth-child(4){animation-delay:.15s}.scard:nth-child(5){animation-delay:.2s}
.scard:nth-child(6){animation-delay:.25s}.scard:nth-child(n+7){animation-delay:.3s}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
/* little animations inside the pictures */
.pulse{animation:pulse 1.8s ease-in-out infinite}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
.blink{animation:blink 1.4s steps(2,start) infinite}
.wave{animation:wave 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{to{visibility:hidden}}
@keyframes wave{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.scard,.pulse,.spin,.blink,.wave,.ticker-track{animation:none}.scard:hover{transform:none}}
@media (max-width:980px){.svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.svc-cards{grid-template-columns:1fr}}

/* colourful "not sure" band */
.split .pic video{width:100%;height:100%;object-fit:cover}
.unsure{background:linear-gradient(120deg,var(--ink) 0%,#123A5C 55%,#0E4F5A 100%)}