@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --bg: #03070c;
  --bg-soft: #07111d;
  --panel: rgba(9, 25, 41, .78);
  --panel-2: rgba(7, 16, 28, .92);
  --navy: #06274b;
  --cyan: #20dce2;
  --cyan-soft: #159caf;
  --white: #f5fbff;
  --muted: #8ea0b2;
  --line: rgba(255,255,255,.08);
  --glow: rgba(32, 220, 226, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 70% 7%, rgba(17, 129, 153, .16), transparent 28rem),
    linear-gradient(180deg, #02060a 0%, #04101c 100%);
  color: var(--white);
  font-family: Inter, system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
code { color: var(--cyan); }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  z-index: 999;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 76px);
  background: rgba(2, 7, 12, .72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand img, .footer-brand img {
  width: 44px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.brand div { display: grid; line-height: .92; }
.brand strong {
  font-family: Rajdhani, sans-serif;
  font-size: 1.35rem;
  letter-spacing: .1em;
}
.brand span { font-size: .62rem; letter-spacing: .25em; color: var(--muted); }

.nav { display: flex; gap: 28px; color: #c9d4dc; font-size: .9rem; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: var(--cyan); }
.menu-button {
  display: none;
  border: 0;
  background: transparent;
  color: white;
  font-size: 1.4rem;
}

.hero {
  min-height: 78vh;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(70px, 10vw, 140px) clamp(22px, 7vw, 100px);
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,220,226,.2), rgba(32,220,226,.04) 44%, transparent 70%);
  filter: blur(18px);
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--cyan);
  letter-spacing: .22em;
  font-weight: 700;
  font-size: .78rem;
}
.hero h1 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(4.8rem, 12vw, 11rem);
  line-height: .68;
  letter-spacing: -.045em;
  font-weight: 700;
}
.hero h1 span {
  font-size: .39em;
  letter-spacing: .13em;
  color: #c6d9e8;
}
.lead {
  margin: 34px 0 0;
  color: #b8c7d3;
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid transparent;
}
.button.primary {
  background: linear-gradient(135deg, var(--cyan-soft), var(--cyan));
  color: #031017;
  box-shadow: 0 0 32px rgba(32,220,226,.14);
}
.button.ghost { border-color: var(--line); background: rgba(255,255,255,.025); }
.button:hover { transform: translateY(-1px); }

.hero-mark {
  justify-self: end;
  width: min(36vw, 500px);
  aspect-ratio: 1;
  position: relative;
  opacity: .9;
  filter: drop-shadow(0 0 45px rgba(32,220,226,.12));
}
.hero-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mask-image: radial-gradient(circle, #000 54%, transparent 74%);
}

.section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 90px clamp(22px, 5vw, 70px);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 32px;
}
.section h2 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  letter-spacing: -.02em;
}
.section-note { max-width: 440px; color: var(--muted); font-size: .9rem; line-height: 1.7; }

