/* ============================================================
   WOORKER — SHARED DESIGN SYSTEM
   Light-first, mixed-theme, premium editorial SaaS system.
   ============================================================ */

:root{
  --bg:#FAF9F6;
  --bg-alt:#F2EFE9;
  --surface:#FFFFFF;
  --ink:#15141C;
  --ink-dim:#6C6976;
  --ink-faint:#A7A3AD;
  --line:rgba(21,20,28,0.09);
  --line-strong:rgba(21,20,28,0.16);
  --violet:#6E56CF;
  --violet-deep:#4A3AA0;
  --violet-bright:#8672E8;
  --blue:#3B7DF0;
  --cyan:#22B8CF;
  --green:#2FAE6E;
  --violet-tint:rgba(110,86,207,0.08);
  --blue-tint:rgba(59,125,240,0.07);
  --dark-bg:#0F0E15;
  --dark-surface:#18171F;
  --dark-surface-2:#201F29;
  --dark-line:rgba(255,255,255,0.10);
  --dark-text:#F5F3F0;
  --dark-text-dim:#9C99A8;
  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Hanken Grotesk', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --container:1200px;
  --container-wide:1360px;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --ease: cubic-bezier(.16,.8,.3,1);
  --nav-h: 76px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html[dir="rtl"] body{ direction:rtl; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.container-wide{ max-width:var(--container-wide); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; }
main{ display:block; }
::selection{ background:var(--violet); color:#fff; }

.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--violet-deep); display:flex; align-items:center; gap:0.5rem; margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--violet); display:inline-block; }
.eyebrow.on-dark{ color:#C9BEFF; }
.eyebrow.on-dark::before{ background:var(--violet-bright); }
[dir="rtl"] .eyebrow::before{ order:2; }

h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; letter-spacing:-0.01em; }
em{ font-style:italic; font-weight:500; color:var(--violet-deep); }
.on-dark em{ color:var(--violet-bright); }

.btn{
  display:inline-flex; align-items:center; gap:0.45rem; font-family:var(--font-body); font-weight:600;
  font-size:0.95rem; padding:0.85rem 1.5rem; border-radius:99px; border:1px solid transparent;
  cursor:pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.25s;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:#fff; box-shadow:0 1px 2px rgba(21,20,28,0.1); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(21,20,28,0.45); }
.btn-primary.violet{ background:linear-gradient(135deg, var(--violet), var(--violet-deep)); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost.on-dark{ color:var(--dark-text); border-color:var(--dark-line); }
.btn-ghost.on-dark:hover{ border-color:rgba(255,255,255,0.4); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(0,0,0,0.5); }
.btn-sm{ padding:0.6rem 1.1rem; font-size:0.85rem; }
.btn[disabled]{ opacity:0.55; cursor:not-allowed; transform:none !important; }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress-track{ position:fixed; top:0; left:0; right:0; height:2px; z-index:300; background:transparent; }
.scroll-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--violet),var(--blue)); transition:width 0.1s linear; }

/* ---------- NAV ---------- */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:center; padding:1.1rem var(--gutter);
  pointer-events:none;
}
.nav-pill{
  pointer-events:auto; width:100%; max-width:1160px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(250,249,246,0.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:99px; padding:0.55rem 0.6rem 0.55rem 1.15rem;
  box-shadow:0 10px 34px -18px rgba(21,20,28,0.22);
  transition: box-shadow 0.3s, background 0.3s;
}
[dir="rtl"] .nav-pill{ padding:0.55rem 1.15rem 0.55rem 0.6rem; }
#nav.scrolled .nav-pill{ background:rgba(250,249,246,0.9); box-shadow:0 14px 40px -16px rgba(21,20,28,0.28); }
.nav-brand{ display:flex; align-items:center; gap:0.55rem; font-weight:700; font-size:1rem; letter-spacing:-0.01em; }
.nav-brand img{ height:20px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; font-size:0.87rem; font-weight:500; color:var(--ink-dim); }
.nav-links a{ position:relative; padding:0.3rem 0; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--violet); border-radius:2px; }
.nav-cta{ display:flex; align-items:center; gap:0.5rem; }
.nav-cta .btn{ padding:0.62rem 1.1rem; font-size:0.85rem; }
#navToggle{ display:none; background:none; border:none; padding:0.5rem; cursor:pointer; }
#navToggle span{ display:block; width:20px; height:1.5px; background:var(--ink); margin:4px 0; }
.mobile-menu{
  display:none; position:fixed; top:calc(var(--nav-h) + 4px); left:var(--gutter); right:var(--gutter); z-index:199;
  pointer-events:auto; background:var(--dark-bg); border-radius:20px; padding:1.4rem 1.5rem 1.6rem;
  flex-direction:column; gap:0.2rem; box-shadow:0 30px 70px -20px rgba(0,0,0,0.5);
  max-height:calc(100vh - var(--nav-h) - 24px); overflow-y:auto;
}
.mobile-menu a{ color:var(--dark-text); font-size:1.02rem; font-weight:500; padding:0.75rem 0.2rem; border-bottom:1px solid var(--dark-line); }
.mobile-menu a:last-of-type{ border-bottom:none; }
.mobile-menu .btn{ margin-top:1rem; justify-content:center; }

