/* ==========================================================================
   BINKOD Tech Web — global.css
   Site-wide foundation: design tokens, reset, typography, buttons, layout,
   header/navigation, footer, accessibility helpers, root page, and 404 page.

   Application-specific styles belong in the application stylesheet
   (for example css/family-path.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --c-bg: #ffffff;
  --c-bg-soft: #f4f7fd;
  --c-bg-warm: #fff7ef;
  --c-surface: #ffffff;
  --c-line: #e4eaf4;
  --c-line-strong: #c9d6ec;
  --c-ink: #0e1b33;
  --c-ink-soft: #3c4c6b;
  --c-muted: #5d6d8c;
  --c-primary: #2563eb;
  --c-primary-strong: #1d4ed8;
  --c-primary-soft: #eaf1fe;
  --c-accent: #dd5f1e;
  --c-accent-soft: #fff1e4;
  --c-heart: #e11d48;
  --c-note-bg: #fffbeb;
  --c-note-line: #f3d489;
  --c-note-ink: #6f5412;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h1: clamp(2.375rem, 1.4rem + 4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --lh-body: 1.65;

  /* Shape & elevation */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(14, 27, 51, 0.06);
  --sh-2: 0 2px 6px rgba(14, 27, 51, 0.05), 0 14px 30px -16px rgba(14, 27, 51, 0.22);
  --sh-3: 0 4px 12px rgba(14, 27, 51, 0.07), 0 28px 56px -24px rgba(14, 27, 51, 0.28);

  /* Layout */
  --container: 70rem;
  --gutter: clamp(1rem, 4vw, 1.75rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 5.75rem);
  --header-h: 4.5rem;

  /* Motion */
  --t-fast: 150ms ease;
  --t: 220ms ease;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

::selection {
  background: var(--c-primary-soft);
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Body defaults and typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  overflow-wrap: break-word;
}

strong {
  font-weight: 700;
}

a {
  color: var(--c-primary);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--c-primary-strong);
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

section[id],
main[id] {
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.section--soft {
  background-color: var(--c-bg-soft);
}

.section--warm {
  background-color: var(--c-bg-warm);
}

.section--dark {
  background: linear-gradient(140deg, #10203f 0%, #16305f 55%, #1d3f7d 100%);
  color: #eef3fc;
}

.section--dark h2,
.section--dark h3 {
  color: #ffffff;
}

.section--dark .eyebrow {
  color: #9dbdf8;
}

.section--dark p {
  color: #ccd8ee;
}

.section-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.25rem);
}

.section-head > * + * {
  margin-top: 0.9rem;
}

.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t),
    box-shadow var(--t), transform var(--t-fast);
}

.btn:hover:not([aria-disabled="true"]) {
  transform: translateY(-2px);
}

.btn:active:not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.btn--primary {
  background-color: var(--c-primary);
  color: #ffffff;
}

.btn--primary:hover {
  background-color: var(--c-primary-strong);
  color: #ffffff;
  box-shadow: var(--sh-2);
}

.btn--outline {
  background-color: transparent;
  color: var(--c-primary-strong);
  border-color: var(--c-line-strong);
}

.btn--outline:hover {
  background-color: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary-strong);
}

.btn--play {
  background-color: var(--c-ink);
  color: #ffffff;
}

.btn--play:hover {
  background-color: #1d3055;
  color: #ffffff;
  box-shadow: var(--sh-2);
}

/* Official Google Play icon shown before the button label */
.btn__play-icon {
  width: auto;
  height: 1.05rem;
  flex: none;
}

.btn--sm .btn__play-icon {
  height: 0.95rem;
}

.btn--light {
  background-color: #ffffff;
  color: var(--c-ink);
}

.btn--light:hover {
  background-color: #eef3fc;
  color: var(--c-ink);
  box-shadow: var(--sh-2);
}

.btn--sm {
  padding: 0.55rem 1.15rem;
  font-size: var(--fs-sm);
}

.btn--block {
  display: flex;
  width: 100%;
}

[data-play-link][aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background-color: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-soft);
}