.roster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.member-card {
  position: relative;
  min-height: 325px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(32,220,226,.02), transparent 35%),
    var(--panel);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.member-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -55px;
  top: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,220,226,.14), transparent 68%);
}
.member-card:hover {
  transform: translateY(-5px);
  border-color: rgba(32,220,226,.34);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.member-top { display: flex; justify-content: space-between; gap: 20px; }
.member-icon {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
}
.member-number {
  color: rgba(255,255,255,.18);
  font-family: Rajdhani, sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
}
.member-card h3 {
  font-family: Rajdhani, sans-serif;
  font-size: 2rem;
  margin: 0 0 3px;
}
.member-role { margin: 0; color: var(--cyan); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.member-bio { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 14px 0 0; }
.member-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.member-links a {
  font-size: .75rem;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #d7e1e8;
}
.member-links a:hover { border-color: var(--cyan); color: var(--cyan); }

.split-section {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
}

.featured-video-section {
  grid-template-columns: 1.35fr .65fr;
}
.feature-card, .quote-card {
  min-height: 340px;
  border-radius: 24px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line);
}
.feature-card {
  background:
    linear-gradient(125deg, rgba(6,39,75,.9), rgba(5,18,31,.78)),
    radial-gradient(circle at top right, rgba(32,220,226,.24), transparent 45%);
}
.feature-card p:not(.eyebrow) { max-width: 620px; color: #aebdca; line-height: 1.75; }
.text-link { display: inline-block; margin-top: 20px; color: var(--cyan); font-weight: 700; }

.quote-card {
  background: linear-gradient(155deg, #06121e, #03080d);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote-mark { color: var(--cyan); font-size: 5rem; line-height: .7; }
.quote-card blockquote {
  margin: 20px 0 12px;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
}
.quote-card p { color: var(--muted); }

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.timeline article {
  position: relative;
  padding: 28px 26px 10px 0;
}
.timeline article:not(:last-child) { border-right: 1px solid var(--line); margin-right: 26px; }
.timeline span { color: var(--cyan); font-family: Rajdhani, sans-serif; font-weight: 700; }
.timeline h3 { margin: 55px 0 10px; font-family: Rajdhani, sans-serif; font-size: 1.7rem; }
.timeline p { margin: 0; color: var(--muted); line-height: 1.65; font-size: .9rem; }

.links-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.links-section > div > p:last-child { color: var(--muted); line-height: 1.7; }
.link-stack { border-top: 1px solid var(--line); }
.link-stack a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-family: Rajdhani, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
}
.link-stack b { color: var(--cyan); font-size: .75rem; letter-spacing: .1em; }

footer {
  max-width: 1320px;
  margin: 30px auto 0;
  padding: 28px clamp(22px, 5vw, 70px) 50px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: .8rem;
}
.footer-brand { display: flex; align-items: center; gap: 10px; color: #dbe7ee; font-weight: 700; letter-spacing: .09em; }
.footer-brand img { width: 34px; border-radius: 10px; }

@media (max-width: 900px) {
  .menu-button { display: block; }
  .nav {
    position: absolute;
    top: 76px;
    right: 18px;
    display: none;
    flex-direction: column;
    gap: 0;
    background: #06111d;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    min-width: 180px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 90px; }
  .hero-mark { width: min(65vw, 360px); justify-self: center; opacity: .5; margin-top: 30px; }
  .roster-grid { grid-template-columns: 1fr 1fr; }
  .split-section, .links-section { grid-template-columns: 1fr; gap: 16px; }
  .timeline { grid-template-columns: 1fr; }
  .timeline article { border-right: 0 !important; border-bottom: 1px solid var(--line); margin-right: 0 !important; padding-bottom: 28px; }
  .timeline h3 { margin-top: 24px; }
}

@media (max-width: 620px) {
  .site-header { padding: 14px 18px; }
  .brand span { display: none; }
  .hero h1 { font-size: clamp(4.5rem, 24vw, 7rem); }
  .section { padding-top: 70px; padding-bottom: 70px; }
  .section-heading { align-items: start; flex-direction: column; }
  .roster-grid { grid-template-columns: 1fr; }
  .member-card { min-height: 290px; }
  footer { align-items: flex-start; gap: 18px; flex-direction: column; }
}


.video-card {
  min-height: 340px;
  border-radius: 24px;
  padding: 10px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 20% 10%, rgba(32,220,226,.10), transparent 34%),
    rgba(5, 14, 24, .9);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 17px;
  background: #000;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.profile-button{margin-top:18px;padding:9px 13px;border:1px solid rgba(32,220,226,.24);background:rgba(32,220,226,.07);color:var(--cyan);border-radius:999px;font-weight:700;cursor:pointer}
.profile-button:hover{border-color:var(--cyan);background:rgba(32,220,226,.12)}
.member-card.has-profile{border-color:rgba(32,220,226,.16)}
body.modal-open{overflow:hidden}
.profile-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(0,5,10,.78);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:.2s}
.profile-modal.open{opacity:1;visibility:visible}
.profile-dialog{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:clamp(28px,6vw,52px);border-radius:28px;border:1px solid rgba(32,220,226,.2);background:radial-gradient(circle at 80% 0%,rgba(32,220,226,.12),transparent 34%),linear-gradient(150deg,#081827,#030a11 72%);box-shadow:0 30px 90px rgba(0,0,0,.48)}
.profile-close{position:absolute;right:16px;top:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:white;font-size:1.7rem;cursor:pointer}
.profile-logo-wrap{width:84px;height:84px;margin-bottom:28px;border-radius:22px;padding:4px;border:1px solid rgba(32,220,226,.24);background:rgba(32,220,226,.05)}
.profile-logo-wrap img{width:100%;height:100%;border-radius:17px;object-fit:cover}
.profile-dialog h2{margin:0;font-family:Rajdhani,sans-serif;font-size:clamp(3rem,9vw,5rem);line-height:.9}
.profile-role{margin:12px 0 30px;color:var(--cyan);font-size:.84rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.profile-details{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 28px}
.profile-details>div{padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.profile-details span{display:block;margin-bottom:8px;color:var(--muted);font-size:.63rem;letter-spacing:.12em}
.profile-details strong{font-family:Rajdhani,sans-serif;font-size:1.2rem}
.profile-copy{color:#aebdca;line-height:1.7}
.profile-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.profile-socials a{padding:10px 13px;border-radius:999px;border:1px solid var(--line);color:#dce9f0;font-size:.8rem;font-weight:700}
.profile-socials a:hover{border-color:var(--cyan);color:var(--cyan)}
@media(max-width:620px){.profile-details{grid-template-columns:1fr}.profile-dialog{padding:30px 22px}}


.recruitment-section {
  position: relative;
}

.recruitment-heading {
  margin-bottom: 34px;
}

.recruitment-form {
  display: grid;
  gap: 16px;
}

.form-panel {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(32,220,226,.07), transparent 28%),
    rgba(5, 15, 25, .78);
}

.form-panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.form-panel-head > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  border: 1px solid rgba(32,220,226,.24);
  background: rgba(32,220,226,.06);
  color: var(--cyan);
  font-family: Rajdhani, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.form-panel-head .eyebrow {
  margin-bottom: 4px;
}

.form-panel-head h3 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: 2rem;
}

.field-grid {
  display: grid;
  gap: 14px;
}

.field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.field > span,
.choice-field legend {
  color: #cddae3;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.field-help {
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: .78rem;
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: var(--white);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field select option {
  background: #07111d;
  color: white;
}

.field input::placeholder {
  color: #607286;
}

.field input:focus,
.field select:focus {
  border-color: rgba(32,220,226,.55);
  box-shadow: 0 0 0 3px rgba(32,220,226,.08);
  background: rgba(32,220,226,.025);
}

.choice-field {
  border: 0;
  padding: 0;
}

.choice-grid {
  display: grid;
  gap: 10px;
}

.choice-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cod-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-chip {
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #d9e4eb;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.choice-chip small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 600;
}

.choice-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(32,220,226,.35);
}

.choice-chip.active {
  border-color: var(--cyan);
  background: rgba(32,220,226,.11);
  color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(32,220,226,.08);
}

.choice-chip.active small {
  color: #9eeff2;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
  cursor: pointer;
}

.consent-row input {
  margin-top: 3px;
  accent-color: var(--cyan);
}

.form-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.form-status {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

.submit-button {
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan-soft), var(--cyan));
  color: #031017;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 0 32px rgba(32,220,226,.12);
}

.submit-button span {
  margin-left: 10px;
}

.submit-button:hover {
  transform: translateY(-1px);
}

.submit-button:disabled {
  opacity: .55;
  cursor: wait;
}

.form-error {
  border-color: rgba(255, 112, 112, .55) !important;
}

@media (max-width: 900px) {
  .cod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field-grid.three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .field-grid.two,
  .choice-grid.compact,
  .cod-grid {
    grid-template-columns: 1fr;
  }

  .form-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .submit-button {
    width: 100%;
  }
}


.sound-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(32,220,226,.18);
  border-radius: 999px;
  background: rgba(4, 13, 22, .78);
  color: #dce9f0;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 36px rgba(0,0,0,.24);
  cursor: pointer;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
}

.sound-toggle:hover {
  border-color: rgba(32,220,226,.42);
  color: var(--cyan);
}

.sound-toggle[aria-pressed="false"] {
  opacity: .58;
}

.sound-toggle-icon {
  color: var(--cyan);
  font-size: 1rem;
}

@media (max-width: 620px) {
  .sound-toggle {
    right: 12px;
    bottom: 12px;
    min-height: 38px;
    padding: 0 10px;
  }
}


/* CURRENT PROJECT ---------------------------------------------------------- */
.current-project-section {
  padding-top: 32px;
  padding-bottom: 18px;
}

.project-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(32,220,226,.14);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 16%, rgba(32,220,226,.10), transparent 32%),
    linear-gradient(145deg, rgba(7,23,38,.96), rgba(3,10,17,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.project-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.022) 48%, transparent 52%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.012) 0,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 44px
    );
  opacity: .55;
}

.project-copy,
.project-progress {
  position: relative;
  z-index: 1;
}

.project-kicker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.project-kicker-row .eyebrow {
  margin: 0;
}

.project-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(32,220,226,.28);
  border-radius: 999px;
  background: rgba(32,220,226,.08);
  color: var(--cyan);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.project-copy h2 {
  margin: 12px 0 8px;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: .92;
}

.project-description {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.project-progress {
  margin-top: 38px;
}

.project-progress-track {
  position: relative;
  height: 8px;
  margin: 0 18px 24px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}

.project-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0aa6bb, var(--cyan));
  box-shadow: 0 0 22px rgba(32,220,226,.24);
}

.project-progress-glow {
  position: absolute;
  top: 50%;
  left: 34%;
  width: 28%;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(32,220,226,.08),
    rgba(32,220,226,.52),
    rgba(255,255,255,.58),
    rgba(32,220,226,.22),
    transparent
  );
  filter: blur(5px);
  opacity: .8;
  animation: project-editing-glow 2.8s ease-in-out infinite;
}

@keyframes project-editing-glow {
  0%, 100% {
    transform: translate(-18%, -50%) scaleX(.78);
    opacity: .38;
  }
  50% {
    transform: translate(18%, -50%) scaleX(1.12);
    opacity: .9;
  }
}

.project-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.project-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}

