/* Fixed57: separated landing typography + transparent layered mascot */
.landing-class-hero{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  padding:34px 34px 18px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 72% 56%,rgba(80,160,255,.12),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(247,250,255,.72))!important;
}
html[data-theme="dark"] .landing-class-hero{
  background:
    radial-gradient(circle at 72% 56%,rgba(74,144,226,.12),transparent 34%),
    linear-gradient(145deg,rgba(14,21,34,.96),rgba(8,13,23,.98))!important;
}
.jclass-heading{
  position:relative;
  z-index:5;
  padding:2px 18px 0;
  text-align:left;
}
.jclass-eyebrow{
  display:block;
  margin-bottom:8px;
  color:#ef4444;
  font-size:clamp(11px,1.1vw,14px);
  font-weight:900;
  letter-spacing:.18em;
}
.jclass-heading h1{
  margin:0;
  color:#111827;
  font-size:clamp(42px,5.2vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:900;
  background:none!important;
  box-shadow:none!important;
}
.jclass-heading h1 span{
  color:#ff514d;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-theme="dark"] .jclass-heading h1{color:#f8fafc}
html[data-theme="dark"] .jclass-heading h1 span{color:#ff6461}
.jclass-scene{
  position:relative;
  width:min(92%,760px);
  margin:-8px auto 0;
  aspect-ratio:1090/680;
  transform-origin:52% 82%;
  animation:jclass-scene-breathe 5.8s cubic-bezier(.45,0,.55,1) infinite;
  isolation:isolate;
}
.jclass-scene-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 24px 34px rgba(15,23,42,.18));
}
.jclass-scene-overlay{
  position:absolute;
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
  z-index:3;
}
.jclass-glasses-overlay{
  left:32.1%;
  top:26.5%;
  width:37.6%;
  animation:jclass-glasses-adjust 7.2s cubic-bezier(.45,0,.2,1) infinite;
  transform-origin:52% 62%;
}
.jclass-hand-overlay{
  left:44%;
  top:64.7%;
  width:30.7%;
  animation:jclass-hand-type .84s cubic-bezier(.55,0,.45,1) infinite;
  transform-origin:50% 78%;
}
.jclass-glasses-glint{
  position:absolute;
  left:49.7%;
  top:42.2%;
  width:7.6%;
  height:1.2%;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  opacity:0;
  transform:rotate(-12deg);
  z-index:4;
  animation:jclass-glasses-glint 7.2s ease-in-out infinite;
}
.jclass-key-flash{
  position:absolute;
  top:82.8%;
  width:2.7%;
  height:.7%;
  border-radius:999px;
  background:rgba(102,197,255,.88);
  box-shadow:0 0 12px rgba(56,189,248,.65);
  opacity:0;
  z-index:4;
  animation:jclass-key-pulse 1.68s steps(1,end) infinite;
}
.jclass-key-flash.key-one{left:54.2%;animation-delay:.10s}
.jclass-key-flash.key-two{left:58.8%;animation-delay:.52s}
.jclass-key-flash.key-three{left:63.5%;animation-delay:.94s}
@keyframes jclass-scene-breathe{
  0%,100%{transform:translate3d(0,0,0) rotate(.02deg)}
  50%{transform:translate3d(0,-3px,0) rotate(-.02deg)}
}
@keyframes jclass-glasses-adjust{
  0%,58%,76%,100%{transform:translate3d(0,0,0) rotate(0);opacity:0}
  59%{opacity:.88;transform:translate3d(0,0,0) rotate(0)}
  63%{opacity:.94;transform:translate3d(-1px,-2px,0) rotate(-.45deg)}
  67%{opacity:.96;transform:translate3d(1px,-3px,0) rotate(.28deg)}
  72%{opacity:.90;transform:translate3d(0,-1px,0) rotate(0)}
  75%{opacity:0;transform:translate3d(0,0,0)}
}
@keyframes jclass-glasses-glint{
  0%,60%,74%,100%{opacity:0;transform:translateX(-8px) rotate(-12deg)}
  64%{opacity:.75}
  69%{opacity:.25;transform:translateX(22px) rotate(-12deg)}
}
@keyframes jclass-hand-type{
  0%,100%{transform:translate3d(0,0,0) rotate(0);opacity:.82}
  25%{transform:translate3d(-.8px,1.2px,0) rotate(-.18deg);opacity:.91}
  50%{transform:translate3d(.8px,.2px,0) rotate(.16deg);opacity:.86}
  75%{transform:translate3d(.2px,1px,0) rotate(-.08deg);opacity:.92}
}
@keyframes jclass-key-pulse{
  0%,23%,100%{opacity:0;transform:scaleX(.55)}
  24%,29%{opacity:.8;transform:scaleX(1)}
  30%{opacity:0}
}
@media(max-width:980px){
  .landing-class-hero{padding:26px 24px 12px!important}
  .jclass-heading{padding-inline:8px}
  .jclass-scene{width:min(96%,700px);margin-top:2px}
}
@media(max-width:620px){
  .landing-class-hero{padding:22px 14px 8px!important}
  .jclass-heading{text-align:center;padding:0}
  .jclass-heading h1{font-size:clamp(34px,11vw,48px)}
  .jclass-eyebrow{font-size:10px;letter-spacing:.13em}
  .jclass-scene{width:108%;margin-left:-4%;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .jclass-scene,.jclass-glasses-overlay,.jclass-hand-overlay,.jclass-glasses-glint,.jclass-key-flash{animation:none!important}
  .jclass-glasses-overlay,.jclass-hand-overlay{opacity:0!important}
}

/* Fixed58: dark-theme transparency cleanup */
html[data-theme="dark"] .jclass-scene-base,
html[data-theme="dark"] .jclass-scene-overlay{
  background:transparent!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .jclass-scene-base{
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.32));
}

/* Fixed59: glasses adjustment overlay contains only the hand and frame pixels. */
.jclass-glasses-overlay{
  background:transparent!important;
  filter:none!important;
}

/* Fixed60: lens interiors are fully transparent in the moving glasses overlay. */
.jclass-glasses-overlay{mix-blend-mode:normal!important;}


/* Fixed62: prevent Safari from revealing hidden white RGB in transparent animated PNG pixels. */
.jclass-scene-base,
.jclass-scene-overlay{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transform:translateZ(0);
  image-rendering:auto;
}
.jclass-glasses-overlay,
.jclass-hand-overlay{
  filter:none!important;
  -webkit-filter:none!important;
}


/* Fixed64: remove the animated glasses bitmap layer entirely.
   The complete eyes and glasses remain in the base scene, so lens interiors
   can never expose white matte pixels or clip the eyes on either theme. */
.jclass-glasses-overlay{
  display:none!important;
}

/* Keep only a subtle, non-destructive light sweep to suggest adjustment. */
.jclass-glasses-glint{
  left:47.8%;
  top:41.7%;
  width:8.2%;
  height:.7%;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

@keyframes jclass-scene-breathe{
  0%,55%,100%{transform:translate3d(0,0,0) rotate(.02deg)}
  62%{transform:translate3d(-1px,-2px,0) rotate(-.05deg)}
  68%{transform:translate3d(1px,-3px,0) rotate(.04deg)}
  74%{transform:translate3d(0,-1px,0) rotate(0)}
}