/* Shared styles for the Role Redesign Engine pages under /role-redesign/.
   Extracted from ../index.html's own <style> block (tokens, nav, footer,
   buttons, eyebrow, reveal, aurora background) so four pages don't each
   duplicate ~300 lines of the site's base design system. Still just a plain
   static file, no build step, per this repo's own "no framework" rule. */

:root{
  --bg:#07090F;
  --bg2:#0B0F1A;
  --panel:rgba(255,255,255,.045);
  --panel-line:rgba(255,255,255,.1);
  --teal:#2DD4BF;
  --teal-deep:#0E9384;
  --violet:#8B7CF8;
  --coral:#FF7A5C;
  --gold:#FFC24B;
  --text:#F2F5F9;
  --text-soft:#9AA7B8;
  --text-mute:#8492A6;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:hidden on html AND body: the off-canvas mobile nav below sits at
   position:fixed;inset:0 and is only pushed off-screen via transform, which
   does not stop it from expanding the document's scrollable width unless
   BOTH html and body clip it. body alone left the closed drawer expanding
   window.innerWidth to 2x on a 375px viewport and broke the whole page,
   caught testing the mobile menu in a real browser, not assumed safe. */
html{scroll-behavior:smooth;overflow-x:hidden}
section[id],div[id]{scroll-margin-top:92px}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;font-size:17px;overflow-x:hidden}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif}
a{color:var(--teal);text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#241A02;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:90px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.25);padding:8px 16px;border-radius:999px;margin-bottom:22px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 10px var(--coral)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;cursor:pointer;border:0;font-family:inherit}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-primary{background:linear-gradient(120deg,var(--coral),#FF9A6C);color:#1A0E08;box-shadow:0 8px 30px rgba(255,122,92,.35)}
.btn-primary:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 14px 44px rgba(255,122,92,.5)}
.btn-secondary{background:rgba(255,255,255,.06);color:var(--text);border:1.5px solid var(--panel-line);backdrop-filter:blur(6px)}
.btn-secondary:hover:not(:disabled){transform:translateY(-3px);border-color:var(--teal)}
.btn-small{padding:10px 18px;font-size:14px}

.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora .swirl{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen;will-change:transform}
.swirl.s1{width:640px;height:640px;top:-240px;right:-160px;
  background:conic-gradient(from 0deg,rgba(45,212,191,.0),rgba(45,212,191,.55),rgba(139,124,248,.5),rgba(45,212,191,0));
  animation:spin 26s linear infinite}
.swirl.s2{width:520px;height:520px;bottom:-220px;left:-160px;
  background:conic-gradient(from 120deg,rgba(255,122,92,0),rgba(255,122,92,.5),rgba(255,194,75,.45),rgba(255,122,92,0));
  animation:spin 34s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

nav{position:sticky;top:0;z-index:60;background:rgba(7,9,15,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--panel-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:'Fraunces',serif;font-weight:750;font-size:28px;color:var(--text);letter-spacing:.02em}
.logo span{background:linear-gradient(120deg,var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--text-soft);font-size:15px;font-weight:600;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-cta{background:linear-gradient(120deg,var(--teal-deep),var(--teal));color:#04211D!important;padding:11px 20px;border-radius:999px;font-weight:700}
.nav-cta:hover{filter:brightness(1.1)}
.menu-btn{display:none;background:none;border:0;color:var(--text);font-size:26px;cursor:pointer}

footer{padding:56px 0;border-top:1px solid var(--panel-line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:14px;color:var(--text-soft)}
footer b{color:var(--text)}
.legal{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.legal a{color:var(--text-soft)}
.legal a:hover{color:var(--text)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i,0)*70ms)}
.reveal.on{opacity:1;transform:none}

.eng-hero{padding:80px 0 60px;position:relative;overflow:hidden;background:var(--bg)}
.eng-hero .wrap{position:relative;z-index:2}
.eng-hero h1{font-size:clamp(38px,6vw,64px);font-weight:750;line-height:1.04;margin:16px 0 14px;letter-spacing:-.01em}
.eng-hero h1 .grad{background:linear-gradient(110deg,var(--teal) 5%,var(--violet) 45%,var(--coral) 80%,var(--gold) 105%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%}
.eng-hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--text-soft);max-width:640px;margin-bottom:32px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px}
.card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--panel-line);border-radius:18px;padding:26px 24px}
.card .stage{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.card h3{margin:10px 0 8px;font-size:19px}
.card p{color:var(--text-soft);font-size:14.5px}

@media (max-width:860px){
  .menu-btn{display:block}
  /* height is set explicitly (not left to the top+bottom stretch) because
     that combined with position:fixed + display:flex + transform rendered as
     a single content-row-tall box in real testing instead of filling to the
     viewport bottom, cutting the drawer off after one link. */
  .nav-links{position:fixed;top:72px;left:0;right:0;height:calc(100vh - 72px);background:var(--bg);flex-direction:column;align-items:flex-start;padding:28px 24px;gap:0;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{width:100%;padding:14px 0;border-bottom:1px solid var(--panel-line)}
  .nav-cta{margin-top:16px;text-align:center}
}