:root {
  color-scheme: dark;
  --service-bg: #070707;
  --service-panel: #111318;
  --service-panel-2: #171a20;
  --service-text: #f7f8fb;
  --service-muted: #b5bac5;
  --service-soft: #d9e8f6;
  --service-line: #2a2e36;
  --service-red: #b91612;
  --service-red-bright: #ff5148;
  --service-cyan: #33d6e6;
  --service-green: #21c77c;
  --service-radius: 8px;
}

body.service-page,
body.service-page * {
  box-sizing: border-box;
  letter-spacing: 0;
}

body.service-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--service-bg);
  color: var(--service-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

body.service-page a {
  color: inherit;
  text-decoration: none;
}

body.service-page a:focus-visible,
body.service-page button:focus-visible,
body.service-page input:focus-visible,
body.service-page textarea:focus-visible {
  outline: 2px solid var(--service-red-bright);
  outline-offset: 3px;
}

.service-page .skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  border: 2px solid #fff;
  border-radius: var(--service-radius);
  background: var(--service-red);
  color: #fff;
  font-weight: 900;
}

.service-page .skip-link:focus { transform: translateY(0); }

.service-page .wrap,
.service-page .container {
  width: min(1180px, calc(100% - 36px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.service-page .top,
.service-page .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--service-line);
  background: rgba(7, 7, 7, .92);
  backdrop-filter: blur(14px);
}

.service-page .top .wrap,
.service-page .topbar-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.service-page .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  text-transform: none;
}

.service-page .brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.service-page .service-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  color: var(--service-muted);
  scrollbar-width: none;
}

.service-page .service-nav::-webkit-scrollbar { display: none; }

.service-page .service-nav a,
.service-page .nav,
.service-page .nav-link {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--service-line);
  border-radius: var(--service-radius);
  color: var(--service-muted);
  font-size: 14px;
  font-weight: 750;
  text-transform: none;
  white-space: nowrap;
}

.service-page .service-nav a:hover,
.service-page .nav:hover,
.service-page .nav-link:hover { color: #fff; }

.service-page .hero {
  position: relative;
  min-height: 610px;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 48px 0;
  border-bottom: 1px solid var(--service-line);
  background: #0b0c0f;
}

.service-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, .97) 0%, rgba(7, 7, 7, .84) 48%, rgba(7, 7, 7, .35) 100%),
    var(--service-hero) center / cover no-repeat;
}

.service-page.diagnostic-page { --service-hero: url("assets/service-astra/diagnostic-pc-gaming.webp?v=35083aef51fb3672"); }
.service-page.montage-page { --service-hero: url("assets/service-astra/hero-pc.webp?v=04ef4dc7e46a3ec7"); }
.service-page.optimisation-page { --service-hero: url("assets/service-astra/optimisation-performance.webp?v=b99e14c67c70ea50"); }
.service-page.remote-page { --service-hero: url("assets/service-astra/assistance-distance.webp?v=0c5b2e5a295adace"); }
.service-page.maintenance-page { --service-hero: url("assets/service-astra/atelier-detail.webp?v=ac90746d5b86e2c7"); }
.service-page.blog-page { --service-hero: url("assets/service-astra/hero-pc.webp?v=04ef4dc7e46a3ec7"); }

.service-page .hero-grid {
  position: relative;
  z-index: 1;
  display: block;
}

.service-page .hero-copy {
  max-width: 720px;
}

.service-page .eyebrow,
.service-page .label {
  display: block;
  width: fit-content;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--service-red-bright);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.service-page .label { color: var(--service-cyan); }

.service-page h1,
.service-page h2,
.service-page h3,
.service-page p { margin-top: 0; }

.service-page h1 {
  max-width: 14ch;
  margin-bottom: 16px;
  font-size: 54px;
  line-height: .98;
  text-transform: none;
}

.service-page h1 span,
.service-page h2 span { color: inherit; }

.service-page h2,
.service-page .section-title {
  max-width: 20ch;
  margin: 0 0 12px;
  font-size: 36px;
  line-height: 1.05;
  text-transform: none;
}

.service-page h3 { line-height: 1.2; }

.service-page .lead {
  max-width: 62ch;
  color: var(--service-soft);
  font-size: 18px;
}

.service-page .sub,
.service-page .section-sub,
.service-page .proof-card p,
.service-page .step p,
.service-page .row span {
  color: var(--service-muted);
}

.service-page .btns,
.service-page .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.service-page .btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--service-line);
  border-radius: var(--service-radius);
  background: #13151a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
}

.service-page .btn-primary,
.service-page .btn-red,
.service-page .btn-wa {
  border-color: transparent;
  background: var(--service-red);
  color: #fff;
}

.service-page .btn-ghost { background: rgba(255, 255, 255, .035); }
.service-page .btn:hover { border-color: #737984; }
.service-page .btn-primary:hover,
.service-page .btn-red:hover,
.service-page .btn-wa:hover { background: #95110e; }

.service-page .micro-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--service-muted);
  font-size: 13px;
}

.service-page .micro-proof li::before {
  content: "\2713";
  margin-right: 7px;
  color: var(--service-green);
  font-weight: 950;
}

.service-page .section {
  padding: 62px 0;
  border-top: 1px solid var(--service-line);
}

.service-page .section-head {
  max-width: 820px;
  margin-bottom: 26px;
}

.service-page .grid3,
.service-page .proof-grid,
.service-page .process,
.service-page .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-page .process,
.service-page .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.service-page .panel,
.service-page .card,
.service-page .proof-card,
.service-page .step,
.service-page .form-card,
.service-page .safety-card {
  padding: 22px;
  border: 1px solid var(--service-line);
  border-radius: var(--service-radius);
  background: var(--service-panel);
}

