/* ══ SERVICE PAGES ═══════════════════════════ */

/* ══ Services Index / Listing Page ══════════ */

/* ── Index Grid Section ─────────────────────── */
.svc-index-section {
  padding:5rem 0; position:relative; overflow:hidden;
  background:var(--bg2);
}
.svc-index-section .container { position:relative; z-index:2; }

/* Index section — dot grid pattern */
.svc-index-section::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 70% 30%, rgba(240,78,35,.05) 0%, transparent 50%),
    radial-gradient(circle 1px at center, rgba(240,78,35,.08) 0%, transparent 1px);
  background-size: 100% 100%, 32px 32px;
}

/* Index section — top/bottom edge blending */
.svc-index-section::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 6%, transparent 94%, var(--bg) 100%);
}

/* Index section — sec-bg tuning */
.svc-index-section .sec-bg { z-index:0; }
.svc-index-section .sec-bg img { opacity:0; filter:saturate(.25) brightness(.35); }
.svc-index-section .sec-bg.revealed img { opacity:.25; }
.svc-index-section .sec-bg::after {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, var(--bg2) 0%, transparent 25%, transparent 75%, var(--bg2) 100%);
}

/* Index section — light theme */
[data-theme="light"] .svc-index-section .sec-bg img { filter:saturate(.35) brightness(.9) !important; }
[data-theme="light"] .svc-index-section .sec-bg.revealed img { opacity:.15; }

.svc-index-head { text-align:center; margin-bottom:3.5rem; }
.svc-index-head .h2 { margin-bottom:.75rem; }
.svc-index-head p { color:var(--muted); max-width:600px; margin:0 auto; }

/* ── Index Cards Grid ───────────────────────── */
.svc-index-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem;
  max-width:1000px; margin:0 auto;
}

.svc-index-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r2);
  padding:2rem 2rem 2rem 1.75rem; display:flex; align-items:flex-start; gap:1.25rem;
  transition:all var(--transition); position:relative; overflow:hidden;
  text-decoration:none; color:inherit;
}
.svc-index-card::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:var(--grad); opacity:0; transition:opacity var(--transition);
}
.svc-index-card:hover {
  border-color:rgba(240,78,35,.2); transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.svc-index-card:hover::before { opacity:1; }

.svc-index-card-icon {
  width:48px; height:48px; border-radius:.75rem; flex-shrink:0;
  background:rgba(240,78,35,.1); border:1px solid rgba(240,78,35,.2);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.svc-index-card-icon svg { width:24px; height:24px; stroke:var(--blue2); fill:none; stroke-width:1.5; }
.svc-index-card:hover .svc-index-card-icon {
  background:rgba(240,78,35,.16); border-color:rgba(240,78,35,.35);
}

.svc-index-card-body { flex:1; min-width:0; }
.svc-index-card-body h3 {
  font-family:'Outfit',sans-serif; font-size:1.1rem; font-weight:600;
  margin-bottom:.5rem; color:var(--text);
}
.svc-index-card-body p {
  color:var(--muted); font-size:.9rem; line-height:1.7;
}

.svc-index-card-arrow {
  font-size:1.25rem; color:var(--faint); flex-shrink:0; align-self:center;
  transition:all var(--transition); margin-left:.5rem;
}
.svc-index-card:hover .svc-index-card-arrow {
  color:var(--blue2); transform:translateX(4px);
}

/* ── CTA Section ────────────────────────────── */
.svc-index-cta {
  padding:5rem 0; position:relative; overflow:hidden;
}
.svc-index-cta .container { position:relative; z-index:2; }

/* CTA — diagonal hatching pattern */
.svc-index-cta::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(196,59,23,.04) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(240,78,35,.025) 40px,
      rgba(240,78,35,.025) 41px
    );
}

/* CTA — noise texture */
.svc-index-cta::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.svc-index-cta-inner {
  text-align:center; max-width:640px; margin:0 auto;
  position:relative; z-index:2;
}
.svc-index-cta-inner .h2 { margin-bottom:.75rem; }
.svc-index-cta-inner p { color:var(--muted); line-height:1.75; }

/* ══ SERVICE DETAIL PAGE ═════════════════════ */

/* ── Overview ────────────────────────────────── */
.svc-overview {
  max-width:800px; margin:0 auto; padding:4rem 1.5rem; text-align:center;
  position:relative; overflow:hidden;
}
.svc-overview p { color:var(--muted); font-size:1.05rem; line-height:1.85; position:relative; z-index:1; }

