/* v4.1 — unified visual system for all service pages. */
.service-detail-v41 {
  --svc-accent: #35c5ff;
  --svc-accent-2: #665cff;
  --svc-soft: #eef8ff;
  --svc-ink: #081629;
}
.service-detail-v41.svc-websites { --svc-accent:#36c9ff; --svc-accent-2:#4e6cff; --svc-soft:#eef8ff; }
.service-detail-v41.svc-eshop { --svc-accent:#8b5cff; --svc-accent-2:#e453ff; --svc-soft:#f6f0ff; }
.service-detail-v41.svc-seo { --svc-accent:#36d399; --svc-accent-2:#19a7a7; --svc-soft:#ecfbf5; }
.service-detail-v41.svc-design { --svc-accent:#ff8a3d; --svc-accent-2:#f43f8f; --svc-soft:#fff4ed; }
.service-detail-v41.svc-dev { --svc-accent:#5aa8ff; --svc-accent-2:#6f55e8; --svc-soft:#f0f4ff; }
.service-detail-v41.svc-hosting { --svc-accent:#39d3db; --svc-accent-2:#1e7ee8; --svc-soft:#ebfbfd; }
.service-detail-v41.svc-marketing { --svc-accent:#ff5b98; --svc-accent-2:#8057ff; --svc-soft:#fff0f6; }
.service-detail-v41.svc-ai { --svc-accent:#9e75ff; --svc-accent-2:#32d6ff; --svc-soft:#f4f0ff; }
.service-detail-v41.svc-erp { --svc-accent:#3cd1b2; --svc-accent-2:#3187ff; --svc-soft:#eefbf8; }

.service-detail-v41 .service-showcase {
  position: relative;
  overflow: hidden;
  padding: 44px 0 64px;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--svc-accent) 32%, transparent) 0, transparent 30%),
    radial-gradient(circle at 68% 90%, color-mix(in srgb, var(--svc-accent-2) 24%, transparent) 0, transparent 30%),
    linear-gradient(135deg,#071323 0%,#10243f 58%,#0d1c32 100%);
  color: #fff;
}
.service-detail-v41 .service-showcase::before,
.service-detail-v41 .service-showcase::after {
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  pointer-events:none;
}
.service-detail-v41 .service-showcase::before { width:420px;height:420px;right:-170px;top:-210px; }
.service-detail-v41 .service-showcase::after { width:240px;height:240px;left:-100px;bottom:-150px; }
.service-detail-v41 .service-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:72px;
  align-items:center;
}
.service-detail-v41 .service-hero-copy { min-width:0; }
.service-detail-v41 .service-showcase .breadcrumbs,
.service-detail-v41 .service-showcase .breadcrumbs a { color:rgba(255,255,255,.62); }
.service-detail-v41 .service-showcase .eyebrow { color:var(--svc-accent); }
.service-detail-v41 .service-showcase h1 {
  max-width:760px;
  color:#fff;
  font-size:clamp(2.65rem,5vw,5.1rem);
  line-height:.98;
  letter-spacing:-.045em;
}
.service-detail-v41 .service-showcase p {
  max-width:690px;
  color:rgba(232,241,252,.78);
  font-size:1.1rem;
  line-height:1.75;
}
.service-detail-v41 .service-showcase .btn.alt {
  background:linear-gradient(135deg,var(--svc-accent),var(--svc-accent-2));
  border-color:transparent;
  color:#071323;
  box-shadow:0 16px 36px color-mix(in srgb, var(--svc-accent) 20%, transparent);
}
.service-detail-v41 .service-showcase .actions .btn:not(.alt) {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.service-visual {
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  padding:16px;
  background:rgba(255,255,255,.07);
  box-shadow:0 36px 80px rgba(0,0,0,.26);
  backdrop-filter:blur(18px);
}
.service-visual::before {
  content:"";
  position:absolute;
  width:110px;height:110px;
  right:-22px;bottom:-28px;
  border-radius:28px;
  background:linear-gradient(135deg,var(--svc-accent),var(--svc-accent-2));
  opacity:.28;
  filter:blur(2px);
  transform:rotate(16deg);
}
.service-visual-top {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:6px 8px 16px;
  color:rgba(255,255,255,.58);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-visual-window {
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  color:#0c1c31;
  box-shadow:0 22px 55px rgba(0,0,0,.2);
}
.service-visual-bar { display:flex;gap:7px;padding:14px 16px;border-bottom:1px solid #e5edf6;background:#f8fbfe; }
.service-visual-bar i { width:8px;height:8px;border-radius:50%;background:#c9d4df; }
.service-visual-bar i:first-child { background:var(--svc-accent); }
.service-visual-body { padding:34px 30px 32px; }
.service-visual-tag {
  display:inline-flex;
  margin-bottom:18px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--svc-soft);
  color:#17304b;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.09em;
}
.service-visual-body h2 { margin:0 0 14px;font-size:clamp(1.55rem,2.4vw,2.35rem);line-height:1.08;letter-spacing:-.035em; }
.service-visual-body p { margin:0!important;color:#64778b!important;font-size:.9rem!important;line-height:1.6!important; }
.service-visual-chips { display:flex;flex-wrap:wrap;gap:8px;margin-top:26px; }
.service-visual-chips span { padding:8px 10px;border:1px solid #dae4ee;border-radius:10px;background:#fbfdff;font-size:.72rem;font-weight:750; }

.service-value-band { background:linear-gradient(90deg,var(--svc-accent),var(--svc-accent-2));color:#071323; }
.service-value-band .wrap { display:grid;grid-template-columns:repeat(4,1fr); }
.service-value-band span { display:flex;align-items:center;gap:12px;min-height:82px;padding:15px 22px;border-right:1px solid rgba(7,19,35,.16); }
.service-value-band span:first-child { border-left:1px solid rgba(7,19,35,.16); }
.service-value-band strong { font-size:.7rem;letter-spacing:.1em;opacity:.6; }
.service-value-band b { font-size:.9rem; }

.service-detail-v41 .service-subnav {
  position:sticky;
  top:82px;
  z-index:22;
  border:0;
  border-bottom:1px solid #e2e9f1;
  box-shadow:0 10px 24px rgba(9,27,48,.05);
}
.service-detail-v41 .service-subnav .wrap { justify-content:center; }
.service-detail-v41 .service-subnav a { position:relative; }
.service-detail-v41 .service-subnav a::after { content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--svc-accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease; }
.service-detail-v41 .service-subnav a:hover::after { transform:scaleX(1); }

.service-detail-v41 .service-needs-v41 { background:#fff; }
.service-detail-v41 .service-needs-v41 .about-grid { align-items:start; }
.service-detail-v41 .service-needs-v41 h2,
.service-detail-v41 .service-scope-v41 h2,
.service-detail-v41 .service-process-v41 h2,
.service-detail-v41 .service-faq-v41 h2,
.service-detail-v41 .service-related-v41 h2 { letter-spacing:-.035em; }
.service-detail-v41 .needs-list { display:grid;gap:12px; }
.service-detail-v41 .needs-list li {
  position:relative;
  border:1px solid #dfe7ef;
  border-radius:18px;
  padding:20px 20px 20px 54px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 10px 30px rgba(18,45,73,.04);
  font-size:1rem;
}
.service-detail-v41 .needs-list li:first-child { padding-top:20px; }
.service-detail-v41 .needs-list li::before {
  content:"✓";
  position:absolute;left:18px;top:18px;
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:8px;
  background:var(--svc-soft);color:#102843;font-weight:900;
}

.service-detail-v41 .service-scope-v41 { background:var(--svc-soft); }
.service-detail-v41 .service-scope-v41 .section-heading { align-items:end; }
.service-detail-v41 .scope-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:18px; }
.service-detail-v41 .scope-grid .card {
  min-height:270px;
  border:1px solid color-mix(in srgb, var(--svc-accent) 20%, #dce6ef);
  border-radius:22px;
  padding:28px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 18px 45px rgba(20,49,78,.06);
}
.service-detail-v41 .scope-grid .card:nth-child(2n) { transform:translateY(18px); }
.service-detail-v41 .scope-grid .service-number {
  display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(135deg,var(--svc-accent),var(--svc-accent-2));
  color:#061626;font-size:.74rem;font-weight:900;
}
.service-detail-v41 .scope-grid .card h3 { margin-top:16px;font-size:1.1rem; }
.service-detail-v41 .scope-grid .card p { font-size:.9rem;line-height:1.68; }

.service-detail-v41 .service-process-v41 {
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0b1c31 0%,#102a48 100%);
  color:#fff;
}
.service-detail-v41 .service-process-v41::after {
  content:"";position:absolute;right:-120px;top:-150px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,var(--svc-accent) 0,transparent 68%);opacity:.18;
}
.service-detail-v41 .service-process-v41 .eyebrow { color:var(--svc-accent); }
.service-detail-v41 .service-process-v41 h2 { color:#fff; }
.service-detail-v41 .service-process-v41 .steps { position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px; }
.service-detail-v41 .service-process-v41 .step {
  min-height:225px;padding:25px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.055);backdrop-filter:blur(8px);
}
.service-detail-v41 .service-process-v41 .num { color:var(--svc-accent);font-size:.75rem;font-weight:900;letter-spacing:.1em; }
.service-detail-v41 .service-process-v41 .step h3 { color:#fff;margin-top:30px; }
.service-detail-v41 .service-process-v41 .step p { color:rgba(229,240,250,.7); }

.service-detail-v41 .service-faq-v41 { background:#fff; }
.service-detail-v41 .service-faq-v41 .faq-list details {
  margin:0;padding:0;border:0;border-top:1px solid #dfe7ef;
}
.service-detail-v41 .service-faq-v41 .faq-list details:last-child { border-bottom:1px solid #dfe7ef; }
.service-detail-v41 .service-faq-v41 .faq-list summary { padding:22px 0; }
.service-detail-v41 .service-faq-v41 .faq-list details p { margin:0;padding:0 46px 24px 0; }
.service-detail-v41 .service-faq-v41 .faq-list summary span { color:var(--svc-accent-2); }

.service-detail-v41 .service-related-v41 { background:#f6f8fb; }
.service-detail-v41 .related-services { grid-template-columns:repeat(3,1fr);gap:16px; }
.service-detail-v41 .related-service {
  min-height:110px;border:0;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(18,45,73,.06);
}
.service-detail-v41 .related-service span { color:var(--svc-accent-2); }
.service-detail-v41 .related-service:hover { transform:translateY(-3px);box-shadow:0 20px 40px rgba(18,45,73,.11); }

.service-detail-v41 .service-final-cta-v41,
.services-hub-v41 .service-final-cta-v41 {
  position:relative;overflow:hidden;padding:84px 0;background:linear-gradient(135deg,#09182b,#17365a);text-align:center;
}
.service-detail-v41 .service-final-cta-v41::before,
.services-hub-v41 .service-final-cta-v41::before {
  content:"";position:absolute;width:360px;height:360px;left:-140px;top:-190px;border:1px solid rgba(255,255,255,.12);border-radius:50%;
}
.service-detail-v41 .service-final-cta-v41::after,
.services-hub-v41 .service-final-cta-v41::after {
  content:"";position:absolute;width:260px;height:260px;right:-80px;bottom:-170px;border-radius:50%;background:radial-gradient(circle,var(--svc-accent,#4fc8ff),transparent 68%);opacity:.22;
}
.service-detail-v41 .service-final-cta-v41 .wrap,
.services-hub-v41 .service-final-cta-v41 .wrap { position:relative;z-index:1;max-width:850px; }
.service-detail-v41 .service-final-cta-v41 h2,
.services-hub-v41 .service-final-cta-v41 h2 { font-size:clamp(2rem,4vw,3.7rem);letter-spacing:-.04em; }
.service-detail-v41 .service-final-cta-v41 p,
.services-hub-v41 .service-final-cta-v41 p { margin-inline:auto; }
.service-detail-v41 .service-final-cta-v41 .btn { background:linear-gradient(135deg,var(--svc-accent),var(--svc-accent-2));border:0;color:#071323; }

/* Service hub */
.services-hub-v41 { --svc-accent:#4fd7ff; --svc-accent-2:#7162ff; }
.services-hub-v41 .services-hub-hero-v41 {
  position:relative;overflow:hidden;padding:70px 0;background:linear-gradient(135deg,#071524,#102b49 64%,#14233c);color:#fff;
}
.services-hub-v41 .services-hub-hero-v41::after { content:"";position:absolute;right:-120px;top:-170px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#4d72ff 0,transparent 68%);opacity:.25; }
.services-hub-hero-grid { position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center; }
.services-hub-v41 .services-hub-hero-v41 h1 { color:#fff;font-size:clamp(2.7rem,5vw,5rem);line-height:.98;letter-spacing:-.045em; }
.services-hub-v41 .services-hub-hero-v41 p { color:rgba(233,242,252,.72);font-size:1.12rem;line-height:1.75; }
.services-hub-panel { padding:30px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:rgba(255,255,255,.07);box-shadow:0 28px 75px rgba(0,0,0,.22);backdrop-filter:blur(16px); }
.services-hub-panel .eyebrow { color:#57d5ff; }
.services-hub-panel h2 { margin:12px 0 26px;color:#fff;font-size:1.9rem;letter-spacing:-.035em; }
.services-hub-row { display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-top:1px solid rgba(255,255,255,.13); }
.services-hub-row strong { color:#fff;font-size:.9rem; }
.services-hub-row span { color:rgba(235,243,252,.6);font-size:.78rem;text-align:right; }
.services-hub-v41 .services-hub-grid-v41 { background:#f3f6fa; }
.services-hub-v41 .services-hub-grid-v41 .grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.services-hub-v41 .services-hub-grid-v41 .service-card {
  min-height:310px;border:0;border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(18,45,73,.065);transition:transform .2s ease,box-shadow .2s ease;
}
.services-hub-v41 .services-hub-grid-v41 .service-card:hover { transform:translateY(-5px);box-shadow:0 22px 48px rgba(18,45,73,.12); }
.services-hub-v41 .services-hub-grid-v41 .service-icon { transform:scale(1.08);transform-origin:left top; }
.services-hub-v41 .services-hub-grid-v41 .service-card h3 { margin-top:22px;font-size:1.22rem; }
.services-hub-v41 .services-hub-grid-v41 .service-card p { line-height:1.7; }

/* Landing page only: keep its own visual language, align shared rhythm. */
.service-landing-v41 .lp-hero { border-bottom:0; }
.service-landing-v41 .lp-final { padding-top:88px;padding-bottom:88px; }

@media(max-width:1023px) {
  .service-detail-v41 .service-hero-grid,
  .services-hub-hero-grid { grid-template-columns:1fr;gap:38px; }
  .service-detail-v41 .service-visual { max-width:720px; }
  .service-detail-v41 .scope-grid { grid-template-columns:repeat(2,1fr); }
  .service-detail-v41 .scope-grid .card:nth-child(2n) { transform:none; }
  .service-detail-v41 .service-process-v41 .steps { grid-template-columns:repeat(2,1fr); }
  .service-detail-v41 .related-services { grid-template-columns:1fr 1fr; }
  .services-hub-v41 .services-hub-grid-v41 .grid { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:767px) {
  .service-detail-v41 .service-showcase { padding:28px 0 42px; }
  .service-detail-v41 .service-showcase h1 { font-size:clamp(2.4rem,12vw,3.65rem); }
  .service-detail-v41 .service-visual { border-radius:22px;padding:11px; }
  .service-visual-body { padding:26px 22px; }
  .service-value-band .wrap { grid-template-columns:1fr 1fr;padding-inline:0; }
  .service-value-band span { min-height:68px;padding:12px 16px;border-bottom:1px solid rgba(7,19,35,.14); }
  .service-detail-v41 .service-subnav { position:relative;top:auto; }
  .service-detail-v41 .service-subnav .wrap { justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px; }
  .service-detail-v41 .service-subnav a { flex:0 0 auto;white-space:nowrap; }
  .service-detail-v41 .scope-grid,
  .service-detail-v41 .service-process-v41 .steps,
  .service-detail-v41 .related-services,
  .services-hub-v41 .services-hub-grid-v41 .grid { grid-template-columns:1fr; }
  .service-detail-v41 .scope-grid .card { min-height:0; }
  .service-detail-v41 .service-process-v41 .step { min-height:0; }
  .services-hub-v41 .services-hub-hero-v41 { padding:44px 0; }
  .services-hub-panel { padding:22px; }
  .services-hub-row { flex-direction:column;gap:6px; }
  .services-hub-row span { text-align:left; }
  .services-hub-v41 .services-hub-grid-v41 .service-card { min-height:0; }
}