/* 01-tokens.css */
/* Xenyra design tokens — the only place for colors, fonts, spacing, radii and shadows.
   Same values as the approved My Xenyra / xenyra.com design. */
:root {
  /* surfaces */
  --x-bg: #F5F7FF;
  --x-surface: #FFFFFF;
  --x-surface-2: #FAFBFF;
  --x-glass: rgba(255, 255, 255, 0.82);
  --x-night: #070A1C;
  --x-night-card: rgba(255, 255, 255, 0.05);
  --x-night-line: rgba(255, 255, 255, 0.12);

  /* text */
  --x-ink: #0F1433;
  --x-ink-2: #3B425E;
  --x-muted: #545B75;
  --x-subtle: #5F6685;
  --x-on-night: #FFFFFF;
  --x-on-night-2: #C3C9E4;
  --x-on-night-accent: #7FD8FF;

  /* lines */
  --x-line: #E3E7F5;
  --x-line-2: #DCE1F2;
  --x-line-3: #D6DCF0;
  --x-line-soft: #EEF0F7;

  /* brand */
  --x-blue: #3355FF;
  --x-blue-strong: #2F48C9;
  --x-blue-hover: #1E3BD6;
  --x-blue-bg: #E8EDFF;
  --x-blue-bg-2: #EEF1FF;
  --x-violet: #7A4DF5;
  --x-violet-2: #5B4BEA;
  --x-violet-ink: #5B3FC4;
  --x-violet-bg: #F0EBFF;
  --x-success-ink: #1F6B45;
  --x-success-bg: #E6F5EC;
  --x-danger-ink: #A3263C;
  --x-danger-bg: #FDECEF;
  --x-success-line: #BFE3CF;
  --x-danger-line: #F3C3CC;
  --x-violet-icon: #6A45E0;
  --x-pill-line: #D4DBFA;
  --x-on-night-3: #E4E7F5;
  --x-night-card-2: rgba(255, 255, 255, 0.04);
  --x-night-line-strong: rgba(255, 255, 255, 0.3);
  --x-night-accent-line: rgba(127, 216, 255, 0.3);
  --x-gradient: linear-gradient(135deg, var(--x-blue), var(--x-violet));
  --x-bg-idcard: radial-gradient(circle at 75% 80%, rgba(122,77,245,0.35) 0, rgba(122,77,245,0) 55%), var(--x-night);
  --x-bg-night: radial-gradient(circle at 85% 20%, rgba(122,77,245,0.28) 0, rgba(122,77,245,0) 50%), var(--x-night);
  --x-bg-cta: radial-gradient(circle at 15% 80%, rgba(51,85,255,0.3) 0, rgba(51,85,255,0) 50%), radial-gradient(circle at 85% 20%, rgba(122,77,245,0.3) 0, rgba(122,77,245,0) 50%), var(--x-night);

  /* type */
  --x-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --x-font-display: "EB Garamond", Georgia, serif;
  --x-weight-light: 300;
  --x-weight-regular: 400;
  --x-text-xs: 12px;
  --x-text-sm: 14px;
  --x-text-md: 15px;
  --x-text-base: 16px;
  --x-text-lg: 18px;
  --x-text-xl: 20px;
  --x-h1: clamp(44px, 6.4vw, 88px);
  --x-h2: clamp(34px, 4.2vw, 54px);
  --x-h2-big: clamp(38px, 5vw, 66px);
  --x-h3: 30px;
  --x-card-title: 21px;      /* card headings (sans): news, AI cards, legal sections */
  --x-card-title-lg: 26px;   /* large card headings (sans): products, plans */
  --x-tracking-tight: -0.01em;
  --x-eyebrow-spacing: 0.16em;

  /* spacing */
  --x-space-1: 4px;
  --x-space-2: 8px;
  --x-space-3: 12px;
  --x-space-4: 16px;
  --x-space-5: 20px;
  --x-space-6: 24px;
  --x-space-7: 28px;
  --x-space-8: 32px;
  --x-space-10: 40px;
  --x-space-12: 48px;
  --x-space-14: 56px;
  --x-section: clamp(64px, 9vw, 96px);
  --x-gutter: 24px;
  --x-container: 1240px;

  /* radii */
  --x-r-sm: 16px;
  --x-r-md: 22px;
  --x-r-lg: 26px;
  --x-r-xl: 32px;
  --x-r-pill: 999px;
  --x-accent-line: 3px;      /* brand gradient strip on top of news cards */

  /* mask for faded text ends (opacity only, colour is irrelevant) */
  --x-mask-solid: #000000;

  /* shadows */
  --x-shadow-soft: 0 20px 60px rgba(30, 40, 120, 0.06);
  --x-shadow-card: 0 24px 60px rgba(15, 20, 51, 0.25);
  --x-shadow-hero: 0 40px 100px rgba(15, 20, 51, 0.35);
  --x-orb-glow: rgba(70, 110, 255, 0.45);
  --x-orb-glow-strong: rgba(110, 120, 255, 0.7);

  /* motion */
  --x-ease: cubic-bezier(.2, .7, .2, 1);
  --x-fast: 160ms;

  /* touch */
  --x-tap: 44px;
}

