@charset "UTF-8";

:root {
  --primary-q7m: #6d28d9;
  --primary-deep-q7m: #4c1d95;
  --primary-soft-q7m: #ede9fe;
  --accent-q7m: #f59e0b;
  --accent-deep-q7m: #d97706;
  --accent-soft-q7m: #fef3c7;
  --bg-q7m: #f6f7fb;
  --tint-q7m: #eef0fa;
  --white-q7m: #ffffff;
  --ink-q7m: #171a2e;
  --ink-soft-q7m: #2c3050;
  --muted-q7m: #666d8a;
  --line-q7m: #e4e7f3;
  --radius-q7m: 14px;
  --radius-lg-q7m: 22px;
  --shadow-q7m: 0 16px 38px rgba(23, 26, 46, 0.08);
  --shadow-lg-q7m: 0 26px 60px rgba(23, 26, 46, 0.14);
  --radius-media-q7m: 14px;
  --radius-avatar-q7m: 50%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-q7m);
  background: var(--bg-q7m);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-q7m), var(--primary-deep-q7m));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(109, 40, 217, 0.32);
  color: #fff;
}

.outline-q7m {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.outline-q7m:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.hero-aab .outline-q7m {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
  box-shadow: none;
}

.hero-aab .outline-q7m:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.anim-q7m [data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.anim-q7m [data-anim="left"] {
  transform: translateX(-34px);
}

.anim-q7m [data-anim="right"] {
  transform: translateX(34px);
}

.anim-q7m [data-anim].on-q7m {
  opacity: 1;
  transform: none;
}

/* ---------- header ---------- */

.site-q7m {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 18px rgba(23, 26, 46, 0.06);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-q7m.stuck-q7m {
  box-shadow: 0 10px 30px rgba(23, 26, 46, 0.12);
}

.site-aad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 74px;
}

.site-aac {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.site-aae {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.22);
  flex: 0 0 auto;
}

.site-aaf {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-q7m);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nav-aad {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-aac {
  display: block;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft-q7m);
}

.nav-aac:hover,
.nav-aac.active-q7m {
  color: var(--primary-q7m);
  background: var(--primary-soft-q7m);
}

.nav-aae {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-q7m);
  background: #fff;
  color: var(--primary-q7m);
  font-size: 18px;
}

/* ---------- hero ---------- */

.hero-q7m {
  position: relative;
  isolation: isolate;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0d0f1c;
}

.hero-aac {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-aaj {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease, transform 7s linear;
}

.hero-aaj.on-q7m {
  opacity: 1;
  transform: scale(1);
}

.hero-aap {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 11, 24, 0.82) 0%, rgba(9, 11, 24, 0.68) 45%, rgba(9, 11, 24, 0.92) 100%);
}

.hero-aag {
  text-align: center;
  padding: 120px 24px 130px;
  max-width: 960px;
  margin: 0 auto;
}