.project-stage-dot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: #07111c;
  color: #031017;
  font-size: .72rem;
  font-weight: 900;
}

.project-stage strong,
.project-stage small {
  display: block;
}

.project-stage strong {
  color: #dbe7ed;
  font-family: Rajdhani, sans-serif;
  font-size: 1rem;
  line-height: 1.05;
}

.project-stage small {
  margin-top: 3px;
  color: #667789;
  font-size: .66rem;
  letter-spacing: .04em;
}

.project-stage.complete {
  border-color: rgba(32,220,226,.11);
}

.project-stage.complete .project-stage-dot {
  border-color: rgba(32,220,226,.45);
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(32,220,226,.18);
}

.project-stage.complete strong {
  color: #a9bbc6;
}

.project-stage.active {
  border-color: rgba(32,220,226,.32);
  background: rgba(32,220,226,.055);
  box-shadow:
    inset 0 0 24px rgba(32,220,226,.035),
    0 0 28px rgba(32,220,226,.025);
}

.project-stage.active .project-stage-dot {
  position: relative;
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(32,220,226,.28);
}

.project-stage.active .project-stage-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(32,220,226,.85);
  animation: project-dot-pulse 1.7s ease-in-out infinite;
}

@keyframes project-dot-pulse {
  0%, 100% { transform: scale(.75); opacity: .55; }
  50% { transform: scale(1.15); opacity: 1; }
}

.project-stage.active strong,
.project-stage.active small {
  color: var(--cyan);
}

.project-stage.upcoming {
  opacity: .55;
}

@media (max-width: 760px) {
  .project-progress-track {
    margin-left: 8px;
    margin-right: 8px;
  }

  .project-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .project-stages {
    grid-template-columns: 1fr;
  }

  .project-progress-track {
    display: none;
  }

  .project-stage {
    padding: 12px 13px;
  }
}


/* RECRUITMENT POLISH ------------------------------------------------------- */
.submit-button {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.submit-button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 32%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: 0;
}

.submit-button.is-sending {
  opacity: .92;
  cursor: wait;
}

.submit-button.is-sending::before {
  opacity: .8;
  animation: submit-scan 1s linear infinite;
}

.submit-button.is-success {
  background: linear-gradient(135deg, #65f4d1, var(--cyan));
  box-shadow: 0 0 38px rgba(32,220,226,.26);
}

.submit-label,
.submit-arrow {
  position: relative;
  z-index: 1;
}

.submit-arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform .2s ease;
}

.submit-button:hover .submit-arrow {
  transform: translateX(3px);
}

@keyframes submit-scan {
  from { left: -45%; }
  to { left: 125%; }
}

.application-success {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  max-height: 0;
  margin-top: 0;
  padding: 0 20px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 50%, rgba(32,220,226,.12), transparent 28%),
    rgba(3,16,27,.62);
  opacity: 0;
  transform: translateY(10px);
  transition:
    max-height .45s ease,
    margin-top .45s ease,
    padding .45s ease,
    opacity .3s ease,
    transform .45s ease,
    border-color .45s ease;
}

.application-success.show {
  max-height: 220px;
  margin-top: 20px;
  padding: 18px 20px;
  border-color: rgba(32,220,226,.25);
  opacity: 1;
  transform: translateY(0);
  box-shadow: inset 0 0 28px rgba(32,220,226,.025);
}

.application-success::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(32,220,226,.045), transparent 67%);
  transform: translateX(-100%);
}

.application-success.show::after {
  animation: success-sweep 1.25s .12s ease-out both;
}

@keyframes success-sweep {
  to { transform: translateX(100%); }
}

.application-success-mark {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 17px;
  overflow: hidden;
  border: 1px solid rgba(32,220,226,.24);
  background: #02080e;
  box-shadow: 0 0 28px rgba(32,220,226,.10);
}

.application-success-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
}

.application-success-mark span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cyan);
  color: #021015;
  font-size: .8rem;
  font-weight: 900;
  box-shadow: 0 0 15px rgba(32,220,226,.45);
  animation: success-check .55s .18s cubic-bezier(.2,.8,.25,1.25) both;
}

