:root{
 --vbx-purple:#6757d9;
 --vbx-purple2:#3c347e;
 --vbx-pink:#ed9bb6;
 --vbx-gold:#e8b65e;
 --vbx-mint:#73c8ac;
 --vbx-ink:#29243d;
 --vbx-bg:#fffaf6;
}

body{
 background:
 radial-gradient(circle at 8% 4%,rgba(237,155,182,.13),transparent 28%),
 radial-gradient(circle at 92% 13%,rgba(103,87,217,.12),transparent 30%),
 #fffaf6!important;
}

.vbx-logo-mark{
 width:48px;
 height:48px;
 min-width:48px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:17px 17px 17px 5px;
 background:linear-gradient(135deg,var(--vbx-purple),var(--vbx-pink) 60%,var(--vbx-gold));
 color:#fff;
 font-size:26px;
 font-weight:900;
 box-shadow:0 10px 28px rgba(103,87,217,.22);
}

.brand.mini .vbx-logo-mark,
.app-topbar .vbx-logo-mark{
 width:40px;
 height:40px;
 min-width:40px;
 font-size:21px;
}

.login-brand .vbx-logo-mark{
 width:72px;
 height:72px;
 margin:auto;
 font-size:36px;
}

.hero{
 position:relative!important;
 overflow:hidden!important;
 min-height:690px!important;
 background:
 linear-gradient(125deg,#302a5c 0%,#6656c4 49%,#d48ca9 100%)!important;
 isolation:isolate;
}

.hero:before,
.hero:after{
 content:"";
 position:absolute;
 border-radius:50%;
 filter:blur(2px);
 opacity:.7;
 animation:vbxFloat 8s ease-in-out infinite alternate;
 pointer-events:none;
}

.hero:before{
 width:420px;
 height:420px;
 left:-110px;
 top:-150px;
 background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%);
}

.hero:after{
 width:500px;
 height:500px;
 right:-160px;
 bottom:-230px;
 background:radial-gradient(circle,rgba(248,194,211,.34),transparent 68%);
 animation-delay:-3s;
}

@keyframes vbxFloat{
 from{transform:translate3d(0,0,0) scale(1)}
 to{transform:translate3d(25px,-18px,0) scale(1.08)}
}

.hero-grid{
 position:relative!important;
 z-index:3;
 min-height:690px;
 align-items:center!important;
}

.hero-copy{
 color:#fff;
 padding:38px;
 border-radius:32px;
 background:rgba(30,25,58,.30);
 border:1px solid rgba(255,255,255,.16);
 backdrop-filter:blur(14px);
 box-shadow:0 28px 80px rgba(18,15,38,.22);
}

