/* ============================================================
   R³ DESIGN SYSTEM v3 — Design Bible Aligned
   Pure vector. Zero images. Maximum motion.
   ============================================================ */

/* --- R3 Custom Font --- */
@font-face {
  font-family: 'R3';
  src: url('../design-system/R3 Font/R3-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'R3';
  src: url('../design-system/R3 Font/R3-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* --- RESET --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Depth layers */
  --bg-abyss: #060910;
  --bg-deep: #060910;
  --bg: #0B0F18;
  --bg-elevated: #111A24;
  --bg-surface: #1A2530;
  --bg-hover: #1F2D3A;

  /* Mint system */
  --mint: #2EFFB8;
  --mint-bright: #5CFFD0;
  --mint-hover: #6AFFD8;
  --mint-dim: #1a9970;
  --mint-90: rgba(46,255,184,.9);
  --mint-60: rgba(46,255,184,.6);
  --mint-40: rgba(46,255,184,.4);
  --mint-20: rgba(46,255,184,.2);
  --mint-12: rgba(46,255,184,.12);
  --mint-08: rgba(46,255,184,.08);
  --mint-04: rgba(46,255,184,.04);
  --mint-02: rgba(46,255,184,.02);
  --mint-muted: rgba(46,255,184,.10);
  --mint-glow: rgba(46,255,184,.35);
  --mint-on: #060910;

  /* Purple — AI only */
  --purple: #B49EFF;
  --purple-bright: #C4B5FD;
  --purple-60: rgba(180,158,255,.6);
  --purple-20: rgba(180,158,255,.2);
  --purple-08: rgba(180,158,255,.08);

  /* Accent palette per product */
  --blue: #3B82F6;
  --blue-20: rgba(59,130,246,.2);
  --blue-08: rgba(59,130,246,.08);
  --amber: #FBBF24;
  --amber-20: rgba(251,191,36,.2);
  --amber-08: rgba(251,191,36,.08);
  --pink: #F472B6;
  --pink-20: rgba(244,114,182,.2);
  --pink-08: rgba(244,114,182,.08);
  --red: #EF4444;
  --red-20: rgba(239,68,68,.2);

  /* Semantic */
  --success: #2EFFB8;
  --warning: #FFB833;
  --error: #FF5A75;
  --info: #6CB4FF;

  /* Text — WCAG AA compliant */
  --text-100: #F0F6FC;
  --text-80: #B0C4D8;
  --text-60: #7A94AC;
  --text-40: #5A7A92;
  --text-20: #4A6275;

  /* Borders */
  --line: #243040;
  --line-hover: rgba(46,255,184,.14);
  --line-active: rgba(46,255,184,.25);
  --line-subtle: rgba(255,255,255,.04);
  --border: #243040;
  --border-subtle: #1A2535;
  --border-strong: #304050;

  /* Fonts */
  --sans: 'Rubik', 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --display: 'R3', 'Inter', sans-serif;

  /* Spacing */
  --section-gap: clamp(40px, 5vw, 72px);
  --max-w: 1200px;
  --pad-x: clamp(24px, 5vw, 72px);

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Motion */
  --spring: cubic-bezier(.16,1,.3,1);
  --smooth: cubic-bezier(.4,0,.2,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
  --duration-fast: 180ms;
  --duration-normal: 250ms;
  --duration-slow: 300ms;
}

/* --- BASE --- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg-abyss);
  color: var(--text-100);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-size: 16px;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mint-20); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--mint-40); }
::selection { background: var(--mint-20); color: var(--text-100); }

/* --- CONTAINER --- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap--wide { max-width: 1400px; }
.wrap--narrow { max-width: 720px; }

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-family: var(--display); font-size: clamp(2.8rem, 5.5vw, 4.8rem); font-weight: 400; }
h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 400; }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 700; }
h4 { font-size: .95rem; font-weight: 600; }
p { color: var(--text-60); line-height: 1.7; }

.gradient-text {
  background: linear-gradient(135deg, var(--mint-bright), var(--mint), var(--mint-dim));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 6px 18px;
  border-radius: var(--r-full);
  background: var(--mint-04);
  border: 1px solid var(--mint-12);
  backdrop-filter: blur(8px);
}

.label__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint-60);
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: .5; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.subtitle {
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  color: var(--text-60);
  max-width: 560px;
  line-height: 1.75;
  font-weight: 300;
}

.mono { font-family: var(--mono); }
.tabnum { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* --- GLOWING SVG ICON SYSTEM --- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon svg {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon--sm svg { width: 16px; height: 16px; }
.icon--md svg { width: 20px; height: 20px; }
.icon--lg svg { width: 24px; height: 24px; }
.icon--xl svg { width: 32px; height: 32px; }
.icon--2xl svg { width: 48px; height: 48px; }

/* Glow variants */
.icon--glow-mint svg {
  stroke: var(--mint);
  filter: drop-shadow(0 0 6px var(--mint-40)) drop-shadow(0 0 20px var(--mint-12));
}
.icon--glow-purple svg {
  stroke: var(--purple);
  filter: drop-shadow(0 0 6px var(--purple-60)) drop-shadow(0 0 20px var(--purple-20));
}
.icon--glow-blue svg {
  stroke: var(--blue);
  filter: drop-shadow(0 0 6px var(--blue-20)) drop-shadow(0 0 20px var(--blue-08));
}
.icon--glow-amber svg {
  stroke: var(--amber);
  filter: drop-shadow(0 0 6px var(--amber-20)) drop-shadow(0 0 20px var(--amber-08));
}
.icon--glow-pink svg {
  stroke: var(--pink);
  filter: drop-shadow(0 0 6px var(--pink-20)) drop-shadow(0 0 20px var(--pink-08));
}

/* Icon container with background */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  transition: all .3s var(--spring);
}
.icon-box--sm { width: 36px; height: 36px; }
.icon-box--md { width: 44px; height: 44px; }
.icon-box--lg { width: 56px; height: 56px; }
.icon-box--xl { width: 72px; height: 72px; border-radius: var(--r-lg); }

.icon-box--mint { background: var(--mint-04); border-color: var(--mint-08); }
.icon-box--purple { background: var(--purple-08); border-color: rgba(167,139,250,.12); }
.icon-box--blue { background: var(--blue-08); border-color: rgba(59,130,246,.12); }
.icon-box--amber { background: var(--amber-08); border-color: rgba(251,191,36,.12); }
.icon-box--pink { background: var(--pink-08); border-color: rgba(244,114,182,.12); }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: .88rem;
  font-family: var(--sans);
  text-decoration: none;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all .25s var(--spring);
  isolation: isolate;
}

.btn--primary {
  background: linear-gradient(135deg, var(--mint), var(--mint-dim));
  color: var(--bg-abyss);
  font-weight: 700;
  box-shadow: 0 2px 16px var(--mint-20), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px var(--mint-20), 0 2px 16px var(--mint-40), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn--primary:active { transform: translateY(0); }

/* Shimmer sweep */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: btn-shimmer 3.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes btn-shimmer {
  0%, 80%, 100% { left: -100%; }
  40% { left: 150%; }
}

.btn--ghost {
  background: transparent;
  color: var(--text-80);
  border: 1px solid var(--line-hover);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background: var(--mint-04);
  border-color: var(--mint-20);
  color: var(--mint);
  transform: translateY(-1px);
}

.btn--sm { padding: 8px 18px; font-size: .78rem; }
.btn--lg { padding: 16px 36px; font-size: .95rem; }

/* --- CARDS --- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: all .35s var(--spring);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s var(--spring);
  background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), var(--mint-08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.card:hover::before { opacity: 1; }

.card:hover {
  border-color: var(--line-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px var(--line-hover);
}

.card > * { position: relative; z-index: 1; }

/* Glass card */
.card--glass {
  background: rgba(15,21,32,.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* --- PANELS (System UI) --- */
.panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
}

.panel__dots { display: flex; gap: 5px; }
.panel__dots i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
}
.panel__dots i:nth-child(1) { background: #FF5F57; }
.panel__dots i:nth-child(2) { background: #FEBC2E; }
.panel__dots i:nth-child(3) { background: #28C840; }

.panel__title {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-40);
  letter-spacing: .02em;
}

.panel__body { padding: 20px; }

/* --- NAVIGATION --- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all .4s var(--spring);
}

.nav.scrolled {
  background: rgba(3,5,8,.88);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line), 0 4px 24px rgba(0,0,0,.3);
  padding: 10px 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 20px;
}

.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav__logo svg {
  height: 34px;
  width: auto;
  fill: var(--mint);
  filter: drop-shadow(0 0 8px rgba(46,255,184,.4));
  animation: logo-glow 3s ease-in-out infinite;
}
@keyframes logo-glow {
  0%,100% { filter: drop-shadow(0 0 6px rgba(46,255,184,.3)); }
  50% { filter: drop-shadow(0 0 18px rgba(46,255,184,.7)); }
}
.nav__logo--sm svg {
  height: 24px;
}

.nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}
.nav__links a {
  color: var(--text-60);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .2s;
  position: relative;
}
.nav__links a:hover { color: var(--text-100); }
.nav__links a.active { color: #fff; }
.nav__links a.active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 1.5px;
  background: var(--mint);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--mint-40);
}

.nav__cta {
  padding: 6px 16px;
  background: var(--mint);
  color: var(--bg-abyss);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .7rem;
  text-decoration: none;
  transition: all .2s var(--spring);
  box-shadow: 0 0 20px var(--mint-12);
}
.nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--mint-20);
}

/* --- Dropdown menu --- */
.nav__dropdown {
  position: relative;
}

.nav__dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav__chevron {
  transition: transform .25s var(--spring);
  opacity: .5;
  flex-shrink: 0;
}

.nav__dropdown:hover .nav__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: var(--bg-deep);
  border: 1px solid var(--line-hover);
  border-radius: var(--r-md);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--smooth), transform .25s var(--spring), visibility .2s;
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px var(--line), 0 0 40px var(--mint-02);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 100;
}

/* Arrow indicator */
.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-deep);
  border-top: 1px solid var(--line-hover);
  border-left: 1px solid var(--line-hover);
}

