/* Shared product hero banner (StudentPortal, InstructorTools, WebAssess, DataCentral, SolyraAI, LicenSure, QuickCompli).
   Accent colours are set per page with --pb-a / --pb-a2. */
.pb{--pb-a:#2f7bff;--pb-a2:#7ab8ff;--pb-orange:#f4512c;position:relative;overflow:hidden;color:#fff;font-family:Poppins,sans-serif;
  background:linear-gradient(135deg,#16335f,#0f2447 60%,#0b1a36);padding:150px 0 104px}
.pb *{box-sizing:border-box}
.pb::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 88% 12%,color-mix(in srgb,var(--pb-a) 55%,transparent),transparent 70%),radial-gradient(40% 45% at 0% 100%,color-mix(in srgb,var(--pb-a2) 22%,transparent),transparent 70%)}
.pb::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 80% at 60% 40%,#000,transparent);mask-image:radial-gradient(70% 80% at 60% 40%,#000,transparent)}
.pb-inner{position:relative;z-index:1;max-width:1450px;margin:0 auto;padding:0 40px}
.pb--sp{--pb-a:#1a8cff;--pb-a2:#79c3ff}
.pb--it{--pb-a:#f4512c;--pb-a2:#ff9f80}
.pb--wa{--pb-a:#12a3b0;--pb-a2:#6fe0e8}
.pb--dc{--pb-a:#1a8cff;--pb-a2:#8fd0ff}
.pb--sa{--pb-a:#7c5cff;--pb-a2:#b9a8ff}
.pb--ls{--pb-a:#17b26a;--pb-a2:#7ee8b3}
.pb--qc{--pb-a:#4f6bff;--pb-a2:#9db0ff}

.pb-brand{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:34px}
.pb-brand img{display:block;height:114px;width:auto;max-width:100%}
.pb-brand span{font-weight:700;font-size:30px;line-height:1.1}
.pb-grid{display:grid;grid-template-columns:1.30fr .95fr;gap:44px;align-items:center}
.pb-grid.pb-single{grid-template-columns:1fr}
.pb-grid--sa{grid-template-columns:1.80fr .95fr}
.pb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pb-a2);padding:7px 14px;border:1px solid color-mix(in srgb,var(--pb-a2) 30%,transparent);border-radius:999px;background:color-mix(in srgb,var(--pb-a) 12%,transparent);margin-bottom:18px}
.pb-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--pb-a2);box-shadow:0 0 0 4px color-mix(in srgb,var(--pb-a2) 25%,transparent)}
.pb h2{font-family:Poppins,sans-serif;font-size:clamp(42px,5.2vw,55px);line-height:1.05;font-weight:800;letter-spacing:-.05em;padding:0;margin:0 0 20px 0;color:#fff;text-transform:capitalize}
.pb h2 em{font-style:normal;background:linear-gradient(100deg,var(--pb-a2),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-lead{font-size:15px;line-height:1.65;color:#d6e0f2;max-width:560px;margin:0 0 10px}
.pb-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.pb-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:13.5px;color:#fff}
.pb-chip .material-symbols-outlined{font-size:19px;color:var(--pb-a2)}
.pb-micro{font-size:12px;color:#aebcd6;margin:-10px 0 20px}
.pb-btns{display:flex;gap:12px;flex-wrap:wrap}
.pb-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:99px;font:600 14px Poppins,sans-serif;border:0;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s}
.pb-btn:hover{transform:translateY(-2px);text-decoration:none}
.pb-btn.pb-p{background:var(--pb-orange);color:#fff;box-shadow:0 8px 20px rgba(244,81,44,.35)}
.pb-btn.pb-s{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
.pb-btn.d-none{display:none}
.pb-btn .material-symbols-outlined{font-size:18px}

.pb-vis{position:relative}
.pb-frame{border-radius:14px;background:#fff;box-shadow:0 24px 50px rgba(0,0,0,.4);overflow:hidden;transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
.pb-bar{height:26px;background:#e8edf5;display:flex;align-items:center;gap:6px;padding:0 12px}
.pb-bar i{width:9px;height:9px;border-radius:50%;background:#c4cddc}
.pb-frame img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.pb-float{z-index:1;position:absolute;display:flex;align-items:center;gap:8px;background:#fff;color:#12213d;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:12px;box-shadow:0 12px 26px rgba(0,0,0,.3)}
.pb-float .material-symbols-outlined{font-size:20px;color:var(--pb-a)}
.pb-f1{left:-22px;bottom:28px}
.pb-f2{right:-12px;top:-14px}

.pb-panel{border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.pb-panel h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pb-a2);margin:0 0 12px}
.pb-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;margin-bottom:9px;font-size:13.5px}
.pb-row .material-symbols-outlined{color:var(--pb-a2);font-size:20px}
.pb-row em{margin-left:auto;font-style:normal;font-size:11px;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--pb-a) 40%,transparent);white-space:nowrap}

@media(max-width:900px){
  .pb{padding:140px 0 72px}
  .pb h2{font-size:clamp(32px,8vw,42px)}
  .pb-inner{padding:0 20px}
  .pb-grid{grid-template-columns:1fr;gap:32px}
  .pb-f1,.pb-f2{display:none}
  .pb-frame{transform:none}
  .pb-brand img{height:80px}
  .pb-brand span{font-size:22px}
}
