/* Veydan — style.css
   Single stylesheet for the whole site: tokens, base, components, sections, animations,
   tablet and mobile layouts. Cascade order = former link order
   (tokens → base → animations → components → sections → responsive → mobile); keyframes-only
   animations moved to section 13 (no selectors, order-independent), .page moved to section 02
   (only rule targeting .page).
   Breakpoints: ≤999.98 / 899.98 / 859.98 / 759.98 / 599.98 — tablet & intermediate (section 14);
                ≤767.98 — Mobile only (section 15); ≤374.98 — Small phones only (section 16).
   Docs: design-system/VEYDAN-DESIGN-SYSTEM.md */

/* ==================================================
   01. DESIGN TOKENS
   Shared colors, fonts, type scale, spacing, radius and motion
   ================================================== */

:root{
  --font-display:'Geologica',sans-serif;
  --font-body:'Golos Text',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --text-display-hero:clamp(40px,6.4vw,96px);
  --text-display-statement:clamp(32px,7.2vw,112px);
  --text-h1:clamp(34px,5vw,72px);
  --text-h2:clamp(24px,2.4vw,36px);
  --text-h3:clamp(17px,1.4vw,20px);
  --text-body-lg:clamp(17px,1.4vw,19px);
  --text-body:15px;
  --text-ui:15px;
  --text-small:14px;
  --text-label:12px;
  --text-label-xs:11px;
  --text-label-lg:13px;
  --text-product-name-sm:20px;
  --leading-display:0.94;
  --leading-h1:0.98;
  --leading-h3:1.3;
  --leading-body:1.6;
  --leading-small:1.55;
  --tracking-display:-0.04em;
  --tracking-heading:-0.03em;
  --tracking-h3:-0.01em;
  --tracking-label:0.1em;
  --tracking-label-xs:0.08em;
  --bg:#07080D;
  --bg-rgb:7,8,13;
  --ink-rgb:255,255,255;
  --text-strong:#FFFFFF;
  --sync-plain:#B4F0D9;
  --bg-featured:#0D0F17;
  --header-bg:rgba(7,8,13,0.78);
  --surface:#0B0D15;
  --surface-raised:#0E1019;
  --surface-hover:rgba(255,255,255,0.03);
  --text-primary:#ECEDEF;
  --text-secondary:#C5C9CF;
  --text-muted:#9097A1;
  --text-disabled:#6A6F76;
  --border-subtle:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.14);
  --border-strong:rgba(255,255,255,0.25);
  --color-space:#0198FB;
  --color-chat:#A838FA;
  --color-pass:#FBA80A;
  --color-notes:#06C787;
  --color-space-light:#6CC4FF;
  --color-chat-light:#D29BFF;
  --color-pass-light:#FFC94D;
  --color-notes-light:#4FE3AE;
  --gradient-brand:linear-gradient(90deg,#0198FB,#A838FA);
  --gradient-brand-ext:linear-gradient(90deg,#0198FB,#A838FA 70%,#D29BFF);
  --gradient-hero:linear-gradient(90deg,#0198FB 0%,#6E5BFB 30%,#A838FA 52%,#FBA80A 78%,#06C787 100%);
  --gradient-cta:linear-gradient(100deg,#0198FB,#6E5BFB 55%,#A838FA);
  --gradient-cta-hover:linear-gradient(100deg,#22A8FF,#8466FF 55%,#B455FF);
  --gradient-products:linear-gradient(90deg,#0198FB,#A838FA,#FBA80A,#06C787);
  --glow-cta:0 12px 44px -8px rgba(1,152,251,0.75);
  --glow-cta-hover:0 14px 56px -6px rgba(168,56,250,0.85);
  --shadow-phone:drop-shadow(0 30px 50px rgba(0,0,0,0.55));
  --container:1440px;
  --gutter:clamp(20px,4vw,56px);
  --space-section:clamp(72px,8vw,120px);
  --space-section-lg:clamp(88px,11vw,160px);
  --space-panel:clamp(18px,2.4vw,36px);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --radius-xs:3px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-full:999px;
  --duration-fast:0.2s;
  --duration-base:0.4s;
  --duration-panel:0.5s;
  --duration-ambient:0.8s;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.45,0,.25,1);
}

/* ==================================================
   02. BASE & PAGE
   Reset, body, links, focus, page root
   ================================================== */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:#0198FB}
summary::-webkit-details-marker{display:none}
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible{outline:2px solid var(--color-space-light);outline-offset:3px}
::selection{background:#0198FB;color:var(--bg)}

.page {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  background: var(--bg);
  overflow-x: clip;
}

/* ==================================================
   03. SHARED COMPONENTS
   Used in more than one section
   ================================================== */

.heading-line {
  display: block;
  white-space: nowrap;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-space {
  color: #0198FB;
}

.text-chat {
  color: #A838FA;
}

.text-pass {
  color: #FBA80A;
}

.text-notes {
  color: #06C787;
}

.section-anchored {
  scroll-margin-top: 68px;
  position: relative;
  padding: var(--space-section-lg) 0 0;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

.section-heading__accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section {
  position: relative;
  padding: var(--space-section-lg) 0 0;
}

.body-text-muted {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ==================================================
   04. HEADER
   ================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb),0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header__logo-link {
  display: flex;
  align-items: center;
}

.header__logo {
  height: 36px;
  width: auto;
  display: block;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__nav-link {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--duration-fast) ease;
}

.header__nav-link:hover {
  color: var(--text-primary) !important;
}

/* Language switcher (js/i18n.js) — desktop / tablet dropdown in .header__nav */
.header__lang {
  position: relative;
}

.header__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.header__lang-toggle:hover,
.header__lang-toggle[aria-expanded="true"] {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.header__lang-chevron {
  transition: transform var(--duration-fast) ease;
}

[aria-expanded="true"] > .header__lang-chevron {
  transform: rotate(180deg);
}

.header__lang-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 272px;
  max-height: min(70vh, 580px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7);
}

.header__lang-list[hidden] {
  display: none;
}

.header__lang-option {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-body);
  cursor: pointer;
  outline: none;
}

.header__lang-option:hover,
.header__lang-option:focus-visible {
  background: rgba(var(--ink-rgb),0.05);
  color: var(--text-primary);
}

.header__lang-option:focus-visible {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.header__lang-option-code {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.header__lang-check {
  visibility: hidden;
  color: var(--color-chat);
}

.header__lang-option--active {
  background: rgba(168,56,250,0.14);
  color: var(--text-primary);
}

.header__lang-option--active .header__lang-option-code {
  color: var(--color-chat-light);
}

.header__lang-option--active .header__lang-check {
  visibility: visible;
}

.header__download {
  margin-left: 8px;
  background: var(--btn-light-bg);
  color: var(--btn-light-text);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  height: 40px;
  font-size: var(--text-small);
  display: inline-flex;
  align-items: center;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}


/* ==================================================
   05. HERO — Keystone (all modes; Tablet / Mobile overrides are inside this section)
   Headline split by the Veydan shield: "All your accounts" | shield | "One space". The shield is one SVG on a 400×400 grid —
   four zones (top Notes · left Chat · right Space · centre V Pass), each with its screenshot clipped to the zone, a crisp
   contour and a soft inward glow; coloured fields spread behind it; the outer neon pulses after the intro.
   JS: animations.js ksFit() (headline columns + shoulder guide). Buttons: §12b.
   ================================================== */

/* Hero (Keystone): split headline, the Veydan Space logo in the middle, mountain background. Site tokens; scoped to .ks. */
.ks{--space:var(--color-space);--chat:var(--color-chat);--pass:var(--color-pass);--notes:var(--color-notes);--space-l:var(--color-space-light);--ease-expo:cubic-bezier(.16,1,.3,1)}
.hero.ks{padding-top:clamp(20px,4vh,44px)}
.ks .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0;padding:0;list-style:none;font-family:var(--font-mono);font-weight:500;font-size:13px;line-height:1;color:var(--text-secondary)}
.ks .tag{display:flex;align-items:center;gap:9px}
.ks .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.ks .accent{background:var(--gradient-cta);-webkit-background-clip:text;background-clip:text;color:transparent}
.ks__platforms{font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--text-muted)}
.ks__platforms .hero__platform--free{color:var(--color-notes-light)}
.ks__title-a,.ks__title-b{min-width:0;overflow-wrap:normal}
.ks__fit{display:block;white-space:nowrap}
.is-final .ks,.is-final .ks *,.is-final .ks *::before,.is-final .ks *::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important}
@media (prefers-reduced-motion:reduce){.ks,.ks *,.ks *::before,.ks *::after{animation:none!important}}
.ks{
  --shield:min(520px,54vh,38vw);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:calc(100svh - var(--header-h));
  display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:clamp(14px,2.6vh,28px);
  padding:clamp(20px,4vh,44px) var(--gutter) clamp(16px,3vh,32px);
  background:var(--bg);
}
.ks__atmos{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--bg-rgb),0) 72%,var(--bg) 100%),
    radial-gradient(60% 55% at 50% 45%,rgba(var(--bg-rgb),0.10),rgba(var(--bg-rgb),0.62) 100%),
    url(../assets/hero-bg-dark.jpg?v=2.2.1) 50% 100% / cover no-repeat;
  animation:ksFade 1.1s var(--ease-out) both}
.ks__stage{display:grid;grid-template-columns:minmax(0,1fr) var(--shield) minmax(0,1fr);align-items:stretch;gap:clamp(20px,3vw,48px);width:100%;max-width:1344px}
.ks__title{margin:0;display:contents;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-0.03em;line-height:0.94;font-size:clamp(34px,min(4.5vw,7.6vh),72px)}
.ks__title-a,.ks__title-b{grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:0;font:inherit;text-transform:inherit;letter-spacing:inherit;line-height:inherit;font-size:clamp(34px,min(4.5vw,7.6vh),72px);font-family:var(--font-display);font-weight:600}
.ks__title-a{grid-column:1;text-align:right;align-items:flex-end;padding-bottom:8%;animation:ksFromL .9s var(--ease-expo) .1s both}
.ks__title-b{grid-column:3;text-align:left;align-items:flex-start;padding-top:8%;animation:ksFromR .9s var(--ease-expo) .18s both}
.ks__title-b .accent{display:block;padding-bottom:.06em;filter:drop-shadow(0 0 22px rgba(110,91,251,0.30))}
.ks__rule{display:block;width:clamp(60px,8vw,120px);height:1px;margin:18px 0 0;background:linear-gradient(90deg,var(--space-l),rgba(168,56,250,0))}
.ks__title-a .ks__rule{margin-left:auto;background:linear-gradient(270deg,var(--space-l),rgba(168,56,250,0))}

/* Hero CTAs — geometry, weight and colours come from the button system (§12b); this restores the flex centring the old Hero section carried */
.hero__actions{gap:12px}
.hero__button--primary,.hero__button--secondary{display:flex;align-items:center;justify-content:center;font-size:var(--text-body)}
/* "All your / accounts" stays two lines (each fitted on its own) */
@media (min-width:1200px),(min-width:768px) and (orientation:landscape){.ks__title-a .ks__line{display:block}}
/* ---------- the shield — the original Veydan Space logo ---------- */
.ks__shield{grid-column:2;grid-row:1;position:relative;isolation:isolate;width:var(--shield);height:var(--shield);align-self:center}
.ks__halo{position:absolute;inset:-30%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(1,152,251,0.30),rgba(110,91,251,0.16) 45%,transparent 72%);
  animation:ksFade 1.4s var(--ease-out) .1s both}
.ks__logo{display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(1,152,251,0.40));
  animation:ksLogo 1.1s var(--ease-expo) .15s both}
@keyframes ksLogo{from{opacity:0;transform:scale(.85)}}
.ks__foot{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vh,22px);max-width:760px;text-align:center}
.ks__desc{margin:0;max-width:64ch;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--text-secondary);text-wrap:pretty;animation:ksUp .8s var(--ease-expo) .3s both}
.ks__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;animation:ksUp .8s var(--ease-expo) .38s both}
.ks .tags{animation:ksFade .6s var(--ease-out) .05s both}
.ks__platforms{margin:0;text-align:center;animation:ksFade .8s var(--ease-out) .5s both}

@keyframes ksFade{from{opacity:0}}
@keyframes ksFromL{from{opacity:0;transform:translateX(-14px)}}
@keyframes ksFromR{from{opacity:0;transform:translateX(14px)}}
@keyframes ksUp{from{opacity:0;transform:translateY(10px)}}

/* Tablet / compact desktop */
@media (max-width:1199.98px){.ks{--shield:min(420px,50vh,36vw)}}
@media (min-width:768px) and (max-width:1199.98px) and (orientation:portrait){
  .ks{--shield:min(400px,52vw,34svh);grid-template-rows:auto auto auto auto;gap:22px}
  .ks__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--shield) auto;justify-items:center;gap:14px}
  .ks__title-a,.ks__title-b{grid-column:1;text-align:center;align-items:center;padding:0;font-size:clamp(44px,7.4vw,64px)}
  .ks__title-a{grid-row:1;display:block}.ks__shield{grid-column:1;grid-row:2}.ks__title-b{grid-row:3}
  .ks__rule{display:none}
}
/* Mobile — vertical keystone; lighter light: no inner blur, no travelling pulse, no idle facet cycle */
@media (max-width:767.98px){
  .ks{--shield:min(250px,64vw,31svh);grid-template-rows:auto auto auto auto;gap:14px;padding:18px 16px 18px}
  .ks__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--shield) auto;justify-items:center;gap:10px}
  .ks__title-a,.ks__title-b{grid-column:1;text-align:center;align-items:center;padding:0;font-size:clamp(30px,10.4vw,42px)}
  .ks__title-a{grid-row:1;display:block}.ks__shield{grid-column:1;grid-row:2}.ks__title-b{grid-row:3}
  .ks__rule{display:none}
  

  
  
  
  .ks__desc{font-size:15px;line-height:1.5}
  .ks__foot{width:100%}
  .ks__actions{flex-direction:column;flex-wrap:nowrap;align-items:stretch;width:100%;gap:8px}
  .ks__actions a{width:100%;justify-content:center}
  .ks__platforms{font-size:12px}
}

/* ==================================================
   06. APPS
   Catalog accordion, Space tabs, app panels
   ================================================== */

.apps {
  scroll-margin-top: 68px;
  padding: var(--space-section-lg) 0 0;
}

.apps__intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px 64px;
  margin-top: var(--space-7);
}

.apps__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  margin: 0;
  color: var(--text-primary);
}

.apps__title-accent {
  background: linear-gradient(90deg,var(--color-space) 0%,var(--color-chat) 55%,var(--color-chat-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(168,56,250,0.35));
}

.apps__lead {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-small);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.apps__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-8);
  overflow-anchor: none;
}

.apps__row--initial-open {
  position: relative;
  overflow-anchor: none;
  border: 1px solid #0198FB66;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(60% 40% at 100% 0%, #0198FB22, transparent 70%), var(--surface-raised);
  box-shadow: 0 40px 120px -70px #0198FB;
  transition: border-color 0.4s ease, box-shadow 0.8s ease, background 0.4s ease;
}

/* Catalog row side bars — shared */
.apps__row-bar--space,
.apps__row-bar--chat,
.apps__row-bar--pass,
.apps__row-bar--notes {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  transition: opacity var(--duration-base) ease;
}

.apps__row-bar--space {
  background: #0198FB;
  box-shadow: 0 0 18px 1px #0198FB;
  opacity: 1;
}

.apps__row-header {
  display: grid;
  grid-template-columns: 36px minmax(0,1.1fr) minmax(0,1fr) 40px;
  align-items: center;
  gap: clamp(14px,2vw,32px);
  padding: clamp(16px,1.8vw,24px) clamp(18px,2.4vw,36px);
  cursor: pointer;
}

.apps__row-header:hover {
  background: var(--surface-hover) !important;
}

.apps__number--initial-active {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-xs);
  color: #0198FB;
  transition: color var(--duration-base) ease;
}

.apps__row-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Catalog row icons — shared */
.apps__row-icon--space,
.apps__row-icon--chat,
.apps__row-icon--pass,
.apps__row-icon--notes {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: none;
}

.apps__row-icon--space {
  filter: drop-shadow(0 0 14px #0198FB55);
}

.apps__row-name-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.apps__row-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  white-space: nowrap;
}

.apps__row-slogan--initial-open {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-lg);
  line-height: 1.25;
  color: #0198FB;
  text-wrap: pretty;
  transition: color var(--duration-base) ease;
}

.apps__row-toggle--initial-open {
  width: 40px;
  height: 40px;
  border: 1px solid #0198FB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #0198FB;
  transform: rotate(45deg);
  transition: transform var(--duration-panel) var(--ease-out), border-color var(--duration-base) ease, color var(--duration-base) ease;
  justify-self: end;
}

.apps__row-collapse--initial-open {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.55s cubic-bezier(.22,.61,.36,1);
}

.apps__row-collapse-inner {
  overflow: hidden;
  min-height: 0;
}

.apps__panel--initial-open {
  padding: 0 var(--space-panel) var(--space-6);
  opacity: 1;
  filter: blur(0px);
  transition: opacity 0.5s ease 0.18s, filter 0.5s ease 0.18s;
}

.apps__panel-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 880px;
  margin-bottom: var(--space-5);
}

.apps__panel-subtitle {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.apps__panel-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.apps__panel-note {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--text-muted);
  text-wrap: pretty;
}

.space-tabs {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.space-tabs__button--initial-active {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(1,152,251,0.6);
  background: rgba(1,152,251,0.10);
  box-shadow: 0 0 28px -10px #0198FB;
  transition: background var(--duration-base) ease, border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}

.space-tabs__button--initial-active:hover,
.space-tabs__button--initial-inactive:hover {
  border-color: rgba(1,152,251,0.45) !important;
}

.space-tabs__title--initial-active {
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  transition: color var(--duration-base) ease;
}

.space-tabs__button--initial-inactive {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--ink-rgb),0.08);
  background: rgba(var(--ink-rgb),0.03);
  box-shadow: none;
  transition: background var(--duration-base) ease, border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}


.space-tabs__number--initial-inactive {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-xs);
  color: #6A6F76;
  transition: color var(--duration-base) ease;
}

.space-tabs__title--initial-inactive {
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-muted);
  transition: color var(--duration-base) ease;
}

/* App screenshot frames — shared */
.apps__screenshot--space,
.apps__screenshot--chat,
.apps__screenshot--pass,
.apps__screenshot--notes {
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
}

.apps__screenshot--space {
  border: 1px solid #0198FB44;
  box-shadow: 0 24px 60px -40px rgba(1,152,251,0.45);
  aspect-ratio: 1584 / 983;
}

/* Space screenshot slides — shared */
.space-shots__image--initial-active,
.space-shots__image--initial-inactive {
  position: absolute;
  left: -3.66%;
  top: -4.68%;
  width: 107.32%;
  height: auto;
  max-width: none;
  display: block;
  transition: opacity 0.5s ease;
}

.space-shots__image--initial-active {
  opacity: 1;
}

.space-shots__image--initial-inactive {
  opacity: 0;
}

.apps__panel-columns {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(20px,3vw,48px);
  margin-top: var(--space-6);
  align-items: start;
}

.space-features__stack {
  display: grid;
}

.space-features__item--initial-active {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.space-features__accent {
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 1px;
  background: #0198FB;
  box-shadow: 0 0 12px 1px #0198FB;
}

.space-features__counter {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: #0198FB;
}

.apps__feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  margin: 0;
  text-wrap: balance;
}

.space-features__item--initial-inactive {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.space-features__list--initial-active {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.apps__points {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}

.apps__point {
  padding: 12px 26px 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.space-features__list--initial-inactive {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.apps__panel-footer {
  display: flex;
  flex-direction: column;
  gap: clamp(16px,1.8vw,22px);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.space-highlights {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px clamp(24px,3vw,48px);
}

.space-highlights__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.space-highlights__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-h3);
  color: var(--text-primary);
  line-height: var(--leading-h3);
}

.space-highlights__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-space);
  box-shadow: 0 0 8px 1px var(--color-space);
}

.space-highlights__text {
  font-size: var(--text-body);
  line-height: var(--leading-small);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.apps__panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.apps__cta--space {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text-primary);
  border: 1px solid #0198FB;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 24px -8px #0198FB;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.apps__row--initial-closed {
  position: relative;
  overflow-anchor: none;
  border: 1px solid rgba(var(--ink-rgb),0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: none;
  transition: border-color 0.4s ease, box-shadow 0.8s ease, background 0.4s ease;
}

.apps__row-bar--chat {
  background: #A838FA;
  box-shadow: 0 0 18px 1px #A838FA;
  opacity: 0.55;
}

.apps__row-number--initial-closed {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-xs);
  color: var(--text-muted);
  transition: color var(--duration-base) ease;
}

.apps__row-icon--chat {
  filter: drop-shadow(0 0 14px #A838FA55);
}


.apps__row-slogan--initial-closed {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-lg);
  line-height: 1.25;
  color: var(--text-secondary);
  text-wrap: pretty;
  transition: color var(--duration-base) ease;
}

.apps__row-toggle--initial-closed {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--ink-rgb),0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--text-primary);
  transform: rotate(0deg);
  transition: transform var(--duration-panel) var(--ease-out), border-color var(--duration-base) ease, color var(--duration-base) ease;
  justify-self: end;
}

.apps__row-collapse--initial-closed {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(.22,.61,.36,1);
}

.apps__panel--initial-closed {
  padding: 0 var(--space-panel) var(--space-6);
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.apps__screenshot--chat {
  border: 1px solid #A838FA44;
  box-shadow: 0 40px 110px -50px #A838FA;
  aspect-ratio: 2240 / 1230;
}

.apps__gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.apps__gallery-image {
  position: absolute;
  left: -3.57%;
  top: -5.69%;
  width: 107.14%;
  height: auto;
  max-width: none;
  display: block;
}

.apps__feature-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  position: relative;
}

.apps__feature-accent--chat {
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 1px;
  background: #A838FA;
  box-shadow: 0 0 12px 1px #A838FA;
}

.apps__feature-lead {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  color: var(--text-primary);
  text-wrap: pretty;
}

.apps__feature-details {
  display: flex;
  flex-direction: column;
}

.apps__details {
  border-bottom: 1px solid var(--border-subtle);
}

.apps__details-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary);
}

.apps__details-summary:hover {
  color: var(--text-primary) !important;
}

.apps__details-icon--chat {
  flex: none;
  width: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: #A838FA;
}

.apps__details-text {
  margin: 0 0 14px;
  padding-right: 26px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-muted);
  text-wrap: pretty;
}

.apps__cta--chat {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text-primary);
  border: 1px solid #A838FA;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 24px -8px #A838FA;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.apps__alpha-note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted);
}


.apps__row-bar--pass {
  background: #FBA80A;
  box-shadow: 0 0 18px 1px #FBA80A;
  opacity: 0.55;
}

.apps__row-icon--pass {
  filter: drop-shadow(0 0 14px #FBA80A55);
}

.apps__screenshot--pass {
  border: 1px solid #FBA80A44;
  box-shadow: 0 40px 110px -50px #FBA80A;
  aspect-ratio: 2240 / 1230;
}

.apps__feature-accent--pass {
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 1px;
  background: #FBA80A;
  box-shadow: 0 0 12px 1px #FBA80A;
}

.apps__cta--pass {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text-primary);
  border: 1px solid #FBA80A;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 24px -8px #FBA80A;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.apps__row-bar--notes {
  background: #06C787;
  box-shadow: 0 0 18px 1px #06C787;
  opacity: 0.55;
}

.apps__row-icon--notes {
  filter: drop-shadow(0 0 14px #06C78755);
}

.apps__screenshot--notes {
  border: 1px solid #06C78744;
  box-shadow: 0 40px 110px -50px #06C787;
  aspect-ratio: 2240 / 1230;
}

.apps__feature-accent--notes {
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 1px;
  background: #06C787;
  box-shadow: 0 0 12px 1px #06C787;
}

.apps__details-icon--notes {
  flex: none;
  width: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: #06C787;
}

.apps__cta--notes {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text-primary);
  border: 1px solid #06C787;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 24px -8px #06C787;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.apps__row--soon {
  display: grid;
  grid-template-columns: 36px minmax(0,1.1fr) minmax(0,1fr) 40px;
  align-items: center;
  gap: clamp(14px,2vw,32px);
  padding: clamp(16px,1.8vw,24px) clamp(18px,2.4vw,36px);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
}

