/* =========================
   Artek Nexus — Services (scoped)
   ========================= */
:root{ --accent: var(--brand, #00f700); --page-max: var(--container, 1160px); }

#services-page { background: var(--bg); color: var(--fg); }

#services-page .site-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.40));
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid #1f2024;
}
#services-page .header-inner{
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 14px; min-height: 64px;
}
#services-page .brand{ display: inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--fg); }
#services-page .site-nav .nav-list, #services-page .lang-switch{ display:flex; gap:16px; align-items:center; margin:0; padding:0; }
#services-page .site-nav .nav-list li{ list-style:none; }
#services-page .site-nav a{ color:var(--fg); opacity:.92; }
#services-page .site-nav a[aria-current="page"]{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
#services-page .lang-switch a{ padding:4px 8px; border:1px solid #2a2b31; border-radius:6px; font-size:12px; color:var(--muted, #a7b3a7); }
#services-page .lang-switch a[aria-current="true"]{ border-color:var(--accent); color:var(--accent); }

#services-page .container{ width:100%; max-width:var(--page-max); margin-inline:auto; padding-inline:16px; }
#services-page .center{ text-align:center; }
#services-page .muted{ color: var(--muted, #a7b3a7); }
#services-page .grid{ display:grid; grid-gap:16px; }
#services-page .card{ background: color-mix(in srgb, var(--card, #131417) 94%, black 6%); border:1px solid #202228; border-radius:12px; padding:20px; }

/* Buttons */
#services-page .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:10px; border:1px solid transparent; font-weight:600; text-decoration:none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; will-change: transform; }
#services-page .btn:focus{ outline:2px solid var(--accent); outline-offset:3px; }
#services-page .btn-primary{ background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white 12%), var(--accent)); color:#021402; box-shadow:0 10px 24px rgba(0,247,0,.12); }
#services-page .btn-primary:hover{ transform: translateY(-1px); box-shadow:0 12px 30px rgba(0,247,0,.18); }
#services-page .btn-ghost{ background:transparent; color:var(--fg); border-color:#2a2b31; }
#services-page .btn-ghost:hover{ border-color:var(--accent); }

/* Hero */
#services-page .hero{ position:relative; padding-block: clamp(56px, 10vw, 120px) clamp(40px, 6vw, 80px); background: linear-gradient(180deg, rgba(0,247,0,0.08), rgba(0,0,0,0)); isolation:isolate; overflow: clip; }
#services-page .hero .eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--muted, #a7b3a7); margin:0 0 12px; }
#services-page .hero h1{ margin:0 0 10px; font-size: clamp(28px, 5.2vw, 56px); line-height:1.12; }
#services-page .hero h1 .accent{ background: linear-gradient(90deg, var(--accent), #6dfc6d); -webkit-background-clip:text; background-clip:text; color:transparent; }
#services-page .hero .lead{ margin:0 0 20px; color:var(--muted, #a7b3a7); font-size: clamp(16px, 2.2vw, 20px); }
#services-page .hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
#services-page .scroll-cue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-size:12px; color:var(--muted, #a7b3a7); opacity:.85; }

/* Hero Canvas (Neon Nexus) */
#services-page #hero-anim{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:-1; opacity:.9; filter:saturate(130%) contrast(110%); }
#services-page #hero:not(.has-anim){ background:
  radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
  linear-gradient(180deg, rgba(0,247,0,0.06), rgba(0,0,0,0));
}

/* Proof */
#services-page .proof-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0; }
#services-page .metric{ display:grid; gap:6px; place-items:start; }
#services-page .metric-value{ font-size: clamp(22px, 4vw, 34px); font-weight:700; }
#services-page .metric-label{ font-size:14px; color:var(--muted, #a7b3a7); }

/* Services overview */
#services-page .services-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
#services-page .service-card{ position:relative; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#services-page .service-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.3); border-color: color-mix(in srgb, var(--accent) 40%, #202228); }
#services-page .service-icon{ width:36px; height:36px; border-radius:8px; background: color-mix(in srgb, var(--accent) 16%, #0c0e12); display:grid; place-items:center; margin-bottom:10px; }
#services-page .service-card h3{ margin:0 0 6px; }
#services-page .service-card p{ margin:0 0 14px; color:var(--muted, #a7b3a7); }

