/* ===================== فونت فارسی ===================== */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap');

/* ===================== متغیرها ===================== */
:root {
  --bg:        #0b1020;
  --bg-soft:   #121833;
  --card:      #161e3d;
  --card-2:    #1b2547;
  --border:    #26305a;
  --text:      #e8ecf7;
  --muted:     #9aa6c8;
  --primary:   #6c8bff;
  --primary-2: #8a6cff;
  --accent:    #2dd4bf;
  --radius:    16px;
  --shadow:    0 18px 40px rgba(0, 0, 0, 0.35);
  --max:       1140px;
}

/* ===================== پایه ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', system-ui, Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { line-height: 1.4; font-weight: 700; }

.gradient-text {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===================== دکمه‌ها ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 22px; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 14px 28px; font-size: 16px; }

.btn-primary {
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color: #fff; box-shadow: 0 10px 24px rgba(108, 139, 255, .35);
}
.btn-outline { border-color: var(--border); color: var(--text); background: transparent; }
.btn-outline:hover { background: var(--card); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--text); }

/* ===================== هدر ===================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(11, 16, 32, .75);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.logo-mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 15px; font-weight: 700;
  font-family: 'Vazirmatn', monospace;
  animation: logoPulse 3s ease-in-out infinite;
}
.logo-text {
  direction: ltr; letter-spacing: 1.5px; font-size: 22px; font-weight: 800;
  font-family: 'Poppins', 'Vazirmatn', system-ui, sans-serif;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-2), var(--primary));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: logoShimmer 6s linear infinite;
}
@keyframes logoShimmer { to { background-position: 300% 0; } }
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 139, 255, .0); transform: translateY(0); }
  50%      { box-shadow: 0 0 18px 2px rgba(108, 139, 255, .55); transform: translateY(-1px); }
}
.site-footer .logo-text { font-size: 24px; }

.main-nav { display: flex; gap: 28px; }
.main-nav a { color: var(--muted); font-size: 15px; font-weight: 500; transition: color .2s; }
.main-nav a:hover { color: var(--text); }
.main-nav a.active { color: var(--text); }
.main-nav a.active::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }

/* ===================== Hero ===================== */
.hero { padding: 80px 0 90px; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px circle at 85% 10%, rgba(108,139,255,.18), transparent 60%),
    radial-gradient(500px circle at 10% 30%, rgba(45,212,191,.12), transparent 60%);
  pointer-events: none;
}
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; position: relative; }

.badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 13px; color: var(--muted); margin-bottom: 22px;
}
.hero-text h1 { font-size: 46px; margin-bottom: 18px; }
.hero-sub { color: var(--muted); font-size: 18px; max-width: 520px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 24px; color: var(--text); }
.hero-stats span { font-size: 13px; color: var(--muted); }

/* کارت کد */
.code-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transform: rotate(-1.5deg);
}
.code-card-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; background: var(--card-2); border-bottom: 1px solid var(--border);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
.code-card-title { margin-right: auto; font-size: 13px; color: var(--muted); font-family: monospace; }
.code-card-body { padding: 22px; font-size: 15px; line-height: 2.1; direction: ltr; text-align: left; overflow-x: auto; }
.code-card-body code { font-family: 'Courier New', monospace; color: var(--text); }
.c-key { color: #ff7edb; } .c-var { color: #6cf; } .c-str { color: #9ece6a; } .c-fn { color: #ffc777; }

/* ===================== بخش‌های عمومی ===================== */
.section-head { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.section-head h2 { font-size: 34px; margin-bottom: 12px; }
.section-head p { color: var(--muted); font-size: 17px; }

.features, .courses, .roadmap { padding: 80px 0; }
.features { background: var(--bg-soft); }

/* ویژگی‌ها */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 22px; transition: transform .2s, border-color .2s;
}
.feature-card:hover { transform: translateY(-6px); border-color: var(--primary); }
.feature-icon { font-size: 34px; margin-bottom: 14px; }
.feature-card h3 { font-size: 19px; margin-bottom: 8px; }
.feature-card p { color: var(--muted); font-size: 15px; }

/* دوره‌ها */
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.course-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column;
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.course-thumb { height: 130px; display: grid; place-items: center; font-size: 52px; }
.course-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.course-tag { font-size: 12px; color: var(--accent); margin-bottom: 8px; font-weight: 600; }
.course-card h3 { font-size: 18px; margin-bottom: 8px; }
.course-card p { color: var(--muted); font-size: 14px; margin-bottom: 16px; flex: 1; }
.course-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.course-price { color: var(--text); font-weight: 700; font-size: 16px; }
.course-price.free { color: var(--accent); }

/* مسیر یادگیری */
.roadmap-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.roadmap-steps li {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 22px; position: relative;
}
.step-num {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 16px;
}
.roadmap-steps h3 { font-size: 18px; margin-bottom: 8px; }
.roadmap-steps p { color: var(--muted); font-size: 14px; }

/* CTA */
.cta { padding: 80px 0; }
.cta-inner {
  text-align: center; padding: 60px 30px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(108,139,255,.18), rgba(138,108,255,.18));
  border: 1px solid var(--border);
}
.cta h2 { font-size: 32px; margin-bottom: 12px; }
.cta p { color: var(--muted); font-size: 17px; margin-bottom: 26px; }

