/* Landing page (index.html) and legal pages */
.bg .grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%); opacity: 0.5; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.landing main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.hero { text-align: center; padding: clamp(48px, 9vw, 110px) 0 24px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); font-size: 13px; color: var(--text-2); margin-bottom: 22px; }
.badge .dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(124, 92, 255, 0); } }
.hero h1 { font-size: clamp(36px, 6.4vw, 76px); font-weight: 800; letter-spacing: -0.035em; max-width: 14ch; margin: 0 auto 18px; line-height: 1.04; }
.hero .lead { font-size: clamp(16px, 1.6vw, 19.5px); color: var(--text-2); max-width: 64ch; margin: 0 auto 28px; }
.hero-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.stats { list-style: none; padding: 0; margin: 34px auto 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 900px; }
.stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); }
.stats b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stats span { font-size: 12.5px; color: var(--text-2); }

/* demo mock */
.demo { margin: 44px auto 0; max-width: 1040px; }
.demo-frame { border-radius: 20px; border: 1px solid var(--line-2); background: #0b0c12; box-shadow: var(--shadow), 0 0 0 1px rgba(124, 92, 255, 0.12), 0 0 120px rgba(124, 92, 255, 0.18); overflow: hidden; text-align: left; }
.demo-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #06070c; font-size: 12px; color: #8b90a6; }
.demo-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; display: inline-block; } .demo-bar i:nth-child(2) { background: #febc2e; } .demo-bar i:nth-child(3) { background: #28c840; }
.demo-bar span { margin-left: 10px; font-family: var(--mono); }
.demo-bar .demo-brand { margin-left: auto; letter-spacing: 0.22em; font-weight: 700; color: #c7d2ff; opacity: 0.8; }
.demo-body { display: grid; grid-template-columns: 120px 1fr 190px; min-height: 300px; }
.demo-lib { border-right: 1px solid rgba(255, 255, 255, 0.08); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dl-t { height: 48px; border-radius: 8px; background: linear-gradient(135deg, #7c5cff55, #19c6e655); border: 1px solid rgba(255, 255, 255, 0.1); }
.dl-t.b { background: linear-gradient(135deg, #ff5ca855, #7c5cff55); } .dl-t.c { background: linear-gradient(135deg, #2ad17a55, #19c6e655); } .dl-t.d { background: linear-gradient(135deg, #ffb02055, #ff5ca855); }
.demo-preview { display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.04), transparent 70%); }
.dp-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #07080f; display: grid; place-items: center; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; }
.dp-scene { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.dp-scene.s1 { background: linear-gradient(135deg, #1b1f3a 0%, #3a2366 45%, #0e4b66 100%); opacity: 1; }
.dp-scene.s2 { background: linear-gradient(160deg, #0e2a3f 0%, #146a7a 50%, #2c1f5e 100%); }
.dp-scene.s3 { background: radial-gradient(ellipse at 50% 60%, #241a4a 0%, #0a0b16 70%); display: grid; place-items: center; }
.dp-logo { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(16px, 2.2vw, 26px); font-weight: 900; letter-spacing: 0.3em; color: #fff; padding: 14px 26px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); }
.dp-logo i { width: 1.1em; height: 1.1em; border-radius: 30%; background: var(--grad); display: inline-block; }
.dp-title { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.dp-title-in { position: relative; display: grid; gap: 6px; padding: 10px 26px; }
.dp-title-main { font-size: clamp(22px, 3.2vw, 40px); font-weight: 900; letter-spacing: 0.06em; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); line-height: 1.1; }
.dp-sub { font-size: 12px; color: #c7d2ff; letter-spacing: 0.18em; text-transform: uppercase; }
.dp-sel { position: absolute; inset: -6px -10px; border: 1.5px dashed rgba(124, 92, 255, 0.95); border-radius: 4px; opacity: 0; pointer-events: none; }
.dp-sel b { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.dp-sel b:nth-child(1) { left: -5px; top: -5px; } .dp-sel b:nth-child(2) { right: -5px; top: -5px; } .dp-sel b:nth-child(3) { right: -5px; bottom: -5px; } .dp-sel b:nth-child(4) { left: -5px; bottom: -5px; }
.ds-val { position: relative; display: inline-block; min-width: 3.2em; text-align: right; }
.ds-val em { font-style: normal; position: absolute; right: 0; top: 0; } .ds-val em.v2 { opacity: 0; }
.ds-fill-scale { width: 62%; } .ds-fill-trans { width: 30%; }
.dt-trans { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-right: 1px dashed rgba(25, 198, 230, 0.9); background: repeating-linear-gradient(135deg, rgba(25, 198, 230, 0.4) 0 3px, rgba(25, 198, 230, 0.1) 3px 6px); }
.demo-cursor { position: absolute; left: 7%; top: 60%; z-index: 5; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.demo-cursor svg { display: block; }
.demo-ghost { position: absolute; left: 10px; top: 12px; width: 52px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #ffb02099, #ff5ca899); border: 1px solid rgba(255, 255, 255, 0.35); opacity: 0; transform: rotate(-6deg); }
@media (max-width: 720px) { .demo-cursor { display: none; } }

/* ---- the 12 s editing loop (starts when the block scrolls into view) ---- */
.demo.in .dt-ph { animation: dm-ph 12s linear infinite; }
.demo.in .dp-scene.s1 { animation: dm-s1 12s linear infinite; }
.demo.in .dp-scene.s2 { animation: dm-s2 12s linear infinite; }
.demo.in .dp-scene.s3 { animation: dm-s3 12s linear infinite; }
.demo.in .dp-title { animation: dm-title 12s linear infinite; }
.demo.in .dp-title-in { animation: dm-titleScale 12s linear infinite; }
.demo.in .dp-sel { animation: dm-sel 12s linear infinite; }
.demo.in .ds-fill-scale { animation: dm-fillScale 12s linear infinite; }
.demo.in .ds-val em.v1 { animation: dm-val1 12s linear infinite; }
.demo.in .ds-val em.v2 { animation: dm-val2 12s linear infinite; }
.demo.in .ds-fill-trans { animation: dm-fillTrans 12s linear infinite; }
.demo.in .dt-clip.i { animation: dm-logoClip 12s linear infinite; transform-origin: left center; }
.demo.in .dt-clip.t { animation: dm-titleClip 12s linear infinite; }
.demo.in .dt-trans { animation: dm-transBadge 12s linear infinite; }
.demo.in .dt-clip.a { animation: dm-wave 1.6s linear infinite; }
.demo.in .demo-cursor { animation: dm-cursor 12s linear infinite; }
.demo.in .demo-ghost { animation: dm-ghost 12s linear infinite; }
.demo.in .dl-t.d { animation: dm-libPick 12s linear infinite; }

@keyframes dm-ph { 0% { left: 4%; } 100% { left: 93%; } }
@keyframes dm-s1 { 0%, 36% { opacity: 1; } 41%, 100% { opacity: 0; } 0% { transform: scale(1); } 41% { transform: scale(1.08); } 41.1%, 100% { transform: scale(1); } }
@keyframes dm-s2 { 0%, 35% { opacity: 0; transform: scale(1.06); } 41% { opacity: 1; } 70% { opacity: 1; transform: scale(1); } 74%, 100% { opacity: 0; } }
@keyframes dm-s3 { 0%, 69% { opacity: 0; transform: scale(1.04); } 74% { opacity: 1; } 93% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; } }
@keyframes dm-title { 0%, 21% { opacity: 0; transform: scale(0.6); } 24% { opacity: 1; transform: scale(1.06); animation-timing-function: ease-out; } 26% { transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 78%, 100% { opacity: 0; transform: scale(1); } }
@keyframes dm-titleScale { 0%, 42% { transform: scale(1); } 50%, 100% { transform: scale(1.15); } }
@keyframes dm-sel { 0%, 32% { opacity: 0; } 33%, 76% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes dm-fillScale { 0%, 42% { width: 62%; } 50%, 100% { width: 75%; } }
@keyframes dm-val1 { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes dm-val2 { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes dm-fillTrans { 0%, 35% { width: 30%; } 36% { width: 0%; } 41% { width: 100%; } 46%, 100% { width: 30%; } }
@keyframes dm-logoClip { 0%, 19% { opacity: 0; transform: scaleX(0.2); } 22% { opacity: 1; transform: scaleX(1.04); } 24%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes dm-titleClip { 0%, 32% { box-shadow: none; border-color: rgba(167, 139, 255, 0.8); } 33%, 76% { box-shadow: 0 0 0 2px var(--accent); border-color: #fff; } 77%, 100% { box-shadow: none; border-color: rgba(167, 139, 255, 0.8); } }
@keyframes dm-transBadge { 0%, 35% { opacity: 0.6; } 36%, 41% { opacity: 1; box-shadow: 0 0 10px rgba(25, 198, 230, 0.9); } 44%, 100% { opacity: 0.6; box-shadow: none; } }
@keyframes dm-wave { 0% { background-position: 0 50%; } 100% { background-position: 10px 50%; } }
@keyframes dm-cursor {
  0% { left: 7%; top: 48%; opacity: 0; }
  3% { left: 7%; top: 48%; opacity: 1; animation-timing-function: ease-in-out; }
  6% { left: 7%; top: 45%; animation-timing-function: ease-in-out; }
  19% { left: 74%; top: 90%; animation-timing-function: ease-in-out; }
  21% { left: 74%; top: 91%; }
  24% { left: 74%; top: 91%; animation-timing-function: ease-in-out; }
  31% { left: 47%; top: 84%; }
  33% { left: 47%; top: 85%; animation-timing-function: ease-in-out; }
  41% { left: 92.5%; top: 18%; }
  42% { left: 92.5%; top: 18%; animation-timing-function: linear; }
  50% { left: 94.5%; top: 18%; }
  54% { left: 94.5%; top: 18%; opacity: 1; }
  58%, 100% { left: 94.5%; top: 21%; opacity: 0; }
}
@keyframes dm-ghost { 0%, 5% { opacity: 0; } 7%, 19% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes dm-libPick { 0%, 4% { transform: none; box-shadow: none; } 6%, 19% { transform: scale(0.96); box-shadow: 0 0 0 2px var(--accent); } 21%, 100% { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  .demo.in * { animation: none !important; }
  .dp-title, .dp-sel { opacity: 1; } .dt-ph { left: 52%; } .demo-cursor { display: none; }
}
.demo-side { border-left: 1px solid rgba(255, 255, 255, 0.08); padding: 14px; font-size: 12px; color: #a5aabb; display: flex; flex-direction: column; gap: 8px; }
.ds-title { font-weight: 700; color: #e9ebf3; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.ds-row { display: flex; justify-content: space-between; }
.ds-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .ds-bar i { display: block; height: 100%; background: var(--grad); }
.demo-tl { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.08); background: #06070c; padding: 10px 16px 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.dt-lane { position: relative; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.dt-clip { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; font-size: 11px; font-family: var(--mono); color: #fff; padding: 3px 8px; white-space: nowrap; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); }
.dt-clip.v { background: #2a3458; border-color: rgba(124, 92, 255, 0.6); } .dt-clip.v2 { background: #243b58; border-color: rgba(25, 198, 230, 0.6); }
.dt-clip.i { background: #3a2748; border-color: rgba(255, 92, 168, 0.6); } .dt-clip.t { background: #3a2e66; border-color: rgba(167, 139, 255, 0.8); }
.dt-clip.a { background: #12331f; border-color: rgba(42, 209, 122, 0.6); background-image: repeating-linear-gradient(90deg, rgba(42, 209, 122, 0.6) 0 2px, transparent 2px 5px); background-size: 100% 60%; background-position: 0 50%; background-repeat: repeat-x; }
.dt-ph { position: absolute; top: 4px; bottom: 4px; left: 52%; width: 2px; background: var(--accent-3); box-shadow: 0 0 8px rgba(255, 92, 168, 0.8); will-change: left; }
.dt-ph::before { content: ''; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; background: var(--accent-3); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.demo-frame { position: relative; }
.demo-caption { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 12px; }
@media (max-width: 720px) { .demo-body { grid-template-columns: 1fr; } .demo-lib, .demo-side { display: none; } }

/* sections */
.section { padding: clamp(56px, 8vw, 96px) 0 0; }
.section h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; max-width: 26ch; margin-bottom: 14px; }
.section-lead { color: var(--text-2); max-width: 70ch; font-size: 16.5px; margin-bottom: 24px; }
.note { font-size: 13px; color: var(--text-3); margin-top: 14px; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 28px; }
.feat { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(12px); transition: transform 0.2s, border-color 0.2s; }
.feat:hover { transform: translateY(-3px); border-color: rgba(124, 92, 255, 0.5); }
.feat-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(124, 92, 255, 0.16); color: #b39bff; margin-bottom: 12px; }
.feat h3 { font-size: 17px; margin-bottom: 6px; }
.feat p { color: var(--text-2); font-size: 14px; margin: 0; }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; counter-reset: s; }
.steps li { padding: 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); position: relative; }
.step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; margin-bottom: 12px; }
.steps h3 { font-size: 17px; margin-bottom: 6px; }
.steps p { color: var(--text-2); font-size: 14px; margin: 0; }
.table-wrap { overflow-x: auto; margin-top: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.compare { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
.compare th, .compare td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.compare th:nth-child(2) { color: var(--accent-2); }
.compare td:first-child { color: var(--text-2); font-weight: 600; }
.compare td.yes { color: var(--ok); font-weight: 600; }
.compare tr:last-child td { border-bottom: 0; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; }
.pv { padding: 22px; border-radius: 16px; border: 1px solid rgba(42, 209, 122, 0.3); background: linear-gradient(160deg, rgba(42, 209, 122, 0.08), transparent 60%); }
.pv h3 { font-size: 17px; margin-bottom: 6px; }
.pv p { color: var(--text-2); font-size: 14px; margin: 0; }
.faq { display: grid; gap: 8px; margin-top: 22px; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--glass); padding: 0 18px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-3); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--text-2); margin: 0 0 16px; font-size: 14.5px; }
.cta-final { text-align: center; padding-top: clamp(56px, 8vw, 96px); }
.cta-final h2 { margin: 0 auto 10px; }
.cta-final .section-lead { margin: 0 auto 22px; }
.siblings .eyebrow { text-align: center; }
.sib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sib { display: block; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: 0.2s; }
.sib:hover { border-color: var(--accent); transform: translateY(-2px); }
.sib b { display: block; margin-bottom: 4px; }
.sib span { color: var(--text-2); font-size: 13.5px; }
.foot { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); padding: 28px clamp(16px, 4vw, 40px) 40px; font-size: 13.5px; color: var(--text-3); }
.foot-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.foot a { color: var(--text-2); }
@media (max-width: 860px) { .nav { display: none; } }

/* legal pages */
.legal-main { max-width: 860px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 0; }
.legal-card { padding: clamp(22px, 4vw, 40px); }
.legal-card h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 6px; }
.legal-card h2 { font-size: 18px; margin: 26px 0 8px; }
.legal-card p, .legal-card li { color: var(--text-2); font-size: 15px; }
.legal-card ul { padding-left: 20px; }
.legal-card a { color: var(--accent-2); }
.legal-card code { font-family: var(--mono); font-size: 13px; background: var(--bg-3); padding: 1px 6px; border-radius: 5px; }
.legal-back { padding: 18px 0; }