@media (max-width: 640px) {
  :root { --x-gutter: 16px; --x-h3: 26px; }
}

/* 02-fonts.css */
/* Self-hosted fonts (no Google requests – GDPR). Loaded per script via unicode-range. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter-cyrillic-300-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter-cyrillic-ext-300-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/eb-garamond-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

/* 03-base.css */
/* Base: reset, typography, shared components (container, eyebrow, buttons, chips, status, icon) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--x-bg);
  color: var(--x-ink);
  font-family: var(--x-font-sans);
  font-weight: var(--x-weight-light);
  font-size: var(--x-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; font-weight: var(--x-weight-regular); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--x-blue); text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 3px; border-radius: 6px; }
.x-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.x-skip { position: absolute; left: var(--x-space-4); top: -60px; z-index: 50; background: var(--x-ink); color: var(--x-on-night); padding: var(--x-space-3) var(--x-space-4); border-radius: var(--x-r-pill); }
.x-skip:focus { top: var(--x-space-4); }

.x-container {
  max-width: var(--x-container);
  margin: 0 auto;
  padding-left: max(var(--x-gutter), env(safe-area-inset-left));
  padding-right: max(var(--x-gutter), env(safe-area-inset-right));
}
.x-section { padding-top: var(--x-section); padding-bottom: var(--x-section); }
.x-section--flush-top { padding-top: 0; }
.x-band { background: var(--x-surface); border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.x-stack { display: flex; flex-direction: column; gap: var(--x-space-10); }
.x-intro { display: flex; flex-direction: column; gap: var(--x-space-3); max-width: 680px; }

.x-eyebrow { font-size: var(--x-text-xs); letter-spacing: var(--x-eyebrow-spacing); text-transform: uppercase; color: var(--x-blue-strong); }
.x-display { font-family: var(--x-font-display); font-weight: var(--x-weight-regular); line-height: 1.05; }
.x-h2 { font-size: var(--x-h2); }
.x-h2--narrow { max-width: 760px; }
.x-h3 { font-size: var(--x-h3); }
.x-lead { font-size: var(--x-text-lg); line-height: 1.6; color: var(--x-muted); }
.x-text { font-size: var(--x-text-md); line-height: 1.6; color: var(--x-muted); }

.x-icon { width: 20px; height: 20px; flex: none; }
.x-icon--sm { width: 16px; height: 16px; }
.x-icon--lg { width: 26px; height: 26px; }

.x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--x-space-2);
  min-height: var(--x-tap); padding: 14px 26px; border-radius: var(--x-r-pill);
  font-size: var(--x-text-base); border: 1px solid transparent; cursor: pointer;
  transition: transform var(--x-fast) var(--x-ease), background-color var(--x-fast) var(--x-ease);
}
.x-btn--dark { background: var(--x-ink); color: var(--x-on-night); }
.x-btn--light { background: var(--x-surface); color: var(--x-ink); border-color: var(--x-line-2); }
.x-btn--brand { background: var(--x-gradient); color: var(--x-on-night); }
.x-btn--ghost-night { color: var(--x-on-night); border-color: var(--x-night-line-strong); }
.x-btn--block { width: 100%; }
@media (hover: hover) {
  .x-btn:hover { transform: translateY(-1px); }
  a.x-link:hover { color: var(--x-blue-hover); }
}

.x-chip { display: inline-flex; align-items: center; border: 1px solid var(--x-line); background: var(--x-surface); border-radius: var(--x-r-pill); padding: 9px 14px; font-size: var(--x-text-sm); color: var(--x-ink-2); }
.x-pill-label { align-self: flex-start; font-size: var(--x-text-xs); letter-spacing: var(--x-eyebrow-spacing); text-transform: uppercase; color: var(--x-blue-strong); border: 1px solid var(--x-pill-line); background: var(--x-surface); padding: 8px 14px; border-radius: var(--x-r-pill); }

.x-status { display: inline-flex; align-items: center; font-size: var(--x-text-xs); padding: 5px 10px; border-radius: var(--x-r-pill); white-space: nowrap; }
.x-status--available { color: var(--x-success-ink); background: var(--x-success-bg); }
.x-status--pilot { color: var(--x-blue-strong); background: var(--x-blue-bg); }
.x-status--soon, .x-status--later { color: var(--x-violet-ink); background: var(--x-violet-bg); }

/* Xenyra ID handle: name + .x in brand accent (shared ecosystem component) */
.x-handle { white-space: nowrap; }
.x-handle__tld { color: var(--x-blue); margin-left: 0.04em; }
.x-handle--night .x-handle__tld { color: var(--x-on-night-accent); }


/* Reduced motion: all motion uses --x-fast, so one token switches it off (no overrides needed). */
@media (prefers-reduced-motion: reduce) {
  :root { --x-fast: 0ms; }
  html { scroll-behavior: auto; }
}

/* 10-header.css */
/* Header: sticky glass bar, nav, language picker, mobile menu */
.x-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--x-glass);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--x-line);
  padding-top: env(safe-area-inset-top);
}
.x-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--x-space-4); min-height: 72px; }
.x-brand { display: flex; align-items: center; gap: var(--x-space-3); color: var(--x-ink); }
.x-brand__mark { width: 34px; height: 34px; }
.x-brand__text { display: flex; flex-direction: column; }
.x-brand__name { font-size: 21px; letter-spacing: 0.01em; }
.x-brand__tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--x-subtle); }

.x-nav { display: flex; gap: 26px; font-size: var(--x-text-md); }
.x-nav a { color: var(--x-ink-2); padding: 10px 0; }
.x-header__actions { display: flex; align-items: center; gap: var(--x-space-3); }
.x-header__login { color: var(--x-ink); padding: 10px 6px; font-size: var(--x-text-md); }
.x-header__app { padding: 11px 20px; font-size: var(--x-text-md); }

/* disclosure base (language + menu) */
.x-disclosure { position: relative; }
.x-disclosure > summary { list-style: none; cursor: pointer; }
.x-disclosure > summary::-webkit-details-marker { display: none; }

.x-lang > summary {
  display: flex; align-items: center; gap: 6px; min-height: var(--x-tap);
  padding: 0 10px; border-radius: var(--x-r-pill); color: var(--x-blue); font-size: var(--x-text-md);
}
.x-lang__list, .x-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
  background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--x-r-md);
  box-shadow: var(--x-shadow-soft); padding: var(--x-space-2);
}
.x-lang__list { margin: 0; list-style: none; min-width: 200px; max-height: 70vh; overflow-y: auto; }
.x-lang__list a { display: flex; justify-content: space-between; gap: var(--x-space-4); min-height: var(--x-tap); align-items: center; padding: 0 var(--x-space-3); border-radius: 12px; color: var(--x-ink-2); font-size: var(--x-text-md); }
.x-lang__list a[aria-current="true"] { color: var(--x-blue); background: var(--x-blue-bg-2); }
.x-lang__code { color: var(--x-subtle); font-size: var(--x-text-xs); }

.x-menu { display: none; }
.x-menu > summary { display: flex; align-items: center; justify-content: center; width: var(--x-tap); height: var(--x-tap); border-radius: 50%; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-ink-2); }
.x-menu__icon-close { display: none; }
.x-menu[open] .x-menu__icon-open { display: none; }
.x-menu[open] .x-menu__icon-close { display: block; }
.x-menu__panel { width: min(320px, calc(100vw - 2 * var(--x-gutter))); display: flex; flex-direction: column; }
.x-menu__panel a { display: flex; align-items: center; min-height: var(--x-tap); padding: 0 var(--x-space-3); border-radius: 12px; color: var(--x-ink-2); font-size: var(--x-text-base); }
.x-menu__panel .x-menu__login { border-top: 1px solid var(--x-line-soft); margin-top: var(--x-space-2); padding-top: var(--x-space-2); color: var(--x-ink); }
.x-menu__panel .x-menu__app { display: none; justify-content: center; margin-top: var(--x-space-2); color: var(--x-on-night); }

@media (hover: hover) {
  .x-nav a:hover, .x-lang__list a:hover, .x-menu__panel a:hover { color: var(--x-blue); }
}

@media (max-width: 1120px) {
  .x-nav, .x-header__login { display: none; }
  .x-menu { display: block; }
}
@media (max-width: 600px) {
  .x-brand__tag { display: none; }
  .x-header__app { display: none; }
  .x-menu__panel .x-menu__app { display: flex; }
  .x-header__actions { gap: var(--x-space-1); }
}

