/* OrcaScale global UI elements
   Source of truth for shared CTA buttons, switches and action rows.
   Use these classes on every page:
   os-btn os-btn-primary
   os-btn os-btn-secondary
   os-btn os-btn-accent
   os-switch
*/

:root{
  --os-bg:#070d18;
  --os-ink:#eef1f5;
  --os-dark:#0a0f18;
  --os-muted:#8a95a4;
  --os-line:rgba(255,255,255,.14);
  --os-accent:#1fb6a6;
  --os-radius:4px;
  --os-pill:999px;
  --os-font:Inter, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.os-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.os-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--os-font);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.005em;
  line-height:1;
  padding:13px 24px;
  border-radius:var(--os-radius);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
  min-height:48px;
}

.os-btn:hover{
  transform:translateY(-1px);
}

.os-btn-primary{
  background:#fff;
  color:var(--os-dark);
  border-color:#fff;
}

.os-btn-primary:hover{
  background:#d8f3ec;
  border-color:#d8f3ec;
}

.os-btn-secondary{
  background:transparent;
  color:var(--os-ink);
  border-color:rgba(255,255,255,.22);
}

.os-btn-secondary:hover{
  color:#fff;
  border-color:#fff;
  background:rgba(255,255,255,.045);
}

.os-btn-accent{
  background:var(--os-accent);
  color:#06110f;
  border-color:var(--os-accent);
}

.os-btn-accent:hover{
  background:#d8f3ec;
  border-color:#d8f3ec;
  color:var(--os-dark);
}

.os-switch{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:4px;
  border:1px solid var(--os-line);
  border-radius:var(--os-pill);
  background:rgba(255,255,255,.045);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.os-switch a{
  min-width:94px;
  text-align:center;
  padding:8px 13px;
  border-radius:var(--os-pill);
  font-size:.82rem;
  font-weight:800;
  color:var(--os-muted);
  transition:.18s;
}

.os-switch a:hover{
  color:var(--os-ink);
  background:rgba(255,255,255,.06);
}

.os-switch a.active,
.os-switch a[aria-current="page"]{
  background:#fff;
  color:var(--os-dark);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

@media(max-width:680px){
  .os-btn{
    width:100%;
  }

  .os-switch{
    display:none;
  }
}