/* About Us
   Reuses the homepage and product-page design language while keeping the
   complete About narrative and its editorial page structure. */

.about-page {
  --about-ink: var(--color-text-main, #191c1d);
  --about-muted: var(--color-text-muted, #667085);
  --about-surface: #f8fafc;
  --about-surface-alt: #f8f9fd;
  --about-border: var(--color-border, #e5e7eb);
  --about-dark: #161b28;
  --about-accent: var(--color-primary, #2277ff);
}

.about-page main {
  background: #fff;
}


.about-page .section {
  padding: 96px 0 !important;
}

.about-page .section-heading {
  /* Match homepage .section-heading exactly (style.css line 142-146) */
}

.about-page .section-heading .eyebrow,
.about-page #hero .eyebrow {
  display: none;
  margin-bottom: 12px;
  color: var(--about-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-page .section-heading h2 {
  /* Match homepage h2 (style.css line 79-84) */
  margin-bottom: 11px;
}

.about-page .section-heading > p:last-child {
  color: var(--color-text-muted);
}

.about-page #hero.about-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden;
}

.about-page .about-hero-top {
  width: 100%;
  text-align: center;
  padding: 0 24px;
}

.about-page .about-hero-title {
  margin: 0 0 11px !important;
  color: #000000 !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

.about-page .about-hero-desc {
  max-width: 1000px;
  margin: 0 auto !important;
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

.about-page .about-hero-scroll-hint {
  position: absolute;
  z-index: 3;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 14px;
}

.about-page .about-hero-scroll-hint .scroll-hint-text {
  color: #000000;
  font-size:   18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-top: 0;
}

.about-page .about-scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #191c1d;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.about-page .about-scroll-btn:hover {
  background: #E5E7EB;
  transform: translateY(2px);
}

.about-page .about-scroll-btn i,
.about-page .about-scroll-btn svg {
  width: 20px;
  height: 20px;
}

.about-page .about-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.about-page .about-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.about-page #why-we-exist,
.about-page #compliance,
.about-page #beliefs,
.about-page #trust {
  background: #fff !important;
}

.about-page #what-comu-is,
.about-page #why-hardware,
.about-page #who-its-for,
.about-page #cta {
  background: #FFFFFF !important;
}

.about-page .about-split {
  gap: 64px !important;
}

.about-page #why-we-exist,
.about-page #what-comu-is,
.about-page #why-hardware,
.about-page #who-its-for {
  /* Removed: margin-left: 0 on .section-heading was breaking global margin: auto centering */
}

.about-page .timeline-card {
  padding: 32px;
  border: 0;
  border-radius: var(--rounded-block, 20px);
  background: var(--about-surface);
  box-shadow: none;
}

.about-page .timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 19px 0;
  border-bottom: 1px solid #e8ebef;
}

.about-page .timeline-step:last-child {
  border-bottom: 0;
}

.about-page .timeline-step[style] {
  margin-top: 8px;
  padding: 18px !important;
  border: 1px solid #c8d9f8 !important;
  border-radius: 14px !important;
  background: #f1f6ff !important;
}

.about-page .timeline-badge {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 5px 12px;
  border-radius: var(--rounded-pill, 999px);
  background: #e7e9ed;
  color: #555d69;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
}

.about-page .timeline-badge.active {
  background: var(--about-dark);
  color: #fff;
}

.about-page .about-origin-layout > div:last-child > p:first-child {
  color: var(--about-ink) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

.about-page .about-origin-layout > div:last-child > p:nth-child(2),
.about-page .about-positioning-layout > div:first-child > p {
  color: var(--about-muted) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.about-page .about-positioning-layout h3 {
  max-width: 520px;
  color: var(--about-ink) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
}

.about-page .morph-banner {
  padding: 24px 40px;
  border-radius: var(--rounded-block, 20px);
  background: var(--about-dark) !important;
  color: #fff;
  text-align: center;
}

.about-page .morph-banner > div:nth-child(2) {
  gap: 22px !important;
}

.about-page .morph-banner > div:nth-child(2) span:last-child {
  font-size: 48px !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em;
}

.about-page .morph-banner > div:last-child {
  border: none !important;
  background: none !important;
  color: #fff !important;
}

.about-page #compliance .section-heading,
.about-page #beliefs .section-heading,
.about-page #trust .section-heading {
  text-align: center !important;
}

.about-page .about-capabilities-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-page .about-capabilities-grid .compliance-card,
.about-page .about-beliefs-grid .compliance-card,
.about-page .about-trust-grid .compliance-card {
  border: 0 !important;
  border-radius: var(--rounded-block, 20px);
  background: var(--about-surface);
  box-shadow: none;
}

.about-page .about-capabilities-grid .compliance-card {
  min-height: 250px;
  padding: 32px;
  text-align: left;
}

.about-page .about-capabilities-grid .compliance-card i {
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 28px !important;
  color: var(--about-ink) !important;
  stroke-width: 1.7;
}

.about-page .about-capabilities-grid .compliance-card h3 {
  margin-bottom: 10px !important;
  color: var(--about-ink);
  font-size: 18px !important;
  line-height: 1.35;
}

.about-page .about-capabilities-grid .compliance-card span {
  color: var(--about-muted) !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.about-page .about-capabilities-grid .compliance-card > div:last-child {
  margin-top: 26px;
  padding-top: 14px !important;
  border-top-color: #e4e7eb !important;
  color: #4f5967 !important;
  line-height: 1.5;
}

.about-page #why-hardware .section-heading {
  max-width: 720px;
}

.about-page #why-hardware .media-quote-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 16px;
  max-width: 880px;
  margin: 32px auto 48px !important;
  padding: 28px 32px;
  border-radius: var(--rounded-block, 20px);
  background: #fff;
}

.about-page #why-hardware .media-quote-box .quote-text {
  color: var(--about-ink) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.about-page #why-hardware .media-quote-box > div:last-child {
  grid-column: 2;
  margin-top: 0 !important;
  color: var(--about-muted) !important;
  line-height: 1.6;
}

