@font-face {
        font-family: "Vazir";
        src: url("./fonts/Vazir-Thin.ttf") format("truetype");
        font-weight: 100;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Vazir";
        src: url("./fonts/Vazir-Light.ttf") format("truetype");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }



    :root{
      --bg-1:#f4f7ff;
      --bg-2:#eef2ff;
      --white:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e2e8f0;
      --primary:#2563eb;
      --primary-2:#1d4ed8;
      --primary-soft:#dbeafe;
      --success:#16a34a;
      --danger:#dc2626;
      --warning:#f59e0b;
      --shadow-lg: 0 20px 60px rgba(37, 99, 235, 0.14);
      --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
      --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1180px;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family: "Vazir", Tahoma, sans-serif;
      background:
        radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 28%),
        radial-gradient(circle at left bottom, rgba(59,130,246,.08), transparent 25%),
        linear-gradient(180deg, var(--bg-2) 0%, #f8fbff 26%, var(--bg-1) 100%);
      color:var(--text);
      line-height:1.85;
      overflow-x:hidden;
    }

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

    img{
      max-width:100%;
      display:block;
    }

    .container{
      width:min(var(--container), calc(100% - 32px));
      margin-inline:auto;
    }

    .section{
      padding: 26px 0;
    }

    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:20px;
      flex-wrap:wrap;
    }

    .section-title{
      font-size: clamp(1.4rem, 2vw, 2rem);
      font-weight: 800;
      color: var(--text);
      line-height:1.4;
    }

    .section-desc{
      color: var(--muted);
      max-width: 760px;
      font-size: .98rem;
    }

    /* top bar */
    .topbar-shell{
        width: 100%;
        padding: 0 14px;
    }


    .topbar{
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        padding: 10px 0;
        transition: all .28s ease;
    }

    .topbar.scrolled {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        /* افکت محو‌شونده از بالا به پایین */
        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .brand-pill {
        padding: 8px 20px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(5px);
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
    }


    .topbar-inner{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        min-height:64px;
        width:100%;
    }


    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      color:#0b1b44;
    }

    .brand-badge{
      width:42px;
      height:42px;
      border-radius:14px;
      background: linear-gradient(135deg, var(--primary), #60a5fa);
      display:grid;
      place-items:center;
      color:#fff;
      box-shadow: var(--shadow-sm);
      font-size:1.05rem;
    }

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

    .icon-btn{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(255,255,255,.65);
        color: #0f172a;
        box-shadow: 0 6px 18px rgba(15,23,42,.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: all .22s ease;
        font-size: 1.1rem;
        font-weight: 900;
    }

    .icon-btn:hover{
        transform: translateY(-2px) scale(1.03);
        background: rgba(255,255,255,.9);
    }

    .icon-btn:active{
        transform: scale(.97);
    }


    .hero.hero-slider{
      position: relative;
      width: 100%;
      min-height: clamp(360px, 72vh, 760px);
      overflow: hidden;
      background: #0f172a;
    }

    .hero-slider-track{
      position: relative;
      width: 100%;
      min-height: inherit;
    }

    .hero-slide{
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transform: scale(1.06);
      transition:
        opacity .9s ease,
        transform 1.6s ease,
        visibility .9s ease;
      will-change: opacity, transform;
    }

    .hero-slide.is-active{
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      z-index: 2;
    }

    .hero-slide picture,
    .hero-slide img{
      position: absolute;
      inset: 0; 
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }

    .hero-slider-ui{
      position: absolute;
      inset-inline: 18px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
      z-index: 5;
      pointer-events: none;
    }

    .hero-nav{
      pointer-events: auto;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      background: rgba(255,255,255,.18);
      color: #fff;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
      font-size: 1.6rem;
      line-height: 1;
      transition: all .25s ease;
    }

    .hero-nav:hover{
      background: rgba(255,255,255,.28);
      transform: scale(1.06);
    }

    .hero-dots{
      position: absolute;
      right: 50%;
      bottom: 18px;
      transform: translateX(50%);
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-dot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: rgba(255,255,255,.45);
      transition: all .25s ease;
    }

    .hero-dot.is-active{
      width: 28px;
      background: #fff;
    }




    /* features */
    .feature-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:16px;
    }

    .feature-card{
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(10px);
      border:1px solid rgba(255,255,255,.7);
      border-radius:22px;
      padding:22px;
      box-shadow: var(--shadow-sm);
      transition: all .25s ease;
    }

    .feature-icon{
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border-radius:14px;
      background: linear-gradient(135deg, var(--primary-soft), #eff6ff);
      color: var(--primary-2);
      margin-bottom:14px;
      font-size:1.1rem;
      font-weight:800;
    }

    .feature-card h3{
      margin-bottom:8px;
      font-size:1.02rem;
    }

    .feature-card p{
      color:var(--muted);
      font-size:.94rem;
    }

    /* مرحله فعال */
    .feature-card.active{
      border: 2px solid var(--primary-2);
      box-shadow: 0 12px 30px rgba(59, 130, 246, .16);
      transform: translateY(-4px);
    }

    .feature-card.active .feature-icon{
      background: linear-gradient(135deg, var(--primary-2), #2563eb);
      color:#fff;
    }

    .feature-card.active h3{
      color: var(--primary-2);
    }

    /* مراحل بعدی */
    .feature-card.muted{
      opacity:.6;
    }

    .feature-card.muted .feature-icon{
      background: #eef2f7;
      color: #7b8794;
    }

    /* ریسپانسیو */
    @media (max-width: 1024px){
      .feature-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px){
      .feature-grid{
        grid-template-columns: 1fr;
      }
    }


    /* teachers */
    .teacher-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:20px;
    }

    .teacher-card{
      background: rgba(255,255,255,.85);
      backdrop-filter: blur(8px);
      border:1px solid rgba(255,255,255,.65);
      border-radius: 28px;
      padding: 24px;
      box-shadow: var(--shadow-md);
    }

    .teacher-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:18px;
      flex-wrap:wrap;
    }

    .teacher-meta{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .teacher-avatar{
      width:54px;
      height:54px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
      color:#1d4ed8;
      font-weight:900;
      font-size:1rem;
      flex-shrink:0;
    }

    .teacher-title h3{
      font-size:1.15rem;
      line-height:1.4;
    }

    .teacher-title p{
      color:var(--muted);
      font-size:.92rem;
    }

    .teacher-pill{
      padding:8px 12px;
      border-radius:999px;
      background:#eff6ff;
      color:#1d4ed8;
      font-size:.88rem;
      font-weight:800;
      border:1px solid #dbeafe;
    }

    .course-list{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:12px;
    }

    .course-box{
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border:1px solid var(--line);
      border-radius:18px;
      padding:16px;
      min-height:90px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      transition:.25s ease;
    }

    .course-box:hover{
      transform: translateY(-3px);
      border-color:#93c5fd;
      box-shadow: 0 10px 24px rgba(59,130,246,.12);
    }

    .course-name{
      font-weight:800;
      margin-bottom:4px;
      color:#0f172a;
    }

    .course-sub{
      color:var(--muted);
      font-size:.9rem;
    }

    /* form section */
    .register-wrap{
      display:grid;
      grid-template-columns: .95fr 1.05fr;
      gap:22px;
      align-items:start;
    }

    .register-side,
    .form-card{
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      border:1px solid rgba(255,255,255,.75);
      border-radius: 30px;
      box-shadow: var(--shadow-md);
    }

    .register-side{
      padding:24px;
      position:sticky;
      top:18px;
    }

    .register-side h3{
      margin-bottom:12px;
      font-size:1.2rem;
    }

    .register-side p{
      color:var(--muted);
      margin-bottom:18px;
      font-size:.95rem;
    }

    .tips{
      display:grid;
      gap:12px;
    }

    .tip{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fafcff;
    }

    .tip-num{
      width:34px;
      height:34px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:#dbeafe;
      color:#1d4ed8;
      font-weight:900;
      flex-shrink:0;
    }

    .tip h4{
      font-size:.97rem;
      margin-bottom:4px;
    }

    .tip p{
      margin:0;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.8;
    }

    .form-card{
      padding:26px;
    }

    .form-head{
      margin-bottom:20px;
    }

    .form-head h3{
      font-size:1.35rem;
      margin-bottom:6px;
    }

    .form-head p{
      color:var(--muted);
      font-size:.95rem;
    }

    .form-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:16px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .field.full{
      grid-column:1 / -1;
    }

    .label{
      font-size:.94rem;
      font-weight:800;
      color:#0f172a;
    }

    .req{
      color: var(--danger);
      margin-right:4px;
    }

    .input,
    .select,
    .textarea{
      width:100%;
      border:1px solid var(--line);
      background:#fff;
      border-radius:16px;
      padding:14px 14px;
      font-size:.98rem;
      color:var(--text);
      outline:none;
      transition:.2s ease;
    }

    .input::placeholder,
    .textarea::placeholder{
      color:#94a3b8;
    }

    .input:focus,
    .select:focus,
    .textarea:focus{
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(37,99,235,.12);
    }

    .textarea{
      min-height:120px;
      resize:vertical;
    }

    .helper{
      color:var(--muted);
      font-size:.85rem;
      margin-top:-2px;
    }

    /* selectable courses */
    .select-courses{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:12px;
      margin-top:4px;
    }

    .select-card{
      position:relative;
      border:1px solid var(--line);
      border-radius:18px;
      background:linear-gradient(180deg,#fff,#f8fbff);
      padding:14px;
      cursor:pointer;
      transition:.22s ease;
      user-select:none;
      min-height:82px;
      display:flex;
      align-items:flex-start;
      gap:12px;
    }

    .select-card:hover{
      transform: translateY(-2px);
      border-color:#93c5fd;
      box-shadow:0 10px 24px rgba(59,130,246,.10);
    }

    .select-card input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }

    .fake-check{
      width:22px;
      height:22px;
      border:2px solid #cbd5e1;
      border-radius:8px;
      flex-shrink:0;
      margin-top:2px;
      transition:.2s ease;
      background:#fff;
    }

    .select-content strong{
      display:block;
      font-size:.98rem;
      margin-bottom:3px;
    }

    .select-content span{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.7;
    }

    .select-card input:checked ~ .fake-check{
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      border-color: var(--primary);
      box-shadow: inset 0 0 0 4px #fff;
    }

    .select-card:has(input:checked){
      border-color: #60a5fa;
      background: linear-gradient(180deg, #eff6ff, #f8fbff);
      box-shadow: 0 12px 26px rgba(37,99,235,.12);
    }

    .inline-note{
      margin-top:10px;
      color:var(--muted);
      font-size:.88rem;
    }

    .agreement{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top:8px;
      padding:14px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fbfdff;
    }

    .agreement input{
      margin-top:4px;
      accent-color:var(--primary);
      width:18px;
      height:18px;
      flex-shrink:0;
    }

    .agreement label{
      color:var(--muted);
      font-size:.92rem;
      cursor:pointer;
    }

    .actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-top:22px;
      flex-wrap:wrap;
    }

    .submit-note{
      color:var(--muted);
      font-size:.9rem;
    }

    .btn{
      border:none;
      outline:none;
      cursor:pointer;
      border-radius:16px;
      font-weight:800;
      transition:.22s ease;
    }

    .btn-primary{
      color:#fff;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      padding:15px 26px;
      box-shadow: 0 14px 28px rgba(37,99,235,.22);
      min-width:180px;
    }

    .btn-primary:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 32px rgba(37,99,235,.28);
    }

    .btn-primary:disabled{
      opacity:.7;
      cursor:not-allowed;
      transform:none;
    }

    .message{
      display:none;
      margin-top:18px;
      padding:16px 18px;
      border-radius:16px;
      font-weight:700;
      font-size:.95rem;
    }

    .message.success{
      display:none;
      background:#ecfdf5;
      color:#166534;
      border:1px solid #bbf7d0;
    }

    .message.error{
      display:none;
      background:#fef2f2;
      color:#991b1b;
      border:1px solid #fecaca;
    }

    /* footer */
    footer{
      padding: 30px 0 40px;
    }

    .footer-card{
      background: rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.7);
      border-radius:24px;
      padding:20px;
      text-align:center;
      color:var(--muted);
      box-shadow: var(--shadow-sm);
    }

    .sample-video-grid{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        gap:18px;
    }

    .sample-video-card{
        display:block;
        text-decoration:none;
        color:inherit;
        background: rgba(255,255,255,.88);
        border: 1px solid rgba(255,255,255,.75);
        border-radius: 24px;
        overflow:hidden;
        box-shadow: var(--shadow-md);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        backdrop-filter: blur(10px);
    }

    .sample-video-card:hover{
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(37,99,235,.22);
    }

    .sample-video-thumb{
        position:relative;
        aspect-ratio: 16 / 9;
        background:#e5e7eb;
        overflow:hidden;
    }

    .sample-video-thumb::after{
        content:"";
        position:absolute;
        inset:0;
        background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.18) 100%);
    }

    .sample-video-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        transition: transform .35s ease;
    }

    .sample-video-card:hover .sample-video-thumb img{
        transform: scale(1.05);
    }

    .sample-video-play{
        position:absolute;
        inset:50% auto auto 50%;
        transform:translate(-50%, -50%);
        width:68px;
        height:68px;
        border-radius:50%;
        display:grid;
        place-items:center;
        background: rgba(255,255,255,.9);
        color:#e11d48;
        font-size:1.55rem;
        box-shadow: 0 12px 28px rgba(0,0,0,.16);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index:2;
    }

    .sample-video-caption{
        padding:16px 18px 18px;
        font-size:.96rem;
        font-weight:700;
        line-height:1.9;
        color: var(--text);
    }

    /* Footer */
    .site-footer{
  padding: 24px 0 40px;
}

