/* CodeSwitch Academy landing v3: the game's menu language for the web.
   Chamfered glass slabs (PanelBox), hex keys (CyberButton), Poppins, cyan + gold on deep navy. */
@font-face { font-family: Poppins; src: url(fonts/Poppins-Medium.woff2) format("woff2"), url(fonts/Poppins-Medium.ttf) format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/Poppins-SemiBold.woff2) format("woff2"), url(fonts/Poppins-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(fonts/Poppins-Bold.woff2) format("woff2"), url(fonts/Poppins-Bold.ttf) format("truetype"); font-weight: 700 800; font-display: swap; }

:root {
  --navy-900: #050c16;
  --navy-800: #0a1726;
  --navy-700: #10243a;
  --navy-600: #173250;
  --cyan: #35e8f5;
  --cyan-soft: #7ff6ff;
  --gold: #ffd86b;
  --amber: #f2b134;
  --orange: #f28c28;
  --green: #3fbf7f;
  --text: #eef6fb;
  --muted: #9fb7c8;
  --ink: #0b1626;          /* dark text on light backgrounds */
  --cut: 16px;             /* chamfer size */
  --rim: rgba(53, 232, 245, 0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Poppins, system-ui, sans-serif;
  color: var(--text);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------- slabs: chamfered panels with a neon rim
   The fill sits on the element (so its backdrop blur sees the page); the rim is a ring-shaped clip on ::before. */
.slab {
  --c: calc(var(--cut) * 1.6);
  --fill: linear-gradient(160deg, rgba(23, 50, 80, 0.78), rgba(8, 22, 38, 0.86));
  --rim-col: var(--rim);
  position: relative;
  padding: 28px 30px;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background: var(--fill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.slab::before, .key::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--rim-col);
}
.slab::before {
  clip-path: polygon(evenodd,
    var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c), var(--c) 0,
    calc(var(--c) + 0.6px) 1.5px, 1.5px calc(var(--c) + 0.6px), 1.5px calc(100% - 1.5px), calc(100% - var(--c) - 0.6px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - var(--c) - 0.6px), calc(100% - 1.5px) 1.5px, calc(var(--c) + 0.6px) 1.5px);
}
.slab::after {                     /* the circuit flash dots across the top, like PanelBox */
  content: "";
  position: absolute;
  top: 9px;
  right: 22px;
  width: 38px;
  height: 4px;
  background: radial-gradient(circle, var(--cyan) 1.6px, transparent 2px) 0 0 / 10px 4px repeat-x;
  opacity: 0.8;
}

/* ---------------------------------------------------------------- hex keys */
.key {
  --k-fill: linear-gradient(180deg, #ffe08a, #f2a630);
  --rim-col: #fff3c2;
  --k-text: #2a1600;
  --k-h: 58px;
  --p: calc(var(--k-h) * 0.32);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--k-h);
  padding: 0 calc(var(--k-h) * 0.55);
  font: 700 17px/1 Poppins, sans-serif;
  letter-spacing: 0.01em;
  color: var(--k-text);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  background: var(--k-fill);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, 100% 50%, calc(100% - var(--p)) 100%, var(--p) 100%, 0 50%);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.key::before {
  clip-path: polygon(evenodd,
    var(--p) 0, calc(100% - var(--p)) 0, 100% 50%, calc(100% - var(--p)) 100%, var(--p) 100%, 0 50%, var(--p) 0,
    calc(var(--p) + 1px) 2px, 2.5px 50%, calc(var(--p) + 1px) calc(100% - 2px), calc(100% - var(--p) - 1px) calc(100% - 2px),
    calc(100% - 2.5px) 50%, calc(100% - var(--p) - 1px) 2px, calc(var(--p) + 1px) 2px);
}
.key:hover { transform: translateY(-2px); filter: brightness(1.08); }
.key:active { transform: translateY(1px); }
.key:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.key.cyan { --k-fill: linear-gradient(180deg, rgba(20, 60, 86, 0.92), rgba(10, 32, 52, 0.95)); --rim-col: var(--cyan); --k-text: var(--text); }
.key.green { --k-fill: linear-gradient(180deg, #4fd99a, #23966a); --rim-col: #b9ffe0; --k-text: #04261a; }
.key.ghost { --k-fill: rgba(255, 255, 255, 0.75); --rim-col: rgba(11, 22, 38, 0.4); --k-text: var(--ink); }
.key.small { --k-h: 44px; font-size: 15px; white-space: nowrap; }
.key svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px clamp(16px, 4vw, 48px);
}
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: 0.02em; }
.brand img { width: 40px; height: auto; }
.brand b { color: var(--orange); font-weight: 800; }
.brand span { color: var(--cyan-soft); }
.nav .links { display: flex; gap: 26px; margin-left: 14px; }
.nav .links a { white-space: nowrap; text-decoration: none; font-size: 15px; color: var(--muted); font-weight: 500; }
.nav .links a:hover { color: var(--text); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav .signin { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--text); }

/* ---------------------------------------------------------------- shared hero pieces */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.hero canvas.stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .poster { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.6s; }
.no3d .hero .poster { opacity: 1; }
.has3d .hero canvas.stage { animation: fadein 0.9s ease both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-soft);
  background: rgba(53, 232, 245, 0.1);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; margin: 18px 0 16px; }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 28px; max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust span::before { content: ""; width: 8px; height: 8px; background: var(--cyan); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

.mock-tag {
  position: fixed; left: 12px; bottom: 12px; z-index: 50;
  font: 600 12px Poppins, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 4px;
}

@media (max-width: 1120px) {
  .nav .links { display: none; }
}
@media (max-width: 900px) {
  .nav .signin { display: none; }
}
@media (max-width: 520px) {
  .nav .right .key { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}