.about-page .comparison-table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--about-border);
  border-radius: var(--rounded-block, 20px);
  background: #fff;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
}

.about-page .comp-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
}

.about-page .comp-table th,
.about-page .comp-table td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--about-border);
  color: #4f5967;
  font-size: 14px;
  line-height: 1.55;
  vertical-align: top;
}

.about-page .comp-table th {
  background: #fff;
  color: var(--about-ink);
  font-weight: 600;
}



.about-page .comp-table tr:last-child td {
  border-bottom: 0;
}

.about-page .about-beliefs-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.about-page .about-beliefs-grid .compliance-card {
  min-height: 250px;
  padding: 34px;
  border-top: 0 !important;
  text-align: left;
}

.about-page .about-beliefs-grid .eyebrow {
  display: block;
  color: var(--about-muted) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.about-page .about-beliefs-grid h3 {
  color: var(--about-ink);
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.38 !important;
}

.about-page .about-beliefs-grid .compliance-card > div:last-child {
  margin-top: 24px;
  border-top-color: #e4e7eb !important;
  color: var(--about-muted) !important;
  line-height: 1.55;
}

.about-page .about-audience-layout > div:first-child {
  overflow: hidden;
  height: 420px !important;
  border-radius: var(--rounded-block, 20px) !important;
  box-shadow: none !important;
}

.about-page .about-audience-layout img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-page .about-audience-layout > div:last-child > p:first-child {
  color: var(--about-ink) !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
}

.about-page .about-audience-layout > div:last-child > p:nth-child(2) {
  color: var(--about-muted) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.about-page .who-pill {
  padding: 9px 14px;
  border: 1px solid #dfe3e8;
  border-radius: var(--rounded-pill, 999px);
  background: #fff;
  color: #4f5967;
  font-size: 13px;
  font-weight: 500;
}

.about-page .about-trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-page .about-trust-grid .compliance-card {
  padding: 42px 28px !important;
  text-align: center;
}

.about-page .about-trust-grid .compliance-card > div:first-child {
  color: var(--about-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em;
}

.about-page .about-trust-grid h3 {
  margin: 8px 0 6px !important;
  color: var(--about-ink);
  font-size: 16px !important;
}

.about-page .about-trust-grid span {
  color: var(--about-muted) !important;
  font-size: 13px !important;
  line-height: 1.5;
}

.about-page #cta {
  padding-bottom: 120px !important;
}

.about-page .about-cta-card {
  border-radius: 0 !important;
  background: transparent !important;
}

.about-page .about-cta-layout {
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
}

.about-page .about-cta-layout h2 {
  margin-bottom: 11px !important;
  color: #111827 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
}

.about-page .about-cta-layout > div:first-child > p:not(.eyebrow) {
  color: #4B5563 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.about-page .about-cta-layout .btn-primary {
  background: #111827 !important;
  color: #FFFFFF !important;
  box-shadow: none;
}

.about-page .about-cta-layout .btn-secondary {
  border-color: #D1D5DB !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  box-shadow: none;
}

.about-page .about-cta-layout > div:last-child {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--rounded-block, 20px) !important;
}

.about-page .about-cta-layout img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 900px) {
  .about-page .section {
    padding: 76px 0 !important;
  }

  .about-page .about-hero-layout,
  .about-page .about-split,
  .about-page .about-cta-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .about-page .about-capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .about-page .about-beliefs-grid,
  .about-page .about-trust-grid {
    grid-template-columns: 1fr !important;
  }

  .about-page .about-beliefs-grid .compliance-card {
    min-height: 0;
  }

  .about-page .about-audience-layout > div:first-child {
    height: 360px !important;
  }

  .about-page .about-cta-layout > div:last-child {
    order: -1;
  }
}

