:root {
  --platform-ink: #101827;
  --platform-muted: #526073;
  --platform-paper: #ffffff;
  --platform-wash: #f5f8fc;
  /* ONE accent: brand blue. "cyan"/"coral" stay as names only. */
  --platform-violet: #009fe3;
  --platform-violet-dark: #007ab8;
  --platform-cyan: #4cc4f0;
  --platform-coral: #009fe3;
  --platform-lime: #4cc4f0;
  --platform-line: #e5ebf2;
  --platform-shadow:
    14px 14px 30px rgba(166, 177, 192, 0.24),
    -14px -14px 30px rgba(255, 255, 255, 0.96);
  --platform-inset:
    inset 6px 6px 12px rgba(166, 177, 192, 0.22),
    inset -6px -6px 12px rgba(255, 255, 255, 0.95);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.platform-page {
  margin: 0;
  color: var(--platform-ink);
  background: var(--platform-paper);
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.platform-page::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 8%, rgba(0, 159, 227, 0.08), transparent 28rem),
    radial-gradient(circle at 90% 28%, rgba(0, 159, 227, 0.06), transparent 26rem),
    radial-gradient(circle at 78% 82%, rgba(0, 159, 227, 0.05), transparent 22rem);
}
.platform-page h1,
.platform-page h2,
.platform-page h3,
.platform-page h4 { margin-top: 0; font-family: "Outfit", system-ui, sans-serif; }
.platform-page a:not(.platform-button):not(.button) { color: inherit; }
.platform-page img { display: block; max-width: 100%; }
/* Stays 1180px up to ~1640px viewports, then grows with the screen so wide
   displays don't leave the page stranded in a narrow centre column. */
.platform-shell { width: min(clamp(1180px, 72vw, 1620px), calc(100% - 40px)); margin-inline: auto; }
.platform-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 19px;
  border: 1px solid var(--platform-line);
  border-radius: 14px;
  background: var(--platform-paper);
  color: var(--platform-ink);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 7px 7px 16px rgba(166, 177, 192, 0.2), -7px -7px 16px rgba(255, 255, 255, 0.94);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.platform-button:hover { border-color: rgba(0, 159, 227, 0.45); transform: translateY(-2px); }