/* ===================== فوتر ===================== */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding-top: 56px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 40px; }
.footer-brand p { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 260px; }
.footer-col h4 { font-size: 15px; margin-bottom: 14px; }
.footer-col a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); padding: 20px 0; color: var(--muted); font-size: 13px; text-align: center; }

/* ===================== واکنش‌گرا (موبایل) ===================== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-text h1 { font-size: 36px; }
  .features-grid, .roadmap-steps { grid-template-columns: repeat(2, 1fr); }
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }

  .main-nav {
    position: fixed; top: 68px; right: 0; left: 0;
    flex-direction: column; gap: 0; padding: 10px 20px;
    background: var(--bg-soft); border-bottom: 1px solid var(--border);
    transform: translateY(-150%); transition: transform .3s; z-index: 40;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: flex; }
}

@media (max-width: 560px) {
  .features-grid, .roadmap-steps, .courses-grid, .footer-inner { grid-template-columns: 1fr; }
  .hero-text h1 { font-size: 30px; }
  .hero-stats { gap: 22px; }
  .header-actions .btn-ghost { display: none; }
}

/* ===================== هاب امکانات ===================== */
.hub { padding: 80px 0; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hub-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.hub-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow); }
.hub-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; margin-bottom: 16px; }
.hub-card h3 { font-size: 20px; margin-bottom: 8px; }
.hub-card p { color: var(--muted); font-size: 15px; margin-bottom: 16px; flex: 1; }
.hub-link { color: var(--primary); font-weight: 600; font-size: 14px; }

/* ===================== سربرگ صفحات داخلی ===================== */
.page-hero { padding: 56px 0 30px; text-align: center; position: relative; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px circle at 50% 0%, rgba(108,139,255,.16), transparent 65%);
  pointer-events: none;
}
.page-hero .badge { margin-bottom: 16px; }
.page-hero h1 { font-size: 40px; margin-bottom: 14px; position: relative; }
.page-hero p { color: var(--muted); font-size: 18px; max-width: 620px; margin: 0 auto; position: relative; }
.page-section { padding: 30px 0 70px; }

/* ===================== مسیرهای یادگیری ===================== */
.paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
.path-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; cursor: pointer; transition: transform .2s, border-color .2s;
}
.path-card:hover, .path-card.active { transform: translateY(-4px); border-color: var(--primary); }
.path-card .path-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; margin-bottom: 16px; }
.path-card h3 { font-size: 20px; margin-bottom: 8px; }
.path-card p { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.path-card .path-level { font-size: 13px; color: var(--accent); font-weight: 600; }

/* تایم‌لاین مراحل */
.timeline-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 34px; margin-top: 10px;
}
.timeline-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.timeline-head .path-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; }
.timeline-head h2 { font-size: 26px; }
.timeline { list-style: none; position: relative; padding-inline-start: 36px; }
.timeline::before { content: ""; position: absolute; inline-size: 2px; inset-block: 8px; inset-inline-start: 11px; background: var(--border); }
.timeline li { position: relative; padding-bottom: 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: -30px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--bg);
}
.timeline h4 { font-size: 17px; margin-bottom: 4px; }
.timeline p { color: var(--muted); font-size: 14px; }

