/* ══════════════════════════════════════════════════
   pages.css — DistribuLink Informational Pages
   Shared by: about, contact, career, terms-policy,
              feedback, callback, choose-plan, testimonials
   ✔  All selectors page- / about- / contact- / career-
      / plan- / testimonial- prefixed (zero conflicts)
   ✔  Does NOT modify style.css
   ✔  No body/html overflow/scroll lock
   ✔  Container max 1240px
══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   SHARED PAGE BASE
─────────────────────────────────────────── */
.page-bg { background: #f4f6fa; }

.page-container {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────
   SHARED BREADCRUMB
─────────────────────────────────────────── */
.page-breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  padding: 9px 0;
}
.page-breadcrumb .page-container {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  flex-wrap: wrap;
}
.page-breadcrumb a {
  color: var(--navy-500);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: color var(--transition);
}
.page-breadcrumb a:hover { color: var(--gold-600); }
.page-bc-sep { color: var(--gray-300); font-size: .5rem; }
.page-breadcrumb span { color: var(--gray-500); font-weight: 500; }

/* ─────────────────────────────────────────
   SHARED PAGE HERO
─────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 55%, #162040 100%);
  padding: 48px 0 44px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(245,158,11,.14) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; text-align: center; }
.page-hero-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold-400);
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.22);
  padding: 3px 12px; border-radius: 20px;
  margin-bottom: 12px;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.page-hero-sub {
  font-size: .92rem;
  color: rgba(255,255,255,.48);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────
   SHARED SECTION HEADER
─────────────────────────────────────────── */
.page-section-header {
  text-align: center;
  margin-bottom: 36px;
}
.page-section-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em;
  color: var(--gold-600);
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.18);
  padding: 3px 11px; border-radius: 20px; margin-bottom: 10px;
}
.page-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.page-section-sub {
  font-size: .88rem;
  color: var(--gray-500);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────
   SHARED FORM ELEMENTS
─────────────────────────────────────────── */
.page-form-group { display: flex; flex-direction: column; gap: 5px; }
.page-form-label {
  font-size: .8rem; font-weight: 700; color: var(--navy-700);
  display: flex; align-items: center; gap: 5px;
}
.page-req { color: var(--red); margin-left: 2px; }
.page-input, .page-select, .page-textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: .86rem;
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.page-input:focus, .page-select:focus, .page-textarea:focus {
  border-color: var(--navy-400);
  box-shadow: 0 0 0 3px rgba(61,107,196,.10);
}
.page-input::placeholder, .page-textarea::placeholder { color: var(--gray-400); }
.page-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.page-select { cursor: pointer; appearance: auto; }
.page-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.page-submit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--white);
  border: none; border-radius: var(--radius-md);
  font-size: .9rem; font-weight: 700; font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-navy);
}
.page-submit-btn:hover { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); transform: translateY(-1px); box-shadow: var(--shadow-gold); }
.page-submit-btn--gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); box-shadow: var(--shadow-gold); }
.page-submit-btn--gold:hover { background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: var(--white); box-shadow: var(--shadow-navy); }

/* ─────────────────────────────────────────
   SHARED MODAL
─────────────────────────────────────────── */
.page-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,12,26,.72);
  backdrop-filter: blur(6px);
  z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.page-modal-overlay.page-modal-open { opacity: 1; pointer-events: auto; }
.page-modal {
  background: var(--white);
  border-radius: 18px;
  width: 100%; max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(.97);
  transition: transform var(--transition);
  position: relative;
}
.page-modal-overlay.page-modal-open .page-modal { transform: translateY(0) scale(1); }
.page-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--gray-100);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.page-modal-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--navy-900); }
.page-modal-close {
  width: 32px; height: 32px;
  border-radius: 8px; background: var(--gray-100); border: none;
  color: var(--gray-600); font-size: .9rem;
  cursor: pointer; display: grid; place-items: center;
  transition: all var(--transition);
}
.page-modal-close:hover { background: var(--red); color: var(--white); }
.page-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }

/* ─────────────────────────────────────────
   SHARED STAR RATING INPUT
─────────────────────────────────────────── */
.page-stars-display { display: flex; gap: 2px; }
.page-star-d { color: var(--gold-500); font-size: .82rem; }
.page-star-d--off { color: var(--gray-300); }

.page-star-input { display: flex; gap: 5px; }
.page-star-input .psi { font-size: 1.6rem; color: var(--gray-300); cursor: pointer; transition: color .14s, transform .14s; }
.page-star-input .psi:hover, .page-star-input .psi.psi-on { color: var(--gold-500); transform: scale(1.12); }

/* ─────────────────────────────────────────
   SHARED CAROUSEL
─────────────────────────────────────────── */
.page-carousel-wrap { position: relative; padding: 0 0 10px; }
.page-carousel-viewport { overflow: hidden; border-radius: var(--radius-lg); }
.page-carousel-track { display: flex; gap: 16px; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; }
.page-carousel-arrow {
  position: absolute; top: 42%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: 50%; color: var(--navy-700); font-size: .82rem;
  display: grid; place-items: center;
  cursor: pointer; z-index: 10;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.page-carousel-arrow:hover { background: var(--navy-800); color: var(--gold-400); border-color: var(--navy-800); }
.page-carousel-arrow:disabled { opacity: .35; cursor: not-allowed; }
.page-carousel-prev { left: -20px; }
.page-carousel-next { right: -20px; }
.page-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.page-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); border: none; cursor: pointer; transition: all var(--transition); }
.page-carousel-dot.page-dot-active { background: var(--navy-700); width: 20px; border-radius: 4px; }

/* ─────────────────────────────────────────
   SHARED COUNTER STRIP
─────────────────────────────────────────── */
.page-counter-strip { background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); padding: 32px 0; }
.page-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.page-counter { text-align: center; padding: 10px 0; position: relative; }
.page-counter + .page-counter::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,.10); }
.page-counter-num { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--gold-400); letter-spacing: -.03em; line-height: 1; margin-bottom: 5px; }
.page-counter-lbl  { font-size: .78rem; color: rgba(255,255,255,.45); font-weight: 500; }

/* ══════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════ */
.about-body { padding: 0 0 60px; }

.about-intro { background: var(--white); padding: 52px 0; border-bottom: 1px solid var(--gray-100); }
.about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-intro-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-600); background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.18); padding: 3px 11px; border-radius: 20px; margin-bottom: 14px; width: fit-content; }
.about-intro-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.035em; line-height: 1.15; margin-bottom: 16px; }
.about-intro-title span { color: var(--gold-600); }
.about-intro-desc { font-size: .93rem; color: var(--gray-600); line-height: 1.8; margin-bottom: 22px; }
.about-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.about-intro-img-wrap { border-radius: 20px; overflow: hidden; position: relative; aspect-ratio: 5/4; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); display: flex; align-items: center; justify-content: center; }
.about-img-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.25); }
.about-img-placeholder i { font-size: 3.5rem; color: rgba(245,158,11,.35); }
.about-img-placeholder span { font-size: .8rem; }

.about-mv { background: #f4f6fa; padding: 52px 0; }
.about-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-mv-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 18px; padding: 30px; box-shadow: var(--shadow-sm); transition: all var(--transition); position: relative; overflow: hidden; }
.about-mv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.about-mv-card--mission::before { background: linear-gradient(90deg, var(--navy-600), var(--navy-400)); }
.about-mv-card--vision::before  { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); }
.about-mv-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.about-mv-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 16px; }
.about-mv-card--mission .about-mv-icon { background: rgba(30,58,110,.12); color: var(--navy-600); }
.about-mv-card--vision  .about-mv-icon { background: rgba(245,158,11,.12); color: var(--gold-600); }
.about-mv-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--navy-900); margin-bottom: 10px; }
.about-mv-text  { font-size: .87rem; color: var(--gray-600); line-height: 1.75; }

.about-highlights { padding: 52px 0; background: var(--white); }
.about-highlights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-hl-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 26px 20px; text-align: center; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.about-hl-card:hover { border-color: rgba(245,158,11,.30); box-shadow: 0 8px 28px rgba(245,158,11,.12); transform: translateY(-3px); }
.about-hl-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); display: grid; place-items: center; font-size: 1.3rem; color: var(--gold-400); margin: 0 auto 14px; transition: all var(--transition); }
.about-hl-card:hover .about-hl-icon { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); }
.about-hl-title { font-family: var(--font-display); font-size: .94rem; font-weight: 800; color: var(--navy-900); margin-bottom: 6px; }
.about-hl-text  { font-size: .8rem; color: var(--gray-500); line-height: 1.65; }

.about-values { padding: 52px 0; background: #f4f6fa; }
.about-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.about-values-list { display: flex; flex-direction: column; gap: 20px; }
.about-value-item { display: flex; gap: 14px; align-items: flex-start; }
.about-value-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); display: grid; place-items: center; font-size: .95rem; color: var(--gold-400); }
.about-value-title { font-size: .9rem; font-weight: 700; color: var(--navy-800); margin-bottom: 3px; }
.about-value-text  { font-size: .82rem; color: var(--gray-500); line-height: 1.65; }
.about-values-img-col { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border-radius: 20px; overflow: hidden; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.about-values-img-col-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,.20); }
.about-values-img-col-placeholder i { font-size: 4rem; color: rgba(245,158,11,.25); }

/* ══════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════ */
.contact-body { padding: 0 0 60px; }

.contact-info-strip { background: var(--white); border-bottom: 1px solid var(--gray-100); padding: 30px 0; }
.contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.contact-info-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px; text-align: center; background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.contact-info-card:hover { border-color: rgba(245,158,11,.28); box-shadow: 0 6px 24px rgba(245,158,11,.10); transform: translateY(-2px); }
.contact-info-icon { width: 50px; height: 50px; border-radius: 13px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: var(--gold-400); font-size: 1.2rem; display: grid; place-items: center; transition: all var(--transition); }
.contact-info-card:hover .contact-info-icon { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); }
.contact-info-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); }
.contact-info-value { font-size: .86rem; font-weight: 600; color: var(--navy-800); line-height: 1.5; }
.contact-info-value a { color: var(--navy-800); text-decoration: none; transition: color var(--transition); }
.contact-info-value a:hover { color: var(--gold-600); }

.contact-main { padding: 40px 0; }
.contact-main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.contact-form-wrap { background: var(--white); border: 1px solid var(--gray-100); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm); }
.contact-form-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--navy-900); margin-bottom: 4px; }
.contact-form-sub   { font-size: .82rem; color: var(--gray-500); margin-bottom: 22px; }
.contact-form-grid  { display: flex; flex-direction: column; gap: 14px; }

.contact-side { display: flex; flex-direction: column; gap: 16px; }
.contact-side-img { border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); height: 200px; display: flex; align-items: center; justify-content: center; }
.contact-side-placeholder { color: rgba(255,255,255,.25); text-align: center; }
.contact-side-placeholder i { font-size: 3rem; color: rgba(245,158,11,.35); display: block; margin-bottom: 8px; }
.contact-side-placeholder span { font-size: .78rem; }
.contact-quick-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); }
.contact-quick-title { font-family: var(--font-display); font-size: .9rem; font-weight: 800; color: var(--navy-900); margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.contact-quick-title i { color: var(--gold-500); }
.contact-quick-list { display: flex; flex-direction: column; gap: 10px; }
.contact-quick-item { display: flex; align-items: center; gap: 10px; font-size: .83rem; color: var(--gray-600); }
.contact-quick-item i { color: var(--navy-400); width: 14px; text-align: center; flex-shrink: 0; }

.contact-map-section { padding: 0 0 40px; }
.contact-map-placeholder { background: var(--white); border: 1px solid var(--gray-100); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: var(--gray-400); font-size: .88rem; background-image: linear-gradient(var(--gray-100) 1px, transparent 1px), linear-gradient(90deg, var(--gray-100) 1px, transparent 1px); background-size: 40px 40px; }
.contact-map-placeholder i { font-size: 2.8rem; color: var(--navy-400); }

/* ══════════════════════════════════════════
   CAREER PAGE
══════════════════════════════════════════ */
.career-body { padding: 0 0 60px; }

.career-culture { background: var(--white); padding: 44px 0; border-bottom: 1px solid var(--gray-100); }
.career-culture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.career-culture-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.03em; line-height: 1.2; margin-bottom: 14px; }
.career-culture-title span { color: var(--gold-600); }
.career-culture-desc { font-size: .9rem; color: var(--gray-600); line-height: 1.78; margin-bottom: 20px; }
.career-perks { display: flex; flex-direction: column; gap: 10px; }
.career-perk { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--gray-700); }
.career-perk i { color: var(--emerald); font-size: .8rem; flex-shrink: 0; }
.career-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.career-photo { border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); height: 130px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.20); font-size: .75rem; }
.career-photo:first-child { grid-column: 1 / -1; height: 160px; }
.career-photo i { font-size: 2rem; color: rgba(245,158,11,.25); }

.career-jobs-section { padding: 40px 0; background: #f4f6fa; }
.career-jobs-search { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.career-jobs-search .page-input { flex: 1; min-width: 200px; }
.career-jobs-search .page-select { min-width: 160px; flex-shrink: 0; }
.career-jobs-list { display: flex; flex-direction: column; gap: 14px; }

.career-job-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 22px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.career-job-card:hover { border-color: var(--gray-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.career-job-info { flex: 1; min-width: 0; }
.career-job-dept { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--navy-600); background: rgba(30,58,110,.08); border: 1px solid rgba(30,58,110,.14); padding: 2px 9px; border-radius: 20px; margin-bottom: 7px; }
.career-job-title { font-family: var(--font-display); font-size: .98rem; font-weight: 800; color: var(--navy-900); margin-bottom: 7px; }
.career-job-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.career-job-meta span { display: flex; align-items: center; gap: 5px; font-size: .77rem; color: var(--gray-500); }
.career-job-meta i { color: var(--navy-400); font-size: .68rem; }
.career-job-desc { font-size: .84rem; color: var(--gray-600); line-height: 1.65; }
.career-apply-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: var(--white); border: none; border-radius: var(--radius-md); font-size: .82rem; font-weight: 700; font-family: var(--font-body); cursor: pointer; transition: all var(--transition); white-space: nowrap; }
.career-apply-btn:hover { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); }

.career-modal .page-modal-head { background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); border-radius: 18px 18px 0 0; }
.career-modal .page-modal-title { color: var(--white); }
.career-modal .page-modal-close { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.career-modal .page-modal-close:hover { background: var(--red); color: var(--white); }
.career-file-label { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1.5px dashed var(--gray-300); border-radius: var(--radius-md); font-size: .83rem; color: var(--gray-500); cursor: pointer; transition: all var(--transition); }
.career-file-label:hover { border-color: var(--navy-400); color: var(--navy-600); }
.career-file-label i { color: var(--navy-400); }
#careerResumeInput { display: none; }

/* ══════════════════════════════════════════
   TERMS & POLICY PAGE
══════════════════════════════════════════ */
.terms-body { padding: 0 0 60px; }
.terms-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 36px 0; align-items: start; }
.terms-toc { background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 14px); }
.terms-toc-title { font-family: var(--font-display); font-size: .84rem; font-weight: 800; color: var(--navy-900); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--gold-500); }
.terms-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.terms-toc-item { border-bottom: 1px solid var(--gray-100); }
.terms-toc-item:last-child { border-bottom: none; }
.terms-toc-link { display: flex; align-items: center; gap: 7px; padding: 7px 0; text-decoration: none; font-size: .77rem; color: var(--gray-600); font-weight: 500; transition: all var(--transition); }
.terms-toc-link:hover, .terms-toc-link.terms-toc-active { color: var(--navy-700); padding-left: 4px; }
.terms-toc-link i { font-size: .55rem; color: var(--gold-500); flex-shrink: 0; }

.terms-content { background: var(--white); border: 1px solid var(--gray-100); border-radius: 18px; padding: 32px 36px; box-shadow: var(--shadow-sm); }
.terms-last-updated { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--gray-400); font-weight: 500; background: var(--gray-50); padding: 4px 12px; border-radius: 20px; margin-bottom: 24px; }
.terms-section { margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--gray-100); }
.terms-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.terms-h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--navy-900); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.terms-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--navy-800); color: var(--gold-400); font-size: .72rem; font-weight: 800; font-family: var(--font-display); flex-shrink: 0; }
.terms-p { font-size: .88rem; color: var(--gray-600); line-height: 1.82; margin-bottom: 12px; }
.terms-ul { list-style: none; padding: 0; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 7px; }
.terms-ul li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--gray-600); line-height: 1.65; }
.terms-ul li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); flex-shrink: 0; margin-top: 8px; }
.terms-highlight { background: rgba(245,158,11,.07); border-left: 3px solid var(--gold-500); border-radius: 0 10px 10px 0; padding: 14px 16px; margin: 14px 0; font-size: .85rem; color: var(--navy-700); line-height: 1.7; }

/* ══════════════════════════════════════════
   FEEDBACK PAGE
══════════════════════════════════════════ */
.feedback-body { padding: 0 0 60px; }
.feedback-main  { padding: 40px 0; }
.feedback-grid  { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.feedback-form-wrap { background: var(--white); border: 1px solid var(--gray-100); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm); }
.feedback-form-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--navy-900); margin-bottom: 4px; }
.feedback-form-sub   { font-size: .82rem; color: var(--gray-500); margin-bottom: 22px; }
.feedback-form-inner { display: flex; flex-direction: column; gap: 16px; }
.feedback-rating-label { font-size: .8rem; font-weight: 700; color: var(--navy-700); margin-bottom: 6px; }

.feedback-side { display: flex; flex-direction: column; gap: 16px; }
.feedback-illustration { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border-radius: 18px; padding: 28px; text-align: center; position: relative; overflow: hidden; }
.feedback-illustration::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 36px 36px; }
.feedback-illus-inner { position: relative; z-index: 1; }
.feedback-illus-icon { width: 70px; height: 70px; border-radius: 50%; background: rgba(245,158,11,.15); border: 2px solid rgba(245,158,11,.25); display: grid; place-items: center; font-size: 2rem; color: var(--gold-400); margin: 0 auto 16px; }
.feedback-illus-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.feedback-illus-text  { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.65; }
.feedback-stats { background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); }
.feedback-stats-title { font-family: var(--font-display); font-size: .88rem; font-weight: 800; color: var(--navy-900); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.feedback-stats-title i { color: var(--gold-500); }
.feedback-stat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.feedback-stat-label { font-size: .74rem; color: var(--gray-600); width: 36px; flex-shrink: 0; }
.feedback-stat-bar-wrap { flex: 1; background: var(--gray-100); border-radius: 20px; height: 8px; overflow: hidden; }
.feedback-stat-bar { height: 100%; background: var(--gold-500); border-radius: 20px; }
.feedback-stat-count { font-size: .72rem; color: var(--gray-500); width: 28px; text-align: right; flex-shrink: 0; }

/* ══════════════════════════════════════════
   CALLBACK PAGE
══════════════════════════════════════════ */
.callback-body { padding: 0 0 60px; }
.callback-main { padding: 40px 0; }
.callback-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.callback-form-wrap { background: var(--white); border: 1px solid var(--gray-100); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-sm); }
.callback-form-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--navy-900); margin-bottom: 4px; }
.callback-form-sub   { font-size: .82rem; color: var(--gray-500); margin-bottom: 22px; }
.callback-form-inner { display: flex; flex-direction: column; gap: 14px; }
.callback-phone-wrap { display: flex; }
.callback-phone-prefix { display: flex; align-items: center; padding: 10px 11px; background: var(--gray-50); border: 1.5px solid var(--gray-200); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); font-size: .83rem; font-weight: 600; color: var(--gray-600); white-space: nowrap; }
.callback-phone-wrap .page-input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.callback-side { display: flex; flex-direction: column; gap: 14px; }
.callback-visual { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border-radius: 18px; padding: 28px; text-align: center; position: relative; overflow: hidden; }
.callback-visual::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(245,158,11,.18), transparent 65%); border-radius: 50%; }
.callback-visual-inner { position: relative; z-index: 1; }
.callback-visual-icon { width: 68px; height: 68px; border-radius: 50%; background: rgba(245,158,11,.15); border: 2px solid rgba(245,158,11,.25); display: grid; place-items: center; font-size: 1.8rem; color: var(--gold-400); margin: 0 auto 14px; }
.callback-visual-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.callback-visual-text  { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.65; }
.callback-features { background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); }
.callback-features-title { font-family: var(--font-display); font-size: .88rem; font-weight: 800; color: var(--navy-900); margin-bottom: 12px; }
.callback-feature-item { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--gray-700); padding: 7px 0; border-bottom: 1px solid var(--gray-100); }
.callback-feature-item:last-child { border-bottom: none; }
.callback-feature-item i { color: var(--emerald); font-size: .8rem; flex-shrink: 0; }

/* ══════════════════════════════════════════
   CHOOSE PLAN PAGE
══════════════════════════════════════════ */
.plan-body { padding: 0 0 60px; }
.plan-tab-section { padding: 44px 0; }

.plan-tabs { display: flex; justify-content: center; margin-bottom: 38px; }
.plan-tab-group { display: flex; gap: 0; background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: 11px; padding: 3px; }
.plan-tab-btn { display: flex; align-items: center; gap: 7px; padding: 9px 26px; border: none; background: transparent; font-size: .88rem; font-weight: 700; font-family: var(--font-display); color: var(--gray-500); cursor: pointer; border-radius: 8px; transition: all var(--transition); }
.plan-tab-btn i { font-size: .82rem; }
.plan-tab-btn.plan-tab-active { background: var(--navy-800); color: var(--white); box-shadow: var(--shadow-navy); }

.plan-tab-panel { display: none; }
.plan-tab-panel.plan-panel-active { display: block; }
.plan-carousel-outer { position: relative; padding: 0 24px; }