.platform-button:active { box-shadow: var(--platform-inset); transform: translateY(0); }
.platform-page .platform-button.primary { border-color: transparent; background: linear-gradient(105deg, var(--platform-violet), var(--platform-cyan)); color: #fff; box-shadow: 0 12px 30px rgba(0, 159, 227, 0.23); }
.platform-page .platform-button.primary:hover { background: linear-gradient(105deg, var(--platform-violet-dark), #007ab8); box-shadow: 0 15px 34px rgba(0, 159, 227, 0.3); }
.platform-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--platform-violet-dark); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.platform-kicker::before { width: 28px; height: 3px; border-radius: 99px; content: ""; background: var(--platform-coral); }
.platform-hero { position: relative; overflow: hidden; padding: 64px 0 80px; }
.platform-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, .85fr); align-items: center; gap: 64px; }
.platform-display { max-width: 740px; margin-bottom: 28px; font-size: clamp(3.4rem, 5.7vw, 5.8rem); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.platform-display .accent { position: relative; color: var(--platform-violet); }
.platform-display .accent::after { position: absolute; right: -2px; bottom: -5px; left: 5px; height: 8px; border-radius: 50%; content: ""; background: var(--platform-lime); opacity: 0.8; transform: rotate(-2deg); }
.platform-lede { max-width: 650px; margin: 0; color: var(--platform-muted); font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.82; text-wrap: pretty; }
.platform-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.platform-art-card { position: relative; overflow: hidden; min-height: 0; aspect-ratio: 16 / 13; border: 1px solid var(--platform-line); border-radius: 30px; background: var(--platform-paper); box-shadow: var(--platform-shadow); }
.platform-woman-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.platform-woman-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; background: var(--platform-paper); object-fit: cover; object-position: right center; }
.is-reduced-motion .platform-woman-video { visibility: hidden; }
.platform-section { padding: 88px 0; }
.platform-section.tint { border-block: 1px solid var(--platform-line); background: var(--platform-wash); }
.platform-section-heading { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(300px, 0.55fr); align-items: end; gap: 48px; margin-bottom: 42px; }
.platform-title { margin-bottom: 0; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -0.055em; }
.platform-copy { margin: 0; color: var(--platform-muted); font-size: 1.02rem; line-height: 1.75; }
.platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.platform-card { position: relative; overflow: hidden; padding: 28px; border: 1px solid var(--platform-line); border-radius: 25px; background: var(--platform-wash); box-shadow: var(--platform-shadow); }
.platform-card:nth-child(3n + 1) { border-top: 4px solid var(--platform-violet); }
.platform-card:nth-child(3n + 2) { border-top: 4px solid var(--platform-violet); }
.platform-card:nth-child(3n + 3) { border-top: 4px solid var(--platform-violet); }
.platform-card h3 { margin-bottom: 12px; font-size: 1.25rem; }
.platform-card p { margin: 0; color: var(--platform-muted); line-height: 1.7; }
.platform-card-link { display: inline-flex; margin-top: 20px; color: var(--platform-violet-dark) !important; font-weight: 850; text-decoration: none; }
.platform-index { margin-bottom: 20px; color: var(--platform-violet); font-family: "Outfit", sans-serif; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.12em; }
.platform-story { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); align-items: stretch; gap: 22px; }
.platform-story-panel { min-height: 420px; padding: 42px; border-radius: 30px; }
.platform-story-panel.visual { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--platform-line); background: var(--platform-wash); color: var(--platform-ink); box-shadow: var(--platform-shadow); }
.platform-story-media { position: relative; overflow: hidden; width: 100%; height: 100%; min-height: 336px; border-radius: 20px; background: var(--platform-paper); box-shadow: var(--platform-inset); }
.platform-story-panel.copy { border: 1px solid var(--platform-line); background: var(--platform-wash); box-shadow: var(--platform-shadow); }
.platform-story-panel.copy p { color: var(--platform-muted); font-size: 1.05rem; line-height: 1.8; }
.platform-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.platform-search { flex: 1 1 340px; min-height: 50px; padding: 0 18px; border: 1px solid var(--platform-line); border-radius: 15px; background: var(--platform-wash); color: var(--platform-ink); font: inherit; outline: none; box-shadow: var(--platform-inset); }
.platform-search:focus { border-color: var(--platform-violet); box-shadow: 0 0 0 4px rgba(0,159,227,.1); }
.platform-filter { min-height: 48px; padding: 0 16px; border: 1px solid var(--platform-line); border-radius: 999px; background: var(--platform-wash); color: var(--platform-muted); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; box-shadow: 6px 6px 13px rgba(166,177,192,.2), -6px -6px 13px rgba(255,255,255,.95); }
.platform-filter[aria-pressed="true"] { border-color: transparent; background: var(--platform-wash); color: var(--platform-violet-dark); box-shadow: var(--platform-inset); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card { display: flex; min-height: 100%; overflow: hidden; flex-direction: column; border: 1px solid var(--platform-line); border-radius: 24px; background: var(--platform-wash); box-shadow: var(--platform-shadow); transition: transform 180ms ease, box-shadow 180ms ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 18px 18px 38px rgba(166,177,192,.28), -18px -18px 38px rgba(255,255,255,.98); }
.blog-card[hidden] { display: none; }
.blog-card-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--platform-wash); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 260ms ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.025); }
.blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.blog-card-tag { color: var(--platform-violet-dark); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.blog-card h3 { margin: 10px 0 11px; font-size: 1.18rem; line-height: 1.35; }
.blog-card h3 a { text-decoration: none; }
.blog-card p { margin: 0; color: var(--platform-muted); font-size: .92rem; line-height: 1.65; }
.blog-card .blog-card-summary { min-height: 4.55rem; }
.blog-card .blog-card-meta { margin-top: 15px; color: #77718b; font-size: .77rem; font-weight: 650; }
.blog-card .platform-card-link { margin-top: auto; padding-top: 20px; }
.blog-empty { margin-top: 24px; padding: 28px; border: 1px dashed var(--platform-line); border-radius: 18px; text-align: center; }
.store-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); gap: 20px; padding: 34px; border-radius: 30px; background: linear-gradient(135deg, #04324a, #009fe3 58%, #4cc4f0); color: #fff; box-shadow: var(--platform-shadow); }
.store-feature p { color: rgba(255,255,255,.78); line-height: 1.7; }
.store-mark { display: grid; min-height: 230px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 23px; background: rgba(255,255,255,.1); font-family: "Outfit", sans-serif; font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; }
.platform-page .store-button--primary { border-color: transparent; background: linear-gradient(105deg, var(--platform-violet), var(--platform-cyan)); color: #fff; box-shadow: 0 12px 30px rgba(7,143,236,.3); }
.platform-page .store-button--secondary { border-color: rgba(255,255,255,.72); background: #fff; color: var(--platform-ink); box-shadow: 8px 8px 20px rgba(15,24,39,.22), -5px -5px 16px rgba(255,255,255,.22); }
.product-card-v2 { display: flex; min-height: 310px; flex-direction: column; }
.product-icon { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 25px; border-radius: 15px; background: var(--platform-wash); color: var(--platform-violet); font-weight: 900; }
.product-price { margin-top: auto; padding-top: 20px; color: var(--platform-ink) !important; font-weight: 850; }
.platform-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; padding: 40px; border: 1px solid var(--platform-line); border-radius: 30px; background: var(--platform-wash); box-shadow: var(--platform-shadow); }
.platform-cta h2 { margin-bottom: 9px; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; }
.platform-cta p { margin: 0; color: var(--platform-muted); }
.platform-footer { margin-top: 60px; border-top: 1px solid var(--platform-line); background: #12233b; color: #fff; }
.platform-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-block: 60px; }
.platform-footer-logo { width: 180px; padding: 8px 10px; border-radius: 10px; background: #fff; }
.platform-footer p { max-width: 320px; color: rgba(255,255,255,.65); line-height: 1.7; }
.platform-footer h4 { margin-bottom: 18px; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.platform-footer a { display: block; margin: 10px 0; color: rgba(255,255,255,.7); text-decoration: none; }
.platform-footer a:hover { color: #fff; }
.platform-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); font-size: .8rem; }
.platform-social { display: flex; flex-wrap: wrap; gap: 18px; }
.platform-social a { margin: 0; }
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .platform-hero-grid, .platform-section-heading, .platform-story, .store-feature { grid-template-columns: 1fr; }
  .platform-hero { padding: 52px 0 68px; }
  .platform-hero-grid { gap: 40px; }
  .platform-art-card { min-height: 0; aspect-ratio: 4 / 3; }
  .platform-story-panel.visual { min-height: 380px; }
  .platform-story-media { min-height: 0; aspect-ratio: 4 / 3; }
  .platform-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* 20px gutter, same as the header shell, so nav and content edges align. */
  .platform-shell { width: min(100% - 40px, 1180px); }
  .platform-hero { padding: 34px 0 56px; }
  .platform-hero-grid { gap: 32px; }
  .platform-display { margin-bottom: 22px; font-size: clamp(3rem, 12vw, 3.8rem); line-height: 1.04; letter-spacing: -0.035em; }
  .platform-lede { font-size: 1rem; line-height: 1.72; }
  .platform-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
  .platform-button { width: 100%; }
  .platform-grid, .blog-grid { grid-template-columns: 1fr; }
  .platform-section { padding: 66px 0; }
  .platform-story-panel, .platform-cta, .store-feature { padding: 26px; }
  .platform-story-panel.visual { min-height: 0; padding: 12px; }
  .platform-cta { grid-template-columns: 1fr; }
  .platform-footer-grid { grid-template-columns: 1fr; }
  .platform-footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}