@keyframes success-check {
  from { transform: scale(.25) rotate(-20deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.application-success-copy {
  position: relative;
  z-index: 1;
}

.application-success-copy .eyebrow {
  margin: 0 0 4px;
}

.application-success-copy h3 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: 1.45rem;
}

.application-success-copy p:last-child {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .application-success {
    grid-template-columns: 1fr;
  }

  .application-success-mark {
    width: 56px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .submit-button::before,
  .application-success::after,
  .application-success-mark span {
    animation: none !important;
  }
}


/* V18 VISUAL POLISH -------------------------------------------------------- */

/* Stats */
.stats-strip {
  width: min(1180px, calc(100% - 36px));
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(32,220,226,.035), transparent 28%, transparent 72%, rgba(32,220,226,.025)),
    rgba(4,13,22,.74);
  backdrop-filter: blur(12px);
}

.stat-item {
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid rgba(255,255,255,.055);
}

.stat-item:last-child {
  border-right: 0;
}

.stat-label {
  display: block;
  margin-bottom: 4px;
  color: #627384;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.stat-item strong {
  display: block;
  color: #dce8ed;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(1rem, 2vw, 1.22rem);
  letter-spacing: .035em;
}

.stat-item:nth-child(2) strong,
.stat-item:first-child strong {
  color: var(--cyan);
}

/* Scroll-in reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1),
    transform .72s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero motion */
.hero-mark {
  animation: hero-mark-float 6s ease-in-out infinite;
}

.hero-mark img {
  filter:
    drop-shadow(0 0 18px rgba(32,220,226,.09))
    drop-shadow(0 0 46px rgba(32,220,226,.06));
  transition: filter .35s ease, transform .35s ease;
}

.hero-mark:hover img {
  transform: scale(1.018);
  filter:
    drop-shadow(0 0 24px rgba(32,220,226,.22))
    drop-shadow(0 0 62px rgba(32,220,226,.12));
}

.hero-glow {
  animation: hero-glow-breathe 5.5s ease-in-out infinite;
}

@keyframes hero-mark-float {
  0%, 100% { transform: translateY(0) rotate(.001deg); }
  50% { transform: translateY(-9px) rotate(.001deg); }
}

@keyframes hero-glow-breathe {
  0%, 100% { opacity: .72; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.035); }
}

/* Subtle interactive glow polish */
.project-shell,
.form-panel,
.feature-card,
.video-card,
.quote-card,
.link-stack a {
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease,
    background-color .3s ease;
}

.project-shell:hover {
  border-color: rgba(32,220,226,.25);
  box-shadow:
    0 26px 78px rgba(0,0,0,.27),
    0 0 42px rgba(32,220,226,.035);
}

.form-panel:hover {
  border-color: rgba(32,220,226,.16);
  box-shadow: 0 20px 48px rgba(0,0,0,.17);
}

.feature-card:hover,
.video-card:hover {
  border-color: rgba(32,220,226,.20);
  box-shadow: 0 20px 58px rgba(0,0,0,.20);
}

.link-stack a:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

/* Roster cards get an additional cyan light bloom */
.member-card {
  isolation: isolate;
}

.member-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% 8% -8%;
  border-radius: 30px;
  background: radial-gradient(circle, rgba(32,220,226,.12), transparent 68%);
  filter: blur(24px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}

.member-card:hover::before {
  opacity: .78;
  transform: translateY(0);
}

/* Footer */
.site-footer {
  width: min(1180px, calc(100% - 36px));
  margin: 42px auto 18px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(32,220,226,.055), transparent 24%),
    rgba(3,10,17,.82);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(140px, .7fr));
  gap: 34px;
  padding: 34px;
}

.footer-identity p {
  max-width: 430px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #eef7fa;
  text-decoration: none;
}

.site-footer .footer-brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(32,220,226,.12);
  transition: transform .3s ease, box-shadow .3s ease;
}

.site-footer .footer-brand:hover img {
  transform: rotate(-3deg) scale(1.04);
  box-shadow: 0 0 24px rgba(32,220,226,.12);
}

.site-footer .footer-brand strong,
.site-footer .footer-brand span {
  display: block;
}

.site-footer .footer-brand strong {
  font-family: Rajdhani, sans-serif;
  font-size: 1.15rem;
  letter-spacing: .05em;
}

