/* ==========================================================================
   YMT Technology - pages.css
   --------------------------------------------------------------------------
   ADDITIVE ONLY. css/styles.css is the original stylesheet from the source
   build and is never modified. Everything here either supports the new
   multi-page structure or reuses the existing tokens, components and
   breakpoints so the added pages inherit the same design system.

   1.  Page transition
   2.  Scroll reveal
   3.  Reduced motion
   4.  Accessibility helpers
   5.  Navigation (nine items)
   6.  Inner page hero
   7.  Card extensions
   8.  Ecosystem pillars
   9.  Industry rows
   10. Regional presence
   11. Contact page
   12. Footer links + responsive
   ========================================================================== */

/* 1. Page transition ---------------------------------------------------- */
/* Subtle, applied to the page body only, so the sticky header is untouched. */
@keyframes ymtPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ymt-site main { animation: ymtPageIn .5s cubic-bezier(.2,.7,.3,1) both; }

/* 2. Scroll reveal ------------------------------------------------------ */
/* Armed by main.js only. Without JS, or with reduced motion, everything
   stays visible. */
.ymt-site.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.ymt-site.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 3. Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ymt-site main { animation: none; }
  .ymt-site .reveal,
  .ymt-site.reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
  .ymt-site .btn:hover,
  .ymt-site .card:hover,
  .ymt-site .industry:hover { transform: none; }
}

/* 4. Accessibility helpers ---------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 0 0 14px 0;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.skip-link:focus { left: 0; }
.ymt-site a:focus-visible,
.ymt-site button:focus-visible,
.ymt-site input:focus-visible,
.ymt-site textarea:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid rgba(11,92,255,.45);
  outline-offset: 2px;
}
.ymt-site [id] { scroll-margin-top: 96px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 5. Navigation --------------------------------------------------------- */
/* The original header had five links. Nine links do not fit inside the same
   1180px container at the original 14px/26px rhythm, so on wide screens the
   links tighten slightly and the horizontal bar is kept until 1200px, below
   which the ORIGINAL hamburger dropdown takes over unchanged. */
@media (min-width: 1201px) {
  .site-header .nav-wrap { gap: 20px; }
  .site-header .brand { width: 250px; max-width: 26vw; flex: 0 0 auto; }
  .site-header .mainnav { gap: clamp(14px, 1.4vw, 20px); }
  .site-header .mainnav a { font-size: 13px; white-space: nowrap; }
}
@media (max-width: 1200px) {
  .site-header .mainnav {
    position: absolute;
    top: 78px;
    left: 16px;
    right: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 60;
  }
  .site-header .mainnav.open { display: flex; }
  .site-header .mainnav a { padding: 12px; }
  .site-header .menu-btn { display: block; margin-left: auto; }
  .site-header .nav-actions { margin-left: 0; }
}
@media (max-width: 640px) {
  .site-header .mainnav { top: 68px; }
}
.mainnav a.active { color: var(--blue); }

