/* ===== SEATECH HOMEPAGE STYLES ===== */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ── COLOR VARIABLES ── */
:root {
  --hp-blue:      #2572ff;
  --hp-blue-dark: #1a5fd4;
  --hp-blue-cta:  #3070e6;
  --hp-navy:      #0b1c39;
  --hp-yellow:    #faad19;
  --hp-yellow-bg: rgba(250,173,25,.10);
  --hp-gray-bg:   #f6f7fa;
  --hp-white:     #ffffff;
  --hp-text:      #212529;
  --hp-muted:     #6c757d;
  --hp-border:    #e9ecef;
}

/* ── SHARED SECTION UTILITIES ── */
.hp-section-pad { padding: 80px 0; }
.hp-section-bg  { background: var(--hp-gray-bg); }
.hp-wrap        { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.hp-sec-title          { text-align: center; margin-bottom: 52px; }
.hp-sec-title .tag     { font-size: 13px; font-weight: 600; color: var(--hp-blue); text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 8px; }
.hp-sec-title h2       { font-size: 36px; font-weight: 700; color: var(--hp-navy); line-height: 1.2; }
.hp-sec-title p        { font-size: 14px; color: var(--hp-muted); margin-top: 12px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ── SHARED BUTTONS ── */
.hp-btn-primary { display: inline-block; background: var(--hp-blue); color: var(--hp-white); padding: 13px 32px; border-radius: 6px; font-weight: 600; font-size: 14px; transition: all .25s; box-shadow: 0 4px 16px rgba(37,114,255,.4); text-decoration: none; }
.hp-btn-primary:hover { background: var(--hp-blue-dark); transform: translateY(-2px); color: var(--hp-white); }
.hp-btn-outline-white { display: inline-block; border: 2px solid rgba(255,255,255,.45); color: var(--hp-white); padding: 11px 30px; border-radius: 6px; font-weight: 600; font-size: 14px; transition: all .25s; text-decoration: none; }
.hp-btn-outline-white:hover { border-color: var(--hp-yellow); color: var(--hp-yellow); }
.hp-btn-outline-dark { display: inline-block; border: 2px solid var(--hp-navy); color: var(--hp-navy); padding: 12px 36px; border-radius: 6px; font-weight: 600; font-size: 14px; transition: all .25s; text-decoration: none; }
.hp-btn-outline-dark:hover { background: var(--hp-navy); color: var(--hp-white); }
.hp-btn-yellow { display: inline-block; background: var(--hp-yellow); color: var(--hp-navy); padding: 12px 28px; border-radius: 6px; font-weight: 700; font-size: 14px; transition: all .2s; text-decoration: none; }
.hp-btn-yellow:hover { background: #e09c10; transform: translateY(-2px); color: var(--hp-navy); }

/* ── HERO ── */
.hp-hero {
  position: relative; overflow: hidden; min-height: 90vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(11,28,57,.78) 0%, rgba(11,28,57,.85) 100%),
    url('../img/banner_01.jpeg')
    center/cover no-repeat;
  text-align: center; padding: 80px 24px 60px;
}
.hp-hero-label { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 18px; font-family: 'Poppins', sans-serif; }
.hp-hero h1   { font-size: 52px; font-weight: 700; color: var(--hp-white); line-height: 1.15; margin-bottom: 20px; max-width: 750px; font-family: 'Poppins', sans-serif; }
.hp-hero h1 span { color: var(--hp-yellow); }
.hp-hero > p  { font-size: 16px; color: rgba(255,255,255,.78); max-width: 600px; margin: 0 auto 32px; line-height: 1.75; font-family: 'Poppins', sans-serif; }
.hp-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hp-hero-stats { display: flex; gap: 56px; justify-content: center; margin-top: 52px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.12); }
.hp-hero-stat-num { font-size: 38px; font-weight: 800; color: var(--hp-yellow); line-height: 1; font-family: 'Poppins', sans-serif; }
.hp-hero-stat-lbl { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; font-family: 'Poppins', sans-serif; }
.hp-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--hp-white); cursor: pointer; transition: all .2s; font-size: 16px; background: transparent; }
.hp-hero-arrow:hover { background: var(--hp-blue); border-color: var(--hp-blue); }
.hp-hero-arrow.prev { left: 20px; }
.hp-hero-arrow.next { right: 20px; }

