:root {
  --az-agent-blue: #2e80c8;
  --az-agent-blue-dark: #145f9f;
  --az-agent-navy: #163a5b;
  --az-agent-navy-deep: #0f2942;
  --az-agent-pink: #ef5f93;
  --az-agent-pink-dark: #b93366;
  --az-agent-line: #06823f;
  --az-agent-text: #2a3b4d;
  --az-agent-muted: #63758a;
  --az-agent-border: #dbeaf6;
  --az-agent-blue-soft: #edf6fd;
  --az-agent-pink-soft: #fff1f6;
  --az-agent-surface: #f7fafc;
}

html { scroll-behavior: smooth; }

body.az-agent-page {
  min-width: 320px;
  overflow-x: clip;
  background: #fff;
  color: var(--az-agent-text);
  font-family: "Sarabun", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.az-agent-page *,
.az-agent-page *::before,
.az-agent-page *::after { box-sizing: border-box; }

.az-agent-page a:focus-visible,
.az-agent-page button:focus-visible {
  outline: 3px solid rgba(46, 128, 200, 0.36);
  outline-offset: 4px;
}

.az-agent-main { overflow: visible; }

.az-agent-skip {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 10050;
  padding: 10px 16px;
  border-radius: 8px;
  background: #fff;
  color: var(--az-agent-navy-deep);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .18s ease;
}

.az-agent-skip:focus { transform: translateY(0); }

.az-agent-page .az-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(70px, 9vw, 112px) 24px;
  background: var(--az-agent-navy-deep);
  text-align: center;
}

.az-agent-page .az-hero::before,
.az-agent-page .az-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
}

.az-agent-page .az-hero::before {
  top: -260px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: rgba(46, 128, 200, .23);
}

.az-agent-page .az-hero::after {
  bottom: -170px;
  left: -90px;
  width: 300px;
  height: 300px;
  background: rgba(239, 95, 147, .14);
}

.az-agent-page .az-hero-badge {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  margin-bottom: 17px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 154, 189, .42);
  border-radius: 9px;
  background: rgba(239, 95, 147, .13);
  color: #ff9abd;
  font-size: 13px;
  font-weight: 800;
}

.az-agent-page .az-hero h1 {
  max-width: 820px;
  margin: 0 auto 13px;
  color: #fff;
  font-family: "Prompt", sans-serif;
  font-size: clamp(35px, 5.5vw, 56px);
  line-height: 1.35;
  letter-spacing: -.02em;
}

.az-agent-page .az-hero h1 em { color: #ff8fb6; }

.az-agent-page .az-hero-sub {
  margin-bottom: 7px;
  color: #e0eaf1;
  font-size: 18px;
}

.az-agent-page .az-hero-desc {
  max-width: 660px;
  margin: 0 auto 27px;
  color: #b9cbd8;
  font-size: 16px;
  line-height: 1.8;
}

.az-agent-page .az-hero-btns,
.az-agent-page .az-contact-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
}

