.tiles-scene{position:relative;perspective:1000px;isolation:isolate}.tiles-belt{position:relative;transform:rotateX(55deg) translateY(40px);transform-origin:center;filter:drop-shadow(0 20px 30px rgba(2,6,23,.25))}.tiles-row{display:flex;gap:16px;padding:10px 0;animation:scroll 36s linear infinite}.tiles-row-reverse{animation-direction:reverse}.tile{width:80px;height:56px;display:grid;place-items:center;color:#fff;position:relative}.tile,.tile:after{border-radius:14px}.tile:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}.tile-icon{width:22px;height:22px;opacity:.98}.tiles-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.5),rgba(15,23,42,0) 30%,rgba(15,23,42,0) 70%,rgba(15,23,42,.6));pointer-events:none}@keyframes scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}@media (max-width:640px){.tile{width:64px;height:46px}.tiles-row{gap:12px}}.roles-section{position:relative;padding:70px 0}.roles-bg{position:absolute;inset:0;background:radial-gradient(1200px 500px at 50% 0,rgba(99,102,241,.15),transparent 60%),linear-gradient(180deg,rgba(2,6,23,.6),rgba(2,6,23,.3) 30%,transparent 55%,rgba(2,6,23,.5));filter:saturate(1.1);pointer-events:none}.roles-title{font-size:34px;line-height:1.2;font-weight:800;letter-spacing:.2px;color:#e2e8f0;margin:0 0 6px;text-shadow:0 1px 0 rgba(0,0,0,.2)}.roles-sub{color:#cbd5e1;margin:0;font-size:14px}.tab-pill{padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:rgba(15,23,42,.6);color:#e2e8f0;font-size:12px}.tab-pill:hover{background:rgba(30,41,59,.65)}.tab-active{border-color:#60a5fa;background:linear-gradient(180deg,rgba(59,130,246,.25),rgba(30,64,175,.4));box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)}.roles-marquee{position:relative;overflow:hidden;margin:0 -24px;padding:10px 0}.marquee-track{display:flex;gap:18px;min-width:200%;animation:roles-scroll 55s linear infinite}.role-card{min-width:320px;max-width:320px;background:linear-gradient(180deg,rgba(2,6,23,.75),rgba(2,6,23,.6));border:1px solid rgba(148,163,184,.25);border-radius:18px;padding:16px;box-shadow:0 10px 20px rgba(2,6,23,.35);backdrop-filter:blur(6px);color:#e2e8f0;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative}.role-card:hover{transform:translateY(-6px);box-shadow:0 16px 28px rgba(2,6,23,.45);border-color:rgba(96,165,250,.45)}.role-top{display:flex;gap:10px;margin-bottom:12px}.badge{font-size:11px;color:#cbd5e1;background:rgba(15,23,42,.7);border:1px solid rgba(148,163,184,.28);padding:.25rem .5rem;border-radius:999px}.role-main{display:flex;gap:12px;align-items:flex-start}.role-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(59,130,246,.95),rgba(29,78,216,.9));color:#fff;box-shadow:0 6px 10px rgba(29,78,216,.35)}.role-title{font-weight:800;margin:0 0 6px;font-size:16px;color:#f1f5f9}.role-blurb{font-size:12px;color:#cbd5e1;line-height:1.5;max-width:36ch}.cat-stem .role-icon{background:linear-gradient(180deg,#34d399,#059669);box-shadow:0 6px 10px rgba(5,150,105,.35)}.cat-coding .role-icon{background:linear-gradient(180deg,#60a5fa,#2563eb);box-shadow:0 6px 10px rgba(37,99,235,.35)}.cat-audio .role-icon{background:linear-gradient(180deg,#fbbf24,#f59e0b);box-shadow:0 6px 10px rgba(245,158,11,.35)}.cat-general .role-icon{background:linear-gradient(180deg,#a78bfa,#7c3aed);box-shadow:0 6px 10px rgba(124,58,237,.35)}@keyframes roles-scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}@media (max-width:640px){.roles-title{font-size:26px}.role-card{min-width:260px;max-width:260px}}