.chip--primary {
  background-color: var(--c-primary-soft);
  border-color: transparent;
  color: var(--c-primary-strong);
}

.chip--accent {
  background-color: var(--c-accent-soft);
  border-color: transparent;
  color: #a3440f;
}

.made-in {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.made-in__heart {
  color: var(--c-heart);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 0 0 var(--r-sm) 0;
  background-color: var(--c-bg);
  color: var(--c-primary-strong);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform var(--t-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

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

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Site header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--c-line);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--c-ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--c-ink);
}

.brand__img {
  width: 2.375rem;
  height: 2.375rem;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand__by {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background-color: var(--c-surface);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: background-color var(--t-fast);
}

.nav-toggle:hover {
  background-color: var(--c-primary-soft);
}

.nav-toggle__bar {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--c-ink);
  transition: transform var(--t), opacity var(--t-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--c-ink-soft);
  font-size: 0.975rem;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left calc(100% - 2px);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition: color var(--t-fast), background-size var(--t) ease;
}

.site-nav__link:hover {
  color: var(--c-primary-strong);
  background-size: 100% 2px;
}

.site-nav__link[aria-current="page"] {
  color: var(--c-primary-strong);
  background-size: 100% 2px;
}

.site-nav .btn {
  margin-left: 0.65rem;
}

@media (max-width: 59.99em) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    margin-left: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background-color: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-2);
  }

  .site-nav.is-open {
    display: block;
    animation: nav-in 180ms ease-out;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--c-line);
  }

  .site-nav .btn {
    display: flex;
    width: 100%;
    margin: 1rem 0 0;
  }
}

/* --------------------------------------------------------------------------
   Root header — BINKOD wordmark + Applications dropdown
   -------------------------------------------------------------------------- */
.root-header .header-inner {
  justify-content: space-between;
}

.root-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.root-logo img {
  width: auto;
  height: clamp(2.7rem, 2.15rem + 2.6vw, 3.3rem);
  display: block;
}

.nav-apps {
  position: relative;
}

.nav-apps__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  color: var(--c-ink);
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--t-fast),
    background-color var(--t-fast),
    box-shadow var(--t-fast);
}

.nav-apps__toggle::-webkit-details-marker {
  display: none;
}

.nav-apps__toggle:hover {
  border-color: var(--c-primary);
  background-color: var(--c-primary-soft);
}

.nav-apps[open] .nav-apps__toggle {
  border-color: var(--c-primary);
  box-shadow: var(--sh-1);
}

.nav-apps__chevron {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  color: var(--c-muted);
  transition: transform var(--t);
}

.nav-apps[open] .nav-apps__chevron {
  transform: rotate(180deg);
}

.nav-apps__panel {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  z-index: 70;
  width: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

.nav-apps[open] .nav-apps__panel {
  animation: nav-in 160ms ease-out;
}

.nav-apps__panel::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 1.65rem;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-left: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
  transform: rotate(45deg);
}

.nav-apps__list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-apps__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-ink);
  transition: background-color var(--t-fast);
}

.nav-apps__item:hover {
  background-color: var(--c-primary-soft);
}

.nav-apps__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.55rem;
  box-shadow: 0 4px 10px -6px rgba(14, 27, 51, 0.45);
}

.nav-apps__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  line-height: 1.2;
}

.nav-apps__name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.nav-apps__desc {
  color: var(--c-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.nav-apps__badge {
  display: inline-flex;
  padding: 0.16rem 0.5rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-pill);
  color: #b91c1c;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 40em) {
  .nav-apps__toggle {
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) 0 1.5rem;
  background-color: var(--c-bg-soft);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 35em) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60em) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
  }
}

.footer-brand {
  display: grid;
  gap: 0.8rem;
  justify-items: start;
}

.footer-brand__text {
  color: var(--c-muted);
  max-width: 24rem;
}

.footer__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1rem;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.footer-links a {
  color: var(--c-ink-soft);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast);
}

.footer-links a:hover {
  color: var(--c-primary-strong);
  text-decoration: underline;
}

