/* Rihla — compact cinematic hero band for hub pages (tools, guides).
   Static version of the homepage stage aesthetic: dark, aurora, accent glow. */
@keyframes awSpin{to{transform:rotate(360deg)}}
.cine-hero{position:relative;overflow:hidden;isolation:isolate;background:#0e0a1a;color:#fff;--scene:#a855f7;padding:clamp(40px,6vw,74px) 0 clamp(34px,5vw,58px);font-family:'Raleway',system-ui,-apple-system,sans-serif}
.cine-hero::before{content:"";position:absolute;inset:-40%;z-index:-2;background:conic-gradient(from 0deg at 50% 42%,color-mix(in srgb,var(--scene) 44%,transparent),transparent 38%,color-mix(in srgb,var(--scene) 22%,transparent) 68%,transparent);filter:blur(92px);opacity:.5;animation:awSpin 58s linear infinite}
.cine-hero::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 560px at 50% 8%,color-mix(in srgb,var(--scene) 22%,transparent),transparent 72%)}
.cine-hero .ch-in{max-width:1100px;margin:0 auto;padding:0 26px;position:relative;z-index:1}
.cine-hero .crumbs{color:rgba(255,255,255,.5);font-size:.86rem}
.cine-hero .crumbs a{color:rgba(255,255,255,.78);text-decoration:none}
.cine-hero .crumbs a:hover{color:#fff}
.cine-hero .ch-kicker{display:inline-flex;align-items:center;gap:9px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:8px 0 12px}
.cine-hero .ch-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--scene);box-shadow:0 0 12px var(--scene)}
.cine-hero h1{font-family:'Lora',Georgia,serif;font-size:clamp(2.1rem,5vw,3.6rem);font-weight:700;line-height:1.04;letter-spacing:-.02em;color:#fff;margin:0 0 14px}
.cine-hero .dek{color:rgba(255,255,255,.76);max-width:660px;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7;margin:0}
.cine-hero .ch-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cine-hero .ch-pills a{display:inline-flex;align-items:center;padding:9px 16px;border-radius:13px;background:color-mix(in srgb,var(--scene) 16%,rgba(255,255,255,.05));border:1px solid color-mix(in srgb,var(--scene) 32%,rgba(255,255,255,.16));color:#fff;font-size:.84rem;font-weight:500;text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .25s,background .25s,border-color .25s}
.cine-hero .ch-pills a:hover{background:color-mix(in srgb,var(--scene) 28%,transparent);border-color:var(--scene);transform:translateY(-2px);color:#fff;text-decoration:none}
@media (prefers-reduced-motion:reduce){.cine-hero::before{animation:none}}