.site-footer .footer-brand span {
  margin-top: 2px;
  color: var(--cyan);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-heading {
  margin-bottom: 4px;
  color: #66798a;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.footer-column a,
.footer-bottom a {
  color: #dbe5ea;
  font-size: .78rem;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.footer-column a:hover,
.footer-bottom a:hover {
  color: var(--cyan);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 34px;
  border-top: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.014);
}

.footer-bottom p {
  margin: 0;
  color: #627384;
  font-size: .69rem;
}

.footer-bottom a {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Mobile */
@media (max-width: 760px) {
  .stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-item:nth-child(2) {
    border-right: 0;
  }

  .stat-item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,.055);
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-identity {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .stats-strip {
    width: min(100% - 24px, 1180px);
  }

  .stat-item {
    padding: 15px 14px;
  }

  .site-footer {
    width: min(100% - 24px, 1180px);
  }

  .footer-main {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }

  .footer-identity {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 15px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-mark,
  .hero-glow {
    animation: none !important;
  }

  .member-card::before {
    transition: none !important;
  }
}


/* V28 — MNKY BIRTHDAY EVENT ----------------------------------------------- */
.member-card-meta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.birthday-card {
  overflow: hidden;
  border-color: rgba(32,220,226,.44);
  box-shadow:
    0 20px 58px rgba(0,0,0,.30),
    0 0 34px rgba(32,220,226,.11);
}

.birthday-card::after {
  opacity: 1;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.12), transparent 25%),
    radial-gradient(circle at 75% 22%, rgba(32,220,226,.16), transparent 28%),
    radial-gradient(circle, rgba(32,220,226,.13), transparent 68%);
  animation: birthday-card-glow 2.8s ease-in-out infinite;
}

.birthday-badge {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(32,220,226,.34);
  border-radius: 999px;
  background: rgba(32,220,226,.09);
  color: var(--cyan);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .11em;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(32,220,226,.08);
}

.birthday-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.birthday-particle {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 7px rgba(255,255,255,.85),
    0 0 13px rgba(32,220,226,.82);
  opacity: 0;
  animation: birthday-spark var(--duration) ease-out var(--delay) infinite;
}

.birthday-particle:nth-child(3n) {
  width: 3px;
  height: 9px;
  border-radius: 2px;
  background: var(--cyan);
}

.birthday-particle:nth-child(4n) {
  width: 5px;
  height: 5px;
  background: #c8fbff;
}

@keyframes birthday-spark {
  0% {
    transform: translate(0, 0) scale(.35);
    opacity: 0;
  }
  12% {
    opacity: .95;
  }
  70% {
    opacity: .82;
  }
  100% {
    transform: translate(var(--drift), -320px) scale(1.05) rotate(160deg);
    opacity: 0;
  }
}

@keyframes birthday-card-glow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

@media (max-width: 620px) {
  .birthday-badge {
    font-size: .50rem;
    padding: 0 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-card::after,
  .birthday-particle {
    animation: none !important;
  }
}


/* v30 hero overcharge */
.hero-mark {
  cursor: pointer;
  isolation: isolate;
  --charge-level: 0;
  --charge-scale: calc(1 + (var(--charge-level) * 0.015));
  transform: scale(var(--charge-scale));
  transition: transform .18s ease, filter .18s ease, opacity .25s ease;
  filter: drop-shadow(0 0 calc(45px + var(--charge-level) * 8px) rgba(32,220,226,.14)) brightness(calc(1 + var(--charge-level) * .03));
}
.hero-mark:hover,
.hero-mark:focus-visible {
  transform: scale(calc(var(--charge-scale) + .02));
}
.hero-mark:focus-visible {
  outline: 2px solid rgba(32,220,226,.7);
  outline-offset: 10px;
  border-radius: 999px;
}
.hero-mark::before,
.hero-mark::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  pointer-events: none;
}
.hero-mark::before {
  background: radial-gradient(circle, rgba(32,220,226,.22), rgba(32,220,226,.08) 45%, transparent 68%);
  opacity: calc(var(--charge-level) * .08);
  transform: scale(calc(.85 + var(--charge-level) * .03));
  filter: blur(18px);
  transition: opacity .18s ease, transform .18s ease;
}
.hero-mark::after {
  background:
    conic-gradient(from 0deg,
      transparent 0deg 16deg,
      rgba(255,255,255,.96) 16deg 18deg,
      transparent 18deg 72deg,
      rgba(32,220,226,.92) 72deg 74deg,
      transparent 74deg 140deg,
      rgba(255,255,255,.9) 140deg 142deg,
      transparent 142deg 210deg,
      rgba(32,220,226,.95) 210deg 212deg,
      transparent 212deg 285deg,
      rgba(255,255,255,.86) 285deg 287deg,
      transparent 287deg 360deg);
  mask-image: radial-gradient(circle, transparent 46%, rgba(0,0,0,1) 51%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle, transparent 46%, rgba(0,0,0,1) 51%, transparent 65%);
  opacity: max(0, calc((var(--charge-level) - 1) * .08));
  animation: heroLightningSpin 1.3s linear infinite, heroLightningFlicker .35s steps(2) infinite;
  mix-blend-mode: screen;
}
.hero-mark img {
  transition: transform .18s ease, filter .18s ease, opacity .2s ease;
}
.hero-mark-hint {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(4, 12, 20, .72);
  color: rgba(220, 240, 248, .72);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .22em;
  white-space: nowrap;
  opacity: .75;
}
.hero-overcharge-message {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(.84);
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  letter-spacing: .18em;
  color: white;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 20px rgba(32,220,226,.75), 0 0 38px rgba(32,220,226,.45);
  transition: opacity .28s ease, transform .28s ease;
  z-index: 3;
}
.hero-mark.charge-flash img {
  filter: brightness(1.25);
}
.hero-mark[data-charge="1"] img,
.hero-mark[data-charge="2"] img,
.hero-mark[data-charge="3"] img,
.hero-mark[data-charge="4"] img,
.hero-mark[data-charge="5"] img,
.hero-mark[data-charge="6"] img,
.hero-mark[data-charge="7"] img,
.hero-mark[data-charge="8"] img,
.hero-mark[data-charge="9"] img,
.hero-mark[data-charge="10"] img {
  animation: heroPulse .9s ease-in-out infinite;
}
.hero-mark[data-charge="4"] img,
.hero-mark[data-charge="5"] img,
.hero-mark[data-charge="6"] img,
.hero-mark[data-charge="7"] img,
.hero-mark[data-charge="8"] img,
.hero-mark[data-charge="9"] img,
.hero-mark[data-charge="10"] img {
  animation-duration: .65s;
}
.hero-mark[data-charge="8"] img,
.hero-mark[data-charge="9"] img,
.hero-mark[data-charge="10"] img {
  animation-duration: .42s;
}
.hero-mark.explode {
  animation: heroExplodeShake .6s ease-out;
}
.hero-mark.explode::before {
  opacity: .95;
  transform: scale(1.32);
  background: radial-gradient(circle, rgba(255,255,255,.72), rgba(32,220,226,.42) 28%, transparent 65%);
}
.hero-mark.explode::after {
  opacity: 1;
  animation: heroLightningSpin .2s linear 3, heroLightningFlicker .14s steps(2) infinite;
}
.hero-mark.explode img {
  opacity: 0;
  transform: scale(1.3);
  filter: blur(5px) brightness(2);
}
.hero-mark.show-message .hero-overcharge-message {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.hero-mark.show-message .hero-mark-hint {
  opacity: 0;
}
@keyframes heroPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(calc(1 + var(--charge-level) * 0.008)); filter: brightness(calc(1.08 + var(--charge-level) * 0.015)); }
}
@keyframes heroLightningSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes heroLightningFlicker {
  0%, 100% { opacity: max(0, calc((var(--charge-level) - 1) * .08)); }
  50% { opacity: min(1, calc((var(--charge-level) * .1) + .15)); }
}
@keyframes heroExplodeShake {
  0% { transform: scale(1.04) translate(0, 0); }
  20% { transform: scale(1.08) translate(-5px, 2px); }
  40% { transform: scale(1.1) translate(5px, -4px); }
  60% { transform: scale(1.12) translate(-3px, 3px); }
  100% { transform: scale(1); }
}
@media (max-width: 900px) {
  .hero-mark-hint { bottom: -28px; }
  .hero-overcharge-message { white-space: normal; width: 85%; line-height: .95; }
}


/* V31 — MOBILE POLISH + OVERCHARGE 2.0 ----------------------------------- */
#roster {
  scroll-margin-top: 92px;
}

.hero-glow {
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 6;
}

.hero-actions {
  position: relative;
  z-index: 8;
}

#meetRosterButton {
  position: relative;
  z-index: 9;
  pointer-events: auto;
  cursor: pointer;
}

.hero-mark {
  z-index: 3;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hero-mark.near-overload {
  animation: overchargeNearShake .16s linear infinite;
}

.hero-mark.near-overload img {
  filter:
    brightness(1.25)
    saturate(1.25)
    drop-shadow(0 0 22px rgba(255,255,255,.22))
    drop-shadow(0 0 44px rgba(32,220,226,.35));
}

.overcharge-ring {
  position: absolute;
  inset: 8%;
  z-index: 4;
  border: 2px solid rgba(88,241,255,.82);
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 18px rgba(32,220,226,.7),
    inset 0 0 18px rgba(32,220,226,.25);
  animation: overchargeRing .68s ease-out forwards;
}

.overcharge-particles {
  position: absolute;
  inset: 50%;
  z-index: 7;
  pointer-events: none;
}

.overcharge-particles i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) * -.5);
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 8px white,
    0 0 18px rgba(32,220,226,.95),
    0 0 28px rgba(32,220,226,.55);
  opacity: 0;
  animation: overchargeParticle 1s cubic-bezier(.08,.72,.2,1) var(--delay) forwards;
}

.overcharge-particles i:nth-child(3n) {
  border-radius: 1px;
  background: var(--cyan);
}

.overcharge-particles i:nth-child(4n) {
  background: #c8fbff;
}

.overcharge-screen-flash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%,
      rgba(255,255,255,.76),
      rgba(32,220,226,.34) 20%,
      rgba(32,220,226,.08) 45%,
      transparent 72%);
}

.overcharge-screen-flash.fire {
  animation: overchargeScreenFlash .58s ease-out forwards;
}

.hero-mark.overcharge-max::before {
  animation: overchargeCoreBlast .6s ease-out forwards;
}

.hero-mark.show-message .hero-overcharge-message {
  animation: overchargeMessage .48s cubic-bezier(.15,.85,.15,1.2) both;
}

@keyframes overchargeRing {
  0% {
    opacity: .95;
    transform: scale(.45);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes overchargeParticle {
  0% {
    opacity: 1;
    transform: translate(0,0) scale(.5);
  }
  75% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(1.25);
  }
}

@keyframes overchargeScreenFlash {
  0% { opacity: 0; }
  12% { opacity: .95; }
  100% { opacity: 0; }
}

@keyframes overchargeCoreBlast {
  0% {
    opacity: .25;
    transform: scale(.75);
    filter: blur(8px);
  }
  40% {
    opacity: 1;
    transform: scale(1.32);
    filter: blur(4px);
  }
  100% {
    opacity: 0;
    transform: scale(1.82);
    filter: blur(18px);
  }
}

@keyframes overchargeMessage {
  0% {
    opacity: 0;
    letter-spacing: .04em;
    transform: translate(-50%, -50%) scale(.55);
    filter: blur(6px);
  }
  65% {
    opacity: 1;
    letter-spacing: .22em;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    letter-spacing: .18em;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes overchargeNearShake {
  0% { translate: 0 0; }
  25% { translate: -1px 1px; }
  50% { translate: 1px -1px; }
  75% { translate: 1px 1px; }
  100% { translate: 0 0; }
}

@media (max-width: 900px) {
  .hero-mark {
    opacity: .94;
    width: min(72vw, 390px);
  }

  .hero-mark-hint {
    bottom: -26px;
    opacity: .9;
    font-size: .58rem;
  }

  .hero-overcharge-message {
    width: 112%;
    font-size: clamp(1.35rem, 6vw, 2rem);
    line-height: 1.02;
  }

  .hero-mark[data-charge="7"],
  .hero-mark[data-charge="8"],
  .hero-mark[data-charge="9"] {
    filter:
      drop-shadow(0 0 54px rgba(32,220,226,.38))
      brightness(1.14);
  }
}

@media (max-width: 620px) {
  .hero {
    padding-bottom: 84px;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .button {
    min-height: 50px;
    padding-inline: 18px;
  }

  .overcharge-screen-flash {
    background:
      radial-gradient(circle at 50% 55%,
        rgba(255,255,255,.82),
        rgba(32,220,226,.38) 25%,
        rgba(32,220,226,.08) 52%,
        transparent 78%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark.near-overload,
  .overcharge-ring,
  .overcharge-particles i,
  .overcharge-screen-flash,
  .hero-mark.overcharge-max::before,
  .hero-mark.show-message .hero-overcharge-message {
    animation: none !important;
  }
}


/* V34 — Hero logo centering + cyan halo ring + single-line slogan */
.hero-mark {
  --hero-offset-x: -3.25%;
  --hero-offset-y: 5.2%;
}

.hero-static-ring {
  position: absolute;
  inset: 7.5%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: 2px solid rgba(111, 232, 255, .68);
  box-shadow:
    0 0 18px rgba(111, 232, 255, .30),
    0 0 34px rgba(70, 202, 255, .20),
    0 0 54px rgba(38, 175, 244, .16),
    inset 0 0 16px rgba(168, 244, 255, .14);
  background: radial-gradient(circle,
    rgba(128, 242, 255, .06) 0%,
    rgba(72, 199, 255, .045) 38%,
    rgba(24, 98, 150, 0) 72%);
  animation: heroStaticRingShimmer 5.2s ease-in-out infinite;
}

.hero-mark::before {
  background: radial-gradient(circle, rgba(104,233,255,.26), rgba(77,203,255,.10) 44%, transparent 69%);
}

.hero-mark::after {
  background:
    conic-gradient(from 0deg,
      transparent 0deg 16deg,
      rgba(236,252,255,.95) 16deg 18deg,
      transparent 18deg 72deg,
      rgba(101,230,255,.94) 72deg 74deg,
      transparent 74deg 140deg,
      rgba(221,250,255,.88) 140deg 142deg,
      transparent 142deg 210deg,
      rgba(87,221,255,.95) 210deg 212deg,
      transparent 212deg 285deg,
      rgba(214,250,255,.84) 285deg 287deg,
      transparent 287deg 360deg);
}

.hero-mark img {
  position: relative;
  z-index: 1;
  transform: translate(var(--hero-offset-x), var(--hero-offset-y));
  transition: transform .18s ease, filter .18s ease, opacity .2s ease;
}

.hero-mark:hover img {
  transform: translate(var(--hero-offset-x), var(--hero-offset-y)) scale(1.018);
}

.hero-mark.near-overload img {
  filter:
    brightness(1.23)
    saturate(1.14)
    drop-shadow(0 0 20px rgba(221,250,255,.25))
    drop-shadow(0 0 48px rgba(101,230,255,.45));
}

.hero-mark.charge-flash img {
  filter: brightness(1.24);
}

.hero-mark[data-charge="1"] img,
.hero-mark[data-charge="2"] img,
.hero-mark[data-charge="3"] img,
.hero-mark[data-charge="4"] img,
.hero-mark[data-charge="5"] img,
.hero-mark[data-charge="6"] img,
.hero-mark[data-charge="7"] img,
.hero-mark[data-charge="8"] img,
.hero-mark[data-charge="9"] img,
.hero-mark[data-charge="10"] img {
  animation-name: heroPulseCentered;
}

.hero-mark.explode img {
  opacity: 0;
  transform: translate(var(--hero-offset-x), var(--hero-offset-y)) scale(1.3);
  filter: blur(5px) brightness(2);
}

.hero-overcharge-message {
  z-index: 5;
  width: max-content;
  max-width: calc(100vw - 28px);
  white-space: nowrap !important;
  line-height: 1;
  letter-spacing: .12em;
  font-size: clamp(.88rem, 2.25vw, 2rem);
}

.hero-mark.show-message .hero-overcharge-message {
  transform: translate(-50%, -50%) scale(1);
}

@keyframes heroPulseCentered {
  0%, 100% {
    transform: translate(var(--hero-offset-x), var(--hero-offset-y)) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translate(var(--hero-offset-x), var(--hero-offset-y)) scale(calc(1 + var(--charge-level) * 0.008));
    filter: brightness(calc(1.08 + var(--charge-level) * 0.015));
  }
}

@keyframes heroStaticRingShimmer {
  0%, 100% {
    opacity: .92;
    transform: scale(1);
    box-shadow:
      0 0 18px rgba(111, 232, 255, .30),
      0 0 34px rgba(70, 202, 255, .20),
      0 0 54px rgba(38, 175, 244, .16),
      inset 0 0 16px rgba(168, 244, 255, .14);
  }
  50% {
    opacity: 1;
    transform: scale(1.012);
    box-shadow:
      0 0 24px rgba(137, 239, 255, .38),
      0 0 46px rgba(72, 207, 255, .24),
      0 0 74px rgba(38, 175, 244, .20),
      inset 0 0 22px rgba(194, 248, 255, .18);
  }
}

@media (max-width: 900px) {
  .hero-static-ring {
    inset: 8.25%;
  }

  .hero-overcharge-message {
    font-size: clamp(.78rem, 3.9vw, 1.1rem);
    letter-spacing: .08em;
    max-width: calc(100vw - 20px);
  }
}


/* V35 — precise centering + stronger celebration loop */
.hero-mark {
  --hero-offset-x: 0%;
  --hero-offset-y: 0%;
}

.hero-static-ring {
  inset: auto;
  width: 85.5%;
  height: 85.5%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  border-width: 2px;
  opacity: .98;
  background: radial-gradient(circle,
    rgba(128, 242, 255, .045) 0%,
    rgba(72, 199, 255, .035) 42%,
    rgba(24, 98, 150, 0) 72%);
  box-shadow:
    0 0 20px rgba(111, 232, 255, .28),
    0 0 42px rgba(70, 202, 255, .18),
    0 0 66px rgba(38, 175, 244, .14),
    inset 0 0 14px rgba(168, 244, 255, .12);
}

.hero-mark::before {
  background: radial-gradient(circle, rgba(104,233,255,.18), rgba(77,203,255,.06) 44%, transparent 68%);
}

.hero-overcharge-message {
  transition: opacity .25s ease, transform .25s ease;
}

.hero-mark.show-message .hero-overcharge-message {
  animation: heroMessagePulse 1.05s ease-in-out 2;
}

.overcharge-celebration {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 6;
}

.overcharge-celebration i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 6px);
  height: calc(var(--size, 6px) * 1.7);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), var(--c, rgba(112, 231, 255, .95)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c, #6fe8ff) 55%, white 45%);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  opacity: 0;
  animation: heroConfetti 1.15s ease-out forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes heroMessagePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}

@keyframes heroConfetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.5);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(calc(var(--rot, 0deg) + 220deg)) scale(1);
  }
}

@keyframes heroStaticRingShimmer {
  0%, 100% {
    opacity: .96;
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 20px rgba(111, 232, 255, .28),
      0 0 42px rgba(70, 202, 255, .18),
      0 0 66px rgba(38, 175, 244, .14),
      inset 0 0 14px rgba(168, 244, 255, .12);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.01);
    box-shadow:
      0 0 24px rgba(137, 239, 255, .34),
      0 0 48px rgba(72, 207, 255, .22),
      0 0 74px rgba(38, 175, 244, .16),
      inset 0 0 18px rgba(194, 248, 255, .16);
  }
}

@media (max-width: 900px) {
  .hero-mark {
    --hero-offset-x: 0%;
    --hero-offset-y: 0%;
  }
  .hero-static-ring {
    width: 85%;
    height: 85%;
  }
  .overcharge-celebration {
    inset: -8%;
  }
}


/* V37 — final hero centering + burning Skyyfall Legacy title */
.skyyfall-fire {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #fff2b0;
  background:
    linear-gradient(
      180deg,
      #fffbe6 0%,
      #ffe56f 24%,
      #ff9d2f 55%,
      #ff4d1f 78%,
      #b91412 100%
    );
  background-size: 100% 180%;
  background-position: 50% 70%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 5px rgba(255, 235, 128, .42),
    0 0 11px rgba(255, 136, 36, .42),
    0 0 23px rgba(255, 70, 20, .25);
  animation:
    skyyfallFireGradient 1.35s ease-in-out infinite alternate,
    skyyfallFireTextFlicker .22s steps(2, end) infinite;
}

.skyyfall-fire::before,
.skyyfall-fire::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  transform-origin: 50% 100%;
}

.skyyfall-fire::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 243, 170, .15) 0%,
      rgba(255, 150, 40, .85) 42%,
      rgba(255, 57, 18, .72) 76%,
      rgba(132, 8, 8, 0) 100%
    );
  filter: blur(4px);
  opacity: .78;
  animation: skyyfallFlameLickA .62s ease-in-out infinite alternate;
}

.skyyfall-fire::after {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 214, .08) 0%,
      rgba(255, 188, 54, .62) 38%,
      rgba(255, 68, 18, .58) 74%,
      rgba(124, 7, 7, 0) 100%
    );
  filter: blur(9px);
  opacity: .62;
  animation: skyyfallFlameLickB .83s ease-in-out infinite alternate-reverse;
}

@keyframes skyyfallFireGradient {
  0%   { background-position: 50% 48%; filter: brightness(1) saturate(1); }
  100% { background-position: 50% 88%; filter: brightness(1.16) saturate(1.15); }
}

@keyframes skyyfallFireTextFlicker {
  0%, 100% { text-shadow:
    0 0 5px rgba(255, 235, 128, .38),
    0 0 11px rgba(255, 136, 36, .36),
    0 0 22px rgba(255, 70, 20, .22); }
  50% { text-shadow:
    0 0 7px rgba(255, 245, 168, .58),
    0 0 15px rgba(255, 130, 28, .54),
    0 0 30px rgba(255, 58, 16, .34); }
}

@keyframes skyyfallFlameLickA {
  0%   { transform: translate(-1px, 1px) scale(1.01, .98) skewX(-1deg); opacity: .56; }
  55%  { transform: translate(1px, -3px) scale(.995, 1.05) skewX(1.6deg); opacity: .86; }
  100% { transform: translate(0, -5px) scale(1.01, 1.08) skewX(-1.2deg); opacity: .66; }
}

@keyframes skyyfallFlameLickB {
  0%   { transform: translate(1px, 0) scale(.99, 1.01) skewX(1deg); opacity: .42; }
  60%  { transform: translate(-1px, -5px) scale(1.015, 1.09) skewX(-1.8deg); opacity: .72; }
  100% { transform: translate(1px, -8px) scale(.995, 1.13) skewX(1.3deg); opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .skyyfall-fire,
  .skyyfall-fire::before,
  .skyyfall-fire::after {
    animation: none !important;
  }
}


/* V38 — use the original Skyyfall banner artwork in the LEGACY FEATURE card */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.feature-title-image {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 14px 0 18px;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, .28))
    drop-shadow(0 0 14px rgba(255, 126, 32, .16));
}