/* Invisible bridge between link and dropdown to prevent gap hover-out */
.nav__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  opacity: 0;
  pointer-events: none;
}

.nav__dropdown:hover::after {
  pointer-events: all;
}

.nav__dropdown:hover .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-60);
  text-decoration: none;
  transition: all .15s var(--smooth);
  white-space: nowrap;
  position: relative;
}

.nav__dropdown-menu a:hover {
  color: var(--text-100);
  background: var(--bg-hover);
}

/* Left accent bar on hover */
.nav__dropdown-menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 60%;
  border-radius: 1px;
  background: var(--mint);
  transition: transform .2s var(--spring);
}

.nav__dropdown-menu a:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* Product-specific accent colors */
.nav__dropdown-menu a[href*="pixl"]:hover { color: var(--mint); }
.nav__dropdown-menu a[href*="pixl"]:hover::before { background: var(--mint); box-shadow: 0 0 8px var(--mint-40); }
.nav__dropdown-menu a[href*="site"]:hover { color: var(--blue); }
.nav__dropdown-menu a[href*="site"]:hover::before { background: var(--blue); box-shadow: 0 0 8px var(--blue-20); }
.nav__dropdown-menu a[href*="chat"]:hover { color: var(--purple); }
.nav__dropdown-menu a[href*="chat"]:hover::before { background: var(--purple); box-shadow: 0 0 8px var(--purple-60); }
.nav__dropdown-menu a[href*="docs"]:hover { color: var(--amber); }
.nav__dropdown-menu a[href*="docs"]:hover::before { background: var(--amber); box-shadow: 0 0 8px var(--amber-20); }
.nav__dropdown-menu a[href*="plag"]:hover { color: var(--pink); }
.nav__dropdown-menu a[href*="plag"]:hover::before { background: var(--pink); box-shadow: 0 0 8px var(--pink-20); }

/* Divider inside dropdown */
.nav__dropdown-menu .nav__dropdown-divider {
  height: 1px;
  margin: 6px 16px;
  background: var(--line);
}

/* Mobile: product sub-links */
.mobile-menu__products {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  margin-left: 12px;
}

.mobile-menu__products a {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--text-40) !important;
}

.mobile-menu__products a:hover {
  color: var(--mint) !important;
}

/* RTL dropdown adjustments */
html[dir="rtl"] .nav__dropdown-menu {
  direction: rtl;
}