@media (max-width: 640px) {
  .about-page .container {
    width: min(100% - 48px, var(--max-width));
  }

  .about-page .section {
    padding: 64px 0 !important;
  }

  .about-page .about-hero-top {
  width: 100%;
  text-align: center;
  padding: 0 24px;
}

  .about-page .about-hero-title {
    font-size: 40px !important;
  }

  .about-page .about-hero-desc {
    font-size: 15px !important;
  }

  .about-page .about-hero-image {
    height: clamp(300px, 80vw, 480px);
  }

  .about-page .about-hero-scroll-hint {
    padding: 0 16px 24px;
  }

  .about-page .section-heading {
    margin-bottom: 18px !important;
  }

  .about-page .section-heading h2 {
    font-size: 32px;
  }

  .about-page .about-capabilities-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .about-page .about-capabilities-grid .compliance-card {
    min-height: 0;
    padding: 28px;
  }

  .about-page .timeline-card {
    padding: 24px;
  }

  .about-page .timeline-step {
    flex-direction: column;
    gap: 10px;
  }

  .about-page .timeline-badge {
    min-width: 0;
  }

  .about-page .morph-banner {
    padding: 42px 24px;
  }

  .about-page .morph-banner > div:nth-child(2) {
    gap: 12px !important;
  }

  .about-page .morph-banner > div:nth-child(2) span:first-child {
    font-size: 19px !important;
  }

  .about-page .morph-banner > div:nth-child(2) span:last-child {
    font-size: 36px !important;
  }

  .about-page #why-hardware .media-quote-box {
    padding: 24px 18px;
  }

  .about-page #why-hardware .media-quote-box .quote-text {
    font-size: 17px !important;
  }

  .about-page .about-beliefs-grid,
  .about-page .about-trust-grid {
    display: grid !important;
    gap: 14px !important;
  }

  .about-page .about-beliefs-grid .compliance-card,
  .about-page .about-trust-grid .compliance-card {
    min-width: 0 !important;
    padding: 28px !important;
  }

  .about-page .about-audience-layout > div:first-child {
    height: 300px !important;
  }

  .about-page .about-cta-card {
    padding: 0 !important;
  }

  .about-page #cta {
    padding-bottom: 56px !important;
  }


}