.footer-cta__text {
  color: var(--c-muted);
  margin-bottom: 0.9rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.footer-bottom strong {
  color: var(--c-ink-soft);
}

/* --------------------------------------------------------------------------
   BINKOD wordmark link (footers, contact, about)
   -------------------------------------------------------------------------- */
.binkod-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.binkod-link:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

.binkod-link img {
  display: block;
  width: auto;
  height: 2rem;
}

/* Contact email — displayed as plain styled text, never a mailto link */
.contact-email {
  font-weight: 600;
  color: var(--c-ink-soft);
  letter-spacing: 0.01em;
  user-select: text;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Root page — products-first homepage (application showcase first, then the
   Applications heading + subtitle)
   -------------------------------------------------------------------------- */
.root-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(1rem, 0.75rem + 1vw, 1.5rem) clamp(2.75rem, 2rem + 3vw, 4rem);
  background:
    radial-gradient(52rem 26rem at 88% -12%, var(--c-primary-soft), transparent 62%),
    radial-gradient(38rem 24rem at -8% 15%, var(--c-accent-soft), transparent 58%),
    var(--c-bg);
}

.root-hero::before,
.root-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.root-hero::before {
  top: -9rem;
  right: -7rem;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(closest-side, rgba(37, 99, 235, 0.12), transparent 72%);
  animation: root-orb 16s ease-in-out infinite alternate;
}

.root-hero::after {
  bottom: -11rem;
  left: -8rem;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(closest-side, rgba(124, 58, 237, 0.1), transparent 72%);
  animation: root-orb 20s ease-in-out infinite alternate-reverse;
}

.root-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin-inline: auto;
}

.root-hero__inner > * + * {
  margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.15rem);
}

/* Applications heading block sits after the showcase — spaced from it */
.root-hero__apps {
  margin-top: clamp(2.5rem, 1.75rem + 3vw, 4rem);
}

