/* ============================================================
   ARCHAX — Design System
   Concept: the archaeopteryx — first flight between the old
   world (traditional assets) and the new (on-chain).
   Palette: midnight navy + wing-gold, with data-teal & parchment.
   ============================================================ */

:root {
  --ink: #0A0B1E;          /* deepest background            */
  --midnight: #12163A;     /* primary navy (from logo)      */
  --slate: #1B2050;        /* raised surface                */
  --slate-2: #262C63;      /* hover / border                */
  --parchment: #ECEADD;    /* archival light surface        */
  --parchment-2: #E1DECE;  /* light border                  */
  --gold: #C6A15B;         /* wing gold — the one accent    */
  --gold-hi: #E4C98A;      /* gold highlight for gradients  */
  --teal: #79E0C6;         /* on-chain / positive data      */
  --paper-ink: #14183E;    /* text on parchment             */
  --fog: #F0EEE6;          /* warm white text on dark       */
  --muted: #A6A9C9;        /* muted text on dark            */
  --muted-2: #6E7299;      /* faint text / captions         */
  --line: rgba(198,161,91,.22); /* hairline gold            */
  --line-soft: rgba(240,238,230,.08);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- daisyUI custom dark theme override ------------------- */
[data-theme="archax"] {
  --p:  72% 0.075 84;    --pc: 18% 0.04 275;   /* primary = gold      */
  --s:  84% 0.10 172;    --sc: 20% 0.05 200;   /* secondary = teal    */
  --a:  80% 0.09 84;     --ac: 18% 0.04 275;   /* accent = gold-hi    */
  --n:  22% 0.05 272;    --nc: 92% 0.01 90;    /* neutral = slate     */
  --b1: 12% 0.035 272;   --b2: 17% 0.045 272;  --b3: 22% 0.05 272;
  --bc: 92% 0.008 90;                          /* base content        */
  --in: 70% 0.12 235;    --inc: 15% 0 0;
  --su: 78% 0.12 165;    --suc: 18% 0.04 165;
  --wa: 82% 0.12 80;     --wac: 20% 0.04 80;
  --er: 62% 0.19 25;     --erc: 96% 0 0;
  --rounded-box: .9rem;  --rounded-btn: .55rem; --rounded-badge: 2rem;
  --animation-btn: .2s;  --border-btn: 1px;     --tab-radius: .5rem;
}

/* ============================================================
   Base
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--fog);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

::selection { background: var(--gold); color: var(--ink); }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); }

a { color: inherit; text-decoration: none; }

/* faint fossil-grain background texture on the ink */
.bg-ink       { background: var(--ink); }
.bg-midnight  { background: var(--midnight); }
.bg-slate     { background: var(--slate); }
.bg-parchment { background: var(--parchment); color: var(--paper-ink); }

.aurora {
  position: relative;
  background:
    radial-gradient(60% 60% at 78% -5%, rgba(198,161,91,.16), transparent 60%),
    radial-gradient(50% 50% at 8% 10%, rgba(121,224,198,.07), transparent 60%),
    var(--ink);
}

.container-x { max-width: 1240px; margin-inline: auto; padding-inline: 1.5rem; }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* ============================================================
   Eyebrow + feather rule (structural signatures)
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7;
}

/* thin gold hairline with a small wing glyph at centre */
.feather-rule {
  display: flex; align-items: center; gap: 1rem;
  color: var(--gold); opacity: .55;
}
.feather-rule::before, .feather-rule::after {
  content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold));
}
.feather-rule::after { background: linear-gradient(90deg, var(--gold), transparent); }