.hero-copy h1{color:#fff!important}
.hero-copy h1 em{color:#ffd0dc!important}
.hero-copy p{color:rgba(255,255,255,.90)!important}
.hero-contact-strip a,
.hero-contact-strip span{color:#fff!important}

.bidayat-card{
 position:relative;
 width:min(390px,100%);
 min-height:390px;
 margin:auto;
 border-radius:42px 42px 42px 12px;
 background:rgba(255,255,255,.93);
 box-shadow:0 35px 90px rgba(22,18,50,.27);
 backdrop-filter:blur(15px);
 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;
 transform:rotate(-2deg);
 border:1px solid rgba(255,255,255,.42);
}

.bidayat-card .vbx-logo-mark{
 width:120px;
 height:120px;
 font-size:64px;
 border-radius:38px 38px 38px 12px;
}

.vbx-class-nav-badge{
 font-size:11px;
 background:#eee9ff;
 color:#5547ba;
 padding:2px 7px;
 border-radius:999px;
 margin-inline-start:5px;
}

.vbx-classes-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:16px;
}

.vbx-class-card{
 background:#fff;
 border:1px solid #eee8f3;
 border-radius:22px;
 padding:22px;
 box-shadow:0 14px 38px rgba(43,37,64,.07);
 border-right:6px solid var(--vbx-purple);
}

.vbx-class-card strong{
 display:block;
 font-size:24px;
 color:var(--vbx-ink);
 margin:6px 0 14px;
}

.vbx-class-card small{color:#817a8e}

.vbx-class-stats{
 display:flex;
 gap:8px;
 flex-wrap:wrap;
}

.vbx-class-stats span{
 background:#f6f3fb;
 border-radius:10px;
 padding:7px 10px;
 font-size:12px;
}

.vbx-att-tools{
 display:flex;
 align-items:center;
 gap:9px;
 flex-wrap:wrap;
 margin:13px 0;
 padding:14px;
 border:1px solid #eee8f3;
 border-radius:17px;
 background:#fff;
}

.vbx-att-tools select{min-width:145px}

.vbx-att-check{
 width:18px;
 height:18px;
 accent-color:var(--vbx-purple);
 margin-inline-end:8px;
 vertical-align:middle;
}

.vbx-hidden{display:none!important}

.vbx-doc-overlay{
 position:fixed;
 z-index:1000000;
 inset:0;
 padding:28px;
 overflow:auto;
 background:rgba(27,23,43,.74);
 backdrop-filter:blur(8px);
}

.vbx-doc{
 width:min(860px,100%);
 margin:auto;
 overflow:hidden;
 background:#fff;
 border-radius:27px;
 box-shadow:0 35px 100px rgba(0,0,0,.28);
 color:#29243d;
}

.vbx-doc-head{
 padding:30px;
 color:#fff;
 background:linear-gradient(125deg,#342d73,#6858d1 55%,#d88faa);
}

.vbx-doc-head h2{
 color:#fff;
 margin:20px 0 0;
}

.vbx-doc-body{padding:30px}

.vbx-doc-meta{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:12px;
 margin-bottom:20px;
}

.vbx-doc-meta div{
 background:#f8f6fb;
 border-radius:14px;
 padding:13px;
}

.vbx-doc-meta small{
 display:block;
 color:#817a8e;
 margin-bottom:5px;
}

.vbx-doc-table{
 width:100%;
 border-collapse:collapse;
 margin:20px 0;
}

.vbx-doc-table th,
.vbx-doc-table td{
 text-align:right;
 padding:13px 9px;
 border-bottom:1px solid #ece7f1;
}

.vbx-doc-section{
 padding:15px 0;
 border-bottom:1px solid #eee8f2;
}

.vbx-doc-section h3{color:#574ab9}

.vbx-doc-note{
 margin-top:18px;
 padding:13px;
 border-radius:13px;
 background:#fff7da;
 border:1px solid #efda88;
}

.vbx-doc-actions{
 display:flex;
 justify-content:flex-end;
 gap:10px;
 padding:18px 30px 28px;
}

.vbx-qr{
 width:235px;
 height:235px;
 margin:20px auto;
 padding:10px;
 background:#fff;
 border:1px solid #ded8e8;
 border-radius:17px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.vbx-qr img,
.vbx-qr canvas{
 width:100%!important;
 height:100%!important;
}

@media(max-width:900px){
 .vbx-classes-grid{grid-template-columns:1fr}
 .vbx-doc-meta{grid-template-columns:1fr}
 .bidayat-card{transform:none}
}

@media print{
 body *{visibility:hidden!important}
 .vbx-doc-overlay,.vbx-doc-overlay *{visibility:visible!important}
 .vbx-doc-overlay{
  position:absolute!important;
  inset:0!important;
  padding:0!important;
  background:#fff!important;
 }
 .vbx-doc{
  width:100%!important;
  box-shadow:none!important;
  border-radius:0!important;
 }
 .vbx-doc-actions{display:none!important}
}


/* VIBEX HERO VIDEO V4 */
.hero{
  position:relative!important;
  isolation:isolate!important;
  background:#302a5c!important;
}

.vbx-hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
}

.vbx-video-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(29,24,56,.94) 0%,
      rgba(39,31,70,.86) 35%,
      rgba(45,35,67,.58) 68%,
      rgba(35,28,53,.34) 100%
    );
}

.hero::before,
.hero::after{
  z-index:2!important;
}

.hero-grid{
  position:relative!important;
  z-index:3!important;
}

.hero-copy{
  background:rgba(25,21,49,.43)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  backdrop-filter:blur(11px)!important;
  -webkit-backdrop-filter:blur(11px)!important;
}

.bidayat-card{
  position:relative;
  z-index:3;
  background:rgba(255,255,255,.91)!important;
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}

@media (max-width:700px){
  .vbx-hero-video{
    object-position:58% center;
  }

  .vbx-video-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(31,26,57,.73) 0%,
        rgba(31,26,57,.89) 65%,
        rgba(31,26,57,.95) 100%
      );
  }
}

@media (prefers-reduced-motion:reduce){
  .vbx-hero-video{
    display:none;
  }
}