:root {
  --ink:#fafafa; --muted:#b0afbf; --paper:#0a0a0a; --panel:#111115;
  --line:#292930; --action:#22d3ee; --accent:#67e8f9;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box }
body { margin:0; font-size:1rem; line-height:1.8 }
a { color:inherit; text-decoration:none }
a:hover { color:var(--accent) }
a:focus-visible { outline:3px solid var(--action); outline-offset:6px }
p,h1,h2,h3 { margin:0 }
p+p { margin-top:16px }
.wrap { width:min(1280px,calc(100% - 128px)); margin-inline:auto }
.skip { position:absolute; left:16px; top:-96px; z-index:30; background:var(--action); color:#020617; padding:12px 16px }
.skip:focus { top:16px }
.header { display:flex; justify-content:space-between; align-items:center; min-height:96px; gap:32px; border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:12px; font-size:1.25rem; font-weight:600; line-height:1.5 }
.brand small { display:block; font-size:.75rem; letter-spacing:.09em; font-weight:400; color:var(--muted) }
nav { display:flex; align-items:center; gap:32px; font-size:.875rem }
nav a { padding-block:12px }
.eyebrow { font-size:.75rem; font-weight:500; line-height:1.5; letter-spacing:.15em; color:#c4c4d0 }
h1 { font-size:clamp(3rem,5.6vw,5rem); letter-spacing:-.05em; line-height:1.25; font-weight:600; margin:32px 0 }
.brand-gradient { background:linear-gradient(100deg,#67e8f9 0%,#38bdf8 28%,#6366f1 55%,#a78bfa 78%,#e879f9 100%); background-clip:text; -webkit-background-clip:text; color:transparent }
.button { display:inline-flex; align-items:center; background:var(--action); color:#020617; padding:14px 24px; border-radius:4px; font-size:.9375rem; font-weight:500 }
.button:hover { background:#67e8f9; color:#020617 }
.footer { background:var(--paper); color:var(--muted); padding:40px 0; font-size:.8125rem }
.footer-inner { display:flex; justify-content:space-between; gap:32px; align-items:center; flex-wrap:wrap }
.footer strong { display:block; color:var(--ink); font-size:1rem; font-weight:500; margin-bottom:8px }
.footer-links { display:flex; gap:16px 24px; flex-wrap:wrap; align-items:center }
.police-icon { width:20px; height:20px; vertical-align:middle; margin-right:8px }

/* A single scene: the same background extends beneath the brand and footer. */
.home { position:relative; isolation:isolate; display:flex; flex-direction:column; min-height:100vh; min-height:100svh }
.home .header { position:relative; z-index:1; display:flex; justify-content:space-between; gap:20px; border:0; min-height:112px }
#language-control { justify-self:end }
.hero-art { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; background:var(--paper) }
.visual-fallback { position:absolute; inset:0; background:radial-gradient(ellipse at 75% 48%,#492068 0%,#20112f 30%,#0a0a0a 70%) }
#neural-visual, .neural-canvas { position:absolute; inset:0 }
.neural-shader { width:100%; height:100% }
.hero-art:has(canvas) .visual-fallback { visibility:hidden }
.hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 30%,transparent 70%),linear-gradient(0deg,rgba(10,10,10,.8),transparent 22%,transparent 82%,rgba(10,10,10,.25)); pointer-events:none }
.home .hero { flex:1; display:flex; align-items:center; padding-block:64px 104px; min-height:420px }
.hero-copy { position:relative; width:min(100%,680px) }
.hero-description { font-size:1.0625rem; color:#c4c4d0; line-height:1.9 }
.home .footer { position:relative; background:transparent; padding-block:24px; font-size:.75rem }
.home .footer strong { display:none }

/* Quiet glass controls, with React Bits Star Border providing the moving light. */
button { font:inherit }
button:focus-visible { outline:2px solid #c4b5fd; outline-offset:5px }
.language-toggle { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:8px 14px; border:1px solid #ffffff24; border-radius:999px; color:#a6a1b1; background:#10101666; cursor:pointer; backdrop-filter:blur(16px); font-size:.75rem; line-height:1; transition:background .2s,border-color .2s }
.language-toggle:hover { background:#211b2e; border-color:#ffffff55 }
.language-toggle svg { width:17px; height:17px; margin-right:3px; color:#d5ccdf }
.language-toggle .active { color:#fff; font-weight:600 }
.language-divider { color:#67606f }
.feature-actions { display:flex; gap:12px; margin:0 }
.feature-button.star-border-container { --button-glow:#a855f7; border:0; border-radius:13px; color:#f7f4fb; cursor:pointer; text-align:left; min-width:0; transition:transform .25s,box-shadow .25s; box-shadow:0 8px 32px #0004; isolation:isolate }
.feature-button--team.star-border-container { --button-glow:#22d3ee }
.feature-button.star-border-container .inner-content { display:flex; align-items:center; gap:10px; border-radius:12px; padding:12px 16px; font-size:.8125rem; line-height:1.5; letter-spacing:.025em }
.feature-icon { display:flex; color:#d8b4fe }
.feature-button--team .feature-icon { color:#a5e8f0 }
.feature-icon svg { width:20px; height:20px; transition:transform .3s }
.feature-label { white-space:nowrap }
.feature-arrow { width:18px; height:18px; margin-left:10px; color:#b8a9ca; transition:transform .25s,color .25s }
.feature-button--team .feature-arrow { color:#8cb4be }
@media(hover:hover) {
  .feature-button:hover { transform:translateY(-3px); box-shadow:0 8px 38px color-mix(in srgb,var(--button-glow) 20%,transparent) }
  .feature-button:hover .feature-arrow { transform:translateX(4px); color:#fff }
  .feature-button:hover .feature-icon svg { transform:rotate(-8deg) scale(1.07) }
}
.feature-button:active { transform:translateY(0) scale(.98) }
/* Fade Content-inspired blur/dissolve, controlled by hover, keyboard and touch. */
.hero-reveal { position:relative; display:grid; align-items:center; min-height:300px; border-radius:20px }
.hero-reveal-title,.revealed-features { grid-area:1 / 1; transition:opacity .4s ease,filter .4s ease,transform .45s cubic-bezier(.2,.8,.2,1) }
.hero-reveal-title { pointer-events:none }
.hero-reveal-title h1 { margin:20px 0 24px }
.reveal-hint { display:flex; align-items:center; gap:14px; color:#a59ab7; font-size:.75rem; letter-spacing:.08em }
.touch-hint { display:none }
.reveal-trigger { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:20px; background:transparent; cursor:pointer }
.hero-reveal.is-expanded .reveal-trigger { pointer-events:none }
.hero-reveal.is-expanded .hero-reveal-title { opacity:0; filter:blur(12px); transform:translateY(-16px) scale(.98) }
.revealed-features { width:min(100%,540px); padding-block:12px; opacity:0; filter:blur(12px); transform:translateY(20px) scale(.98); pointer-events:none }
.hero-reveal.is-expanded .revealed-features { opacity:1; filter:blur(0); transform:none; pointer-events:auto }
.reveal-panel-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; color:#b9a7cf; font-size:.6875rem; letter-spacing:.18em }
.reveal-close { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #ffffff20; border-radius:50%; color:#c9bfd8; background:#15111c80; font-size:1.25rem; cursor:pointer }
.reveal-close:hover { background:#342243 }
.hero-reveal .feature-actions { display:grid; grid-template-columns:1fr; gap:14px }
.hero-reveal .feature-button.star-border-container { width:100%; border-radius:18px }
.hero-reveal .feature-button.star-border-container .inner-content { padding:22px 24px; gap:20px; border-radius:17px; font-size:1.5rem; letter-spacing:.04em; font-weight:500 }
.hero-reveal .feature-icon svg { width:28px; height:28px }
.hero-reveal .feature-arrow { margin-left:auto; width:24px; height:24px }
.hero-reveal .feature-button { transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .25s }
.hero-reveal:not(.is-expanded) .feature-button--team { transform:translateY(16px) }
@media(hover:none),(pointer:coarse) { .hover-hint { display:none } .touch-hint { display:inline } }
.feature-dialog { padding:0; width:min(460px,calc(100% - 40px)); max-height:calc(100svh - 40px); border:1px solid #514160; border-radius:24px; color:var(--ink); background:radial-gradient(ellipse at 15% 0%,#30203f,#111015 70%); box-shadow:0 40px 140px #000b }
.feature-dialog--team { border-color:#35545c; background:radial-gradient(ellipse at 15% 0%,#173039,#101418 70%) }
.feature-dialog::backdrop { background:#06050ba8; backdrop-filter:blur(10px) }
.feature-dialog[open] { animation:dialog-enter .25s ease-out }
.feature-dialog-content { position:relative; padding:40px }
.dialog-dismiss { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; color:#beb7c9; background:transparent; cursor:pointer }
.dialog-dismiss:hover { background:#ffffff10; color:#fff }
.dialog-dismiss svg { width:20px; height:20px }
.dialog-feature-icon { display:grid; place-items:center; width:60px; height:60px; margin-bottom:28px; border:1px solid #d8b4fe33; border-radius:18px; color:#d8b4fe; background:#d8b4fe0a }
.dialog-feature-icon svg { width:30px; height:30px }
.feature-dialog--team .dialog-feature-icon { color:#a5e8f0; border-color:#a5e8f033; background:#a5e8f00a }
.feature-status { display:flex; gap:8px; align-items:center; color:#c1b4cc; font-size:.75rem }
.feature-status span { width:5px; height:5px; border-radius:50%; background:currentColor }
.feature-dialog h2 { font-size:1.75rem; line-height:1.3; letter-spacing:-.03em; margin:12px 0 16px; font-weight:500 }
.feature-dialog #feature-description { margin:0; color:#bab4c3; font-size:.9375rem; line-height:1.9 }
.dialog-return { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:32px; padding:12px 16px; color:#f5effc; border:1px solid #ffffff22; border-radius:10px; background:#ffffff07; cursor:pointer; font-size:.875rem }
.dialog-return:hover { background:#ffffff12 }
body:has(.feature-dialog[open]) { overflow:hidden }
html[lang="en"] .hero-copy { width:min(100%,900px) }
html[lang="en"] .hero h1 { font-size:clamp(2.5rem,5.4vw,4.7rem); letter-spacing:-.055em }
@keyframes dialog-enter { from { opacity:0; transform:translateY(8px) scale(.98) } to { opacity:1; transform:none } }

.article { max-width:760px; padding-block:48px 96px; min-height:70vh }
.back { font-size:.875rem; color:var(--muted) }
.article article>.eyebrow { margin-top:40px }
.article h1 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; margin:24px 0; line-height:1.4 }
.article .lead { font-size:1.125rem; color:var(--muted); margin-bottom:48px }
.article h2 { font-size:1.375rem; font-weight:500; margin:32px 0 16px }
.article p,.article li { color:#c7c7d2; line-height:1.95 }
.article ul { padding-left:24px }
.article .callout { background:var(--panel); padding:24px; border-left:3px solid var(--accent); margin-top:32px }
.article .button { margin-top:32px }
.article .meta { font-size:.8125rem; color:var(--muted); margin-bottom:24px }
@media(min-width:1800px) { .hero-copy h1 { font-size:5.5rem } }
@media(max-width:1100px) { .wrap { width:calc(100% - 64px) } }
@media(max-width:700px) {
  .wrap { width:calc(100% - 40px) }
  .header { min-height:88px; gap:16px }
  .brand { font-size:1rem; gap:8px }
  .brand small { font-size:.625rem }
  nav { gap:16px; font-size:.75rem }
  .home .header { min-height:88px }
  .home .hero { align-items:flex-start; min-height:420px; padding-block:clamp(48px,12svh,120px) 80px }
  .hero h1 { font-size:clamp(2.5rem,10.8vw,3.5rem); margin:24px 0; line-height:1.28 }
  .hero-description { font-size:.9375rem }
  .hero-art:after { background:linear-gradient(180deg,rgba(10,10,10,.5),rgba(10,10,10,.62) 30%,transparent 64%,rgba(10,10,10,.9)),linear-gradient(90deg,rgba(10,10,10,.25),transparent) }
  .footer-inner { align-items:flex-start; gap:12px }
  .footer-links { gap:8px 16px }
  .footer { font-size:.75rem; padding-block:32px }
  .home .footer { font-size:.6875rem; padding-block:20px }
  .article { padding-block:32px 64px }
  .article h1 { font-size:2rem }
  .article .lead { font-size:1rem }
  .language-toggle { padding-inline:12px; gap:8px }
  .language-toggle svg { display:none }
  html[lang="en"] .brand { font-size:.875rem }
  html[lang="en"] .hero h1 { font-size:clamp(2rem,8.5vw,3.5rem) }
  .feature-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .feature-button.star-border-container .inner-content { gap:8px; padding:11px 12px; font-size:.8125rem }
  .feature-arrow { margin-left:auto; width:16px; height:16px; flex-shrink:0 }
  .feature-icon svg { width:20px; height:20px }
  html[lang="en"] .feature-label { white-space:normal; text-align:left; line-height:1.3 }
  html[lang="en"] .feature-button .inner-content { height:100%; min-height:56px }
  html[lang="en"] .feature-arrow { display:none }
  .feature-dialog-content { padding:32px 24px }
  .hero-reveal { min-height:260px }
  .hero-reveal .feature-button.star-border-container .inner-content { padding:18px 16px; gap:14px; font-size:1.125rem }
  .hero-reveal .feature-icon svg { width:23px; height:23px }
  .hero-reveal .feature-arrow { width:20px; height:20px }
  html[lang="en"] .hero-reveal .feature-arrow { display:block }
  .reveal-panel-top { font-size:.5625rem; letter-spacing:.13em }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important } }