/* 4K ultra-wide screen adjustments (>= 2560px) */
@media (min-width: 2560px) {
  .about-page .about-hero-top {
  width: 100%;
  text-align: center;
  padding: 0 24px;
}

  .about-page .about-hero-title {
    font-size: 88px !important;
  }

  .about-page .about-hero-desc {
    max-width: 760px;
    font-size: 18px !important;
  }

  .about-page .about-hero-image {
    height: 800px;
  }

  .about-page .about-hero-scroll-hint {
    max-width: 1600px;
  }
}



.about-page #hero.about-hero > .container {
  position: absolute;
  z-index: 2;
  top: calc(70% - 110px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1280px;
}

/* Hero Action Buttons */
.about-btn-dark {
  background-color: #232323;
  color: #fff !important;
  border: none;
  border-radius: 24px;
  height: 48px;
  padding: 0 32px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  text-decoration: none;
}
.about-btn-dark:hover {
  background-color: #000;
}

.about-btn-light {
  background-color: transparent;
  color: #18181b !important;
  border: 1px solid #18181b;
  border-radius: 24px;
  height: 48px;
  padding: 0 32px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-decoration: none;
  box-sizing: border-box;
}
.about-btn-light:hover {
  background-color: #e4e4e7;
}

/* Timeline Cards */
.about-timeline-card {
  background-color: #F9FAFB;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  cursor: pointer;
}

.about-timeline-card .card-icon {
  background: #F3F4F6;
  color: #111827;
  border: 1px solid #E5E7EB;
  transition: all 0.3s ease;
}

.about-timeline-card h4,
.about-timeline-card h4 span,
.about-timeline-card p {
  transition: all 0.3s ease;
}

.about-timeline-card:hover {
  background-color: #F0F6FF;
  border: 1px solid #93C5FD;
  box-shadow: 0 4px 12px rgba(34, 119, 255, 0.1);
}

.about-timeline-card:hover h4,
.about-timeline-card:hover h4 span {
  color: #2277FF !important;
}

.about-timeline-card:hover p {
  color: #3B82F6 !important;
}

.about-timeline-card:hover .card-icon {
  background: #EFF6FF;
  color: #2277FF;
  border: 1px solid #BFDBFE;
}

.timeline-node {
  position: absolute;
  left: -24px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid #93C5FD;
  transform: translate(-50%, -50%);
  z-index: 4;
}






/* Brand Shift Animation */
.brand-shift-old-mask {
  animation: wipeOutLeftToRight 8s linear infinite;
}

.brand-shift-new-mask {
  animation: wipeInLeftToRight 8s linear infinite;
}

.laser-beam {
  position: absolute;
  top: 10%;
  left: 0;
  width: 2px;
  height: 80%;
  background: linear-gradient(to bottom, transparent, #FFFFFF, transparent);
  box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.8), 0 0 20px 4px rgba(255, 255, 255, 0.6);
  z-index: 10;
  animation: laserSweep 8s linear infinite;
}

/* Letter Edge Sparks */
.letter-spark-group {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 15;
}

.l-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

