:root {
  --stemath-primary: #082B63;
  --stemath-secondary: #0D6EFD;
  --stemath-accent: #F2B84B;
  --stemath-text: #122033;
  --stemath-muted: #61708a;
  --stemath-bg: #f6f8fc;
  --stemath-card: #ffffff;
  --stemath-border: rgba(8,43,99,.12);
  --stemath-radius: 24px;
  --stemath-shadow: 0 18px 45px rgba(8, 43, 99, .12);
}

.stemath-site {
  font-family: Inter, Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--stemath-text);
  line-height: 1.6;
}

.stemath-site * { box-sizing: border-box; }
.stemath-site a { color: var(--stemath-secondary); text-decoration: none; }
.stemath-site h1, .stemath-site h2, .stemath-site h3 { line-height: 1.12; margin: 0 0 14px; color: var(--stemath-primary); }
.stemath-site p { margin: 0 0 18px; color: var(--stemath-muted); }

.stemath-home, .stemath-packages, .stemath-register-wrap, .stemath-login-wrap, .stemath-dashboard, .stemath-contact, .stemath-diagnostic {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 18px;
}

.stemath-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 28px;
  align-items: center;
  padding: 46px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(13,110,253,.18), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #edf5ff 100%);
  box-shadow: var(--stemath-shadow);
  border: 1px solid var(--stemath-border);
  overflow: hidden;
}

.stemath-logo-main {
  max-width: 340px;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

.stemath-badge, .stemath-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--stemath-primary);
  background: rgba(242,184,75,.2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 14px;
}

.stemath-hero h1 {
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: -0.04em;
  max-width: 850px;
}

.stemath-hero p {
  font-size: 18px;
  max-width: 780px;
}

.stemath-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.stemath-btn, .stemath-site button.stemath-btn, .stemath-site input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 0;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.stemath-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8,43,99,.16); }
.stemath-btn.primary { background: linear-gradient(135deg, var(--stemath-primary), var(--stemath-secondary)); color: #fff !important; }
.stemath-btn.ghost { background: #fff; color: var(--stemath-primary) !important; border: 1px solid var(--stemath-border); }
.stemath-btn.small { min-height: 38px; padding: 8px 14px; font-size: 13px; }

.stemath-hero-card, .stemath-form-card, .stemath-panel, .stemath-feature-card, .stemath-price-card, .stemath-dashboard-card {
  background: var(--stemath-card);
  border: 1px solid var(--stemath-border);
  border-radius: var(--stemath-radius);
  box-shadow: 0 10px 30px rgba(8,43,99,.08);
}

.stemath-hero-card {
  padding: 28px;
  position: relative;
}
.stemath-hero-card:before {
  content: "∑";
  position: absolute;
  right: 26px;
  top: 16px;
  font-size: 76px;
  color: rgba(13,110,253,.1);
  font-weight: 900;
}
.stemath-hero-card ul, .stemath-price-card ul {
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}
.stemath-hero-card li, .stemath-price-card li {
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px solid rgba(8,43,99,.07);
}
.stemath-hero-card li:before, .stemath-price-card li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--stemath-secondary);
  font-weight: 900;
}

.stemath-programs, .stemath-levels, .stemath-cta, .stemath-packages {
  margin-top: 42px;
}
.stemath-programs > h2, .stemath-levels > h2, .stemath-packages > h2, .stemath-cta > h2 {
  font-size: clamp(28px, 4vw, 42px);
  text-align: center;
}
.stemath-section-intro { text-align: center; max-width: 700px; margin: 0 auto 24px !important; }

.stemath-card-grid, .stemath-price-grid, .stemath-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.stemath-feature-card, .stemath-price-card, .stemath-panel, .stemath-dashboard-card { padding: 24px; }
.stemath-feature-card h3 { font-size: 20px; }

.stemath-level-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.stemath-level-line span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(8,43,99,.08), rgba(13,110,253,.12));
  border: 1px solid var(--stemath-border);
  font-weight: 900;
  color: var(--stemath-primary);
}

.stemath-price-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
}
.stemath-price-card { position: relative; display: flex; flex-direction: column; }
.stemath-price-card.featured { border: 2px solid var(--stemath-secondary); transform: translateY(-6px); }
.stemath-ribbon { position: absolute; right: 18px; top: -16px; background: var(--stemath-accent); color: #1b2436; }
.stemath-price strong { font-size: 42px; color: var(--stemath-primary); letter-spacing: -0.04em; }
.stemath-price span { display: block; color: var(--stemath-muted); font-weight: 700; }
.stemath-price-card .stemath-btn { margin-top: auto; width: 100%; }

.stemath-cta {
  text-align: center;
  padding: 44px;
  border-radius: 30px;
  background: var(--stemath-primary);
}
.stemath-cta h2, .stemath-cta p { color: #fff; }

.stemath-form-card {
  max-width: 920px;
  margin: 0 auto;
  padding: 30px;
}
.stemath-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stemath-site label {
  display: grid;
  gap: 7px;
  font-weight: 800;
  color: var(--stemath-primary);
  margin-bottom: 12px;
}
.stemath-site input, .stemath-site select, .stemath-site textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid var(--stemath-border);
  padding: 10px 12px;
  background: #fff;
  color: var(--stemath-text);
  font: inherit;
}
.stemath-site textarea { min-height: 100px; }

.stemath-alert {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(13,110,253,.08);
  border: 1px solid rgba(13,110,253,.18);
  margin-bottom: 18px;
}
.stemath-alert.success { background: rgba(43,158,91,.1); border-color: rgba(43,158,91,.2); }
.stemath-alert.error { background: rgba(193,39,45,.09); border-color: rgba(193,39,45,.2); }

.stemath-dashboard-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--stemath-primary), var(--stemath-secondary));
  color: #fff;
}
.stemath-dashboard-head h2, .stemath-dashboard-head span { color: #fff; margin: 0; }
.stemath-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stemath-panel h3 { font-size: 22px; }
.stemath-list-item {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(8,43,99,.08);
}
.stemath-list-item:last-child { border-bottom: 0; }
.stemath-list-item strong { color: var(--stemath-primary); }
.stemath-list-item span { color: var(--stemath-muted); }
.stemath-list-item a { font-weight: 800; }
.stemath-list-item details { margin-top: 6px; }
.stemath-list-item summary { cursor: pointer; color: var(--stemath-secondary); font-weight: 800; }

.stemath-diagnostic, .stemath-contact { padding: 36px; border-radius: 28px; background: #fff; box-shadow: var(--stemath-shadow); }

@media (max-width: 980px) {
  .stemath-hero, .stemath-card-grid, .stemath-price-grid, .stemath-dashboard-grid { grid-template-columns: 1fr; }
  .stemath-level-line { grid-template-columns: repeat(3, 1fr); }
  .stemath-price-card.featured { transform: none; }
}
@media (max-width: 640px) {
  .stemath-home, .stemath-packages, .stemath-register-wrap, .stemath-login-wrap, .stemath-dashboard, .stemath-contact, .stemath-diagnostic { padding: 20px 12px; }
  .stemath-hero { padding: 24px; border-radius: 24px; }
  .stemath-form-grid, .stemath-level-line { grid-template-columns: 1fr; }
  .stemath-dashboard-head { align-items: flex-start; flex-direction: column; }
  .stemath-actions { flex-direction: column; }
  .stemath-btn { width: 100%; }
}