/* Human Academy: scale, surfaces and controls. Leone: reveal easing. ProToken: identity. */
:root {
  color-scheme:dark; font-family:Manrope,sans-serif; font-size:16px;
  --ink:#1e1e1e; --brand-bg:#1e1e1e; --surface:#222221; --elevated:#2b2a28;
  --white:#f4f2ec; --muted:#c0beb7; --dim:#938e87; --accent:#ef5c3a;
  --action:#c14027; --action-hover:#ad3520; --paper:#f2f0e9; --dark-muted:#57534e;
  --control-line:#706d68; --line:#ffffff21; --line-strong:#ffffff3d; --accent-line:#ef5c3a66; --wash:#ef5c3a0a;
  --accent-on-light:#b03e26; --line-on-light:#bdb9b1;
  --white-wash:#ffffff08; --icon-wash:#ffffff1f; --error:#ffb5a8;
  --dark-line:#1e1e1e38; --ease-control:cubic-bezier(.23,1,.32,1);
  --ease-reveal:cubic-bezier(.22,1,.36,1); --ease-smooth:cubic-bezier(.25,.1,.25,1);
  --fast:200ms; --smooth:300ms; --pill:999px;
  color:var(--white); background:var(--ink);
}
.header { width:min(1220px,calc(100% - 48px)); min-height:74px; margin:20px auto 0; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--brand-bg); border:1px solid var(--line); border-radius:var(--pill); position:sticky; top:16px; z-index:5; }
.brand { display:block; flex-shrink:0; width:190px; height:38px; overflow:hidden; position:relative; }
.brand img { position:absolute; width:270px; height:270px; max-width:none; left:-46px; top:-119px; }
.header-cta,.back { font-size:12px; font-weight:600; padding:11px 18px; border:1px solid var(--line-strong); border-radius:var(--pill); display:flex; align-items:center; gap:15px; text-decoration:none; color:var(--white); transition:border-color var(--fast),background var(--fast); }
.header-cta:hover,.back:hover { border-color:var(--accent); background:var(--white-wash); }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; background:var(--action); color:var(--white); border:1px solid transparent; border-radius:var(--pill); padding:8px 8px 8px 26px; min-height:56px; font:600 14px/1.5 Manrope,sans-serif; text-decoration:none; cursor:pointer; transition:background var(--fast),border-color var(--fast); }
.button>span { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; background:var(--icon-wash); border-radius:50%; font-size:22px; line-height:1; transition:transform var(--smooth) var(--ease-reveal),background var(--smooth); }
.button:hover { background:var(--action-hover); }
.button:hover>span { transform:rotate(-35deg); background:var(--line-strong); }
.icon { display:block; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.secondary { background:transparent; border:1px solid var(--line-strong); color:var(--white); border-radius:var(--pill); font:500 13px/1.5 Manrope,sans-serif; padding:14px 22px; cursor:pointer; transition:border-color var(--fast),background var(--fast); }
.secondary:hover { border-color:var(--accent); background:var(--wash); }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
@media(max-width:767px) {
  .header { width:calc(100% - 24px); margin-top:12px; top:10px; min-height:66px; padding:13px 16px; gap:12px; }
  .header .brand { width:140px; height:28px; }
  .header .brand img { width:199px; height:199px; left:-34px; top:-88px; }
  .header-cta,.back { font-size:10px; padding:10px 12px; gap:8px; }
  .header-cta span { display:none; }
  .button { font-size:12px; min-height:52px; gap:16px; padding:7px 7px 7px 22px; }
  .button>span { width:34px; height:34px; font-size:20px; }
}
@media(max-width:360px) {
  .header { padding-inline:12px; }
  .header .brand { width:124px; height:26px; }
  .header .brand img { width:176px; height:176px; left:-30px; top:-77px; }
  .header-cta,.back { max-width:112px; font-size:9px; padding-inline:10px; }
  .button { gap:12px; font-size:11px; padding-left:18px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }