/* Hero */
    #hero { position: relative; min-height: 84vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 5rem; padding-bottom: 3rem; }
    .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--gold-alpha-12) 0%, transparent 70%), repeating-linear-gradient(0deg, transparent, transparent 39px, var(--gold-alpha-03) 39px, var(--gold-alpha-03) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, var(--gold-alpha-03) 39px, var(--gold-alpha-03) 40px); animation: heroField 1200ms var(--ease-out-expo) both; }
    .hero-content { width: 100%; padding: 0 2rem; position: relative; z-index: 1; }
    .hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 2.25rem; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 2rem; }
    .hero-text { flex: 1; text-align: left; }
    .hero-photo { flex-shrink: 0; }
    .hero-photo img { width: 280px; height: 280px; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 40px var(--gold-alpha-20); animation: photoSettle 700ms var(--ease-out-quint) both 0.2s; }
    .hero-label { color: var(--gold); font-size: 0.8rem; letter-spacing: 0; font-weight: 700; margin-bottom: 1rem; animation: fadeUp 0.6s var(--ease-out-expo) both 0.1s; }
    .hero-descriptor { color: var(--text-70); font-size: 0.8rem; letter-spacing: 0; margin-bottom: 1.25rem; margin-top: -0.5rem; animation: fadeUp 0.6s var(--ease-out-expo) both 0.2s; }
    .hero-name { font-family: 'Playfair Display', serif; font-size: 4.1rem; font-weight: 900; line-height: 1.05; margin-bottom: 1rem; text-wrap: balance; animation: fadeUp 0.6s var(--ease-out-expo) both 0.25s; }
    .hero-tagline { font-size: 1.08rem; color: var(--text-80); margin-bottom: 0.5rem; overflow-wrap: break-word; animation: fadeUp 0.6s var(--ease-out-expo) both 0.35s; }
    .hero-proof { font-size: 0.875rem; color: var(--text-body-75); letter-spacing: 0; margin-bottom: 1.4rem; animation: fadeUp 0.6s var(--ease-out-expo) both 0.42s; }
    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp 0.6s var(--ease-out-expo) both 0.45s; }
    .hero-text .copy-ms,
    .about-text .copy-ms,
    .diagnosis-intro .copy-ms,
    .program-card .copy-ms,
    .section-intro .copy-ms {
      display: block;
      margin-top: 0.7rem;
      padding: 0.6rem 0 0.6rem 1rem;
      border-left: 2px solid var(--teal-bright);
      color: var(--teal-bright);
      font-size: 0.95rem;
      font-style: italic;
      font-weight: 500;
      line-height: 1.72;
    }
    .hero-text .copy-ms { max-width: 60ch; animation: fadeUp 0.6s var(--ease-out-expo) both 0.4s; }
    .program-card .copy-ms { color: var(--text-80); border-left-color: var(--gold); font-size: 0.9rem; }
    .hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: var(--text-dim-65); animation: bounce 2s infinite; text-align: center; }
    @keyframes heroField { from { opacity: 0; } to { opacity: 1; } }
    @keyframes photoSettle { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
    @media (max-width: 767px) {
      #hero { min-height: auto; padding: 4.5rem 0 1.75rem; justify-content: flex-start; }
      .hero-content { padding: 0 1.25rem; }
      .hero-inner { flex-direction: column-reverse; gap: 1.1rem; text-align: center; }
      .hero-text { text-align: center; }
      .hero-photo img { width: 124px; height: 124px; }
      .hero-actions { justify-content: center; }
      .hero-name { font-size: 2.1rem; margin-bottom: 0.8rem; }
      .hero-label { margin-bottom: 0.75rem; }
      .hero-descriptor { margin-bottom: 0.9rem; }
      .hero-text .copy-ms,
      .about-text .copy-ms,
      .diagnosis-intro .copy-ms,
      .program-card .copy-ms,
      .section-intro .copy-ms { font-size: 0.9rem; padding: 0.45rem 0 0.45rem 0.8rem; line-height: 1.58; }
      .hero-tagline { font-size: 1rem; line-height: 1.6; }
      .hero-proof { font-size: 0.76rem; margin-bottom: 1rem; }
    }

    /* About */
    #about { background: var(--bg-section-light); }
    .about-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: start; }
    .about-text p { color: var(--text-body-75); margin-bottom: 1.25rem; font-size: 1rem; line-height: 1.78; text-wrap: pretty; max-width: 65ch; }
    .about-rule { width: 40px; height: 2px; background: var(--gold); margin: 1.25rem 0; opacity: 0.7; }
    .about-authority { color: var(--text-bright); margin-bottom: 1.5rem; font-size: 1.05rem; line-height: 1.85; font-weight: 500; max-width: 65ch; }
    .about-proof-bar { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.25rem; align-content: start; }
    .proof-item { display: flex; flex: 1 1 9rem; min-width: 9rem; flex-direction: column; gap: 0.25rem; padding: 1rem; background: linear-gradient(145deg, var(--gold-alpha-08), var(--surface-faint)); border: 1px solid var(--gold-alpha-20); border-radius: var(--radius-md); }
    .proof-item:nth-child(2) { background: linear-gradient(145deg, var(--teal-alpha-14), var(--surface-faint)); border-color: var(--teal-alpha-30); }
    .proof-value { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 700; color: var(--gold); line-height: 1.2; text-shadow: 0 0 18px var(--gold-alpha-20); }
    .proof-value--teal { color: var(--teal-bright); text-shadow: 0 0 18px var(--teal-alpha-30); }
    .proof-label { font-size: 0.75rem; color: var(--text-80); font-weight: 600; line-height: 1.35; }
    .origin-badge { display: inline-block; background: var(--teal-alpha-14); border: 1px solid var(--teal-alpha-30); color: var(--teal-bright); padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; margin-bottom: 1rem; }
    .about-preview-actions { margin-top: 1.25rem; display: flex; gap: 1rem; flex-wrap: wrap; }
    @media (max-width: 767px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } .about-proof-bar { gap: 0.85rem; margin-top: 0.5rem; } }

    /* Programs */
    .programs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    @media (min-width: 768px) and (max-width: 1023px) { .programs-grid { grid-template-columns: 1fr; } }
    @media (max-width: 767px) { .programs-grid { grid-template-columns: 1fr; gap: 1rem; } }
    .program-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: center; background: linear-gradient(135deg, var(--gold-alpha-08), var(--surface-faint)); border: 1px solid var(--border-strong); padding: 2.5rem; }
    .program-card--teal-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: center; background: linear-gradient(135deg, var(--teal-alpha-10), var(--surface-faint)); border: 1px solid var(--teal-alpha-20); padding: 2.5rem; }
    .program-card-action { margin-top: 1rem; }
    .program-overview-actions { margin-top: 1.4rem; text-align: center; }
    @media (max-width: 767px) { .program-card--featured, .program-card--teal-featured { grid-template-columns: 1fr; padding: 1.35rem; } }

    /* Mid CTA */
    .mid-cta { padding: 2.4rem 2rem; text-align: center; border-top: 1px solid var(--gold-alpha-08); }
    .mid-cta--early { padding: 1.25rem 2rem; background: var(--charcoal-alpha-72); border-top: 1px solid var(--gold-alpha-10); border-bottom: 1px solid var(--teal-alpha-20); }
    .mid-cta-inner { max-width: 600px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
    .mid-cta-text { color: var(--text-emphasis); font-weight: 700; }
    @media (max-width: 767px) { .mid-cta { padding: 2.2rem 1.25rem; } .mid-cta--early { padding: 1.4rem 1.25rem; } .mid-cta-inner { gap: 1rem; } }

    /* Diagnosis */
    #diagnosis { scroll-margin-top: 5.5rem; background: var(--charcoal-alpha-52); border-top: 1px solid var(--teal-alpha-20); border-bottom: 1px solid var(--gold-alpha-10); }
    .diagnosis-shell { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 1.5rem; align-items: stretch; }
    .diagnosis-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--charcoal-alpha-42); }
    .diagnosis-intro p { color: var(--text-body-75); max-width: 58ch; }
    .diagnosis-points { display: grid; gap: 0.6rem; margin-top: 1rem; }
    .diagnosis-point { display: flex; gap: 0.7rem; color: var(--text-emphasis); font-size: 0.92rem; line-height: 1.5; }
    .diagnosis-point::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--teal-bright); margin-top: 0.5rem; flex-shrink: 0; box-shadow: 0 0 16px var(--teal-alpha-30); }
    .diagnosis-card { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-card-strong); box-shadow: 0 18px 50px var(--shadow-panel); overflow: hidden; }
    .diagnosis-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); background: var(--charcoal-alpha-54); }
    .diagnosis-status { color: var(--teal-bright); font-size: 0.78rem; font-weight: 700; letter-spacing: 0; }
    .diagnosis-progress { color: var(--text-70); font-size: 0.82rem; }
    .diagnosis-body { min-height: 22rem; padding: 1.15rem; display: flex; flex-direction: column; gap: 0.85rem; }
    .diagnosis-log { display: flex; flex-direction: column; gap: 0.8rem; max-height: 17rem; overflow-y: auto; padding-right: 0.35rem; }
    .chat-bubble { max-width: 92%; padding: 0.85rem 1rem; border-radius: var(--radius-md); font-size: 0.95rem; line-height: 1.58; animation: bubbleIn 220ms var(--ease-out-quint) both; }
    .chat-bubble--bot { align-self: flex-start; background: var(--teal-alpha-18); border: 1px solid var(--teal-alpha-30); color: var(--text-bright); }
    .chat-bubble--user { align-self: flex-end; background: var(--gold); border: 1px solid var(--gold-hover); color: var(--charcoal); font-weight: 600; }
    .diagnosis-answer { border-top: 1px solid var(--border-light); padding-top: 1rem; }
    .diagnosis-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
    .diagnosis-option, .diagnosis-next, .diagnosis-reset { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-card-soft); color: var(--text-emphasis); min-height: 44px; padding: 0.75rem 0.85rem; font: inherit; font-weight: 700; cursor: pointer; text-align: left; transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s; }
    .diagnosis-option:hover, .diagnosis-next:hover, .diagnosis-reset:hover { border-color: var(--gold-alpha-40); background: var(--gold-alpha-08); transform: translateY(-1px); }
    .diagnosis-option { animation: optionIn 220ms var(--ease-out-quint) both; }
    .diagnosis-option:nth-child(2) { animation-delay: 45ms; }
    .diagnosis-option:nth-child(3) { animation-delay: 90ms; }
    .diagnosis-option:nth-child(4) { animation-delay: 135ms; }
    .diagnosis-input { display: grid; gap: 0.8rem; }
    .diagnosis-input textarea { width: 100%; min-height: 6.5rem; resize: vertical; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--charcoal-alpha-62); color: var(--text-body); padding: 0.9rem; font: inherit; line-height: 1.55; }
    .diagnosis-next { background: var(--gold); color: var(--charcoal); text-align: center; justify-self: start; }
    .diagnosis-result { display: grid; gap: 1rem; }
    .diagnosis-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
    .diagnosis-result-box { border: 1px solid var(--border-medium); border-radius: var(--radius-sm); background: var(--charcoal-alpha-50); padding: 1rem; animation: resultSettle 260ms var(--ease-out-quint) both; }
    .diagnosis-result-box:nth-child(2) { animation-delay: 55ms; }
    .diagnosis-result-box:nth-child(3) { animation-delay: 110ms; }
    .diagnosis-result-box:nth-child(4) { animation-delay: 165ms; }
    .diagnosis-result-next { animation-delay: 220ms; }
    .diagnosis-result-box h4 { color: var(--gold); font-size: 0.78rem; letter-spacing: 0; margin-bottom: 0.45rem; }
    .diagnosis-result-box p { color: var(--text-emphasis); font-size: 0.92rem; line-height: 1.58; }
    .diagnosis-outcomes { margin: 0; padding-left: 1.05rem; color: var(--text-emphasis); font-size: 0.92rem; line-height: 1.58; }
    .diagnosis-outcomes li { margin-bottom: 0.5rem; }
    .diagnosis-outcomes li:last-child { margin-bottom: 0; }
    .diagnosis-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
    .diagnosis-actions .btn-whatsapp, .diagnosis-actions .diagnosis-reset { width: auto; }
    .diagnosis-reset { color: var(--teal-bright); }
    @keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes optionIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes resultSettle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (max-width: 1023px) { .diagnosis-shell { grid-template-columns: 1fr; gap: 1.25rem; } }
    @media (max-width: 640px) { .diagnosis-intro, .diagnosis-body { padding: 1.1rem; } .diagnosis-options, .diagnosis-result-grid { grid-template-columns: 1fr; } .diagnosis-actions .btn-whatsapp, .diagnosis-actions .diagnosis-reset { width: 100%; max-width: none; justify-content: center; text-align: center; } }
    @media (max-width: 767px) { .back-to-top { display: none; } }

    /* HRD Corp */
    .hrdcorp-bar { background: var(--teal-alpha-06); border-top: 1px solid var(--teal-alpha-20); border-bottom: 1px solid var(--teal-alpha-20); padding: 1rem 2rem; text-align: center; }
    .hrdcorp-text { font-size: 0.875rem; color: var(--text-body-75); max-width: 80ch; margin: 0 auto; }
    .hrdcorp-text strong { color: var(--teal-bright); }

    /* Clients */
    #clients { background: var(--gold-alpha-03); border-top: 1px solid var(--gold-alpha-08); border-bottom: 1px solid var(--gold-alpha-08); }
    .client-category { margin-bottom: 2rem; }
    .client-category-label { color: var(--teal-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; margin-bottom: 0.75rem; }
    .client-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 0.75rem; }
    .client-chip {
      display: flex;
      min-height: 5.65rem;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      padding: 0.85rem 0.65rem;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, var(--bg-card-strong), var(--gold-alpha-06));
      color: var(--text-emphasis);
      text-align: center;
      box-shadow: 0 12px 30px var(--shadow-soft);
      white-space: normal;
    }
    .client-chip img {
      width: 2.35rem;
      height: 2.35rem;
      object-fit: contain;
      filter: saturate(1.05);
    }
    .client-chip span {
      max-width: 100%;
      overflow-wrap: anywhere;
      white-space: normal;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1.25;
    }
    @media (min-width: 641px) and (max-width: 1023px) { .client-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .client-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .client-chip { min-height: 5rem; padding: 0.7rem 0.5rem; } }

    /* Featured Testimonial */
    .featured-testimonial { background: var(--gold-alpha-06); border: 1px solid var(--border-medium); border-radius: var(--radius-md); padding: 1.85rem 2rem 1.5rem; margin-bottom: 1.35rem; position: relative; }
    .featured-testimonial::before { content: '\201C'; position: absolute; top: -0.15rem; left: 1.5rem; color: var(--gold); font-size: 5rem; line-height: 1; font-family: 'Playfair Display', serif; opacity: 0.18; }
    .featured-quote { color: var(--text-90); font-size: 1.06rem; line-height: 1.55; font-style: italic; margin-bottom: 1rem; padding-left: 0.5rem; max-width: 70ch; }
    .featured-name { color: var(--gold); font-weight: 700; font-size: 1rem; }
    .featured-title { color: var(--text-50); font-size: 0.875rem; margin-top: 0.25rem; }
    .impact-highlight { display: inline-block; background: var(--teal-alpha-10); border: 1px solid var(--teal-alpha-30); padding: 0.75rem 1rem; margin: 1rem 0; border-radius: var(--radius-sm); color: var(--text-bright); font-weight: 500; }

    /* Testimonials */
    #testimonials { background: var(--bg-testimonials); border-top: 1px solid var(--gold-alpha-06); }
    .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
    @media (max-width: 640px) { .testimonials-grid { grid-template-columns: 1fr; } }

    /* FAQ */
    #faq { background: var(--gold-alpha-06); border-top: 1px solid var(--border-medium); }
    .faq-container { max-width: 800px; margin: 0 auto; }

    /* Contact */
    #contact { padding: 3.25rem 2rem; }
    .contact-inner { max-width: 600px; margin: 0 auto; text-align: center; }
    .contact-sub { color: var(--text-70); margin-bottom: 2.5rem; }
    .lang-note { color: var(--teal-bright); font-size: 0.9rem; margin-top: 1.5rem; }
    @media (max-width: 767px) { #contact { padding: 2.75rem 1.25rem; } }