.root-hero h1 {
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Application showcase — two premium product presentations side by side:
   Family Path Locator (live Android phone experience, Google Play) and
   BINKOD ABC (under-development build visual). Entrance animations live on
   the slot so hover transforms on the panel are not overridden by animation
   fill. Two columns from 48em; stacked (Family Path first) below that.
   ========================================================================== */
.showcase {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
}

@media (min-width: 48em) {
  .showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.showcase__slot {
  display: flex;
  min-width: 0;
}

.showcase__panel {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.15rem;
  min-width: 0;
  padding:
    clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)
    clamp(1.25rem, 0.9rem + 1.4vw, 2rem)
    clamp(1.65rem, 1.3rem + 1.3vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: calc(var(--r-xl) + 8px);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.showcase__panel:hover {
  transform: translateY(-4px);
  border-color: #ffffff;
}

/* Family Path side — sky-blue glass stage */
.showcase__panel--fp {
  background:
    radial-gradient(34rem 18rem at 50% -8%, rgba(37, 99, 235, 0.13), transparent 65%),
    linear-gradient(165deg, #ffffff 0%, #f0f6ff 52%, #e7f0fe 100%);
}

.showcase__panel--fp:hover {
  box-shadow:
    var(--sh-3),
    0 30px 60px -34px rgba(37, 99, 235, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* BINKOD ABC side — soft violet build stage */
.showcase__panel--abc {
  background:
    radial-gradient(30rem 17rem at 50% -6%, rgba(124, 58, 237, 0.14), transparent 65%),
    linear-gradient(160deg, #ffffff 0%, #f5f1ff 52%, #efe9ff 100%);
}

.showcase__panel--abc:hover {
  box-shadow:
    var(--sh-3),
    0 30px 60px -34px rgba(124, 58, 237, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* --------------------------------------------------------------------------
   Shared showcase text + actions
   -------------------------------------------------------------------------- */
.showcase__title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.showcase__desc {
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 38ch;
  margin-inline: auto;
}

.showcase__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.showcase__tags li {
  padding: 0.36rem 0.8rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: var(--r-pill);
  color: var(--c-ink-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.showcase__info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
}

.showcase__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding-top: 0.4rem;
}

.showcase__arrow {
  display: inline-block;
  transition: transform var(--t);
}

.btn:hover .showcase__arrow,
.btn:focus-visible .showcase__arrow,
.showcase__link:hover .showcase__arrow,
.showcase__link:focus-visible .showcase__arrow {
  transform: translateX(4px);
}

.showcase__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}

.showcase__link:hover,
.showcase__link:focus-visible {
  color: var(--c-primary-strong);
}

/* --------------------------------------------------------------------------
   Family Path side — map-inspired backdrop
   -------------------------------------------------------------------------- */
.fp-deco {
  position: absolute;
  pointer-events: none;
}

.fp-deco--grid {
  inset: -2rem;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
  background-size: 108px 108px, 108px 108px, 27px 27px, 27px 27px;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 26%, transparent 78%);
  opacity: 0.9;
  animation: sc-drift 50s linear infinite alternate;
}

.fp-deco__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  -webkit-mask-image: radial-gradient(ellipse 92% 84% at 50% 46%, #000 32%, transparent 80%);
  mask-image: radial-gradient(ellipse 92% 84% at 50% 46%, #000 32%, transparent 80%);
}

.fp-route {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 9 13;
  animation: sc-route 3.4s linear infinite;
}

.fp-route--a {
  stroke: rgba(37, 99, 235, 0.4);
}

.fp-route--b {
  stroke: rgba(221, 95, 30, 0.34);
  animation-duration: 4.6s;
  animation-direction: reverse;
}

.fp-route-dot {
  fill: rgba(37, 99, 235, 0.55);
  transform-box: fill-box;
  transform-origin: center;
  animation: root-glow 4.4s ease-in-out infinite;
}

.fp-route-dot--a {
  animation-delay: -0.6s;
}

.fp-route-dot--b {
  fill: rgba(221, 95, 30, 0.55);
  animation-delay: -1.8s;
}

/* --------------------------------------------------------------------------
   Family Path side — Android phone mockup
   -------------------------------------------------------------------------- */
.fp-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 100%;
  place-items: center;
  width: 100%;
  margin-block: auto;
}

.fp-stage__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(closest-side, rgba(37, 99, 235, 0.22), transparent 72%);
  animation: root-glow 7s ease-in-out infinite;
}

.phone-float,
.phone-tilt {
  grid-area: 1 / 1;
  width: 100%;
}

.phone-float {
  animation: sc-phone-float 8s ease-in-out infinite alternate;
}

.phone-tilt {
  animation: sc-phone-tilt 13s ease-in-out infinite alternate;
}

.phone {
  position: relative;
  width: min(100%, 13rem);
  margin-inline: auto;
  aspect-ratio: 9 / 19.3;
  padding: 0.4rem;
  background: linear-gradient(155deg, #39415a 0%, #171e30 34%, #0b101c 100%);
  border-radius: 2.5rem;
  box-shadow:
    0 34px 62px -26px rgba(14, 27, 51, 0.62),
    0 16px 32px -16px rgba(37, 99, 235, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Android-style side buttons (volume + power) */
.phone__btn {
  position: absolute;
  right: -2px;
  width: 3px;
  background: linear-gradient(180deg, #4a5470, #232b40);
  border-radius: 0 3px 3px 0;
}

.phone__btn--vol {
  top: 17%;
  height: 2.3rem;
}

.phone__btn--power {
  top: 27%;
  height: 3.5rem;
  right: -2.5px;
}

.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fd 55%, #f3f8ff 100%);
  border-radius: 2.16rem;
}

/* Punch-hole front camera (Android, not a notch) */
.phone__cam {
  position: absolute;
  top: 0.72rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #374765 0%, #0a0f1a 72%);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.85);
  z-index: 3;
}

/* Glass reflection: static sheen + an occasional light sweep */
.phone__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255, 255, 255, 0.14) 46%,
    rgba(255, 255, 255, 0.03) 54%,
    transparent 66%
  );
}

.phone__glare::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -90%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
  transform: translateX(0) skewX(-16deg);
  animation: sc-glare 14s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Family Path side — simplified app UI inside the phone screen
   -------------------------------------------------------------------------- */
.app-ui {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 0.5rem 0.7rem 0.85rem;
  text-align: left;
}

.app-ui__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem 0;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink-soft);
}

.app-ui__sys {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.app-ui__sys svg {
  height: 0.55rem;
  width: auto;
  fill: var(--c-ink-soft);
}

.app-ui__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--c-line);
  border-radius: 0.95rem;
  box-shadow: 0 10px 20px -14px rgba(14, 27, 51, 0.45);
}

.app-ui__icon {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 0.6rem;
  box-shadow:
    0 6px 12px -6px rgba(14, 27, 51, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

.app-ui__titles {
  min-width: 0;
}

.app-ui__name {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.app-ui__avail {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-muted);
}

.app-ui__avail .app-ui__play-icon {
  height: 0.66rem;
  width: auto;
  flex: none;
}

/* Mini map: soft grid, flowing route and a pinging location pin */
.app-ui__map {
  position: relative;
  flex: 1 1 auto;
  min-height: 6rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(37, 99, 235, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.09) 1px, transparent 1px),
    linear-gradient(160deg, #eef6f1 0%, #edf3fc 100%);
  background-size: 21px 21px, 21px 21px, 100% 100%;
  border: 1px solid var(--c-line);
  border-radius: 1rem;
}

.app-ui__map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.app-road {
  fill: none;
  stroke: rgba(14, 27, 51, 0.07);
  stroke-width: 8;
  stroke-linecap: round;
}

.app-route {
  fill: none;
  stroke: rgba(37, 99, 235, 0.75);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
  animation: sc-route 2.6s linear infinite;
}

.app-route-start {
  fill: rgba(37, 99, 235, 0.9);
}

.app-pin {
  filter: drop-shadow(0 4px 5px rgba(14, 27, 51, 0.3));
}

.app-pin__shape {
  fill: var(--c-primary);
}

.app-pin__dot {
  fill: #ffffff;
}

.app-pin__ping {
  fill: rgba(37, 99, 235, 0.35);
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-ping 2.6s ease-out infinite;
}

/* Feature pills: staggered entrance, then a soft highlight cycles one by one */
.app-ui__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.32rem;
  padding-top: 0.1rem;
}

.app-ui__pills li {
  padding: 0.26rem 0.55rem;
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-ink-soft);
  font-size: 0.57rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  animation:
    fade-up 0.5s ease-out both,
    sc-pill 13s ease-in-out infinite;
}

.app-ui__pills li:nth-child(1) { animation-delay: 0.85s, 0s; }
.app-ui__pills li:nth-child(2) { animation-delay: 0.97s, 2.17s; }
.app-ui__pills li:nth-child(3) { animation-delay: 1.09s, 4.33s; }
.app-ui__pills li:nth-child(4) { animation-delay: 1.21s, 6.5s; }
.app-ui__pills li:nth-child(5) { animation-delay: 1.33s, 8.67s; }
.app-ui__pills li:nth-child(6) { animation-delay: 1.45s, 10.83s; }

/* --------------------------------------------------------------------------
   BINKOD ABC side — under-development build stage
   -------------------------------------------------------------------------- */
.abc-deco {
  position: absolute;
  pointer-events: none;
}

.abc-deco--grid {
  inset: -2rem;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 74% at 50% 44%, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 74% at 50% 44%, #000 26%, transparent 78%);
  opacity: 0.9;
  animation: sc-drift 56s linear infinite alternate-reverse;
}

/* Prominent red status */
.abc-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.15rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-pill);
  color: #b91c1c;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 10px 22px -16px rgba(220, 38, 38, 0.75);
}

.abc-status__dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-radius: 50%;
  background-color: #ef4444;
  animation: sc-ring 2.4s ease-out infinite;
}