/* ── FEATURES + SCHEDULE ── */
.hp-features-wrap   { background: var(--hp-white); box-shadow: 0 8px 40px rgba(0,0,0,.09); position: relative; z-index: 10; }
.hp-features-inner  { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 300px; }
.hp-feature-box     { padding: 32px 28px; border-right: 1px solid var(--hp-border); }
.hp-feature-box:last-child { border-right: none; }
.hp-feat-ico        { font-size: 40px; margin-bottom: 14px; display: block; }
.hp-feature-box h4  { font-size: 16px; font-weight: 700; color: var(--hp-navy); margin-bottom: 8px; font-family: 'Poppins', sans-serif; }
.hp-feature-box p   { font-size: 13px; color: var(--hp-muted); line-height: 1.65; font-family: 'Poppins', sans-serif; margin: 0; }
/* Schedule box */
.hp-schedule-box    { padding: 28px; background: var(--hp-white); }
.hp-schedule-box h4 { font-size: 17px; font-weight: 700; color: var(--hp-navy); margin-bottom: 18px; font-family: 'Poppins', sans-serif; }
.hp-sched-select    { width: 100%; padding: 11px 14px; border: 1px solid var(--hp-border); border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--hp-muted); background: #f0f3f7; appearance: none; cursor: pointer; margin-bottom: 10px; }
.hp-sched-btn       { width: 100%; background: var(--hp-blue); color: var(--hp-white); border: none; padding: 12px; border-radius: 5px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s; margin-top: 2px; }
.hp-sched-btn:hover { background: var(--hp-blue-dark); }