/* 20-hero.css */
/* Hero: headline, actions, chips, dark Xenyra ID card with the master X */
.x-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--x-space-14); padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(48px, 6vw, 64px); }
.x-hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.x-hero__title { font-family: var(--x-font-display); font-size: var(--x-h1); line-height: 0.98; letter-spacing: -0.015em; }
.x-hero__accent { color: var(--x-violet-2); }
.x-hero__lead { font-size: var(--x-text-xl); line-height: 1.6; color: var(--x-muted); max-width: 580px; }
.x-hero__actions, .x-hero__chips { display: flex; flex-wrap: wrap; gap: var(--x-space-3); }
.x-hero__chips { gap: 10px; }

.x-hero__visual { flex: 1 1 420px; min-width: 0; }
.x-idcard {
  position: relative; overflow: hidden; border-radius: 36px; min-height: 500px; padding: var(--x-space-7);
  background: var(--x-bg-idcard);
  box-shadow: var(--x-shadow-hero);
}
.x-idcard__panel {
  position: relative; z-index: 2; max-width: 360px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--x-night-line); background: var(--x-night-card); border-radius: var(--x-r-md); padding: 22px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.x-idcard__label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--x-on-night-accent); }
.x-idcard__name { font-size: 30px; color: var(--x-on-night); overflow-wrap: anywhere; }
.x-idcard__text { font-size: var(--x-text-md); line-height: 1.55; color: var(--x-on-night-2); }
.x-idcard__x { position: absolute; right: 24px; bottom: 20px; width: min(300px, 62%); }

@media (max-width: 640px) {
  .x-hero { gap: var(--x-space-10); }
  .x-idcard { min-height: 400px; border-radius: var(--x-r-xl); }
  .x-idcard__x { right: 16px; bottom: 16px; width: 56%; }
  .x-hero__actions .x-btn { flex: 1 1 100%; }
}

/* 30-products.css */
/* Products ("doors") and the module register strip — both rendered from data/modules.json */
.x-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--x-space-5); }
/* An opened card grows alone; the others keep their own height instead of stretching to match. */
.x-doors:has([data-open]) { align-items: start; }
.x-door {
  position: relative; display: flex; flex-direction: column; gap: var(--x-space-4); padding: 30px; color: var(--x-ink);
  background: var(--x-surface-2); border: 1px solid var(--x-line); border-radius: var(--x-r-lg);
  transition: transform var(--x-fast) var(--x-ease), box-shadow var(--x-fast) var(--x-ease);
}
.x-door--dashed { border-style: dashed; border-color: var(--x-line-3); }
.x-door__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--x-space-3); }
.x-door__icon { width: 56px; height: 56px; border-radius: var(--x-r-sm); display: flex; align-items: center; justify-content: center; background: var(--x-blue-bg-2); color: var(--x-blue); }
.x-door__icon--xid { background: var(--x-violet-bg); color: var(--x-violet-icon); font-family: var(--x-font-display); font-size: 26px; }
.x-door__name { font-family: var(--x-font-sans); font-weight: var(--x-weight-regular); font-size: var(--x-card-title-lg); line-height: 1.2; letter-spacing: var(--x-tracking-tight); }
.x-door__cta { margin-top: auto; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--x-blue); font-size: var(--x-text-md); }
.x-door__cta::after { content: ""; position: absolute; inset: 0; border-radius: var(--x-r-lg); }
.x-door__cta:focus-visible { outline: none; }
.x-door__cta:focus-visible::after { outline: 2px solid var(--x-blue); outline-offset: 2px; }
.x-later { display: flex; align-items: center; gap: 10px; font-size: var(--x-text-sm); color: var(--x-subtle); }

.x-modules { display: flex; flex-direction: column; gap: var(--x-space-5); }
.x-modules__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--x-space-2); }
.x-modules__title { font-family: var(--x-font-display); font-size: 28px; }
.x-modules__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--x-space-3); }
.x-module { display: flex; align-items: center; gap: var(--x-space-3); min-height: 64px; padding: var(--x-space-3) var(--x-space-4); background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--x-r-sm); }
.x-module__orb { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
a.x-module__orb:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 4px; }
.x-module__icon { width: 38px; height: 38px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--x-blue-bg-2); color: var(--x-blue); }
.x-module--soon .x-module__icon, .x-module--later .x-module__icon { background: var(--x-violet-bg); color: var(--x-violet-ink); }
.x-module__name { flex: 1; font-size: var(--x-text-md); color: var(--x-ink-2); }

@media (hover: hover) {
  .x-door:hover { transform: translateY(-2px); box-shadow: var(--x-shadow-soft); }
}

