/* ============================================================
   Jump Zone Studio — Website UI Kit styles
   Pairs with ../../colors_and_type.css (tokens) loaded first.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--page-black);
  color: var(--fg1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--energy-green); }

.shell { max-width: 1600px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px){ .shell { padding: 0 24px; } }
@media (min-width: 1024px){ .shell { padding: 0 32px; } }

/* ---- buttons ---- */
.jbtn { position: relative; min-height: 56px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; clip-path: var(--clip-apex); border: 0; background: none;
  transition: transform var(--dur-press) var(--ease-out-strong); }
.jbtn:active { transform: scale(0.97); }
.jbtn.full { width: 100%; }
.jbtn .inr { position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; width: 100%; padding: 0 26px; gap: 14px; }
.jbtn .slash { font-weight: 800; font-style: italic; font-size: 14px; letter-spacing: -0.04em; flex-shrink: 0; }
.jbtn .lbl { flex: 1; text-align: center; font-family: var(--font-sans); font-weight: 900;
  font-style: italic; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; white-space: nowrap; }
.jbtn .ic { display: inline-flex; flex-shrink: 0; }

.jbtn-primary { background: var(--energy-green); min-width: 180px; }
.jbtn-primary .lbl, .jbtn-primary .ic { color: #0A0A0A; }
.jbtn-primary .slash { color: rgba(10,10,10,0.3); }
.jbtn-primary::after { content:""; position:absolute; inset:0; background:var(--energy-green);
  filter: blur(22px); opacity:0; transition: opacity .3s; z-index:-1; }
.jbtn-primary:hover { background: var(--green-hover); }
.jbtn-primary:hover::after { opacity: 1; }
.jbtn-primary:active { background: var(--green-active); }

.jbtn-secondary { min-width: 180px; }
.jbtn-secondary .brd { position:absolute; inset:0; background:#161616; clip-path:var(--clip-apex); transition: background var(--dur-base); }
.jbtn-secondary .fil { position:absolute; inset:2px; background:#161616; clip-path:var(--clip-apex); transition: background var(--dur-base); }
.jbtn-secondary:hover .brd { background:#202020; }
.jbtn-secondary:hover .fil { background:#202020; }
.jbtn-secondary .lbl { color:#fff; }
.jbtn-secondary .slash { color:rgba(255,255,255,0.55); }
.jbtn-secondary .ic { color:#fff; transition: color var(--dur-base); }
.jbtn-secondary:hover .ic { color:#fff; }

/* header button (compact) */
.hbtn { position:relative; min-width:150px; padding:10px 20px; clip-path:var(--clip-apex);
  background:var(--energy-green); border:0; cursor:pointer; font-family:var(--font-sans);
  font-weight:900; font-style:italic; text-transform:uppercase; font-size:12px; letter-spacing:0.06em;
  color:#0A0A0A; transition: background var(--dur-base), transform var(--dur-press); }
.hbtn:hover { background:var(--green-hover); }
.hbtn:active { transform: scale(0.97); background: var(--green-active); }

/* icon button */
.icbtn { position:relative; width:40px; height:40px; display:inline-flex; align-items:center;
  justify-content:center; clip-path:var(--clip-micro); cursor:pointer; border:0; background:none;
  transition: transform var(--dur-press); }
.icbtn:active { transform: scale(0.95); }
.icbtn .brd { position:absolute; inset:0; background:rgba(255,255,255,0.08); clip-path:var(--clip-micro); }
.icbtn .fil { position:absolute; inset:1px; background:rgba(255,255,255,0.06); clip-path:var(--clip-micro); transition: background var(--dur-base); }
.icbtn:hover .fil { background:rgba(255,255,255,0.10); }
.icbtn .ic { position:relative; z-index:2; color:var(--fg2); transition: color var(--dur-base); }
.icbtn:hover .ic { color:#fff; }

/* light primary — dark button for use on green surfaces (CTA) */
.lpbtn { position:relative; width:100%; min-height:56px; display:inline-flex; align-items:center; justify-content:center;
  clip-path:var(--clip-apex); border:0; cursor:pointer; background:var(--deep-black);
  transition: background var(--dur-base), transform var(--dur-press); }
.lpbtn:hover { background:#141414; }
.lpbtn:active { transform:scale(0.97); background:#000; }
.lpbtn .inr { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:0 26px; gap:14px; color:var(--energy-green); transition:color var(--dur-base); }
.lpbtn:hover .inr { color:#fff; }
.lpbtn .slash { font-weight:800; font-style:italic; font-size:14px; letter-spacing:-0.04em; color:rgba(168,255,0,0.4); flex-shrink:0; }
.lpbtn:hover .slash { color:rgba(255,255,255,0.4); }
.lpbtn .lbl { flex:1; text-align:center; font-family:var(--font-sans); font-weight:900; font-style:italic;
  text-transform:uppercase; font-size:14px; letter-spacing:0.05em; white-space:nowrap; }
.lpbtn .ic { display:inline-flex; flex-shrink:0; }

/* ---- eyebrow ---- */
.eyebrow { font-family:var(--font-mono); font-weight:700; text-transform:uppercase; font-size:13px;
  letter-spacing:0.25em; color:var(--energy-green); }

/* ---- chamfer panel helpers ---- */
.cham-border { position:absolute; inset:0; clip-path:var(--clip-card); }
.cham-fill { position:absolute; inset:1px; clip-path:var(--clip-card); }

/* ---- language pill ---- */
.lang { display:inline-flex; align-items:center; background:rgba(255,255,255,0.04); padding:3px;
  border-radius:9999px; border:1px solid rgba(255,255,255,0.06); gap:2px; }
.lang .gl { padding:0 4px 0 8px; color:var(--fg3); display:flex; }
.lang button { font-family:var(--font-mono); font-weight:700; font-size:10px; padding:4px 8px;
  border-radius:9999px; border:0; cursor:pointer; background:transparent; color:var(--fg3); transition: all var(--dur-base); }
.lang button.on { background:var(--energy-green); color:#0A0A0A; }
.lang button:not(.on):hover { color:#fff; }

/* reveal */
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.rise { animation: rise var(--dur-reveal) var(--ease-out-strong) both; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}