
.service-page { background: var(--bg-primary); color: var(--text-primary); }
.service-header { background: rgba(7,7,10,.96); border-bottom: 1px solid var(--border-subtle); position: fixed; inset: 0 0 auto; z-index: var(--z-header); }
.service-header__inner { align-items:center; display:flex; justify-content:space-between; gap:1rem; margin-inline:auto; min-height:76px; width:min(calc(100% - (var(--page-gutter)*2)),var(--container-max)); }
.service-header__logo img { width:clamp(165px,18vw,220px); }
.service-header__nav { align-items:center; display:flex; gap:1rem; }
.service-header__nav a { color:var(--text-secondary); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.service-header__nav a:hover { color:var(--text-primary); }
.service-page main { padding-top:0; }
.service-hero { background:radial-gradient(circle at 84% 18%, rgba(65,71,251,.22), transparent 28%),radial-gradient(circle at 72% 60%, rgba(255,0,106,.12), transparent 30%),var(--bg-primary); padding:var(--space-7) 0 var(--space-8); }
.service-hero__grid { align-items:end; display:grid; gap:clamp(2rem,6vw,6rem); grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); }
.service-hero h1 { font-family:var(--font-display); font-size:clamp(4rem,8vw,7.5rem); font-weight:700; line-height:.93; margin:.6rem 0 1.25rem; max-width:10ch; text-transform:uppercase; }
.service-hero__lead { color:#d8dbe2; font-size:clamp(1.08rem,1.7vw,1.35rem); max-width:720px; }
.service-hero__side { border-left:1px solid var(--border-strong); padding-left:clamp(1.25rem,3vw,2.5rem); }
.service-hero__side strong { display:block; font-family:var(--font-display); font-size:1.55rem; line-height:1.05; margin-bottom:.7rem; }
.service-hero__side p { color:var(--text-secondary); margin:0; }
.service-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.service-section { padding-block:var(--section-standard); }
.service-section--light { background:var(--bg-secondary); color:var(--text-inverse); }
.service-section--dark { background:var(--bg-primary); color:var(--text-primary); }
.service-section__head { display:grid; gap:1rem; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); margin-bottom:2.5rem; }
.service-section h2 { font-family:var(--font-display); font-size:clamp(2.8rem,5vw,4.8rem); font-weight:700; line-height:.95; margin:.3rem 0 0; text-transform:uppercase; }
.service-section__intro { font-size:clamp(1rem,1.35vw,1.18rem); max-width:680px; }
.service-section--light .service-section__intro { color:var(--text-muted); }
.service-section--dark .service-section__intro { color:var(--text-secondary); }
.service-grid { display:grid; gap:1px; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--border-strong-light); border:1px solid var(--border-strong-light); }
.service-grid article { background:var(--surface-light); padding:clamp(1.5rem,3vw,2.25rem); }
.service-grid article span { color:var(--accent-pink-text); font-size:.72rem; font-weight:800; letter-spacing:.12em; }
.service-grid h3 { font-size:1.15rem; margin:.8rem 0 .55rem; }
.service-grid p { color:var(--text-muted); margin:0; }
.service-section--dark .service-grid { background:var(--border-strong); border-color:var(--border-strong); }
.service-section--dark .service-grid article { background:var(--surface-dark); }
.service-section--dark .service-grid p { color:var(--text-secondary); }
.service-list { display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.service-list article { border:1px solid currentColor; border-color:var(--border-strong-light); padding:1.5rem; }
.service-section--dark .service-list article { border-color:var(--border-strong); }
.service-list h3 { margin:0 0 .5rem; }
.service-list p { margin:0; color:var(--text-muted); }
.service-section--dark .service-list p { color:var(--text-secondary); }
.service-faq details { border-top:1px solid var(--border-strong-light); padding:1rem 0; }
.service-faq details:last-child { border-bottom:1px solid var(--border-strong-light); }
.service-faq summary { cursor:pointer; font-weight:800; list-style:none; }
.service-faq summary::-webkit-details-marker { display:none; }
.service-faq summary::after { content:'+'; float:right; color:var(--accent-pink-text); }
.service-faq details[open] summary::after { content:'−'; }
.service-faq p { color:var(--text-muted); max-width:760px; }
.service-cta { background:var(--gradient-brand); color:#fff; padding-block:clamp(4rem,7vw,6.5rem); text-align:center; }
.service-cta h2 { color:#fff; font-family:var(--font-display); font-size:clamp(3rem,6vw,5.5rem); font-weight:700; line-height:.94; margin:.45rem auto 1rem; max-width:12ch; text-transform:uppercase; }
.service-cta p { margin-inline:auto; max-width:650px; }
.service-footer { background:#050507; border-top:1px solid var(--border-subtle); padding:2.25rem 0; }
.service-footer__inner { align-items:center; display:flex; justify-content:space-between; gap:1.25rem; margin-inline:auto; width:min(calc(100% - (var(--page-gutter)*2)),var(--container-max)); }
.service-footer__inner p { color:var(--text-secondary); font-size:.78rem; margin:0; }
.service-footer__links { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.service-footer__links a { color:var(--text-secondary); font-size:.78rem; text-decoration:none; }
.service-footer__links a:hover { color:#fff; }
@media (max-width: 820px) {
 .service-hero { padding:var(--space-6) 0 var(--space-7); }
 .service-header__nav a:not(.button-primary) { display:none; }
 .service-hero__grid,.service-section__head { grid-template-columns:1fr; }
 .service-hero__side { border-left:0; border-top:1px solid var(--border-strong); padding:1.25rem 0 0; }
 .service-grid { grid-template-columns:1fr; }
 .service-list { grid-template-columns:1fr; }
 .service-footer__inner { align-items:flex-start; flex-direction:column; }
}

/* v31: visual-first service page refinement */
.service-hero__grid { align-items:center; }
.service-hero h1 { max-width: 11ch; }
.service-hero__lead { max-width: 610px; }
.service-actions { margin-top: var(--space-5); }
.service-jump { min-width: 0; }
.service-hero__visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 0%, rgba(48, 136, 255, .18), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(255, 0, 106, .14), transparent 38%),
    var(--surface-dark);
  padding: var(--space-5);
  min-height: 360px;
}
.service-hero__visual::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  bottom: -110px;
  border: 1px solid rgba(93, 71, 255, .35);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(52, 94, 255, .14);
}
.service-visual__top,
.service-visual__result { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.service-visual__label,
.service-visual__result span {
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.service-visual__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-pink);
  box-shadow: 0 0 20px rgba(255, 0, 106, .55);
}
.service-visual__flow { display:grid; gap:var(--space-3); margin-block:var(--space-6); }
.service-visual__node {
  display:grid;
  grid-template-columns: 34px 1fr;
  align-items:center;
  gap:var(--space-3);
  padding: var(--space-3) var(--space-4);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.025);
}
.service-visual__node span { color:var(--accent-pink-text); font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.service-visual__node strong { font-size:1rem; }
.service-visual__result {
  position: relative;
  z-index: 1;
  border-top:1px solid var(--border-strong);
  padding-top:var(--space-4);
}
.service-visual__result strong { font-family:var(--font-display); font-size:1.35rem; line-height:1; text-transform:uppercase; }

.service-section__head { align-items:end; margin-bottom:var(--space-6); }
.service-section__intro { max-width: 520px; }
.service-grid { gap:var(--space-3); background:transparent; border:0; }
.service-grid article {
  position:relative;
  border:1px solid var(--border-strong-light);
  border-radius:var(--radius-md);
  padding:var(--space-5);
}
.service-grid article::before {
  content:'';
  display:block;
  width:36px;
  height:3px;
  margin-bottom:var(--space-4);
  background:var(--gradient-brand);
  border-radius:999px;
}
.service-section--dark .service-grid { background:transparent; border:0; }
.service-section--dark .service-grid article { border-color:var(--border-strong); }
.service-list { gap:var(--space-3); grid-template-columns:repeat(3,minmax(0,1fr)); }
.service-list article {
  position:relative;
  border-radius:var(--radius-md);
  padding:var(--space-5);
}
.service-list article::before {
  content:'✓';
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:var(--space-4);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--accent-pink),#6d4cff,#128dff);
  font-weight:800;
}
.service-faq { max-width:860px; }
.service-faq details { padding:var(--space-4) 0; }

@media (max-width: 820px) {
  .service-hero__visual { min-height: 0; padding:var(--space-4); }
  .service-visual__flow { margin-block:var(--space-5); }
  .service-list { grid-template-columns:1fr; }
}

/* v32: cleaner, visual-first service structure */
.service-hero { padding: var(--space-6) 0 var(--space-7); }
.service-hero__grid {
  align-items: stretch;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
}
.service-hero__grid > div:first-child {
  align-self: center;
  max-width: 720px;
}
.service-hero h1 {
  font-size: clamp(3.8rem, 6.6vw, 6.4rem);
  max-width: 11ch;
}
.service-hero__lead { max-width: 560px; }
.service-hero__visual { min-height: 0; }
.service-visual__flow { margin-block: var(--space-5); }
.service-visual__node { min-height: 58px; }

.service-snapshot {
  background: #0b0b0f;
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--space-5);
}
.service-snapshot__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-snapshot article {
  min-width: 0;
  padding: var(--space-2) var(--space-6);
  border-left: 1px solid var(--border-strong);
}
.service-snapshot article:first-child { border-left: 0; padding-left: 0; }
.service-snapshot article:last-child { padding-right: 0; }
.service-snapshot span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--accent-pink);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.service-snapshot strong {
  display: block;
  color: #fff;
  font-size: clamp(.94rem, 1.2vw, 1.06rem);
  line-height: 1.35;
}