/* Small drifting dots */
.abc-dot {
  position: absolute;
  z-index: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: rgba(124, 58, 237, 0.55);
  opacity: 0.55;
  pointer-events: none;
  animation: sc-dot 6.5s ease-in-out infinite alternate;
}

.abc-dot--1 { top: 20%; left: 22%; }
.abc-dot--2 { top: 32%; right: 24%; background-color: rgba(37, 99, 235, 0.5); animation-duration: 7.4s; animation-delay: -2.2s; }
.abc-dot--3 { bottom: 32%; left: 28%; background-color: rgba(221, 95, 30, 0.45); animation-delay: -4s; }
.abc-dot--4 { top: 16%; right: 34%; width: 0.34rem; height: 0.34rem; animation-delay: -1s; animation-duration: 7.8s; }

.abc-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 16.5rem;
  margin-block: auto;
}

.abc-stage__glow {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 22rem;
  height: 22rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(124, 58, 237, 0.24), transparent 72%);
  animation: sc-pulse 7s ease-in-out infinite;
  pointer-events: none;
}

/* Floating education fragments (A B C 1 2) */
.abc-frag {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 22px -14px rgba(14, 27, 51, 0.45);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--c-primary-strong);
  pointer-events: none;
  animation: sc-drift-frag 7.5s ease-in-out infinite alternate;
}

