/* ============================================================
   PC GURU — standalone site stylesheet (no build step).
   Tokens + base + components + page layout in one file.
   ============================================================ */
:root{
  /* Brand blue */
  --blue-100:#b9e6ff;--blue-200:#84d3ff;--blue-300:#4dbcff;--blue-400:#2ba8ff;
  --blue-500:#1e90ff;--blue-600:#1473d6;--blue-700:#0f59a8;--blue-900:#0a2f56;
  /* Cyan */
  --cyan-300:#7af0ff;--cyan-400:#36e3ff;--cyan-500:#00d5ff;--cyan-600:#00aed0;
  /* Chrome */
  --chrome-100:#f4f8fc;--chrome-300:#b4c0cf;--chrome-400:#8c99ab;
  /* Ink */
  --ink-950:#04060c;--ink-900:#070b14;--ink-850:#0a1019;--ink-800:#0e1422;
  --ink-750:#131b2c;--ink-700:#1a2336;--ink-650:#222d44;--ink-600:#2c3852;
  --ink-500:#3a4865;--ink-400:#5a6884;--ink-300:#8492a8;--ink-200:#aeb9cb;
  --ink-100:#d4dbe7;--ink-50:#eef2f8;
  /* Status */
  --success-500:#21d07a;--warning-500:#ffb02e;--danger-500:#ff4d5e;--crypto-500:#b48cff;
  /* Semantic */
  --bg-app:var(--ink-900);--bg-deep:var(--ink-950);
  --surface-1:var(--ink-800);--surface-2:var(--ink-700);
  --text-strong:var(--ink-50);--text-body:var(--ink-100);--text-muted:var(--ink-300);
  --text-faint:var(--ink-400);--text-on-blue:#04101f;
  --border-subtle:var(--ink-700);--border-default:var(--ink-600);--border-strong:var(--ink-500);
  --border-glow:rgba(30,144,255,.55);
  --brand:var(--blue-500);--brand-hot:var(--cyan-500);
  --focus-ring:rgba(54,227,255,.65);
  /* Type */
  --font-display:'Chakra Petch','Saira',system-ui,sans-serif;
  --font-body:'Saira',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  /* Radii */
  --radius-xs:3px;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
  --container:1320px;
  /* Effects */
  --shadow-md:0 6px 18px rgba(0,0,0,.5);--shadow-lg:0 18px 44px rgba(0,0,0,.6);
  --glow-blue-sm:0 0 0 1px rgba(30,144,255,.35),0 0 12px rgba(30,144,255,.35);
  --glow-blue-md:0 0 0 1px rgba(30,144,255,.5),0 0 22px rgba(30,144,255,.45);
  --glow-blue-lg:0 0 1px 1px rgba(54,227,255,.6),0 0 34px rgba(30,144,255,.55),0 0 70px rgba(30,144,255,.3);
  --glow-text:0 0 8px rgba(54,227,255,.65),0 0 22px rgba(30,144,255,.45);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.06);
  --grad-blue:linear-gradient(135deg,var(--blue-400) 0%,var(--blue-600) 100%);
  --grad-surface:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 60%);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-base:200ms;
}

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg-deep);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:transparent;
  font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.5;
  color:var(--text-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-0.01em;color:var(--text-strong);margin:0 0 .5em;}
p{margin:0 0 1em;text-wrap:pretty;}
a{color:var(--blue-300);text-decoration:none;transition:color 120ms var(--ease-out);}
::selection{background:rgba(30,144,255,.35);color:var(--ink-50);}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
img{max-width:100%;}

/* ---- Background video + scrim ---- */
#bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none;}
#bg-scrim{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 80% at 50% 0%,rgba(7,11,20,.30),rgba(7,11,20,.55) 70%,rgba(4,6,12,.78) 100%);
  transition:background 700ms var(--ease-out),backdrop-filter 700ms ease;
}
body.dim #bg-scrim{
  background:linear-gradient(180deg,rgba(5,7,13,.90),rgba(4,6,12,.93));
  backdrop-filter:saturate(.9) blur(2px);
}