.hero-aaf {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f3eaff;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-aak {
  margin: 22px 0 18px;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.24;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}

.hero-aah {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
}

.hero-aab {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-aab .btn {
  background: linear-gradient(135deg, var(--accent-q7m), var(--accent-deep-q7m));
  box-shadow: 0 16px 34px rgba(245, 158, 11, 0.32);
}

.hero-aab .btn:hover {
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.42);
}

.hero-aan {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.hero-aam {
  padding: 20px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-q7m);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.hero-aam strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.hero-aam span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
}

.hero-aae {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero-aad {
  width: 34px;
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.3s ease, width 0.3s ease;
}

.hero-aad.on-q7m {
  width: 52px;
  background: var(--accent-q7m);
}

/* ---------- shared section chrome ---------- */

section {
  padding: 92px 0;
}

.edge-q7m,
.expertise-q7m,
.updates-q7m,
.queries-q7m,
.laurels-q7m {
  background: var(--white-q7m);
}

.crew-q7m,
.story-q7m,
.voices-q7m {
  background: var(--tint-q7m);
}

.showcase-q7m,
.journey-q7m,
.allies-q7m {
  background: var(--bg-q7m);
}

.edge-aad,
.expertise-aad,
.showcase-aaf,
.updates-aaf,
.journey-aab,
.crew-aad,
.voices-aae,
.queries-aac,
.allies-aac,
.laurels-aad {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.edge-aaf,
.expertise-aaf,
.showcase-aag,
.updates-aag,
.journey-aac,
.crew-aae,
.voices-aaf,
.queries-aae,
.allies-aae,
.laurels-aaf,
.reach-aaj {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--primary-soft-q7m);
  color: var(--primary-q7m);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.edge-aak,
.expertise-aak,
.showcase-aas,
.updates-aas,
.journey-aak,
.crew-aak,
.voices-aap,
.queries-aaj,
.allies-aag,
.laurels-aak,
.reach-aas,
.story-aan {
  margin: 16px 0 14px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.32;
  color: var(--ink-q7m);
}

.edge-aag,
.expertise-aag,
.showcase-aah,
.updates-aah,
.journey-aad,
.crew-aaf,
.voices-aag,
.queries-aaf,
.allies-aaf,
.laurels-aag,
.reach-aam,
.story-aag {
  font-size: 16px;
  color: var(--muted-q7m);
}

/* ---------- advantage ---------- */

.edge-aac {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.edge-aab {
  padding: 30px 26px;
  border-radius: var(--radius-lg-q7m);
  background: var(--bg-q7m);
  border: 1px solid transparent;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.edge-aab:hover {
  transform: translateY(-6px);
  background: #fff;
  border-color: var(--primary-soft-q7m);
  box-shadow: var(--shadow-q7m);
}

.edge-aae {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-q7m), var(--primary-deep-q7m));
  color: #fff;
  font-size: 20px;
  margin-bottom: 18px;
}

.edge-aah {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.edge-aaj {
  font-size: 14.5px;
  color: var(--muted-q7m);
}

/* ---------- crew ---------- */

.crew-aac {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.crew-aab {
  padding: 32px 24px;
  text-align: center;
  background: #fff;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-q7m);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.crew-aab:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg-q7m);
}

.crew-aah {
  width: 132px;
  height: 132px;
  margin: 0 auto 18px;
  border-radius: var(--radius-avatar-q7m);
  object-fit: cover;
  border: 4px solid var(--primary-soft-q7m);
}

.crew-aag {
  font-size: 19px;
  font-weight: 700;
}

.crew-aaj {
  margin-top: 6px;
  font-size: 14px;
  color: var(--primary-q7m);
}

/* ---------- story ---------- */

.story-aae {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 62px;
  align-items: center;
}

.story-aad {
  position: relative;
}

.story-aah {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-lg-q7m);
}

.story-aab {
  position: absolute;
  left: 22px;
  bottom: -22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-q7m), var(--accent-deep-q7m));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 16px 30px rgba(217, 119, 6, 0.3);
}

.story-aam {
  margin: 12px 0 20px;
  color: var(--muted-q7m);
  font-size: 15.5px;
}

.story-aak {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
}

.story-aaj {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--muted-q7m);
}

.story-aaj i {
  color: var(--primary-q7m);
  font-size: 17px;
  margin-top: 5px;
}

.story-aaj strong {
  color: var(--ink-q7m);
  margin-right: 6px;
}

/* ---------- showcase ---------- */

.showcase-aae {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.showcase-aad {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-q7m);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.showcase-aad:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg-q7m);
}

.showcase-aaj {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--primary-soft-q7m);
}

.showcase-aaq {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.showcase-aad:hover .showcase-aaq {
  transform: scale(1.06);
}

.showcase-aac {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.showcase-aan {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}

.showcase-aan a:hover {
  color: var(--primary-q7m);
}

.showcase-aap {
  font-size: 14.5px;
  color: var(--muted-q7m);
  flex: 1 1 auto;
}

.showcase-aak {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-q7m);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted-q7m);
}

.showcase-aak i {
  margin-right: 6px;
  color: var(--primary-q7m);
}

.showcase-aam {
  margin-top: 44px;
  text-align: center;
}

/* ---------- journey ---------- */

.journey-aah {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  counter-reset: step;
}

.journey-aag {
  position: relative;
  padding: 30px 22px;
  background: #fff;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-q7m);
  transition: transform 0.35s ease;
}

.journey-aag:hover {
  transform: translateY(-6px);
}

.journey-aag::after {
  content: "";
  position: absolute;
  top: 52px;
  right: -14px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--accent-q7m);
  border-right: 2px solid var(--accent-q7m);
  transform: rotate(45deg);
}

.journey-aag:last-child::after {
  display: none;
}

.journey-aaf {
  display: inline-block;
  font-size: 34px;
  font-weight: 800;
  color: var(--primary-soft-q7m);
  line-height: 1;
  margin-bottom: 12px;
}

