/* ============================================
   Cyberonium: site-wide refinements
   Loaded after page styles so these win.
   ============================================ */

/* ---------- Logo mark ---------- */
.cb-mark{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.cb-mark img{ display:block; object-fit:contain; height:auto; max-width:none; }

/* ---------- Kicker numbers (dash removed) ---------- */
.kicker-no{
  color: var(--muted);
  margin-right: .15rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Images ---------- */
.img-frame{
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 oklch(1 0 0 / .7) inset, 0 12px 30px -22px oklch(0.2 0.02 245 / .45);
}
.article-card .img-frame,
#portfolio .img-frame{ transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.article-card:hover .img-frame,
#portfolio .glass:hover .img-frame,
#portfolio .bg-\[var\(--bg\)\]:hover .img-frame{ transform: scale(1.015); filter: saturate(1.1); }
.article-card, #portfolio > div{ overflow: hidden; }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-ghost{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  min-height: 44px;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* Primary: solid ink with an emerald signal */
.btn-primary{
  color: #fff;
  background: linear-gradient(180deg, oklch(0.27 0.018 245) 0%, oklch(0.17 0.015 245) 100%);
  border: 1px solid oklch(0.13 0.015 245);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .16) inset,
    0 -1px 0 oklch(0 0 0 / .25) inset,
    0 10px 24px -12px oklch(0.2 0.02 245 / .65);
}
.btn-primary::after{
  content: "";
  width: 14px; height: 14px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.5 7h9M7.5 3l4 4-4 4' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.5 7h9M7.5 3l4 4-4 4' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  opacity: .75;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, oklch(0.3 0.02 245) 0%, oklch(0.19 0.016 245) 100%);
  box-shadow:
    0 1px 0 oklch(1 0 0 / .2) inset,
    0 0 0 4px oklch(0.72 0.17 152 / .16),
    0 14px 30px -12px oklch(0.2 0.02 245 / .7);
}
.btn-primary:hover::after{ transform: translateX(3px); opacity: 1; }
.btn-primary:active{ transform: translateY(0) scale(.985); }
.btn-primary .dot{
  width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0;
  background: oklch(0.8 0.18 152);
  box-shadow: 0 0 0 3px oklch(0.72 0.17 152 / .28), 0 0 12px oklch(0.78 0.18 152 / .8);
}

/* Ghost: clean outline that firms up on hover */
.btn-ghost{
  color: var(--ink);
  background: oklch(1 0 0 / .7);
  border: 1px solid oklch(0.84 0.01 245);
  box-shadow: 0 1px 0 oklch(1 0 0 / .9) inset, 0 6px 16px -12px oklch(0.2 0.02 245 / .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 1px 0 oklch(1 0 0 / .9) inset, 0 10px 22px -14px oklch(0.2 0.02 245 / .5);
}
.btn-ghost:active{ transform: translateY(0) scale(.985); }
.btn-ghost svg{ transition: transform .25s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; }
.btn-ghost:hover svg{ transform: translate(2px,-2px); }

/* Compact buttons inside inputs / small UI keep their size */
.btn-primary.\!py-2,
.btn-primary.\!py-1\.5,
.btn-ghost.\!py-1\.5,
.btn-ghost.\!py-2{ min-height: 0; }
.btn-primary.\!py-2::after{ width: 12px; height: 12px; }
form .btn-primary.absolute::after{ display: none; }

/* Inline link-button: used for "Apply" and "Read note" */
.btn-link{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: oklch(1 0 0 / .7);
  color: var(--ink);
  font-size: 12.5px; font-weight: 500; line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn-link svg{ transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn-link:hover{ background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-link:hover svg{ transform: translateX(2px); }
.btn-link-sm{ padding: .4rem .7rem; font-size: 11.5px; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; }
.btn-link-sm:hover svg{ transform: translate(2px,-2px); }

/* Filter tabs + segmented controls read as buttons too */
.filter-tab, .seg{ min-height: 36px; }

/* ---------- Focus ---------- */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-link:focus-visible,
.filter-tab:focus-visible,
.seg:focus-visible,
a:focus-visible,
button:focus-visible{
  outline: 2px solid oklch(0.62 0.17 152);
  outline-offset: 3px;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px){
  .btn-primary, .btn-ghost{ padding: .7rem 1.05rem; font-size: .875rem; }
  header nav .btn-primary::after{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .btn-primary, .btn-ghost, .btn-link, .img-frame, .btn-primary::after{ transition: none !important; }
}

/* ---------- Partners section typography ---------- */
#team article .avatar .initials{
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(56px, 6.5vw, 92px);
  letter-spacing: -0.055em;
  padding-bottom: 16%;
  background: linear-gradient(180deg, oklch(0.36 0.014 245), oklch(0.2 0.015 245));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
#team article .avatar .corner{ font-size: 11px; }
#team article .font-display{
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
#team article .mono{ font-size: 10.5px; letter-spacing: .1em; color: var(--ink-2); }
#team article p{
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 34ch;
}
#team .glass .font-display{
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
#team .glass .num{
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
}


/* ---------- Form sending states ---------- */
.cb-form-msg{
  grid-column: 1 / -1;
  margin-top: .25rem;
  font-size: 13px; line-height: 1.5;
  padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid oklch(0.8 0.1 25 / .6);
  background: oklch(0.97 0.02 25);
  color: oklch(0.42 0.14 25);
}
.cb-form-msg.ok{
  border-color: oklch(0.78 0.18 152 / .5);
  background: oklch(0.97 0.03 152);
  color: oklch(0.4 0.1 152);
}
button[disabled].btn-primary{ opacity: .7; cursor: progress; transform: none; }
.cb-hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }