/* Fixed70 — JClass brand renewal */
:root{
  --j-red:#ef3f43;
  --j-red-dark:#d72e35;
  --j-ink:#111318;
  --j-ink-soft:#222833;
  --j-paper:#ffffff;
  --j-line:#dfe3ea;
}

/* Landing */
.join-view{
  background:
    radial-gradient(circle at 10% 10%,rgba(239,63,67,.10),transparent 28%),
    radial-gradient(circle at 78% 88%,rgba(17,19,24,.06),transparent 32%),
    var(--bg)!important;
}
.landing-shell{
  max-width:1460px!important;
  gap:28px!important;
  align-items:stretch!important;
}
.landing-class-hero{
  position:relative!important;
  padding:50px 54px!important;
  min-height:700px!important;
  border:1px solid color-mix(in srgb,var(--border) 82%,transparent)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 18% 72%,rgba(239,63,67,.09),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,248,251,.97))!important;
  box-shadow:0 28px 80px rgba(15,23,42,.10)!important;
  overflow:hidden!important;
}
html[data-theme="dark"] .landing-class-hero{
  background:
    radial-gradient(circle at 20% 75%,rgba(239,63,67,.11),transparent 28%),
    linear-gradient(145deg,#111722,#090e17)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.35)!important;
}
.landing-brand-layout{
  height:100%;
  display:grid;
  grid-template-columns:minmax(260px,.85fr) minmax(430px,1.35fr);
  align-items:center;
  gap:34px;
}
.brand-symbol-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:500px;
}
.brand-symbol-stage:before{
  content:"";
  position:absolute;
  width:75%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(239,63,67,.13),rgba(239,63,67,0) 66%);
  filter:blur(8px);
}
.brand-symbol-hero{
  position:relative;
  width:min(92%,430px);
  filter:drop-shadow(0 34px 28px rgba(15,23,42,.18));
  animation:jbrandFloat 6s ease-in-out infinite;
}
.brand-copy{
  position:relative;
  z-index:2;
  padding-right:12px;
}
.brand-copy .brand-kicker{
  display:block;
  margin-bottom:20px;
  color:var(--j-red);
  font-size:13px;
  font-weight:900;
  letter-spacing:.34em;
}
.brand-copy h1{
  margin:0;
  color:var(--j-ink);
  font-size:clamp(48px,5.8vw,92px);
  line-height:.93;
  letter-spacing:.08em;
  font-weight:900;
}
.brand-copy h1 span{display:block;color:var(--j-red);letter-spacing:.24em;margin-top:9px}
.brand-copy .brand-tagline{
  margin:22px 0 0;
  color:#5e6673;
  font-size:14px;
  font-weight:700;
  letter-spacing:.38em;
}
.brand-copy .brand-description{
  max-width:520px;
  margin:34px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
}
.brand-feature-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.brand-feature-row span{
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);
  color:var(--text);
  font-size:12px;
  font-weight:800;
}
html[data-theme="dark"] .brand-copy h1{color:#f8fafc}
@keyframes jbrandFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(.6deg)}}

/* Login card refinement */
.join-card{
  border-radius:28px!important;
  border:1px solid var(--border)!important;
  box-shadow:0 28px 75px rgba(15,23,42,.13)!important;
  padding:34px!important;
}
.join-card-title .brand-mark{
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  height:58px!important;
  padding:8px!important;
  border-radius:16px!important;
  background:var(--j-ink)!important;
  color:transparent!important;
  background-image:url("jclass-brand-symbol.svg")!important;
  background-size:78%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  box-shadow:0 10px 22px rgba(17,19,24,.18)!important;
}
.join-card-title strong{font-size:25px!important}
.mode-tabs{border-radius:14px!important;background:color-mix(in srgb,var(--border) 65%,transparent)!important}
.mode-tab.active{background:color-mix(in srgb,var(--j-red) 12%,var(--panel))!important;color:var(--j-red)!important}
.primary{background:linear-gradient(135deg,var(--j-red),var(--j-red-dark))!important;box-shadow:0 10px 22px rgba(239,63,67,.20)!important}
.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* App header brand */
.brand-j-logo{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  font-size:0!important;
  color:transparent!important;
  background:#0d1015 url("jclass-brand-symbol.svg") center/78% no-repeat!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.18)!important;
}
.topbar .brand strong{
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:16px!important;
}

/* Contact modal branding */
.contact-mascot{
  content:url("jclass-brand-symbol.svg")!important;
  width:112px!important;
  height:112px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 16px 18px rgba(15,23,42,.16));
}

/* Remove all mascot-era landing layers */
.jclass-heading,.jclass-scene{display:none!important}

/* Mobile */
@media(max-width:980px){
  .landing-brand-layout{grid-template-columns:1fr;gap:0;text-align:center}
  .brand-symbol-stage{min-height:310px;order:2}
  .brand-symbol-hero{width:min(68vw,300px)}
  .brand-copy{order:1;padding:0}
  .brand-copy .brand-description{margin-inline:auto}
  .brand-feature-row{justify-content:center}
  .landing-class-hero{padding:38px 28px!important;min-height:auto!important}
}
@media(max-width:620px){
  .landing-class-hero{padding:28px 20px 20px!important;border-radius:22px!important}
  .brand-copy h1{font-size:44px;letter-spacing:.04em}
  .brand-copy h1 span{letter-spacing:.18em}
  .brand-copy .brand-kicker{font-size:10px;letter-spacing:.22em}
  .brand-copy .brand-tagline{font-size:10px;letter-spacing:.24em}
  .brand-copy .brand-description{font-size:15px;margin-top:22px}
  .brand-symbol-stage{min-height:250px}
  .brand-symbol-hero{width:min(62vw,250px)}
  .join-card{padding:24px!important;border-radius:22px!important}
}
@media(prefers-reduced-motion:reduce){.brand-symbol-hero{animation:none!important}}