.az-agent-page .az-btn-pink,
.az-agent-page .az-btn-outline,
.az-agent-page .az-btn-line,
.az-agent-page .az-btn-white {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.az-agent-page .az-btn-pink { background: var(--az-agent-pink-dark); color: #fff; box-shadow: none; }
.az-agent-page .az-btn-outline { border-color: rgba(255,255,255,.54); color: #fff; }
.az-agent-page .az-btn-line { background: var(--az-agent-line); color: #fff; }
.az-agent-page .az-btn-white { background: #fff; color: var(--az-agent-blue-dark); }

.az-agent-page .az-pain,
.az-agent-page .az-why,
.az-agent-page .az-team-proof,
.az-agent-page .az-income,
.az-agent-page .az-steps,
.az-agent-page .az-who {
  padding: clamp(68px, 8vw, 100px) 24px;
  border: 0;
  scroll-margin-top: 96px;
}

.az-agent-page .az-pain,
.az-agent-page .az-income,
.az-agent-page .az-who { background: #fff; }

.az-agent-page .az-why,
.az-agent-page .az-team-proof,
.az-agent-page .az-steps { background: var(--az-agent-surface); }

.az-agent-page .az-pain-inner,
.az-agent-page .az-income-inner { max-width: 1000px; }

.az-agent-page .az-pain h2,
.az-agent-page .az-section-title {
  max-width: 760px;
  margin: 0 auto 32px;
  color: var(--az-agent-navy);
  font-family: "Prompt", sans-serif;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.45;
  text-align: center;
}

.az-agent-page .az-pain h2 { margin-bottom: 7px; }
.az-agent-page .az-pain h2 em { color: var(--az-agent-pink); }

.az-agent-page .az-pain-sub {
  margin-bottom: 30px;
  color: var(--az-agent-muted);
  font-size: 15px;
}

.az-agent-page .az-section-label {
  margin-bottom: 6px;
  color: var(--az-agent-pink-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
}

.az-agent-page .az-pain-grid,
.az-agent-page .az-why-grid,
.az-agent-page .az-income-cards,
.az-agent-page .az-who-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  max-width: 1000px;
  margin-inline: auto;
}

.az-agent-page .az-pain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.az-agent-page .az-pain-card,
.az-agent-page .az-why-card,
.az-agent-page .az-who-card {
  min-width: 0;
  min-height: 185px;
  padding: 23px;
  border: 1px solid var(--az-agent-border);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.az-agent-page .az-pain-emoji,
.az-agent-page .az-why-icon,
.az-agent-page .az-who-icon {
  display: grid;
  width: 43px;
  height: 43px;
  margin: 0 0 17px;
  place-items: center;
  border-radius: 13px;
  background: var(--az-agent-blue-soft);
  font-size: 20px;
}

.az-agent-page .az-pain-card h3,
.az-agent-page .az-why-card h3,
.az-agent-page .az-who-card h3 {
  margin-bottom: 7px;
  color: var(--az-agent-navy);
  font-family: "Prompt", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.az-agent-page .az-pain-card p,
.az-agent-page .az-why-card p,
.az-agent-page .az-who-card p {
  color: var(--az-agent-muted);
  font-size: 14px;
  line-height: 1.7;
}

.az-agent-page .az-pain-solve {
  max-width: 820px;
  margin: 28px auto 0;
  padding: 22px 24px;
  border: 1px solid #bcd7ea;
  border-radius: 15px;
  background: var(--az-agent-blue-soft);
}

.az-agent-page .az-pain-solve p { color: #40586d; font-size: 15px; }
.az-agent-page .az-pain-solve strong { color: var(--az-agent-pink-dark); }

.az-agent-page .az-team-showcase { max-width: 1000px; gap: 16px; }
.az-agent-page .az-team-hero { border-radius: 22px; box-shadow: 0 16px 40px rgba(22,58,91,.12); }
.az-agent-page .az-team-hero-caption { background: rgba(15,41,66,.9); }
.az-agent-page .az-team-secondary { border-color: var(--az-agent-border); border-radius: 16px; box-shadow: none; }

.az-agent-page .az-income-card {
  min-height: 180px;
  padding: 26px;
  border-radius: 17px;
  background: var(--az-agent-navy) !important;
}

.az-agent-page .az-income-card.pink { background: var(--az-agent-pink-dark) !important; }
.az-agent-page .az-income-card.green { background: #12623a !important; }
.az-agent-page .az-income-card .amount { font-size: clamp(25px, 4vw, 33px); }
.az-agent-page .az-income-note { color: #718394; line-height: 1.6; }

.az-agent-page .az-steps-list { max-width: 760px; gap: 12px; }

.az-agent-page .az-step-item {
  padding: 21px;
  border: 1px solid var(--az-agent-border);
  border-radius: 15px;
  background: #fff;
}

.az-agent-page .az-step-num {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--az-agent-blue-dark);
}

.az-agent-page .az-step-item h3 { color: var(--az-agent-navy); font-size: 15px; }
.az-agent-page .az-step-item p { color: var(--az-agent-muted); font-size: 14px; }

.az-agent-page .az-cta {
  width: min(1120px, calc(100% - 48px));
  margin: clamp(68px, 8vw, 100px) auto;
  padding: clamp(44px, 6vw, 70px) 28px;
  border-radius: 27px;
  background: var(--az-agent-navy-deep);
}

.az-agent-page .az-cta h2 { font-size: clamp(26px, 4vw, 40px); }
.az-agent-page .az-cta p { max-width: 620px; margin-bottom: 25px; color: #c1d0dc; font-size: 15px; }
.az-agent-page .az-cta-profile { border-radius: 14px; background: rgba(255,255,255,.08); }
.az-agent-page .az-avatar { background: var(--az-agent-pink-dark); }

@media (max-width: 900px) {
  .az-agent-page .az-pain-grid,
  .az-agent-page .az-why-grid,
  .az-agent-page .az-income-cards,
  .az-agent-page .az-who-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .az-agent-page .az-hero { padding: 58px 16px 66px; }
  .az-agent-page .az-hero h1 { font-size: clamp(32px, 10vw, 43px); }
  .az-agent-page .az-pain,
  .az-agent-page .az-why,
  .az-agent-page .az-team-proof,
  .az-agent-page .az-income,
  .az-agent-page .az-steps,
  .az-agent-page .az-who { padding: 64px 16px; }
  .az-agent-page .az-pain-grid,
  .az-agent-page .az-why-grid,
  .az-agent-page .az-income-cards,
  .az-agent-page .az-who-grid { grid-template-columns: 1fr; }
  .az-agent-page .az-pain-card,
  .az-agent-page .az-why-card,
  .az-agent-page .az-who-card { min-height: 0; }
  .az-agent-page .az-cta { width: min(100% - 32px,1120px); padding: 40px 20px; border-radius: 22px; }
  .az-agent-page .az-hero-btns,
  .az-agent-page .az-contact-btns { display: grid; grid-template-columns: 1fr; }
  .az-agent-page .az-btn-pink,
  .az-agent-page .az-btn-outline,
  .az-agent-page .az-btn-line,
  .az-agent-page .az-btn-white { width: 100%; }
  .az-agent-page .az-cta-profile { width: 100%; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .az-agent-skip { transition: none; }
}