/* ---- Layout helpers ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 32px;}
.section{padding:92px 32px;}
.band{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:rgba(4,6,12,.35);}
.center{text-align:center;}
.sec-head{text-align:center;margin:0 auto 46px;max-width:680px;}
.sec-head h2{font-size:38px;margin:12px 0 10px;}
.sec-head p{color:var(--text-muted);font-size:16px;margin:0;}
.eyebrow{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--brand-hot);}

/* ---- Icons ---- */
.ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle;flex:none;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:600;letter-spacing:.02em;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  white-space:nowrap;text-decoration:none;height:42px;padding:0 20px;font-size:15px;
  transition:transform .12s var(--ease-out),box-shadow .2s var(--ease-out),background .2s,border-color .2s;
}
.btn--sm{height:34px;padding:0 14px;font-size:13px;gap:7px;}
.btn--lg{height:52px;padding:0 28px;font-size:17px;gap:11px;}
.btn--block{width:100%;}
.btn--primary{background:var(--grad-blue);color:var(--text-on-blue);border-color:var(--blue-400);box-shadow:var(--glow-blue-md);}
.btn--primary:hover{box-shadow:var(--glow-blue-lg);transform:translateY(-1px);}
.btn--primary:active{transform:scale(.98);}
.btn--secondary{background:var(--surface-2);color:var(--text-strong);border-color:var(--border-strong);box-shadow:var(--edge-top);}
.btn--secondary:hover{box-shadow:var(--glow-blue-sm);transform:translateY(-1px);}
.btn--secondary:active{transform:scale(.98);}

/* ---- Badge ---- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-pill);border:1px solid transparent;}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;}
.badge--cyan{color:var(--cyan-400);background:rgba(0,213,255,.12);border-color:rgba(0,213,255,.4);}
.badge--blue{color:var(--blue-300);background:rgba(30,144,255,.14);border-color:rgba(30,144,255,.4);}
.badge--solid.badge--cyan{color:var(--text-on-blue);background:var(--cyan-500);border-color:transparent;}

/* ---- Tag ---- */
.tag{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;font-family:var(--font-body);font-size:13px;font-weight:500;border-radius:var(--radius-pill);color:var(--text-body);background:var(--ink-750);border:1px solid var(--border-default);}

/* ---- Card ---- */
.card{position:relative;background:var(--surface-1);background-image:var(--grad-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md),var(--edge-top);}
.card--glow{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s;}
.card--glow:hover{border-color:var(--border-glow);box-shadow:var(--glow-blue-md),var(--edge-top);}
.card--interactive{cursor:pointer;}
.card--interactive:hover{transform:translateY(-3px);}
.card--pad0{padding:0;}

/* ---- Icon chip ---- */
.icon-chip{display:inline-flex;width:48px;height:48px;border-radius:var(--radius-md);align-items:center;justify-content:center;background:var(--ink-950);border:1px solid var(--border-glow);box-shadow:var(--glow-blue-sm);color:var(--cyan-400);}
.icon-chip--blue{color:var(--blue-300);}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);background:rgba(7,11,20,.8);border-bottom:1px solid var(--border-subtle);}
.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;}
.logo-header{display:block;height:38px;width:150px;background:url('assets/logo-header.png') no-repeat left center/contain;filter:drop-shadow(0 0 14px rgba(30,144,255,.5));}
.nav{display:flex;gap:26px;align-items:center;}
.nav a{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-muted);}
.nav a:hover{color:var(--cyan-400);}
.header-cta{display:flex;gap:12px;align-items:center;}
.phone-link{font-family:var(--font-mono);font-size:13px;color:var(--text-faint);}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-subtle);}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,20,0) 0%,rgba(7,11,20,.12) 55%,rgba(5,7,13,.62) 100%);}
.hero-inner{position:relative;padding:104px 32px 92px;text-align:center;}
.hero h1{font-size:clamp(38px,5.6vw,68px);line-height:1.04;margin:0 auto;max-width:1000px;}
.hero h1 .hl{color:var(--cyan-400);text-shadow:var(--glow-text);}
.hero-sub{font-size:18px;color:var(--text-muted);max-width:680px;margin:22px auto 0;line-height:1.6;}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap;}
.hero-tags{display:flex;gap:9px;justify-content:center;margin-top:40px;flex-wrap:wrap;}
.hero-area{margin-top:30px;font-family:var(--font-mono);font-size:13px;color:var(--text-faint);display:inline-flex;align-items:center;gap:8px;}

/* ---- Rate strip ---- */
.rate-strip{background:radial-gradient(70% 130% at 50% 0%,rgba(30,144,255,.14),transparent 60%);border-bottom:1px solid var(--border-subtle);}
.rate-inner{padding:34px 32px;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;}
.rate-num{font-family:var(--font-display);font-weight:700;font-size:40px;color:var(--text-strong);text-shadow:var(--glow-text);}
.rate-num span{font-size:20px;color:var(--text-muted);}
.rate-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-hot);}
.rate-rule{width:1px;height:34px;background:var(--border-default);}
.rate-note{color:var(--text-muted);font-size:14px;max-width:460px;}