/* 40-xid.css */
/* Xenyra ID reservation box */
.x-xid {
  display: flex; flex-wrap: wrap; gap: var(--x-space-10); align-items: center;
  background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--x-r-xl);
  padding: clamp(24px, 4vw, 48px); box-shadow: var(--x-shadow-soft);
}
.x-xid__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.x-xid__form { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.x-xid__field {
  display: flex; align-items: center; gap: var(--x-space-2);
  border: 1px solid var(--x-line-3); border-radius: var(--x-r-pill); padding: 6px 6px 6px 22px; background: var(--x-surface-2);
}
.x-xid__field:focus-within { border-color: var(--x-blue); }
.x-xid__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: var(--x-text-lg); /* ≥16px: Safari on iPhone does not auto-zoom */
  padding: 12px 0; color: var(--x-ink);
}
.x-xid__suffix { font-family: var(--x-font-display); font-size: 22px; color: var(--x-blue); padding: 0 6px; }
.x-xid__button { padding: 13px 22px; font-size: var(--x-text-md); }
.x-xid__msg { margin: 0; font-size: var(--x-text-lg); line-height: 1.45; color: var(--x-muted); }
.x-xid__msg[data-tone],
.x-sub__msg[data-tone] {
  display: flex; align-items: flex-start; gap: var(--x-space-3); padding: 14px 16px;
  border: 1px solid var(--x-line); border-radius: var(--x-r-sm); font-weight: var(--x-weight-regular);
}
.x-xid__msg[data-tone]::before,
.x-sub__msg[data-tone]::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--x-msg-icon) center / contain no-repeat; mask: var(--x-msg-icon) center / contain no-repeat;
}
.x-xid__msg[data-tone="ok"],
.x-sub__msg[data-tone="ok"] { --x-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5 11 15l4.5-5'/%3E%3C/svg%3E"); color: var(--x-success-ink); background: var(--x-success-bg); border-color: var(--x-success-line); }
.x-xid__msg[data-tone="warn"],
.x-sub__msg[data-tone="warn"] { --x-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); color: var(--x-danger-ink); background: var(--x-danger-bg); border-color: var(--x-danger-line); }
.x-xid__msg[data-tone="error"],
.x-sub__msg[data-tone="error"] { --x-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.1'/%3E%3C/svg%3E"); color: var(--x-danger-ink); background: var(--x-danger-bg); border-color: var(--x-danger-line); }
.x-xid__note { font-size: var(--x-text-sm); line-height: 1.6; color: var(--x-muted); }

@media (max-width: 520px) {
  .x-xid__field { flex-wrap: wrap; border-radius: var(--x-r-md); padding: 6px 6px 6px 18px; }
  .x-xid__button { flex: 1 1 100%; }
}

/* 50-sections.css */
/* How it works, AI layer, pricing, trust */
.x-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.x-card { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 24px; padding: var(--x-space-7); display: flex; flex-direction: column; gap: var(--x-space-3); }
.x-card--soft { background: var(--x-surface-2); border-radius: var(--x-r-md); padding: var(--x-space-6); gap: var(--x-space-2); }

/* how */
.x-steps { list-style: none; margin: 0; padding: 0; }
.x-step__num { font-family: var(--x-font-display); font-size: 44px; line-height: 1; }
.x-step:nth-child(1) .x-step__num { color: var(--x-blue); }
.x-step:nth-child(2) .x-step__num { color: var(--x-violet-2); }
.x-step:nth-child(3) .x-step__num { color: var(--x-violet); }
.x-step__title { font-size: var(--x-text-xl); }
.x-example__name { font-family: var(--x-font-display); font-size: 28px; }

/* dark sections (AI layer, closing CTA) */
.x-night { color: var(--x-on-night); background: var(--x-bg-night); }
.x-night__label { align-self: flex-start; font-size: var(--x-text-xs); letter-spacing: var(--x-eyebrow-spacing); text-transform: uppercase; color: var(--x-on-night-accent); border: 1px solid var(--x-night-accent-line); padding: 8px 14px; border-radius: var(--x-r-pill); }
.x-night__title { font-family: var(--x-font-display); font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; max-width: 820px; }
.x-night__lead { font-size: var(--x-text-lg); line-height: 1.6; color: var(--x-on-night-2); max-width: 680px; }
.x-night-card { border: 1px solid var(--x-night-line); background: var(--x-night-card-2); border-radius: 24px; padding: var(--x-space-7); display: flex; flex-direction: column; gap: 10px; }
.x-night-card__title { font-family: var(--x-font-sans); font-weight: var(--x-weight-regular); font-size: var(--x-card-title); line-height: 1.3; letter-spacing: var(--x-tracking-tight); }
.x-night-card__text { font-size: var(--x-text-md); line-height: 1.6; color: var(--x-on-night-2); }

/* pricing */
.x-plan { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--x-r-lg); padding: var(--x-space-8); display: flex; flex-direction: column; gap: 14px; }
.x-plan--featured { background: var(--x-ink); border-color: var(--x-ink); color: var(--x-on-night); box-shadow: var(--x-shadow-card); }
.x-plan__head { display: flex; justify-content: space-between; align-items: center; gap: var(--x-space-3); }
.x-plan__name { font-family: var(--x-font-sans); font-weight: var(--x-weight-regular); font-size: var(--x-card-title-lg); line-height: 1.2; letter-spacing: var(--x-tracking-tight); }
.x-plan__badge { font-size: var(--x-text-xs); color: var(--x-ink); background: var(--x-surface); padding: 5px 10px; border-radius: var(--x-r-pill); }
.x-plan__for { font-size: var(--x-text-md); color: var(--x-muted); }
.x-plan--featured .x-plan__for { color: var(--x-on-night-2); }
.x-plan__list { list-style: none; margin: 0 0 var(--x-space-2); padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--x-text-md); color: var(--x-ink-2); }
.x-plan--featured .x-plan__list { color: var(--x-on-night-3); }
.x-plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.x-plan__list .x-icon { color: var(--x-blue); margin-top: 1px; }
.x-plan--featured .x-plan__list .x-icon { color: var(--x-on-night-accent); }
.x-plan .x-btn { margin-top: auto; }

