/* Apotsa site chrome for this standalone page — GENERATED, do not edit by
   hand. The `.h2` rules below are copied verbatim from
   APOTSA/apps/hub/src/home.css (the styles SiteNav/SiteFooter use on
   www.apotsa.com), so the nav and footer render identically. */

/* src/fonts.css */
:root {
  --font-inter: 'Inter Variable', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  --font-sora: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', sans-serif;
  --font-questrial: 'Inter Variable', 'Inter', sans-serif;
  --font-dm-sans-h2: 'DM Sans Variable', 'DM Sans', sans-serif;
  --font-dm-mono: 'DM Mono', monospace;
}

/* Tailwind preflight subset the main site applies under the chrome */
.h2 *, .h2 *::before, .h2 *::after { border: 0 solid; }
.h2 h5, .h2 p, .h2 ul { margin: 0; }
.h2 h5 { font-size: inherit; font-weight: inherit; }
.h2 ul { list-style: none; padding: 0; }
.h2 svg { display: block; vertical-align: middle; }
.h2 button { padding: 0; line-height: inherit; }

/* ---- home.css: tokens + base ---- */
.h2 {
  /* design tokens (from the prototype's :root) */
  --ink: #101522;
  --ink-2: #48515F;
  --muted: #5F6677;
  --soft: #6B6560;
  --whisper: #B0ABA6;
  --line: rgba(21, 28, 42, 0.09);
  --line-2: #E8E4E0;
  --bg: #ffffff;
  --bg-cream: #F6F5F3;
  --bg-paper: #FBFAF8;
  --blue: #1747FF;
  --blue-text: #3B82F6;
  --indigo: #2D2DF1;
  --green: #04BC2C;
  --orange: #F58F00;
  --peach: rgba(238, 205, 187, 0.53);
  --gold: #F0AE3C;
  --gold-deep: #B9791A;
  --navy: #0C1420;
  --navy-2: #16233350;
  --cyan-panel: #E1F0F4;
  --cyan-panel-line: rgba(12, 20, 32, 0.1);
  --shadow-soft: 0 24px 80px rgba(16, 21, 34, 0.08);
  --shadow-card: 0 7px 26.9px 2px rgba(173, 173, 173, 0.25);
  --shadow-ring: 0 10px 46px 20px rgba(157, 190, 255, 0.53);

  background: #fff;
  color: var(--ink);
  font-family: var(--font-questrial), system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
.h2,
.h2 * { box-sizing: border-box; }
.h2 a { color: inherit; text-decoration: none; }
.h2 button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

.h2 .sora { font-family: var(--font-sora), sans-serif; }
.h2 .dm { font-family: var(--font-dm-sans-h2), sans-serif; }
.h2 .q { font-family: var(--font-questrial), sans-serif; }

/* ---- home.css: nav, mega menu, apps menu ---- */
/* ============ NAV ============ */
.h2 .nav {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(1400px, calc(100% - 48px));
  height: 68px; display: flex; align-items: center;
  border-radius: 22px;
  background: rgba(251, 250, 248, 0.78);
  border: 1px solid rgba(21, 28, 42, 0.06);
  box-shadow: 0 10px 30px rgba(16, 21, 34, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h2 .nav.is-scrolled {
  background: rgba(251, 250, 248, 0.94);
  border-color: rgba(21, 28, 42, 0.08);
  box-shadow: 0 10px 30px rgba(16, 21, 34, 0.14);
}
/* hides on scroll-down, slides back in on scroll-up (see navHidden in
   HomePage.tsx) — translateY stacks on top of the existing translateX so
   it keeps its horizontal centering while hidden. */
.h2 .nav.is-hidden { transform: translateX(-50%) translateY(-140%); }
@media (prefers-reduced-motion: reduce) {
  .h2 .nav { transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
  .h2 .nav.is-hidden { transform: translateX(-50%); }
}
.h2 .nav .inner {
  width: 100%; max-width: 1516px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.h2 .brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sora), sans-serif; font-weight: 600;
  font-size: 20px; letter-spacing: -0.02em; color: var(--indigo); line-height: 1;
}
.h2 .brand-mark { width: 22px; height: 18px; flex: 0 0 auto; display: inline-block; }
.h2 .nav-menu { display: flex; gap: 28px; align-items: center; }
.h2 .nav-menu > a, .h2 .nav-menu > .nav-link-btn, .h2 .nav-item > a {
  position: relative; color: var(--soft); font-size: 18px;
  transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 6px;
}
.h2 .nav-menu > a::after, .h2 .nav-menu > .nav-link-btn::after, .h2 .nav-item > a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: var(--ink);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h2 .nav-menu > a:hover, .h2 .nav-menu > .nav-link-btn:hover, .h2 .nav-item:hover > a, .h2 .nav-item:focus-within > a,
.h2 .nav-menu > a.is-active, .h2 .nav-item > a.is-active { color: var(--ink); }
.h2 .nav-menu > a:hover::after, .h2 .nav-menu > .nav-link-btn:hover::after, .h2 .nav-item:hover > a::after,
.h2 .nav-menu > a.is-active::after, .h2 .nav-item > a.is-active::after { width: 100%; }
.h2 .nav-menu .caret {
  display: inline-block; width: 8px; height: 8px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(2px, -2px);
  transition: transform 0.25s ease; margin-left: 2px;
}
.h2 .nav-item { position: relative; }
.h2 .nav-item:hover .caret { transform: rotate(135deg) translate(-2px, 2px); }

/* ============ MEGA MENU ============ */
.h2 .mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(880px, calc(100vw - 80px));
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(16, 21, 34, 0.12), 0 0 0 1px rgba(21, 28, 42, 0.05);
  padding: 28px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 60;
}
.h2 .nav-item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; display: none;
}
.h2 .nav-item:hover::after, .h2 .nav-item:focus-within::after { display: block; }
.h2 .nav-item:hover .mega, .h2 .nav-item:focus-within .mega {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
/* Products mega menu spans the full floating nav bar instead of an 880px
   panel centred on "Products". `position: fixed` resolves against .nav
   (it has a transform, which makes it the containing block for fixed
   descendants), so the panel lines up with the bar's own edges while
   .nav-item stays `relative` for the hover bridge. The panel now starts
   below the whole bar rather than just below the link, so the bridge is
   tall enough to carry the cursor from the link down into the panel
   without the menu closing on the way. */
.h2 .nav-item.has-mega .mega {
  position: fixed; left: 0; right: 0; width: auto; top: calc(100% + 12px);
  transform: translateY(-6px);
  border-radius: 22px;
}
.h2 .nav-item.has-mega::after { height: 48px; }
.h2 .nav-item.has-mega:hover .mega, .h2 .nav-item.has-mega:focus-within .mega { transform: translateY(0); }

/* Flat mega-menu row — used by AccessAppsMenu's signed-in "Access your
   apps" dropdown (Launcher / Vendor / per-product links / sign out), a
   simple list rather than the Products menu's cards below. */
.h2 .mega-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px; margin: 0 -10px; border-radius: 8px;
  transition: background 0.15s ease;
}
.h2 .mega-item:hover { background: #F6F5F3; }
.h2 .mega-t { font-family: var(--font-dm-sans-h2); font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.3; }
.h2 .mega-s { font-family: var(--font-dm-sans-h2); font-weight: 300; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

/* Products mega menu — only the real, shipped products (see navProducts in
   lib/nav-products.tsx). One equal column per product, so the grid stays
   full as products are added or hidden — no roadmap/waitlist filler. */
.h2 .mega-grid--products { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; }
.h2 .mega-product {
  display: flex; flex-direction: column; padding: 24px;
  border: 1px solid var(--line-2); border-radius: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.h2 .mega-product:hover { background: #FBFAF8; border-color: var(--line); }
.h2 .mega-product-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px;
  background: #F4F1ED; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); margin-bottom: 16px;
}
.h2 .mega-product-ic svg { width: 22px; height: 22px; display: block; }
.h2 .mega-product:hover .mega-product-ic { background: #E9F0FF; color: var(--blue); }
.h2 .mega-product-t { font-family: var(--font-sora), sans-serif; font-weight: 600; font-size: 18px; color: var(--ink); }
.h2 .mega-product-s { font-family: var(--font-dm-sans-h2); font-weight: 300; font-size: 13px; color: var(--muted); line-height: 1.5; margin: 8px 0 16px; }
.h2 .mega-product-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 0 auto; }
.h2 .mega-product-list li {
  font-family: var(--font-dm-sans-h2); font-size: 13px; color: var(--ink-2); padding-left: 15px; position: relative; line-height: 1.4;
}
.h2 .mega-product-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 999px;
  background: var(--blue-text); opacity: 0.6;
}
.h2 .mega-product-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  font-family: var(--font-dm-sans-h2); font-weight: 500; font-size: 13px; color: var(--blue);
}
.h2 .mega-product:hover .mega-product-cta { text-decoration: underline; }
.h2 .mega-product:hover .btn-arrow { transform: translateX(4px); }

.h2 .nav-ctas { display: flex; align-items: center; gap: 16px; }
.h2 .nav-ctas .signin { color: var(--soft); font-size: 18px; }

/* ============ ACCESS-YOUR-APPS MENU ============ */
.h2 .apps-menu-trigger { border: none; cursor: pointer; }
.h2 .apps-menu-trigger .caret {
  display: inline-block; width: 8px; height: 8px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
  transition: transform 0.25s ease; margin-left: 2px;
}
.h2 .apps-menu:hover .apps-menu-trigger .caret,
.h2 .apps-menu:focus-within .apps-menu-trigger .caret { transform: rotate(135deg) translate(-1px, 1px); }
.h2 .apps-menu-panel {
  left: auto; right: 0; transform: translateY(-6px);
  width: 300px; padding: 12px;
}
.h2 .apps-menu:hover .apps-menu-panel, .h2 .apps-menu:focus-within .apps-menu-panel {
  transform: translateY(0);
}
.h2 .apps-menu-panel .mega-item { padding: 12px 10px; }
.h2 .apps-menu-divider { height: 1px; background: rgba(21, 28, 42, 0.08); margin: 6px 4px; }

/* ============ NAV DRAWER (≤1024px) ============ */
/* Below 1024px the link cluster + both CTAs no longer fit the floating bar
   (they wrap at ~900px), so the links collapse into a hamburger drawer that
   drops down inside the same rounded nav card. The breakpoint must match
   the matchMedia query in SiteNav that auto-closes the drawer. */
.h2 .nav-toggle, .h2 .nav-drawer { display: none; }
.h2 .nav-toggle {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--ink); transition: background 0.15s ease;
}
.h2 .nav-toggle:hover { background: rgba(21, 28, 42, 0.05); }
.h2 .nav-toggle span {
  display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}
.h2 .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.h2 .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.h2 .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  .h2 .nav { height: auto; flex-direction: column; align-items: stretch; top: 14px; width: calc(100% - 32px); border-radius: 18px; }
  .h2 .nav .inner { height: 64px; padding: 0 12px 0 20px; gap: 12px; }
  .h2 .nav-menu { display: none; }
  .h2 .nav-ctas { gap: 10px; }
  .h2 .nav-toggle { display: inline-flex; }
  .h2 .nav.is-open { background: rgba(251, 250, 248, 0.98); }
  .h2 .nav-drawer {
    display: flex; flex-direction: column; gap: 18px;
    padding: 6px 20px 20px; max-height: calc(100svh - 100px); overflow-y: auto;
    border-top: 1px solid var(--line);
  }
  .h2 .nav-drawer[hidden] { display: none; }
}
@media (max-width: 560px) {
  .h2 .nav-ctas .signin, .h2 .nav-ctas > .btn { display: none; }
}
.h2 .nav-drawer-label {
  margin-top: 14px; font-family: var(--font-dm-mono), ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--whisper);
}
.h2 .nav-drawer-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: -8px; }
.h2 .nav-drawer-product {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px;
  border: 1px solid var(--line-2); background: #fff; transition: border-color 0.15s ease;
}
.h2 .nav-drawer-product:hover { border-color: var(--line); background: var(--bg-paper); }
.h2 .nav-drawer-product .mega-product-ic { width: 38px; height: 38px; margin: 0; }
.h2 .nav-drawer-product-t { display: block; font-family: var(--font-sora), sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.h2 .nav-drawer-product-s { display: block; font-family: var(--font-dm-sans-h2); font-weight: 300; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.h2 .nav-drawer-links { display: flex; flex-direction: column; }
.h2 .nav-drawer-links a, .h2 .nav-drawer-links .nav-link-btn {
  text-align: left;
  padding: 13px 2px; font-size: 17px; color: var(--soft); border-bottom: 1px solid var(--line);
}
.h2 .nav-drawer-links > :last-child { border-bottom: none; }
.h2 .nav-drawer-links a.is-active, .h2 .nav-drawer-links a:hover, .h2 .nav-drawer-links .nav-link-btn:hover { color: var(--ink); }
.h2 .nav-drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h2 .nav-drawer-actions > :only-child { grid-column: 1 / -1; }
.h2 .nav-drawer-actions .btn { white-space: nowrap; padding: 0 14px; }
/* above 560px the bar itself still shows these CTAs (see .nav-ctas above) */
@media (min-width: 561px) { .h2 .nav-drawer-actions { display: none; } }
@media (max-width: 380px) { .h2 .nav-drawer-actions { grid-template-columns: 1fr; } }

/* signed-in profile icon (replaces the old text trigger) — opens the same
   hover/focus-within panel mechanics as the rest of the mega menus, just
   narrower since it only ever holds "Sign out". */
.h2 .profile-trigger {
  width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.h2 .profile-trigger:hover { background: #0d39e6; }
.h2 .profile-trigger svg { width: 18px; height: 18px; }
.h2 .profile-menu-panel { width: 170px; }
.h2 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 8px;
  font-family: var(--font-dm-sans-h2), sans-serif; font-weight: 500; font-size: 14px; line-height: 1;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.h2 .btn:active { transform: translateY(1px); }
.h2 .btn-primary { background: var(--blue); color: #fff; }
.h2 .btn-primary:hover {
  background: #0d39e6;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(240, 174, 60, 0.55), 0 6px 16px -6px rgba(23, 71, 255, 0.5);
}
.h2 .btn-ghost { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.h2 .btn-ghost:hover { background: rgba(23, 71, 255, 0.05); }
.h2 .btn-lg { height: 52px; padding: 0 26px; font-size: 15px; }
.h2 .btn-arrow { display: inline-block; width: 14px; height: 14px; position: relative; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.h2 .btn:hover .btn-arrow { transform: translateX(4px); }
.h2 .btn-arrow::before, .h2 .btn-arrow::after { content: ""; position: absolute; background: currentColor; }
.h2 .btn-arrow::before { left: 1px; top: 6px; width: 10px; height: 1.5px; }
.h2 .btn-arrow::after { right: 1px; top: 3px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; background: transparent; transform: rotate(45deg); }

/* ---- home.css: footer + reveal ---- */
/* ============ FOOTER ============ */
/* Full-bleed, edge-to-edge white section — same width as every other
   section on the page (hero, cta-panel, etc, all span `.h2 .page` with no
   outer gutter). Content is constrained by an inner max-width on
   `.foot-top`/`.foot-bottom` instead of an inset "card", so the footer
   lines up flush with the section above it instead of floating narrower
   on a visible gray field. */
.h2 .foot { background: #fff; }
.h2 .foot > * { position: relative; z-index: 1; }

.h2 .foot-card { position: relative; overflow: hidden; }

/* footer content rises and settles into place as it scrolls into view —
   reuses the site-wide .reveal system but with a longer travel distance
   and a settle-with-a-touch-of-overshoot easing so it visibly "sits down"
   rather than just fading in. */
.h2 .foot .reveal { transform: translateY(44px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }

.h2 .foot-top { max-width: 1436px; margin: 0 auto; padding: 56px 40px 48px; display: flex; justify-content: space-between; gap: 80px; }

/* left block: mark + name + tagline + social row, matching the reference's
   brand column instead of the old separate top strip. */
.h2 .foot-brand { max-width: 340px; flex: 0 0 340px; }
.h2 .foot-mark { display: inline-flex; align-items: center; gap: 10px; }
.h2 .foot-mark .brand-mark { width: 32px; height: 27px; }
.h2 .foot-brand-name { font-family: var(--font-sora), sans-serif; font-weight: 700; font-size: 24px; color: var(--ink); }
.h2 .foot-tagline { margin: 18px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.65; }
.h2 .foot-socials { display: flex; gap: 10px; margin-top: 24px; }
.h2 .foot-social-icon {
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.h2 .foot-social-icon:hover { color: var(--ink); border-color: var(--line); transform: translateY(-2px); }
.h2 .foot-social-icon svg { width: 18px; height: 18px; }

.h2 .foot-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; flex: 1; }
.h2 .foot h5 { font-family: var(--font-questrial); font-size: 16px; color: var(--ink); font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 22px; }
.h2 .foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.h2 .foot ul li { color: var(--muted); font-size: 16.5px; }
.h2 .foot ul a { display: inline-block; color: var(--muted); font-size: 16.5px; transition: color 0.2s ease, transform 0.2s ease; }
.h2 .foot ul a:hover { color: var(--ink); transform: translateX(4px); }

.h2 .foot-bottom {
  max-width: 1436px; margin: 0 auto; padding: 24px 40px;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center;
  color: var(--whisper); font-family: var(--font-dm-sans-h2); font-weight: 400; font-size: 15px;
}
.h2 .foot-bottom .links { display: flex; gap: 24px; }
.h2 .foot-bottom .links a { color: var(--whisper); }
.h2 .foot-bottom .links a:hover { color: var(--muted); }

/* giant wordmark strip closing out the page — a flat, near-invisible gray
   fill, same ghost-watermark effect as the reference instead of the
   previous blue shimmer treatment. */
.h2 .foot-wordmark-wrap { margin-top: 8px; overflow: hidden; }
.h2 .foot-wordmark {
  margin: 0; padding: 0 16px; display: flex; justify-content: center; align-items: baseline;
  white-space: nowrap; position: relative;
  font-family: var(--font-sora), sans-serif; font-weight: 700;
  font-size: clamp(90px, 16vw, 260px); line-height: 0.8;
  color: rgba(16, 21, 34, 0.045);
  transform: translateY(28%);
}
.h2 .foot-wordmark-letter { display: inline-block; margin-right: -0.035em; }
.h2 .foot-wordmark-letter:last-child { margin-right: 0; }

/* ============ SCROLL-REVEAL ============ */
.h2 .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.h2 .reveal.in { opacity: 1; transform: none; }
.h2 .reveal.delay-1 { transition-delay: 0.08s; }
.h2 .reveal.delay-2 { transition-delay: 0.16s; }
.h2 .reveal.delay-3 { transition-delay: 0.24s; }
.h2 .reveal.delay-4 { transition-delay: 0.32s; }
.h2 .reveal.delay-5 { transition-delay: 0.40s; }
.h2 .reveal.delay-6 { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .h2 .reveal { opacity: 1; transform: none; transition: none; }
  .h2 .strip-track { animation: none; }
}

/* ---- home.css: hover micro + tweaks ---- */
/* ============ HOVER MICRO ============ */
.h2 .btn-primary { position: relative; overflow: hidden; }
.h2 .btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-18deg); transition: left 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h2 .btn-primary:hover::after { left: 140%; }

/* scroll progress bar */
.h2 .scrollbar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--blue); z-index: 100; transition: width 0.12s linear; }

/* ============ TWEAKS ============ */
@media (max-width: 1100px) {
  .h2 h1.headline { font-size: 54px; }
  .h2 .news-card { flex-direction: column; align-items: stretch; }
  .h2 .visibility-inner { grid-template-columns: 1fr; gap: 40px; }
  .h2 .platform-core-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
  .h2 .pc-illustration { order: -1; }
  .h2 .vis-cards { height: auto; display: flex; flex-direction: column; gap: 16px; transform: none; }
  .h2 .vcard { position: static; width: 100%; }
  .h2 .vcard.pos-back, .h2 .vcard.pos-middle, .h2 .vcard.pos-front { transform: none; opacity: 1; }
  .h2 .vcard.pos-back .inner > *:nth-child(n+2),
  .h2 .vcard.pos-middle .inner > *:nth-child(n+2) { opacity: 1; }
  .h2 .ent-grid { grid-template-columns: 1fr 1fr; }
  .h2 .testim-grid { grid-template-columns: 1fr; }
  .h2 .foot-top { flex-direction: column; gap: 40px; padding: 40px 32px 32px; }
  .h2 .foot-brand { max-width: none; flex-basis: auto; }
  .h2 .foot-inner { grid-template-columns: 1fr 1fr; }
  .h2 .foot-bottom { padding: 24px 32px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .h2 .foot-wordmark { font-size: clamp(48px, 17vw, 120px); }
}
/* tablets have room for all three footer link columns side by side */
@media (min-width: 600px) and (max-width: 1100px) {
  .h2 .foot-inner { grid-template-columns: repeat(3, 1fr); }
}

/* ============ PAGE BASE (unscoped; for this page's own body content) ============ */
:root {
  --ink: #101522; --ink-2: #48515F; --muted: #5F6677; --soft: #6B6560; --whisper: #B0ABA6;
  --line: rgba(21, 28, 42, 0.09); --line-2: #E8E4E0; --bg-cream: #F6F5F3; --bg-paper: #FBFAF8;
  --blue: #1747FF; --blue-text: #3B82F6; --indigo: #2D2DF1; --green: #04BC2C; --orange: #F58F00;
  --gold: #F0AE3C; --gold-deep: #B9791A; --navy: #0C1420;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fff; color: var(--ink);
  font-family: var(--font-questrial), system-ui, sans-serif; font-size: 18px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
main .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 8px;
  font-family: var(--font-dm-sans-h2), sans-serif; font-weight: 500; font-size: 14px; line-height: 1;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap;
}
main .btn:active { transform: translateY(1px); }
main .btn-primary { background: var(--blue); color: #fff; position: relative; overflow: hidden; }
main .btn-primary:hover { background: #0d39e6; transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(111, 139, 255, 0.55), 0 6px 16px -6px rgba(23, 71, 255, 0.5); }
main .btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-18deg); transition: left 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
main .btn-primary:hover::after { left: 140%; }
main .btn-lg { height: 52px; padding: 0 26px; font-size: 15px; }
main .btn-arrow { display: inline-block; width: 14px; height: 14px; position: relative; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
main .btn:hover .btn-arrow { transform: translateX(4px); }
main .btn-arrow::before, main .btn-arrow::after { content: ""; position: absolute; background: currentColor; }
main .btn-arrow::before { left: 1px; top: 6px; width: 10px; height: 1.5px; }
main .btn-arrow::after { right: 1px; top: 3px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; background: transparent; transform: rotate(45deg); }
main .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
main .reveal.in { opacity: 1; transform: none; }
main .reveal.delay-1 { transition-delay: 0.08s; }
main .reveal.delay-2 { transition-delay: 0.16s; }
main .reveal.delay-3 { transition-delay: 0.24s; }
main .reveal.delay-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { main .reveal { opacity: 1; transform: none; transition: none; } }