/* EdilRobotics D · Fusion — shared layer for Marketplace, Intelligence and Academy pages.
   Load after base.css. Colour roles: blue #2F5EFF (logo) = brand and action · lime = energy and selection on dark/blue ·
   violet = geography · coral = data missing or not verified. Archivo for headlines, Inter for UI, Plex Mono for data. */
:root {
  --blue: #2F5EFF; --blue-deep: #1F47E0; --blue-ink: #10237A; --navy: #08103A;
  --paper: #F4F3EE; --white: #FFFFFF; --graphite: #22262F; --line: #DCDBD3; --muted: #4A5063; --soft: #ECF0FF;
  --hair-w: rgba(255, 255, 255, .22); --violet-d: #4F2FE8;
}
body { background: var(--paper); color: var(--ink); font: 400 16px/1.55 Inter, system-ui, sans-serif; }
.wrap { width: min(1360px, 100% - 32px); margin-inline: auto; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
.x { font-family: Archivo, Inter, sans-serif; font-weight: 800; letter-spacing: -.025em; line-height: .92; }
.x .c, .c { font-stretch: 62%; font-weight: 900; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.muted { color: var(--muted); }
.er-mark { display: block; overflow: visible; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--soft); color: var(--blue-ink); vertical-align: 2px; }
.tag.demo { background: #FFF1D6; color: #6B4300; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 12px; border: 1.5px solid transparent; font: 700 15px Archivo, sans-serif; font-stretch: 108%; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .3s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: var(--blue-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-line:hover { background: var(--ink); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { background: var(--blue); }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* status marks */
.nv { display: inline-flex; align-items: center; gap: 6px; }
.nv::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--coral); flex: none; }
.na { color: #A8341C; font-style: normal; }

/* header */
.nav { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font: 800 20px/1 Archivo, sans-serif; font-stretch: 112%; letter-spacing: -.015em; }
.brand .er-mark { width: 30px; height: 30px; color: var(--blue); }
.brand small { font: 500 11px var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.nav nav { margin-left: auto; }
.nav ul { display: flex; gap: 26px; font-size: 15px; font-weight: 500; align-items: center; }
.nav ul a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav ul a:hover { color: var(--blue); }
.nav ul a[aria-current] { color: var(--blue); border-bottom-color: var(--blue); }
.nav .acts { display: flex; gap: 10px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--ink); background: none; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; }
.sheet-nav { display: none; }

/* page head */
.phead { padding: 44px 0 28px; }
.phead h1 { font-size: clamp(44px, 6vw, 96px); }
.phead p { margin-top: 14px; max-width: 44em; color: var(--muted); font-size: 17px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: inherit; }
.crumbs span[aria-hidden] { opacity: .5; }

/* search field */
.sfield { display: flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--blue); border-radius: 14px; padding: 5px 5px 5px 16px; transition: box-shadow .3s var(--ease); }
.sfield:focus-within { box-shadow: 0 0 0 4px rgba(47, 94, 255, .18); }
.sfield svg { width: 20px; height: 20px; flex: none; color: var(--blue); }
.sfield input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; font-size: 17px; outline: none; }
.sfield input::placeholder { color: #5F6577; }

/* footer */
.foot { background: var(--ink); color: #C7CBD8; padding: 56px 0 36px; font-size: 14px; margin-top: 120px; }
.foot .g12 { row-gap: 28px; }
.foot .c1 { grid-column: 1 / 5; } .foot .c2 { grid-column: 6 / 8; } .foot .c3 { grid-column: 8 / 10; } .foot .c4 { grid-column: 10 / 13; }
.foot .brand { color: #fff; margin-bottom: 14px; }
.foot h3 { font: 500 11.5px var(--mono); color: #9AA1B6; margin-bottom: 12px; }
.foot li { margin: 6px 0; }
.foot a { color: #fff; }
.foot .cred li { font-size: 12.5px; }

@media (max-width: 1100px) {
  .nav ul { display: none; }
  .menu-btn { display: inline-flex; }
  .nav .acts { margin-left: auto; }
  .nav .acts .btn-line { display: none; }
  .sheet-nav { position: fixed; inset: 68px 0 auto; z-index: 39; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 16px 20px; }
  .sheet-nav.open { display: block; }
  .sheet-nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); font: 700 20px Archivo; text-decoration: none; }
  .sheet-nav .btn { margin-top: 16px; width: 100%; font-size: 16px; border-bottom: 1.5px solid var(--ink); }
  .foot .c1 { grid-column: 1 / 13; } .foot .c2, .foot .c3 { grid-column: span 6; } .foot .c4 { grid-column: 1 / 13; }
}
@media (max-width: 640px) {
  .nav .wrap { height: 60px; gap: 10px; }
  .sheet-nav { inset: 60px 0 auto; }
  .brand { font-size: 18px; } .brand .er-mark { width: 26px; height: 26px; }
  .nav .btn { height: 42px; padding: 0 14px; font-size: 14px; }
  .menu-btn { width: 42px; height: 42px; }
  .phead { padding: 28px 0 20px; }
  .foot { margin-top: 84px; }
}
@media (max-width: 380px) {
  .nav .brand { font-size: 0 !important; gap: 0; }
  .nav .wrap { gap: 8px; }
  .nav .btn { padding: 0 12px; font-size: 13.5px; }
}