/* trust */
.x-trust { display: flex; flex-direction: column; gap: 10px; }
.x-trust .x-icon--lg { color: var(--x-blue); }
.x-trust__title { font-size: var(--x-text-lg); }

/* 60-news.css */
/* News cards and newsletter box */
.x-news__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--x-space-2); font-size: var(--x-text-xs); color: var(--x-subtle); }
.x-news { position: relative; overflow: hidden; }
.x-news::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--x-accent-line); background: var(--x-gradient); }
.x-news__cat { letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-blue-strong); background: var(--x-surface-2); border-radius: var(--x-r-pill); padding: var(--x-space-1) var(--x-space-3); }
.x-news__title { font-family: var(--x-font-sans); font-weight: var(--x-weight-regular); font-size: var(--x-card-title); line-height: 1.3; letter-spacing: var(--x-tracking-tight); }

.x-sub { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 28px; padding: clamp(24px, 4vw, 36px); display: flex; flex-wrap: wrap; gap: var(--x-space-7); align-items: flex-start; }
.x-sub__copy { flex: 1 1 360px; display: flex; flex-direction: column; gap: var(--x-space-2); }
.x-sub__title { font-family: var(--x-font-display); font-size: var(--x-h3); }
.x-sub__form { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--x-space-3); }
.x-sub__field { display: flex; gap: var(--x-space-2); align-items: center; border: 1px solid var(--x-line-3); border-radius: var(--x-r-pill); padding: 6px 6px 6px 20px; background: var(--x-surface-2); }
.x-sub__field:focus-within { border-color: var(--x-blue); }
.x-sub__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--x-text-base); padding: 12px 0; }
.x-sub__button { padding: 13px 22px; font-size: var(--x-text-md); }
.x-sub__consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--x-text-sm); line-height: 1.5; color: var(--x-muted); cursor: pointer; }
.x-sub__consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--x-blue); }
.x-sub__msg { min-height: 22px; font-size: var(--x-text-md); line-height: 1.45; color: var(--x-muted); }
.x-sub__msg:empty { display: none; }
.x-sub__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 520px) {
  .x-sub__field { flex-wrap: wrap; border-radius: var(--x-r-md); }
  .x-sub__button { flex: 1 1 100%; }
}

/* 62-more.css */
/* Expandable text: closed = clamped with a soft fade at the end, open = full text.
   The clamp only applies when JS is running (html.x-js), so without JS all text stays readable. */
.x-more { display: flex; flex-direction: column; gap: var(--x-space-2); }
.x-more__body { display: flex; flex-direction: column; gap: var(--x-space-3); }
.x-js .x-more:not([data-open]) .x-more__body {
  max-height: 6.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, var(--x-mask-solid) 55%, transparent);
  mask-image: linear-gradient(to bottom, var(--x-mask-solid) 55%, transparent);
}
.x-more__toggle {
  position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin: -8px 0 -12px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--x-text-md); color: var(--x-blue);
}
.x-more__toggle[hidden] { display: none; }
.x-more__toggle .x-icon { transition: transform var(--x-fast) var(--x-ease); }
.x-more[data-open] .x-more__toggle .x-icon { transform: rotate(180deg); }
.x-more__close, .x-more[data-open] .x-more__open { display: none; }
.x-more[data-open] .x-more__close { display: inline; }
.x-more--night .x-more__toggle { color: var(--x-on-night-accent); }
.x-more__toggle:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 2px; border-radius: var(--x-r-sm); }