.journey-aae {
  font-size: 17.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.journey-aaj {
  font-size: 14px;
  color: var(--muted-q7m);
}

/* ---------- expertise ---------- */

.expertise-aac {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.expertise-aab {
  padding: 34px 28px;
  border-radius: var(--radius-lg-q7m);
  background: var(--bg-q7m);
  border: 1px solid var(--line-q7m);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.expertise-aab:hover {
  transform: translateY(-6px);
  border-color: transparent;
  background: #fff;
  box-shadow: var(--shadow-q7m);
}

.expertise-aae {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--primary-soft-q7m);
  color: var(--primary-q7m);
  font-size: 21px;
  margin-bottom: 18px;
  transition: background 0.3s ease, color 0.3s ease;
}

.expertise-aab:hover .expertise-aae {
  background: linear-gradient(135deg, var(--primary-q7m), var(--primary-deep-q7m));
  color: #fff;
}

.expertise-aah {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 10px;
}

.expertise-aaj {
  font-size: 14.5px;
  color: var(--muted-q7m);
}

/* ---------- voices ---------- */

.voices-aad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.voices-aac {
  position: relative;
  padding: 34px 30px;
  background: #fff;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-q7m);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.voices-aac:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg-q7m);
}

.voices-aak {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 30px;
  color: var(--primary-soft-q7m);
}

.voices-aan {
  font-size: 15.5px;
  color: var(--ink-soft-q7m);
  padding-right: 34px;
  margin-bottom: 22px;
}

.voices-aaq {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-q7m);
}

.voices-aab {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-avatar-q7m);
  object-fit: cover;
  border: 3px solid var(--primary-soft-q7m);
}

.voices-aaj {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.voices-aam {
  font-size: 13px;
  color: var(--muted-q7m);
}

/* ---------- updates ---------- */

.updates-aae {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.updates-aad {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-q7m);
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-q7m);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.updates-aad:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg-q7m);
}

.updates-aaj {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--primary-soft-q7m);
}

.updates-aaq {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.updates-aad:hover .updates-aaq {
  transform: scale(1.06);
}

.updates-aac {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.updates-aan {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}

.updates-aan a:hover {
  color: var(--primary-q7m);
}

.updates-aap {
  font-size: 14.5px;
  color: var(--muted-q7m);
  flex: 1 1 auto;
}

.updates-aak {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted-q7m);
}

.updates-aak i {
  margin-right: 6px;
  color: var(--primary-q7m);
}

.updates-aam {
  margin-top: 44px;
  text-align: center;
}

/* ---------- allies ---------- */

.allies-aab {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.allies-aad {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 14px;
  background: #fff;
  border-radius: var(--radius-q7m);
  box-shadow: 0 8px 22px rgba(23, 26, 46, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.allies-aad:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-q7m);
}

.allies-aad img {
  max-height: 58px;
  width: auto;
  object-fit: contain;
}

/* ---------- queries ---------- */

.queries-aag {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.queries-aad {
  background: var(--bg-q7m);
  border: 1px solid var(--line-q7m);
  border-radius: var(--radius-q7m);
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.queries-aad.open-q7m {
  background: #fff;
  border-color: var(--primary-soft-q7m);
}

.queries-aah {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-q7m);
  text-align: left;
}

.queries-aah i {
  color: var(--primary-q7m);
  transition: transform 0.3s ease;
  flex: 0 0 auto;
}

.queries-aad.open-q7m .queries-aah i {
  transform: rotate(45deg);
}

.queries-aab {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.queries-aab p {
  padding: 0 24px 22px;
  font-size: 14.5px;
  color: var(--muted-q7m);
}

/* ---------- laurels ---------- */

.laurels-aac {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.laurels-aab {
  padding: 34px 24px;
  text-align: center;
  background: var(--bg-q7m);
  border-radius: var(--radius-lg-q7m);
  border: 1px solid var(--line-q7m);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.laurels-aab:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-q7m);
}

.laurels-aae {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-soft-q7m);
  color: var(--accent-deep-q7m);
  font-size: 23px;
  margin-bottom: 16px;
}

.laurels-aaj {
  display: block;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary-q7m);
  margin-bottom: 8px;
}

.laurels-aah {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-soft-q7m);
}

/* ---------- reach ---------- */

.reach-q7m {
  background: linear-gradient(135deg, #1b1033 0%, #35196b 55%, #4c1d95 100%);
  color: #fff;
}

.reach-aaf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.reach-aaj {
  background: rgba(255, 255, 255, 0.14);
  color: #f3eaff;
}

.reach-aas {
  color: #fff;
}

.reach-aam {
  color: rgba(255, 255, 255, 0.78);
}

.reach-aan {
  margin-top: 30px;
  display: grid;
  gap: 20px;
}

.reach-aah {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.reach-aad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-q7m);
  font-size: 17px;
}

.reach-aak {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
}

.reach-aaq {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.74);
}