.footer-card{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  padding: 24px 28px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

.footer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-brand h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.footer-brand p{
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

.footer-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-2), #2563eb);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
  transition: all .25s ease;
}

.footer-links a:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}

.footer-divider{
  height: 1px;
  background: rgba(148, 163, 184, 0.22);
  margin: 20px 0 16px;
}

.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-bottom p{
  margin: 0;
  font-size: .92rem;
  color: #475569;
}

.footer-bottom a{
  color: var(--primary-2);
  text-decoration: none;
  font-weight: 700;
}

.footer-bottom a:hover{
  text-decoration: underline;
}


.course-card-green{
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: var(--radius-xl);
  text-decoration: none;
  background:
    radial-gradient(circle at top right, rgba(250, 204, 21, .18), transparent 22%),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, .12), transparent 24%),
    linear-gradient(145deg, #0b1f18 0%, #123126 45%, #18392d 100%);
  border: 1px solid rgba(250, 204, 21, .16);
  box-shadow:
    0 20px 46px rgba(11, 31, 24, .26),
    inset 0 1px 0 rgba(255,255,255,.04);
  isolation: isolate;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.course-card-green:hover{
  transform: translateY(-4px);
  border-color: rgba(250, 204, 21, .28);
  box-shadow:
    0 24px 54px rgba(11, 31, 24, .34),
    0 0 0 1px rgba(250, 204, 21, .06) inset;
}

.course-card-content{
  position: relative;
  z-index: 2;
}

.course-badge{
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(250, 204, 21, .10);
  color: #f7d774;
  border: 1px solid rgba(250, 204, 21, .18);
  font-size: .83rem;
  font-weight: 800;
}

.course-card-green h3{
  margin: 0 0 10px;
  color: #f7d774;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.9;
}

.course-card-green p{
  margin: 0 0 18px;
  color: rgba(241, 245, 249, .88);
  font-size: .96rem;
  line-height: 2;
  max-width: 60ch;
}

.course-card-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f7d774;
  font-weight: 800;
  font-size: .94rem;
}

