/* Homepage-only styles (index.html). Hero + value strip are inlined in <head> as critical CSS;
   everything below the fold lives here. Class prefix: hp- */

.hp-wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.hp-section{padding:44px 0 0}
.hp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:18px}
.hp-h2{font-size:24px;font-weight:800;line-height:1.25;color:var(--text-dark);letter-spacing:-.2px}
.hp-lead{font-size:15px;line-height:1.6;color:var(--text-mid);margin-top:4px;max-width:680px}
.hp-sub{font-size:14px;font-weight:800;color:var(--text-mid);text-transform:uppercase;letter-spacing:.6px;margin:26px 0 12px}

/* ---- link / button system (primary + secondary live in the critical CSS) ---- */
.hp-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px;font-weight:800;color:var(--blue);text-decoration:none;font-family:inherit}
.hp-link:hover{text-decoration:underline}
:where(a,button,summary):focus-visible{outline:3px solid #ffb703;outline-offset:2px;border-radius:6px}

/* ---- free tests: compact cards ---- */
.hp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--card-bg);border:1px solid rgba(0,0,0,.05);border-radius:var(--radius);padding:18px 18px 8px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.hp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.hp-card-top{display:flex;align-items:center;gap:10px}
.hp-card-icon{flex:none;width:38px;height:38px;border-radius:10px;background:#edf2ff;color:var(--blue);display:flex;align-items:center;justify-content:center}
.hp-card-icon svg{width:20px;height:20px}
.hp-card-tag{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-mid)}
.hp-card-title{font-size:17px;font-weight:800;line-height:1.3}
.hp-card-text{font-size:14px;line-height:1.5;color:var(--text-mid);flex:1}
.hp-card .hp-link::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.hp-card-featured{background:linear-gradient(150deg,#2b2590,#4a41ce);color:#fff;border-color:transparent}
.hp-card-featured .hp-card-icon{background:rgba(255,255,255,.16);color:#fff}
.hp-card-featured .hp-card-tag,.hp-card-featured .hp-card-text{color:rgba(255,255,255,.88)}
.hp-card-featured .hp-link{color:#ffd166}

/* ---- WORD exam section ---- */
.hp-exam{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;background:var(--card-bg);border-radius:20px;box-shadow:var(--shadow);padding:30px;border:1px solid rgba(0,0,0,.04)}
.hp-exam-badge{display:inline-block;font-size:12px;font-weight:800;color:var(--blue);background:#edf2ff;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.hp-exam .hp-btn{margin-top:18px}
.hp-micro{font-size:12.5px;color:var(--text-mid);margin-top:10px;line-height:1.5}
.hp-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.hp-meta div{background:#f5f7fb;border-radius:12px;padding:12px 14px}
.hp-meta dt{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mid)}
.hp-meta dd{font-size:15px;font-weight:700;line-height:1.35;margin-top:2px}
.hp-steps-title{font-size:15px;font-weight:800;color:var(--text-mid);margin:22px 0 10px}
.hp-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hp-steps li{display:flex;gap:12px;background:var(--card-bg);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.hp-step-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.hp-step-t{display:block;font-size:14.5px;font-weight:800;line-height:1.3;margin-bottom:2px}
.hp-steps p{font-size:13px;line-height:1.5;color:var(--text-mid)}

/* ---- categories ---- */
.hp-cat-list{list-style:none;display:grid;gap:10px}
.hp-cat-list.pop{grid-template-columns:repeat(5,1fr)}
.hp-cat-list.all{grid-template-columns:repeat(3,1fr)}
.hp-cat{display:flex;align-items:center;gap:12px;min-height:64px;height:100%;background:var(--card-bg);border:1px solid rgba(0,0,0,.05);border-radius:12px;padding:10px 14px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.hp-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.hp-cat-icon{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.hp-cat-icon svg{width:18px!important;height:18px!important}
.hp-cat-body{min-width:0;flex:1}
.hp-cat-name{display:block;font-size:14.5px;font-weight:800;line-height:1.3}
.hp-cat-desc{display:block;font-size:12.5px;line-height:1.4;color:var(--text-mid);margin-top:1px}
.hp-cat-go{flex:none;color:var(--blue);font-weight:800}
.hp-cat.pop{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
.hp-cat.pop .hp-cat-go{margin-top:auto;font-size:13px}
.hp-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.hp-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:var(--card-bg);border:1px solid var(--border);font-size:13.5px;font-weight:700;color:var(--text-dark);text-decoration:none}
.hp-chip:hover{border-color:var(--blue);color:var(--blue)}

/* ---- question cards: horizontal, thumbnail ≈ 40% of card ---- */
.hp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hp-q{position:relative;display:grid;grid-template-columns:40% 1fr;gap:14px;align-items:stretch;background:var(--card-bg);border:1px solid rgba(0,0,0,.05);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s,box-shadow .2s}
.hp-q:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.hp-q-media{position:relative;aspect-ratio:16/9;align-self:start;background:#dfe5f1;overflow:hidden}
.hp-q-media img{display:block;width:100%;height:100%;object-fit:cover}
.hp-q-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 12px 0;min-width:0}
.hp-q-cat{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--blue);background:#edf2ff;padding:2px 9px;border-radius:999px}
.hp-q-title{font-size:14.5px;font-weight:700;line-height:1.4}
.hp-q-title a{color:inherit;text-decoration:none}
.hp-q-title a::after{content:"";position:absolute;inset:0}
.hp-q-title a:hover{color:var(--blue)}
.hp-more{margin-top:12px;display:flex;justify-content:flex-end}

/* ---- video lessons (JS-rendered grid, restyled compact + horizontal) ---- */
.hp-videos .yt-section{padding:0}
.hp-videos .yt-grid{grid-template-columns:repeat(3,1fr);gap:12px}
.hp-videos .yt-card{display:grid;grid-template-columns:42% 1fr;align-items:center;border-radius:12px}
.hp-videos .yt-card:hover{transform:translateY(-2px)}
.hp-videos .yt-thumb-wrap{aspect-ratio:16/9;background:#dfe5f1}
.hp-videos .yt-card-info{padding:8px 12px}
.hp-videos .yt-card-title{font-size:13px;margin:0;-webkit-line-clamp:3;line-clamp:3}
.hp-videos .yt-card-date{display:none}
.hp-videos .yt-play-btn{transform:scale(.6)}
.hp-videos .yt-skeleton-thumb{width:100%;height:100%}
.hp-yt-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:10px;background:#c4001d;color:#fff;font-size:13px;font-weight:800;text-decoration:none}
.hp-yt-btn:hover{background:#a80019}

/* ---- long-form SEO content ---- */
.hp-prose-wrap{background:var(--card-bg);border-radius:20px;box-shadow:var(--shadow);padding:40px 28px;border:1px solid rgba(0,0,0,.04)}
.hp-prose{max-width:760px;margin:0 auto}
.hp-prose .hp-h2{margin-bottom:6px}
.hp-prose h3{font-size:20px;font-weight:800;line-height:1.35;margin:30px 0 8px;color:var(--text-dark)}
.hp-prose p{font-size:16.5px;line-height:1.8;color:#3d4c5e;margin-bottom:14px}
.hp-prose a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---- FAQ (native <details>) ---- */
.hp-faq{max-width:860px;margin:0 auto}
.hp-faq-item{background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow);margin-bottom:10px;border:1px solid rgba(0,0,0,.04)}
.hp-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:10px 18px}
.hp-faq-item summary::-webkit-details-marker{display:none}
.hp-faq-q{font-size:16px;font-weight:700;line-height:1.4}
.hp-faq-item summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.hp-faq-item[open] summary::after{transform:rotate(-135deg)}
.hp-faq-item[open] summary{padding-bottom:4px}
.hp-faq-a{padding:0 18px 16px;font-size:15px;line-height:1.7;color:#3d4c5e}

/* ---- final CTA ---- */
.hp-final{margin-top:48px;background:linear-gradient(160deg,#1f1b63,#4a41ce);color:#fff;text-align:center;padding:36px 20px}
.hp-final-title{font-size:26px;font-weight:800;line-height:1.25}
.hp-final p.hp-final-sub{font-size:15.5px;opacity:.9;margin:6px auto 18px;max-width:520px}

/* ---- footer (home variant) ---- */
.footer-home .footer-inner{grid-template-columns:1.5fr repeat(5,1fr);gap:0 20px}
.footer-home .footer-link{min-height:36px}

/* ---- responsive ---- */
@media (max-width:1000px){
  .hp-grid-3{grid-template-columns:repeat(2,1fr)}
  .hp-cat-list.pop{grid-template-columns:repeat(3,1fr)}
  .hp-cat-list.all{grid-template-columns:repeat(2,1fr)}
  .hp-videos .yt-grid{grid-template-columns:repeat(2,1fr)}
  .hp-exam{grid-template-columns:1fr}
  .footer-home .footer-inner{grid-template-columns:repeat(3,1fr);row-gap:24px}
  .footer-home .footer-brand-col{grid-column:1/-1}
}
@media (max-width:700px){
  .hp-wrap{padding:0 16px}
  .hp-section{padding-top:32px}
  .hp-h2{font-size:21px}
  .hp-grid-3,.hp-grid-2,.hp-steps{grid-template-columns:1fr}
  .hp-grid-3{gap:12px}
  .hp-exam{padding:20px 16px}
  .hp-meta{grid-template-columns:1fr 1fr}
  .hp-cat-list.pop{grid-template-columns:repeat(2,1fr)}
  .hp-cat-list.pop li:last-child{grid-column:1/-1}
  .hp-cat-list.all{grid-template-columns:1fr}
  .hp-videos .yt-grid{grid-template-columns:1fr}
  .hp-videos .yt-card:nth-child(n+7){display:none} /* first 6 on phones; full playlist via the YouTube button */
  .hp-section-head{gap:0 24px;margin-bottom:12px}
  .hp-q{grid-template-columns:38% 1fr;gap:10px}
  .hp-q-body{padding:10px 10px 10px 0}
  .hp-q-title{font-size:13.5px}
  .hp-prose-wrap{padding:26px 16px;border-radius:16px}
  .hp-prose p{font-size:16px;line-height:1.75}
  .hp-prose h3{font-size:18.5px}
  .hp-faq-q{font-size:15px}
  .hp-final-title{font-size:22px}
  .footer-home .footer-inner{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .hp-card,.hp-q,.hp-cat,.hp-videos .yt-card{transition:none}
}