/* ==========================================================================
   XElements — one static page.
   Layout: one full screen per product (stacked heroes), then a two-column
   tile grid. All colour goes through custom properties so dark mode is a
   single block of overrides.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --bg:            #f7f7f7;
  --surface:       #ffffff;
  --text:          #1d1d1f;
  --text-2:        #6e6e73;
  --text-3:        #8e8e93;
  --line:          rgba(0, 0, 0, .12);
  --line-soft:     rgba(0, 0, 0, .07);
  --pill-bg:       rgba(0, 0, 0, .04);
  --nav-bg:        rgba(247, 247, 247, .72);

  /* iA-style lift: four faint layers, no visible edge */
  --shadow:
    0 1px 10px rgba(0, 0, 0, .05),
    0 2px 15px rgba(0, 0, 0, .05),
    0 4px 20px rgba(0, 0, 0, .05),
    0 8px 25px rgba(0, 0, 0, .05);
  --shadow-lift:
    0 2px 10px rgba(0, 0, 0, .05),
    0 4px 15px rgba(0, 0, 0, .05),
    0 8px 20px rgba(0, 0, 0, .05),
    0 16px 25px rgba(0, 0, 0, .05);

  /* ink used inside the monochrome tile marks */
  --ink:           #1d1d1f;
  --ink-soft:      #8a8a8f;
  --paper:         #ffffff;
  --paper-hair:    rgba(0, 0, 0, .16);

  /* hero visual surfaces */
  --viz-card:      #ffffff;
  --viz-hair:      rgba(0, 0, 0, .09);
  --viz-blue-bg:   #f0f4fb;
  --viz-blue-hair: rgba(37, 99, 235, .20);

  /* tile tints — brand colour at a whisper */
  --t-emotion:     #fcfcfc;
  --t-xiaoman:     #f1f1f2;
  --t-shiftjar:    #eef4fb;
  --t-tradestamp:  #fdf3ec;
  --t-origincheck: #f2f3f4;
  --t-research:    #f5f5f6;

  --screen-light:  #f7f7f7;
  --screen-tinted: #f4f7fc;

  /* Product artwork is light-themed and never inverts. On a light page it can
     sit flush; on a dark one it needs a mat, or a bright rectangle reads as a
     hole punched in the page. */
  --mat-pad:       0px;
  --mat-edge:      rgba(0, 0, 0, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0b0b0c;
    --surface:       #151517;
    --text:          #f0f0f0;
    --text-2:        #a1a1a6;
    --text-3:        #8a8a90;
    --line:          rgba(255, 255, 255, .14);
    --line-soft:     rgba(255, 255, 255, .08);
    --pill-bg:       rgba(255, 255, 255, .06);
    --nav-bg:        rgba(11, 11, 12, .72);

    --shadow:
      0 1px 10px rgba(0, 0, 0, .22),
      0 2px 15px rgba(0, 0, 0, .22),
      0 4px 20px rgba(0, 0, 0, .22),
      0 8px 25px rgba(0, 0, 0, .22);
    --shadow-lift:
      0 2px 10px rgba(0, 0, 0, .24),
      0 4px 15px rgba(0, 0, 0, .24),
      0 8px 20px rgba(0, 0, 0, .24),
      0 16px 25px rgba(0, 0, 0, .24);

    --ink:           #f0f0f0;
    --ink-soft:      #7d7d84;
    --paper:         #232327;
    --paper-hair:    rgba(255, 255, 255, .22);

    --viz-card:      #151517;
    --viz-hair:      rgba(255, 255, 255, .10);
    --viz-blue-bg:   #0e1219;
    --viz-blue-hair: rgba(96, 150, 240, .22);

    --t-emotion:     #151517;
    --t-xiaoman:     #131315;
    --t-shiftjar:    #101720;
    --t-tradestamp:  #1c1512;
    --t-origincheck: #141416;
    --t-research:    #121214;

    --screen-light:  #0b0b0c;
    --screen-tinted: #0c0e13;

    --mat-pad:       10px;
    --mat-edge:      rgba(255, 255, 255, .14);
  }
}