.reach-aac {
  padding: 34px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-lg-q7m);
  color: var(--ink-q7m);
  display: grid;
  gap: 16px;
}

.reach-aap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.reach-aab {
  display: grid;
  gap: 8px;
}

.reach-aac .reach-aak {
  color: var(--ink-soft-q7m);
  font-size: 14px;
}

.reach-aag {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-q7m);
  border-radius: 12px;
  background: var(--bg-q7m);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-q7m);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.reach-aag:focus {
  outline: none;
  background: #fff;
  border-color: var(--primary-q7m);
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.12);
}

.reach-aac textarea {
  resize: vertical;
  min-height: 130px;
}

.reach-aac .btn {
  justify-self: start;
}

.reach-aar {
  font-size: 13px;
  color: var(--muted-q7m);
}

/* ---------- cta ---------- */

.cta-q7m {
  background: linear-gradient(135deg, var(--primary-q7m) 0%, var(--primary-deep-q7m) 60%, #2f1065 100%);
  text-align: center;
}

.cta-aac {
  max-width: 780px;
}

.cta-aad {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.72);
}

.cta-aaf {
  margin: 16px 0 14px;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  color: #fff;
}

.cta-aae {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
}

.cta-aab {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-aab .btn {
  background: var(--accent-q7m);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.cta-aab .btn:hover {
  background: var(--accent-deep-q7m);
}

.cta-aab .outline-q7m {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.cta-aab .outline-q7m:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* ---------- footer ---------- */

.foot-q7m {
  background: #12142a;
  color: rgba(255, 255, 255, 0.7);
  padding: 68px 0 0;
}

.foot-aag {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}

.foot-aac {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.foot-aaj {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
}

.foot-aam {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
}

.foot-aan {
  font-size: 14px;
  line-height: 1.85;
}

.foot-aap {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
}

.foot-aah {
  display: grid;
  gap: 11px;
  font-size: 14px;
}

.foot-aah a:hover {
  color: var(--accent-q7m);
}

.foot-aak {
  display: grid;
  gap: 13px;
  font-size: 14px;
}

.foot-aak i {
  width: 20px;
  color: var(--accent-q7m);
  margin-right: 8px;
}

.foot-aab {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 24px;
}

.foot-aaf {
  font-size: 13.5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- list page ---------- */

.page-q7m {
  padding: 62px 0 58px;
  background: linear-gradient(135deg, #1b1033 0%, #35196b 60%, #4c1d95 100%);
  color: #fff;
}

.page-aac {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.page-aab:hover {
  color: var(--accent-q7m);
}

.page-aab.active-q7m {
  color: #fff;
  font-weight: 600;
}

.page-aaf i {
  font-size: 11px;
  opacity: 0.6;
}

.page-aag {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.3;
}

.page-aae {
  margin-top: 14px;
  max-width: 720px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.listing-q7m {
  background: var(--bg-q7m);
}

.listing-aac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line-q7m);
}

.listing-aaf {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-q7m);
  position: relative;
  padding-left: 16px;
}

.listing-aaf::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: var(--primary-q7m);
}

.listing-aan {
  font-size: 13.5px;
  color: var(--muted-q7m);
}

.listing-aag {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.listing-aae {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-q7m);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.listing-aae:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg-q7m);
}

.listing-aah {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--primary-soft-q7m);
}

.listing-aaq {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.listing-aae:hover .listing-aaq {
  transform: scale(1.06);
}

.listing-aad {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.listing-aam {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}

.listing-aam a:hover {
  color: var(--primary-q7m);
}

.listing-aap {
  font-size: 14.5px;
  color: var(--muted-q7m);
  flex: 1 1 auto;
}

.listing-aaj {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-q7m);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted-q7m);
}

.listing-aaj i {
  margin-right: 6px;
  color: var(--primary-q7m);
}

.listing-aak {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-q7m);
}

.listing-aak i {
  margin-left: 6px;
  transition: transform 0.25s ease;
  display: inline-block;
}

.listing-aak:hover i {
  transform: translateX(4px);
}

/* ---------- detail page ---------- */

.reading-q7m {
  padding: 58px 0 90px;
  background: var(--bg-q7m);
}

.reading-q7m .page-aac {
  color: var(--muted-q7m);
  margin-bottom: 24px;
}

.reading-q7m .page-aab:hover {
  color: var(--primary-q7m);
}

.reading-q7m .page-aab.active-q7m {
  color: var(--ink-q7m);
}

.reading-aag {
  max-width: 860px;
  margin: 0 auto 30px;
  text-align: center;
}

.reading-aav {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.38;
  color: var(--ink-q7m);
}

.reading-aah {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted-q7m);
}