/* ===================== کتابخانه کد ===================== */
.lib-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; align-items: center; }
.search-box {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px;
}
.search-box input { flex: 1; background: none; border: none; color: var(--text); font-family: inherit; font-size: 15px; outline: none; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); color: var(--muted); font-family: inherit;
  font-size: 14px; cursor: pointer; transition: .2s;
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.snippets-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.snippet {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.snippet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.snippet-head h3 { font-size: 16px; }
.snippet-lang { font-size: 12px; color: var(--accent); font-weight: 600; }
.snippet pre { margin: 0; padding: 18px; direction: ltr; text-align: left; overflow-x: auto; background: var(--bg-soft); flex: 1; }
.snippet code { font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.9; color: var(--text); white-space: pre; }
.snippet-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; }
.snippet-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.snippet-tags span { font-size: 12px; color: var(--muted); background: var(--card-2); padding: 3px 10px; border-radius: 999px; }
.copy-btn {
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 13px; padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: .2s;
}
.copy-btn:hover { background: var(--primary); border-color: var(--primary); }
.copy-btn.copied { background: var(--accent); border-color: var(--accent); color: #062; }
.empty-state { text-align: center; color: var(--muted); padding: 50px; grid-column: 1 / -1; }

/* ===================== تایپ ۱۰ انگشتی ===================== */
.typing-wrap { max-width: 820px; margin: 0 auto; }
.typing-stats { display: flex; gap: 16px; margin-bottom: 20px; justify-content: center; flex-wrap: wrap; }
.stat-pill {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 26px; text-align: center; min-width: 110px;
}
.stat-pill strong { display: block; font-size: 26px; color: var(--text); }
.stat-pill span { font-size: 13px; color: var(--muted); }
.typing-display {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; font-size: 24px; line-height: 2.4; direction: ltr; text-align: left;
  font-family: 'Courier New', monospace; margin-bottom: 18px; min-height: 120px; letter-spacing: 1px;
}
.typing-display .char { transition: color .1s; color: var(--muted); }
.typing-display .char.correct { color: var(--accent); }
.typing-display .char.wrong { color: #ff6b6b; background: rgba(255,107,107,.15); border-radius: 3px; }
.typing-display .char.current { background: var(--primary); color: #fff; border-radius: 3px; }
.typing-input {
  width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; color: var(--text); font-family: 'Courier New', monospace; font-size: 18px;
  direction: ltr; text-align: left; outline: none;
}
.typing-input:focus { border-color: var(--primary); }
.typing-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ===================== ICDL (آکاردئون) ===================== */
.accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.acc-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.acc-head {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: right;
  background: none; border: none; color: var(--text); font-family: inherit;
  font-size: 18px; font-weight: 600; padding: 20px 24px; cursor: pointer;
}
.acc-head .acc-icon { font-size: 24px; }
.acc-head .acc-arrow { margin-inline-start: auto; transition: transform .3s; color: var(--muted); }
.acc-item.open .acc-arrow { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.acc-body-inner { padding: 0 24px 22px; color: var(--muted); }
.acc-body-inner ul { padding-inline-start: 22px; }
.acc-body-inner li { margin-bottom: 8px; }

/* ===================== ابزارها ===================== */
.tools-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.tool-tab {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  font-family: inherit; font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: 12px; cursor: pointer; transition: .2s;
}
.tool-tab:hover { color: var(--text); }
.tool-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tool-panel { display: none; max-width: 760px; margin: 0 auto; }
.tool-panel.active { display: block; }
.tool-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.tool-box h2 { font-size: 24px; margin-bottom: 8px; }
.tool-box > p.tool-desc { color: var(--muted); margin-bottom: 24px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; margin-bottom: 8px; color: var(--muted); }
.field input[type="text"], .field input[type="number"], .field textarea, .field select {
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 15px; outline: none;
}
.field textarea { min-height: 160px; direction: ltr; text-align: left; font-family: 'Courier New', monospace; line-height: 1.7; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--primary); }
.range-row .range-val { min-width: 36px; text-align: center; font-weight: 700; }
.check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--primary); }
.check-row label { margin: 0; color: var(--text); cursor: pointer; }

/* خروجی رمز عبور */
.pw-output {
  display: flex; align-items: center; gap: 10px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.pw-output code { flex: 1; font-family: 'Courier New', monospace; font-size: 18px; direction: ltr; text-align: left; word-break: break-all; }
.strength-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 8px; }
.strength-bar span { display: block; height: 100%; width: 0; transition: width .3s, background .3s; }
.strength-label { font-size: 14px; font-weight: 600; }

/* بررسی‌کننده کد پایتون */
.check-result { margin-top: 22px; }
.issue {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--border); margin-bottom: 12px;
}
.issue.error { border-inline-start-color: #ff6b6b; }
.issue.warning { border-inline-start-color: #ffbd2e; }
.issue.info { border-inline-start-color: var(--primary); }
.issue .issue-icon { font-size: 18px; }
.issue .issue-body strong { display: block; margin-bottom: 2px; }
.issue .issue-line { font-size: 13px; color: var(--muted); direction: ltr; text-align: left; font-family: monospace; }
.issue .issue-msg { color: var(--muted); font-size: 14px; }
.no-issues { text-align: center; padding: 30px; color: var(--accent); font-weight: 600; }

/* ابزارهای کوچک خروجی */
.out-area {
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font-family: 'Courier New', monospace; font-size: 14px;
  direction: ltr; text-align: left; min-height: 80px; white-space: pre-wrap; word-break: break-all; margin-top: 8px;
}

/* ===================== واژه‌نامه ===================== */
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gloss-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.gloss-card h3 { font-size: 17px; margin-bottom: 6px; color: var(--primary); }
.gloss-card p { color: var(--muted); font-size: 14px; }

/* ===================== کوییز ===================== */
.quiz-box { max-width: 680px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.quiz-progress { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.quiz-q { font-size: 20px; margin-bottom: 22px; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-opt {
  text-align: right; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 16px; padding: 14px 18px; border-radius: 12px; cursor: pointer; transition: .15s;
}
.quiz-opt:hover { border-color: var(--primary); }
.quiz-opt.correct { background: rgba(45,212,191,.15); border-color: var(--accent); }
.quiz-opt.wrong { background: rgba(255,107,107,.15); border-color: #ff6b6b; }
.quiz-opt:disabled { cursor: default; }
.quiz-result { text-align: center; }
.quiz-result .score { font-size: 48px; font-weight: 800; }

/* ===================== واکنش‌گرا برای صفحات جدید ===================== */
@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .paths-grid { grid-template-columns: repeat(2, 1fr); }
  .snippets-grid, .glossary-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 32px; }
}
@media (max-width: 560px) {
  .hub-grid, .paths-grid { grid-template-columns: 1fr; }
  .typing-display { font-size: 20px; }
}

/* ===================== آیکون‌های تصویری (جایگزین ایموجی) ===================== */
/* این تصاویرِ جایگزین هستند؛ فایل‌های داخل images/icons/ را با عکس دلخواه خود عوض کن. */
.icon-img { display: block; object-fit: contain; }

.hub-icon .icon-img { width: 30px; height: 30px; }

.feature-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--card-2); border: 1px solid var(--border);
}
.feature-card { text-align: center; }
.feature-icon .icon-img { width: 30px; height: 30px; }

.path-icon .icon-img { width: 56%; height: 56%; }

.acc-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.acc-icon .icon-img { width: 26px; height: 26px; }

.tool-tab .icon-img,
.tool-box h2 .icon-img { display: inline-block; vertical-align: middle; }
.tool-tab .icon-img { width: 18px; height: 18px; margin-left: 6px; }
.tool-box h2 .icon-img { width: 24px; height: 24px; margin-left: 8px; }

/* ===================== انیمیشن ظاهرشدن ===================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .logo-text, .logo-mark { animation: none; }
}

/* ===================== هاب زبان‌ها ===================== */
.lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lang-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lang-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow); }
.lang-card-top {
  height: 110px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; position: relative;
}
.lang-card-icon { width: 46px; height: 46px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.lang-en { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: rgba(255,255,255,.92); direction: ltr; }
.lang-card-body { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; }
.lang-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lang-card-head h3 { font-size: 20px; }
.lang-status {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--card-2); color: var(--muted); border: 1px solid var(--border);
}
.lang-status.full { color: var(--accent); border-color: var(--accent); }
.lang-card-body p { color: var(--muted); font-size: 14px; flex: 1; margin-bottom: 16px; }
.lang-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.lang-start { color: var(--primary); font-weight: 600; }