.gold-text {
  background: linear-gradient(92deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-gold {
  display: inline-flex; align-items: center; gap: .55rem;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #1a1608; font-weight: 600; font-size: .92rem;
  padding: .8rem 1.5rem; border-radius: .55rem;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
  box-shadow: 0 8px 24px -10px rgba(198,161,91,.6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(198,161,91,.7); filter: brightness(1.04); }
.btn-ghost-line {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: .55rem;
  border: 1px solid var(--line); color: var(--fog); font-weight: 500; font-size: .92rem;
  transition: border-color .2s, background .2s, transform .2s;
}
.btn-ghost-line:hover { border-color: var(--gold); background: rgba(198,161,91,.06); transform: translateY(-2px); }

/* ============================================================
   Cards
   ============================================================ */
.card-arch {
  position: relative;
  background: linear-gradient(180deg, rgba(27,32,80,.55), rgba(18,22,58,.5));
  border: 1px solid var(--line-soft);
  border-radius: 1rem;
  padding: 1.9rem;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  overflow: hidden;
}
.card-arch::after {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), transparent); transition: width .4s var(--ease);
}
.card-arch:hover {
  transform: translateY(-5px);
  border-color: var(--line);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.8);
}
.card-arch:hover::after { width: 100%; }

.icon-chip {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: .7rem; color: var(--gold);
  background: radial-gradient(120% 120% at 30% 20%, rgba(198,161,91,.22), rgba(198,161,91,.05));
  border: 1px solid var(--line);
}
.icon-chip svg { width: 22px; height: 22px; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10,11,30,.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav-link {
  position: relative; font-size: .9rem; color: var(--muted); padding: .35rem 0;
  transition: color .2s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gold); transition: width .25s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--fog); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.logo-badge {
  display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-display);
}
.logo-badge img { width: 42px; height: 42px; object-fit: contain; }
.logo-badge .name { font-size: 1.25rem; letter-spacing: .18em; font-weight: 600; }

.fca-tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  color: var(--teal); border: 1px solid rgba(121,224,198,.3);
  padding: .18rem .45rem; border-radius: 4px; text-transform: uppercase;
  display: inline-flex; gap: .3rem; align-items: center;
}

/* language dropdown */
.lang-dropdown {
  position:absolute; right:0; margin-top:.5rem; padding:.5rem;
  background: var(--midnight); border:1px solid var(--line-soft);
  border-radius:.9rem; box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  display:none; z-index:70;
}
#langWrap.open .lang-dropdown { display:block; animation: pop .2s var(--ease); }
.lang-menu {
  max-height: 320px; overflow-y: auto; width: 230px;
  scrollbar-width: thin; scrollbar-color: var(--slate-2) transparent;
}
.lang-menu::-webkit-scrollbar { width: 6px; }
.lang-menu::-webkit-scrollbar-thumb { background: var(--slate-2); border-radius: 3px; }
.lang-item { display:flex; justify-content:space-between; gap:.5rem; padding:.5rem .8rem; border-radius:.4rem; font-size:.85rem; color:var(--muted); cursor:pointer; }
.lang-item:hover { background: rgba(198,161,91,.1); color: var(--fog); }
.lang-item.active { color: var(--gold); }
.lang-item small { font-family: var(--font-mono); color: var(--muted-2); }

/* mobile drawer */
.mobile-panel { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.mobile-panel.open { visibility: visible; }
.mobile-panel .scrim { position:absolute; inset:0; background:rgba(5,6,16,.6); opacity:0; transition:opacity .3s; }
.mobile-panel.open .scrim { opacity:1; }
.mobile-panel .sheet {
  position:absolute; top:0; right:0; height:100%; width:min(86%,340px);
  background: var(--midnight); border-left:1px solid var(--line-soft);
  transform: translateX(100%); transition: transform .35s var(--ease);
  padding: 1.4rem; display:flex; flex-direction:column; gap:.4rem;
}
.mobile-panel.open .sheet { transform: translateX(0); }
.mobile-panel .sheet a { padding:.85rem .4rem; border-bottom:1px solid var(--line-soft); font-size:1.05rem; color:var(--fog); }

/* ============================================================
   Stats / data
   ============================================================ */
.stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem,4vw,2.9rem); line-height:1; color: var(--fog); }
.stat-label { font-size:.82rem; color: var(--muted); margin-top:.5rem; }

/* ============================================================
   Timeline (real chronological sequence — About page)
   ============================================================ */