.reading-aah i {
  margin-right: 6px;
  color: var(--primary-q7m);
}

.reading-aae {
  max-width: 1000px;
  margin: 0 auto 40px;
}

.reading-aat {
  width: 100%;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-lg-q7m);
}

.reading-aad {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted-q7m);
}

.reading-aac {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 46px;
  background: #fff;
  border-radius: var(--radius-lg-q7m);
  box-shadow: var(--shadow-q7m);
  font-size: 16px;
  color: var(--ink-soft-q7m);
  line-height: 2;
}

.reading-aac h2 {
  margin: 30px 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-q7m);
}

.reading-aac h3 {
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-q7m);
}

.reading-aac p {
  margin-bottom: 16px;
}

.reading-aac ul {
  margin: 0 0 18px;
  padding-left: 4px;
}

.reading-aac li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}

.reading-aac li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-q7m);
}

.reading-aas {
  max-width: 860px;
  margin: 30px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.reading-aar {
  font-size: 13.5px;
  color: var(--muted-q7m);
}

.reading-aaq {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--primary-soft-q7m);
  color: var(--primary-q7m);
  font-size: 13px;
  font-weight: 600;
}

.reading-aaq:hover {
  background: var(--primary-q7m);
  color: #fff;
}

.reading-aaj {
  max-width: 860px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.reading-aak {
  padding: 22px 24px;
  background: #fff;
  border-radius: var(--radius-q7m);
  border: 1px solid var(--line-q7m);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.reading-aak:hover {
  border-color: var(--primary-soft-q7m);
  box-shadow: var(--shadow-q7m);
}

.reading-aan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-q7m);
  margin-bottom: 8px;
}

.reading-aam {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-q7m);
  line-height: 1.6;
}

.reading-aaf {
  max-width: 860px;
  margin: 36px auto 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.reading-aaf .outline-q7m {
  background: transparent;
  border-color: var(--line-q7m);
  color: var(--ink-soft-q7m);
}

.reading-aaf .outline-q7m:hover {
  background: var(--primary-soft-q7m);
  border-color: var(--primary-q7m);
  color: var(--primary-q7m);
  box-shadow: none;
}

/* ---------- back to top ---------- */

.top-q7m {
  position: fixed;
  right: 22px;
  bottom: 26px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-q7m);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 12px 26px rgba(109, 40, 217, 0.36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.3s ease;
}

.top-q7m.on-q7m {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.top-q7m:hover {
  background: var(--primary-deep-q7m);
}

/* ---------- responsive ---------- */

@media (max-width: 1120px) {
  .edge-aac,
  .laurels-aac {
    grid-template-columns: repeat(3, 1fr);
  }

  .journey-aah {
    grid-template-columns: repeat(3, 1fr);
  }

  .journey-aag::after {
    display: none;
  }

  .allies-aab {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 980px) {
  section {
    padding: 72px 0;
  }

  .nav-aae {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-q7m {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    box-shadow: 0 18px 34px rgba(23, 26, 46, 0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .nav-q7m.open-q7m {
    max-height: 420px;
  }

  .nav-aad {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    gap: 4px;
  }

  .nav-aac {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .story-aae,
  .reach-aaf {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .story-aad {
    max-width: 520px;
  }

  .showcase-aae,
  .updates-aae,
  .listing-aag,
  .expertise-aac {
    grid-template-columns: repeat(2, 1fr);
  }

  .crew-aac {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-aag {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .container {
    padding: 0 18px;
  }

  .hero-q7m {
    min-height: 560px;
  }

  .hero-aag {
    padding: 92px 18px 108px;
  }

  .hero-aan {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 42px;
  }

  .edge-aac,
  .laurels-aac,
  .journey-aah,
  .allies-aab,
  .showcase-aae,
  .updates-aae,
  .listing-aag,
  .expertise-aac,
  .crew-aac,
  .voices-aad,
  .reading-aaj {
    grid-template-columns: 1fr;
  }

  .reach-aap {
    grid-template-columns: 1fr;
  }

  .reading-aac {
    padding: 28px 22px;
  }

  .foot-aag {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .top-q7m {
    right: 14px;
    bottom: 18px;
  }
}

@media (max-width: 480px) {
  .site-aaf {
    font-size: 12.5px;
  }

  .site-aae {
    width: 40px;
    height: 40px;
  }

  .reach-aac {
    padding: 24px 20px;
  }

  .hero-aab .btn {
    width: 100%;
  }
}