/* Overview — subtle radial glow + noise */
.svc-overview::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(240,78,35,.04) 0%, transparent 70%);
}
.svc-overview::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Sub-Services Grid Section ───────────────── */
.svc-grid-section {
  padding:5rem 0; position:relative; overflow:hidden;
  background:var(--bg2);
}
.svc-grid-section .container { position:relative; z-index:2; }

/* Grid section — dot grid pattern */
.svc-grid-section::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 75% 25%, rgba(240,78,35,.05) 0%, transparent 50%),
    radial-gradient(circle 1px at center, rgba(240,78,35,.08) 0%, transparent 1px);
  background-size: 100% 100%, 32px 32px;
}

/* Grid section — top/bottom edge blending */
.svc-grid-section::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 8%, transparent 92%, var(--bg) 100%);
}

/* Grid section — sec-bg tuning (matches #services on homepage) */
.svc-grid-section .sec-bg { z-index:0; }
.svc-grid-section .sec-bg img { opacity:0; filter:saturate(.25) brightness(.35); }
.svc-grid-section .sec-bg.revealed img { opacity:.3; }
.svc-grid-section .sec-bg::after {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, var(--bg2) 0%, transparent 30%, transparent 70%, var(--bg2) 100%);
}

/* Grid section — light theme */
[data-theme="light"] .svc-grid-section .sec-bg img { filter:saturate(.35) brightness(.9) !important; }
[data-theme="light"] .svc-grid-section .sec-bg.revealed img { opacity:.18; }

.svc-grid-head { text-align:center; margin-bottom:3rem; }
.svc-grid-head .h2 { margin-bottom:.75rem; }
.svc-grid-head p { color:var(--muted); max-width:560px; margin:0 auto; }

.svc-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.svc-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r2);
  padding:2rem 1.75rem; transition:all var(--transition);
  position:relative; overflow:hidden;
}
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); opacity:0; transition:opacity var(--transition); }
.svc-card:hover { border-color:rgba(240,78,35,.2); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.15); }
.svc-card:hover::before { opacity:1; }
.svc-card-icon {
  width:44px; height:44px; border-radius:.65rem;
  background:rgba(240,78,35,.1); border:1px solid rgba(240,78,35,.2);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;
  transition:all var(--transition);
}
.svc-card-icon svg { width:22px; height:22px; stroke:var(--blue2); }
.svc-card:hover .svc-card-icon {
  background:rgba(240,78,35,.16); border-color:rgba(240,78,35,.35);
}
.svc-card h3 { font-family:'Outfit',sans-serif; font-size:1.05rem; font-weight:600; margin-bottom:.6rem; }
.svc-card p { color:var(--muted); font-size:.9rem; line-height:1.7; }

/* ── Benefits Section ────────────────────────── */
.svc-benefits {
  padding:5rem 0; position:relative; overflow:hidden;
}
.svc-benefits .container { position:relative; z-index:2; }

/* Benefits — diagonal hatching pattern (matches #industries) */
.svc-benefits::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 70%, rgba(196,59,23,.04) 0%, transparent 70%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(240,78,35,.025) 40px,
      rgba(240,78,35,.025) 41px
    );
}

/* Benefits — noise texture */
.svc-benefits::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.svc-benefits-head { text-align:center; margin-bottom:3rem; }
.svc-benefits-head .h2 { margin-bottom:.5rem; }

.svc-benefits-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; max-width:900px; margin:0 auto; }
.svc-benefit {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2);
  padding:1.75rem 2rem; display:flex; gap:1rem; align-items:flex-start;
  transition:all var(--transition); position:relative; overflow:hidden;
}
.svc-benefit::after {
  content:''; position:absolute; inset:0; background:var(--grad); opacity:0;
  transition:opacity var(--transition);
}
.svc-benefit:hover { border-color:rgba(240,78,35,.15); transform:translateY(-1px); }
.svc-benefit:hover::after { opacity:.03; }
.svc-benefit > * { position:relative; z-index:1; }
.svc-benefit-num {
  font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:700;
  padding:.2rem .55rem; border-radius:.35rem;
  background:rgba(240,78,35,.12); color:var(--blue2);
  letter-spacing:.06em; flex-shrink:0; margin-top:.2rem;
}
.svc-benefit h4 { font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:600; margin-bottom:.35rem; }
.svc-benefit p { color:var(--muted); font-size:.88rem; line-height:1.65; }

/* ── Contact Form Section ────────────────────── */
.svc-contact {
  padding:5rem 0; position:relative; overflow:hidden;
  background:var(--bg2); border-top:1px solid var(--border);
}
.svc-contact .container { position:relative; z-index:2; }

