/* =========================================
   BUTTONS & BADGES
========================================= */
.forge-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.1rem;border-radius:14px;font-weight:700;
  background:#ea580c; /* orange-600 */
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:filter .15s ease;
}
.forge-btn:hover{ filter:saturate(1.05); }

/* Secondary button (outline) */
.ghost-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.05rem;border-radius:14px;font-weight:700;
  border:1px solid rgba(148,163,184,.35);
  color:inherit; background:transparent;
}
.ghost-btn:hover{ background:rgba(148,163,184,.06); }

.badge{
  display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;
  border-radius:999px;font-size:.8rem;
  border:1px solid color-mix(in oklab,currentColor,transparent 75%);
}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:999px}

/* =========================================
   CARDS / MOCK / TILT
========================================= */
.anvil-card,.proj{
  position:relative;overflow:hidden;border-radius:22px;
  border:1px solid color-mix(in oklab,currentColor,transparent 80%);
  background:color-mix(in oklab,var(--panel,#fff),transparent 0%);
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  transition:box-shadow .2s ease, transform .2s ease;
}
.anvil-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.05))
}
.proj:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,0,0,.18)}

.card-badge{
  position:absolute;top:14px;left:14px;padding:.4rem .6rem;border-radius:12px;
  font-size:.85rem;font-weight:900;letter-spacing:.5px;background:rgba(15,23,42,.7);color:#fff
}
.card-badge span{color:var(--accent-1)}

.mock{background:linear-gradient(135deg,#e5e7eb,#cbd5e1)}
@media (prefers-color-scheme: dark){.mock{background:linear-gradient(135deg,#0f172a,#1f2937)}}

/* =========================================
   LOGO TICKER
========================================= */
.logo-ticker{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent)}
.logo-ticker .track{display:flex;gap:18px;width:max-content;animation:ticker 18s linear infinite}
.logo-ticker .pill{
  padding:.55rem .8rem;border-radius:999px;font-size:.8rem;font-weight:800;letter-spacing:.08em;
  border:1px solid color-mix(in oklab,currentColor,transparent 80%);opacity:.8
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* =========================================
   INPUTS
========================================= */
.inp{
  width:100%;padding:.9rem 1rem;border-radius:16px;background:transparent;
  border:1px solid color-mix(in oklab,currentColor,transparent 75%);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.inp:focus{outline:none;border-color:var(--accent-1);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent-1),transparent 85%)}

/* =========================================
   MOBILE CTA
========================================= */
.forge-cta{
  display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;
  border-radius:16px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 12px 30px rgba(0,0,0,.25)
}
.i-spark{display:inline-block;width:.7rem;height:.7rem;border-radius:999px;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.25)}

/* =========================================
   TILT
========================================= */
[data-tilt]{transform-style:preserve-3d;will-change:transform}