html[dir="rtl"] .nav__dropdown-menu a::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .mobile-menu__products {
  padding-left: 0;
  padding-right: 20px;
  border-left: none;
  border-right: 1px solid var(--line);
  margin-left: 0;
  margin-right: 12px;
}

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__burger span {
  width: 20px;
  height: 1.5px;
  background: var(--text-60);
  border-radius: 2px;
  transition: all .25s var(--spring);
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

/* Mobile overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(3,5,8,.96);
  backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--spring);
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu a {
  color: var(--text-80);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 600;
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--mint); }
.mobile-menu__close {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: none;
  color: var(--text-40);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

/* --- SECTION UTILITIES --- */
.section { padding: var(--section-gap) 0; position: relative; }
.section--sm { padding: clamp(48px, 6vw, 80px) 0; }

/* --- BADGES --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  letter-spacing: .02em;
}
.badge--mint { color: var(--mint); background: var(--mint-04); border: 1px solid var(--mint-08); }
.badge--purple { color: var(--purple); background: var(--purple-08); border: 1px solid rgba(167,139,250,.12); }
.badge--blue { color: var(--blue); background: var(--blue-08); border: 1px solid rgba(59,130,246,.12); }
.badge--amber { color: var(--amber); background: var(--amber-08); border: 1px solid rgba(251,191,36,.12); }
.badge--pink { color: var(--pink); background: var(--pink-08); border: 1px solid rgba(244,114,182,.12); }

/* Status dot */
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot--live { background: var(--mint); box-shadow: 0 0 8px var(--mint-60); animation: dot-pulse 2s ease-in-out infinite; }
.status-dot--idle { background: var(--text-20); }
.status-dot--warn { background: var(--amber); box-shadow: 0 0 6px var(--amber-20); }
.status-dot--error { background: var(--red); box-shadow: 0 0 6px var(--red-20); }

/* --- GRID --- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* --- FLEX UTILITIES --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-48 { gap: 48px; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.relative { position: relative; }

/* --- SCROLL REVEAL (Advanced) --- */
.rv {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s var(--spring), transform .8s var(--spring);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.rv--scale {
  opacity: 0;
  transform: scale(.92);
}
.rv--scale.in {
  opacity: 1;
  transform: none;
}
.rv--left {
  opacity: 0;
  transform: translateX(-40px);
}
.rv--left.in {
  opacity: 1;
  transform: none;
}
.rv--right {
  opacity: 0;
  transform: translateX(40px);
}
.rv--right.in {
  opacity: 1;
  transform: none;
}

.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .4s; }
.d6 { transition-delay: .48s; }
.d7 { transition-delay: .56s; }
.d8 { transition-delay: .64s; }

/* --- ADVANCED ANIMATIONS --- */

/* Orbit */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 140px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r, 140px)) rotate(-360deg); }
}

/* SVG draw */
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Glow breathe */
@keyframes breathe {
  0%, 100% { opacity: .3; filter: blur(40px); }
  50% { opacity: .6; filter: blur(60px); }
}

/* Footer logo pulse */
@keyframes footer-pulse {
  0%, 100% { opacity: .5; filter: drop-shadow(0 0 4px var(--mint)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px var(--mint)); }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Gradient shift */
@keyframes grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Spin slow */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Scale pulse */
@keyframes scale-pulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* Line scan */
@keyframes line-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Morph blob */
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 40% 50% 60% 50%; }
}

/* Data stream */
@keyframes data-flow {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* Typewriter cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- AMBIENT EFFECTS --- */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: breathe 6s ease-in-out infinite;
}

.glow-orb--mint {
  background: radial-gradient(circle, var(--mint-12), transparent 70%);
}
.glow-orb--purple {
  background: radial-gradient(circle, var(--purple-20), transparent 70%);
}

/* Scan line */
.scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint-20), transparent);
  animation: line-scan 8s linear infinite;
  pointer-events: none;
}

/* Grid lines background */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-subtle) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* --- DIVIDERS --- */
.divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--line-hover), transparent);
}

/* --- FORMS --- */
.input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-100);
  font-family: var(--sans);
  font-size: .88rem;
  transition: all .2s var(--spring);
  outline: none;
}
.input:focus {
  border-color: var(--mint-40);
  box-shadow: 0 0 0 3px var(--mint-08), 0 0 24px var(--mint-04);
}
.input::placeholder { color: var(--text-20); }

.input-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-40);
  margin-bottom: 6px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: var(--mono);
}

textarea.input { resize: vertical; min-height: 100px; }

/* Tag checkboxes */
.tag-check {
  display: inline-flex;
  cursor: pointer;
}
.tag-check input { display: none; }
.tag-check span {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-40);
  transition: all .2s var(--spring);
  background: var(--bg-deep);
}
.tag-check input:checked + span {
  background: var(--mint-08);
  border-color: var(--mint-20);
  color: var(--mint);
  box-shadow: 0 0 12px var(--mint-04);
}
.tag-check:hover span {
  border-color: var(--line-hover);
  color: var(--text-60);
}

/* --- ACCORDION --- */
.accordion { display: flex; flex-direction: column; }

.accordion__item {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  background: none;
  border: none;
  color: var(--text-80);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s;
  text-align: left;
}
.accordion__trigger:hover { color: var(--text-100); }

.accordion__trigger-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--spring);
  flex-shrink: 0;
  color: var(--text-40);
}

.accordion__item.open .accordion__trigger { color: var(--mint); }
.accordion__item.open .accordion__trigger-icon { transform: rotate(45deg); color: var(--mint); }

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--spring);
}

.accordion__content-inner {
  padding: 0 0 24px;
  color: var(--text-60);
  font-size: .88rem;
  line-height: 1.7;
}

/* --- FOOTER --- */
.footer {
  padding: 64px 0 36px;
  border-top: 1px solid var(--line);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}

.footer__about p {
  font-size: .82rem;
  color: var(--text-40);
  margin-top: 12px;
  max-width: 260px;
  line-height: 1.6;
}

.footer__col h5 {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text-40);
  font-weight: 600;
  margin-bottom: 16px;
}

.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  color: var(--text-20);
  text-decoration: none;
  font-size: .82rem;
  transition: color .2s;
}
.footer__col a:hover { color: var(--text-80); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .7rem;
  color: var(--text-20);
  font-family: var(--mono);
}

@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 12px; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FLOATING BACKGROUND ICONS — Enhanced visibility
   ============================================================ */
.bg-icons {
  display: none;
}
.bg-icons svg {
  position: absolute;
  stroke: var(--mint);
  stroke-width: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0;
  animation: iconFloat 20s ease-in-out infinite, iconDraw 2.5s ease-out forwards;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.bg-icons svg:nth-child(1) { width: 180px; top: 6%; left: 3%; animation-delay: 0s, 0.2s; }
.bg-icons svg:nth-child(2) { width: 140px; top: 20%; right: 5%; animation-delay: -5s, 0.5s; }
.bg-icons svg:nth-child(3) { width: 200px; bottom: 25%; left: 6%; animation-delay: -10s, 0.8s; }
.bg-icons svg:nth-child(4) { width: 160px; bottom: 10%; right: 8%; animation-delay: -15s, 1.1s; }
.bg-icons svg:nth-child(5) { width: 120px; top: 50%; left: 45%; animation-delay: -7s, 1.4s; }

@keyframes iconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-30px) rotate(4deg); }
  50% { transform: translateY(15px) rotate(-3deg); }
  75% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes iconDraw {
  0% { stroke-dashoffset: 300; opacity: 0; }
  40% { opacity: .08; }
  100% { stroke-dashoffset: 0; opacity: .08; }
}