/* Micro Spark Styles */
.l-spark.c1, .l-spark.o1, .l-spark.m1, .l-spark.u1 { width: 1.5px; height: 1.5px; background: #fff; box-shadow: 0 0 8px 1.5px #60A5FA; }
.l-spark.c2, .l-spark.o2, .l-spark.m2, .l-spark.u2 { width: 3.8px; height: 3.8px; background: #BFDBFE; box-shadow: 0 0 9px 2px #3B82F6, 0 0 15px 4.5px rgba(59,130,246,0.6); }
.l-spark.c3, .l-spark.o3, .l-spark.m3, .l-spark.u3 { width: 0.8px; height: 0.8px; background: #fff; box-shadow: 0 0 6px 1.5px #38BDF8; }
.l-spark.c4, .l-spark.o4, .l-spark.m4, .l-spark.u4 { width: 4.5px; height: 1.5px; border-radius: 1px; background: #E0F2FE; box-shadow: 0 0 8px 1.5px #fff, 0 0 14px 4px rgba(56,189,248,0.8); }
.l-spark.c5, .l-spark.o5, .l-spark.u5 { width: 2.6px; height: 2.6px; background: #93C5FD; box-shadow: 0 0 7px 1.5px #93C5FD, 0 0 11px 3px rgba(147,197,253,0.6); }
.l-spark.o6, .l-spark.u6 { width: 1.5px; height: 6px; border-radius: 1px; background: #fff; box-shadow: 0 0 9px 1.5px #3B82F6, 0 0 12px 3px rgba(59,130,246,0.5); }
.l-spark.o7, .l-spark.u7 { width: 1.1px; height: 1.1px; background: #DBEAFE; box-shadow: 0 0 6px 1.5px #fff; }
.l-spark.u8 { width: 3.4px; height: 3.4px; background: #93C5FD; box-shadow: 0 0 10px 2px #2563EB, 0 0 16px 4.5px rgba(37,99,235,0.6); }

/* Timed Gravity Animations (Matched to Laser Position) */
.c-sparks .c1 { animation: sparkAnimC1 8s infinite cubic-bezier(0.1, 0.9, 0.2, 1); }
.c-sparks .c2 { animation: sparkAnimC2 8s infinite ease-out; }
.c-sparks .c3 { animation: sparkAnimC3 8s infinite linear; }
.c-sparks .c4 { animation: sparkAnimC4 8s infinite ease-in-out; }
.c-sparks .c5 { animation: sparkAnimC5 8s infinite ease-out; }

.o-sparks .o1 { animation: sparkAnimO1 8s infinite ease-out; }
.o-sparks .o2 { animation: sparkAnimO2 8s infinite cubic-bezier(0.1, 0.9, 0.2, 1); }
.o-sparks .o3 { animation: sparkAnimO3 8s infinite linear; }
.o-sparks .o4 { animation: sparkAnimO4 8s infinite ease-out; }
.o-sparks .o5 { animation: sparkAnimO5 8s infinite ease-in-out; }
.o-sparks .o6 { animation: sparkAnimO6 8s infinite ease-out; }
.o-sparks .o7 { animation: sparkAnimO7 8s infinite cubic-bezier(0, 0.5, 0.5, 1); }

.m-sparks .m1 { animation: sparkAnimM1 8s infinite ease-out; }
.m-sparks .m2 { animation: sparkAnimM2 8s infinite linear; }
.m-sparks .m3 { animation: sparkAnimM3 8s infinite ease-out; }
.m-sparks .m4 { animation: sparkAnimM4 8s infinite cubic-bezier(0.1, 0.9, 0.2, 1); }

.u-sparks .u1 { animation: sparkAnimU1 8s infinite ease-out; }
.u-sparks .u2 { animation: sparkAnimU2 8s infinite cubic-bezier(0, 0.5, 0.5, 1); }
.u-sparks .u3 { animation: sparkAnimU3 8s infinite linear; }
.u-sparks .u4 { animation: sparkAnimU4 8s infinite ease-out; }
.u-sparks .u5 { animation: sparkAnimU5 8s infinite ease-in-out; }
.u-sparks .u6 { animation: sparkAnimU6 8s infinite cubic-bezier(0.1, 0.9, 0.2, 1); }
.u-sparks .u7 { animation: sparkAnimU7 8s infinite linear; }
.u-sparks .u8 { animation: sparkAnimU8 8s infinite ease-out; }

/* --- C Sparks (5 Sparks, trigger @ 21.5%) --- */
@keyframes sparkAnimC1 { 
  0%, 21% { opacity: 0; transform: translate(0,0) scale(1); } 
  21.5% { opacity: 1; transform: translate(0,0) scale(1); } 
  28%, 100% { opacity: 0; transform: translate(-80px, -60px) scale(0); } 
}
@keyframes sparkAnimC2 { 
  0%, 21% { opacity: 0; transform: translate(0,0) scale(1); } 
  21.5% { opacity: 1; transform: translate(0,0) scale(2); } 
  32%, 100% { opacity: 0; transform: translate(-30px, 40px) scale(0); } 
}
@keyframes sparkAnimC3 { 
  0%, 21% { opacity: 0; transform: translate(0,0) scale(1); } 
  21.5% { opacity: 1; transform: translate(0,0) scale(0.8); } 
  29%, 100% { opacity: 0; transform: translate(10px, -90px) scale(0); } 
}
@keyframes sparkAnimC4 { 
  0%, 21% { opacity: 0; transform: translate(0,0) scale(1) rotate(0deg); } 
  21.5% { opacity: 1; transform: translate(0,0) scale(1.5) rotate(0deg); } 
  33%, 100% { opacity: 0; transform: translate(-110px, 10px) scale(0) rotate(180deg); } 
}
@keyframes sparkAnimC5 { 
  0%, 21% { opacity: 0; transform: translate(0,0) scale(1); } 
  21.5% { opacity: 1; transform: translate(0,0) scale(2.5); } 
  27%, 100% { opacity: 0; transform: translate(-10px, 80px) scale(0); } 
}

/* --- O Sparks (7 Sparks, trigger @ 26%) --- */
@keyframes sparkAnimO1 { 
  0%, 25.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  26% { opacity: 1; transform: translate(0,0) scale(1.5); } 
  34%, 100% { opacity: 0; transform: translate(70px, -80px) scale(0); } 
}
@keyframes sparkAnimO2 { 
  0%, 25.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  26% { opacity: 1; transform: translate(0,0) scale(2.5); } 
  36%, 100% { opacity: 0; transform: translate(-60px, 70px) scale(0); } 
}
@keyframes sparkAnimO3 { 
  0%, 25.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  26% { opacity: 1; transform: translate(0,0) scale(0.5); } 
  32%, 100% { opacity: 0; transform: translate(120px, -10px) scale(0); } 
}
@keyframes sparkAnimO4 { 
  0%, 25.5% { opacity: 0; transform: translate(0,0) scale(1) rotate(0deg); } 
  26% { opacity: 1; transform: translate(0,0) scale(2) rotate(0deg); } 
  38%, 100% { opacity: 0; transform: translate(0px, -100px) scale(0) rotate(-90deg); } 
}
@keyframes sparkAnimO5 { 
  0%, 25.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  26% { opacity: 1; transform: translate(0,0) scale(1); } 
  33%, 100% { opacity: 0; transform: translate(80px, 60px) scale(0); } 
}
@keyframes sparkAnimO6 { 
  0%, 25.5% { opacity: 0; transform: translate(0,0) scale(1) rotate(0deg); } 
  26% { opacity: 1; transform: translate(0,0) scale(1.5) rotate(0deg); } 
  37%, 100% { opacity: 0; transform: translate(-70px, -40px) scale(0) rotate(120deg); } 
}
@keyframes sparkAnimO7 { 
  0%, 25.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  26% { opacity: 1; transform: translate(0,0) scale(3); } 
  31%, 100% { opacity: 0; transform: translate(20px, 20px) scale(0); } 
}

/* --- M Sparks (4 Sparks, trigger @ 30%) --- */
@keyframes sparkAnimM1 { 
  0%, 29.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  30% { opacity: 1; transform: translate(0,0) scale(2.2); } 
  35%, 100% { opacity: 0; transform: translate(-90px, -90px) scale(0); } 
}
@keyframes sparkAnimM2 { 
  0%, 29.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  30% { opacity: 1; transform: translate(0,0) scale(0.6); } 
  36%, 100% { opacity: 0; transform: translate(90px, 90px) scale(0); } 
}
@keyframes sparkAnimM3 { 
  0%, 29.5% { opacity: 0; transform: translate(0,0) scale(1); } 
  30% { opacity: 1; transform: translate(0,0) scale(1); } 
  41%, 100% { opacity: 0; transform: translate(30px, -30px) scale(0); } 
}
@keyframes sparkAnimM4 { 
  0%, 29.5% { opacity: 0; transform: translate(0,0) scale(1) rotate(0deg); } 
  30% { opacity: 1; transform: translate(0,0) scale(1.5) rotate(0deg); } 
  42%, 100% { opacity: 0; transform: translate(-30px, 30px) scale(0) rotate(360deg); } 
}

/* --- U Sparks (8 Sparks, trigger @ 33.5%) --- */
@keyframes sparkAnimU1 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(2.8); } 
  40%, 100% { opacity: 0; transform: translate(-20px, -130px) scale(0); } 
}
@keyframes sparkAnimU2 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(2); } 
  44%, 100% { opacity: 0; transform: translate(140px, -20px) scale(0); } 
}
@keyframes sparkAnimU3 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(0.5); } 
  39%, 100% { opacity: 0; transform: translate(40px, -50px) scale(0); } 
}
@keyframes sparkAnimU4 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1) rotate(0deg); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(1.2) rotate(0deg); } 
  41%, 100% { opacity: 0; transform: translate(50px, 50px) scale(0) rotate(-45deg); } 
}
@keyframes sparkAnimU5 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(2.5); } 
  45%, 100% { opacity: 0; transform: translate(10px, 120px) scale(0); } 
}
@keyframes sparkAnimU6 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1) rotate(0deg); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(1.8) rotate(0deg); } 
  38%, 100% { opacity: 0; transform: translate(110px, 20px) scale(0) rotate(180deg); } 
}
@keyframes sparkAnimU7 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(1); } 
  40%, 100% { opacity: 0; transform: translate(80px, -100px) scale(0); } 
}
@keyframes sparkAnimU8 { 
  0%, 33% { opacity: 0; transform: translate(0,0) scale(1); } 
  33.5% { opacity: 1; transform: translate(0,0) scale(2.2); } 
  46%, 100% { opacity: 0; transform: translate(-40px, 10px) scale(0); } 
}

