:root{
  --bg1:#0f0f23; --bg2:#1b1442; --bg3:#241b56;
  --ink:#f1f0ff; --muted:#b9b4e0;
  --french:#4d8dff; --maths:#a463ff; --english:#22c9b0; --art:#ff5da2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",Nunito,"Segoe UI",system-ui,sans-serif;
  background:radial-gradient(ellipse at top,var(--bg3),var(--bg1) 70%);
  overflow-x:hidden;position:relative;
}
.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:drift 22s ease-in-out infinite}
.blob.b1{width:340px;height:340px;background:var(--french);top:-80px;left:-60px;animation-duration:26s}
.blob.b2{width:280px;height:280px;background:var(--art);bottom:-60px;right:-40px;animation-duration:20s;animation-delay:-6s}
.blob.b3{width:260px;height:260px;background:var(--maths);top:40%;right:15%;animation-duration:24s;animation-delay:-12s}
.blob.b4{width:220px;height:220px;background:var(--english);bottom:20%;left:8%;animation-duration:18s;animation-delay:-3s}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-40px) scale(1.1)}
  66%{transform:translate(-25px,25px) scale(.95)}
}
header{position:relative;z-index:1;text-align:center;padding:56px 20px 20px}
header h1{font-size:clamp(1.8rem,5vw,3rem);margin:0 0 10px;
  background:linear-gradient(90deg,var(--french),var(--art));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);font-size:1.05rem;margin:0}
main{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:20px}
footer{position:relative;z-index:1;text-align:center;color:var(--muted);padding:30px;font-size:.9rem}
footer a{color:var(--muted)}

/* portal grid (landing page) */
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;padding:30px 0 10px;perspective:1000px}
.portal{
  --glow:var(--french);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;color:var(--ink);text-align:center;
  padding:34px 18px;border-radius:26px;
  background:linear-gradient(160deg,#ffffff14,#ffffff05);
  border:1px solid #ffffff22;backdrop-filter:blur(10px);
  box-shadow:0 8px 30px #00000040;
  transform:perspective(700px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) scale(1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  will-change:transform;
}
.portal:hover,.portal:focus-visible{
  border-color:var(--glow);
  box-shadow:0 14px 40px -8px var(--glow),0 0 0 1px var(--glow) inset;
}
.portal[data-color="french"]{--glow:var(--french)}
.portal[data-color="maths"]{--glow:var(--maths)}
.portal[data-color="english"]{--glow:var(--english)}
.portal[data-color="art"]{--glow:var(--art)}
.portal .icon{font-size:2.8rem;transition:transform .3s ease}
.portal:hover .icon{transform:scale(1.2) rotate(-6deg)}
.portal .label{font-size:1.25rem;font-weight:800;letter-spacing:.3px}
.portal .sub{font-size:.85rem;color:var(--muted)}
.portal:focus-visible{outline:3px solid var(--glow);outline-offset:3px}

/* coming-soon subject pages */
.coming-soon{position:relative;z-index:1;max-width:640px;margin:8vh auto 0;text-align:center;padding:20px}
.coming-soon .badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:120px;height:120px;border-radius:32px;font-size:3.4rem;margin-bottom:22px;
  background:linear-gradient(160deg,#ffffff18,#ffffff05);border:1px solid #ffffff22;
  animation:bob 3s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.coming-soon h1{font-size:clamp(1.6rem,5vw,2.4rem);margin:0 0 10px}
.coming-soon p{color:var(--muted);font-size:1.05rem;line-height:1.6}
.back-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  color:var(--ink);text-decoration:none;font-weight:700;
  padding:10px 18px;border-radius:999px;border:1px solid #ffffff30;
  background:#ffffff10;transition:background .2s ease,transform .2s ease;
}
.back-link:hover{background:#ffffff22;transform:translateX(-3px)}