.tl { position: relative; }
.tl::before { content:""; position:absolute; left:15px; top:6px; bottom:6px; width:1px; background: linear-gradient(var(--gold), var(--line-soft)); }
.tl-item { position: relative; padding-left: 3.2rem; padding-bottom: 2.2rem; }
.tl-dot { position:absolute; left:8px; top:4px; width:15px; height:15px; border-radius:50%; background: var(--ink); border:2px solid var(--gold); }
.tl-item.milestone .tl-dot { background: var(--gold); box-shadow:0 0 0 5px rgba(198,161,91,.18); }
.tl-year { font-family: var(--font-mono); color: var(--gold); font-size:.8rem; letter-spacing:.1em; }

/* ============================================================
   Video frame (hero "specimen")
   ============================================================ */
.specimen {
  position: relative; border-radius: 1rem; overflow: hidden;
  border: 1px solid var(--line); background: var(--midnight);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
/* contain = show the full video, letterbox with bg colour */
.specimen video {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--midnight);
}
.specimen .corner { position:absolute; width:16px; height:16px; border:1px solid var(--gold); opacity:.7; }
.specimen .corner.tl { top:12px; left:12px; border-right:0; border-bottom:0; }
.specimen .corner.tr { top:12px; right:12px; border-left:0; border-bottom:0; }
.specimen .corner.bl { bottom:12px; left:12px; border-right:0; border-top:0; }
.specimen .corner.br { bottom:12px; right:12px; border-left:0; border-top:0; }
/* Controls row — both buttons share the same base style */
.vid-controls {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  display: flex; gap: 8px; align-items: center;
}
.vid-ctl {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10,11,30,.6); border: 1px solid var(--line); color: var(--fog);
  backdrop-filter: blur(6px); cursor: pointer;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.vid-ctl:hover { background: rgba(198,161,91,.25); transform: scale(1.06); }

/* ============================================================
   Forms / modal
   ============================================================ */
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:.8rem; color: var(--muted); }
.field input {
  background: rgba(10,11,30,.6); border:1px solid var(--line-soft); border-radius:.55rem;
  padding:.7rem .9rem; color: var(--fog); font-size:.92rem; transition: border-color .2s, background .2s;
  width:100%;
}
.field input:focus { outline:none; border-color: var(--gold); background: rgba(10,11,30,.85); }

/* custom selects replace native OS dropdown panels */
.select-ui { position:relative; display:inline-block; vertical-align:middle; max-width:100%; }
.select-ui-native { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; overflow:hidden!important; }
.select-ui-trigger {
  width:100%; min-height:2.55rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.62rem .82rem; border:1px solid var(--line-soft); border-radius:.55rem;
  background:linear-gradient(180deg,rgba(18,22,58,.96),rgba(10,11,30,.96));
  color:var(--fog); font-family:var(--font-body); font-size:.86rem; line-height:1.2; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03); transition:border-color .2s, box-shadow .2s, background .2s;
}
.select-ui-trigger:hover { border-color:var(--line); background:linear-gradient(180deg,rgba(27,32,80,.98),rgba(12,14,38,.98)); }
.select-ui.open .select-ui-trigger, .select-ui-trigger:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(198,161,91,.12), inset 0 1px 0 rgba(255,255,255,.04); }
.select-ui-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.select-ui-caret { color:var(--gold); font-size:.78rem; line-height:1; transition:transform .2s var(--ease); }
.select-ui.open .select-ui-caret { transform:rotate(180deg); }
.select-ui-menu {
  display:none; position:absolute; z-index:120; left:0; right:0; top:calc(100% + .35rem);
  max-height:230px; overflow:auto; padding:.35rem; border:1px solid var(--line); border-radius:.7rem;
  background:linear-gradient(180deg,rgba(18,22,58,.98),rgba(10,11,30,.99));
  box-shadow:0 24px 56px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
}
.select-ui.open .select-ui-menu { display:block; }
.select-ui.drop-up .select-ui-menu { top:auto; bottom:calc(100% + .35rem); }
.select-ui-portal {
  min-width:120px; pointer-events:auto;
}
.select-ui-option {
  width:100%; border:0; border-radius:.48rem; background:transparent; color:var(--muted);
  padding:.68rem .75rem; text-align:left; cursor:pointer; font-size:.86rem; line-height:1.2;
  transition:background .16s, color .16s;
}
.select-ui-option:hover { background:rgba(198,161,91,.12); color:var(--gold-hi); }
.select-ui-option.selected { background:linear-gradient(90deg,rgba(198,161,91,.24),rgba(121,224,198,.10)); color:var(--fog); }
.select-ui-option.selected::before { content:""; display:inline-block; width:.4rem; height:.4rem; border-radius:50%; background:var(--teal); margin-right:.55rem; vertical-align:.08rem; }
.select-ui-menu::-webkit-scrollbar { width:8px; }
.select-ui-menu::-webkit-scrollbar-thumb { background:rgba(198,161,91,.35); border-radius:999px; }

