/* carry-core.com "/22" MetaTrader5 페이지 본문 전용 스타일 — 실측 기반 (mt5-audit.md, desktop 1440/1728,
   mobile iPhone13/390px). 헤더/푸터는 main.css 공통. 이 페이지는 브랜드 그라데이션 2종을 별도로 씀
   (히어로/피처: #1D4ED8→#2563EB→#1E40AF 딥블루, How to Use 강조어(KR 전용): #60A5FA→#BFDBFE 라이트블루)
   — Home/Company의 그라데이션 값과 다르므로 재사용하지 않고 이 파일에서 새로 정의. */

.mt5-container { max-width: 1220px; margin: 0 auto; padding: 0 40px; }

/* ---------- hero ----------
   실측 재확인(라이브 재검증): 히어로엔 이미지가 하나뿐이다 — 노트북+플로팅 패널 스크린샷 합성
   `.mt5hero-bg`(절대배치 배경, 투명 여백이 많이 baked-in된 파일이라 background-size:cover로도
   위아래 여백이 자연스럽게 생김) 딱 하나. 예전에 있던 `.mt5hero-visual`(hub/spoke 키/DB/방패/자물쇠
   다이어그램, desktop-02-hero-cluster.png)는 사실 "Powerful Solutions" 섹션 이미지
   (desktop-07-solutions-diagram.png)와 완전히 같은 디자인의 다른 해상도 버전이었음 — 빌드 때 실수로
   히어로에도 중복 삽입되어 배경 이미지와 겹쳐 보이는("이미지 두 개가 겹쳐 보인다") 버그의 원인이었음.
   제거함. 배경 박스 높이(1162px)는 라이브 실측과 정확히 일치(kr-1440) — 그 자체는 문제 없었음. */