.course-card-link svg{
  width: 18px;
  height: 18px;
  transition: transform .25s ease;
}

.course-card-green:hover .course-card-link svg{
  transform: translateX(-4px);
}

.course-glow{
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  z-index: 1;
  pointer-events: none;
}

.glow-1{
  top: -36px;
  right: -28px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(250, 204, 21, .24) 0%, rgba(250, 204, 21, 0) 72%);
}

.glow-2{
  bottom: -48px;
  left: -36px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(34, 197, 94, .16) 0%, rgba(34, 197, 94, 0) 74%);
}

@media (max-width: 768px){
  .course-card-green{
    padding: 22px 18px;
    border-radius: var(--radius-lg);
  }

  .course-card-green h3{
    font-size: 1.08rem;
  }

  .course-card-green p{
    font-size: .91rem;
  }
}




/* Mobile */
@media (max-width: 640px){
  .footer-card{
    padding: 20px 18px;
    border-radius: 20px;
  }

  .footer-top{
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links{
    width: 100%;
  }

  .footer-links a{
    width: 100%;
  }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-brand h3{
    font-size: 1rem;
  }

  .footer-brand p,
  .footer-bottom p{
    font-size: .9rem;
    line-height: 1.9;
  }
}




    /* responsive */
    @media (max-width: 1100px){
      .hero-grid,
      .register-wrap{
        grid-template-columns: 1fr;
      }

      .register-side{
        position:static;
      }

      .feature-grid{
        grid-template-columns: repeat(2, 1fr);
      }
      .sample-video-grid{
         grid-template-columns: repeat(2, 1fr);
        }

    }

    @media (max-width: 900px){
      .teacher-grid,
      .form-grid{
        grid-template-columns:1fr;
      }

      .course-list,
      .select-courses{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 700px){
      .container{
        width:min(100% - 18px, var(--container));
      }

      .hero-card,
      .form-card,
      .register-side,
      .teacher-card{
        border-radius:22px;
      }

      .hero-card{
        padding:22px 18px;
      }

      .feature-grid{
        grid-template-columns:1fr;
      }

      .hero-stats{
        grid-template-columns:1fr 1fr;
      }

      .section-head,
      .actions{
        align-items:stretch;
      }

      .btn-primary{
        width:100%;
      }

      .topbar-inner{
        min-height: 60px;
        }

        .brand{
            gap:10px;
        }

        .brand-badge{
            width:38px;
            height:38px;
            border-radius:12px;
        }

        .icon-btn{
            width:40px;
            height:40px;
        }

        .hero.hero-slider{
            min-height: 420px;
        }

        .hero-slide-content{
            min-height: 420px;
            align-items: end;
            padding-bottom: 52px;
        }

        .hero-content-box{
            max-width: 100%;
        }

        .hero-content-box p{
            font-size: .94rem;
        }

        .hero-nav{
            width: 42px;
            height: 42px;
            font-size: 1.35rem;
        }

        .hero-slider-ui{
            inset-inline: 10px;
        }

        .hero-badge{
            font-size: .82rem;
            padding: 8px 12px;
        }

        .sample-video-grid{
            grid-template-columns: 1fr;
            gap:14px;
        }

        .sample-video-card{
            border-radius: 22px;
        }

        .sample-video-play{
            width:62px;
            height:62px;
            font-size:1.45rem;
        }

        .sample-video-caption{
            padding:16px;
            font-size:.95rem;
        }

    }

    @media (max-width: 520px){
      .hero h1{
        font-size:1.55rem;
      }

      .hero p,
      .section-desc,
      .teacher-title p,
      .feature-card p,
      .register-side p,
      .submit-note{
        font-size:.92rem;
      }

      .hero-stats{
        grid-template-columns:1fr;
      }

      .mini-chip{
        width:100%;
        text-align:center;
      }
    }

    @media (prefers-reduced-motion: reduce){
        .hero-slide{
            transition: opacity .35s ease;
            transform: none !important;
        }

        .hero-nav,
        .hero-dot{
            transition: none;
        }
    }