.lang-switch{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:0.35rem; background:transparent; border:1px solid var(--line-strong);
  border-radius:99px; padding:0.5rem 0.85rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em;
  cursor:pointer; color:var(--ink-dim); text-transform:uppercase;
}
.lang-btn:hover{ border-color:var(--ink); color:var(--ink); }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--line-strong);
  border-radius:14px; box-shadow:0 24px 50px -20px rgba(21,20,28,0.35); padding:0.4rem; display:none;
  min-width:170px; z-index:50;
}
[dir="rtl"] .lang-menu{ right:auto; left:0; }
.lang-menu.open{ display:block; }
.lang-menu a.lang-opt{
  width:100%; text-align:left; background:none; border:none; padding:0.55rem 0.7rem; border-radius:9px;
  font-size:0.86rem; cursor:pointer; color:var(--ink-dim); display:flex; justify-content:space-between; gap:0.5rem;
}
[dir="rtl"] .lang-menu a.lang-opt{ text-align:right; }
.lang-menu a.lang-opt:hover{ background:var(--bg-alt); color:var(--ink); }
.lang-menu a.lang-opt.current{ color:var(--violet-deep); font-weight:600; }

.nav-dropdown{ position:relative; }
.nav-drop-btn{
  display:flex; align-items:center; gap:0.2rem; background:none; border:none; padding:0.3rem 0;
  font:inherit; font-size:0.87rem; font-weight:500; color:var(--ink-dim); cursor:pointer;
}
.nav-drop-btn:hover, .nav-drop-btn.active{ color:var(--ink); }
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:0 24px 50px -20px rgba(21,20,28,0.35); padding:0.4rem; display:none; min-width:200px; z-index:50;
}
.nav-dropdown-menu.open{ display:block; }
.nav-dropdown-opt{
  display:block; padding:0.55rem 0.7rem; border-radius:9px; font-size:0.86rem; color:var(--ink-dim);
}
.nav-dropdown-opt:hover, .nav-dropdown-opt.active{ background:var(--bg-alt); color:var(--ink); }
.nav-dropdown-seeall{
  display:block; margin-top:0.2rem; padding:0.55rem 0.7rem; border-top:1px solid var(--line);
  font-size:0.8rem; color:var(--violet-deep); font-weight:600;
}

.mobile-sub-head{
  display:block; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.07em;
  color:var(--dark-text-dim); opacity:0.6; padding:0.9rem 0.2rem 0.1rem;
}
.mobile-sub-link{ padding-left:0.9rem !important; font-size:0.92rem !important; }
[dir="rtl"] .mobile-sub-link{ padding-left:0.2rem !important; padding-right:0.9rem !important; }

/* ---------- PAGE HEADER (subpages) ---------- */
.page-header{
  padding:calc(var(--nav-h) + 4.5rem) 0 4rem;
  background: radial-gradient(700px 380px at 85% -10%, rgba(110,86,207,0.14), transparent 65%), var(--bg);
}
.page-header .eyebrow{ justify-content:center; }
.page-header.center{ text-align:center; }
.page-header h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); line-height:1.08; max-width:44rem; }
.page-header.center h1{ margin:0 auto; }
.page-header p.lead{ font-size:1.1rem; color:var(--ink-dim); max-width:36rem; margin:1.3rem 0 0; line-height:1.55; }
.page-header.center p.lead{ margin-left:auto; margin-right:auto; }
.page-header.dark{ background: radial-gradient(700px 380px at 50% -10%, rgba(110,86,207,0.22), transparent 65%), var(--dark-bg); color:var(--dark-text); }
.page-header.dark p.lead{ color:var(--dark-text-dim); }
.page-header .crumb{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:1rem; display:flex; gap:0.4rem; justify-content:center; }
.page-header .crumb a:hover{ color:var(--ink); }

/* ---------- Generic section spacing ---------- */
.section{ padding:var(--section-pad) 0; }
.section-tight{ padding:3.2rem 0; }
.section.alt{ background:var(--bg-alt); }
.section.surface{ background:var(--surface); }
.section.dark{ background:var(--dark-bg); color:var(--dark-text); }
.section.dark .ink-dim, .section.dark p{ color:var(--dark-text-dim); }
.section-head{ max-width:38rem; margin:0 0 3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.14; }
.section-head p{ color:var(--ink-dim); margin-top:1rem; font-size:1.03rem; line-height:1.6; }
.section.dark .section-head h2{ color:var(--dark-text); }