.plan-carousel-track { display: flex; gap: 16px; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; }
.plan-card { flex: 0 0 calc(33.333% - 11px); min-width: 260px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: all var(--transition); position: relative; overflow: hidden; }
.plan-card:hover { border-color: var(--gray-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.plan-card--popular { border-color: var(--gold-500) !important; background: linear-gradient(160deg, #fff 80%, rgba(245,158,11,.04) 100%); }
.plan-popular-badge { position: absolute; top: 18px; right: -26px; background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 4px 34px; transform: rotate(35deg); box-shadow: var(--shadow-gold); }
.plan-card-icon { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); display: grid; place-items: center; font-size: 1.25rem; color: var(--gold-400); margin-bottom: 14px; }
.plan-card--popular .plan-card-icon { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); }
.plan-name { font-family: var(--font-display); font-size: .98rem; font-weight: 800; color: var(--navy-900); margin-bottom: 4px; }
.plan-tagline { font-size: .78rem; color: var(--gray-500); margin-bottom: 18px; }
.plan-price-wrap { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); }
.plan-price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--navy-900); letter-spacing: -.04em; line-height: 1; }
.plan-price sup { font-size: 1rem; vertical-align: super; font-weight: 700; }
.plan-price-period { font-size: .76rem; color: var(--gray-400); font-weight: 500; margin-top: 3px; }
.plan-card--popular .plan-price { color: var(--gold-600); }
.plan-features { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-feature { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; color: var(--gray-600); line-height: 1.5; }
.plan-feature i { font-size: .72rem; margin-top: 3px; flex-shrink: 0; }
.plan-feature.pf-yes i { color: var(--emerald); }
.plan-feature.pf-no  i { color: var(--gray-300); }
.plan-feature.pf-no    { color: var(--gray-400); }
.plan-cta-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: var(--white); border: none; border-radius: var(--radius-md); font-size: .88rem; font-weight: 700; font-family: var(--font-display); cursor: pointer; transition: all var(--transition); margin-top: auto; }
.plan-card--popular .plan-cta-btn { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-900); box-shadow: var(--shadow-gold); }
.plan-cta-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.plan-faq { padding: 0 0 50px; }
.plan-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.plan-faq-item { background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-xs); }
.plan-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--navy-800); transition: background var(--transition); }
.plan-faq-q:hover { background: var(--gray-50); }
.plan-faq-q i { font-size: .72rem; color: var(--navy-400); transition: transform var(--transition); flex-shrink: 0; }
.plan-faq-item.plan-faq-open .plan-faq-q i { transform: rotate(180deg); }
.plan-faq-item.plan-faq-open .plan-faq-q { background: var(--gray-50); }
.plan-faq-a { display: none; padding: 14px 18px 15px; font-size: .84rem; color: var(--gray-600); line-height: 1.75; border-top: 1px solid var(--gray-100); }
.plan-faq-item.plan-faq-open .plan-faq-a { display: block; }

/* ══════════════════════════════════════════
   TESTIMONIALS PAGE
══════════════════════════════════════════ */
.testimonial-body  { padding: 0 0 60px; }
.testimonial-section { padding: 44px 0; }

.testimonial-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonial-video-card { 
  flex: 0 0 calc(33.333% - 11px); 
  min-width: 260px; 
  background: var(--navy-900); 
  border: 1px solid rgba(255,255,255,.08); 
  border-radius: 16px; 
  overflow: hidden; 
  cursor: pointer; 
  transition: all var(--transition); 
}
.testimonial-video-card:hover { border-color: var(--gold-500); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(245,158,11,.15); }
.testimonial-video-thumb { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.testimonial-video-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.testimonial-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.30); transition: background var(--transition); z-index: 1; }
.testimonial-video-card:hover .testimonial-play-btn { background: rgba(245,158,11,.22); }
.testimonial-play-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy-800); display: grid; place-items: center; font-size: 1.1rem; transition: all var(--transition); padding-left: 4px; }
.testimonial-video-card:hover .testimonial-play-icon { background: var(--gold-400); transform: scale(1.1); }
.testimonial-video-info { padding: 14px 16px; }
.testimonial-video-stars { display: flex; gap: 2px; margin-bottom: 7px; }
.testimonial-video-stars i { color: var(--gold-500); font-size: .72rem; }
.testimonial-video-name { font-family: var(--font-display); font-size: .88rem; font-weight: 800; color: var(--white); margin-bottom: 3px; }
.testimonial-video-biz  { font-size: .74rem; color: rgba(255,255,255,.38); }