.abc-frag--a { top: 4%; left: 6%; --sc-rot: -7deg; color: #1d4ed8; animation-delay: -1.2s; }
.abc-frag--b { top: 10%; right: 7%; --sc-rot: 8deg; color: #7c3aed; animation-duration: 8.6s; animation-delay: -3.4s; }
.abc-frag--c { top: 48%; left: 1%; --sc-rot: 6deg; color: #dd5f1e; animation-duration: 9.2s; animation-delay: -2s; }
.abc-frag--d { bottom: 26%; right: 3%; --sc-rot: -8deg; color: #16a34a; animation-duration: 8s; animation-delay: -5s; }
.abc-frag--e { bottom: 7%; right: 15%; --sc-rot: 9deg; color: #2563eb; animation-duration: 9.6s; animation-delay: -4.2s; }

/* Layered wireframe interface cards being assembled */
.abc-wire {
  position: absolute;
  z-index: 1;
  width: 6.8rem;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 0.75rem;
  box-shadow: 0 16px 30px -20px rgba(14, 27, 51, 0.5);
  pointer-events: none;
  animation: sc-drift-wire 9.5s ease-in-out infinite alternate;
}

.abc-wire i {
  display: block;
  height: 0.42rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.32), rgba(37, 99, 235, 0.18));
}

.abc-wire i + i {
  margin-top: 0.34rem;
}

.abc-wire i:nth-child(1) { width: 64%; }
.abc-wire i:nth-child(3) { width: 48%; }

.abc-wire--a { left: -1.2rem; bottom: 14%; --sc-rot: -8deg; animation-delay: -2.6s; }
.abc-wire--b { right: -1.4rem; top: 6%; --sc-rot: 9deg; animation-duration: 11s; animation-delay: -4.8s; }

/* Icon orbit: rotating dashed ring + sweeping accent ring + soft halo */
.abc-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 15.5rem);
  aspect-ratio: 1;
}

.abc-orbit__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.abc-orbit__ring--dashed {
  inset: 0;
  border: 2px dashed rgba(124, 58, 237, 0.42);
  animation: sc-spin 44s linear infinite;
}

.abc-orbit__ring--sweep {
  inset: 7.5%;
  border: 2px solid transparent;
  border-top-color: rgba(37, 99, 235, 0.55);
  border-right-color: rgba(221, 95, 30, 0.42);
  animation: sc-spin 24s linear infinite reverse;
}

.abc-orbit__halo {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 58, 237, 0.3), transparent 72%);
  animation: root-glow 6s ease-in-out infinite;
  pointer-events: none;
}

/* App icon: gentle entrance (zoom + slight 3D flip), then a slow float —
   never a continuous spin */
.abc-icon-intro {
  position: relative;
  z-index: 1;
  animation: sc-icon-in 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
}

.abc-icon-float {
  animation: sc-float 7s ease-in-out 2s infinite alternate;
}

.abc-icon {
  width: clamp(7.25rem, 6rem + 6vw, 9.5rem);
  height: auto;
  border-radius: 22%;
  box-shadow:
    0 28px 52px -24px rgba(14, 27, 51, 0.55),
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 38px -8px rgba(124, 58, 237, 0.45);
}