/* Color variants for product pages */
.bg-icons--mint svg { stroke: var(--mint); }
.bg-icons--purple svg { stroke: var(--purple); }
.bg-icons--blue svg { stroke: var(--blue); }
.bg-icons--amber svg { stroke: var(--amber); }
.bg-icons--pink svg { stroke: var(--pink); }

/* ============================================================
   UNIQUE PAGE BACKGROUND ANIMATIONS
   Each page gets a distinct animated canvas
   ============================================================ */

/* --- Shared ambient layer --- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* === HOME: Radial pulse rings expanding from center === */
.page-bg--home::before,
.page-bg--home::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid var(--mint-08);
  transform: translate(-50%, -50%) scale(0);
  animation: homePulse 6s ease-out infinite;
}
.page-bg--home::after { animation-delay: 3s; }
.page-bg--home .pg-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  border-radius: 50%;
  border: 1px solid var(--mint-04);
  transform: translate(-50%, -50%) scale(0);
  animation: homePulse 8s ease-out infinite 1.5s;
}
@keyframes homePulse {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .15; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* === PLATFORM: Rotating dashed orbit rings === */
.page-bg--platform::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 800px; height: 800px;
  border-radius: 50%;
  border: 1px dashed var(--mint-12);
  transform: translate(-50%, -50%);
  animation: platformSpin 60s linear infinite;
}
.page-bg--platform::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px dashed var(--mint-08);
  transform: translate(-50%, -50%);
  animation: platformSpin 45s linear infinite reverse;
}
@keyframes platformSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* === PRODUCTS OVERVIEW: Floating product orbs === */
.page-bg--products .pg-orb {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbDrift 15s ease-in-out infinite;
}
.page-bg--products .pg-orb:nth-child(1) { background: var(--mint-12); top: 10%; left: 10%; animation-duration: 18s; }
.page-bg--products .pg-orb:nth-child(2) { background: var(--blue-08); top: 30%; right: 15%; animation-duration: 22s; animation-delay: -4s; }
.page-bg--products .pg-orb:nth-child(3) { background: var(--purple-08); bottom: 20%; left: 20%; animation-duration: 20s; animation-delay: -8s; }
.page-bg--products .pg-orb:nth-child(4) { background: var(--amber-08); bottom: 30%; right: 10%; animation-duration: 16s; animation-delay: -12s; }
.page-bg--products .pg-orb:nth-child(5) { background: var(--pink-08); top: 55%; left: 50%; animation-duration: 25s; animation-delay: -6s; }
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 20px) scale(.9); }
}

/* === PIXL: Animated grid of squares (pixel grid) === */
.page-bg--pixl {
  background-image:
    linear-gradient(var(--mint-04) 1px, transparent 1px),
    linear-gradient(90deg, var(--mint-04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: pixlGrid 4s ease-in-out infinite;
}
@keyframes pixlGrid {
  0%, 100% { background-size: 60px 60px; opacity: 1; }
  50% { background-size: 65px 65px; opacity: .7; }
}
.page-bg--pixl::before {
  content: '';
  position: absolute;
  top: 20%; left: 30%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--mint-08), transparent 70%);
  animation: pixlGlow 5s ease-in-out infinite;
}
@keyframes pixlGlow {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* === SITE: Topographic contour lines === */
.page-bg--site::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 700px; height: 700px;
  border-radius: 42% 58% 65% 35% / 55% 40% 60% 45%;
  border: 1px solid var(--blue-08);
  transform: translate(-50%, -50%);
  animation: topoMorph 20s ease-in-out infinite;
}
.page-bg--site::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  border-radius: 55% 45% 35% 65% / 40% 60% 40% 60%;
  border: 1px solid var(--blue-08);
  transform: translate(-50%, -50%);
  animation: topoMorph 15s ease-in-out infinite reverse;
}
.page-bg--site .pg-contour {
  position: absolute;
  top: 50%; left: 50%;
  width: 350px; height: 350px;
  border-radius: 60% 40% 50% 50% / 45% 55% 45% 55%;
  border: 1px solid var(--blue-08);
  transform: translate(-50%, -50%);
  animation: topoMorph 12s ease-in-out infinite;
}
@keyframes topoMorph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 55% 40% 60% 45%; }
  25% { border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%; }
  50% { border-radius: 65% 35% 55% 45% / 60% 40% 45% 55%; }
  75% { border-radius: 40% 60% 50% 50% / 50% 50% 55% 45%; }
}

/* === CHAT: Rising bubbles === */
.page-bg--chat .pg-bubble {
  position: absolute;
  bottom: -20px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--purple-08);
  border: 1px solid var(--purple-20);
  animation: bubbleRise linear infinite;
}
.page-bg--chat .pg-bubble:nth-child(1) { left: 10%; width: 16px; height: 16px; animation-duration: 12s; }
.page-bg--chat .pg-bubble:nth-child(2) { left: 25%; width: 10px; height: 10px; animation-duration: 16s; animation-delay: -3s; }
.page-bg--chat .pg-bubble:nth-child(3) { left: 45%; width: 14px; height: 14px; animation-duration: 14s; animation-delay: -7s; }
.page-bg--chat .pg-bubble:nth-child(4) { left: 65%; width: 8px; height: 8px; animation-duration: 18s; animation-delay: -5s; }
.page-bg--chat .pg-bubble:nth-child(5) { left: 80%; width: 12px; height: 12px; animation-duration: 13s; animation-delay: -9s; }
.page-bg--chat .pg-bubble:nth-child(6) { left: 55%; width: 18px; height: 18px; animation-duration: 20s; animation-delay: -2s; }
.page-bg--chat .pg-bubble:nth-child(7) { left: 35%; width: 6px; height: 6px; animation-duration: 15s; animation-delay: -11s; }
.page-bg--chat .pg-bubble:nth-child(8) { left: 90%; width: 10px; height: 10px; animation-duration: 17s; animation-delay: -6s; }
@keyframes bubbleRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: .4; }
  90% { opacity: .2; }
  100% { transform: translateY(-110vh) translateX(30px); opacity: 0; }
}