.modal-scrim { position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:1.2rem;
  background: rgba(5,6,16,.72); backdrop-filter: blur(6px); }
.modal-scrim.open { display:grid; }
.modal-card {
  width:min(440px,100%); background: linear-gradient(180deg, var(--midnight), var(--ink));
  border:1px solid var(--line); border-radius:1.1rem; padding:2rem;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  animation: pop .3s var(--ease);
}
@keyframes pop { from { opacity:0; transform: translateY(14px) scale(.98); } }
.auth-tab { flex:1; text-align:center; padding:.6rem; font-size:.92rem; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition: color .2s, border-color .2s; }
.auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.badge { font-family:var(--font-body); font-size:.7rem; line-height:1; min-height:1.45rem; padding:.22rem .55rem; border-radius:5px; letter-spacing:.02em; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.badge-gold { background:rgba(198,161,91,.14); color:var(--gold); border:1px solid rgba(198,161,91,.3); }
.badge-info { background:rgba(125,211,252,.12); color:#7dd3fc; border:1px solid rgba(125,211,252,.3); }
.badge-ok { background:rgba(121,224,198,.14); color:var(--teal); border:1px solid rgba(121,224,198,.3); }
.badge-no { background:rgba(248,113,113,.14); color:#f87171; border:1px solid rgba(248,113,113,.3); }
.btn-mini { font-family:var(--font-body); font-size:.76rem; padding:.45rem .75rem; border-radius:.45rem; border:1px solid var(--line-soft); color:var(--muted); cursor:pointer; background:linear-gradient(180deg,rgba(38,44,99,.55),rgba(27,32,80,.4)); white-space:nowrap; transition:border-color .2s,color .2s,background .2s; }
.btn-mini:hover { border-color:var(--line); color:var(--fog); }

.archax-announcement {
  position:sticky; top:0; z-index:75; display:flex; align-items:center; justify-content:center; gap:.8rem;
  padding:.62rem 1rem; background:rgba(18,22,58,.96); border-bottom:1px solid var(--line-soft);
  color:var(--fog); font-size:.84rem; text-align:center; backdrop-filter:blur(10px);
}
.archax-announcement strong { color:var(--gold); font-weight:600; }
.archax-announcement span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archax-announcement button { color:var(--muted); border:0; background:transparent; font-size:1.2rem; line-height:1; cursor:pointer; }
.archax-support-widget { position:fixed; right:1.1rem; bottom:1.2rem; z-index:78; touch-action:none; }
.archax-support-bubble {
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; cursor:grab;
  border:1px solid rgba(198,161,91,.45); background:rgba(18,22,58,.58); box-shadow:0 18px 45px rgba(0,0,0,.38);
  backdrop-filter:blur(10px); opacity:.78; transition:opacity .2s, transform .2s, border-color .2s;
}
.archax-support-bubble:hover { opacity:1; transform:translateY(-1px); border-color:var(--gold); }
.archax-support-bubble img { width:34px; height:34px; object-fit:contain; pointer-events:none; }
.archax-support-panel {
  position:absolute; right:0; bottom:68px; width:min(340px,calc(100vw - 2rem)); display:none; overflow:hidden;
  border:1px solid var(--line); border-radius:.9rem; background:linear-gradient(180deg,rgba(18,22,58,.98),rgba(10,11,30,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.55); touch-action:auto;
}
.archax-support-panel.open { display:block; }
.archax-support-head { display:flex; align-items:center; justify-content:space-between; padding:.8rem .95rem; border-bottom:1px solid var(--line-soft); color:var(--fog); font-size:.88rem; }
.archax-support-head button { border:0; background:transparent; color:var(--muted); font-size:1.15rem; cursor:pointer; }
.archax-support-messages { max-height:260px; overflow:auto; padding:.9rem; display:grid; gap:.55rem; color:var(--muted); font-size:.82rem; }
.archax-support-messages .user { justify-self:end; max-width:84%; }
.archax-support-messages .admin { justify-self:start; max-width:84%; }
.archax-support-messages span, .archax-support-messages p {
  display:block; padding:.58rem .72rem; border-radius:.68rem; border:1px solid var(--line-soft); background:rgba(38,44,99,.52); color:var(--fog); line-height:1.45;
}
.archax-support-messages .user span { background:rgba(198,161,91,.16); }
.archax-support-form { display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--line-soft); }
.archax-support-form input {
  flex:1; min-width:0; border:1px solid var(--line-soft); border-radius:.55rem; background:rgba(10,11,30,.6);
  color:var(--fog); padding:.62rem .72rem; font-size:.84rem;
}
.archax-support-form button { border:0; border-radius:.55rem; background:var(--gold); color:#1a1608; padding:0 .85rem; font-size:.82rem; cursor:pointer; }

/* ============================================================
   Products
   ============================================================ */
.filter-pill {
  font-family: var(--font-mono); font-size:.78rem; padding:.5rem 1rem; border-radius:2rem;
  border:1px solid var(--line-soft); color:var(--muted); cursor:pointer; transition:.2s;
}
.filter-pill:hover { border-color: var(--line); color: var(--fog); }
.filter-pill.active { background: var(--gold); color:#1a1608; border-color: var(--gold); }

.tier-tag { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; padding:.2rem .5rem; border-radius:4px; text-transform:uppercase; }

/* ============================================================
   Dashboard
   ============================================================ */
.dash-shell { display:grid; grid-template-columns: 260px minmax(0,1fr); min-width:0; min-height:100vh; }
.dash-side { background: var(--midnight); border-right:1px solid var(--line-soft); padding:1.5rem 1rem; position:sticky; top:0; height:100vh; }
.dash-nav-item { display:flex; align-items:center; gap:.8rem; padding:.75rem .9rem; border-radius:.6rem; color:var(--muted); font-size:.92rem; cursor:pointer; transition:.2s; }
.dash-nav-item svg { width:19px; height:19px; }
.dash-nav-item:hover { background: rgba(198,161,91,.07); color: var(--fog); }
.dash-nav-item.active { background: linear-gradient(90deg, rgba(198,161,91,.16), transparent); color: var(--gold); border-left:2px solid var(--gold); }
.dash-main { min-width:0; padding: clamp(1.2rem,3vw,2.4rem); }
.dash-panel { display:none; }
.dash-panel.active { display:block; animation: fadeUp .4s var(--ease); }
@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } }

.range-arch { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px;
  background: var(--slate-2); outline:none; }
.range-arch::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background: linear-gradient(180deg,var(--gold-hi),var(--gold)); cursor:pointer; border:2px solid var(--ink); box-shadow:0 4px 12px -3px rgba(198,161,91,.7); }
.range-arch::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background: var(--gold); cursor:pointer; border:2px solid var(--ink); }

.count-box { font-family: var(--font-mono); font-size:1.6rem; color: var(--gold); background: rgba(10,11,30,.5);
  border:1px solid var(--line-soft); border-radius:.6rem; padding:.6rem .3rem; text-align:center; }

.commission-tier { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-radius:.7rem; border:1px solid var(--line-soft); }

/* ============================================================
   Reveal animation (GSAP adds .is-in; fallback via no-js)
   ============================================================ */
.reveal { opacity:0; transform: translateY(24px); }
.reveal.is-in { opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--midnight); border-top:1px solid var(--line-soft); }
.footer a { color: var(--muted); font-size:.88rem; transition: color .2s; }
.footer a:hover { color: var(--gold); }
.footer h5 { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); margin-bottom:1rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-side { position:fixed; z-index:65; transform:translateX(-100%); transition:transform .3s; width:260px; }
  .dash-side.open { transform:none; }
}
.desk-only { display:flex; }
@media (max-width: 820px){ .desk-only { display:none; } }
.mob-only { display:none; }
@media (max-width: 820px){ .mob-only { display:inline-flex; } }