/* Build indicator: sequential lit steps */
.abc-build {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.9rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 24px -18px rgba(14, 27, 51, 0.5);
}

.abc-build__label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #6d28d9;
}

.abc-build__steps {
  display: inline-flex;
  gap: 0.28rem;
}

.abc-build__steps i {
  display: block;
  width: 0.9rem;
  height: 0.34rem;
  border-radius: var(--r-pill);
  background-color: rgba(124, 58, 237, 0.18);
  transform-origin: left center;
  animation: sc-step 3.6s ease-in-out infinite;
}

.abc-build__steps i:nth-child(2) { animation-delay: 0.3s; }
.abc-build__steps i:nth-child(3) { animation-delay: 0.6s; }
.abc-build__steps i:nth-child(4) { animation-delay: 0.9s; }
.abc-build__steps i:nth-child(5) { animation-delay: 1.2s; }

/* Narrow phones: keep fragments compact so nothing crowds or overflows */
@media (max-width: 30em) {
  .abc-frag {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.75rem;
  }

  .abc-wire {
    width: 5.8rem;
  }
}

/* --------------------------------------------------------------------------
   First-view fit — keep the navbar + both application showcases (including
   titles, CTAs and tags) visible in the first viewport on laptop/desktop
   heights. Tablet widths keep two columns with a moderately smaller phone.
   -------------------------------------------------------------------------- */
@media (min-width: 48em) and (max-width: 55.99em) {
  .phone {
    width: min(100%, 12rem);
  }

  .abc-stage {
    min-height: 14.5rem;
    gap: 0.85rem;
  }

  .abc-orbit {
    width: min(100%, 14rem);
  }

  .abc-icon {
    width: clamp(6.5rem, 5.5rem + 5vw, 8.5rem);
  }
}

@media (min-width: 48em) and (max-height: 50em) {
  .phone {
    width: min(100%, 12rem);
  }

  .abc-stage {
    min-height: 14.5rem;
    gap: 0.85rem;
  }

  .abc-orbit {
    width: min(100%, 14rem);
  }

  .abc-icon {
    width: clamp(6.5rem, 5.5rem + 5vw, 8.5rem);
  }
}

@media (min-width: 48em) and (max-height: 44em) {
  .root-hero {
    padding-top: 0.85rem;
  }

  .showcase__panel {
    padding-block: 1.35rem 1.5rem;
  }

  .phone {
    width: min(100%, 10.25rem);
  }

  .abc-stage {
    min-height: 12.5rem;
    gap: 0.75rem;
  }

  .abc-orbit {
    width: min(100%, 12.5rem);
  }

  .abc-icon {
    width: clamp(6rem, 5rem + 4vw, 7rem);
  }
}

/* --------------------------------------------------------------------------
   404 page
   -------------------------------------------------------------------------- */
.notfound {
  min-height: min(70vh, 40rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
}

.notfound__inner {
  max-width: 34rem;
}

.notfound__code {
  font-size: clamp(4rem, 2rem + 14vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-primary-soft);
  -webkit-text-stroke: 2px var(--c-line-strong);
}

.notfound__inner h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  margin-top: 0.5rem;
}

.notfound__inner p {
  color: var(--c-ink-soft);
  margin-top: 0.9rem;
}

.notfound .actions {
  justify-content: center;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Animation
   -------------------------------------------------------------------------- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes root-orb {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-2.5rem, 3rem, 0) scale(1.08);
  }
}

@keyframes root-glow {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes root-in-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes root-in-right {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Showcase — slow backdrop drift (grid layers translate only, GPU-friendly) */
@keyframes sc-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-26px, -18px, 0);
  }
}

/* Showcase — flowing dashed route (map lines inside/around the phone) */
@keyframes sc-route {
  to {
    stroke-dashoffset: -34;
  }
}

/* Showcase — phone: slow float, then gentle perspective tilt (neutral at
   both ends so alternating loops and reduced motion settle flat) */
