:root{
  --cn-primary:#6d35ff;
  --cn-primary-2:#3b1bc4;
  --cn-secondary:#13c987;
  --cn-accent:#ff4f8b;
  --cn-warning:#ff9f1a;
  --cn-blue:#2f7bff;
  --cn-bg:#f7f7ff;
  --cn-card:#ffffff;
  --cn-text:#15172b;
  --cn-muted:#6f7388;
  --cn-line:#e8e8f2;
  --cn-shadow:0 20px 60px rgba(41,31,86,.12);
  --cn-shadow-soft:0 10px 30px rgba(41,31,86,.08);
  --cn-radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--cn-text);
  background:
    radial-gradient(circle at 10% 10%,rgba(109,53,255,.08),transparent 28%),
    radial-gradient(circle at 90% 15%,rgba(47,123,255,.08),transparent 25%),
    var(--cn-bg);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 32px));margin:auto}

.site-header,
.portal-header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px max(24px,calc((100vw - 1180px)/2));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(232,232,242,.9);
}
.site-brand,
.portal-header strong{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.2rem;
  font-weight:800;
  color:#4420b7;
}
.site-brand-badge{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--cn-primary),var(--cn-blue));
  box-shadow:0 10px 24px rgba(109,53,255,.28);
}
.site-nav,
.portal-header nav{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.site-nav a,
.portal-header nav a{
  font-weight:700;color:#34384f;
}
.site-nav a:hover,
.portal-header nav a:hover,
.portal-header nav a.active{color:var(--cn-primary)}
.nav-cta{
  padding:11px 16px;border-radius:12px;color:#fff!important;
  background:linear-gradient(135deg,var(--cn-primary),#8f3dff);
  box-shadow:0 10px 24px rgba(109,53,255,.25);
}

.premium-hero{
  position:relative;
  overflow:hidden;
  min-height:640px;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 75% 35%,rgba(55,202,255,.25),transparent 22%),
    radial-gradient(circle at 70% 50%,rgba(255,80,180,.22),transparent 27%),
    linear-gradient(135deg,#0a0b3f 0%,#20106d 42%,#5d1fde 100%);
}
.premium-hero::before,
.premium-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(5px);
}
.premium-hero::before{
  width:340px;height:340px;right:-120px;top:-80px;
  background:rgba(116,231,255,.15);
}
.premium-hero::after{
  width:260px;height:260px;left:-120px;bottom:-120px;
  background:rgba(255,87,183,.14);
}
.premium-hero-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:48px;
  padding:88px 0 100px;
}
.hero-chip{
  display:inline-flex;
  gap:8px;align-items:center;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  font-weight:800;
}
.premium-hero h1{
  margin:20px 0;
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.98;
  letter-spacing:-.05em;
}
.premium-hero h1 span{
  background:linear-gradient(90deg,#8ff1ff,#c59cff,#ff9fc9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.premium-hero p{
  max-width:650px;
  font-size:1.15rem;
  line-height:1.75;
  color:rgba(255,255,255,.86);
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.button,
.primary-action,
.exam-button,
.result-button{
  border:0;
  border-radius:14px;
  padding:14px 20px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#7d42ff,#a33dff);
  box-shadow:0 14px 30px rgba(35,16,110,.32);
}
.button.secondary{
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:none;
}
.hero-visual{
  position:relative;
  display:grid;
  place-items:center;
}
.hero-orbit{
  width:min(460px,100%);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,transparent 46%);
}
.hero-flask{
  width:70%;
  filter:drop-shadow(0 28px 36px rgba(11,5,60,.4));
}
.hero-stat-strip{
  position:relative;z-index:2;
  margin-top:-55px;
}
.stat-strip{
  background:#fff;
  color:var(--cn-text);
  border-radius:24px;
  box-shadow:var(--cn-shadow);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  overflow:hidden;
}
.stat-strip article{
  padding:24px 18px;
  text-align:center;
  border-right:1px solid var(--cn-line);
}
.stat-strip article:last-child{border-right:0}
.stat-icon{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  margin:0 auto 12px;
  font-size:1.4rem;
  background:linear-gradient(135deg,#efe8ff,#daf4ff);
}
.stat-strip h3{margin:0 0 6px;font-size:1rem}
.stat-strip p{margin:0;color:var(--cn-muted);font-size:.9rem}

.section{padding:80px 0}
.section-heading{text-align:center;margin-bottom:36px}
.section-heading h2{font-size:clamp(2rem,4vw,3rem);margin:0 0 10px}
.section-heading p{margin:0;color:var(--cn-muted)}

.premium-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.premium-card,
.cards article,
.builder-card,
.quiz-admin-card,
.student-card,
.question-card,
.score-card,
.review-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(232,232,242,.95);
  border-radius:var(--cn-radius);
  box-shadow:var(--cn-shadow-soft);
}
.premium-card{
  padding:24px;
  transition:.25s ease;
}
.premium-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--cn-shadow);
}
.premium-icon{
  width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:18px;
}
.icon-purple{background:#efe6ff;color:#6d35ff}
.icon-pink{background:#ffe5f0;color:#ff4f8b}
.icon-blue{background:#e3efff;color:#2f7bff}
.icon-green{background:#e2faef;color:#13a56f}
.icon-orange{background:#fff0db;color:#f28d00}
.icon-cyan{background:#def9ff;color:#0d9fc4}
.premium-card h3{margin:0 0 10px}
.premium-card p{margin:0;color:var(--cn-muted);line-height:1.65}

.workflow-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.workflow-card{
  position:relative;
  padding:26px;
  background:#fff;
  border:1px solid var(--cn-line);
  border-radius:22px;
  box-shadow:var(--cn-shadow-soft);
}
.workflow-step{
  position:absolute;
  top:-14px;left:20px;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--cn-primary),var(--cn-blue));
}
.workflow-card h3{margin-top:12px}

.premium-banner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(135deg,#1c0a66,#6e29e8);
  color:#fff;
  box-shadow:var(--cn-shadow);
}
.premium-banner>div{padding:38px}
.premium-banner h2{font-size:2.4rem;margin:0 0 14px}
.premium-banner p{color:rgba(255,255,255,.82);line-height:1.7}

.site-footer{
  background:#080d2c;
  color:#fff;
  padding:42px 0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  gap:28px;
}
.site-footer p,.site-footer a{color:rgba(255,255,255,.72)}
.footer-bottom{
  margin-top:28px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;color:rgba(255,255,255,.55);
}

/* App-wide premium retrofit */
.portal-header.admin{
  background:linear-gradient(90deg,#2f176f,#5d2b9f);
}
.portal-header.admin strong,
.portal-header.admin a{color:#fff}
.portal-header.admin a:hover,
.portal-header.admin a.active{color:#9fe8ff}

.students-hero,
.quizzes-header,
.builder-heading,
.result-heading{
  border-radius:28px;
}
.students-hero,
.quizzes-header{
  background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.15),transparent 30%),
    linear-gradient(135deg,#32156f,#6d35ff 62%,#2f7bff);
}
.student-stats article,
.quiz-admin-card,
.question-card{
  transition:.2s ease;
}
.student-stats article:hover,
.quiz-admin-card:hover,
.question-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--cn-shadow);
}

.exam-header{
  background:linear-gradient(90deg,#2f176f,#6d35ff)!important;
  color:#fff!important;
}
.exam-header p,.exam-header h1,.exam-header a{color:#fff!important}
.exam-timer{
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
}
.progress-bar{
  background:linear-gradient(90deg,#6d35ff,#ff4f8b,#2f7bff)!important;
}
.answer-option{
  transition:.2s ease;
}
.answer-option:hover{
  transform:translateY(-2px);
  border-color:#a68cff;
}
.answer-option.selected{
  background:linear-gradient(135deg,#f1eaff,#e9f3ff)!important;
  border-color:#6d35ff!important;
}
.submit-card{
  box-shadow:0 -20px 60px rgba(22,10,66,.25);
}
.accuracy-ring{
  background:conic-gradient(#6d35ff var(--accuracy),#ff4f8b 0deg,#eee 0)!important;
}
.review-option.correct-answer{
  background:linear-gradient(135deg,#e5faee,#f3fff8)!important;
}
.review-option.wrong-answer{
  background:linear-gradient(135deg,#fff0f4,#fff8fa)!important;
}

@media(max-width:980px){
  .premium-hero-grid,
  .premium-banner{grid-template-columns:1fr}
  .premium-grid{grid-template-columns:1fr 1fr}
  .workflow-grid{grid-template-columns:1fr 1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-strip article{border-bottom:1px solid var(--cn-line)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .site-header,.portal-header{align-items:flex-start;flex-direction:column}
  .site-nav,.portal-header nav{gap:12px}
  .premium-hero-grid{padding:58px 0 90px}
  .premium-hero h1{font-size:3rem}
  .premium-grid,.workflow-grid,.footer-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr}
  .hero-visual{display:none}
}