.apps__row-number--soon {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-xs);
  color: var(--text-disabled);
}

.apps__soon-icon {
  width: 52px;
  height: 52px;
  flex: none;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.apps__soon-dot--space {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-space);
  opacity: 0.7;
}

.apps__soon-dot--chat {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-chat);
  opacity: 0.7;
}

.apps__soon-dot--pass {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-pass);
  opacity: 0.7;
}

.apps__soon-dot--notes {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-notes);
  opacity: 0.7;
}

.apps__row-name--soon {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: var(--text-disabled);
  white-space: nowrap;
}

/* ==================================================
   07. MODULES
   ================================================== */

.modules__glow {
  position: absolute;
  left: 72%;
  top: 62%;
  width: min(1100px,90vw);
  height: 900px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(1,152,251,0.11), rgba(110,91,251,0.07) 50%, transparent);
  pointer-events: none;
  z-index: -1;
}

.modules__layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px,6vw,96px);
  margin-top: 48px;
  align-items: center;
}

.modules__intro {
  flex: 1 1 380px;
  min-width: 0;
}

.modules__text {
  margin: var(--space-5) 0 0;
  max-width: 560px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.modules__diagram {
  flex: 1.2 1 460px;
  min-width: 0;
  position: relative;
  aspect-ratio: 16 / 11;
}

.modules__node--pass {
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #FBA80A2E, transparent 70%), var(--surface-raised);
  border: 1px solid #FBA80A;
  box-shadow: 0 0 56px -12px #FBA80A;
  transition: border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease, background var(--duration-ambient) ease;
}

.modules__node-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 4px;
}

.modules__node-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
}

.modules__node-meta {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--text-muted);
  white-space: nowrap;
}

.modules__node--space {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 20px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #0198FB12, transparent 70%), var(--surface-raised);
  border: 1px solid #0198FB55;
  box-shadow: 0 0 30px -20px #0198FB;
  transition: border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease, background var(--duration-ambient) ease;
}

.modules__node-icon--hub {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 4px;
}

.modules__node-name--hub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-primary);
  white-space: nowrap;
}

.modules__node--notes {
  position: absolute;
  left: 85%;
  top: 18%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #06C78712, transparent 70%), var(--surface-raised);
  border: 1px solid #06C78755;
  box-shadow: 0 0 30px -20px #06C787;
  transition: border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease, background var(--duration-ambient) ease;
}

.modules__node--chat {
  position: absolute;
  left: 85%;
  top: 82%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #A838FA12, transparent 70%), var(--surface-raised);
  border: 1px solid #A838FA55;
  box-shadow: 0 0 30px -20px #A838FA;
  transition: border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease, background var(--duration-ambient) ease;
}

/* ==================================================
   08. PRIVACY
   ================================================== */

.privacy__glow {
  position: absolute;
  left: 24%;
  top: 34%;
  width: min(1200px,95vw);
  height: 900px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(168,56,250,0.13), rgba(1,152,251,0.06) 55%, transparent);
  pointer-events: none;
  z-index: -1;
}

.privacy__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.privacy__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  margin: var(--space-7) 0 0;
  color: var(--text-primary);
}

.privacy__title-accent {
  display: block;
  margin-top: 0.35em;
  font-size: 0.72em;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
  background: linear-gradient(90deg,var(--color-space) 0%,var(--color-chat) 60%,var(--color-chat-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(168,56,250,0.4));
}

.privacy__lead {
  margin: var(--space-5) 0 0;
  max-width: 760px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.privacy__stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 40px clamp(28px,4vw,72px);
  margin-top: var(--space-8);
}

.privacy__stat {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px,2.4vw,32px);
  padding-top: clamp(20px,2.4vw,28px);
  border-top: 1px solid var(--border);
  position: relative;
  min-width: 0;
}

.privacy__stat-accent--space {
  position: absolute;
  left: 0;
  top: -1px;
  width: 64px;
  height: 1px;
  background: var(--color-space);
  box-shadow: 0 0 14px 1px var(--color-space);
}

.privacy__stat-number--space {
  flex: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(96px,11vw,168px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--color-space);
  text-shadow: 0 0 48px #0198FB99;
}

.privacy__stat-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  min-width: 0;
}

.privacy__stat-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  margin: 0;
  color: var(--text-primary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.privacy__stat-text {
  margin: 0;
  max-width: 440px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.privacy__stat-accent--chat {
  position: absolute;
  left: 0;
  top: -1px;
  width: 64px;
  height: 1px;
  background: var(--color-chat);
  box-shadow: 0 0 14px 1px var(--color-chat);
}

.privacy__stat-number--chat {
  flex: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(96px,11vw,168px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--color-chat);
  text-shadow: 0 0 48px #A838FA99;
}

.privacy__points {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: clamp(28px,4vw,72px);
  margin-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}

.privacy__point {
  display: grid;
  grid-template-columns: 14px minmax(0,1fr);
  gap: 4px 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.privacy__point-dot {
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--color-space-light);
  box-shadow: 0 0 10px 2px rgba(1,152,251,0.6);
}

.privacy__point-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  margin: 0;
  color: var(--text-primary);
}

/* ==================================================
   09. SYNC
   ================================================== */

.sync__glow {
  position: absolute;
  left: 50%;
  top: 62%;
  width: min(1000px,85vw);
  height: 760px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(1,152,251,0.10), rgba(1,152,251,0.04) 55%, transparent);
  pointer-events: none;
  z-index: -1;
}

.sync__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
  max-width: 820px;
}

.sync__lead {
  max-width: 640px;
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.sync__diagram {
  display: grid;
  grid-template-columns: minmax(0,0.8fr) 64px 168px 64px minmax(0,1.25fr);
  align-items: center;
  margin-top: var(--space-8);
}

.sync__devices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sync__devices-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.sync__device--initial-active {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(1,152,251,0.16), var(--surface-raised));
  border: 1px solid rgba(108,196,255,0.7);
  box-shadow: 0 0 26px -8px #0198FB;
  transition: background var(--duration-ambient) ease, border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease;
}

.sync__device-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text-primary);
}

.sync__device-desc {
  font-family: var(--font-body);
  font-size: var(--text-label-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync__device--initial-inactive {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid rgba(var(--ink-rgb),0.1);
  box-shadow: none;
  transition: background var(--duration-ambient) ease, border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease;
}

.sync__fan {
  position: relative;
  width: 64px;
  height: 302px;
  margin-top: 26px;
}

/* Narrow-only vertical connectors: hidden on the 5-column desktop grid, shown below 860px (§14). */
.sync__connector {
  display: none;
}

.sync__core {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 168px;
  align-self: stretch;
  padding-top: 81px;
}

.sync__app-icons {
  display: flex;
  gap: 6px;
  height: 30px;
  margin-bottom: 0;
}

.sync__app-icon--initial-active {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid #0198FB;
  box-shadow: 0 0 18px -2px #0198FB;
  opacity: 1;
  transition: opacity var(--duration-ambient) ease, border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease;
}

.sync__app-icon-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sync__app-icon--initial-inactive {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid rgba(var(--ink-rgb),0.14);
  box-shadow: none;
  opacity: 0.5;
  transition: opacity var(--duration-ambient) ease, border-color var(--duration-ambient) ease, box-shadow var(--duration-ambient) ease;
}

.sync__lock {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(168,56,250,0.28), rgba(1,152,251,0.12) 60%, var(--surface) 75%);
  border: 1px solid rgba(168,56,250,0.6);
  box-shadow: 0 0 60px -10px rgba(168,56,250,0.6), inset 0 0 30px -12px rgba(1,152,251,0.8);
}

.sync__lock-icon {
  position: relative;
}

/* the SVG carries dark-theme colours as attributes; CSS wins over them, so both themes follow the tokens */
.sync__lock-icon rect,.sync__lock-icon path{stroke:var(--text-primary)}
.sync__lock-icon circle{fill:var(--color-space-light)}

.sync__core-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.2;
  text-align: center;
  color: var(--text-primary);
}

.sync__core-meta {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
}

.sync__cipher {
  position: relative;
  display: block;
  width: 100%;
  height: 16px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-align: center;
}

.sync__storages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sync__storages-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  height: 16px;
}

.sync__storage-option--soon {
  all: unset;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px dashed rgba(var(--ink-rgb),0.1);
  cursor: default;
  opacity: 0.5;
  transition: background var(--duration-ambient) ease, border-color var(--duration-ambient) ease, opacity var(--duration-ambient) ease;
}

.sync__storage-option--soon:hover,
.sync__storage-option--initial-active:hover,
.sync__storage-option--initial-inactive:hover {
  border-color: rgba(108,196,255,0.55) !important;
}

.sync__storage-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sync__storage-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync__soon-badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-label-xs);
  letter-spacing: var(--tracking-label-xs);
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 500;
}

.sync__storage-desc {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-label-xs);
  line-height: 1.35;
  color: var(--text-muted);
  text-wrap: pretty;
}

.sync__storage-option--initial-active {
  all: unset;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(1,152,251,0.14), rgba(168,56,250,0.10));
  border: 1px solid rgba(108,196,255,0.6);
  cursor: pointer;
  opacity: 1;
  transition: background var(--duration-ambient) ease, border-color var(--duration-ambient) ease, opacity var(--duration-ambient) ease;
}


.sync__storage-option--initial-inactive {
  all: unset;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid rgba(var(--ink-rgb),0.1);
  cursor: pointer;
  opacity: 0.7;
  transition: background var(--duration-ambient) ease, border-color var(--duration-ambient) ease, opacity var(--duration-ambient) ease;
}


/* ==================================================
   10. ANDROID
   ================================================== */

.android__glow {
  position: absolute;
  left: 50%;
  top: 66%;
  width: min(1400px,100vw);
  height: 900px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(1,152,251,0.10), rgba(168,56,250,0.08) 50%, transparent);
  pointer-events: none;
  z-index: -1;
}

.android__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
}

.android__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-space-light);
}

.android__soon-badge {
  font-family: var(--font-mono);
  font-size: var(--text-label-xs);
  letter-spacing: var(--tracking-label-xs);
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-weight: 500;
}

.android__title {
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  margin: 18px 0 0;
}

.android__lead {
  margin: var(--space-5) 0 0;
  max-width: 680px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.android__cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  margin-top: var(--space-6);
  background: var(--btn-light-bg);
  color: var(--btn-light-text);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-body);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.android__showcase {
  position: relative;
  margin-top: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: radial-gradient(55% 60% at 30% 40%, rgba(1,152,251,0.16), transparent 70%), radial-gradient(50% 60% at 75% 60%, rgba(168,56,250,0.16), transparent 70%), linear-gradient(rgba(var(--ink-rgb),0.035) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(var(--ink-rgb),0.035) 1px, transparent 1px) 0 0 / 48px 48px, var(--surface);
}

.android__phones {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(16px,2.6vw,40px);
  padding: clamp(28px,4vw,64px) clamp(20px,4vw,72px);
  overflow-x: visible;
  scroll-snap-type: x mandatory;
}

.android__phone {
  flex: none;
  width: 100%;
  max-width: 300px;
  justify-self: center;
  scroll-snap-align: center;
}

.android__phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 450 / 997;
  border-radius: 13% / 6%;
  overflow: hidden;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
}

/* Android phone crops — shared */
.android__shot--notes,
.android__shot--chat,
.android__shot--codes,
.android__shot--passwords {
  position: absolute;
  height: auto;
  max-width: none;
  display: block;
}

.android__shot--notes {
  left: -349.33%;
  top: -3.01%;
  width: 462.67%;
}

.android__shot--chat {
  left: -337.38%;
  top: -10.98%;
  width: 455.41%;
}

.android__shot--codes {
  left: -237.33%;
  top: -3.01%;
  width: 462.67%;
}

.android__shot--passwords {
  left: -125.33%;
  top: -3.01%;
  width: 462.67%;
}

/* Carousel dots — shown only below 1200 (§14 / §15) */
.android__dots {
  display: none;
}

.android__highlights {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border: 1px solid var(--border-subtle);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: var(--surface);
}