/* === DOCS: Falling page sheets === */
.page-bg--docs .pg-sheet {
  position: absolute;
  top: -40px;
  width: 30px; height: 40px;
  border: 1px solid var(--amber-08);
  border-radius: 2px;
  background: var(--amber-08);
  animation: sheetFall linear infinite;
}
.page-bg--docs .pg-sheet:nth-child(1) { left: 8%; animation-duration: 18s; }
.page-bg--docs .pg-sheet:nth-child(2) { left: 22%; width: 24px; height: 32px; animation-duration: 22s; animation-delay: -4s; }
.page-bg--docs .pg-sheet:nth-child(3) { left: 40%; animation-duration: 20s; animation-delay: -8s; }
.page-bg--docs .pg-sheet:nth-child(4) { left: 60%; width: 20px; height: 28px; animation-duration: 25s; animation-delay: -12s; }
.page-bg--docs .pg-sheet:nth-child(5) { left: 78%; animation-duration: 19s; animation-delay: -6s; }
.page-bg--docs .pg-sheet:nth-child(6) { left: 92%; width: 26px; height: 34px; animation-duration: 23s; animation-delay: -15s; }
@keyframes sheetFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: .15; }
  90% { opacity: .08; }
  100% { transform: translateY(110vh) rotate(45deg); opacity: 0; }
}

/* === PLAG: Connecting dots network === */
.page-bg--plag .pg-node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink-20);
  animation: nodeGlow 3s ease-in-out infinite;
}
.page-bg--plag .pg-node:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.page-bg--plag .pg-node:nth-child(2) { top: 30%; right: 25%; animation-delay: .5s; }
.page-bg--plag .pg-node:nth-child(3) { top: 55%; left: 15%; animation-delay: 1s; }
.page-bg--plag .pg-node:nth-child(4) { top: 70%; right: 20%; animation-delay: 1.5s; }
.page-bg--plag .pg-node:nth-child(5) { top: 45%; left: 50%; animation-delay: 2s; }
.page-bg--plag .pg-node:nth-child(6) { top: 20%; left: 60%; animation-delay: .8s; }
.page-bg--plag .pg-node::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--pink-08);
  transform: translate(-50%, -50%);
  animation: nodeRing 3s ease-in-out infinite;
}
@keyframes nodeGlow {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.5); }
}
@keyframes nodeRing {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .3; }
  50% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}


/* === ABOUT: Breathing circle / heartbeat === */
.page-bg--about::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 2px solid var(--mint-08);
  transform: translate(-50%, -50%);
  animation: aboutBreathe 4s ease-in-out infinite;
}
.page-bg--about::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mint-04), transparent 70%);
  transform: translate(-50%, -50%);
  animation: aboutBreathe 4s ease-in-out infinite .5s;
}
@keyframes aboutBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .6; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* === FAQ: Floating question marks (CSS only) === */
.page-bg--faq .pg-q {
  position: absolute;
  font-size: 80px;
  font-weight: 900;
  color: var(--mint-04);
  animation: qFloat 20s ease-in-out infinite;
  user-select: none;
}
.page-bg--faq .pg-q:nth-child(1) { top: 8%; left: 5%; font-size: 120px; animation-delay: 0s; }
.page-bg--faq .pg-q:nth-child(2) { top: 30%; right: 8%; font-size: 60px; animation-delay: -5s; }
.page-bg--faq .pg-q:nth-child(3) { bottom: 20%; left: 12%; font-size: 90px; animation-delay: -10s; }
.page-bg--faq .pg-q:nth-child(4) { bottom: 35%; right: 15%; font-size: 140px; animation-delay: -3s; }
.page-bg--faq .pg-q:nth-child(5) { top: 55%; left: 40%; font-size: 70px; animation-delay: -8s; }
@keyframes qFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  25% { transform: translateY(-25px) rotate(5deg); }
  50% { transform: translateY(10px) rotate(-3deg); }
  75% { transform: translateY(-15px) rotate(8deg); }
}

/* === CONTACT: Signal waves radiating === */
.page-bg--contact .pg-wave {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid var(--mint-08);
  transform: translate(-50%, -50%) scale(0);
  animation: waveRadiate 4s ease-out infinite;
}
.page-bg--contact .pg-wave:nth-child(1) { width: 200px; height: 200px; animation-delay: 0s; }
.page-bg--contact .pg-wave:nth-child(2) { width: 400px; height: 400px; animation-delay: .8s; }
.page-bg--contact .pg-wave:nth-child(3) { width: 600px; height: 600px; animation-delay: 1.6s; }
.page-bg--contact .pg-wave:nth-child(4) { width: 800px; height: 800px; animation-delay: 2.4s; }
.page-bg--contact .pg-wave:nth-child(5) { width: 1000px; height: 1000px; animation-delay: 3.2s; }
@keyframes waveRadiate {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .3; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* === BOOK DEMO: Countdown / schedule tick marks === */
.page-bg--demo::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 2px solid var(--mint-04);
  transform: translate(-50%, -50%);
}
.page-bg--demo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 180px;
  background: var(--mint-12);
  transform-origin: bottom center;
  transform: translate(-50%, -100%);
  animation: clockHand 12s linear infinite;
  border-radius: 2px;
}
@keyframes clockHand { to { transform: translate(-50%, -100%) rotate(360deg); } }

/* === "Coming Soon" badge === */
.badge--beta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: .6rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid;
}
.badge--beta-soon {
  color: var(--text-40);
  border-color: var(--line);
  background: var(--bg-surface);
}
.badge--beta-active {
  color: var(--mint);
  border-color: var(--mint-20);
  background: var(--mint-04);
}

/* ============================================================
   RTL / HEBREW SUPPORT
   ============================================================ */
html[dir="rtl"] {
  direction: rtl;
}
html[dir="rtl"] body {
  font-family: 'Rubik', var(--sans);
}
html[dir="rtl"] .nav__inner { direction: rtl; }
html[dir="rtl"] .nav__links { direction: rtl; }
html[dir="rtl"] .hero__content { text-align: center; }
html[dir="rtl"] .label { direction: rtl; }
html[dir="rtl"] .footer__grid { direction: rtl; }
html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .flow-step { direction: rtl; }
html[dir="rtl"] .frag--sidebar { left: auto; right: -120px; }
html[dir="rtl"] .frag--toolbar { right: auto; left: -100px; }

/* RTL centering for all major content */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .subtitle,
html[dir="rtl"] .hero__sub,
html[dir="rtl"] .section__header,
html[dir="rtl"] .text-center,
html[dir="rtl"] .step__title,
html[dir="rtl"] .card__title,
html[dir="rtl"] .card__desc,
html[dir="rtl"] .stat__number,
html[dir="rtl"] .stat__label,
html[dir="rtl"] .cta h2,
html[dir="rtl"] .cta p {
  text-align: center;
}
html[dir="rtl"] .hero__actions,
html[dir="rtl"] .hero__badges {
  justify-content: center;
}
html[dir="rtl"] .footer__col {
  text-align: right;
}