/* 64-info.css */
/* Info circle with a short explanation (same idea as the info circles in the app). */
.x-info { position: relative; display: inline-block; vertical-align: middle; text-transform: none; letter-spacing: normal; }
.x-info__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--x-r-pill); background: none;
  color: var(--x-subtle); cursor: pointer; transition: color var(--x-fast) var(--x-ease);
}
.x-info__btn::after { content: ""; position: absolute; inset: -10px; }
.x-info__btn:hover, .x-info__btn[aria-expanded="true"] { color: var(--x-blue); }
.x-info__btn:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 2px; }
.x-night .x-info__btn { color: var(--x-on-night-2); }
.x-night .x-info__btn:hover, .x-night .x-info__btn[aria-expanded="true"] { color: var(--x-on-night-accent); }
.x-idcard .x-info__btn { color: var(--x-on-night-2); }
.x-idcard .x-info__btn:hover, .x-idcard .x-info__btn[aria-expanded="true"] { color: var(--x-on-night-accent); }
.x-info__pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: var(--x-info-left, 0px);
  width: min(300px, calc(100vw - 32px)); padding: var(--x-space-4);
  background: var(--x-night); color: var(--x-on-night-3); border: 1px solid var(--x-night-line); border-radius: var(--x-r-sm);
  box-shadow: var(--x-shadow-card); font-family: var(--x-font-sans); font-size: var(--x-text-sm); line-height: 1.55; font-weight: 400; text-align: left;
}
.x-info__pop[hidden] { display: none; }

/* 66-orb.css */
/* Living orb: the Xenyra voice / assistant symbol (same picture as in the app).
   Layers: soft glow, breathing orb, slowly turning light sheen. Only transform and opacity move. */
.x-orb { position: relative; display: block; width: var(--x-orb-size, 56px); height: var(--x-orb-size, 56px); flex: none; isolation: isolate; transition: transform var(--x-fast) var(--x-ease); }
.x-orb::before {
  content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--x-orb-glow) 0, transparent 68%);
  animation: x-orb-glow 5.2s ease-in-out infinite;
}
.x-orb__img, .x-orb__sheen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.x-orb__img { animation: x-orb-breathe 5.2s ease-in-out infinite; }
.x-orb__sheen { opacity: 0.55; mix-blend-mode: screen; animation: x-orb-turn 16s linear infinite; }
.x-orb--door { --x-orb-size: 64px; }
.x-orb--module { --x-orb-size: 38px; }
@keyframes x-orb-breathe { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.04); } }
@keyframes x-orb-glow { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes x-orb-turn { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .x-door:hover .x-orb, a.x-module__orb:hover .x-orb { transform: scale(1.08); }
  .x-door:hover .x-orb::before, a.x-module__orb:hover .x-orb::before { background: radial-gradient(circle, var(--x-orb-glow-strong) 0, transparent 68%); }
}
@media (prefers-reduced-motion: reduce) {
  .x-orb::before, .x-orb__img, .x-orb__sheen { animation: none; }
}

/* 68-scrollnav.css */
/* Quick scroll: two small glass buttons (to top / to bottom), shown only on long pages after scrolling. */
.x-scrollnav {
  position: fixed; z-index: 35; display: flex; flex-direction: column; gap: var(--x-space-2);
  right: max(var(--x-gutter), env(safe-area-inset-right)); bottom: max(var(--x-gutter), env(safe-area-inset-bottom));
}
.x-scrollnav[hidden], .x-scrollnav__btn[hidden] { display: none; }
.x-scrollnav__btn {
  width: var(--x-tap); height: var(--x-tap); padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--x-line); border-radius: 50%; cursor: pointer; color: var(--x-blue);
  background: var(--x-glass); box-shadow: var(--x-shadow-soft);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  transition: transform var(--x-fast) var(--x-ease);
}
.x-scrollnav__btn:active { transform: scale(0.94); }
@media (hover: hover) {
  .x-scrollnav__btn:hover { transform: translateY(-2px); }
}