.android__highlight--first {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px,2vw,26px);
  border-left: 0;
}

.android__highlight-text {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.android__highlight {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px,2vw,26px);
  border-left: 1px solid rgba(var(--ink-rgb),0.08);
}

/* ==================================================
   11. SOURCE & DOWNLOADS
   ================================================== */

.source__glow {
  position: absolute;
  left: 70%;
  top: 22%;
  width: min(900px,80vw);
  height: 700px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(1,152,251,0.06), transparent);
  pointer-events: none;
  z-index: -1;
}

.source__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,480px),1fr));
  gap: clamp(40px,5vw,80px);
  align-items: center;
  margin-top: 48px;
}

.source__intro {
  min-width: 0;
}

.source__title-accent {
  background: var(--gradient-brand-ext);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.source__lead {
  margin: 24px 0 0;
  max-width: 600px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.source__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

.source__stack-tag {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
}

.source__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-6);
}

.source__button--primary {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  background: var(--btn-light-bg);
  color: var(--btn-light-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.source__button--secondary {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.source__license-note {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--text-muted);
  text-wrap: pretty;
}

.terminal {
  min-width: 0;
  position: relative;
}

.terminal__glow {
  position: absolute;
  inset: 8% -4% -6% 10%;
  background: radial-gradient(closest-side, rgba(168,56,250,0.35), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.terminal__window {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
  overflow: hidden;
}

.terminal__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-hover);
}

.terminal__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3A3D46;
}

.terminal__title {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--text-muted);
  margin-right: 43px;
}

.terminal__body {
  padding: clamp(18px,2vw,26px);
  font-family: var(--font-mono);
  font-size: clamp(12px,1vw,14px);
  line-height: 1.85;
  overflow-x: auto;
}

.terminal__line--initial-visible {
  white-space: pre;
  opacity: 1;
  transition: opacity var(--duration-base) ease;
  color: var(--text-secondary);
}

.terminal__line--initial-hidden {
  white-space: pre;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  color: var(--text-secondary);
}

.terminal__line--comment {
  white-space: pre;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  color: #6A6F76;
}

.terminal__prompt--comment {
  color: #6A6F76;
}

.terminal__line--success {
  white-space: pre;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  color: var(--color-notes-light);
}

.terminal__prompt--success {
  color: var(--color-notes-light);
}

.downloads {
  margin-top: var(--space-8);
  scroll-margin-top: 90px;
}

.downloads__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
}

.downloads__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.downloads__scroll {
  margin-top: 24px;
  overflow-x: auto;
}

.downloads__table {
  min-width: 880px;
}

.downloads__head-row {
  display: grid;
  grid-template-columns: minmax(200px,1.3fr) repeat(4,minmax(150px,1fr));
  border-bottom: 1px solid transparent;
  border-image: var(--gradient-products) 1;
  padding: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.downloads__os-heading {
  color: var(--text-muted);
}

.downloads__row {
  display: grid;
  grid-template-columns: minmax(200px,1.3fr) repeat(4,minmax(150px,1fr));
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.downloads__app {
  display: flex;
  align-items: center;
  gap: 14px;
}

.downloads__app-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.downloads__app-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.downloads__app-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-product-name-sm);
  display: flex;
  gap: 8px;
  align-items: center;
}

.downloads__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.downloads__file-link {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
}


.downloads__files--mac {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

.downloads__files--mac .downloads__file-link {
  white-space: nowrap;
}


/* Download resolver (js/downloads.js) — service states only, all modes */
[data-download][aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

.download-status {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 44px 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--text-primary);
  transform: translate(-50%, 12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease, transform var(--duration-base) ease, visibility 0s linear var(--duration-base);
}

.download-status--visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) ease, transform var(--duration-base) ease;
}

.download-status__text {
  overflow-wrap: anywhere;
}

.download-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.download-status__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
}

.download-status__link:hover {
  border-color: var(--color-chat);
  color: var(--text-strong);
}

.download-status__close {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .download-status, .download-status--visible { transition: none; }
}

/* ==================================================
   12. FINAL CTA & FOOTER
   ================================================== */

.final {
  padding: var(--space-section-lg) 0;
  text-align: center;
  position: relative;
  background-image: linear-gradient(to bottom, var(--bg) 0%, rgba(var(--bg-rgb),0) 22%, rgba(var(--bg-rgb),0) 78%, var(--bg) 100%), radial-gradient(34% 42% at 50% 40%, rgba(168,56,250,0.26), transparent 70%), radial-gradient(28% 26% at 50% 18%, rgba(1,152,251,0.14), transparent 70%), linear-gradient(to right, rgba(var(--ink-rgb),0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, calc(100% / 12) 100%;
}

.final__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final__icons {
  display: flex;
  gap: clamp(10px,2vw,24px);
  justify-content: center;
}

.final__icon {
  width: clamp(52px,6vw,84px);
  height: auto;
}

.final__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-display-statement);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: var(--space-7) 0 0;
  color: var(--text-primary);
}

.final__title-accent {
  display: block;
  white-space: nowrap;
  background: var(--gradient-brand-ext);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(168,56,250,0.45));
}

/* Localisation: long translations (e.g. VI “Quyền kiểm soát của bạn”) may wrap; English keeps the approved single line */
/* Localisation: hide the page for up to 1.5 s while the first non-English translation loads (js/i18n.js) */
html.i18n-pending body {
  visibility: hidden;
}

/* ==================================================
   Localisation — Korean typography (html[lang="ko"])
   Brand fonts have no Hangul: Latin stays Geologica / Golos Text / JetBrains Mono, Hangul comes from Noto Sans KR
   (one predictable font instead of a mix of system fallbacks). Display line-heights (0.94–1.06) are tuned for
   Latin caps; Hangul syllables are taller and need ~1.2. Korean wraps between words (keep-all), not inside them.
   ================================================== */
html[lang="ko"] {
  --font-display: 'Geologica', 'Noto Sans KR', sans-serif;
  --font-body: 'Golos Text', 'Noto Sans KR', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans KR', monospace;
  word-break: keep-all;
  overflow-wrap: break-word;
}

html[lang="ko"] :is(.apps__feature-title, .apps__row-name) {
  line-height: 1.25;
}

/* ==================================================
   Localisation — Thai typography (html[lang="th"])
   Brand fonts have no Thai script: Latin stays Geologica / Golos Text / JetBrains Mono, Thai comes from Noto Sans Thai
   (loopless, matches the geometric display face). Thai stacks vowels and tone marks above and below the consonant, so
   Latin display line-heights (0.9–1.06) would push them outside the line box — and outside the painted area of the
   gradient (background-clip:text) accents. Thai is written without spaces between words: line breaks come from the
   browser's Thai dictionary (word-break: normal), never break-all. Negative display tracking is removed.
   ================================================== */
html[lang="th"] {
  --font-display: 'Geologica', 'Noto Sans Thai', sans-serif;
  --font-body: 'Golos Text', 'Noto Sans Thai', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans Thai', monospace;
  --leading-body: 1.7;
  --leading-small: 1.65;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Gradient accents: extra room so marks above / below the line stay inside the painted text box */
/* Unspaced Thai lines must be able to wrap; heading lines are nowrap for Latin compositions only */
html[lang="th"] .heading-line {
  white-space: normal;
}

html[lang="th"] :is(.apps__feature-title, .apps__row-name) {
  line-height: 1.4;
}

/* Small labels / mono captions: Latin tracking (0.04–0.12em) pulls Thai clusters apart */
html[lang="th"] [data-i18n] {
  letter-spacing: 0;
}

html:not([lang="en"]) .final__title-accent {
  white-space: normal;
  text-wrap: balance;
}

.final__lead {
  margin: var(--space-5) 0 0;
  max-width: 560px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-small);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: var(--space-6);
}

.final__button--secondary {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--text-body);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


.final__button--primary {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  background: var(--gradient-cta);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-weight: 600;
  box-shadow: 0 12px 44px -8px rgba(1,152,251,0.75);
  font-size: var(--text-body);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}


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

.footer {
  border-top: 1px solid var(--border-subtle);
}

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: var(--space-7) var(--space-8);
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 460px;
}

.footer__logo {
  height: 34px;
  width: auto;
  display: block;
  align-self: flex-start;
}

.footer__company {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-self: end;
  min-width: min(100%,320px);
}

.footer__company-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer__company-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.footer__company-name {
  font-weight: 600;
  color: var(--text-primary);
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.footer__contact-link {
  color: var(--text-primary);
}

.footer__contact-link:hover {
  color: var(--color-space-light) !important;
}

.footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--text-muted);
}

.footer__legal {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.footer__legal-link {
  color: var(--text-muted);
}

.footer__legal-link:hover {
  color: var(--text-primary) !important;
}

/* Legal documents (legal/**, generated by tools/build-legal.mjs) */
.footer__docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,max-content));
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.footer__docs-link {
  color: var(--text-secondary);
}

.footer__docs-link:hover {
  color: var(--color-space-light) !important;
}

.footer__docs-link--all {
  color: var(--text-muted);
}

/* Account deletion page (account/delete/) */
.footer__account-delete {
  align-self: flex-start;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--text-secondary);
}

.footer__account-delete:hover {
  color: var(--color-space-light) !important;
}

/* ==================================================
   12b. BUTTON SYSTEM
   One set of sizes, variants and states for every button-like link. Existing BEM classes are grouped here
   (no HTML / JS changes). Section rules above keep only placement; per-section hover rules were removed.
   Sizes:    compact 40 (Header) · standard 52 (CTAs) · file (Downloads chips)
   Variants: primary (CTA gradient) · secondary (outline) · light (light fill) · accent (product colour)
   ================================================== */
:root{
  --btn-height-compact:40px;
  --btn-height:52px;
  --btn-pad-compact:0 18px;
  --btn-pad:0 24px;
  --btn-radius:var(--radius-sm);
  --btn-weight:600;
  --btn-gap:12px;
  --btn-transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease, filter var(--duration-fast) ease, opacity var(--duration-fast) ease;
  --btn-light-bg:#ECEDEF;
  --btn-light-bg-hover:#FFFFFF;
  --btn-light-text:#07080D;
  --btn-secondary-border:var(--border-strong);
  --btn-secondary-border-hover:rgba(236,237,239,0.6);
  --btn-secondary-bg-hover:rgba(255,255,255,0.06);
  --btn-focus:#6CC4FF;
  --btn-focus-width:2px;
  --btn-focus-gap:4px;
}

/* --- shared geometry (standard size) --- */
.hero__button--primary,.hero__button--secondary,.final__button--primary,.final__button--secondary,
.source__button--primary,.source__button--secondary,.android__cta,
.apps__cta--space,.apps__cta--chat,.apps__cta--pass,.apps__cta--notes{
  height:var(--btn-height);padding:var(--btn-pad);border-radius:var(--btn-radius);
  font-weight:var(--btn-weight);gap:var(--btn-gap);transition:var(--btn-transition);
  justify-content:center;white-space:nowrap;max-width:100%;
}
/* --- compact size (Header) --- */
.header__download{
  height:var(--btn-height-compact);padding:var(--btn-pad-compact);border-radius:var(--btn-radius);
  font-weight:var(--btn-weight);transition:var(--btn-transition);
}
/* --- file size (Downloads chips) --- */
.downloads__file-link,.download-status__link{border-radius:var(--radius-xs);transition:var(--btn-transition)}
.header__mobile-download{border-radius:var(--btn-radius);font-weight:var(--btn-weight);gap:var(--btn-gap);transition:var(--btn-transition)}

/* --- primary: CTA gradient --- */
.hero__button--primary,.final__button--primary,.header__mobile-download{
  background:var(--gradient-cta);color:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),0.14),var(--glow-cta);
}
.hero__button--primary:hover,.final__button--primary:hover,.header__mobile-download:hover{
  background:var(--gradient-cta-hover);color:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),0.24),var(--glow-cta-hover);
}

/* --- secondary: outline --- */
.hero__button--secondary,.final__button--secondary,.source__button--secondary,.downloads__file-link,.download-status__link{
  background:transparent;border:1px solid var(--btn-secondary-border);color:var(--text-primary);
}
.hero__button--secondary:hover,.final__button--secondary:hover,.source__button--secondary:hover,
.downloads__file-link:hover,.download-status__link:hover{
  background:var(--btn-secondary-bg-hover);border-color:var(--btn-secondary-border-hover);color:var(--text-strong);
}