@media (max-width: 900px) {
  .feature-title-image {
    width: 100%;
    max-width: 100%;
    margin: 12px 0 16px;
  }
}


/* V39 — Skyyfall feature title rebuilt as styled text (not an image) */
.skyyfall-feature-title {
  position: relative;
  display: inline-block;
  margin: 8px 0 18px;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  font-size: clamp(2.35rem, 6vw, 4.8rem);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: transparent;
  padding: .06em .04em .14em;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.32), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #fbfbfb 0%, #d4d4d4 18%, #8f8f8f 38%, #5a5a5a 55%, #b5b5b5 67%, #6c6c6c 82%, #2f2f2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.4px rgba(26, 24, 24, .92);
  text-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 4px 0 rgba(40, 22, 18, .88),
    0 6px 14px rgba(0,0,0,.45),
    0 0 20px rgba(255, 96, 30, .34),
    0 0 34px rgba(255, 76, 24, .18);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.22));
}

.skyyfall-feature-title::before,
.skyyfall-feature-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* warm lava glow behind the metallic letters */
.skyyfall-feature-title::before {
  z-index: -2;
  color: transparent;
  -webkit-text-stroke: 0;
  background:
    linear-gradient(180deg, rgba(255,212,112,.78) 0%, rgba(255,140,40,.96) 30%, rgba(255,78,20,.92) 56%, rgba(121,19,12,.88) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: translate(.055em, .08em) scale(1.005);
  filter: blur(1.4px) saturate(1.08);
  opacity: .95;
  text-shadow:
    0 0 10px rgba(255,152,60,.56),
    0 0 22px rgba(255,91,28,.42),
    0 0 38px rgba(255,72,18,.28);
}

/* subtle roughened surface and ember flicker on top */
.skyyfall-feature-title::after {
  z-index: 1;
  color: transparent;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.22) 0 2%, transparent 3%),
    radial-gradient(circle at 39% 62%, rgba(255,255,255,.16) 0 1.8%, transparent 2.8%),
    radial-gradient(circle at 73% 36%, rgba(255,255,255,.14) 0 2%, transparent 3%),
    radial-gradient(circle at 56% 18%, rgba(0,0,0,.16) 0 6%, transparent 9%),
    radial-gradient(circle at 81% 58%, rgba(0,0,0,.18) 0 5%, transparent 9%);
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  opacity: .55;
  animation: skyyfallBannerFlicker 2.6s ease-in-out infinite alternate;
}

@keyframes skyyfallBannerFlicker {
  0% { opacity: .42; transform: translate(0, 0); }
  50% { opacity: .62; transform: translate(.008em, -.01em); }
  100% { opacity: .5; transform: translate(-.006em, .008em); }
}

@media (max-width: 900px) {
  .skyyfall-feature-title {
    font-size: clamp(2.6rem, 9.5vw, 4rem);
    margin: 6px 0 16px;
    -webkit-text-stroke: 1.1px rgba(26, 24, 24, .92);
  }
}


/* V40 — add Skyy Creex as new member with purple welcome effect */
.new-member-card {
  overflow: hidden;
  border-color: rgba(161, 96, 255, .42);
  box-shadow:
    0 20px 58px rgba(0,0,0,.30),
    0 0 32px rgba(139, 92, 246, .13);
}

.new-member-card::after {
  opacity: 1;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.10), transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(166, 112, 255, .17), transparent 28%),
    radial-gradient(circle, rgba(124, 58, 237, .15), transparent 68%);
  animation: new-member-card-glow 3s ease-in-out infinite;
}

.new-member-badge {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(168, 123, 255, .40);
  border-radius: 999px;
  background: rgba(115, 54, 197, .14);
  color: #d9c2ff;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .11em;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(139, 92, 246, .15);
}

.new-member-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.new-member-particle {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #efe7ff;
  box-shadow:
    0 0 8px rgba(255,255,255,.84),
    0 0 16px rgba(157, 78, 221, .86);
  opacity: 0;
  animation: new-member-spark var(--duration) ease-out var(--delay) infinite;
}

.new-member-particle:nth-child(3n) {
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: #b794ff;
}

.new-member-particle:nth-child(4n) {
  width: 5px;
  height: 5px;
  background: #c6d9ff;
}

@keyframes new-member-spark {
  0% {
    transform: translate(0, 0) scale(.35);
    opacity: 0;
  }
  10% {
    opacity: .95;
  }
  68% {
    opacity: .85;
  }
  100% {
    transform: translate(var(--drift), -280px) scale(1.04) rotate(135deg);
    opacity: 0;
  }
}

@keyframes new-member-card-glow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.16);
  }
}

@media (max-width: 620px) {
  .new-member-badge {
    font-size: .50rem;
    padding: 0 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-member-card::after,
  .new-member-particle {
    animation: none !important;
  }
}


/* V43 — updated Pritti/Vargaz/Tebbi logos + special founder birthday treatment for Kano */
.founder-birthday-card {
  border-color: rgba(255, 196, 66, .55);
  box-shadow:
    0 22px 64px rgba(0,0,0,.34),
    0 0 44px rgba(255, 193, 59, .16),
    0 0 28px rgba(32,220,226,.10);
}

.founder-birthday-card::after {
  opacity: 1;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.20), transparent 22%),
    radial-gradient(circle at 78% 16%, rgba(255, 206, 86, .28), transparent 30%),
    radial-gradient(circle at 50% 20%, rgba(65, 231, 255, .18), transparent 34%),
    radial-gradient(circle, rgba(255, 184, 44, .18), transparent 70%);
  animation: founder-birthday-card-glow 2.4s ease-in-out infinite;
}

.founder-birthday-badge {
  border-color: rgba(255, 201, 88, .50);
  background: linear-gradient(135deg, rgba(255, 204, 92, .18), rgba(32,220,226,.12));
  color: #ffe8a8;
  box-shadow:
    0 0 20px rgba(255, 187, 54, .22),
    0 0 12px rgba(32,220,226,.10);
}

.founder-birthday-particle {
  background: #fff3c8;
  box-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 14px rgba(255, 196, 77, .85),
    0 0 24px rgba(32,220,226,.42);
}

.founder-birthday-particle:nth-child(3n) {
  background: #ffd873;
}

.founder-birthday-particle:nth-child(4n) {
  background: #bdfbff;
}

@keyframes founder-birthday-card-glow {
  0%, 100% { filter: brightness(1); transform: translateY(0); }
  50% { filter: brightness(1.22); transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .founder-birthday-card::after {
    animation: none !important;
  }
}