/* Service pages: rotating hero word, example scenarios, live package strip. */
.avenue-hero .eyebrow{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--cyan)}
.avenue-hero h1{line-height:1.12}
.rotate{display:inline-block;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .3s ease,transform .3s ease}
.rotate.out{opacity:0;transform:translateY(-8px)}

.svc-section{max-width:1000px;margin:0 auto;padding:30px 24px;position:relative;z-index:1}
.svc-section>h2{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);margin:0 0 8px;letter-spacing:-.4px}
.svc-section>.svc-sub{color:var(--text-muted);margin:0 0 22px;line-height:1.6}

/* example scenarios */
.examples{border:1px solid #35334f;border-radius:24px;padding:26px;background:radial-gradient(ellipse at 100% 0%,#8b6bf214,transparent 50%),#090c15}
.ex-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ex-tabs [role=tab]{min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid #33364b;background:#111422;color:var(--text-muted);font:inherit;font-size:14px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ex-tabs [role=tab]:hover{color:var(--text);border-color:var(--border-hover)}
.ex-tabs [role=tab][aria-selected=true]{color:var(--text);border-color:var(--cyan);background:linear-gradient(110deg,#35e2e01a,#8b6bf226)}
.ex-progress{height:2px;margin:18px 0 22px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.ex-progress i{display:block;height:100%;background:var(--accent-grad);transform:scaleX(0);transform-origin:left}
.ex-panel{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;animation:ex-in .45s ease both}
.ex-panel[hidden]{display:none}
@keyframes ex-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ex-card{border-radius:16px;padding:18px 18px 16px;border:1px solid var(--border);background:var(--card-bg)}
.ex-card span{display:block;font-size:10.5px;letter-spacing:1.5px;margin-bottom:8px}
.ex-card p{margin:0;line-height:1.6;font-size:15px}
.ex-before span{color:#f2836b}.ex-before p{color:var(--text-muted)}
.ex-after{border-color:#35e2e044;background:radial-gradient(ellipse at 20% 0%,#35e2e012,transparent 70%),var(--card-bg)}
.ex-after span{color:var(--cyan)}
.ex-arrow{align-self:center;font-size:22px;color:var(--cyan);animation:ex-nudge 1.8s ease-in-out infinite}
@keyframes ex-nudge{50%{transform:translateX(4px)}}
.ex-build{grid-column:1/-1;display:flex;gap:12px;align-items:baseline;padding:14px 18px;border-radius:14px;border:1px dashed #8b6bf266;color:var(--text)}
.ex-build span{flex:none;font-size:10.5px;letter-spacing:1.5px;color:#bba7ff}
.ex-build p{margin:0;font-size:14.5px;line-height:1.55}
.ex-note{margin:16px 0 0;font-size:12px;color:var(--text-dim)}

/* live packages */
.pkg-strip[hidden]{display:none}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pkg-grid .pkg-loading{color:var(--text-muted);font-size:14px}
.pkg{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;animation:pkg-in .45s ease both}
.pkg:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 14px 40px #0005,0 0 30px #35e2e015}
@keyframes pkg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pkg-tag{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cyan)}
.pkg strong{font-family:var(--font-display);font-size:17px}
.pkg p{margin:0;color:var(--text-muted);font-size:13.5px;line-height:1.55;flex:1}
.pkg-cta{font-size:13.5px;font-weight:600;color:var(--cyan)}

@media(max-width:760px){
  .examples{padding:18px 14px;border-radius:18px}
  .ex-panel{grid-template-columns:1fr}
  .ex-arrow{transform:rotate(90deg);justify-self:center;animation:none}
  .ex-build{flex-direction:column;gap:4px}
  .svc-section{padding:24px 16px}
}
@media(prefers-reduced-motion:reduce){.ex-panel,.pkg,.ex-arrow{animation:none}.rotate{transition:none}}