/* --- light: light fill, dark text --- */
.header__download,.source__button--primary{background:var(--btn-light-bg);color:var(--btn-light-text)}
.header__download:hover,.source__button--primary:hover{
  background:var(--btn-light-bg-hover);color:var(--btn-light-text);box-shadow:0 0 24px rgba(236,237,239,0.28);
}

/* --- accent: product colour. Android = Space-blue fill (light blue, dark text); app CTAs = outline in the app colour --- */
.android__cta{background:var(--color-space-light);color:var(--btn-light-text);box-shadow:0 0 22px -4px rgba(1,152,251,0.55)}
.android__cta:hover{background:#8FD4FF;color:var(--btn-light-text);box-shadow:0 0 32px rgba(1,152,251,0.7)}
.apps__cta--space{--btn-accent:1,152,251}
.apps__cta--chat{--btn-accent:168,56,250}
.apps__cta--pass{--btn-accent:251,168,10}
.apps__cta--notes{--btn-accent:6,199,135}
.apps__cta--space,.apps__cta--chat,.apps__cta--pass,.apps__cta--notes{
  background:transparent;border:1px solid rgb(var(--btn-accent));color:var(--text-primary);
  box-shadow:0 0 24px -8px rgb(var(--btn-accent));
}
.apps__cta--space:hover,.apps__cta--chat:hover,.apps__cta--pass:hover,.apps__cta--notes:hover{
  background:rgba(var(--btn-accent),0.12);color:var(--text-primary);box-shadow:0 0 30px -6px rgb(var(--btn-accent));
}

/* --- focus (keyboard) — same ring for every button --- */
.header__download:focus-visible,.header__mobile-download:focus-visible,.header__lang-toggle:focus-visible,
.hero__button--primary:focus-visible,.hero__button--secondary:focus-visible,
.final__button--primary:focus-visible,.final__button--secondary:focus-visible,
.source__button--primary:focus-visible,.source__button--secondary:focus-visible,.android__cta:focus-visible,
.apps__cta--space:focus-visible,.apps__cta--chat:focus-visible,.apps__cta--pass:focus-visible,.apps__cta--notes:focus-visible,
.downloads__file-link:focus-visible,.download-status__link:focus-visible{
  outline:var(--btn-focus-width) solid var(--btn-focus);outline-offset:var(--btn-focus-gap);
}

/* --- loading (download request running, js/downloads.js sets aria-busy) and disabled --- */
[data-download][aria-busy="true"]{cursor:progress;filter:saturate(0.6) brightness(0.85);pointer-events:none}
.header__download:is(:disabled,[aria-disabled="true"]),.header__mobile-download:is(:disabled,[aria-disabled="true"]),
.hero__button--primary:is(:disabled,[aria-disabled="true"]),.hero__button--secondary:is(:disabled,[aria-disabled="true"]),
.final__button--primary:is(:disabled,[aria-disabled="true"]),.final__button--secondary:is(:disabled,[aria-disabled="true"]),
.source__button--primary:is(:disabled,[aria-disabled="true"]),.source__button--secondary:is(:disabled,[aria-disabled="true"]),
.android__cta:is(:disabled,[aria-disabled="true"]),.downloads__file-link:is(:disabled,[aria-disabled="true"]),
:is(.apps__cta--space,.apps__cta--chat,.apps__cta--pass,.apps__cta--notes):is(:disabled,[aria-disabled="true"]){
  opacity:0.45;cursor:not-allowed;box-shadow:none;pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .header__download,.header__mobile-download,.hero__button--primary,.hero__button--secondary,
  .final__button--primary,.final__button--secondary,.source__button--primary,.source__button--secondary,.android__cta,
  .apps__cta--space,.apps__cta--chat,.apps__cta--pass,.apps__cta--notes,.downloads__file-link,.download-status__link{transition:none}
}

/* ==================================================
   13. ANIMATIONS
   Keyframes used by js/animations.js and inline orbit markup
   ================================================== */

@keyframes vSyIn{0%{transform:translateX(0);opacity:0}3%{opacity:1}18%{transform:translateX(100%);opacity:1}21%,100%{transform:translateX(100%);opacity:0}}
@keyframes vSyInV{0%{transform:translateY(0);opacity:0}3%{opacity:1}18%{transform:translateY(100%);opacity:1}21%,100%{transform:translateY(100%);opacity:0}}
@keyframes vSyCore{0%,16%,42%,100%{opacity:0}24%,32%{opacity:1}}
@keyframes vSyPlain{0%,14%{opacity:0}19%,27%{opacity:1}32%,100%{opacity:0}}
@keyframes vSyCipher{0%,29%{opacity:0}35%,58%{opacity:1}66%,100%{opacity:0}}
@keyframes vSyOut{0%,34%{offset-distance:0%;opacity:0}36%{opacity:1}58%{offset-distance:100%;opacity:1}61%,100%{offset-distance:100%;opacity:0}}
@keyframes vSyOutV{0%,34%{transform:translateY(0);opacity:0}36%{opacity:1}52%{transform:translateY(100%);opacity:1}55%,100%{transform:translateY(100%);opacity:0}}
@keyframes vSyHit{0%,56%{opacity:0}62%{opacity:1}82%,100%{opacity:0}}
@keyframes vSyInP{0%{offset-distance:0%;opacity:0}3%{opacity:1}18%{offset-distance:100%;opacity:1}21%,100%{offset-distance:100%;opacity:0}}
@keyframes vModOut{0%{left:var(--x1);top:var(--y1);opacity:0}10%{opacity:1}80%{left:var(--x2,50%);top:var(--y2,50%);opacity:1}100%{left:var(--x2,50%);top:var(--y2,50%);opacity:0}}
@keyframes vModIn{0%{left:var(--x2,50%);top:var(--y2,50%);opacity:0}10%{opacity:1}80%{left:var(--x1);top:var(--y1);opacity:1}100%{left:var(--x1);top:var(--y1);opacity:0}}
@keyframes vBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ==================================================
   14. RESPONSIVE — TABLET / COMPACT DESKTOP
   768–1199.98 Hero/Header (Tablet / Compact desktop), then ported width-based
   values (1000 / 900 / 860 / 760 / 600). Base states of responsive-only elements first.
   ================================================== */

/* Hero — see §05 (Keystone; Tablet / Mobile rules live there). */
@media (min-width:768px) and (max-width:1199.98px){
  .header__nav{gap:clamp(20px,2.6vw,32px)}
}

.apps__panel-slogan{display:none;margin:0 0 16px;font-family:var(--font-body);font-weight:500;font-size:var(--text-body-lg);line-height:1.25;text-wrap:pretty}
.sync__connector{display:none;position:relative;justify-self:center;width:1px;height:44px;background-size:1px 6px}
.sync__connector--in{background-image:linear-gradient(to bottom, rgba(1,152,251,0.7) 50%, transparent 50%)}
.sync__connector--out{background-image:linear-gradient(to bottom, rgba(168,56,250,0.7) 50%, transparent 50%)}

@media (max-width:999.98px){
  .apps__panel-columns{grid-template-columns:minmax(0,1fr)}
  .android__phones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .android__highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .android__highlights>:nth-child(3){border-left:0}
}
@media (max-width:899.98px){
  .apps__row-header,.apps__row--soon{grid-template-columns:28px minmax(0,1fr) 40px}
  .apps__row-header>p{display:none}
  .apps__row--soon>span:nth-child(3){display:none}
  .apps__panel-slogan{display:block}
}
@media (max-width:859.98px){
  .sync__diagram{grid-template-columns:minmax(0,1fr)}
  .sync__diagram>.sync__fan{display:none}
  .sync__connector{display:block}
  .sync__core{padding-top:0}
}
@media (max-width:759.98px){
  .privacy__stats,.privacy__points,.space-highlights{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599.98px){
  .space-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .android__phones{display:flex;overflow-x:auto}
  .android__phone{width:62vw}
  .android__highlights{grid-template-columns:minmax(0,1fr)}
  .android__highlights>*{border-left:0}
}

/* ---------- Tablet / Compact desktop only — Apps catalog & Veydan Space (768–1199.98) ----------
   Placed after the ported width rules so it overrides them inside the tablet range. */
@media (min-width:768px) and (max-width:1199.98px){
  .apps__intro{margin-top:var(--space-6);gap:24px}
  .apps__lead{max-width:720px}
  .apps__list{margin-top:var(--space-7)}
  /* Rows: identity column fixed so slogans align across all rows; slogan stays in the row */
  .apps__row-header,.apps__row--soon{
    grid-template-columns:28px minmax(0,232px) minmax(0,1fr) 40px;
    gap:16px;padding:20px 24px;
  }
  .apps__row-header>p{display:block;font-size:var(--text-body)}
  .apps__row--soon>span:nth-child(3){display:block}
  .apps__panel-slogan{display:none}
  .apps__row-identity>img,.apps__soon-icon{width:44px;height:44px}
  .apps__row-identity{gap:14px}
  /* Space panel */
  .apps__panel--initial-open,.apps__panel--initial-closed{padding:0 24px 28px}
  .apps__panel-header{max-width:680px;margin-bottom:20px}
  .space-tabs{gap:6px}
  .space-tabs>[role="tab"]{padding:12px}
  .apps__panel-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);margin-top:28px}
  .space-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px clamp(20px,2.6vw,32px)}
  .space-highlights__title{font-size:var(--text-body)}
  /* Chat, Pass, Notes — screenshot full panel width (shared), two columns intro / feature list */
  .apps__feature-intro{gap:12px}
  .apps__feature-lead{margin-top:4px;font-size:var(--text-body-lg)}
  .apps__details-summary{min-height:48px}
  .apps__details-summary>span{transition:transform var(--duration-base) var(--ease-out)}
  .apps__details[open]>.apps__details-summary{color:var(--text-primary)}
  .apps__details[open]>.apps__details-summary>span{transform:rotate(45deg)}
  .apps__details-text{padding-right:0}

  /* Modules — 2 columns while both fit (≥ ~980), otherwise intro on top + centred diagram */
  .modules__layout{gap:clamp(32px,5vw,64px)}
  .modules__intro{flex:1 1 360px}
  .modules__diagram{flex:1.2 1 440px;max-width:720px;margin-inline:auto;aspect-ratio:4 / 3}
  /* Privacy — statement keeps desktop line breaks; stats/points stay 2 columns from 760 */
  .privacy__title{margin-top:var(--space-6)}
  .privacy__stats{margin-top:var(--space-7);column-gap:clamp(24px,3.6vw,48px)}
  .privacy__stat-number--space,.privacy__stat-number--chat{font-size:clamp(88px,10vw,120px)}
  .privacy__points{column-gap:clamp(24px,3.6vw,48px)}
  /* Sync — ≥860: desktop 5-column diagram with fans (fixed 302px fan geometry, unchanged).
     768–859: vertical flow, devices in a row of 3, storages 2 × 2 (see block below). */
  .sync__intro{margin-top:var(--space-6)}
  .sync__diagram{margin-top:var(--space-7)}
}
/* Tablet / Compact desktop only — Sync vertical flow (768–859.98, reuses the ported 860 breakpoint) */
@media (min-width:768px) and (max-width:859.98px){
  .sync__devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sync__storages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sync__devices-label,.sync__storages-label{grid-column:1 / -1;text-align:center}
  .sync__device-desc{white-space:normal}
  .sync__connector{height:48px}
}
/* Tablet / Compact desktop + Mobile — Source (< 1200): one column, terminal right after the tech tags.
   .source__intro becomes display:contents so its children and .terminal share one grid; order:
   heading, lead, stack (0) → terminal (1) → actions (2) → license note (3). Long lines scroll inside .terminal__body only. */