/* 6. Inner page hero ---------------------------------------------------- */
/* Same gradient, same masked grid and the same floating glass components as
   the homepage hero, at a shorter inner-page height. */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 32%, #e8f1ff 0, transparent 31%),
    linear-gradient(180deg, #fff 0, #f9fbfe 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8,71,168,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,71,168,.03) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.page-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
  padding: 64px 0 58px;
  min-height: 460px;
}
.page-hero h1 { font-size: clamp(38px, 4.4vw, 62px); margin: 18px 0 20px; }
.page-hero .lead { font-size: 18px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { color: #b9c7d8; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 800; }

.hero-mini { height: 390px; }
.hero-mini .orb { width: 232px; height: 232px; }
.hero-mini .core-card { width: 186px; padding: 18px; }
.hero-mini .core-card strong { font-size: 17px; }
.hero-mini .float-card { width: 150px; padding: 13px; }
.hero-mini .m1 { left: 0; top: 12%; }
.hero-mini .m2 { right: 0; bottom: 13%; }

/* 7. Card extensions ---------------------------------------------------- */
/* Same .card component as the homepage, only new grid counts and the small
   list / tag / link elements the added pages need. */
.cards.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards.tight .card { min-height: auto; }
.card h3 { margin: 18px 0 8px; }
.card-tag {
  display: inline-block;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-list {
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.card-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.card-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bcd4ff;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
}
.card-link:after {
  content: "\2192";
  transition: transform .2s ease;
}
.card-link:hover:after { transform: translateX(3px); }

/* 8. Ecosystem pillars -------------------------------------------------- */
.pillar {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 54px;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.pillar:last-child { border-bottom: 0; padding-bottom: 8px; }
.pillar.rev { grid-template-columns: 1.1fr .9fr; }
.pillar-copy h2 { font-size: clamp(28px, 3vw, 40px); }
.pillar-copy > p { color: var(--muted); font-size: 17px; max-width: 620px; }
.pillar-copy .btn { margin-top: 26px; }
.pillar-visual {
  position: relative;
  height: 330px;
  border-radius: 32px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 72% 28%, #e8f1ff 0, transparent 58%),
    linear-gradient(160deg, #f8fbff 0, #eef4fd 100%);
}
.pillar-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8,71,168,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,71,168,.04) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle, black 10%, transparent 72%);
  mask-image: radial-gradient(circle, black 10%, transparent 72%);
}
.pv-orb {
  position: relative;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 54px;
  font-weight: 900;
  color: #fff;
  background: radial-gradient(circle at 34% 32%, #a9c8ff 0, #3e86ff 24%, #0b5cff 50%, #073a98 74%, #061b40 100%);
  box-shadow: 0 30px 66px rgba(11,92,255,.28), inset -14px -16px 42px rgba(1,18,52,.35);
}
.pv-orb:after {
  content: "";
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
}
.pv-badge {
  position: absolute;
  left: 22px;
  top: 22px;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--blue);
}
.pv-chip {
  position: absolute;
  left: 22px;
  bottom: 22px;
  max-width: calc(100% - 44px);
  padding: 10px 14px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
  color: #15304d;
}

/* 9. Industry rows ------------------------------------------------------ */
.industry {
  display: grid;
  grid-template-columns: 56px 1fr 250px;
  align-items: center;
  gap: 26px;
  padding: 26px 28px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: .2s ease;
}
.industry:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #bfd3ee;
}
.industry-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eaf2ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: 900;
}
.industry h3 { margin: 0 0 7px; }
.industry p { margin: 0; color: var(--muted); font-size: 14px; }
.industry-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.industry-side small {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.industry-side strong { font-size: 14px; }
.industry-side .card-link { margin-top: 4px; }

/* 10. Regional presence ------------------------------------------------- */
.region-map {
  border: 1px solid var(--line);
  border-radius: 32px;
  background: #fff;
  padding: 18px 10px;
  box-shadow: var(--shadow);
}
.region-map svg { width: 100%; height: auto; display: block; }
.region-row {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}
.region-row:last-child { border-bottom: 0; }
.region-row h3 { font-size: 26px; margin: 8px 0 0; }
.region-row p { margin: 0; color: var(--muted); font-size: 15px; }
.region-row .company-facts { margin-top: 8px; }
.country {
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}

/* 11. Contact page ------------------------------------------------------ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
  gap: 20px;
}
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #43566d;
}
.field input,
.field textarea {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  min-height: 48px;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #9aabbe; }
.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11,92,255,.14);
}
.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.form-status {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
}
.form-note {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #7c8fa4;
}
.channel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 28px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: .2s ease;
}
a.channel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #bfd3ee;
}
.channel small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.channel strong { font-size: 18px; letter-spacing: -.01em; }
.channel span { font-size: 13px; color: var(--muted); }

/* 12. Footer links + responsive ----------------------------------------- */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: flex-end;
}
.footer-links a { color: #8090a3; font-size: 12px; font-weight: 700; }
.footer-links a:hover { color: var(--blue); }

@media (max-width: 980px) {
  .page-hero-grid { grid-template-columns: 1fr; min-height: auto; padding: 48px 0 44px; gap: 24px; }
  .hero-mini { height: 340px; }
  .cards.cards-3, .cards.cards-2 { grid-template-columns: repeat(2, 1fr); }
  .pillar, .pillar.rev { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .pillar.rev .pillar-visual { order: -1; }
  .pillar-visual { height: 280px; }
  .industry { grid-template-columns: 56px 1fr; row-gap: 18px; }
  .industry-side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .industry-side .card-link { margin-top: 0; }
  .region-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .page-hero-grid { padding: 34px 0 30px; }
  .page-hero h1 { font-size: 36px; margin: 14px 0 16px; }
  .page-hero .lead { font-size: 16px; }
  .hero-mini { height: 300px; margin-top: 6px; }
  .hero-mini .orb { width: 180px; height: 180px; }
  .hero-mini .core-card { width: 154px; padding: 14px; }
  .hero-mini .core-card strong { font-size: 15px; }
  .hero-mini .float-card { width: 122px; padding: 10px; font-size: 10px; }
  .hero-mini .m1 { top: 6%; }
  .hero-mini .m2 { bottom: 7%; }
  .cards.cards-3, .cards.cards-2 { grid-template-columns: 1fr; }
  .pillar { padding: 34px 0; }
  .pillar-visual { height: 230px; border-radius: 24px; }
  .pv-orb { width: 116px; height: 116px; font-size: 40px; }
  .pv-badge, .pv-chip { left: 16px; }
  .pv-badge { top: 16px; }
  .pv-chip { bottom: 16px; font-size: 11px; }
  .industry { grid-template-columns: 1fr; padding: 22px; gap: 14px; border-radius: 20px; }
  .industry-side { flex-direction: column; align-items: flex-start; gap: 10px; }
  .region-map { border-radius: 22px; padding: 12px 6px; }
  .region-row h3 { font-size: 22px; }
  .form-card { padding: 24px; border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .channel { padding: 20px 22px; border-radius: 20px; }
  .channel strong { font-size: 16px; }
  .footer-links { gap: 6px 14px; }
}

/* 13. Header CTA ------------------------------------------------------- */
/* Nine nav items leave the header CTA less room than the original five did,
   so the button keeps its single-line shape instead of wrapping. */
.site-header .nav-actions .btn { white-space: nowrap; }
.site-header .nav-actions { flex: 0 0 auto; }