/* Contact — grid line pattern (matches #tech) */
.svc-contact::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(240,78,35,.04) 0%, transparent 60%),
    linear-gradient(rgba(240,78,35,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,78,35,.02) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

/* Contact — noise texture */
.svc-contact::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Contact — sec-bg tuning (matches #contact on homepage) */
.svc-contact .sec-bg { z-index:0; }
.svc-contact .sec-bg img { opacity:0; filter:saturate(.2) brightness(.3); }
.svc-contact .sec-bg.revealed img { opacity:.24; }
.svc-contact .sec-bg::after {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, var(--bg2) 0%, transparent 30%, transparent 70%, var(--bg2) 100%);
}

/* Contact — light theme */
[data-theme="light"] .svc-contact .sec-bg img { filter:saturate(.35) brightness(.9) !important; }
[data-theme="light"] .svc-contact .sec-bg.revealed img { opacity:.12; }

.svc-contact-head { text-align:center; margin-bottom:2.5rem; }
.svc-contact-head .h2 { margin-bottom:.5rem; }
.svc-contact-head p { color:var(--muted); max-width:480px; margin:0 auto; }

.svc-form { max-width:680px; margin:0 auto; }
.svc-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.svc-form .field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.svc-form .field label { font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:.04em; }
.svc-form .field input,
.svc-form .field textarea {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r);
  padding:.75rem 1rem; font-size:.9rem; color:var(--text); font-family:inherit;
  transition:border-color var(--transition);
}
.svc-form .field input:focus,
.svc-form .field textarea:focus { outline:none; border-color:var(--blue2); }
.svc-form .field input::placeholder,
.svc-form .field textarea::placeholder { color:var(--faint); }
.svc-form .field textarea { min-height:120px; resize:vertical; }
.svc-form .form-submit { width:100%; justify-content:center; margin-top:.5rem; }

/* ── SVG Circuit Decorations (reuses homepage tokens) ── */
.svc-deco {
  position:absolute; pointer-events:none; z-index:0; opacity:.04;
}
.svc-deco path, .svc-deco line, .svc-deco circle {
  stroke:var(--blue); fill:none; stroke-width:1;
}
.svc-deco .deco-dot { fill:var(--blue); stroke:none; }
[data-theme="light"] .svc-deco { opacity:.06; }

.svc-deco .draw-path {
  stroke-dasharray:300; stroke-dashoffset:300;
  transition:stroke-dashoffset 2s cubic-bezier(.22,1,.36,1);
}
.svc-deco.revealed .draw-path { stroke-dashoffset:0; }

@keyframes svcNodePulse {
  0%, 100% { r:2; opacity:.3; }
  50% { r:4; opacity:.8; }
}
.svc-deco .pulse-node { animation:svcNodePulse 3s ease-in-out infinite; }

/* ── Section Divider (between overview & grid) ── */
.svc-divider {
  width:100%; height:0; position:relative; overflow:visible; pointer-events:none;
}
.svc-divider::before {
  content:''; display:block; max-width:600px; height:2px; margin:0 auto;
  background:linear-gradient(90deg, transparent, rgba(240,78,35,.15), rgba(196,59,23,.1), transparent);
  border-radius:2px;
}

/* ── Responsive ──────────────────────────────── */
@media(max-width:900px) {
  .svc-grid { grid-template-columns:repeat(2, 1fr); }
  .svc-benefits-grid { grid-template-columns:1fr; }
  .svc-overview { padding:3rem 1.5rem; }
  .svc-benefits { padding:3.5rem 0; }
  .svc-grid-section { padding:3.5rem 0; }
  .svc-contact { padding:3.5rem 0; }
  .svc-deco { display:none; }
  .svc-index-section { padding:3.5rem 0; }
  .svc-index-cta { padding:3.5rem 0; }
}
@media(max-width:600px) {
  .svc-grid { grid-template-columns:1fr; }
  .svc-form .form-row { grid-template-columns:1fr; }
  .svc-card { padding:1.5rem 1.25rem; }
  .svc-overview { padding:2.5rem 1rem; }
  .svc-overview p { font-size:.95rem; }
  .svc-benefits { padding:2.5rem 0; }
  .svc-grid-section { padding:2.5rem 0; }
  .svc-contact { padding:2.5rem 0; }
  .svc-index-grid { grid-template-columns:1fr; }
  .svc-index-card { padding:1.5rem 1.25rem; }
  .svc-index-section { padding:2.5rem 0; }
  .svc-index-cta { padding:2.5rem 0; }
  .svc-index-card-arrow { display:none; }
}