.testimonial-video-modal .page-modal { max-width: 700px; background: var(--navy-950); }
.testimonial-video-modal .page-modal-head { background: var(--navy-950); border-color: rgba(255,255,255,.08); }
.testimonial-video-modal .page-modal-title { color: var(--white); }
.testimonial-video-modal .page-modal-close { background: rgba(255,255,255,.10); color: rgba(255,255,255,.7); }
.testimonial-video-iframe-wrap { padding: 0 20px 20px; }
.testimonial-video-iframe-wrap iframe { width: 100%; aspect-ratio: 16/9; border-radius: 10px; border: none; background: #000; }

.testimonial-text-section { background: #f4f6fa; padding: 44px 0; }
.testimonial-text-card { flex: 0 0 calc(33.333% - 11px); min-width: 260px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.testimonial-text-card:hover { border-color: var(--gray-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.testimonial-qmark { font-size: 4rem; line-height: .7; color: rgba(245,158,11,.16); font-family: Georgia, serif; display: block; margin-bottom: 8px; }
.testimonial-text { font-size: .87rem; color: var(--gray-600); line-height: 1.78; margin-bottom: 18px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); color: var(--white); font-size: .9rem; font-weight: 700; font-family: var(--font-display); display: grid; place-items: center; flex-shrink: 0; }
.testimonial-name { font-size: .86rem; font-weight: 700; color: var(--navy-800); margin-bottom: 2px; }
.testimonial-biz  { font-size: .73rem; color: var(--gray-400); font-weight: 500; }
.testimonial-card-stars { display: flex; gap: 2px; margin-top: 7px; }
.testimonial-card-stars i { color: var(--gold-500); font-size: .7rem; }

/* ─────────────────────────────────────────
   ANIMATIONS
─────────────────────────────────────────── */
@keyframes pageFadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.page-reveal    { animation: pageFadeUp .4s ease both; }
.page-reveal-d1 { animation-delay: .07s; }
.page-reveal-d2 { animation-delay: .14s; }
.page-reveal-d3 { animation-delay: .21s; }

/* ─────────────────────────────────────────
   RESPONSIVE
─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .about-highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-main-grid { grid-template-columns: 1fr; }
  .contact-side { display: grid; grid-template-columns: 1fr 1fr; }
  .feedback-grid { grid-template-columns: 1fr; }
  .callback-grid { grid-template-columns: 1fr; }
  .plan-card { flex: 0 0 calc(50% - 8px); }
  .testimonial-video-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-video-card, .testimonial-text-card { flex: 0 0 calc(50% - 8px); }
  .terms-layout { grid-template-columns: 1fr; }
  .terms-toc { position: static; }
}
@media (max-width: 860px) {
  .about-intro-grid   { grid-template-columns: 1fr; }
  .about-mv-grid      { grid-template-columns: 1fr; }
  .about-values-grid  { grid-template-columns: 1fr; }
  .career-culture-grid{ grid-template-columns: 1fr; }
  .page-form-row      { grid-template-columns: 1fr; }
  .contact-side       { grid-template-columns: 1fr; }
  .career-job-card    { flex-direction: column; }
  .career-apply-btn   { align-self: flex-start; }
}
@media (max-width: 640px) {
  .page-container { padding: 0 14px; }
  .about-highlights-grid { grid-template-columns: 1fr 1fr; }
  .contact-info-grid     { grid-template-columns: 1fr 1fr; }
  .page-counters         { grid-template-columns: repeat(2, 1fr); }
  .plan-card             { flex: 0 0 100%; }
  .testimonial-video-grid { grid-template-columns: 1fr; }
  .testimonial-video-card, .testimonial-text-card  { flex: 0 0 100%; }
  .terms-content          { padding: 20px 16px; }
  .contact-form-wrap, .feedback-form-wrap, .callback-form-wrap { padding: 18px; }
}
@media (max-width: 400px) {
  .about-highlights-grid { grid-template-columns: 1fr; }
  .contact-info-grid     { grid-template-columns: 1fr; }
}