/* Language toggle button */
.lang-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--text-60);
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--spring);
  backdrop-filter: blur(12px);
  letter-spacing: 0;
}
.lang-toggle:hover {
  border-color: var(--mint-40);
  color: var(--mint);
  transform: scale(1.08);
}
html[dir="rtl"] .lang-toggle { left: 24px; right: auto; }

/* Hide elements based on language */
[data-he] { /* elements with Hebrew translations */ }
html[dir="rtl"] [data-en-only] { display: none !important; }
html:not([dir="rtl"]) [data-he-only] { display: none !important; }

/* ============================================================
   TECH FIBER ANIMATION LAYER
   Fiber optics, circuit traces, data streams
   Overlays on top of page-bg, behind content
   ============================================================ */

.tech-fibers {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 76px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  color: var(--text-60);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--spring);
  backdrop-filter: blur(12px);
}
.theme-toggle:hover {
  border-color: var(--mint-40);
  color: var(--mint);
  transform: scale(1.08);
}
html[dir="rtl"] .theme-toggle { left: 76px; right: auto; }

/* ============================================================
   LIGHT MODE
   Luxury boutique: warm off-whites, deep greens, black text.
   ============================================================ */
[data-theme="light"] {
  /* Backgrounds — warm off-white luxury (Celine/Aesop inspired) */
  --bg-abyss: #F4F3EF;
  --bg-deep: #F4F3EF;
  --bg: #F9F8F5;
  --bg-elevated: #0F7D57;
  --bg-surface: #EEEDEA;
  --bg-hover: #0B5E42;

  /* Accent — Deep Forest Green (subtle touches, not neon) */
  --mint: #0B5E42;
  --mint-bright: #0F7D57;
  --mint-hover: #0F7D57;
  --mint-dim: #084D35;
  --mint-90: rgba(11,94,66,.9);
  --mint-60: rgba(11,94,66,.6);
  --mint-40: rgba(11,94,66,.4);
  --mint-20: rgba(11,94,66,.2);
  --mint-12: rgba(11,94,66,.12);
  --mint-08: rgba(13,107,74,.07);
  --mint-04: rgba(13,107,74,.04);
  --mint-02: rgba(13,107,74,.02);
  --mint-muted: rgba(13,107,74,.07);
  --mint-glow: rgba(13,107,74,.15);
  --mint-on: #FFFFFF;

  /* Semantic — muted luxury */
  --purple: #5B3FB5;
  --purple-bright: #7458D1;
  --purple-60: rgba(91,63,181,.6);
  --purple-20: rgba(91,63,181,.2);
  --purple-08: rgba(91,63,181,.08);

  --blue: #1D5EA8;
  --blue-20: rgba(29,94,168,.2);
  --blue-08: rgba(29,94,168,.08);
  --amber: #9C6D00;
  --amber-20: rgba(156,109,0,.2);
  --amber-08: rgba(156,109,0,.08);
  --pink: #A83D6B;
  --pink-20: rgba(168,61,107,.2);
  --pink-08: rgba(168,61,107,.08);
  --red: #B82D3E;
  --red-20: rgba(184,45,62,.2);

  --success: #0D6B4A;
  --warning: #9C6D00;
  --error: #B82D3E;
  --info: #1D5EA8;

  /* Text — true black hierarchy */
  --text-100: #111111;
  --text-80: #3A3A38;
  --text-60: #6B6B68;
  --text-40: #8A8A87;
  --text-20: #A0A09C;

  /* Borders — warm gray */
  --line: #D5D4D0;
  --line-hover: rgba(11,94,66,.14);
  --line-active: rgba(11,94,66,.25);
  --line-subtle: rgba(0,0,0,.04);
  --border: #D5D4D0;
  --border-subtle: #E5E4E0;
  --border-strong: #B8B7B3;
}

/* Light mode: hide dark bg, show light grid */
[data-theme="light"] .tech-fibers { display: none !important; }
[data-theme="light"] #light-grid-canvas { display: block !important; }
[data-theme="light"] .bg-icons svg { stroke: var(--text-20); }
[data-theme="light"] .page-bg { opacity: 0.3; }
[data-theme="light"] .hero__orb1,
[data-theme="light"] .hero__orb2 { opacity: 0.3; }

/* Light mode: nav logo fill */
[data-theme="light"] .nav__logo svg { fill: var(--text-100); }

/* Light mode: video overlay — lighter */
[data-theme="light"] .hero-video__play {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(1px);
}
[data-theme="light"] .hero-video:hover .hero-video__play {
  background: rgba(255,255,255,.05);
}
[data-theme="light"] .hero-video__play svg circle {
  stroke: #0B5E42;
}
[data-theme="light"] .hero-video__play svg polygon {
  fill: #0B5E42;
}

/* Light mode: footer logo stays mint */
[data-theme="light"] .footer svg { fill: var(--mint); }