@keyframes sc-phone-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

@keyframes sc-phone-tilt {
  0% {
    transform: perspective(1100px) rotateY(0deg) rotateZ(0deg);
  }
  30% {
    transform: perspective(1100px) rotateY(4.5deg) rotateZ(1.4deg);
  }
  65% {
    transform: perspective(1100px) rotateY(-4deg) rotateZ(-1.3deg);
  }
  100% {
    transform: perspective(1100px) rotateY(0deg) rotateZ(0deg);
  }
}

/* Showcase — occasional light sweep across the phone glass */
@keyframes sc-glare {
  0%,
  74% {
    transform: translateX(0) skewX(-16deg);
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
  94%,
  100% {
    transform: translateX(480%) skewX(-16deg);
    opacity: 0;
  }
}

/* Showcase — one feature pill highlights at a time, then rests neutral */
@keyframes sc-pill {
  0%,
  11% {
    background-color: #eaf1fe;
    border-color: rgba(37, 99, 235, 0.55);
    color: var(--c-primary-strong);
    box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.8);
    transform: translateY(-1.5px);
  }
  15%,
  100% {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: var(--c-line);
    color: var(--c-ink-soft);
    box-shadow: none;
    transform: translateY(0);
  }
}

/* Showcase — centered glow pulse (keeps its centering translate intact) */
@keyframes sc-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
}

/* Showcase — expanding ring on the red status dot */
@keyframes sc-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 0.55rem rgba(239, 68, 68, 0);
  }
}

/* Showcase — small drifting dots */
@keyframes sc-dot {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
  }
  to {
    transform: translate3d(8px, -12px, 0);
    opacity: 0.85;
  }
}

/* Showcase — floating fragments and wireframe cards (tilt via --sc-rot) */
@keyframes sc-drift-frag {
  from {
    transform: translateY(0) rotate(var(--sc-rot, 0deg));
  }
  to {
    transform: translateY(-9px) rotate(calc(var(--sc-rot, 0deg) * -1));
  }
}

@keyframes sc-drift-wire {
  from {
    transform: translateY(0) rotate(var(--sc-rot, 0deg));
  }
  to {
    transform: translateY(-7px) rotate(var(--sc-rot, 0deg));
  }
}

/* Showcase — orbit rings */
@keyframes sc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Showcase — expanding map pin ping */
@keyframes sc-ping {
  0% {
    transform: scale(0.5);
    opacity: 0.85;
  }
  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* Showcase — ABC icon entrance: appear, soft zoom, slight 3D flip, settle */
@keyframes sc-icon-in {
  0% {
    opacity: 0;
    transform: perspective(700px) scale(0.55) rotateY(38deg);
  }
  45% {
    opacity: 1;
    transform: perspective(700px) scale(1.07) rotateY(-10deg);
  }
  70% {
    opacity: 1;
    transform: perspective(700px) scale(0.985) rotateY(4deg);
  }
  100% {
    opacity: 1;
    transform: perspective(700px) scale(1) rotateY(0deg);
  }
}

/* Showcase — slow icon float */
@keyframes sc-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-7px);
  }
}

/* Showcase — build steps lighting up in sequence */
@keyframes sc-step {
  0%,
  100% {
    background-color: rgba(124, 58, 237, 0.18);
    transform: scaleX(0.72);
  }
  12% {
    background-color: #7c3aed;
    transform: scaleX(1);
  }
  38% {
    background-color: rgba(124, 58, 237, 0.55);
    transform: scaleX(1);
  }
  55% {
    background-color: rgba(124, 58, 237, 0.18);
    transform: scaleX(0.72);
  }
}

.anim-in {
  animation: fade-up 0.65s ease-out both;
}

.anim-in--delay {
  animation-delay: 0.12s;
}

.anim-in--left {
  animation: root-in-left 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.anim-in--right {
  animation: root-in-right 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Showcase: no staggered waits, no queued animation starts — content
     appears immediately in its final, fully visible state. */
  .showcase *,
  .showcase *::before,
  .showcase *::after {
    animation-delay: 0s !important;
  }
}