/* 70-footer.css */
/* Closing CTA, footer, legal pages */
.x-cta { background: var(--x-bg-cta); color: var(--x-on-night); }
.x-cta__inner { display: flex; flex-direction: column; gap: var(--x-space-6); padding-top: clamp(72px, 10vw, 104px); padding-bottom: clamp(72px, 10vw, 104px); }
.x-cta__title { font-family: var(--x-font-display); font-size: var(--x-h2-big); line-height: 1.02; max-width: 900px; }
.x-cta__text { font-size: var(--x-text-lg); color: var(--x-on-night-2); }
.x-cta__actions { display: flex; flex-wrap: wrap; gap: var(--x-space-3); }

.x-footer { background: var(--x-surface); border-top: 1px solid var(--x-line); padding-bottom: env(safe-area-inset-bottom); }
.x-footer__inner { display: flex; flex-direction: column; gap: var(--x-space-10); padding-top: var(--x-space-14); padding-bottom: var(--x-space-7); }
.x-footer__top { display: flex; flex-wrap: wrap; gap: var(--x-space-12); }
.x-footer__about { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.x-footer__brand { display: flex; align-items: center; gap: 10px; font-size: 21px; color: var(--x-ink); }
.x-footer__brand img { width: 28px; height: 28px; }
.x-footer__nav { flex: 3 1 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--x-space-8); font-size: var(--x-text-sm); }
.x-footer__col { display: flex; flex-direction: column; gap: var(--x-space-2); }
.x-footer__col h2 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--x-ink); margin-bottom: var(--x-space-1); }
.x-footer__col a, .x-footer__col span { color: var(--x-muted); padding: 4px 0; }
.x-footer__bottom { border-top: 1px solid var(--x-line-soft); padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--x-space-4); font-size: 13px; color: var(--x-subtle); }
.x-footer__meta { display: flex; flex-wrap: wrap; gap: 18px; }
.x-footer__install { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: var(--x-tap); padding: 0 18px; border: 1px solid var(--x-line-2); border-radius: var(--x-r-pill); font-size: var(--x-text-sm); color: var(--x-ink); }
.x-footer__hint { display: flex; gap: 6px; align-items: flex-start; font-size: var(--x-text-xs); line-height: 1.5; color: var(--x-subtle); }
.x-footer__hint .x-icon { margin-top: 1px; }
.x-footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.x-footer__end .x-lang > summary { border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-ink-2); font-size: 13px; padding: 0 14px; }
.x-lang--up .x-lang__list { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.x-footer__sign { display: flex; align-items: center; gap: var(--x-space-2); color: var(--x-subtle); }
.x-footer__sign img { height: 26px; width: auto; opacity: 0.85; }
@media (hover: hover) { .x-footer__col a:hover { color: var(--x-blue); } }

.x-root { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--x-space-6); }
.x-root__langs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--x-space-2); }
.x-root__langs a { display: inline-flex; align-items: center; min-height: var(--x-tap); padding: 0 var(--x-space-4); border: 1px solid var(--x-line); border-radius: var(--x-r-pill); background: var(--x-surface); color: var(--x-ink-2); }

.x-legal { max-width: 760px; display: flex; flex-direction: column; gap: var(--x-space-5); }
.x-legal__back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--x-text-sm); min-height: var(--x-tap); }
.x-legal__title { font-family: var(--x-font-display); font-size: var(--x-h2); line-height: 1.05; }
.x-legal__body { font-size: var(--x-text-lg); line-height: 1.7; color: var(--x-ink-2); }
.x-legal__section { display: flex; flex-direction: column; gap: var(--x-space-2); padding-top: var(--x-space-4); border-top: 1px solid var(--x-line-soft); }
.x-legal__h { font-family: var(--x-font-sans); font-weight: var(--x-weight-regular); font-size: var(--x-text-xl); line-height: 1.3; letter-spacing: var(--x-tracking-tight); }
.x-legal__p { font-size: var(--x-text-md); line-height: 1.7; color: var(--x-ink-2); }
.x-operator { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--x-line); border-radius: var(--x-r-md); background: var(--x-surface); overflow: hidden; }
.x-operator__row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--x-space-4); padding: 14px 20px; border-top: 1px solid var(--x-line-soft); font-size: var(--x-text-md); }
.x-operator__row:first-child { border-top: 0; }
.x-operator dt { color: var(--x-subtle); }
.x-operator dd { margin: 0; color: var(--x-ink); overflow-wrap: anywhere; }
@media (max-width: 520px) { .x-operator__row { grid-template-columns: 1fr; gap: 2px; } }
.x-legal__draft { display: flex; gap: 10px; align-items: flex-start; font-size: var(--x-text-sm); color: var(--x-violet-ink); background: var(--x-violet-bg); border-radius: var(--x-r-sm); padding: 14px 16px; }