.mt5hero-section { position: relative; background: #FFFFFF; padding: 90px 0 20px; overflow: hidden; }
.mt5hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 1162px;
  background-size: cover; background-position: top center; background-repeat: no-repeat;
  pointer-events: none; z-index: 0;
}
.mt5hero-inner { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 0 40px; text-align: center; }
.mt5hero-heading { position: relative; font-size: 64px; font-weight: 700; line-height: 1.15; margin: 0; }
.mt5hero-heading .line,
.mt5hero-heading span { display: block; }
.mt5hero-heading .solid { color: #000; }
.mt5hero-heading .gradient {
  position: relative;
  background: linear-gradient(90deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 실측: 그라데이션 헤딩 라인 뒤에 같은 그라데이션 색상의 블러 글로우가 있음(라이브
   rect 448x140 @ heading line2와 거의 같은 위치) — 예전엔 이 글로우가 (잘못 존재했던) 히어로
   이미지 밑에 달려있었는데, 실제로는 그라데이션 텍스트 자체의 글로우였음. */
.mt5hero-heading .gradient::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 70%; height: 110%; background: linear-gradient(90deg, #1D4ED8, #2563EB, #1E40AF);
  filter: blur(48px); opacity: .35; z-index: -1; border-radius: 50%;
}
/* 히어로 배경 이미지(1162px 박스)에는 헤딩만 얹혀있고, 그 아래는 이미지 자체의 넓은 여백 —
   서브텍스트는 그 이후 라이브 실측 간격(배경 박스 끝에서 +130px)만큼 떨어져 시작함. */
.mt5hero-orphan-eyebrow { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #155DFC; margin-top: 40px; }
.mt5hero-subtext { max-width: 700px; margin: 1055px auto 0; font-size: 20.576px; font-weight: 700; color: #000; line-height: 1.5; }
.mt5hero-subtext .accent { color: #155DFC; }

/* ---------- feature strip ---------- */
.mt5features-section { background: #FFFFFF; padding: 40px 0 90px; }
.mt5features-grid { max-width: 1100px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; gap: 24px; }
.mt5feature-item { flex: 1 1 0; text-align: center; }
.mt5feature-icon { display: block; width: 44px; height: 44px; margin: 0 auto 16px; color: #2563EB; }
.mt5feature-icon svg { width: 100%; height: 100%; }
.mt5feature-label {
  font-size: 36px; font-weight: 700; margin: 0 0 12px;
  background: linear-gradient(90deg, #1D4ED8 0%, #2563EB 50%, #1E40AF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mt5feature-caption { font-size: 20.576px; font-weight: 700; color: #000; }

/* ---------- how to use (dark navy) ---------- */
.mt5htu-section { position: relative; background: #06122A; padding: 90px 0 110px; overflow: hidden; }
.mt5htu-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  z-index: 0; pointer-events: none;
}
.mt5htu-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 40px; text-align: center; }
.mt5htu-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #62748E; margin-bottom: 16px; }
.mt5htu-heading { font-size: 51.424px; font-weight: 700; color: #fff; line-height: 1.3; margin: 0 0 24px; }
.mt5htu-heading .accent {
  background: linear-gradient(180deg, #60A5FA 0%, #BFDBFE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mt5htu-body { max-width: 600px; margin: 0 auto; font-size: 18px; font-weight: 700; color: #94A3B8; line-height: 1.6; }

.mt5htu-steps { margin-top: 80px; display: flex; flex-direction: column; gap: 96px; }
.mt5htu-step { display: flex; flex-direction: column; align-items: center; }
.mt5htu-step-badge { display: block; height: 40px; width: auto; margin-bottom: 24px; }
.mt5htu-step-icon { display: block; width: 56px; height: 56px; color: #BFDBFE; margin-bottom: 20px; }
.mt5htu-step-icon svg { width: 100%; height: 100%; }
.mt5htu-step-heading { font-size: 20.576px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.mt5htu-step-body { max-width: 460px; margin: 0; font-size: 16px; color: #94A3B8; line-height: 1.6; }

/* ---------- powerful solutions ---------- */
.mt5solutions-section { background: #FFFFFF; padding: 90px 0; }
.mt5solutions-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 64px;
}
.mt5solutions-copy { flex: 1 1 0; text-align: left; }
.mt5solutions-heading { font-size: 51.424px; font-weight: 700; color: #000; line-height: 1.25; margin: 0 0 32px; }
.mt5solutions-heading .accent { color: #155DFC; }
.mt5solutions-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.mt5solutions-bullets li { font-size: 18px; font-weight: 700; color: #000; line-height: 1.6; }
.mt5solutions-bullets .pin { margin-right: 6px; }
.mt5solutions-bullets .accent { color: #155DFC; }
.mt5solutions-diagram { flex: 0 0 auto; width: 42%; max-width: 480px; }
.mt5solutions-diagram img { display: block; width: 100%; height: auto; }

/* ---------- download ---------- */
.mt5download-section { background: #FFFFFF; padding: 60px 0 0; text-align: center; }
.mt5download-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #155DFC; margin-bottom: 16px; }
.mt5download-heading { font-size: 64px; font-weight: 700; color: #000; line-height: 1.15; margin: 0; }
.mt5download-heading .line { display: block; }
.mt5download-desc { max-width: 620px; margin: 24px auto 0; font-size: 16px; color: #62748E; font-weight: 700; line-height: 1.6; }
.mt5download-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.mt5download-btn {
  display: inline-flex; align-items: center; gap: 10px; background: #155DFC; color: #fff;
  padding: 14px 28px; border-radius: 9999px; font-size: 15px; font-weight: 700;
  cursor: default; user-select: none; transition: background .3s;
}
/* 실측 확인(라이브 hover): 클릭 기능은 없지만(href 없음, cursor:default) hover 시 배경만
   #155DFC → #BBD0FE로 바뀜 — 이 프로젝트 다른 CTA 버튼들과 동일한 hover 색상. */
.mt5download-btn:hover { background: #BBD0FE; }
.mt5download-btn-icon { display: block; width: 18px; height: 18px; }
.mt5download-btn-icon svg { width: 100%; height: 100%; }
.mt5download-mockup { max-width: 1200px; margin: 56px auto 0; }
.mt5download-mockup img { display: block; width: 100%; height: auto; }

/* ============ mobile (<=720px) ============ */
@media (max-width: 720px) {
  .mt5hero-section { padding: 40px 0 40px; }
  .mt5hero-inner { padding: 0 20px; }
  /* 실측(모바일 라이브 kr-mobile): 히어로 배경 박스가 데스크톱(1162px)과 전혀 다르게 328px로
     짧음 — 모바일 전용 이미지(mobile-01-hero-bg.png, 데스크톱과 다른 파일) 자체가 여백이 훨씬 적은
     크롭이라 그럼. 700px는 예전에 데스크톱 값을 그대로 축소해서 쓴 추정치였고, 실제로는 섹션
     `overflow:hidden`에 잘려서 이미지가 아예 안 보이는 버그였음. */
  .mt5hero-bg { height: 328px; }
  .mt5hero-heading { font-size: 32px; }
  .mt5hero-orphan-eyebrow { margin-top: 32px; }
  .mt5hero-subtext { font-size: 17px; margin-top: 200px; }

  .mt5features-section { padding: 32px 0 56px; }
  .mt5features-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 16px; padding: 0 20px;
  }
  .mt5feature-label { font-size: 22px; }
  .mt5feature-caption { font-size: 14px; }

  .mt5htu-section { padding: 56px 0 72px; }
  .mt5htu-inner { padding: 0 20px; }
  .mt5htu-heading { font-size: 28px; }
  .mt5htu-body { font-size: 15px; }
  .mt5htu-steps { margin-top: 48px; gap: 64px; }
  .mt5htu-step-heading { font-size: 22px; }
  .mt5htu-step-body { font-size: 14px; }
  /* `.mobile-only` reverts <img> to the UA default (`inline`), not the `block` this component
     needs to stay centered — explicit override per CLAUDE.md's recurring display:revert trap. */
  .mt5htu-step-badge.mobile-only { display: block !important; margin: 0 auto 24px; }

  .mt5solutions-section { padding: 56px 0; }
  .mt5solutions-inner { flex-direction: column; padding: 0 20px; text-align: center; }
  .mt5solutions-copy { text-align: left; }
  .mt5solutions-heading { font-size: 28px; text-align: center; }
  .mt5solutions-bullets { text-align: left; }
  .mt5solutions-diagram { width: 100%; max-width: 340px; margin: 40px auto 0; }
  .mt5solutions-diagram img.mobile-only { display: block !important; }

  .mt5download-section { padding: 48px 0 0; }
  .mt5download-heading { font-size: 32px; }
  .mt5download-desc { padding: 0 20px; font-size: 15px; }
  .mt5download-buttons { padding: 0 20px; gap: 12px; }
  .mt5download-btn { padding: 12px 20px; font-size: 14px; }
  .mt5download-mockup { padding: 0 20px; margin-top: 40px; }
  .mt5download-mockup img.mobile-only { display: block !important; }
}