@media (max-width:1199.98px){
  .source__layout{grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
  .source__intro{display:contents}
  .source__layout>.terminal{order:1;margin-top:32px}
  .source__actions{order:2;margin-top:32px}
  .source__license-note{order:3}
  /* Terminal: wrap long commands instead of scrolling. Hanging indent (2ch = "$ ") keeps a wrapped
     continuation visually inside the same command; no extra "$". Lines are only reflowed, not changed. */
  .terminal__body{overflow-x:visible}
  /* Downloads table: no min-width scroll; flexible columns (fits 1024 and 800 without horizontal scroll) */
  .downloads__table{min-width:0}
  .downloads__head-row,.downloads__row{grid-template-columns:minmax(128px,1.1fr) repeat(4,minmax(0,1fr));column-gap:16px}
  .downloads__app{gap:12px}
  .terminal__line--initial-visible,.terminal__line--initial-hidden,.terminal__line--comment,.terminal__line--success{
    white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2ch;text-indent:-2ch;
  }
}
/* Tablet / Compact desktop only — Final CTA & Footer (768–1199.98)
   Title keeps the token size (7.2vw: 74px @1024, 58px @800). Footer: fixed 2 columns instead of auto-fit,
   which dropped to one right-aligned column below ~850px. */
@media (min-width:768px) and (max-width:1199.98px){
  .final__title{margin-top:var(--space-6)}
  .final__lead{margin-top:20px}
  .final__actions{margin-top:32px}
  .footer__inner{padding-top:56px}
  .footer__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 48px}
  .footer__company{justify-self:start;min-width:0}
  .footer__docs{grid-column:1/-1;grid-row:2}
  .footer__bottom{margin-top:48px}
}
/* Tablet / Compact desktop + Mobile — Android carousel (< 1200). One slide per gesture, dots, js/android-carousel.js */
@media (max-width:1199.98px){
  .android__phones{
    --android-slide:clamp(260px,30vw,320px);--android-gap:20px;
    display:flex;gap:var(--android-gap);overflow-x:auto;overscroll-behavior-x:contain;
    padding:40px 32px 24px;scroll-padding-inline:32px;scroll-snap-type:x mandatory;
    scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab;
  }
  /* trailing space so every slide (incl. the last) can reach the focus position */
  .android__phones::after{content:"";flex:0 0 calc(100% - var(--android-slide) - var(--android-gap))}
  .android__phones::-webkit-scrollbar{display:none}
  .android__phones:focus-visible{outline:2px solid var(--color-space-light);outline-offset:-2px}
  .android__phone{flex:0 0 var(--android-slide);width:auto;max-width:none;scroll-snap-align:start;scroll-snap-stop:always}
  .android__phone img{-webkit-user-drag:none;user-select:none}
  .android__dots{display:flex;justify-content:center;gap:4px;padding-bottom:16px}
  .android__dot{
    position:relative;width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer;
  }
  .android__dot::after{
    content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:999px;
    transform:translate(-50%,-50%);background:var(--border-strong,rgba(var(--ink-rgb),0.22));
    transition:width 360ms cubic-bezier(.65,0,.35,1),background-color 360ms ease;
  }
  .android__dot--active::after{width:20px;background:var(--color-space-light)}
  .android__dot:focus-visible{outline:2px solid var(--color-space-light);outline-offset:-4px;border-radius:8px}
}
@media (max-width:1199.98px) and (prefers-reduced-motion:reduce){
  .android__dot::after{transition:none}
}
/* Tablet / Compact desktop only — Modules, two-column range (1000–1199.98, reuses the ported 1000 breakpoint).
   Compact diagram 440 × 440. Lines and pulses are measured from the cards in js/animations.js (modGeom). */
@media (min-width:1000px) and (max-width:1199.98px){
  .modules__layout{gap:48px}
  .modules__diagram{flex:0 0 440px;max-width:440px;aspect-ratio:1 / 1.1;margin:0}
  .modules__node--pass{left:15%;top:50%}
  .modules__node--space{left:58%;top:50%}
  .modules__node--notes{left:82%;top:13%}
  .modules__node--chat{left:82%;top:87%}
  .modules__node--pass,.modules__node--notes,.modules__node--chat,.modules__node--space{gap:4px}
  .modules__node-meta{font-size:var(--text-label-xs)}
}

/* ==================================================
   15. RESPONSIVE — MOBILE ONLY
   ≤767.98px. Phone composition (reference 390px). Every rule here is Mobile only.
   ================================================== */

/* Mobile only — elements hidden outside mobile */
.header__menu-toggle,.header__mobile-nav{display:none}