/* ---------- Cards ---------- */
.card{ border-radius:14px; border:1px solid var(--line); background:var(--bg); padding:1.8rem; }
.card.raised{ background:#fff; box-shadow:0 24px 50px -30px rgba(21,20,28,0.3); border-color:var(--line-strong); }
.shot-frame{ border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line-strong); box-shadow:0 24px 50px -24px rgba(21,20,28,0.28); }
.shot-frame img{ width:100%; height:auto; display:block; }

/* ---------- Workflow steps ---------- */
.workflow{ display:flex; align-items:stretch; gap:0.5rem; flex-wrap:wrap; }
.workflow-step{
  flex:1; min-width:150px; background:#fff; border:1px solid var(--line-strong); border-radius:12px;
  padding:1.1rem 1.15rem; position:relative;
}
.workflow-step .wf-n{ font-family:var(--font-mono); font-size:0.68rem; color:var(--violet-deep); letter-spacing:0.06em; }
.workflow-step h4{ font-family:var(--font-body); font-weight:600; font-size:0.96rem; margin:0.3rem 0 0.25rem; }
.workflow-step p{ font-size:0.83rem; color:var(--ink-dim); margin:0; line-height:1.45; }
.workflow-arrow{ flex:none; width:28px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); align-self:center; }

/* ---------- Filter chips (Integrations) ---------- */
.chip-row{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.chip{
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.02em; padding:0.55rem 1rem; border-radius:99px;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink-dim); cursor:pointer; transition:all 0.2s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.search-input{
  width:100%; max-width:360px; padding:0.75rem 1.1rem; border-radius:99px; border:1px solid var(--line-strong);
  background:#fff; font-family:var(--font-body); font-size:0.92rem; color:var(--ink);
}
.search-input:focus{ outline:none; border-color:var(--violet); }

.status-tag{ font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.05em; padding:0.28rem 0.6rem; border-radius:99px; display:inline-block; }
.status-available{ background:rgba(47,174,110,0.12); color:#1F7A4D; }
.status-priority{ background:rgba(110,86,207,0.12); color:var(--violet-deep); }
.status-path{ background:rgba(59,125,240,0.1); color:#2A5FC1; }
.status-soon{ background:rgba(21,20,28,0.07); color:var(--ink-dim); }

.integration-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.integration-card{
  background:#fff; border:1px solid var(--line-strong); border-radius:14px; padding:1.5rem;
  display:flex; flex-direction:column; gap:0.8rem; transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.integration-card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -26px rgba(21,20,28,0.3); }
.integ-icon{
  width:42px; height:42px; border-radius:11px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--violet-deep);
}
.integration-card h4{ font-family:var(--font-body); font-weight:600; font-size:1rem; margin:0; }
.integration-card p{ font-size:0.85rem; color:var(--ink-dim); margin:0; line-height:1.45; flex:1; }
.integration-card .cat{ font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; align-items:stretch; }
.price-card{ background:#fff; border:1px solid var(--line-strong); border-radius:16px; padding:2rem 1.6rem; display:flex; flex-direction:column; }
.price-card.hi{ background:linear-gradient(160deg,#fff,var(--violet-tint)); border:1px solid rgba(110,86,207,0.35); box-shadow:0 34px 70px -32px rgba(74,58,160,0.4); position:relative; }
.price-card.hi::before{ content:"Most popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--violet); color:#fff; font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; padding:0.35rem 0.8rem; border-radius:99px; white-space:nowrap; }
.price-name{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); }
.price-card.hi .price-name{ color:var(--violet-deep); }
.price-amount{ font-family:var(--font-display); font-size:2.3rem; margin:0.5rem 0 0.2rem; }
.price-amount span{ font-size:0.95rem; font-family:var(--font-body); color:var(--ink-dim); font-weight:500; }
.price-desc{ font-size:0.85rem; color:var(--ink-dim); margin:0 0 1.4rem; line-height:1.5; min-height:2.6rem; }
.price-card ul{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.price-card li{ font-size:0.87rem; color:var(--ink-dim); padding-left:1.15rem; position:relative; line-height:1.4; }
.price-card li::before{ content:"✓"; position:absolute; left:0; color:var(--violet); }
[dir="rtl"] .price-card li{ padding-left:0; padding-right:1.15rem; }
[dir="rtl"] .price-card li::before{ left:auto; right:0; }
.price-card .btn{ width:100%; justify-content:center; }

/* ---------- Comparison ---------- */
.compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.comp-card{ border-radius:14px; padding:1.9rem 1.7rem; border:1px solid var(--line); background:var(--bg); }
.comp-card.hi{ background:linear-gradient(160deg,#fff,var(--violet-tint)); border:1px solid rgba(110,86,207,0.3); box-shadow:0 30px 60px -30px rgba(74,58,160,0.35); }
.comp-card .comp-title{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:1rem; }
.comp-card.hi .comp-title{ color:var(--violet-deep); }
.comp-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.65rem; }
.comp-card li{ font-size:0.9rem; color:var(--ink-dim); line-height:1.5; padding-left:1.1rem; position:relative; }
.comp-card li::before{ content:"–"; position:absolute; left:0; color:var(--ink-faint); }
.comp-card.hi li{ color:var(--ink); }
.comp-card.hi li::before{ content:"✓"; color:var(--violet); }

/* ---------- Contact form ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.form-field{ margin-bottom:1.15rem; }
.form-field label{ display:block; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); margin-bottom:0.45rem; }
.form-field input, .form-field textarea{
  width:100%; padding:0.85rem 1rem; border-radius:10px; border:1px solid var(--line-strong); background:#fff;
  font-family:var(--font-body); font-size:0.95rem; color:var(--ink); resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-tint); }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-status{ margin-top:1rem; font-size:0.88rem; display:none; padding:0.8rem 1rem; border-radius:10px; }
.form-status.show{ display:block; }
.form-status.ok{ background:rgba(47,174,110,0.1); color:#1F7A4D; }
.form-status.err{ background:rgba(220,70,70,0.1); color:#B23A3A; }
.form-status.loading{ background:var(--bg-alt); color:var(--ink-dim); }

/* ---------- Feature rows (Product / Twin / Actions pages) ---------- */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:3.4rem 0; border-top:1px solid var(--line); }
.feature-row:first-of-type{ border-top:none; padding-top:0; }
.feature-row.rev .fr-copy{ order:2; }
.feature-row.rev .fr-shot{ order:1; }
.fr-copy .fr-tag{ font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--violet-deep); margin-bottom:0.7rem; }
.fr-copy h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.22; margin-bottom:0.8rem; }
.fr-copy p{ color:var(--ink-dim); font-size:0.98rem; line-height:1.6; max-width:28rem; }
.fr-copy ul{ margin:1rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.fr-copy li{ font-size:0.88rem; color:var(--ink-dim); padding-left:1.1rem; position:relative; }
.fr-copy li::before{ content:"–"; position:absolute; left:0; color:var(--ink-faint); }

.mini-caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.6rem; }
.mini-cap{ background:#fff; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; }
.mini-cap .mc-shot{ aspect-ratio:16/11; overflow:hidden; border-bottom:1px solid var(--line); }
.mini-cap .mc-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.mini-cap .mc-label{ padding:0.8rem 0.95rem; font-size:0.84rem; font-weight:600; }

/* ---------- Comparison table (Compare pages) ---------- */
.comp-table-wrap{ overflow-x:auto; border-radius:16px; border:1px solid var(--line-strong); background:#fff; }
.comp-table{ width:100%; border-collapse:collapse; min-width:560px; }
.comp-table th, .comp-table td{ padding:0.95rem 1.3rem; text-align:left; font-size:0.92rem; border-bottom:1px solid var(--line); }
[dir="rtl"] .comp-table th, [dir="rtl"] .comp-table td{ text-align:right; }
.comp-table thead th{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); background:var(--bg-alt); }
.comp-table tbody th{ font-weight:600; color:var(--ink); white-space:nowrap; }
.comp-table td{ color:var(--ink-dim); }
.comp-table tbody tr:last-child th, .comp-table tbody tr:last-child td{ border-bottom:none; }
.comp-table .col-woorker{ background:var(--violet-tint); color:var(--ink); font-weight:500; }

/* ---------- Who-fits cards (Compare pages) ---------- */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.fit-card{ border-radius:16px; padding:2rem; border:1px solid var(--line-strong); background:#fff; }
.fit-card h3{ font-size:1.15rem; margin:0 0 1rem; }
.fit-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.65rem; }
.fit-card li{ font-size:0.9rem; color:var(--ink-dim); line-height:1.5; padding-left:1.15rem; position:relative; }
.fit-card li::before{ content:"–"; position:absolute; left:0; color:var(--ink-faint); }
[dir="rtl"] .fit-card li{ padding-left:0; padding-right:1.15rem; }
[dir="rtl"] .fit-card li::before{ left:auto; right:0; }

/* ---------- FAQ accordion (details/summary — no JS required, fully crawlable) ---------- */
.faq-list{ max-width:44rem; }
.faq-item{ border-bottom:1px solid var(--line); padding:0.3rem 0; }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.15rem 1.8rem 1.15rem 0; position:relative;
  font-weight:600; font-size:0.98rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:1.1rem; font-size:1.3rem; color:var(--ink-faint); font-weight:400;
  transition:transform 0.25s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
[dir="rtl"] .faq-item summary{ padding:1.15rem 0 1.15rem 1.8rem; }
[dir="rtl"] .faq-item summary::after{ right:auto; left:0; }
.faq-item .faq-a{ padding:0 0 1.3rem; margin:0; color:var(--ink-dim); font-size:0.92rem; line-height:1.6; max-width:38rem; }

/* ---------- Trust / Security page ---------- */
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.trust-card{ background:#fff; border:1px solid var(--line-strong); border-radius:14px; padding:1.7rem; }
.trust-card .tc-icon{ width:38px; height:38px; border-radius:10px; background:var(--violet-tint); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color:var(--violet-deep); font-family:var(--font-mono); font-size:0.8rem; }
.trust-card h4{ font-size:1rem; margin:0 0 0.5rem; }
.trust-card p{ font-size:0.87rem; color:var(--ink-dim); line-height:1.55; margin:0; }
.section.dark .trust-card{ background:var(--dark-surface); border-color:var(--dark-line); }
.section.dark .trust-card h4{ color:var(--dark-text); }
.section.dark .trust-card p{ color:var(--dark-text-dim); }

.perm-table{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.perm-card{ background:#fff; border:1px solid var(--line-strong); border-radius:14px; padding:1.4rem; }
.perm-card h5{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin:0 0 0.9rem; }
.perm-card .perm-row{ display:flex; gap:0.5rem; align-items:flex-start; font-size:0.84rem; color:var(--ink-dim); margin-bottom:0.6rem; line-height:1.45; }
.perm-card .perm-row .pr-k{ color:var(--ink); font-weight:600; flex:none; min-width:3.6rem; }

.sec-contact-card{ background:#fff; border:1px solid var(--line-strong); border-radius:16px; padding:2rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.sec-contact-card h4{ margin:0 0 0.4rem; font-size:1.05rem; }
.sec-contact-card p{ margin:0; color:var(--ink-dim); font-size:0.9rem; }
.sec-contact-card code{ font-family:var(--font-mono); font-size:0.85rem; color:var(--violet-deep); }

/* ---------- Use-case hub grid ---------- */
.uc-hub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.uc-hub-card{
  background:#fff; border:1px solid var(--line-strong); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.uc-hub-card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -26px rgba(21,20,28,0.3); }
.uc-hub-card .uc-hub-shot{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); }
.uc-hub-card .uc-hub-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.uc-hub-card .uc-hub-body{ padding:1.4rem 1.5rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.uc-hub-card .uc-hub-tag{ font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--violet-deep); margin-bottom:0.5rem; }
.uc-hub-card h3{ font-size:1.05rem; margin:0 0 0.55rem; }
.uc-hub-card p{ font-size:0.86rem; color:var(--ink-dim); line-height:1.5; margin:0 0 1rem; flex:1; }
.uc-hub-card .uc-hub-link{ font-size:0.86rem; font-weight:600; color:var(--ink); }

@media (max-width:980px){ .trust-grid, .perm-table, .uc-hub-grid{ grid-template-columns:1fr 1fr; } .fit-grid{ grid-template-columns:1fr; } }
@media (max-width:760px){ .trust-grid, .perm-table, .uc-hub-grid{ grid-template-columns:1fr; } .sec-contact-card{ flex-direction:column; align-items:flex-start; } }

/* ---------- Legal ---------- */
.legal-body{ max-width:44rem; }
.legal-body h2{ font-size:1.4rem; margin:2.2rem 0 0.8rem; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color:var(--ink-dim); font-size:0.96rem; line-height:1.7; }
.legal-body ul{ padding-left:1.2rem; }
.legal-body .updated{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); margin-bottom:2rem; }

/* ---------- Footer ---------- */
#footer{ background:var(--dark-bg); color:var(--dark-text-dim); padding:4rem 0 2.2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.6rem; border-bottom:1px solid var(--dark-line); margin-bottom:1.6rem; }
.foot-grid-wide{ grid-template-columns:1.15fr 0.9fr 0.9fr 0.9fr 0.9fr 0.8fr; }
.foot-brand{ display:flex; align-items:center; gap:0.6rem; color:var(--dark-text); font-weight:700; margin-bottom:0.8rem; }
.foot-brand img{ height:19px; }
.foot-col h5{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--dark-text-dim); margin:0 0 0.9rem; }
.foot-col a{ display:block; font-size:0.87rem; margin-bottom:0.65rem; color:var(--dark-text-dim); }
.foot-col a:hover{ color:var(--dark-text); }
.foot-col .foot-soon{ display:block; font-size:0.87rem; margin-bottom:0.65rem; color:var(--dark-text-dim); opacity:0.45; cursor:default; }
.foot-desc{ font-size:0.87rem; line-height:1.55; max-width:22rem; color:var(--dark-text-dim); }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em; }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* ---------- Responsive ---------- */
.mobile-lang-row{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.4rem; }
.mobile-lang-row a.mobile-lang-opt{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em; padding:0.5rem 0.85rem; border-radius:99px;
  border:1px solid var(--dark-line); background:transparent; color:var(--dark-text-dim); cursor:pointer;
}
.mobile-lang-row a.mobile-lang-opt.current{ color:#fff; border-color:var(--violet-bright); background:rgba(134,114,232,0.18); }

@media (max-width: 980px){
  .nav-links{ display:none; }
  #navToggle{ display:block; }
  .nav-cta .lang-switch{ display:none; }
  .contact-grid, .integration-grid{ grid-template-columns:1fr 1fr; }
  .pricing-grid{ grid-template-columns:1fr 1fr; }
  .compare{ grid-template-columns:1fr; }
  .foot-grid, .foot-grid-wide{ grid-template-columns:1fr 1fr; }
  .feature-row{ grid-template-columns:1fr; gap:1.8rem; }
  .feature-row.rev .fr-copy{ order:1; }
  .feature-row.rev .fr-shot{ order:2; }
  .mini-caps{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .container, .container-wide{ padding:0 1.15rem; }
  .contact-grid, .integration-grid, .pricing-grid{ grid-template-columns:1fr; }
  .workflow{ flex-direction:column; }
  .workflow-arrow{ transform:rotate(90deg); margin:0.2rem auto; }
  .foot-grid, .foot-grid-wide{ grid-template-columns:1fr; }
}

/* ============================================================
   INTERACTION & MICRO-ANIMATION LAYER
   Shared components. Every animated rule here is paired with a
   prefers-reduced-motion override at the bottom of this block.
   ============================================================ */

/* ---------- Button press feedback ---------- */
.btn{ will-change:transform; }
.btn:active{ transform:scale(0.965) !important; transition-duration:0.1s; }

/* ---------- Nav compact-on-scroll ---------- */
.nav-pill{ transition: box-shadow 0.3s, background 0.3s, padding 0.3s var(--ease), transform 0.3s var(--ease); }
#nav.scrolled .nav-pill{ padding-top:0.42rem; padding-bottom:0.42rem; }

/* ---------- Animated active-nav underline ---------- */
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--violet);
  border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease);
}
.nav-links a.active::after{ transform:scaleX(1); }
.nav-links a:hover::after{ transform:scaleX(1); }

/* ---------- Smooth dropdown ---------- */
.lang-menu{
  display:block; visibility:hidden; opacity:0; pointer-events:none;
  transform:translateY(-6px) scale(0.98); transform-origin:top right;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
[dir="rtl"] .lang-menu{ transform-origin:top left; }
.lang-menu.open{ visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }

.nav-dropdown-menu{
  display:block; visibility:hidden; opacity:0; pointer-events:none;
  transform:translateX(-50%) translateY(-6px) scale(0.98); transform-origin:top center;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-dropdown-menu.open{ visibility:visible; opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }

/* ---------- Magnetic CTA target ---------- */
[data-magnetic]{ transition: transform 0.35s var(--ease); }

/* ---------- Success-check pop ---------- */
.demo-outcome .ck, .io-check{ transition: all 0.3s var(--ease); }
@keyframes ck-pop{ 0%{ transform:scale(0.4); } 55%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.demo-outcome.done .ck{ animation: ck-pop 0.4s var(--ease); }

/* ---------- Count-up numbers ---------- */
[data-countup]{ font-variant-numeric:tabular-nums; }

/* ---------- Progress indicator (step demos) ---------- */
.demo-progress{ height:3px; border-radius:99px; background:var(--line-strong); overflow:hidden; margin-top:1.1rem; }
.demo-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--violet),var(--blue)); transition:width 0.4s var(--ease); }
.demo-status{ font-family:var(--font-mono); font-size:0.78rem; color:var(--violet-deep); min-height:1.2em; margin-top:0.9rem; }
.demo-replay{ display:none; margin-top:1.1rem; }
.demo-replay.show{ display:inline-flex; }

/* ---------- Hotspots on product screenshots ---------- */
.hotspot-wrap{ position:relative; }
.hotspot{ position:absolute; z-index:6; }
.hotspot-dot{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.92); border:1.5px solid var(--violet);
  color:var(--violet-deep); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:0.72rem; font-weight:600; cursor:pointer; box-shadow:0 8px 22px -8px rgba(21,20,28,0.4);
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease); position:relative;
}
.hotspot-dot::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--violet-bright); opacity:0.55;
  animation: hotspot-ping 2.4s var(--ease) infinite;
}
.hotspot-dot:hover, .hotspot-dot:focus-visible, .hotspot.open .hotspot-dot{ transform:scale(1.12); box-shadow:0 12px 30px -8px rgba(110,86,207,0.55); }
@keyframes hotspot-ping{ 0%{ transform:scale(0.85); opacity:0.6; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
.hotspot-tip{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%, -6px); width:min(220px, 60vw);
  background:var(--ink); color:#fff; border-radius:10px; padding:0.7rem 0.9rem; font-size:0.8rem; line-height:1.4;
  box-shadow:0 20px 40px -16px rgba(0,0,0,0.5); opacity:0; visibility:hidden; pointer-events:none; z-index:10;
  transition:opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.hotspot.open .hotspot-tip{ opacity:1; visibility:visible; transform:translate(-50%, 0); pointer-events:auto; }
.hotspot-tip strong{ display:block; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; color:#C9BEFF; font-family:var(--font-mono); margin-bottom:0.3rem; }

/* ---------- Ask Woorker micro demo ---------- */
.ask-woorker{ background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:18px; padding:clamp(1.5rem,3vw,2.2rem); }
.aw-input-row{ display:flex; align-items:center; gap:0.7rem; background:var(--dark-bg); border:1px solid var(--dark-line); border-radius:99px; padding:0.85rem 1.2rem; color:var(--dark-text-dim); font-size:0.92rem; }
.aw-prompts{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.1rem; }
.aw-prompt{
  font-family:var(--font-body); font-size:0.83rem; font-weight:500; color:var(--dark-text); background:rgba(255,255,255,0.05);
  border:1px solid var(--dark-line); border-radius:99px; padding:0.6rem 1.05rem; cursor:pointer; transition:all 0.25s var(--ease);
}
.aw-prompt:hover, .aw-prompt:focus-visible{ border-color:var(--violet-bright); background:rgba(134,114,232,0.14); color:#fff; }
.aw-answer{ margin-top:1.3rem; max-height:0; opacity:0; overflow:hidden; transition:max-height 0.5s var(--ease), opacity 0.4s var(--ease); }
.aw-answer.show{ max-height:220px; opacity:1; }
.aw-answer-inner{ border-top:1px solid var(--dark-line); padding-top:1.1rem; }
.aw-tag{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:#C9BEFF; margin-bottom:0.5rem; display:flex; align-items:center; gap:0.4rem; }
.aw-tag .aw-dot{ width:6px; height:6px; border-radius:50%; background:#7CF29C; }
.aw-answer p{ color:var(--dark-text); font-size:0.98rem; line-height:1.6; margin:0 0 1rem; }

/* ---------- Before / After toggle ---------- */
.ba-toggle{ display:inline-flex; align-items:center; gap:0.7rem; background:#fff; border:1px solid var(--line-strong); border-radius:99px; padding:0.35rem; }
.ba-toggle button{
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.03em; text-transform:uppercase; padding:0.55rem 1.1rem;
  border-radius:99px; border:none; background:transparent; color:var(--ink-dim); cursor:pointer; transition:color 0.25s;
  position:relative; z-index:2;
}
.ba-toggle button.active{ color:#fff; }
.ba-toggle{ position:relative; }
.ba-toggle-thumb{ position:absolute; top:0.35rem; bottom:0.35rem; left:0.35rem; width:calc(50% - 0.35rem); border-radius:99px; background:linear-gradient(135deg,var(--violet),var(--violet-deep)); transition:transform 0.35s var(--ease); z-index:1; }
.ba-toggle[data-state="woorker"] .ba-toggle-thumb{ transform:translateX(100%); }
.ts-row{ transition:opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.ts-wrap[data-mode="toggle"] .ts-row.trad{ display:none; }
.ts-wrap[data-mode="toggle"] .ts-row.woork{ display:flex; }
.ts-wrap[data-mode="toggle"][data-showing="trad"] .ts-row.trad{ display:flex; }
.ts-wrap[data-mode="toggle"][data-showing="trad"] .ts-row.woork{ display:none; }
.ts-wrap[data-mode="toggle"] .ts-time.trad-time, .ts-wrap[data-mode="toggle"] .ts-time.woork-time{ display:none; }
.ts-wrap[data-mode="toggle"][data-showing="trad"] .ts-time.trad-time{ display:block; }
.ts-wrap[data-mode="toggle"][data-showing="woorker"] .ts-time.woork-time{ display:block; }
.ts-toggle-head{ display:flex; justify-content:center; margin-bottom:1.6rem; }

/* ---------- Business Twin node explanation panel ---------- */
.twin-sat{ cursor:pointer; }
.twin-sat:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:3px; }
.twin-sat.active{ border-color:var(--violet-bright); box-shadow:0 24px 60px -12px rgba(134,114,232,0.6); transform:translateY(-3px) scale(1.03); z-index:6; }
.twin-core.active-pulse{ box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 40px 100px -20px rgba(0,0,0,0.7), 0 0 130px -4px rgba(134,114,232,0.8); }
.twin-lines line{ transition:stroke 0.3s, stroke-width 0.3s, opacity 0.3s; opacity:0.55; }
.twin-lines line.active{ stroke:var(--violet-bright); stroke-width:1.6; stroke-dasharray:none; opacity:1; }
.twin-explain{
  max-width:640px; margin:2.2rem auto 0; background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:14px;
  padding:1.3rem 1.5rem; text-align:left; opacity:0; max-height:0; overflow:hidden; transition:opacity 0.4s var(--ease), max-height 0.4s var(--ease), margin 0.4s var(--ease);
}
[dir="rtl"] .twin-explain{ text-align:right; }
.twin-explain.show{ opacity:1; max-height:200px; }
.twin-explain .te-label{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:#C9BEFF; margin-bottom:0.4rem; }
.twin-explain p{ color:var(--dark-text); font-size:0.96rem; line-height:1.55; margin:0; }

/* ---------- KTAL scroll-reactive loop (baseline; page CSS adds the .ktal-enhanced state) ---------- */
.ktal-pin{ position:relative; }
.ktal-stage-list{ display:flex; flex-direction:column; gap:0; }
.ktal-item .ktal-n{ font-family:var(--font-mono); font-size:0.68rem; color:var(--violet-deep); letter-spacing:0.08em; }
.ktal-item h3{ font-family:var(--font-display); font-style:italic; font-size:1.5rem; font-weight:500; margin:0.3rem 0 0.4rem; color:var(--dark-text); }
.ktal-item p{ font-size:0.9rem; color:var(--dark-text-dim); line-height:1.55; max-width:22rem; margin:0; }

/* ---------- Integration READ/WRITE breakdown ---------- */
.integration-card{ cursor:pointer; }
.integration-card:focus-visible{ outline:2px solid var(--violet-bright); outline-offset:2px; }
.io-breakdown{ max-height:0; opacity:0; overflow:hidden; transition:max-height 0.4s var(--ease), opacity 0.35s var(--ease), margin 0.4s var(--ease); display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
.integration-card.open .io-breakdown{ max-height:220px; opacity:1; margin-top:0.2rem; }
.io-col h6{ font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 0.5rem; }
.io-col.read h6{ color:#2A5FC1; }
.io-col.write h6{ color:var(--violet-deep); }
.io-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.35rem; }
.io-col li{ font-size:0.76rem; color:var(--ink-dim); line-height:1.4; padding-left:0.85rem; position:relative; }
.io-col li::before{ content:"–"; position:absolute; left:0; color:var(--ink-faint); }
.integ-expand-hint{ font-family:var(--font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-top:auto; display:flex; align-items:center; gap:0.3rem; }
.integ-expand-hint svg{ width:9px; height:9px; transition:transform 0.3s var(--ease); }
.integration-card.open .integ-expand-hint svg{ transform:rotate(180deg); }

/* ---------- Workflow tabs ---------- */
.wf-tabs{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.wf-tab{
  font-family:var(--font-body); font-size:0.86rem; font-weight:600; padding:0.7rem 1.2rem; border-radius:99px;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink-dim); cursor:pointer; transition:all 0.25s var(--ease);
}
.wf-tab:hover{ border-color:var(--ink); color:var(--ink); }
.wf-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.wf-panel{ display:none; }
.wf-panel.active{ display:grid; animation: wf-fade 0.4s var(--ease); }
@keyframes wf-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Connection visualization (Integrations page) ---------- */
.conn-viz{ position:relative; max-width:760px; margin:2.6rem auto 0; padding:2.4rem 1rem; }
.conn-core{ width:110px; height:110px; border-radius:50%; margin:0 auto; background:radial-gradient(circle at 35% 30%, #2a2740, var(--dark-surface)); border:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; flex-direction:column; box-shadow:0 0 100px -6px rgba(134,114,232,0.55); position:relative; z-index:2; }
.conn-core img{ width:24px; filter:brightness(0) invert(1); opacity:0.9; }
.conn-ring{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.7rem; margin-top:1.8rem; position:relative; z-index:2; }
.conn-node{ display:flex; align-items:center; gap:0.4rem; background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:99px; padding:0.5rem 0.9rem 0.5rem 0.6rem; font-size:0.76rem; color:var(--dark-text-dim); }
.conn-node .cn-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex:none; }
.conn-node.live .cn-dot{ background:#7CF29C; box-shadow:0 0 0 3px rgba(124,242,156,0.2); }
.conn-node.priority .cn-dot{ background:var(--violet-bright); box-shadow:0 0 0 3px rgba(134,114,232,0.22); }
.conn-pulse-line{ position:absolute; top:0; left:50%; width:1px; height:2.4rem; background:linear-gradient(var(--violet-bright), transparent); transform:translateX(-50%); opacity:0.5; z-index:1; }

/* ---------- Reduced-motion overrides: keep everything visible, drop continuous/decorative motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hotspot-dot::before{ animation:none; }
  .demo-outcome.done .ck{ animation:none; }
  .lang-menu, .nav-dropdown-menu{ transition:opacity 0.01s, visibility 0.01s; }
  .twin-explain{ transition:opacity 0.01s; }
  .io-breakdown{ transition:opacity 0.01s; }
  .ktal-item{ opacity:1; }
  .aw-answer{ transition:opacity 0.01s; }
  [data-magnetic]{ transition:none !important; transform:none !important; }
}