/* ---- Grids ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.svc-card{display:flex;flex-direction:column;gap:14px;height:100%;}
.svc-card h3{font-size:20px;margin:0;}
.svc-card p{font-size:14px;color:var(--text-muted);margin:0;line-height:1.6;}
.adv-card h3{font-size:21px;margin:0;}
.adv-card p{font-size:14px;color:var(--text-muted);margin:0;line-height:1.6;}

/* ---- Pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.price-card{display:flex;flex-direction:column;height:100%;}
.price-card.featured{border-color:var(--cyan-500);box-shadow:var(--glow-blue-md),var(--edge-top);}
.price-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);}
.price-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);}
.price-card h3{font-size:22px;margin:8px 0 6px;}
.price-amt{display:flex;align-items:baseline;gap:4px;margin-bottom:16px;}
.price-amt .num{font-family:var(--font-display);font-weight:700;font-size:44px;color:var(--text-strong);}
.price-amt .unit{color:var(--text-muted);font-size:16px;}
.price-feats{display:flex;flex-direction:column;gap:10px;flex:1;margin-bottom:22px;}
.price-feat{display:flex;align-items:flex-start;gap:9px;}
.price-feat span{font-size:13.5px;color:var(--text-body);line-height:1.4;}
.price-feat .ic{margin-top:2px;color:var(--success-500);}
.custom-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:20px;}
.custom-card h3{font-size:19px;margin:0 0 4px;}
.custom-card p{color:var(--text-muted);font-size:14px;margin:0;max-width:620px;}

/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.step{text-align:center;}
.step-ring{position:relative;display:inline-flex;margin-bottom:18px;}
.step-ring .circle{display:inline-flex;width:64px;height:64px;border-radius:50%;align-items:center;justify-content:center;background:var(--ink-900);border:1px solid var(--cyan-500);box-shadow:var(--glow-blue-md);color:var(--cyan-400);}
.step-ring .num{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--grad-blue);color:var(--text-on-blue);font-family:var(--font-display);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-blue-sm);}
.step h3{font-size:20px;margin:0 0 8px;}
.step p{color:var(--text-muted);font-size:14.5px;line-height:1.6;max-width:300px;margin:0 auto;}

/* ---- Testimonials ---- */
.review{display:flex;flex-direction:column;gap:14px;}
.review .stars{display:flex;gap:3px;color:var(--warning-500);}
.review .quote{font-size:15.5px;color:var(--text-body);line-height:1.6;margin:0;flex:1;}
.review .who{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text-strong);}
.review .role{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:2px;}

/* ---- FAQ ---- */
.faq{max-width:820px;}
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{overflow:hidden;}
.faq-item.open{border-color:var(--border-glow);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--text-strong);}
.faq-q .chev{flex:none;color:var(--text-muted);transition:transform var(--dur-base) var(--ease-out),color var(--dur-base);}
.faq-item.open .faq-q .chev{transform:rotate(180deg);color:var(--cyan-400);}
.faq-a{padding:0 22px 20px;color:var(--text-muted);font-size:14.5px;line-height:1.65;display:none;}
.faq-item.open .faq-a{display:block;}

/* ---- Remote + contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.contact-card{display:flex;flex-direction:column;gap:12px;}
.contact-card h3{font-size:24px;margin:6px 0 0;}
.contact-card p{color:var(--text-muted);font-size:14.5px;line-height:1.6;margin:0;}
.contact-card--start{background:radial-gradient(90% 120% at 100% 0%,rgba(30,144,255,.12),transparent 60%),var(--surface-1);}
.contact-actions{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--border-subtle);background:rgba(4,6,12,.55);}
.footer-grid{padding:60px 32px 36px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;}
.logo-foot{display:block;height:30px;width:158px;background:url('assets/logo-wordmark.png') no-repeat left center/contain;filter:drop-shadow(0 0 12px rgba(30,144,255,.5));}
.footer-blurb{color:var(--text-faint);font-size:13px;margin-top:16px;max-width:320px;line-height:1.6;}
.fb-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;height:34px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--border-default);color:var(--text-muted);font-family:var(--font-body);font-size:13px;font-weight:500;}
.fb-link .ic{color:var(--blue-300);}
.footer-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px;}
.footer-col-list{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.footer-col-list a{color:var(--text-muted);}
.footer-area{color:var(--text-muted);font-size:14px;line-height:1.6;margin:0;}
.footer-bottom{padding:20px 32px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);flex-wrap:wrap;gap:8px;}

/* ---- Responsive ---- */
@media (max-width:980px){
  .grid-3,.price-grid,.steps{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .container,.section{padding-left:20px;padding-right:20px;}
  .nav{display:none;}
  .phone-link{display:none;}
  .grid-3,.grid-2,.price-grid,.steps,.contact-grid,.footer-grid{grid-template-columns:1fr;}
  .sec-head h2{font-size:30px;}
  .hero-inner{padding:72px 20px 64px;}
  .rate-rule{display:none;}
}