@media (max-width:767.98px){
  /* ---------- Mobile only — Tokens ---------- */
  :root{
    --text-display-hero:clamp(32px,10vw,46px);
    --text-display-statement:clamp(30px,8.4vw,38px);
    --text-h1:clamp(30px,8.8vw,38px);
    --text-h2:22px;
    --text-body-lg:16px;
    --gutter:20px;
    --space-section:64px;
    --space-section-lg:80px;
    --header-h:56px;
  }
  /* ---------- Mobile only — Containers & safe-area ---------- */
  .container,.header__inner{
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
  }

  /* ---------- Mobile only — Header & burger menu ---------- */
  .header{padding-top:env(safe-area-inset-top)}
  .header__inner{height:var(--header-h);gap:16px}
  .header__logo{height:30px}
  .header__nav{display:none}
  .header__menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-10px;padding:0;
    background:transparent;border:0;border-radius:var(--radius-sm);
    color:var(--text-primary);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .header__menu-toggle-icon{position:relative;display:block;width:22px;height:12px}
  .header__menu-toggle-line{
    position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;background:currentColor;
    transition:transform var(--duration-base) var(--ease-in-out),top var(--duration-base) var(--ease-in-out);
  }
  .header__menu-toggle-line:first-child{top:0}
  .header__menu-toggle-line:last-child{top:calc(100% - 1.5px)}
  .header__menu-toggle[aria-expanded="true"] .header__menu-toggle-line:first-child{top:calc(50% - 0.75px);transform:rotate(45deg)}
  .header__menu-toggle[aria-expanded="true"] .header__menu-toggle-line:last-child{top:calc(50% - 0.75px);transform:rotate(-45deg)}

  .header__mobile-nav{
    display:flex;flex-direction:column;
    position:fixed;z-index:49;left:0;right:0;
    top:calc(var(--header-h) + env(safe-area-inset-top));
    max-height:calc(100vh - var(--header-h) - env(safe-area-inset-top));
    max-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    padding:4px max(var(--gutter),env(safe-area-inset-right)) 28px max(var(--gutter),env(safe-area-inset-left));
    border-bottom:1px solid var(--border);
    box-shadow:0 24px 48px -16px rgba(0,0,0,0.6),0 0 0 100vmax rgba(var(--bg-rgb),0.55);
    background:radial-gradient(80% 50% at 85% 0%, rgba(1,152,251,0.12), transparent 70%), rgba(var(--bg-rgb),0.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),visibility 0s linear var(--duration-base);
  }
  .header__mobile-nav.is-open{
    opacity:1;visibility:visible;transform:none;
    transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),visibility 0s;
  }
  .header__mobile-list{list-style:none;margin:0;padding:0}
  .header__mobile-link{
    display:flex;align-items:baseline;gap:16px;
    min-height:64px;padding:18px 0;
    border-bottom:1px solid var(--border-subtle);
    font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.1;
    letter-spacing:var(--tracking-heading);text-transform:uppercase;color:var(--text-primary);
  }
  .header__mobile-link:hover,.header__mobile-link:active{color:var(--color-space-light)}
  .header__mobile-index{
    flex:0 0 auto;width:24px;
    font-family:var(--font-mono);font-weight:400;font-size:var(--text-label);
    letter-spacing:var(--tracking-label);color:var(--text-muted);
  }
  .header__mobile-external{margin-left:auto;font-family:var(--font-body);font-weight:400;font-size:20px;color:var(--text-muted)}
  .header__mobile-download{
    display:flex;align-items:center;justify-content:center;gap:12px;
    height:52px;flex:0 0 auto;margin-top:28px;border-radius:var(--radius-sm);
    background:var(--gradient-cta);color:#FFFFFF;font-weight:600;font-size:var(--text-body);
    box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),0.14),var(--glow-cta);
  }
  /* Mobile only — language switcher inside the burger menu: row + inline list (no overlay) */
  .header__mobile-lang{margin-top:16px;border-top:1px solid var(--border-subtle)}
  .header__mobile-lang-toggle{
    display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0;
    border:0;background:none;color:var(--text-primary);cursor:pointer;text-align:left;
  }
  .header__mobile-lang-label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
  .header__mobile-lang-current{margin-left:auto;font-size:var(--text-body)}
  .header__lang-list--inline{
    position:static;width:auto;max-height:min(46vh,360px);margin:0 0 4px;padding:4px;
    border-radius:var(--radius-sm);box-shadow:none;
  }
  .header__lang-list--inline .header__lang-option{min-height:44px}
  html.is-menu-open,html.is-menu-open body{overflow:hidden}
  /* Mobile only — scroll lock breaks position:sticky (the scroll container is gone), so mid-page the header scrolled away
     with the page. While the menu is open the header is pinned to the viewport; body gets its height back so nothing jumps. */
  html.is-menu-open .header{position:fixed;top:0;left:0;right:0}
  html.is-menu-open body{padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 1px)}

  /* Hero — see §05 (Keystone; Tablet / Mobile rules live there). */
  .hero__actions{flex-direction:column;align-items:stretch;gap:8px}
  .hero__button--primary,.hero__button--secondary{width:100%}
  /* Mobile only — localisation: long locales (RU “Одно пространство”, FR “Un seul espace de travail”) get a smaller
     title and may wrap between words; English keeps the reference size. */
  /* JA without phrase-aware breaking (Safari, older Chromium): keep ひとつのワークスペースで on one line (42px = body padding + sheet border) */

  /* ---------- Mobile only — Apps catalog ---------- */
  .apps__intro{margin-top:var(--space-6);gap:16px}
  .apps__title{text-wrap:balance}
  .apps__list{margin-top:var(--space-6);gap:8px}
  .apps__row-header,.apps__row--soon{
    grid-template-columns:20px minmax(0,1fr) 40px;
    gap:12px;padding:14px 14px 14px 16px;min-height:72px;
  }
  .apps__row-identity{gap:12px}
  .apps__row-identity>img,.apps__soon-icon{width:40px;height:40px;border-radius:10px}
  .apps__row-name,.apps__row-name--soon{font-size:20px}
  .apps__row--soon>span:nth-child(4){display:none}
  /* Panels */
  .apps__panel--initial-open,.apps__panel--initial-closed{padding:0 16px 24px}
  .apps__panel-slogan{margin-bottom:12px;font-size:var(--text-body-lg)}
  .apps__panel-header{margin-bottom:20px}

  /* ---------- Mobile only — Veydan Space tabs (horizontal scroll strip) ---------- */
  .space-tabs{
    display:flex;gap:6px;
    margin:0 -16px 12px;padding:0 16px 2px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent);
  }
  .space-tabs::-webkit-scrollbar{display:none}
  .space-tabs>[role="tab"]{flex:0 0 auto;min-height:64px;padding:12px 14px;justify-content:center}
  .space-tabs>[role="tab"]>span:last-child{white-space:nowrap}
  .apps__screenshot--space{border-radius:var(--radius-lg)}
  .apps__panel-columns{gap:20px;margin-top:24px}
  .space-features__item--initial-active,.space-features__item--initial-inactive{gap:10px}
  .apps__feature-title{font-size:var(--text-h2)}
  .apps__point{padding:12px 0}
  #app-row-space .apps__point:last-child{border-bottom:0}
  .apps__panel-footer{margin-top:24px;padding-top:20px;gap:20px}
  .space-highlights{gap:16px}
  .space-highlights__title{font-size:var(--text-body)}
  .apps__panel-actions{flex-direction:column;align-items:stretch}
  .apps__panel-actions>a{justify-content:center}

  /* ---------- Mobile only — Chat, Pass, Notes panels ----------
     Order: slogan → subtitle → screenshot → intro (title, text, lead) → feature list → CTA.
     Only <details> items get a toggle; plain .apps__point items stay static. */
  .apps__screenshot--chat,.apps__screenshot--pass,.apps__screenshot--notes{border-radius:var(--radius-lg)}
  .apps__feature-intro{gap:12px;padding-top:16px}
  .apps__feature-lead{margin-top:4px;font-size:var(--text-body-lg)}
  .apps__details-summary{min-height:52px;padding:12px 0}
  .apps__details-summary>span{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border:1px solid currentColor;border-radius:50%;
    font-size:16px;line-height:1;
    transition:transform var(--duration-base) var(--ease-out);
  }
  .apps__details[open]>.apps__details-summary{color:var(--text-primary)}
  .apps__details[open]>.apps__details-summary>span{transform:rotate(45deg)}
  .apps__details-text{margin:-2px 0 16px;padding-right:0}
  .apps__points>:last-child{border-bottom:0}
  .apps__alpha-note{max-width:none}

  /* ---------- Mobile only — Modules ----------
     Vertical hub diagram: Pass on top → Space hub → Notes · Chat below.
     Card centres are set here only; lines and pulses are measured from the cards (animations.js modGeom). */
  .modules__layout{gap:32px;margin-top:var(--space-6)}
  .modules__intro,.modules__diagram{flex:1 1 100%}
  .modules__diagram{aspect-ratio:1 / 1.36;max-width:420px;margin-inline:auto}
  .modules__node--pass{left:50%;top:12%}
  .modules__node--space{left:50%;top:47%}
  .modules__node--notes{left:23%;top:88%}
  .modules__node--chat{left:77%;top:88%}

  /* ---------- Mobile only — Privacy ---------- */
  .privacy__title{margin-top:var(--space-6);font-size:clamp(30px,8.8vw,38px);text-wrap:balance}
  .privacy__title-accent{margin-top:0.4em;font-size:0.82em;line-height:1.05;white-space:normal;width:auto;text-wrap:balance;filter:drop-shadow(0 0 18px rgba(168,56,250,0.4))}
  .privacy__lead{margin-top:20px}
  .privacy__stats{gap:32px;margin-top:var(--space-7)}
  .privacy__stat{gap:18px;padding-top:20px}
  .privacy__stat-number--space,.privacy__stat-number--chat{font-size:88px}
  .privacy__stat-body{padding-top:2px}
  .privacy__points{margin-top:var(--space-6)}
  .privacy__point{padding:16px 0}

  /* ---------- Mobile only — Sync ----------
     Vertical flow: Your devices → connector → Encrypted on device (panel) → connector → Storage you pick.
     Moving dots use the existing vertical connectors (vSyInV / vSyOutV, 3.6s cycle). */
  .sync__intro{margin-top:var(--space-6)}
  .sync__diagram{margin-top:var(--space-7)}
  .sync__devices{gap:8px}
  .sync__device--initial-active,.sync__device--initial-inactive{height:auto;min-height:60px;padding:12px 16px}
  .sync__device-desc{white-space:normal;font-size:var(--text-label)}
  .sync__connector{height:40px}
  .sync__core{
    width:100%;gap:10px;padding:20px 16px 18px;
    border:1px solid rgba(168,56,250,0.28);border-radius:var(--radius-lg);
    background:radial-gradient(70% 60% at 50% 35%, rgba(168,56,250,0.12), transparent 75%), var(--surface);
  }
  .sync__lock{width:96px;height:96px}
  .sync__storages{gap:8px}
  .sync__storage-option--soon,.sync__storage-option--initial-active,.sync__storage-option--initial-inactive{height:auto;min-height:60px;padding:12px 14px}
  .sync__storage-name{white-space:normal}
  .sync__storage-desc{font-size:var(--text-label)}

  /* ---------- Mobile only — Android ----------
     Native horizontal gallery: one large phone + next one peeking; scroll-snap; focusable region for keyboard. */
  .android__eyebrow{margin-top:var(--space-6)}
  .android__title{text-wrap:balance}
  .android__title .section-heading__accent{display:inline-block;white-space:nowrap}
  .android__soon-badge{white-space:nowrap}
  .android__lead{margin-top:20px}
  .android__cta{display:flex;justify-content:center;margin-top:28px}
  .android__showcase{margin-top:var(--space-6)}
  .android__phones{--android-slide:min(72%,280px);--android-gap:14px;padding:28px 20px 20px;scroll-padding-inline:20px}
  .android__phone{flex:0 0 var(--android-slide)}
  .android__dots{padding-bottom:12px}
  .android__highlights{grid-template-columns:minmax(0,1fr)}
  .android__highlight--first,.android__highlight{
    display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:14px;
    padding:16px 20px;border-left:0;border-top:1px solid var(--border-subtle);
  }
  .android__highlight--first{border-top:0}

  /* ---------- Mobile only — Source terminal ----------
     Typed git clone line wraps to 2 lines at 360–414: reserve them so the window doesn't jump while typing. */
  .terminal__body{padding:18px 16px;font-size:12px;line-height:1.75}
  .terminal__line--initial-visible{min-height:calc(2 * 1.75em)}

  /* ---------- Mobile only — Downloads ----------
     One card per app: header (icon + name), then 4 platform rows. The table head is hidden; each platform cell
     gets its label from the same head texts via ::before (Windows 10 / 11, macOS, Linux, Android 8+). */
  .downloads__head-row{display:none}
  .downloads__table{display:grid;gap:12px}
  .downloads__row{
    grid-template-columns:minmax(0,1fr);padding:6px 16px;
    border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface);
  }
  .downloads__app{padding:10px 0 12px}
  .downloads__app-icon{width:36px;height:36px}
  .downloads__row>.downloads__files,.downloads__row>.downloads__files--mac{
    position:relative;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 8px;
    min-height:56px;padding:8px 0 8px 120px;border-top:1px solid var(--border-subtle);
  }
  .downloads__row>:not(.downloads__app)::before{
    position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;width:112px;white-space:nowrap;
    font-family:var(--font-mono);font-size:var(--text-label-xs);letter-spacing:0.03em;text-transform:uppercase;color:var(--text-muted);
  }
  .downloads__row>:nth-child(2)::before{content:"Windows 10 / 11"}
  .downloads__row>:nth-child(3)::before{content:"macOS"}
  .downloads__row>:nth-child(4)::before{content:"Linux"}
  .downloads__row>:nth-child(5)::before{content:"Android 8+"}
  .downloads__file-link{display:inline-flex;align-items:center;min-height:40px;padding:0 10px}

  /* ---------- Mobile only — Final CTA ----------
     Own title size (10vw: 39px @390, 36px @360, 32px @320) keeps three lines with no overflow.
     Glow re-proportioned for a tall narrow box; grid lines every 1/4 instead of 1/12. */
  .final{
    padding:72px 0 64px;
    background-image:linear-gradient(to bottom, var(--bg) 0%, rgba(var(--bg-rgb),0) 18%, rgba(var(--bg-rgb),0) 82%, var(--bg) 100%), radial-gradient(90% 34% at 50% 44%, rgba(168,56,250,0.22), transparent 72%), radial-gradient(70% 20% at 50% 16%, rgba(1,152,251,0.12), transparent 72%), linear-gradient(to right, rgba(var(--ink-rgb),0.04) 1px, transparent 1px);
    background-size:100% 100%, 100% 100%, 100% 100%, calc(100% / 4) 100%;
  }
  .final__icons{gap:12px}
  .final__icon{width:48px}
  .final__title{margin-top:28px;font-size:10vw;line-height:1.02}
  .final__title-accent{filter:drop-shadow(0 0 18px rgba(168,56,250,0.4))}
  .final__lead{margin-top:18px;max-width:30ch}
  .final__actions{flex-direction:column;align-self:stretch;gap:10px;margin-top:28px}
  .final__button--secondary,.final__button--primary{justify-content:center;width:100%}

  /* ---------- Mobile only — Footer ----------
     One column: logo → description → Company (name, contacts) → Legal & Licenses → copyright. */
  .footer__inner{padding:40px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px))}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .footer__brand{gap:16px;max-width:none}
  .footer__logo{height:30px}
  .footer__company{justify-self:stretch;min-width:0;gap:10px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border-subtle)}
  .footer__contacts{gap:0}
  .footer__contact-link{display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
  .footer__docs{gap:10px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border-subtle)}
  .footer__docs-list{grid-template-columns:minmax(0,1fr);gap:0}
  .footer__docs-link{display:flex;align-items:center;min-height:44px}
  .footer__account-delete{display:flex;align-items:center;min-height:44px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px;padding-top:16px}
  .footer__legal{order:-1;flex-wrap:wrap;gap:4px 16px}
  .footer__legal-link{display:flex;align-items:center;min-height:44px}
}

/* ==================================================
   16. RESPONSIVE — SMALL PHONES ONLY
   ≤374.98px (360px reference). Mobile only.
   ================================================== */

@media (max-width:374.98px){
  :root{--gutter:16px}
  /* Small phones only — Hero: 16px inner padding; long CTA labels (DE “Für Windows herunterladen”, UK) may wrap to two centred lines at 320 */
  .hero__button--primary,.hero__button--secondary{height:auto;min-height:52px;padding-block:12px;white-space:normal;text-align:center;line-height:1.3}
  .header__mobile-link{font-size:24px}
  .android__title .section-heading__accent{display:inline;white-space:normal}
  /* Small phones only — Downloads: platform label sits above its chips (no side column) so chips keep one line */
  .downloads__row>.downloads__files,.downloads__row>.downloads__files--mac{padding:10px 0 12px}
  .downloads__row>:not(.downloads__app)::before{position:static;flex:0 0 100%;width:auto;display:block;margin-bottom:2px}
  .apps__row-header,.apps__row--soon{grid-template-columns:18px minmax(0,1fr) 40px;gap:10px;padding:12px 12px 12px 14px}
  .apps__row-identity>img,.apps__soon-icon{width:36px;height:36px}
  .apps__row-name,.apps__row-name--soon{font-size:18px}
  .apps__panel--initial-open,.apps__panel--initial-closed{padding:0 14px 22px}
  .space-tabs{margin:0 -14px 12px;padding:0 14px 2px}
  .privacy__stat-number--space,.privacy__stat-number--chat{font-size:76px}
}

/* ==================================================
   17. STATE — what the scripts toggle, styled here
   The scripts only set state attributes — accordions.js: data-open on catalog rows, aria-selected / aria-hidden
   on Space tabs and slides; animations.js: data-active, aria-pressed, data-shown; navigation.js: data-current.
   The look of every state lives here. Id / attribute selectors keep these rules above the "initial-*"
   snapshot classes, which describe the first paint before JS runs.
   ================================================== */

#app-row-space{--row-accent:1,152,251}
#app-row-chat{--row-accent:168,56,250}
#app-row-pass{--row-accent:251,168,10}
#app-row-notes{--row-accent:6,199,135}

:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open]{
  transition:border-color 0.4s ease,box-shadow 0.8s ease,background 0.4s ease;
}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="true"]{
  border-color:rgba(var(--row-accent),0.4);
  background:radial-gradient(60% 40% at 100% 0%,rgba(var(--row-accent),0.133),transparent 70%),var(--surface-raised);
  box-shadow:0 40px 120px -70px rgb(var(--row-accent));
}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="false"]{
  border-color:rgba(var(--ink-rgb),0.08);background:var(--surface);box-shadow:none;
}
/* side bar, number, slogan, +/× indicator */
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="true"]>:first-child{opacity:1}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="false"]>:first-child{opacity:0.55}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="true"]>.apps__row-header>:first-child,
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="true"]>.apps__row-header>p{color:rgb(var(--row-accent))}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="false"]>.apps__row-header>:first-child{color:var(--text-muted)}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="false"]>.apps__row-header>p{color:var(--text-secondary)}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="true"]>.apps__row-header>:last-child{
  border-color:rgb(var(--row-accent));color:rgb(var(--row-accent));transform:rotate(45deg);
}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="false"]>.apps__row-header>:last-child{
  border-color:rgba(var(--ink-rgb),0.25);color:var(--text-primary);transform:rotate(0deg);
}
/* collapse: grid rows 0fr ↔ 1fr, the panel fades and un-blurs after the height starts opening */
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open]>:nth-child(3){transition:grid-template-rows 0.55s cubic-bezier(.22,.61,.36,1)}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="true"]>:nth-child(3){grid-template-rows:1fr}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="false"]>:nth-child(3){grid-template-rows:0fr}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="true"]>:nth-child(3)>:first-child>:first-child{
  opacity:1;filter:blur(0px);transition:opacity 0.5s ease 0.18s,filter 0.5s ease 0.18s;
}
:is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open="false"]>:nth-child(3)>:first-child>:first-child{
  opacity:0;filter:blur(6px);transition:opacity 0.2s ease,filter 0.2s ease;
}

