/* ══════════════════════════════════════════════════════════
   Services Hub & Individual Service Pages — services.css
   3DPrint.ua / blocksy-child · v1.0.0
   ══════════════════════════════════════════════════════════ */

/* ─── Shell ─── */
.srv-wrap, .svc-wrap { font-family:"Inter",-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.srv-shell { max-width:1280px; margin:0 auto; padding:0 40px; }

/* ─── SERVICES HUB · HERO ─── */
.srv-hero { background:#0c0c0c; padding:64px 0 52px; position:relative; overflow:hidden; }
.srv-hero::after { content:''; position:absolute; right:-140px; bottom:-140px; width:700px; height:700px;
  background:radial-gradient(circle,#ff4f00 0%,transparent 60%); opacity:.1; pointer-events:none; }
.srv-hero-kicker { font-size:11px; letter-spacing:.12em; color:rgba(245,242,236,.4); margin-bottom:18px; position:relative; z-index:2; }
.srv-hero h1 { font-size:clamp(34px,4.5vw,60px); font-weight:800; letter-spacing:-.03em; line-height:1.06;
  color:#f5f2ec !important; margin:0 0 16px; position:relative; z-index:2; }
.srv-hero h1 em { color:#ff4f00; font-style:normal; }
.srv-hero-sub { font-size:16px; color:rgba(245,242,236,.6); max-width:580px; line-height:1.65; margin-bottom:48px; position:relative; z-index:2; }
.srv-stats { display:flex; gap:0; border-top:1px solid rgba(245,242,236,.1); padding-top:32px; position:relative; z-index:2; }
.srv-stat { flex:1; padding:0 28px; }
.srv-stat:first-child { padding-left:0; }
.srv-stat-n { font-size:36px; font-weight:800; color:#f5f2ec; letter-spacing:-.03em; line-height:1; }
.srv-stat-n em { font-style:normal; font-size:18px; font-weight:400; color:rgba(245,242,236,.5); margin-left:2px; }
.srv-stat-l { font-size:11px; color:rgba(245,242,236,.4); margin-top:5px; letter-spacing:.07em; text-transform:uppercase; }
.srv-stat-sep { width:1px; background:rgba(245,242,236,.1); align-self:stretch; flex-shrink:0; }

/* ─── HUB · FILTER TABS ─── */
.srv-tabs-bar { background:#fff; border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:40; }
.srv-tabs-scroll { display:flex; overflow-x:auto; scrollbar-width:none; }
.srv-tabs-scroll::-webkit-scrollbar { display:none; }
.srv-tab { padding:13px 20px; font-size:13px; font-weight:600; color:#64748b; border:none; background:none;
  border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; font-family:inherit;
  margin-bottom:-1px; transition:all .15s; }
.srv-tab:hover { color:#0f172a; }
.srv-tab.on { color:#0f172a; border-bottom-color:#ff4f00; }

/* ─── HUB · GRID ─── */
.srv-grid-wrap { background:#f4f5f7; padding:44px 0 72px; }
.srv-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ─── HUB · CARD ─── */
.srv-card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:box-shadow .2s, transform .2s; position:relative; }
.srv-card::before { content:''; display:block; height:3px; background:var(--c,#ff4f00); flex-shrink:0; }
.srv-card:hover { box-shadow:0 10px 32px rgba(0,0,0,.1); transform:translateY(-3px); }
.srv-card-num { position:absolute; top:12px; right:14px; font-size:10px;
  font-family:"JetBrains Mono",monospace; color:#cbd5e1; font-weight:700; }
.srv-card-ico { width:44px; height:44px; border-radius:8px; margin:20px 18px 0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--c,#ff4f00) 12%,#fff); color:var(--c,#ff4f00); }
.srv-card-body { padding:12px 18px 0; flex:1; }
.srv-card-tag { font-size:10px; font-family:"JetBrains Mono",monospace; color:#94a3b8; letter-spacing:.04em; margin-bottom:5px; }
.srv-card-title { font-size:15px; font-weight:700; color:#0f172a; line-height:1.25; margin-bottom:7px; letter-spacing:-.01em; }
.srv-card-desc { font-size:12px; color:#64748b; line-height:1.6; }
.srv-card-foot { padding:14px 18px 18px; margin-top:auto; }
.srv-card-link { font-size:12px; font-weight:600; color:var(--c,#ff4f00); letter-spacing:.02em; }
.srv-card:hover .srv-card-link { text-decoration:underline; }

/* ─── HUB · CTA STRIP ─── */
.srv-cta { background:#0c0c0c; padding:56px 0; }
.srv-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.srv-cta-text h2 { font-size:clamp(22px,2.5vw,34px); font-weight:700; color:#f5f2ec !important; letter-spacing:-.02em; margin:0 0 8px; }
.srv-cta-text p { font-size:14px; color:rgba(245,242,236,.6); max-width:520px; line-height:1.65; margin:0; }
.srv-cta-btns { display:flex; gap:12px; flex-shrink:0; }
.srv-btn-pri { padding:13px 26px; background:#ff4f00; color:#fff !important; border-radius:5px; font-size:13px; font-weight:700; text-decoration:none; transition:background .15s; white-space:nowrap; }
.srv-btn-pri:hover { background:#e64600; }
.srv-btn-sec { padding:13px 26px; border:1px solid rgba(245,242,236,.25); color:rgba(245,242,236,.8) !important; border-radius:5px; font-size:13px; font-weight:600; text-decoration:none; transition:all .15s; white-space:nowrap; }
.srv-btn-sec:hover { border-color:rgba(245,242,236,.6); color:#f5f2ec !important; }

/* ══════════════════════════════════════
   INDIVIDUAL SERVICE PAGE (page-service.php)
   ══════════════════════════════════════ */

/* ─── Hero ─── */
.svc-hero { background:#0c0c0c; padding:56px 0 44px; position:relative; overflow:hidden; }
.svc-hero::after { content:''; position:absolute; left:-80px; bottom:-100px; width:500px; height:500px;
  background:radial-gradient(circle,var(--c,#ff4f00) 0%,transparent 60%); opacity:.14; pointer-events:none; }
.svc-crumb { font-size:12px; color:rgba(245,242,236,.4); margin-bottom:14px; display:flex; gap:8px; align-items:center; position:relative; z-index:2; }
.svc-crumb a { color:rgba(245,242,236,.5); text-decoration:none; }
.svc-crumb a:hover { color:#ff4f00; }
.svc-crumb span { opacity:.35; }
.svc-hero-tag { font-size:11px; letter-spacing:.12em; color:var(--c,#ff4f00); margin-bottom:10px; position:relative; z-index:2; }
.svc-hero h1 { font-size:clamp(28px,3.5vw,48px); font-weight:800; letter-spacing:-.03em; line-height:1.08;
  color:#f5f2ec !important; margin:0 0 14px; position:relative; z-index:2; }
.svc-hero-sub { font-size:15px; color:rgba(245,242,236,.6); max-width:660px; line-height:1.65; position:relative; z-index:2; }

/* ─── Layout ─── */
.svc-layout { background:#f4f5f7; padding:44px 0 72px; }
.svc-inner { display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start; }

/* ─── Article ─── */
.svc-article { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:36px 40px; }
.svc-article h2 { font-size:21px; font-weight:700; color:#0f172a !important; letter-spacing:-.02em; margin:32px 0 12px; line-height:1.2; }
.svc-article h2:first-child { margin-top:0; }
.svc-article h3 { font-size:16px; font-weight:700; color:#0f172a !important; margin:22px 0 8px; }
.svc-article p { font-size:14px; color:#334155; line-height:1.8; margin-bottom:14px; }
.svc-article ul { padding-left:20px; margin-bottom:16px; }
.svc-article ul li { font-size:14px; color:#334155; line-height:1.7; margin-bottom:5px; }
.svc-article ul li::marker { color:var(--c,#ff4f00); }
.svc-article ol { padding-left:20px; margin-bottom:16px; }
.svc-article ol li { font-size:14px; color:#334155; line-height:1.7; margin-bottom:5px; }
.svc-article strong { color:#0f172a; font-weight:600; }
.svc-article table { width:100%; border-collapse:collapse; margin:20px 0; font-size:13px; border-radius:6px; overflow:hidden; }
.svc-article table thead tr { background:#0f172a; }
.svc-article table th { color:#fff; padding:10px 14px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; }
.svc-article table td { padding:9px 14px; border-bottom:1px solid #e2e8f0; color:#334155; vertical-align:top; }
.svc-article table tr:last-child td { border-bottom:none; }
.svc-article table tr:nth-child(even) { background:#f8fafc; }
.svc-highlight { background:color-mix(in srgb,var(--c,#ff4f00) 6%,#fff); border-left:3px solid var(--c,#ff4f00);
  padding:14px 18px; border-radius:0 6px 6px 0; margin:20px 0; }
.svc-highlight p { margin:0; font-size:13px; color:#334155; }

/* ─── Sidebar ─── */
.svc-sidebar { display:flex; flex-direction:column; gap:18px; position:sticky; top:80px; }
.svc-cta-card { background:#0c0c0c; border-radius:10px; padding:24px; }
.svc-cta-card h3 { font-size:16px; font-weight:700; color:#f5f2ec !important; margin:0 0 8px; line-height:1.3; }
.svc-cta-card p { font-size:13px; color:rgba(245,242,236,.6); line-height:1.6; margin:0 0 18px; }
.svc-cta-btn { display:block; background:#ff4f00; color:#fff !important; text-align:center; padding:12px 16px;
  border-radius:5px; font-size:13px; font-weight:700; text-decoration:none; margin-bottom:8px; transition:background .15s; }
.svc-cta-btn:hover { background:#e64600; }
.svc-cta-out { display:block; border:1px solid rgba(245,242,236,.2); color:rgba(245,242,236,.7) !important;
  text-align:center; padding:11px 16px; border-radius:5px; font-size:13px; font-weight:600;
  text-decoration:none; transition:all .15s; }
.svc-cta-out:hover { border-color:rgba(245,242,236,.5); color:#f5f2ec !important; }
.svc-info-box { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:20px; }
.svc-info-box h4 { font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; }
.svc-info-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #f1f5f9; font-size:12px; }
.svc-info-row:last-child { border:none; padding-bottom:0; }
.svc-info-lbl { color:#64748b; }
.svc-info-val { color:#0f172a; font-weight:600; text-align:right; line-height:1.4; }

/* ─── Related services ─── */
.svc-related { background:#0c0c0c; padding:48px 0 56px; }
.svc-related h2 { font-size:22px; font-weight:700; color:#f5f2ec !important; letter-spacing:-.02em; margin:0 0 24px; }
.svc-rel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.svc-rel-card { background:#161616; border:1px solid #222; border-radius:8px; padding:18px 16px;
  text-decoration:none; transition:all .2s; position:relative; overflow:hidden; }
.svc-rel-card::after { content:''; position:absolute; bottom:-16px; right:-16px; width:80px; height:80px;
  background:radial-gradient(circle,var(--c,#ff4f00) 0%,transparent 70%); opacity:.2; border-radius:50%; }
.svc-rel-card:hover { background:#1e1e1e; border-color:#333; transform:translateY(-2px); }
.svc-rel-tag { font-size:10px; color:var(--c,#ff4f00); font-weight:600; letter-spacing:.06em; margin-bottom:6px; font-family:"JetBrains Mono",monospace; }
.svc-rel-title { font-size:14px; font-weight:700; color:#f5f2ec; line-height:1.3; margin-bottom:8px; }
.svc-rel-arr { font-size:12px; color:rgba(245,242,236,.35); }

/* ─── Nav dropdown: see nav-mega.css (global) ─── */

/* ─── Responsive ─── */
@media (max-width:1100px) { .srv-grid { grid-template-columns:repeat(3,1fr); } .svc-rel-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px) {
  .srv-shell { padding:0 20px; }
  .srv-grid { grid-template-columns:repeat(2,1fr); }
  .svc-inner { grid-template-columns:1fr; }
  .svc-sidebar { position:static; }
  .svc-rel-grid { grid-template-columns:repeat(2,1fr); }
  .srv-stats { flex-wrap:wrap; gap:20px; }
  .srv-stat { flex:0 0 calc(50% - 10px); padding:0; }
  .srv-stat-sep { display:none; }
  .srv-cta-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px) {
  .srv-grid { grid-template-columns:1fr; }
  .svc-article { padding:24px 18px; }
  .svc-rel-grid { grid-template-columns:1fr 1fr; }
  .srv-cta-btns { flex-direction:column; }
}