/* ── ABOUT ── */
.hp-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hp-about-panel {
  background: linear-gradient(135deg,var(--hp-navy) 0%,#1a3a6b 100%);
  border-radius: 14px; padding: 48px 40px; color: var(--hp-white); position: relative; overflow: hidden;
}
.hp-about-panel::before { content: '⚓'; position: absolute; right: 20px; bottom: 0; font-size: 130px; opacity: .06; line-height: 1; pointer-events: none; }
.hp-trusted-badge {
  background: var(--hp-blue); color: var(--hp-white);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; font-family: 'Poppins', sans-serif;
}
.hp-trusted-badge .dot { width: 7px; height: 7px; background: var(--hp-yellow); border-radius: 50%; flex-shrink: 0; }
.hp-about-panel h3 { font-size: 26px; font-weight: 700; margin-bottom: 16px; font-family: 'Poppins', sans-serif; }
.hp-about-panel p  { font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.8; margin-bottom: 14px; font-family: 'Poppins', sans-serif; }
.hp-milestones     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 28px; }
.hp-ms             { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 14px 10px; text-align: center; }
.hp-ms-num         { font-size: 22px; font-weight: 800; color: var(--hp-yellow); line-height: 1; font-family: 'Poppins', sans-serif; }
.hp-ms-lbl         { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 3px; font-family: 'Poppins', sans-serif; }
/* Right text */
.hp-about-text .sub-tag { color: var(--hp-blue); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: 'Poppins', sans-serif; }
.hp-about-text .sub-tag::before { content: ''; width: 28px; height: 2px; background: var(--hp-blue); flex-shrink: 0; }
.hp-about-text h2  { font-size: 34px; font-weight: 700; color: var(--hp-navy); line-height: 1.2; margin-bottom: 8px; font-family: 'Poppins', sans-serif; }
.hp-about-text .exp-tag { color: var(--hp-blue); font-size: 15px; font-weight: 600; margin-bottom: 16px; font-family: 'Poppins', sans-serif; }
.hp-about-text > p { font-size: 14px; color: var(--hp-muted); line-height: 1.8; margin-bottom: 14px; font-family: 'Poppins', sans-serif; }
.hp-call-us        { font-size: 15px; color: var(--hp-text); margin-bottom: 24px; font-family: 'Poppins', sans-serif; }
.hp-call-us a      { color: var(--hp-blue); font-weight: 700; text-decoration: none; }
.hp-feat-items     { margin-bottom: 28px; }
.hp-feat-item      { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hp-border); }
.hp-feat-item:last-child { border-bottom: none; }
.hp-feat-ico-box   { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.hp-ico-yellow     { background: var(--hp-yellow-bg); }
.hp-ico-blue       { background: rgba(37,114,255,.08); }
.hp-ico-green      { background: rgba(40,167,69,.08); }
.hp-feat-item h5   { font-size: 14px; font-weight: 700; color: var(--hp-navy); margin-bottom: 3px; font-family: 'Poppins', sans-serif; }
.hp-feat-item p    { font-size: 13px; color: var(--hp-muted); line-height: 1.5; margin: 0; font-family: 'Poppins', sans-serif; }

/* ── COURSES ── */
.hp-tab-row  { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.hp-tab-pill { padding: 9px 22px; border-radius: 22px; border: 2px solid var(--hp-border); background: var(--hp-white); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--hp-muted); cursor: pointer; transition: all .2s; }
.hp-tab-pill.active, .hp-tab-pill:hover { background: var(--hp-blue); color: var(--hp-white); border-color: var(--hp-blue); }
.hp-courses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.hp-c-card       { background: var(--hp-white); border: 1px solid var(--hp-border); border-radius: 10px; overflow: hidden; transition: all .3s; display: flex; flex-direction: column; }
.hp-c-card:hover { transform: translateY(-5px); box-shadow: 0 14px 44px rgba(0,0,0,.1); border-color: #c8d6ea; }
.hp-c-body       { flex: 1; padding: 18px 20px; }
.hp-c-head       { background: linear-gradient(135deg,var(--hp-navy) 0%,#1e4080 100%); padding: 22px 20px; position: relative; overflow: hidden; }
.hp-c-badge      { background: var(--hp-yellow); color: var(--hp-navy); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 12px; border-radius: 14px; display: inline-block; margin-bottom: 10px; position: relative; z-index: 1; font-family: 'Poppins', sans-serif; }
.hp-c-head h4    { font-size: 15px; font-weight: 700; color: var(--hp-white); position: relative; z-index: 1; line-height: 1.3; font-family: 'Poppins', sans-serif; margin: 0; }
.hp-c-list       { list-style: none; padding: 0; margin: 0; }
.hp-c-list li    { font-size: 13px; color: var(--hp-muted); padding: 6px 0; border-bottom: 1px solid #f5f5f5; display: flex; gap: 7px; align-items: flex-start; line-height: 1.4; font-family: 'Poppins', sans-serif; }
.hp-c-list li::before { content: '›'; color: var(--hp-blue); font-size: 16px; font-weight: 700; line-height: 1.2; flex-shrink: 0; }
.hp-c-list li:last-child { border-bottom: none; }
.hp-c-more       { font-size: 12px; color: var(--hp-muted); font-style: italic; padding: 6px 20px 0; display: block; font-family: 'Poppins', sans-serif; }
.hp-c-btn        { display: block; text-align: center; background: var(--hp-blue); color: var(--hp-white); padding: 10px 20px; margin: 14px 20px 18px; border-radius: 5px; font-weight: 600; font-size: 13px; transition: background .2s; text-decoration: none; font-family: 'Poppins', sans-serif; }
.hp-c-btn:hover  { background: var(--hp-blue-dark); color: var(--hp-white); }
.hp-span2        { grid-column: span 2; }
.hp-span3        { grid-column: span 3; }
.hp-wide-list    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.hp-view-all     { text-align: center; margin-top: 40px; }

/* ── CATEGORIES ── */
.hp-cat-grid  { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.hp-cat-item  { border-radius: 10px; padding: 28px 16px; text-align: center; border: 1px solid transparent; transition: all .3s; cursor: pointer; }
.hp-cat-item:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.hp-cat-y     { background: rgba(250,173,25,.08); border-color: rgba(250,173,25,.2); }
.hp-cat-b     { background: rgba(37,114,255,.07); border-color: rgba(37,114,255,.18); }
.hp-cat-g     { background: rgba(40,167,69,.07); border-color: rgba(40,167,69,.18); }
.hp-cat-p     { background: rgba(232,62,140,.07); border-color: rgba(232,62,140,.18); }
.hp-cat-v     { background: rgba(111,66,193,.07); border-color: rgba(111,66,193,.18); }
.hp-cat-ico   { font-size: 36px; margin-bottom: 12px; }
.hp-cat-item h4 { font-size: 14px; font-weight: 700; color: var(--hp-navy); margin-bottom: 4px; font-family: 'Poppins', sans-serif; }
.hp-cat-item p  { font-size: 12px; color: var(--hp-muted); margin: 0; font-family: 'Poppins', sans-serif; }

/* ── VMC ── */
.hp-vmc-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.hp-vmc-card  { background: var(--hp-white); border: 1px solid var(--hp-border); border-radius: 10px; overflow: hidden; transition: all .3s; }
.hp-vmc-card:hover { transform: translateY(-5px); box-shadow: 0 14px 44px rgba(0,0,0,.08); }
.hp-vmc-top   { background: linear-gradient(135deg,var(--hp-navy),#1e4080); padding: 28px 24px; text-align: center; }
.hp-vmc-ico   { font-size: 38px; margin-bottom: 10px; }
.hp-vmc-top h3 { font-size: 22px; font-weight: 700; color: var(--hp-white); font-family: 'Poppins', sans-serif; margin: 0; }
.hp-vmc-body  { padding: 22px 24px; }
.hp-vmc-body p { font-size: 13px; color: var(--hp-muted); line-height: 1.75; margin-bottom: 14px; font-family: 'Poppins', sans-serif; }
.hp-vmc-list  { list-style: none; padding: 0; margin: 0; }
.hp-vmc-list li { font-size: 13px; color: var(--hp-muted); padding: 6px 0; border-bottom: 1px solid #f5f5f5; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; font-family: 'Poppins', sans-serif; }
.hp-vmc-list li::before { content: '✓'; color: var(--hp-blue); font-weight: 700; flex-shrink: 0; }
.hp-vmc-list li:last-child { border-bottom: none; }

/* ── CORE VALUES ── */
.hp-values-sec { background: var(--hp-navy); }
.hp-values-sec .hp-sec-title .tag { color: var(--hp-yellow); }
.hp-values-sec .hp-sec-title h2   { color: var(--hp-white); }
.hp-values-sec .hp-sec-title p    { color: rgba(255,255,255,.6); }
.hp-val-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.hp-val-card   { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 28px 18px; text-align: center; transition: all .3s; cursor: default; }
.hp-val-card:hover { background: rgba(37,114,255,.15); border-color: rgba(37,114,255,.4); transform: translateY(-4px); }
.hp-val-letter { font-size: 50px; font-weight: 900; color: var(--hp-yellow); line-height: 1; margin-bottom: 8px; font-family: 'Poppins', sans-serif; }
.hp-val-word   { font-size: 14px; font-weight: 700; color: var(--hp-white); margin-bottom: 10px; font-family: 'Poppins', sans-serif; }
.hp-val-desc   { font-size: 12px; color: rgba(255,255,255,.58); line-height: 1.6; font-family: 'Poppins', sans-serif; }
.hp-val-anchor { background: rgba(250,173,25,.12) !important; border-color: rgba(250,173,25,.3) !important; }

/* ── CONTACT / REVIEW ── */
.hp-review-sec  { background: var(--hp-blue-cta); }
.hp-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.hp-review-grid h2 { font-size: 34px; font-weight: 700; color: var(--hp-white); margin-bottom: 16px; line-height: 1.2; font-family: 'Poppins', sans-serif; }
.hp-review-grid > div > p { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.8; margin-bottom: 24px; font-family: 'Poppins', sans-serif; }
.hp-contact-items { display: flex; flex-direction: column; gap: 14px; }
.hp-c-item        { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 16px 18px; transition: all .2s; }
.hp-c-item:hover  { background: rgba(255,255,255,.16); }
.hp-c-item-ico    { font-size: 20px; flex-shrink: 0; width: 36px; text-align: center; }
.hp-c-item-txt small  { font-size: 11px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 1px; display: block; font-family: 'Poppins', sans-serif; }
.hp-c-item-txt a, .hp-c-item-txt strong { font-size: 14px; font-weight: 600; color: var(--hp-white); font-family: 'Poppins', sans-serif; text-decoration: none; }
.hp-c-item-txt a:hover { color: var(--hp-yellow); }
.hp-review-right h3   { font-size: 22px; font-weight: 700; color: var(--hp-white); margin-bottom: 20px; font-family: 'Poppins', sans-serif; }
.hp-mission-list      { list-style: none; padding: 0; margin: 0; }
.hp-mission-list li   { font-size: 13px; color: rgba(255,255,255,.82); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px; align-items: flex-start; line-height: 1.65; font-family: 'Poppins', sans-serif; }
.hp-mission-list li::before { content: '→'; color: var(--hp-yellow); font-weight: 700; flex-shrink: 0; font-size: 14px; margin-top: 1px; }
.hp-mission-list li:last-child { border-bottom: none; }

/* ── IN-HOUSE COURSE LIST (desktop: 4-col) ── */
.hp-inhouse-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 0 14px; }

/* ── SCROLL REVEAL INIT ── */
.hp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.hp-reveal.visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════
   RESPONSIVE
   1024px  tablet landscape
    768px  tablet portrait
    600px  large mobile
    480px  small mobile
════════════════════════════════════════════ */

/* ── 1024px ── */
@media (max-width: 1024px) {
  .hp-about-grid    { gap: 40px; }
  .hp-about-panel   { padding: 36px 28px; }
  .hp-review-grid   { gap: 36px; }
}

/* ── 960px ── */
@media (max-width: 960px) {
  /* Section padding */
  .hp-section-pad   { padding: 60px 0; }

  /* Features strip: 2-col, hide schedule widget */
  .hp-features-inner  { grid-template-columns: 1fr 1fr; }
  .hp-schedule-box    { display: none; }

  /* About: stack vertically */
  .hp-about-grid    { grid-template-columns: 1fr; gap: 32px; }

  /* Courses: 2-col on tablet so span2/span3 still make sense */
  .hp-courses-grid  { grid-template-columns: repeat(2,1fr); }
  .hp-span3         { grid-column: span 2; }
  .hp-inhouse-list  { grid-template-columns: repeat(3,1fr); }
  .hp-wide-list     { grid-template-columns: 1fr 1fr; }

  /* Categories: 3-col */
  .hp-cat-grid      { grid-template-columns: repeat(3,1fr); }

  /* VMC: 1-col */
  .hp-vmc-grid      { grid-template-columns: 1fr; }

  /* Values: 2-col (fits all 8 cards as 4 rows) */
  .hp-val-grid      { grid-template-columns: repeat(4,1fr); }

  /* Contact: stack */
  .hp-review-grid   { grid-template-columns: 1fr; gap: 32px; }

  /* Section title */
  .hp-sec-title h2  { font-size: 30px; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  /* Section padding */
  .hp-section-pad   { padding: 48px 0; }
  .hp-sec-title     { margin-bottom: 36px; }
  .hp-sec-title h2  { font-size: 26px; }

  /* Hero */
  .hp-hero          { min-height: 70vh; padding: 72px 20px 48px; }
  .hp-hero h1       { font-size: 36px; }
  .hp-hero > p      { font-size: 14px; }
  .hp-hero-stats    { gap: 32px; flex-wrap: wrap; }
  .hp-hero-stat-num { font-size: 30px; }
  .hp-hero-arrow    { display: none; }

  /* Features: 1-col */
  .hp-features-inner { grid-template-columns: 1fr; }
  .hp-feature-box    { border-right: none; border-bottom: 1px solid var(--hp-border); }
  .hp-feature-box:last-child { border-bottom: none; }

  /* About panel */
  .hp-about-panel   { padding: 28px 22px; }
  .hp-about-text h2 { font-size: 26px; }
  .hp-milestones    { grid-template-columns: repeat(3,1fr); }

  /* Courses: 1-col */
  .hp-courses-grid  { grid-template-columns: 1fr; }
  .hp-span2, .hp-span3 { grid-column: span 1; }
  .hp-inhouse-list  { grid-template-columns: repeat(2,1fr); }
  .hp-wide-list     { grid-template-columns: 1fr 1fr; }

  /* Categories: 2-col */
  .hp-cat-grid      { grid-template-columns: repeat(2,1fr); }

  /* Values: 2-col */
  .hp-val-grid      { grid-template-columns: repeat(2,1fr); }

  /* Review */
  .hp-review-grid h2  { font-size: 26px; }
  .hp-review-right h3 { font-size: 18px; }
}

/* ── 600px ── */
@media (max-width: 600px) {
  /* Section padding */
  .hp-section-pad   { padding: 40px 0; }
  .hp-sec-title h2  { font-size: 22px; }

  /* Hero */
  .hp-hero          { min-height: 0; padding: 80px 16px 48px; }
  .hp-hero-label    { font-size: 10px; letter-spacing: 2px; }
  .hp-hero h1       { font-size: 28px; }
  .hp-hero > p      { font-size: 13px; }
  .hp-hero-btns     { flex-direction: column; align-items: center; }
  .hp-hero-stats    { gap: 20px; margin-top: 36px; padding-top: 28px; }
  .hp-hero-stat-num { font-size: 26px; }

  /* About */
  .hp-milestones    { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .hp-ms-num        { font-size: 18px; }

  /* Courses */
  .hp-inhouse-list  { grid-template-columns: 1fr 1fr; }
  .hp-wide-list     { grid-template-columns: 1fr; }

  /* Categories */
  .hp-cat-grid      { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .hp-cat-item      { padding: 20px 12px; }
  .hp-cat-ico       { font-size: 28px; }

  /* VMC */
  .hp-vmc-top       { padding: 20px 16px; }
  .hp-vmc-body      { padding: 16px; }

  /* Values */
  .hp-val-grid      { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .hp-val-card      { padding: 20px 12px; }
  .hp-val-letter    { font-size: 38px; }

  /* Contact */
  .hp-c-item        { padding: 12px 14px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .hp-hero h1       { font-size: 24px; }
  .hp-cat-grid      { grid-template-columns: repeat(2,1fr); }
  .hp-inhouse-list  { grid-template-columns: 1fr; }
  .hp-wide-list     { grid-template-columns: 1fr; }
  .hp-milestones    { grid-template-columns: repeat(3,1fr); }
  .hp-btn-primary,
  .hp-btn-outline-white,
  .hp-btn-outline-dark,
  .hp-btn-yellow    { width: 100%; text-align: center; box-sizing: border-box; }
}