/* Space feature tabs */
#app-row-space [role="tab"][aria-selected="true"]{border-color:rgba(1,152,251,0.6);background:rgba(1,152,251,0.10);box-shadow:0 0 28px -10px #0198FB}
#app-row-space [role="tab"][aria-selected="false"]{border-color:rgba(var(--ink-rgb),0.08);background:rgba(var(--ink-rgb),0.03);box-shadow:none}
#app-row-space [role="tab"][aria-selected="true"]>:first-child{color:#0198FB}
#app-row-space [role="tab"][aria-selected="false"]>:first-child{color:#6A6F76}
#app-row-space [role="tab"][aria-selected="true"]>:nth-child(2){color:var(--text-primary)}
#app-row-space [role="tab"][aria-selected="false"]>:nth-child(2){color:var(--text-muted)}
/* screenshot slides (the element after the tab strip) */
#app-row-space [role="tablist"]+*>[aria-hidden]{transition:opacity 0.5s ease}
#app-row-space [role="tablist"]+*>[aria-hidden="false"]{opacity:1}
#app-row-space [role="tablist"]+*>[aria-hidden="true"]{opacity:0}
/* feature texts: only the active one is shown below 1000px; from 1000px all stay laid out (stacked) and fade */
#app-row-space [role="tablist"]+*+*>*>[aria-hidden]{transition:opacity 0.4s ease,visibility 0.4s}
#app-row-space [role="tablist"]+*+*>*>[aria-hidden="false"]{display:flex;opacity:1;visibility:visible}
#app-row-space [role="tablist"]+*+*>*>[aria-hidden="true"]{display:none;opacity:0;visibility:hidden}
@media (min-width:1000px){#app-row-space [role="tablist"]+*+*>*>[aria-hidden="true"]{display:flex}}

/* Modules diagram cards (animations.js sets data-active on the highlighted one) */
[data-ref="modRef"]>.modules__node--pass{--node-accent:251,168,10}
[data-ref="modRef"]>.modules__node--space{--node-accent:1,152,251}
[data-ref="modRef"]>.modules__node--notes{--node-accent:6,199,135}
[data-ref="modRef"]>.modules__node--chat{--node-accent:168,56,250}
[data-ref="modRef"]>[data-active="true"]{background:linear-gradient(160deg,rgba(var(--node-accent),0.18),transparent 70%),var(--surface-raised);border-color:rgb(var(--node-accent));box-shadow:0 0 56px -12px rgb(var(--node-accent))}
[data-ref="modRef"]>[data-active="false"]{background:linear-gradient(160deg,rgba(var(--node-accent),0.0706),transparent 70%),var(--surface-raised);border-color:rgba(var(--node-accent),0.333);box-shadow:0 0 30px -20px rgb(var(--node-accent))}

/* Sync diagram: app icons (data-active), device and storage buttons (aria-pressed; disabled = coming soon) */
[data-ref="syRef"] span[title="Veydan Space"]{--sync-accent:1,152,251}
[data-ref="syRef"] span[title="Veydan Chat"]{--sync-accent:168,56,250}
[data-ref="syRef"] span[title="Veydan Pass"]{--sync-accent:251,168,10}
[data-ref="syRef"] span[title="Veydan Notes"]{--sync-accent:6,199,135}
[data-ref="syRef"] span[title^="Veydan "][data-active="true"]{opacity:1;border-color:rgb(var(--sync-accent));box-shadow:0 0 18px -2px rgb(var(--sync-accent))}
[data-ref="syRef"] span[title^="Veydan "][data-active="false"]{opacity:0.5;border-color:rgba(var(--ink-rgb),0.14);box-shadow:none}
[data-ref="syRef"] [data-on-click="dv.pick"][aria-pressed="true"]{background:linear-gradient(90deg,rgba(1,152,251,0.16),var(--surface-raised));border:1px solid rgba(108,196,255,0.7);box-shadow:0 0 26px -8px #0198FB}
[data-ref="syRef"] [data-on-click="dv.pick"][aria-pressed="false"]{background:var(--surface-raised);border:1px solid rgba(var(--ink-rgb),0.1);box-shadow:none}
[data-ref="syRef"] [data-on-click="st.pick"][aria-pressed]{background:var(--surface);border:1px solid rgba(var(--ink-rgb),0.1);cursor:pointer;opacity:0.7}
[data-ref="syRef"] [data-on-click="st.pick"][aria-pressed="true"]{background:linear-gradient(90deg,rgba(1,152,251,0.14),rgba(168,56,250,0.10));border-color:rgba(108,196,255,0.6);opacity:1}
[data-ref="syRef"] [data-on-click="st.pick"][aria-pressed][disabled]{border-style:dashed;cursor:default;opacity:0.5}

/* Terminal: lines appear one by one (data-shown); colours and the fade transition come from .terminal__line--* */
[data-ref="termRef"] [role="img"]>[data-shown="true"]{opacity:1}
[data-ref="termRef"] [role="img"]>[data-shown="false"]{opacity:0}

/* Downloads: the visitor’s OS column heading (navigation.js sets data-current) */
.downloads__os-heading[data-current="true"]{color:#0198FB}
.downloads__os-heading[data-current="false"]{color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){
  :is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open],
  :is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open]>:nth-child(3),
  :is(#app-row-space,#app-row-chat,#app-row-pass,#app-row-notes)[data-open]>:nth-child(3)>:first-child>:first-child,
  #app-row-space [role="tablist"]+*>[aria-hidden],
  #app-row-space [role="tablist"]+*+*>*>[aria-hidden]{transition:none}
  [data-ref="syRef"] span[title^="Veydan "][data-active="false"]{opacity:1}
}

/* ==================================================
   18. THEME — LIGHT
   <html data-theme="light"> (js/theme.js). Same tokens as §01 with light values: cool "snow haze" page,
   white panels, deep night-indigo text; product colours stay, their small-text tints get darker for contrast.
   Screenshots and the wordmark switch to their "-light" files in theme.js. The terminal stays dark.
   ================================================== */

/* header switch (both themes) */
.header__logo-link{margin-right:auto}
.header__theme{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;margin-left:-12px;padding:0;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;
  transition:color var(--duration-fast) ease,border-color var(--duration-fast) ease,background var(--duration-fast) ease}
.header__theme:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--surface-hover)}
.header__theme:focus-visible{outline:2px solid var(--btn-focus);outline-offset:3px}
.header__theme-icon{grid-area:1/1;transition:opacity var(--duration-base) ease,transform var(--duration-base) var(--ease-out)}
.header__theme-icon--moon{opacity:0;transform:rotate(-40deg) scale(.7)}
[data-theme="light"] .header__theme-icon--sun{opacity:0;transform:rotate(40deg) scale(.7)}
[data-theme="light"] .header__theme-icon--moon{opacity:1;transform:none}
@media (max-width:767.98px){.header__theme{margin-left:0}}

/* switching (js/theme.js): the new theme rises from the bottom like dawn, the dark one falls from the top like dusk.
   The new page snapshot is revealed through a soft-edged mask (edge ≈ half a screen) sliding over the old one. */
::view-transition-old(root){animation:none}
::view-transition-new(root){
  -webkit-mask-image:linear-gradient(to top,#000 40%,transparent 60%);mask-image:linear-gradient(to top,#000 40%,transparent 60%);
  -webkit-mask-size:100% 250%;mask-size:100% 250%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:themeDawn 1.6s cubic-bezier(.45,0,.25,1) both}
:root[data-theme-fx="dusk"]::view-transition-new(root){
  -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);
  animation-name:themeDusk}
@keyframes themeDawn{from{-webkit-mask-position:0 0%;mask-position:0 0%}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
@keyframes themeDusk{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0%;mask-position:0 0%}}
/* browsers without View Transitions: colours cross-fade instead */
.is-theme-fading,.is-theme-fading *,.is-theme-fading *::before,.is-theme-fading *::after{
  transition:background-color 1.2s ease,color 1.2s ease,border-color 1.2s ease,fill 1.2s ease,stroke 1.2s ease,box-shadow 1.2s ease!important}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F5FB;
  --bg-rgb:243,245,251;
  --ink-rgb:14,20,48;
  --bg-featured:#E9EDF8;
  --header-bg:rgba(243,245,251,0.84);
  --surface:#F9FAFD;
  --surface-raised:#FFFFFF;
  --surface-hover:rgba(14,20,48,0.04);
  --text-strong:#060A1F;
  --text-primary:#0E1430;
  --text-secondary:#384062;
  --text-muted:#586079;
  --text-disabled:#8B91A8;
  --border-subtle:rgba(14,20,48,0.08);
  --border:rgba(14,20,48,0.14);
  --border-strong:rgba(14,20,48,0.26);
  --color-space-light:#0068BD;
  --color-chat-light:#7F1FD1;
  --color-pass-light:#8F5300;
  --color-notes-light:#037450;
  --sync-plain:#04603F;
  --glow-cta:0 12px 30px -12px rgba(1,152,251,0.55);
  --glow-cta-hover:0 14px 36px -10px rgba(168,56,250,0.55);
  --shadow-phone:drop-shadow(0 26px 40px rgba(30,40,110,0.20));
  --btn-light-bg:#0E1430;
  --btn-light-bg-hover:#232C55;
  --btn-light-text:#F3F5FB;
  --btn-secondary-border-hover:rgba(14,20,48,0.55);
  --btn-secondary-bg-hover:rgba(14,20,48,0.05);
  --btn-focus:#0068BD;
}
/* terminal: a dark window in both themes */
[data-theme="light"] .terminal__window{
  color-scheme:dark;
  --bg:#07080D;--bg-rgb:7,8,13;--ink-rgb:255,255,255;--surface:#0E1222;--surface-raised:#141933;
  --text-strong:#FFFFFF;--text-primary:#ECEDEF;--text-secondary:#C5C9CF;--text-muted:#9097A1;
  --border-subtle:rgba(255,255,255,0.08);--border:rgba(255,255,255,0.14);--border-strong:rgba(255,255,255,0.25);
  --color-space-light:#6CC4FF;--color-chat-light:#D29BFF;--color-pass-light:#FFC94D;--color-notes-light:#4FE3AE;
  border-color:transparent;box-shadow:0 30px 70px -34px rgba(20,28,80,0.55)}
/* hero: light mountains, a soft veil keeps the headline on the sky readable */
[data-theme="light"] .ks__atmos{background:
    linear-gradient(180deg,rgba(var(--bg-rgb),0) 70%,var(--bg) 100%),
    radial-gradient(70% 60% at 50% 42%,rgba(var(--bg-rgb),0.55),rgba(var(--bg-rgb),0.15) 100%),
    url(../assets/hero-bg-white.jpg?v=2.2.1) 50% 100% / cover no-repeat}
[data-theme="light"] .ks__halo{background:radial-gradient(closest-side,rgba(255,255,255,0.85),rgba(1,152,251,0.14) 50%,transparent 72%)}
[data-theme="light"] .ks__logo{filter:drop-shadow(0 22px 40px rgba(30,40,120,0.28)) drop-shadow(0 0 26px rgba(1,152,251,0.28))}
[data-theme="light"] .ks__title-b .accent{filter:none}
[data-theme="light"] .ks .dot{box-shadow:none}
/* soft shadows instead of dark-theme depth */
[data-theme="light"] .android__phone-screen{filter:drop-shadow(0 24px 36px rgba(30,40,110,0.18))}
[data-theme="light"] .header__lang-list{box-shadow:0 24px 60px -14px rgba(30,40,110,0.22)}
[data-theme="light"] .download-status{box-shadow:0 12px 40px rgba(30,40,110,0.16)}
[data-theme="light"] ::selection{color:#FFFFFF}
@media (max-width:767.98px){
  [data-theme="light"] .header__mobile-nav{box-shadow:0 24px 48px -16px rgba(30,40,110,0.2),0 0 0 100vmax rgba(var(--bg-rgb),0.55)}
}
/* product words in headings and names: deeper tones of the same hues, readable on the light page */
[data-theme="light"] .text-space{color:#0080D6}
[data-theme="light"] .text-chat{color:#9330E0}
[data-theme="light"] .text-pass{color:#A86E00}
[data-theme="light"] .text-notes{color:#038559}