/* Capabilities */
#services-page details.cap{ background: color-mix(in srgb, var(--card, #131417) 94%, black 6%); border:1px solid #202228; border-radius:12px; padding:12px 16px; }
#services-page details.cap + details.cap{ margin-top:10px; }
#services-page details.cap[open]{ border-color: color-mix(in srgb, var(--accent) 35%, #202228); }
#services-page details.cap>summary{ cursor:pointer; list-style:none; font-weight:600; outline:none; }
#services-page details.cap>summary::-webkit-details-marker{ display:none; }
#services-page details.cap>summary .badge{ display:inline-block; margin-left:8px; padding:2px 6px; border-radius:999px; background: color-mix(in srgb, var(--accent) 18%, #0f1116); color:var(--accent); font-size:12px; }
#services-page .cap-body{ margin-top:12px; color:var(--muted, #a7b3a7); }
#services-page .cap-body ul{ padding-left:18px; margin:0; }
#services-page .cap-body li{ margin:6px 0; }

/* Work */
#services-page .cases{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
#services-page .case-card{ position:relative; border-radius:12px; border:1px solid #202228; background:
  radial-gradient(600px 320px at 110% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
  linear-gradient(180deg, #14161b, #0f1116); padding:14px; min-height:220px; display:grid; align-content:end; overflow:hidden; }
#services-page .case-card h3{ margin:0; font-size:18px; }
#services-page .case-card p{ margin:4px 0 0 0; color:var(--muted, #a7b3a7); font-size:14px; }

/* Case icons (SVG) */
#services-page .case-icon{ position:absolute; top:16px; left:16px; width:56px; height:56px; border-radius:12px; display:grid; place-items:center; background: color-mix(in srgb, var(--accent) 12%, #0c0e12); box-shadow: inset 0 0 0 1px #1f2a1f, 0 4px 16px rgba(0,0,0,.25); }
#services-page .case-icon svg{ width:34px; height:34px; color:var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
@keyframes nexusGlow{0%{opacity:.8;}50%{opacity:1;filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 85%, transparent));}100%{opacity:.8;}}
#services-page .case-icon .glow{ animation: nexusGlow 2.6s ease-in-out infinite; }
@keyframes orbit{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes rise{from{transform:translateY(5px);}to{transform:translateY(-5px);}}
#services-page .icon-commerce .orbit{ transform-origin:17px 17px; animation: orbit 8s linear infinite; }
#services-page .icon-analytics .bar{ transform-origin: bottom; animation: rise 2.2s ease-in-out infinite alternate; }
#services-page .icon-analytics .bar:nth-child(2){ animation-delay:.25s; }
#services-page .icon-analytics .bar:nth-child(3){ animation-delay:.5s; }
#services-page .icon-mobile .wave{ transform-origin:center; animation: rise 3s ease-in-out infinite alternate; }
#services-page .icon-automation .cog{ transform-origin:17px 17px; animation: orbit 6s linear infinite; }

/* Lottie containers in case cards */
#services-page .case-lottie{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
#services-page .case-lottie svg{ width:44px; height:44px; }

/* Process */
#services-page .process-steps{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
#services-page .step{ border:1px solid #202228; background: var(--card, #131417); border-radius:12px; padding:16px; }
#services-page .step .num{ width:28px; height:28px; border-radius:8px; background: color-mix(in srgb, var(--accent) 18%, #0f1116); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:14px; margin-bottom:8px; }

/* FAQ */
#services-page details.faq{ border-bottom:1px solid #1f2024; padding-block:12px; }
#services-page details.faq>summary{ cursor:pointer; list-style:none; font-weight:600; }
#services-page details.faq>summary::-webkit-details-marker{ display:none; }
#services-page details.faq[open]>summary{ color:var(--accent); }
#services-page .faq-body{ margin-top:8px; color:var(--muted, #a7b3a7); }

#services-page .site-footer{ border-top:1px solid #1f2024; margin-top:48px; }

/* In-view animation */
#services-page [data-animate]{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
#services-page [data-animate].is-visible{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 960px){
  #services-page .proof-grid{ grid-template-columns:1fr; }
  #services-page .services-grid{ grid-template-columns:1fr; }
  #services-page .cases{ grid-template-columns: 1fr 1fr; }
  #services-page .process-steps{ grid-template-columns: 1fr 1fr; }
  #services-page .header-inner{ grid-template-columns: 1fr; gap:10px; }
}
@media (max-width: 560px){
  #services-page .cases{ grid-template-columns: 1fr; }
  #services-page .process-steps{ grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #services-page [data-animate]{ transition:none; opacity:1; transform:none; }
  #services-page .btn, #services-page .service-card{ transition:none; }
  #services-page .case-icon .glow, #services-page .icon-commerce .orbit, #services-page .icon-analytics .bar, #services-page .icon-mobile .wave, #services-page .icon-automation .cog{ animation:none !important; }
  #services-page .case-lottie{ display:none; }
}