/* --- Reset ---------------------------------------------------------------- */

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

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

html,
body {
  max-width: 100%;
  /* clip, not hidden: hidden turns body into a scroll container,
     which breaks position:sticky on the header */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 52px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.nav__inner {
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Sized by x-height, not by artboard. The wordmark sets "elements" at 58 units on
   the same 340x64 artboard the old lockup set its text at 44, so holding the
   artboard at 27px would enlarge the type by a third and unbalance the bar:
   44 / 58 * 27px ≈ 20.5, rounded to 21.
   The artboard also carries its own clear space — the drawn x's ink starts at
   x≈31 of 340. Pull that back so the x lines up with the bar's padding rather
   than the artboard's. 31 / 64 * 21px ≈ 10px. */
.wordmark__logo {
  height: 26px;
  width: auto;
  margin-left: -12px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3.4vw, 30px);
}

.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color .18s ease;
}

.nav__links a:hover { color: var(--text); }

/* anchored sections clear the sticky bar */
#products,
#research,
#contact { scroll-margin-top: 64px; }

/* --- Opening -------------------------------------------------------------- */

.intro {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 22px 84px;
  text-align: center;
}

.intro__inner { max-width: 760px; }

.intro__title {
  font-size: clamp(40px, 6.4vw, 62px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.intro__sub {
  margin-top: 22px;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-2);
}

/* --- Product screens ------------------------------------------------------ */

.hero {
  min-height: 680px;
  min-height: max(680px, 90vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vh, 66px);
  padding: 84px 0;
  text-align: center;
  background: var(--screen-light);
}

.hero__inner {
  max-width: 820px;
  padding: 0 22px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* the official Nysia mark, sitting beside its label */
.eyebrow__mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 7px;
  vertical-align: -7px;
}

.hero__title {
  margin-top: 16px;
  font-size: clamp(40px, 6vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.hero__desc {
  margin: 20px auto 0;
  max-width: 640px;
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  height: 32px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex: none;
}

.dot--live { background: #12a150; opacity: 1; }
.dot--blue { background: #2563EB; opacity: 1; }

.hero__action { margin-top: 22px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}

.btn:hover {
  transform: translateY(-1px);
  opacity: .88;
}

.hero__visual { width: 100%; }   /* full-bleed product block */

/* --- Device frame ----------------------------------------------------------
   One frame for both phone screens: thin bezel, large radius, no notch. The
   screen radius is the frame radius minus the bezel so the two curves stay
   concentric.
   --------------------------------------------------------------------------- */

.device {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.device__frame {
  width: clamp(200px, 25vw, 244px);
  padding: 8px;
  border-radius: 36px;
  background: #1b1d1f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 18px 40px rgba(0, 0, 0, .18),
    0 4px 12px rgba(0, 0, 0, .12);
}

.device__screen {
  width: 100%;
  height: auto;
  border-radius: 28px;
}

.device__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* On the dark screen a drop shadow has nothing to fall on, so the frame is
   separated by a lit edge instead. */
.device--dark .device__frame {
  box-shadow:
    inset 0 0 0 1px rgba(143, 240, 202, .20),
    0 24px 60px rgba(0, 0, 0, .55);
}

.device--dark .device__label { color: rgba(232, 242, 238, .52); }

/* --- Nysia player card ------------------------------------------------------ */

.player {
  position: relative;
  width: min(100% - 44px, 820px);
  margin: 0 auto;
}

/* what is left of the old spectrum: a glow escaping from under the card */
.player::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -16px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
  opacity: .18;
  filter: blur(26px);
}

/* positioned, and after ::before in the DOM, so the card paints over the glow */
.player__card {
  position: relative;
  padding: var(--mat-pad);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--mat-edge), var(--shadow-lift);
}

.player__card img {
  width: 100%;
  height: auto;
  border-radius: calc(24px - var(--mat-pad));
}

/* Aeoni keeps its own dark screen in both colour schemes. */
.hero--aeoni {
  background: #08110d;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(17, 87, 64, .55) 0%, rgba(8, 17, 13, 0) 62%),
    #08110d;
  color: #f2f6f4;
}

.hero--aeoni .eyebrow { color: rgba(143, 240, 202, .75); }
.hero--aeoni .hero__desc { color: rgba(232, 242, 238, .74); }
.hero--aeoni .pill {
  border-color: rgba(143, 240, 202, .28);
  background: rgba(143, 240, 202, .07);
  color: rgba(232, 242, 238, .86);
}
.hero--aeoni .dot { background: #5fe0b0; opacity: 1; }

.hero--nysia { background: var(--screen-light); }
.hero--ours  { background: var(--screen-tinted); }

/* --- Tiles ---------------------------------------------------------------- */

.more {
  padding: clamp(80px, 12vh, 130px) 22px clamp(70px, 10vh, 110px);
}

.more__title {
  max-width: 1080px;
  margin: 0 auto clamp(28px, 4vh, 44px);
  text-align: center;
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
}

.grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(32px, 4vw, 46px) clamp(22px, 3.4vw, 40px) clamp(30px, 3.6vw, 42px);
  border-radius: 22px;
  background: var(--tint, var(--surface));
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease;
}

@media (hover: hover) {
  .tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
}

.tile--emotion     { --tint: var(--t-emotion); }
.tile--xiaoman     { --tint: var(--t-xiaoman); }
.tile--shiftjar    { --tint: var(--t-shiftjar); }
.tile--tradestamp  { --tint: var(--t-tradestamp); }
.tile--origincheck { --tint: var(--t-origincheck); }
.tile--research    { --tint: var(--t-research); }

.tile__mark {
  width: 120px;
  height: 78px;
  margin-bottom: 22px;
}

.tile__mark svg { width: 100%; height: 100%; }

/* a band of real product artwork where a tile has one, in place of the mark */
.tile__shot {
  position: relative;
  align-self: stretch;
  margin: 0 0 24px;
  padding: var(--mat-pad);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--mat-edge);
}

.tile__shot img {
  width: 100%;
  height: auto;
  border-radius: calc(16px - var(--mat-pad));
}

.tile__shot-label {
  position: absolute;
  /* offset by the mat so the label stays on the artwork in either theme */
  right: calc(10px + var(--mat-pad));
  bottom: calc(8px + var(--mat-pad));
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #8e8e93;   /* fixed: it sits on the artwork, which never changes theme */
}

.tile__name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tile__tagline {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

.tile__desc {
  margin-top: 12px;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

.tile__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
}

.tile__links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tile__links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
  overflow-wrap: anywhere;
}

.tile__links a:hover {
  color: var(--text);
  border-bottom-color: var(--line);
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 44px 22px 56px;
}

.footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 26px;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}

.footer__place {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__mark {
  width: 16px;
  height: 16px;
  opacity: .7;
}

.footer__mail a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .18s ease;
}

.footer__mail a:hover { color: var(--text); }

/* --- Entrance --------------------------------------------------------------
   Scroll-linked fade, CSS only. Everything is fully visible by default; the
   animation is layered on top and only where the browser supports it, so a
   failure mode can never hide content.
   -------------------------------------------------------------------------- */

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .intro__inner {
    animation: reveal-in .7s cubic-bezier(.22, .61, .36, 1) both;
  }

  @supports (animation-timeline: view()) {
    .hero .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 58%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Narrow screens -------------------------------------------------------- */

@media (max-width: 720px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .hero {
    min-height: 620px;
    min-height: max(620px, 88vh);
    padding: 72px 0;
    gap: 34px;
  }

  .intro { min-height: 56vh; padding: 76px 22px 64px; }

  .pill {
    height: auto;
    min-height: 32px;
    padding: 6px 14px;
    white-space: normal;
    text-align: left;
  }

  .tile { border-radius: 20px; }
}

@media (max-width: 420px) {
  .nav__inner { padding: 0 18px; }
  .nav__links { gap: 14px; }
  .nav__links a { font-size: 13px; }
}