:root{
    --blue:#2E7FD2;
    --violet:#7C6AFF;
    --cyan:#35CEE1;
    --ink:#111E5D;
    --white:#FFFFFF;
    --grey:#6B7280;
    --surface:#F7F8FC;
    --grad: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
    --grad-soft: linear-gradient(135deg, rgba(46,127,210,0.10) 0%, rgba(124,106,255,0.10) 100%);
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --shadow-soft: 0 20px 50px -20px rgba(46,127,210,0.25);
    --shadow-card: 0 10px 30px -12px rgba(17,30,93,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Manrope', sans-serif;
    color:var(--ink);
    background:var(--white);
    overflow-x:hidden;
    transition:background 0.35s ease, color 0.35s ease;
  }

  /* Dark theme */
  html[data-theme="dark"]{
    --ink:#F3F4F6;
    --white:#0B0F1A;
    --grey:#9AA3B2;
    --surface:#111726;
    --grad-soft: linear-gradient(135deg, rgba(46,127,210,0.16) 0%, rgba(124,106,255,0.16) 100%);
    --shadow-soft: 0 20px 50px -20px rgba(46,127,210,0.35);
    --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.5);
    background:var(--white);
  }
  html[data-theme="dark"] header{ background:rgba(11,15,26,0.75); border-bottom-color:rgba(255,255,255,0.08); }
  html[data-theme="dark"] .why-card,
  html[data-theme="dark"] .course-card,
  html[data-theme="dark"] .testi-card,
  html[data-theme="dark"] .faq-item,
  html[data-theme="dark"] .contact-inner{
    background:#141A2B; border-color:rgba(255,255,255,0.08);
  }
  html[data-theme="dark"] .field input{ background:#0F1424; border-color:rgba(255,255,255,0.12); color:var(--ink); }
  html[data-theme="dark"] .btn.ghost{ background:rgba(46,127,210,0.16); }
  html[data-theme="dark"] .social-pill{ background:#0F1424; }
  html[data-theme="dark"] .faq-q{ color:#FFFFFF; }
  html[data-theme="dark"] .faq-a-inner{ color:#9AA3B2; }
  html[data-theme="dark"] footer{ background:#05070D; }

  .theme-toggle{
    width:42px; height:42px; border-radius:50%; background:var(--surface);
    border:1px solid rgba(17,24,39,0.08); display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; transition:transform 0.2s ease, background 0.2s ease; flex-shrink:0;
  }
  .theme-toggle:hover{ transform:translateY(-2px) rotate(15deg); }
  html[data-theme="dark"] .theme-toggle{ border-color:rgba(255,255,255,0.1); }
  h1,h2,h3,.display{ font-family:'Fredoka', sans-serif; }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; border:none; cursor:pointer;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
  .grad-text{
    background:var(--grad);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none;}
    *{ animation:none !important; }
  }

  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(17,24,39,0.06);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
  .logo{ display:flex; align-items:center; gap:10px; font-family:'Fredoka',sans-serif; font-weight:800; font-size:20px; }
  .logo .dot{ width:12px;height:12px;border-radius:4px; background:var(--grad); }
  .navlinks{ display:flex; gap:30px; font-size:14.5px; font-weight:600; color:var(--ink); }
  .navlinks a{ opacity:0.7; transition:opacity 0.2s; }
  .navlinks a:hover{ opacity:1; }
  .btn{
    font-weight:700; font-size:14.5px; padding:13px 26px; border-radius:100px;
    background:var(--grad); color:#fff; display:inline-flex; align-items:center; gap:8px;
    box-shadow:var(--shadow-soft);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 24px 55px -18px rgba(124,106,255,0.4); }
  .btn.ghost{
    background:rgba(46,127,210,0.08); color:var(--blue); box-shadow:none;
  }
  .btn.ghost:hover{ background:rgba(46,127,210,0.14); box-shadow:none; transform:translateY(-2px); }
  .btn.small{ padding:10px 20px; font-size:13.5px; }

  /* Hero */
  .hero{ position:relative; padding:90px 0 80px; overflow:hidden; }
  .hero::before{
    content:""; position:absolute; top:-200px; right:-180px; width:600px; height:600px;
    background:var(--grad); opacity:0.12; border-radius:50%; filter:blur(40px);
  }
  .hero .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
    padding:8px 16px; border-radius:100px; background:var(--grad-soft); color:var(--violet);
    margin-bottom:22px;
  }
  .eyebrow .pulse{ width:7px;height:7px;border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(53,206,225,0.5); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(53,206,225,0.5);} 70%{box-shadow:0 0 0 8px rgba(53,206,225,0);} 100%{box-shadow:0 0 0 0 rgba(53,206,225,0);} }
  .hero h1{ font-size:46px; font-weight:800; line-height:1.15; margin-bottom:20px; letter-spacing:-0.01em; }
  .hero p.lead{ font-size:17.5px; color:var(--grey); max-width:480px; margin-bottom:34px; line-height:1.65; }
  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
  .trust-row{ display:flex; gap:26px; flex-wrap:wrap; }
  .trust-item{ font-size:13.5px; color:var(--grey); font-weight:600; display:flex; align-items:center; gap:8px; }
  .trust-item .ic{ width:18px;height:18px;border-radius:6px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; font-size:11px; }

  /* Hero visual — isometric blender cube scene */
  .hero-visual{ position:relative; height:440px; display:flex; align-items:center; justify-content:center; }
  .cube-scene{ perspective:1000px; width:260px; height:260px; position:relative; cursor:grab; touch-action:none; }
  .cube-scene:active{ cursor:grabbing; }
  .cube{
    width:180px; height:180px; position:absolute; top:40px; left:40px;
    transform-style:preserve-3d;
    will-change:transform;
  }
  @keyframes spin{ from{ transform:rotateX(-20deg) rotateY(0deg); } to{ transform:rotateX(-20deg) rotateY(360deg); } }
  .face{
    position:absolute; width:180px; height:180px;
    background:var(--grad); opacity:0.92;
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:inset 0 0 60px rgba(255,255,255,0.15);
    transition:filter 0.6s ease, box-shadow 0.6s ease;
  }
  .face.front{ transform:translateZ(90px); }
  .face.back{ transform:translateZ(-90px) rotateY(180deg); }
  .face.right{ transform:rotateY(90deg) translateZ(90px); filter:brightness(0.85); }
  .face.left{ transform:rotateY(-90deg) translateZ(90px); filter:brightness(0.85); }
  .face.top{ transform:rotateX(90deg) translateZ(90px); background:var(--cyan); filter:none; }
  .face.bottom{ transform:rotateX(-90deg) translateZ(90px); filter:brightness(0.7); }
  .cube.pulse-flash .face{ filter:brightness(1.12) !important; box-shadow:0 0 20px 4px rgba(255,255,255,0.25), inset 0 0 60px rgba(255,255,255,0.2) !important; }
  .orbit-ring{
    position:absolute; inset:0; border:1.5px dashed rgba(124,106,255,0.25); border-radius:50%;
    animation:spin 30s linear infinite reverse;
  }

  .float-badge{
    position:absolute; padding:10px 16px; border-radius:16px;
    background:rgba(255,255,255,0.85); backdrop-filter:blur(12px);
    box-shadow:var(--shadow-card); font-size:12.5px; font-weight:700;
    color:#111827;
    display:flex; align-items:center; gap:8px;
    animation:float 5s ease-in-out infinite;
  }
  .float-badge.b1{ top:10px; right:-10px; animation-delay:0.5s; }
  .float-badge.b2{ bottom:20px; left:-20px; animation-delay:1.2s; }
  @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
  html[data-theme="dark"] .float-badge{ background:rgba(20,26,43,0.9); color:#FFFFFF; }

  .drag-hint{
    position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
    font-size:12px; font-weight:700; color:var(--grey);
    background:rgba(255,255,255,0.85); backdrop-filter:blur(8px);
    padding:6px 14px; border-radius:100px; box-shadow:var(--shadow-card);
    opacity:1; transition:opacity 0.5s ease; pointer-events:none; white-space:nowrap;
  }
  .drag-hint.hidden{ opacity:0; }
  html[data-theme="dark"] .drag-hint{ background:rgba(20,26,43,0.9); color:#FFFFFF; }

  /* section shell */
  .section{ padding:96px 0; }
  .section.tinted{ background:var(--surface); }

  /* Фоновая декоративная текстура (едва заметный рендер) */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:url('bg-hex-pattern.png');
    background-size:1400px; background-position:center top; background-repeat:no-repeat;
    opacity:0.17; filter:brightness(0.45) contrast(1.3);
  }
  html[data-theme="dark"]::before{ opacity:0.3; filter:brightness(0.35) contrast(1.35); }

  .categories-strip{ padding:0 0 64px; }
  .categories-row{
    display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
    max-width:900px; margin:0 auto; padding:0 32px;
  }
  .category-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px;
    padding:12px 22px; border-radius:100px;
    background:var(--grad-soft); color:var(--ink);
    border:1px solid rgba(46,127,210,0.18);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .category-pill:hover{ transform:translateY(-2px); box-shadow:0 12px 25px -10px rgba(46,127,210,0.3); }
  .category-pill.more{ background:transparent; border-style:dashed; color:var(--grey); font-weight:600; }

  .social-strip{ padding:0 0 96px; }
  .social-card{
    max-width:520px; margin:0 auto; text-align:center;
    background:var(--surface); border:1px solid rgba(46,127,210,0.15);
    border-radius:var(--radius-lg); padding:32px;
  }
  .social-card h3{ font-size:18px; font-weight:800; margin-bottom:16px; }
  .social-card .social-row{ justify-content:center; margin-bottom:0; }

  .section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  .section-head .eyebrow{ margin-bottom:16px; }
  .section-head h2{ font-size:34px; font-weight:800; letter-spacing:-0.01em; margin-bottom:14px; }
  .section-head p{ color:var(--grey); font-size:16px; line-height:1.6; }

  /* Why us */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .why-card{
    background:#fff; border:1px solid rgba(17,24,39,0.06); border-radius:var(--radius-md);
    padding:30px 26px; box-shadow:var(--shadow-card);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .why-card:hover{ transform:translateY(-6px); box-shadow:0 22px 45px -18px rgba(46,127,210,0.25); }
  .why-card .icon{
    width:48px; height:48px; border-radius:14px; background:var(--grad-soft);
    display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px;
  }
  .why-card h3{ font-size:17.5px; font-weight:700; margin-bottom:8px; }
  .why-card p{ font-size:14.5px; color:var(--grey); line-height:1.55; }

  /* Courses */
  .course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .course-card{
    border-radius:var(--radius-lg); padding:32px 28px; position:relative; overflow:hidden;
    background:#fff; border:1px solid rgba(17,24,39,0.07); box-shadow:var(--shadow-card);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .course-card:hover{ transform:translateY(-8px); box-shadow:0 28px 55px -20px rgba(46,127,210,0.3); }
  .course-card .level{ font-size:12.5px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; padding:6px 14px; border-radius:100px; display:inline-block; margin-bottom:20px; }
  .course-card.start .level{ background:rgba(34,197,94,0.12); color:#16A34A; }
  .course-card.create .level{ background:rgba(46,127,210,0.12); color:var(--blue); }
  .course-card.pro .level{ background:rgba(124,106,255,0.12); color:var(--violet); }
  .course-card h3{ font-size:22px; font-weight:800; margin-bottom:12px; }
  .course-card ul{ list-style:none; padding:0; margin-bottom:24px; }
  .course-card li{ font-size:14.5px; color:var(--grey); padding:7px 0; padding-left:22px; position:relative; }
  .course-card li::before{ content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:800; }
  .course-card .price{ font-size:13.5px; color:var(--grey); font-weight:600; }

  /* Gallery */
  .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .gal-tile{
    aspect-ratio:1/1; border-radius:var(--radius-md); position:relative; overflow:hidden;
    cursor:pointer; background:var(--surface);
    transition:transform 0.35s ease, box-shadow 0.35s ease;
  }
  .gal-tile:hover{ transform:scale(1.04) translateY(-4px); box-shadow:0 24px 50px -20px rgba(46,127,210,0.35); z-index:2; }
  .gal-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-caption{ text-align:center; font-size:14.5px; color:var(--grey); margin-top:26px; }

  /* Teacher */
  .teacher{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center; }
  .teacher-photo{
    aspect-ratio:4/5; border-radius:var(--radius-lg);
    position:relative; overflow:hidden; box-shadow:var(--shadow-soft);
  }
  .teacher-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .teacher-photo .glass-tag{
    position:absolute; bottom:18px; left:18px; right:18px;
    background:rgba(17,24,39,0.55); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.25); border-radius:14px; padding:12px 16px;
    color:#fff; font-size:13px; font-weight:700;
  }
  .teacher-content .role{ color:var(--violet); font-weight:700; font-size:13.5px; margin-bottom:10px; }
  .teacher-content h3{ font-size:26px; font-weight:800; margin-bottom:16px; }
  .teacher-content p{ color:var(--grey); font-size:15.5px; line-height:1.7; margin-bottom:14px; }
  .teacher-stats{ display:flex; gap:30px; margin-top:22px; }
  .teacher-stats .num{ font-family:'Fredoka',sans-serif; font-weight:800; font-size:24px; }
  .teacher-stats .lbl{ font-size:12.5px; color:var(--grey); font-weight:600; }

  /* Testimonials */
  .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .testi-card{
    background:#fff; border-radius:var(--radius-md); padding:28px 24px;
    border:1px solid rgba(17,24,39,0.06); box-shadow:var(--shadow-card);
  }
  .testi-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .avatar{ width:46px;height:46px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; flex-shrink:0; }
  .testi-head .name{ font-weight:700; font-size:14.5px; }
  .testi-head .age{ font-size:12.5px; color:var(--grey); }
  .testi-card p{ font-size:14.5px; color:var(--ink); line-height:1.6; opacity:0.85; }

  /* FAQ */
  .faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .faq-item{ border:1px solid rgba(17,24,39,0.08); border-radius:var(--radius-sm); background:#fff; overflow:hidden; }
  .faq-q{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:20px 24px; font-weight:700; font-size:15.5px; background:none; text-align:left;
  }
  .faq-q .plus{ width:22px; height:22px; border-radius:50%; background:var(--grad-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; transition:transform 0.3s ease; }
  .faq-item.open .faq-q .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
  .faq-a-inner{ padding:0 24px 20px; color:var(--grey); font-size:14.5px; line-height:1.6; }

  /* Contact + form */
  .contact-shell{
    border-radius:var(--radius-lg); background:var(--grad); padding:4px; box-shadow:var(--shadow-soft);
  }
  .contact-inner{
    background:#fff; border-radius:calc(var(--radius-lg) - 4px); padding:52px;
    display:grid; grid-template-columns:1fr 1fr; gap:50px;
  }
  .contact-inner h2{ font-size:28px; font-weight:800; margin-bottom:14px; }
  .contact-inner > div > p{ color:var(--grey); font-size:15px; margin-bottom:26px; }
  .social-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
  .social-pill{
    display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:100px;
    background:var(--surface); font-size:13.5px; font-weight:700; transition:transform 0.2s ease, background 0.2s ease;
  }
  .social-pill:hover{ background:var(--grad-soft); transform:translateY(-2px); }
  .contact-detail{ font-size:14.5px; color:var(--grey); margin-bottom:8px; }
  .contact-detail b{ color:var(--ink); }
  .field{ margin-bottom:16px; display:flex; flex-direction:column; gap:7px; }
  .field label{ font-size:12.5px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:0.03em; }
  .field input{
    padding:13px 16px; border-radius:14px; border:1.5px solid rgba(17,24,39,0.1);
    font-family:inherit; font-size:15px; background:var(--surface);
  }
  .field input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,127,210,0.15); }
  .form-note{ font-size:12px; color:var(--grey); margin-top:10px; }

  /* Toast notification */
  .toast{
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
    display:flex; align-items:center; gap:12px;
    background:#fff; border:1px solid rgba(17,24,39,0.08); border-radius:16px;
    padding:16px 22px; box-shadow:0 20px 45px -15px rgba(17,24,39,0.25);
    font-size:14.5px; font-weight:600; z-index:200;
    opacity:0; pointer-events:none;
    transition:opacity 0.35s ease, transform 0.35s ease;
    max-width:90vw;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  .toast .toast-icon{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff;
  }
  .toast.success .toast-icon{ background:linear-gradient(135deg,#22C55E,#16A34A); }
  .toast.error .toast-icon{ background:linear-gradient(135deg,#EF4444,#DC2626); }
  html[data-theme="dark"] .toast{ background:#141A2B; border-color:rgba(255,255,255,0.1); color:var(--ink); }
  @media (max-width:640px){
    .toast{ left:16px; right:16px; transform:translateY(20px); width:auto; }
    .toast.show{ transform:translateY(0); }
  }

  footer{ background:var(--ink); color:rgba(255,255,255,0.8); padding:56px 0 28px; }
  .footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:36px; }
  .footer-logo{ display:flex; align-items:center; gap:10px; font-family:'Fredoka',sans-serif; font-weight:800; font-size:19px; color:#fff; margin-bottom:8px; }
  .footer-logo .dot{ width:11px;height:11px;border-radius:4px; background:var(--grad); }
  .footer-tagline{ font-size:13.5px; opacity:0.6; max-width:260px; }
  .footer-links{ display:flex; gap:50px; flex-wrap:wrap; }
  .footer-col h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; opacity:0.5; margin-bottom:14px; }
  .footer-col a{ display:block; font-size:14px; opacity:0.75; margin-bottom:10px; transition:opacity 0.2s; }
  .footer-col a:hover{ opacity:1; }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; opacity:0.5; flex-wrap:wrap; gap:10px; }

  @media (max-width: 980px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-visual{ height:320px; order:-1; }
    .why-grid, .course-grid, .testi-grid{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .teacher{ grid-template-columns:1fr; }
    .contact-inner{ grid-template-columns:1fr; padding:32px; }
    .navlinks{ display:none; }
    .hero h1{ font-size:34px; }
    .footer-top{ flex-direction:column; }
  }
/* Подборка курсов (главная страница) */
.courses-frame{
  border-radius:calc(var(--radius-lg) + 6px); background:var(--grad);
  padding:3px; box-shadow:var(--shadow-soft); max-width:980px; margin:0 auto;
}
.courses-frame-inner{
  background:var(--white); border-radius:calc(var(--radius-lg) + 3px); padding:44px 36px;
}
.subject-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px; }
.subject-card{
  position:relative;
  background:#fff; border:1px solid rgba(17,24,39,0.07); border-radius:var(--radius-lg);
  padding:32px 28px; text-align:left; box-shadow:var(--shadow-card);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  display:flex; flex-direction:column;
}
.subject-card:hover{ transform:translateY(-8px); box-shadow:0 28px 55px -20px rgba(46,127,210,0.3); }
.subject-card .subject-icon{
  width:56px; height:56px; border-radius:16px; background:var(--grad-soft); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex-shrink:0;
}
.subject-card .subject-icon svg{ width:28px; height:28px; }
.subject-card h3{ font-size:21px; font-weight:800; margin-bottom:6px; }
.subject-card .subject-tagline{ color:var(--violet); font-weight:700; font-size:13px; margin-bottom:14px; }
.subject-card ul.subject-list{ list-style:none; padding:0; margin:0 0 20px; }
.subject-card ul.subject-list li{
  font-size:13.8px; color:var(--grey); padding:5px 0 5px 22px; position:relative; line-height:1.4;
}
.subject-card ul.subject-list li::before{ content:"✓"; position:absolute; left:0; top:5px; color:var(--blue); font-weight:800; }
.subject-card .subject-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.subject-card .subject-meta span{
  font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:100px;
  background:var(--surface); color:var(--grey);
}
.subject-card .btn{ margin-top:auto; justify-content:center; }
.subject-card.coming-soon .subject-icon{ color:var(--violet); }
.subject-card .badge-soon{
  position:absolute; top:20px; right:20px;
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; background:rgba(124,106,255,0.12); color:var(--violet);
}
html[data-theme="dark"] .subject-card{ background:#141A2B; border-color:rgba(255,255,255,0.08); }
html[data-theme="dark"] .subject-card ul.subject-list li{ color:#9AA3B2; }
html[data-theme="dark"] .subject-card .subject-meta span{ background:#0F1424; }

/* Мини-hero на странице отдельного курса */
.course-hero{ padding:56px 0 50px; text-align:center; }
.course-hero .back-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700;
  color:var(--grey); margin-bottom:20px; transition:opacity 0.2s ease;
}
.course-hero .back-link:hover{ opacity:0.7; }
.course-hero h1{ font-size:38px; font-weight:800; margin-bottom:16px; letter-spacing:-0.01em; }
.course-hero p{ color:var(--grey); font-size:16.5px; max-width:560px; margin:0 auto 28px; line-height:1.6; }

/* Плейсхолдер для курса "в разработке" */
.placeholder-card{
  max-width:640px; margin:0 auto; text-align:center; background:var(--surface);
  border:1.5px dashed rgba(124,106,255,0.3); border-radius:var(--radius-lg); padding:48px 36px;
}
.placeholder-card .emoji{ font-size:42px; margin-bottom:16px; }
.placeholder-card h3{ font-size:22px; font-weight:800; margin-bottom:12px; }
.placeholder-card p{ color:var(--grey); font-size:15px; line-height:1.6; }