/* Base Sweeping Keyframes */
@keyframes wipeOutLeftToRight {
  0%, 18.1% { clip-path: inset(0 0 0 0); opacity: 1; }
  36.9% { clip-path: inset(0 0 0 100%); opacity: 1; }
  37%, 100% { clip-path: inset(0 0 0 100%); opacity: 1; }
}

@keyframes wipeInLeftToRight {
  0%, 20.1% { clip-path: inset(0 100% 0 0); opacity: 1; }
  34.9%, 100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes laserSweep {
  0%, 14.9% { left: 0%; opacity: 0; }
  15% { opacity: 1; left: 0%; }
  40% { left: 100%; opacity: 1; }
  40.1%, 100% { left: 100%; opacity: 0; }
}

/* --- Mobile Layout Overrides --- */
@media (max-width: 900px) {
  .about-page .resp-grid-stack {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  .about-page .resp-grid-stack-card {
    gap: 16px !important;
  }
  
  .about-page .comparison-table-wrap {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .about-page .comp-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  .about-page .comp-table th,
  .about-page .comp-table td {
    padding: 12px 6px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .about-page .comp-table td > div {
    gap: 6px !important;
  }
  
  .about-page .comp-table td > div i {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
  }
  
  .about-page #why-hardware .resp-grid-stack {
    gap: 24px !important;
    margin-bottom: 32px !important;
  }
  
  .about-page #why-hardware .resp-grid-stack > div:first-child > p {
    margin-bottom: 30px !important;
  }
  
  .about-page #what-comu-is .section-heading {
    margin-bottom: 34px !important;
  }
  
  .about-page #what-comu-is .resp-grid-stack {
    gap: 20px !important;
  }
  
  .about-page #what-comu-is .resp-grid-stack > div:first-child > p {
    margin-bottom: 12px !important;
  }
  
  .about-page .section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .about-page #trust {
    padding: 56px 0 34px !important;
  }

  .about-page #cta {
    padding-top: 34px !important;
    padding-bottom: 56px !important;
  }
  
  .about-page .beliefs-container {
    padding: 32px 24px !important;
    background: url('../images/about/_移动端.jpg') center bottom / cover no-repeat !important;
    aspect-ratio: 6985 / 10208 !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: center !important;
    background-color: #F1F6FF !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 16px !important; /* Overrides the 32px inline gap to keep text compact at top */
  }

  .about-page .beliefs-container > div {
    max-width: 100% !important;
    margin: 0 auto 6px !important;
    text-align: center !important;
  }

  .about-page .beliefs-container h3 {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .about-page .beliefs-container p.eyebrow {
    margin-bottom: 2px !important;
    font-size: 10px !important;
  }
  
  .about-page #why-we-exist .container {
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }

  .about-page .about-timeline-card {
    padding: 16px 20px !important;
  }
  
  .about-page .about-timeline-wrapper .resp-grid-stack {
    gap: 12px !important;
  }
  
  .about-page .about-timeline-card > div:first-child {
    margin-bottom: 8px !important;
  }
  
  .about-page .about-timeline-card .card-icon {
    width: 32px !important;
    height: 32px !important;
  }
  
  .about-page .about-timeline-card .card-icon i {
    width: 16px !important;
    height: 16px !important;
  }
  
  .about-page .about-capabilities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 12px !important;
  }
  
  /* Unify Mobile Typography */
  .about-page h2,
  .about-page .section-heading h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
    letter-spacing: 0 !important;
  }
  
  .about-page h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  
  .about-page .section-heading > p:last-child,
  .about-page p[style*="font-size: 16px"] {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  
  .about-page .about-hero-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  .about-page .about-hero-title {
    font-size: 32px !important;
    letter-spacing: -0.5px !important;
  }
  
  .about-page .about-btn-dark,
  .about-page .about-btn-light {
    white-space: nowrap !important;
  }
  
  /* Section spacing overrides */
  .about-page .audience-list {
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px !important;
  }

  .about-page #why-we-exist {
    padding-top: 0 !important;
    padding-bottom: 30px !important;
  }

  .about-page #what-comu-is {
    padding-bottom: 40px !important;
  }
  
  .about-page #compliance {
    padding-top: 40px !important;
  }
  
  .about-page #who-its-for {
    padding-bottom: 30px !important;
  }
  
  .about-page #trust {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  
  .about-page #cta {
    padding-top: 28px !important;
  }

  /* Mobile Hero Flow Layout - Move content below image without overlap */
  .about-page #hero.about-hero {
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 0 !important;
    position: relative !important;
  }

  .about-page .about-hero-image {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: clamp(200px, 55vw, 270px) !important;
    order: 1 !important;
  }

  .about-page #hero.about-hero > .container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    order: 2 !important;
    margin-top: 20px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .about-page .about-hero-actions {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    order: 3 !important;
    margin-top: 24px !important;
  }

  .about-page .about-hero-scroll-hint {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    order: 4 !important;
    margin-top: 14px !important;
  }
}