/* =========================================================
   HERO — search + quick stats
   ========================================================= */
   .video-hero{
    background:linear-gradient(to bottom, var(--ink-tint), var(--paper));
    padding:72px 0 60px;
    border-bottom:1px solid var(--line);
  }
  .video-hero .eyebrow{justify-content:center; margin-bottom:14px;}
  .video-hero .eyebrow::before{display:none;}
  .video-hero h1{font-size:clamp(30px,4vw,44px); margin:0 0 16px; max-width:760px; margin-left:auto; margin-right:auto;}
  .video-hero p.lead{color:var(--muted); font-size:16.5px; max-width:600px; margin:0 auto 32px;}
  
  .video-search{
    max-width:600px; margin:0 auto 36px;
    display:flex; align-items:center; gap:10px;
    background:var(--white); border:1.5px solid var(--line); border-radius:999px;
    padding:6px 8px 6px 20px; box-shadow:var(--shadow-card);
  }
  .video-search i{color:var(--muted); font-size:14px;}
  .video-search .input-hip{
    border:none; padding:8px 4px; flex:1; background:transparent;
  }
  .video-search .input-hip:focus{outline:none;}
  .video-search .btn-hip{border-radius:999px;}
  
  .video-hero__stats{display:flex; justify-content:center; gap:40px; flex-wrap:wrap;}
  .video-hero__stats div strong{display:block; font-family:var(--font-display); font-size:24px; color:var(--ink-dark); font-weight:600;}
  .video-hero__stats div span{font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;}
  
  /* =========================================================
     EXAM TABS (All / CA / CS / CMA / JEE / NEET / SSC)
     ========================================================= */
  .video-tabs{
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;
    overflow-x:auto; padding-bottom:2px;
  }
  .video-tabs span{
    font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.03em;
    padding:8px 17px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--white); color:var(--ink-text); cursor:pointer;
    white-space:nowrap; transition:.15s;
  }
  .video-tabs span:hover{border-color:var(--ink);}
  .video-tabs span.active{background:var(--ink); border-color:var(--ink); color:#fff;}
  
  /* =========================================================
     VIDEO CARD — extends the visual language of .hip-card
     ========================================================= */
  .video-card{
    background:var(--white); border:1px solid var(--line);
    border-radius:var(--r-md); overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height:100%; display:flex; flex-direction:column;
  }
  .video-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--line-soft);}
  
  .video-card__thumb{
    aspect-ratio:16/9; position:relative; cursor:pointer;
    background:linear-gradient(135deg, var(--ink), var(--ink-dark));
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .video-card__thumb::after{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:28px 28px;
    pointer-events:none;
  }
  .video-card__thumb .code-tag{position:absolute; top:12px; left:12px; z-index:2;}
  .video-card__badge{position:absolute; top:12px; right:12px; z-index:2;}
  
  .video-card__play{
    width:56px; height:56px; border-radius:50%;
    background:rgba(255,255,255,.92); color:var(--ink);
    border:none; display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; position:relative; z-index:2;
    transition:transform .18s ease, background .18s ease;
    box-shadow:0 8px 20px -6px rgba(0,0,0,.45);
  }
  .video-card__play i{margin-left:3px;}
  .video-card:hover .video-card__play{transform:scale(1.08); background:var(--gold); color:#fff;}
  
  .video-card__duration{
    position:absolute; bottom:10px; right:10px; z-index:2;
    background:rgba(10,42,64,.85); color:#fff; font-family:var(--font-mono);
    font-size:11px; font-weight:600; padding:3px 9px; border-radius:5px;
  }
  
  .video-card__body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .video-card__body h5{font-size:16px; margin:0; line-height:1.35;}
  
  .video-card__instructor{display:flex; align-items:center; gap:10px;}
  .video-card__avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--ink-tint); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:14px;
  }
  .video-card__instructor strong{display:block; font-size:13px;}
  .video-card__instructor span{display:flex; align-items: center; justify-content: center; font-size:11.5px; color:var(--muted); font-family:var(--font-mono);}
  
  /* =========================================================
     VIDEO PREVIEW MODAL
     ========================================================= */
  .video-modal{
    position:fixed; inset:0; z-index:2000;
    display:none; align-items:center; justify-content:center;
    padding:24px;
  }
  .video-modal.is-open{display:flex;}
  .video-modal__backdrop{
    position:absolute; inset:0; background:rgba(10,20,28,.82);
  }
  .video-modal__box{
    position:relative; z-index:1; width:100%; max-width:860px;
  }
  .video-modal__close{
    position:absolute; top:-46px; right:0; z-index:2;
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .15s ease;
  }
  .video-modal__close:hover{background:rgba(255,255,255,.24);}
  .video-modal__frame{
    aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
    background:#000;
  }
  .video-modal__frame iframe{width:100%; height:100%; border:0; display:block;}
  
  @media (max-width: 767px){
    .video-hero__stats{gap:24px;}
    .video-modal__close{top:-42px;}
  }