/* Services: a stack of three layers (Build, Grow, Automate). Pick a layer to show its panel. Logic: services.js */
#tab-build,#build{--a:#818cf8}
#tab-grow,#grow{--a:#5eead4}
#tab-automate,#automate{--a:#fbbf24}

.svc{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;margin-top:48px}
.svc-stack{position:sticky;top:100px;display:flex;flex-direction:column-reverse;gap:14px;perspective:900px;padding-top:8px}
.svc-hint{order:-1;margin-top:6px;font:500 13px "JetBrains Mono",monospace;color:var(--muted);text-align:center}

.layer{position:relative;height:104px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:0 26px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;opacity:.55;transition:opacity .3s}
.layer:hover{opacity:.85}
.layer[aria-selected="true"]{opacity:1}
.layer:focus-visible{outline:none}
.layer:focus-visible .slab{outline:2px solid var(--a);outline-offset:4px}
.slab{position:absolute;inset:0;border-radius:18px;border:1px solid color-mix(in srgb,var(--a) 35%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--a) 22%,var(--card)),var(--card) 65%);
  transform:rotateX(34deg);transform-origin:50% 60%;
  box-shadow:0 12px 0 -1px color-mix(in srgb,var(--a) 28%,#0b0f1a),0 30px 40px -18px rgba(0,0,0,.85);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,filter .3s;filter:saturate(.55)}
.layer:hover .slab{transform:translateY(-4px) rotateX(30deg)}
.layer[aria-selected="true"] .slab{filter:none;transform:translateY(-10px) rotateX(26deg) scale(1.04);
  box-shadow:0 12px 0 -1px color-mix(in srgb,var(--a) 45%,#0b0f1a),0 0 46px -8px color-mix(in srgb,var(--a) 70%,transparent),0 34px 44px -18px rgba(0,0,0,.85)}
.layer-txt,.layer-n{position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.layer[aria-selected="true"] .layer-txt,.layer[aria-selected="true"] .layer-n{transform:translateY(-8px)}
.layer-txt small{display:block;font:500 12px "JetBrains Mono",monospace;color:var(--a)}
.layer-txt b{display:block;font-size:24px;letter-spacing:-.02em;line-height:1.2}
.layer-txt em{display:block;font-style:normal;font-size:14px;color:var(--muted)}
.layer-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:600 14px "JetBrains Mono",monospace;color:#0b0f1a;background:var(--a)}

.svc-panel{animation:svc-in .45s cubic-bezier(.2,.7,.2,1)}
.svc-panel[hidden]{display:none}
@keyframes svc-in{from{opacity:0;transform:translateY(14px)}}
.svc-kicker{font:500 13px "JetBrains Mono",monospace;color:var(--a);text-transform:uppercase;letter-spacing:.08em}
.svc-title{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;margin:8px 0 10px}
.svc-lead{color:var(--muted);font-size:17px;max-width:620px}
.svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.svc-cards .card{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:20px;animation:svc-in .5s cubic-bezier(.2,.7,.2,1) both}
.svc-cards .card:hover{border-color:color-mix(in srgb,var(--a) 45%,var(--line))}
.svc-cards .card:nth-child(2){animation-delay:.05s}.svc-cards .card:nth-child(3){animation-delay:.1s}
.svc-cards .card:nth-child(4){animation-delay:.15s}.svc-cards .card:nth-child(5){animation-delay:.2s}.svc-cards .card:nth-child(6){animation-delay:.25s}
.svc-cards .icon{margin:0;color:var(--a);background:color-mix(in srgb,var(--a) 12%,transparent)}
.svc-cards h3{font-size:17px;margin-bottom:6px}
.svc-cards p{font-size:14.5px}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.svc-tags span{font-size:12.5px;color:#c5cce0;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.svc-panel .stat b{color:var(--a)}
.svc-demo{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 18px;border-radius:14px;text-decoration:none;border:1px solid color-mix(in srgb,var(--a) 45%,var(--line));background:color-mix(in srgb,var(--a) 10%,var(--card));transition:transform .2s,border-color .2s}
.svc-demo:hover{transform:translateY(-2px);border-color:var(--a)}
.svc-demo-play{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--a);color:#0b0f1a}
.svc-demo b{display:block;font-size:16px}
.svc-demo small{display:block;color:var(--muted);font-size:14px}

@media (max-width:900px){
  .svc{grid-template-columns:1fr;gap:28px;margin-top:36px}
  .svc-stack{position:static;gap:10px}
  .layer{height:80px;padding:0 20px}
  .layer-txt b{font-size:20px}
  .layer-txt em{font-size:13px}
}
@media (max-width:600px){.svc-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.slab,.layer-txt,.layer-n{transition:none}.svc-panel,.svc-cards .card{animation:none}}
.svc-cards .cost{margin-top:10px;font-size:15px;font-weight:600;color:var(--a)}
.svc-cards .cost small{font-size:13px;font-weight:400;color:var(--muted)}
.svc-cards .card.pack{border-color:color-mix(in srgb,var(--a) 50%,var(--line));background:color-mix(in srgb,var(--a) 7%,var(--card))}
.svc-cards .card.soon .cost{color:var(--muted);font-weight:500}