.service-page .card,
.service-page .proof-card,
.service-page .step {
  min-height: 100%;
}

.service-page .card h3,
.service-page .proof-card strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 20px;
}

.service-page .price {
  margin: 8px 0 14px;
  color: #fff;
  font-size: 38px;
  font-weight: 950;
  line-height: 1;
}

.service-page .price span {
  margin-left: 4px;
  color: var(--service-muted);
  font-size: 13px;
  text-transform: uppercase;
}

.service-page .check {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.service-page .check li {
  display: flex;
  gap: 9px;
  color: var(--service-muted);
  font-size: 14px;
}

.service-page .check li::before {
  content: "\2713";
  color: var(--service-green);
  font-weight: 950;
}

.service-page .num,
.service-page .step-number {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: var(--service-radius);
  background: var(--service-red);
  color: #fff;
  font-weight: 950;
}

.service-page .table {
  display: grid;
  gap: 8px;
}

.service-page .row {
  display: grid;
  grid-template-columns: 210px 1fr;
  border: 1px solid var(--service-line);
  border-radius: var(--service-radius);
  background: var(--service-panel);
  overflow: hidden;
}

.service-page .row strong,
.service-page .row span { padding: 14px 16px; }
.service-page .row strong { color: #fff; }

.service-page .note {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid #24505a;
  border-left: 3px solid var(--service-cyan);
  border-radius: var(--service-radius);
  background: #0d1b20;
  color: var(--service-soft);
}

.service-page .split,
.service-page .send-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.service-page .field { margin-bottom: 14px; }

.service-page .field label {
  display: block;
  margin-bottom: 6px;
  color: var(--service-muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
}

.service-page .input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--service-line);
  border-radius: var(--service-radius);
  background: #090a0d;
  color: #fff;
  font: inherit;
}

.service-page textarea.input {
  min-height: 100px;
  resize: vertical;
}

.service-page .safety-list { display: grid; gap: 10px; }
.service-page .safety-item { display: flex; gap: 10px; color: var(--service-muted); }
.service-page .safety-item::before { content: "\2713"; color: var(--service-green); font-weight: 950; }
.service-page .small-note { margin-top: 12px; color: #8e949f; font-size: 12px; }

.service-page .footer,
.service-page .source {
  padding: 30px 0;
  border-top: 1px solid var(--service-line);
  color: #8e949f;
  font-size: 13px;
}

.service-page.blog-page > header,
.service-page.blog-page > main,
.service-page.blog-page > footer {
  width: 100%;
  margin: 0;
}

.service-page.blog-page .top { padding: 0; }
.service-page.blog-page .service-nav { margin: 0; }
.service-page.blog-page .hero h1 { max-width: 16ch; }

.blog-page .featured-guide {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 28px;
}

.blog-page .featured-guide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--service-line);
  border-radius: var(--service-radius);
}

.blog-page .featured-guide h2 { max-width: 22ch; }

.blog-page .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
}

.blog-page .grid article {
  min-height: 235px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--service-line);
  border-radius: var(--service-radius);
  background: var(--service-panel);
}

.blog-page .grid article:hover { border-color: #737984; }

.blog-page .grid h2 {
  max-width: none;
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1.2;
}

.blog-page .summary {
  color: var(--service-muted);
  font-size: 14px;
}

.blog-page .read {
  width: fit-content;
  margin-top: 20px;
  color: var(--service-cyan);
  font-weight: 850;
}

.blog-page .read:hover { color: #fff; }

.blog-page .cta {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.blog-page .cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--service-line);
  border-left: 3px solid var(--service-red-bright);
  border-radius: var(--service-radius);
  background: var(--service-panel);
}

.blog-page .cta-band p {
  max-width: 65ch;
  margin: 0;
  color: var(--service-soft);
}

@media (max-width: 860px) {
  .service-page .hero { min-height: 0; }
  .service-page .grid3,
  .service-page .proof-grid,
  .service-page .process,
  .service-page .steps,
  .service-page .split,
  .service-page .send-panel { grid-template-columns: 1fr; }
  .service-page .row { grid-template-columns: 1fr; }
  .service-page .process,
  .service-page .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-page .featured-guide { grid-template-columns: 1fr; }
  .blog-page .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .service-page .wrap,
  .service-page .container { width: min(100% - 28px, 1180px); }
  .service-page .top .wrap,
  .service-page .topbar-inner { min-height: 62px; }
  .service-page .brand span { display: none; }
  .service-page .service-nav a:nth-child(-n+2) { display: none; }
  .service-page .hero { padding: 34px 0; }
  .service-page .hero::before {
    background:
      linear-gradient(180deg, rgba(7, 7, 7, .75) 0%, rgba(7, 7, 7, .94) 72%, #070707 100%),
      var(--service-hero) center top / cover no-repeat;
  }
  .service-page h1 { font-size: 39px; }
  .service-page h2,
  .service-page .section-title { font-size: 30px; }
  .service-page .section { padding: 46px 0; }
  .service-page .process,
  .service-page .steps { grid-template-columns: 1fr; }
  .service-page .btns,
  .service-page .btn-row { display: grid; }
  .service-page .btn { width: 100%; }
  .service-page .micro-proof { display: grid; }
  .blog-page .grid { grid-template-columns: 1fr; }
  .blog-page .grid article { min-height: 0; }
  .blog-page .cta-band { display: grid; padding: 22px; }
}

@media (max-width: 350px) {
  .service-page h1 { font-size: 34px; }
  .service-page h2,
  .service-page .section-title { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-page * { scroll-behavior: auto !important; transition: none !important; }
}