.service-section { padding-block: var(--section-compact); }
.service-section__head {
  display: block;
  margin-bottom: var(--space-6);
  max-width: 760px;
}
.service-section h2 { max-width: 12ch; }
.service-section__intro {
  margin-top: var(--space-4);
  max-width: 590px;
}

/* Four deliverables should read as an intentional 2x2 system, not a 3+1 grid. */
.service-section--included .service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.service-section--included .service-grid article {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-section--included .service-grid p { max-width: 42ch; }

/* Fit signals are short decision cards: keep them compact. */
.service-section--fit .service-list { gap: var(--space-4); }
.service-section--fit .service-list article { min-height: 180px; }
.service-section--fit .service-list h3 { font-size: 1.08rem; line-height: 1.25; }

/* FAQ gets a calmer 2-column composition without adding more copy. */
.service-section--faq .section-inner {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: var(--space-8);
  align-items: start;
}
.service-section--faq .service-section__head {
  margin-bottom: 0;
  position: sticky;
  top: calc(76px + var(--space-5));
}
.service-section--faq .service-faq { max-width: none; }
.service-section--faq .service-section__intro { max-width: 34ch; }

.service-cta { padding-block: var(--section-compact); }
.service-cta p { max-width: 560px; }
.service-cta .button--light {
  background: #fff;
  border-color: #fff;
  color: var(--text-inverse);
}
.service-cta .button--light:hover,
.service-cta .button--light:focus-visible { color: var(--text-inverse); }

@media (max-width: 900px) {
  .service-hero__grid { gap: var(--space-6); grid-template-columns: 1fr 1fr; }
  .service-snapshot article { padding-inline: var(--space-4); }
}
@media (max-width: 820px) {
  .service-hero { padding: var(--space-5) 0 var(--space-6); }
  .service-hero__grid { grid-template-columns: 1fr; }
  .service-hero h1 { font-size: clamp(3.2rem, 14vw, 5rem); }
  .service-snapshot { padding-block: var(--space-4); }
  .service-snapshot__grid { grid-template-columns: 1fr; }
  .service-snapshot article,
  .service-snapshot article:first-child,
  .service-snapshot article:last-child {
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    padding: var(--space-4) 0;
  }
  .service-snapshot article:first-child { border-top: 0; }
  .service-section--included .service-grid { grid-template-columns: 1fr; }
  .service-section--included .service-grid article { min-height: 0; }
  .service-section--fit .service-list article { min-height: 0; }
  .service-section--faq .section-inner { display: block; }
  .service-section--faq .service-section__head { position: static; margin-bottom: var(--space-5); }
}