/* Light mode: gradient text — deep forest green */
[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #0B5E42, #084D35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Light mode: cards & panels — inverted mint boxes */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .phil-card,
[data-theme="light"] .founder-card,
[data-theme="light"] .calc-panel,
[data-theme="light"] .calc-benefit,
[data-theme="light"] .student-plan,
[data-theme="light"] .cycle-feature {
  background: #0B5E42;
  border-color: #084D35;
  color: #FFFFFF;
}
[data-theme="light"] .card h2,
[data-theme="light"] .card h3,
[data-theme="light"] .card p,
[data-theme="light"] .panel h2,
[data-theme="light"] .panel h3,
[data-theme="light"] .phil-card h3,
[data-theme="light"] .phil-card p,
[data-theme="light"] .founder-card h3,
[data-theme="light"] .founder-card p,
[data-theme="light"] .founder-card__role,
[data-theme="light"] .calc-benefit__text,
[data-theme="light"] .calc-benefit__icon,
[data-theme="light"] .cycle-feature h3,
[data-theme="light"] .cycle-feature p {
  color: #FFFFFF;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .panel:hover,
[data-theme="light"] .phil-card:hover,
[data-theme="light"] .founder-card:hover,
[data-theme="light"] .calc-benefit:hover {
  background: #0F7D57;
  border-color: #0B5E42;
  box-shadow: 0 8px 32px rgba(11,94,66,.2);
}

/* Light mode: card glass */
[data-theme="light"] .card--glass {
  background: rgba(11,94,66,.9);
  backdrop-filter: blur(20px);
  color: #fff;
}

/* Light mode: labels */
[data-theme="light"] .label {
  background: rgba(13,107,74,.07);
  border-color: rgba(11,94,66,.2);
}

/* Light mode: nav — green bar with white text */
[data-theme="light"] .nav {
  background: #0B5E42;
}
[data-theme="light"] .nav.scrolled {
  background: #0B5E42;
  border-bottom-color: #084D35;
}
[data-theme="light"] .nav__links a {
  color: #FFFFFF !important;
}
[data-theme="light"] .nav__links a:hover {
  color: rgba(255,255,255,.7) !important;
}
[data-theme="light"] .nav__logo svg {
  fill: #FFFFFF !important;
}
[data-theme="light"] .nav__cta {
  background: #FFFFFF !important;
  color: #0B5E42 !important;
  border-color: #FFFFFF !important;
}
[data-theme="light"] .nav__cta:hover {
  background: rgba(255,255,255,.85) !important;
}
[data-theme="light"] .nav__burger span {
  background: #FFFFFF;
}

/* Light mode: primary button — deep green solid */
[data-theme="light"] .btn--primary {
  background: linear-gradient(135deg, #0B5E42, #084D35);
  color: #fff;
}
[data-theme="light"] .btn--primary:hover {
  background: linear-gradient(135deg, #0F7D57, #0B5E42);
  box-shadow: 0 6px 20px rgba(11,94,66,.25);
}

/* Light mode: ghost button */
[data-theme="light"] .btn--ghost {
  border-color: rgba(11,94,66,.25);
  color: #0B5E42;
}
[data-theme="light"] .btn--ghost:hover {
  background: rgba(13,107,74,.07);
  border-color: rgba(11,94,66,.4);
}

/* Light mode: inputs */
[data-theme="light"] .input,
[data-theme="light"] .textarea {
  background: #F9F8F5;
  border-color: #D5D4D0;
  color: #111111;
}
[data-theme="light"] .input:focus,
[data-theme="light"] .textarea:focus {
  border-color: rgba(11,94,66,.5);
  box-shadow: 0 0 0 3px rgba(13,107,74,.08);
}

/* Light mode: tag checks */
[data-theme="light"] .tag-check span {
  background: rgba(13,107,74,.05);
  border-color: rgba(11,94,66,.15);
  color: #3A3A38;
}
[data-theme="light"] .tag-check input:checked + span {
  background: #0B5E42;
  border-color: #084D35;
  color: #FFFFFF;
}

/* Light mode: dividers */
[data-theme="light"] .divider {
  background: linear-gradient(90deg, transparent, rgba(11,94,66,.15), transparent);
}

/* Light mode: philosophy numbers */
[data-theme="light"] .phil-num {
  color: rgba(255,255,255,.4);
}

/* Light mode: pain card speech bubbles — white bg, dark text */
[data-theme="light"] .pain-duo__bubble {
  background: rgba(255,255,255,.92) !important;
  border-color: #D5D4D0 !important;
  color: #111111 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
}
[data-theme="light"] .pain-duo__bubble .bubble-highlight {
  color: #0B5E42 !important;
  font-weight: 600;
}
[data-theme="light"] .pain-duo__bubble::after {
  border-top-color: rgba(255,255,255,.92) !important;
}
/* Light mode: superman answer bubble — white bg, dark text */
[data-theme="light"] .pain-duo__superman-bubble {
  background: rgba(255,255,255,.92) !important;
  border-color: #D5D4D0 !important;
  color: #111111 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
  text-shadow: none !important;
}
[data-theme="light"] .pain-duo__superman-bubble::after {
  border-top-color: rgba(255,255,255,.92) !important;
}

/* Light mode: per-product accent color overrides (pastel) */
[data-theme="light"][data-product="pixl"] body, [data-theme="light"] body[data-product="pixl"] { --mint: #3BA87A; --mint-bright: #4DBF8E; --mint-hover: #2E9468; --mint-dim: #2A8760; --mint-08: rgba(59,168,122,.08); --mint-20: rgba(59,168,122,.2); --mint-40: rgba(59,168,122,.4); }
[data-theme="light"][data-product="site"] body, [data-theme="light"] body[data-product="site"] { --mint: #5B8DB8; --mint-bright: #6FA0C8; --mint-hover: #4D7DA8; --mint-dim: #3D6D98; --mint-08: rgba(91,141,184,.08); --mint-20: rgba(91,141,184,.2); --mint-40: rgba(91,141,184,.4); }
[data-theme="light"][data-product="chat"] body, [data-theme="light"] body[data-product="chat"] { --mint: #9B85B5; --mint-bright: #AE9AC5; --mint-hover: #8B75A5; --mint-dim: #7B6595; --mint-08: rgba(155,133,181,.08); --mint-20: rgba(155,133,181,.2); --mint-40: rgba(155,133,181,.4); }
[data-theme="light"][data-product="docs"] body, [data-theme="light"] body[data-product="docs"] { --mint: #C4976E; --mint-bright: #D4A77E; --mint-hover: #B4875E; --mint-dim: #A4774E; --mint-08: rgba(196,151,110,.08); --mint-20: rgba(196,151,110,.2); --mint-40: rgba(196,151,110,.4); }
[data-theme="light"][data-product="plag"] body, [data-theme="light"] body[data-product="plag"] { --mint: #C4758E; --mint-bright: #D4859E; --mint-hover: #B4657E; --mint-dim: #A4556E; --mint-08: rgba(196,117,142,.08); --mint-20: rgba(196,117,142,.2); --mint-40: rgba(196,117,142,.4); }
[data-theme="light"][data-product="grid"] body, [data-theme="light"] body[data-product="grid"] { --mint: #6B9BAF; --mint-bright: #7BABBF; --mint-hover: #5B8B9F; --mint-dim: #4B7B8F; --mint-08: rgba(107,155,175,.08); --mint-20: rgba(107,155,175,.2); --mint-40: rgba(107,155,175,.4); }
[data-theme="light"][data-product="skil"] body, [data-theme="light"] body[data-product="skil"] { --mint: #7BAA6E; --mint-bright: #8BBA7E; --mint-hover: #6B9A5E; --mint-dim: #5B8A4E; --mint-08: rgba(123,170,110,.08); --mint-20: rgba(123,170,110,.2); --mint-40: rgba(123,170,110,.4); }
[data-theme="light"][data-product="task"] body, [data-theme="light"] body[data-product="task"] { --mint: #D4A05A; --mint-bright: #E4B06A; --mint-hover: #C4904A; --mint-dim: #B4803A; --mint-08: rgba(212,160,90,.08); --mint-20: rgba(212,160,90,.2); --mint-40: rgba(212,160,90,.4); }
[data-theme="light"][data-product="link"] body, [data-theme="light"] body[data-product="link"] { --mint: #7B9EBF; --mint-bright: #8BAECF; --mint-hover: #6B8EAF; --mint-dim: #5B7E9F; --mint-08: rgba(123,158,191,.08); --mint-20: rgba(123,158,191,.2); --mint-40: rgba(123,158,191,.4); }

/* Light mode: product node cards — pastel backgrounds, white text & icons */
[data-theme="light"] .platform__node-card {
  color: #FFFFFF;
}
[data-theme="light"] .platform__node-card .platform__node-name,
[data-theme="light"] .platform__node-card .platform__node-desc {
  color: #FFFFFF;
}
[data-theme="light"] .platform__node-card .icon-box {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.3) !important;
}
[data-theme="light"] .platform__node-card .icon svg,
[data-theme="light"] .platform__node-card .icon-box svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
/* Pastel colors per product — soft, warm tones */
[data-theme="light"] .platform__node-card:nth-child(1) { background: #3BA87A; } /* PIXL — sage green */
[data-theme="light"] .platform__node-card:nth-child(2) { background: #5B8DB8; } /* SITE — soft blue */
[data-theme="light"] .platform__node-card:nth-child(3) { background: #8B7BBF; } /* LEXS — lavender */
[data-theme="light"] .platform__node-card:nth-child(4) { background: #C4976E; } /* DOCS — warm tan */
[data-theme="light"] .platform__node-card:nth-child(5) { background: #C4758E; } /* PLAG — dusty rose */
[data-theme="light"] .platform__node-card:nth-child(6) { background: #6B9BAF; } /* GRID — ocean */
[data-theme="light"] .platform__node-card--soon { background: #A8B5A0 !important; opacity: .7; } /* Soon — muted sage */
/* Small cards (ACTS row) */
[data-theme="light"] .platform__node-card--sm:nth-child(1) { background: #7BAA6E; } /* SKIL — leaf green */
[data-theme="light"] .platform__node-card--sm:nth-child(2) { background: #D4A05A; } /* TASK — golden */
[data-theme="light"] .platform__node-card--sm:nth-child(3) { background: #7B9EBF; } /* LINK — steel blue */
[data-theme="light"] .platform__node-card--sm:nth-child(4) { background: #9B85B5; } /* CHAT — lilac */
[data-theme="light"] .platform__node-card:hover {
  filter: brightness(1.08);
  transform: translateY(-4px);
}

/* Light mode: toolbar rail */
[data-theme="light"] .toolbar-rail {
  background: #0B5E42 !important;
  border-color: #084D35 !important;
}
[data-theme="light"] .toolbar-rail__logo {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.25) !important;
}
[data-theme="light"] .toolbar-rail__logo svg { fill: #FFFFFF !important; }
[data-theme="light"] .tool-btn {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #FFFFFF !important;
}
[data-theme="light"] .tool-btn:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.3) !important;
}
[data-theme="light"] .tool-btn svg { stroke: #FFFFFF !important; }
[data-theme="light"] .tool-btn__label { color: #FFFFFF !important; }
[data-theme="light"] .toolbar-rail__divider { background: rgba(255,255,255,.2) !important; }

/* Light mode: ALL text inside elevated containers must be white */
[data-theme="light"] .card,
[data-theme="light"] .card *,
[data-theme="light"] .panel,
[data-theme="light"] .panel *,
[data-theme="light"] .phil-card *,
[data-theme="light"] .founder-card *,
[data-theme="light"] .calc-panel *,
[data-theme="light"] .calc-benefit *,
[data-theme="light"] .student-plan *,
[data-theme="light"] .cycle-feature *,
[data-theme="light"] .pain-card *,
[data-theme="light"] .card--glass * {
  color: #FFFFFF;
}
[data-theme="light"] .card a,
[data-theme="light"] .panel a,
[data-theme="light"] .phil-card a,
[data-theme="light"] .founder-card a {
  color: #FFFFFF;
}
/* Light mode: force SVG icons white inside green containers (NOT pain-card characters) */
[data-theme="light"] .founder-card svg,
[data-theme="light"] .phil-card svg,
[data-theme="light"] .calc-benefit svg,
[data-theme="light"] .card svg {
  stroke: #FFFFFF !important;
  fill: none !important;
}
/* Pain card characters — remove all strokes, keep fills only */
[data-theme="light"] .pain-card svg,
[data-theme="light"] .pain-avatar svg {
  stroke: none !important;
}
[data-theme="light"] .pain-card svg path,
[data-theme="light"] .pain-card svg rect,
[data-theme="light"] .pain-card svg circle,
[data-theme="light"] .pain-card svg line,
[data-theme="light"] .pain-card svg ellipse,
[data-theme="light"] .pain-card svg polygon {
  stroke: none !important;
}
/* Keep mint accent items visible with green */
[data-theme="light"] .pain-card svg *[stroke="var(--mint)"] {
  stroke: #0B5E42 !important;
}
[data-theme="light"] .pain-card svg *[fill="var(--mint)"] {
  fill: #0B5E42 !important;
}
[data-theme="light"] .pain-card svg text {
  stroke: none !important;
  fill: #0B5E42 !important;
}
/* Superman character — white outline strokes */
[data-theme="light"] .pain-duo__superman svg path,
[data-theme="light"] .pain-duo__superman svg line,
[data-theme="light"] .pain-duo__superman svg circle,
[data-theme="light"] .pain-duo__superman svg rect,
[data-theme="light"] .pain-duo__superman svg polygon {
  stroke: #FFFFFF !important;
}
[data-theme="light"] .pain-duo__superman svg *[fill="rgba(46,255,184"] {
  fill: rgba(11,94,66,.2) !important;
}
[data-theme="light"] .pain-duo__superman svg *[stroke="#2EFFB8"] {
  stroke: #0B5E42 !important;
}
[data-theme="light"] .founder-card__icon {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* Light mode: founder role text — force white over inline styles */
[data-theme="light"] .founder-card__role {
  color: #FFFFFF !important;
}

/* Labels/inputs inside panels keep readable */
[data-theme="light"] .panel .input,
[data-theme="light"] .panel .textarea,
[data-theme="light"] .card .input {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  color: #FFFFFF;
}
[data-theme="light"] .panel .input::placeholder,
[data-theme="light"] .card .input::placeholder {
  color: rgba(255,255,255,.5);
}

/* Light mode: nav logo — deep green */
[data-theme="light"] .nav__logo svg {
  fill: #0B5E42;
}
/* Light mode: hero logo — deep green */
[data-theme="light"] .hero__logo-text svg {
  fill: #0B5E42;
}

/* Light mode: footer — always dark */
[data-theme="light"] .footer {
  background: #111111;
}
[data-theme="light"] .footer a,
[data-theme="light"] .footer span {
  color: #fff !important;
}