.start-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 36px; padding: 28px 32px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(108,139,255,.15), rgba(45,212,191,.12));
  border: 1px solid var(--border);
}
.start-banner h3 { font-size: 20px; margin-bottom: 6px; }
.start-banner p { color: var(--muted); font-size: 15px; }

/* ===================== صفحه‌ی دوره ===================== */
.course-hero { padding: 40px 0 10px; position: relative; }
.course-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px circle at 80% 0%, rgba(108,139,255,.14), transparent 65%);
  pointer-events: none;
}
.course-hero-inner { display: flex; align-items: center; gap: 22px; position: relative; }
.course-hero-icon { width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center; flex-shrink: 0; }
.course-hero-icon img { width: 42px; height: 42px; }
.course-back { color: var(--muted); font-size: 14px; display: inline-block; margin-bottom: 6px; }
.course-back:hover { color: var(--text); }
.course-hero-inner h1 { font-size: 34px; }
.course-en { font-family: 'Poppins', sans-serif; color: var(--muted); font-size: 20px; direction: ltr; font-weight: 600; }
.course-hero-inner p { color: var(--muted); font-size: 16px; margin-top: 6px; }

.course-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.course-sidebar {
  position: sticky; top: 84px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; max-height: calc(100vh - 110px); overflow-y: auto;
}
.level-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.level-tab {
  flex: 1; padding: 9px; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--muted);
  font-family: inherit; font-size: 14px; font-weight: 600; transition: .2s;
}
.level-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.lesson-list { display: flex; flex-direction: column; gap: 4px; }
.lesson-link {
  text-align: right; background: none; border: none; color: var(--muted);
  font-family: inherit; font-size: 14.5px; padding: 11px 12px; border-radius: 10px;
  cursor: pointer; transition: .15s; display: flex; align-items: center; gap: 10px; line-height: 1.6;
}
.lesson-link:hover { background: var(--bg-soft); color: var(--text); }
.lesson-link.active { background: var(--card-2); color: var(--text); }
.lesson-num {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 7px; background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700;
}
.lesson-link.active .lesson-num { background: var(--primary); border-color: var(--primary); color: #fff; }

.course-content {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 38px; min-width: 0;
}
.lesson-head { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 24px; }
.lesson-badge { font-size: 13px; color: var(--accent); font-weight: 600; }
.lesson-head h2 { font-size: 28px; margin-top: 8px; }
.lesson-text { margin-bottom: 16px; }
.lesson-text p { color: var(--text); margin-bottom: 12px; }
.lesson-text ul, .lesson-text ol { padding-inline-start: 24px; margin-bottom: 12px; color: var(--muted); }
.lesson-text li { margin-bottom: 7px; }
.lesson-text code, .lesson-tip code {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 7px; font-family: 'Courier New', monospace; font-size: 14px; color: var(--accent); direction: ltr; display: inline-block;
}
.lesson-text a { color: var(--primary); text-decoration: underline; }

.lesson-code { position: relative; margin: 0 0 18px; }
.lesson-code pre {
  background: #0d1428; border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; direction: ltr; text-align: left; overflow-x: auto;
}
.lesson-code code { font-family: 'Courier New', monospace; font-size: 14.5px; line-height: 1.9; color: #e8ecf7; white-space: pre; }
.lesson-copy {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 12px; padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: .2s;
}
.lesson-copy:hover { background: var(--primary); border-color: var(--primary); }
.lesson-copy.copied { background: var(--accent); border-color: var(--accent); color: #062; }

.lesson-tip {
  background: rgba(45,212,191,.08); border: 1px solid rgba(45,212,191,.3);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; color: var(--text); font-size: 14.5px;
}
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.lesson-nav .btn:disabled { opacity: .4; cursor: default; transform: none; }

/* ===================== صفحه‌ی مبانی ===================== */
.container.narrow { max-width: 760px; }
.quick-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.quick-nav a {
  padding: 9px 18px; border-radius: 999px; font-size: 14px; color: var(--muted);
  background: var(--card); border: 1px solid var(--border); transition: .2s;
}
.quick-nav a:hover { color: var(--text); border-color: var(--primary); }
.article h2 { font-size: 28px; margin-bottom: 16px; }
.article p { color: var(--text); margin-bottom: 14px; line-height: 1.95; }
.article code {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 7px; font-family: 'Courier New', monospace; font-size: 14px; color: var(--accent); direction: ltr; display: inline-block;
}
.callout {
  background: rgba(108,139,255,.08); border: 1px solid rgba(108,139,255,.3);
  border-radius: 12px; padding: 16px 20px; margin-top: 12px; font-size: 15px;
}
.steps-list { counter-reset: s; list-style: none; }
.steps-list li {
  position: relative; padding: 14px 56px 14px 16px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; color: var(--muted);
}
.steps-list li strong { color: var(--text); }
.steps-list li::before {
  counter-increment: s; content: counter(s);
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 700;
}
.concept-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.concept-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.concept-card h3 { font-size: 17px; margin-bottom: 8px; }
.concept-card p { color: var(--muted); font-size: 14px; }

.sym-title { font-size: 19px; margin: 30px 0 14px; color: var(--primary); }
.sym-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-width: 760px; margin: 0 auto; }
.sym-row { display: grid; grid-template-columns: 90px 1.4fr 1.4fr 1fr; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.sym-row:last-child { border-bottom: none; }
.sym-row.sym-head { background: var(--card-2); color: var(--muted); font-weight: 700; font-size: 13px; }
.sym-row:not(.sym-head):hover { background: var(--bg-soft); }
.sym-row .sym { font-family: 'Courier New', monospace; font-weight: 700; color: var(--accent); direction: ltr; font-size: 16px; }
.sym-row span:nth-child(3), .sym-row span:nth-child(4) { color: var(--muted); direction: ltr; text-align: left; font-family: 'Courier New', monospace; font-size: 13.5px; }
.sym-row.sym-head span { direction: rtl; text-align: right; font-family: inherit; }
.tips-list { list-style: none; }
.tips-list li {
  background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--primary);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; color: var(--muted);
}
.tips-list li strong { color: var(--text); }

/* ===================== واکنش‌گرا برای بخش‌های جدید ===================== */
@media (max-width: 900px) {
  .lang-grid { grid-template-columns: repeat(2, 1fr); }
  .concept-grid { grid-template-columns: repeat(2, 1fr); }
  .course-layout { grid-template-columns: 1fr; }
  .course-sidebar { position: static; max-height: none; }
  .lesson-list { flex-direction: row; flex-wrap: wrap; }
  .lesson-link { flex: 1 1 auto; }
  .course-content { padding: 24px 20px; }
  .course-hero-inner h1 { font-size: 26px; }
}
@media (max-width: 560px) {
  .lang-grid, .concept-grid { grid-template-columns: 1fr; }
  .course-hero-inner { flex-direction: column; text-align: center; align-items: center; }
  .sym-row { grid-template-columns: 70px 1fr; row-gap: 4px; }
  .sym-row span:nth-child(3), .sym-row span:nth-child(4) { grid-column: 2; }
  .sym-row.sym-head { display: none; }
  .start-banner { flex-direction: column; text-align: center; align-items: stretch; }
  .lesson-head h2 { font-size: 23px; }
}

/* ===================== تایپ ۱۰ انگشتی (نسخه‌ی حرفه‌ای) ===================== */
.typing-wrap { max-width: 920px; margin: 0 auto; }

.typing-levels { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.lvl-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lvl-group-title {
  font-size: 13px; font-weight: 700; color: var(--accent);
  min-width: 56px;
}
.lvl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lvl-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  font-family: inherit; font-size: 14px; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: .2s;
}
.lvl-btn:hover { color: var(--text); border-color: var(--primary); }
.lvl-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.typing-prompt {
  text-align: center; font-size: 17px; color: var(--text); margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
}
.typing-prompt strong { color: var(--accent); }

.typing-display {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 30px; font-size: 24px; line-height: 2.2; min-height: 96px;
  font-family: 'Courier New', monospace; margin-bottom: 16px; letter-spacing: 1px;
}
.tchar { color: var(--muted); transition: color .1s; border-radius: 3px; }
.tchar.correct { color: var(--accent); }
.tchar.wrong { color: #ff6b6b; background: rgba(255,107,107,.16); }
.tchar.current { background: var(--primary); color: #fff; }

.typing-input {
  width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; color: var(--text); font-family: 'Courier New', 'Vazirmatn', monospace; font-size: 18px;
  outline: none; margin-bottom: 22px;
}
.typing-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,139,255,.18); }

/* کیبورد */
.keyboard {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center;
  direction: ltr; user-select: none;
}
.kb-row { display: flex; gap: 7px; justify-content: center; }
.key {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border);
  border-bottom: 3px solid var(--fc, var(--border));
  border-radius: 9px; font-size: 16px; font-weight: 600; color: var(--text);
  font-family: 'Courier New', 'Vazirmatn', monospace;
  position: relative; transition: transform .08s, box-shadow .15s, background .15s;
}
.key::after {
  content: ""; position: absolute; inset: 0; border-radius: 9px;
  background: var(--fc, transparent); opacity: .10;
}
.key-space { width: 280px; font-size: 13px; color: var(--muted); }
.key.next {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 3px rgba(108,139,255,.35), 0 8px 18px rgba(108,139,255,.45);
  border-bottom-color: #fff; z-index: 2;
}
.key.next::after { opacity: 0; }

.finger-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.finger-legend .leg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.finger-legend .leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

.typing-hint { text-align: center; color: var(--muted); margin-top: 22px; font-size: 14px; }

@media (max-width: 700px) {
  .key { width: 34px; height: 38px; font-size: 13px; border-radius: 7px; }
  .kb-row { gap: 5px; }
  .key-space { width: 180px; }
  .typing-display { font-size: 19px; padding: 20px; }
  .keyboard { padding: 10px 6px; }
  .lvl-group-title { min-width: auto; width: 100%; }
}
@media (max-width: 430px) {
  .key { width: 27px; height: 34px; font-size: 11px; }
  .kb-row { gap: 3px; }
  .key-space { width: 130px; font-size: 11px; }
}


/* ===================== بازطراحی روشن برناکد ===================== */
:root {
  --bg: #f6f8fc; --bg-soft: #edf2fb; --card: #ffffff; --card-2: #f1f5ff;
  --border: #dce4f1; --text: #17233d; --muted: #63718a;
  --primary: #3867e8; --primary-2: #7155dc; --accent: #10a88a;
  --radius: 18px; --shadow: 0 14px 36px rgba(35, 57, 100, .09); --max: 1180px;
}
body { background: var(--bg); color: var(--text); }
.site-header { background: rgba(255,255,255,.9); border-color: var(--border); box-shadow: 0 4px 18px rgba(34,54,90,.04); }
.logo-text { background-image: linear-gradient(90deg,#315fda,#7555d9,#0b9d8a,#315fda); }
.main-nav a:hover,.main-nav a.active { color: var(--primary); }
.nav-toggle span { background: var(--text); }
.btn-primary { background: linear-gradient(120deg,#3867e8,#7357dc); box-shadow: 0 8px 20px rgba(56,103,232,.2); }
.btn-outline { border-color: var(--border); color: var(--text); background: white; }
.btn-outline:hover { background: var(--card-2); }
.hero::before { background: radial-gradient(620px circle at 85% 10%,rgba(56,103,232,.13),transparent 60%),radial-gradient(520px circle at 10% 35%,rgba(16,168,138,.10),transparent 60%); }
.badge { background: #eef3ff; border-color: #dbe5ff; color: #3655a2; }
.code-card { background: #17233d; border-color: #293958; box-shadow: 0 24px 50px rgba(30,48,82,.18); }
.code-card-bar { background: #202f4c; border-color: #344563; }
.code-card-body code { color: #f2f5ff; }
.features { background: #edf2fb; }
.feature-card,.hub-card,.course-card,.path-card,.tool-card,.snippet-card,.lesson-card,.quiz-card { background: white; border-color: var(--border); box-shadow: 0 5px 18px rgba(37,57,95,.035); }
.feature-card:hover,.hub-card:hover { border-color: #a9bdf7; box-shadow: var(--shadow); }
.hub-icon { color: white; }
.cta { background: linear-gradient(135deg,#eaf0ff,#e8faf6); border-color: #d7e2f4; }
.site-footer { background: #fff; border-color: var(--border); }
.main-nav { background: rgba(255,255,255,.98); }
.page-hero::before { background: radial-gradient(600px circle at 50% 0%,rgba(56,103,232,.10),transparent 65%); }
input,textarea,select { background: #fff !important; color: var(--text) !important; border-color: var(--border) !important; }
pre, code { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid rgba(56,103,232,.45); outline-offset: 3px; }
::selection { background: #dce6ff; color: #17233d; }
/* محتوای صفحه‌ی مسیر کتاب‌های درسی */
.school-intro { padding: 52px 0 30px; }
.school-hero { background: linear-gradient(120deg,#eaf0ff,#e8faf6); border: 1px solid #dce6f6; border-radius: 26px; padding: clamp(24px,5vw,52px); display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; }
.school-hero h1 { font-size:clamp(30px,4vw,44px); margin:14px 0; }
.school-hero p { color:var(--muted); max-width:650px; }
.school-label { display:inline-flex; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--border); color:var(--primary); font-size:13px; font-weight:700; }
.school-code { direction:ltr; text-align:left; background:#17233d; color:#eaf0ff; padding:22px; border-radius:18px; box-shadow:var(--shadow); font:14px/2 monospace; overflow:auto; }
.school-section { padding:36px 0 64px; }
.school-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.school-card { background:white; border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow:0 5px 18px rgba(37,57,95,.035); transition:transform .2s,border-color .2s; }
.school-card:hover { transform:translateY(-4px); border-color:#a9bdf7; }
.school-card .number { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#edf2ff; color:var(--primary); font-weight:800; margin-bottom:14px; }
.school-card h3 { font-size:18px; margin-bottom:8px; }
.school-card p { color:var(--muted); font-size:14px; margin-bottom:14px; }
.school-tags { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.school-tags span { font-size:12px; background:#f1f5fb; border:1px solid #e2e9f4; border-radius:8px; padding:4px 8px; color:#586781; }
.school-note { background:#fff8e8; border:1px solid #f4e3b6; color:#765b20; padding:16px 18px; border-radius:14px; margin-top:20px; font-size:14px; }
@media(max-width:850px){.school-hero{grid-template-columns:1fr}.school-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.school-grid{grid-template-columns:1fr}.school-hero{padding:24px}.school-code{font-size:12px}}


/* ===== BornaCode 2026: light glass / violet + coral theme ===== */
:root{--bg:#f7f5fb;--bg-soft:#f0edf8;--card:rgba(255,255,255,.72);--card-2:rgba(255,255,255,.9);--border:rgba(117,92,154,.17);--text:#29243a;--muted:#756f84;--primary:#7655c8;--primary-2:#a46be8;--accent:#f28a72;--radius:20px;--shadow:0 16px 44px rgba(64,42,94,.09);--max:1160px}
body{background:radial-gradient(ellipse at 8% 2%,rgba(196,174,241,.28),transparent 32%),radial-gradient(ellipse at 95% 18%,rgba(255,190,165,.22),transparent 28%),#f8f7fb;color:var(--text)}
.site-header{background:rgba(250,249,253,.78);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-bottom:1px solid rgba(117,92,154,.16);box-shadow:0 5px 24px rgba(55,36,83,.04)}
.logo-mark{background:linear-gradient(135deg,#7655c8,#ed8b78);box-shadow:0 7px 18px rgba(118,85,200,.18)}
.logo-text{background:linear-gradient(90deg,#7655c8,#d66d91,#f28a72,#7655c8);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary{background:linear-gradient(120deg,#7655c8,#a46be8);box-shadow:0 8px 22px rgba(118,85,200,.2)}
.btn-outline{border-color:rgba(118,85,200,.25);color:#6447a8;background:rgba(255,255,255,.45)}
.btn-outline:hover{background:rgba(255,255,255,.85)}
.main-nav a{color:#6f687e}.main-nav a:hover,.main-nav a.active{color:#7655c8}
.hub-card,.school-card,.feature-card,.tool-card,.path-card,.course-card,.library-card{background:rgba(255,255,255,.68)!important;border:1px solid rgba(117,92,154,.16)!important;box-shadow:0 12px 34px rgba(64,42,94,.06)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hub-card:hover,.school-card:hover{border-color:rgba(118,85,200,.38)!important;box-shadow:0 20px 44px rgba(64,42,94,.12)!important}
.school-hero{background:linear-gradient(125deg,rgba(255,255,255,.82),rgba(242,235,253,.7),rgba(255,239,232,.72));border:1px solid rgba(117,92,154,.18);box-shadow:0 20px 55px rgba(64,42,94,.07);backdrop-filter:blur(20px)}
.school-label{background:rgba(255,255,255,.72);border-color:rgba(117,92,154,.18);color:#7655c8}
.school-code{background:linear-gradient(145deg,#352b4b,#514067);box-shadow:0 18px 35px rgba(53,43,75,.16)}
.school-card .number{background:linear-gradient(135deg,rgba(118,85,200,.14),rgba(242,138,114,.18));color:#7655c8}
.school-tags span{background:rgba(255,255,255,.68);border-color:rgba(117,92,154,.13);color:#6f687e}
.school-note{background:rgba(255,244,230,.8);border-color:rgba(242,138,114,.25);color:#835444}
.hero,.hero-section,.cta{background:transparent}
section{scroll-margin-top:90px}
input,textarea,select{background:rgba(255,255,255,.8)!important;color:var(--text)!important;border-color:rgba(117,92,154,.22)!important}
.site-footer{background:rgba(244,240,250,.8);border-top:1px solid rgba(117,92,154,.15);color:#625a73}
.site-footer p,.site-footer a{color:#756f84}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}