:root{--bg:#07080f;--bg2:#0d1020;--card:#12162a;--line:#232a4a;--txt:#e7eaf6;--mut:#9aa3c7;--a:#00e5ff;--b:#a855f7;--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;
background-image:radial-gradient(circle at 15% 10%,#00e5ff18,transparent 40%),radial-gradient(circle at 85% 30%,#a855f71c,transparent 45%)}
a{color:var(--a)}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:#07080fcc;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-weight:800;color:var(--txt);text-decoration:none;font-size:1.15rem}.logo-mark{color:var(--a)}
.links{display:flex;gap:22px;align-items:center}.links a{color:var(--mut);text-decoration:none}.links a:hover{color:var(--txt)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--txt);font-size:1.3rem;border-radius:8px;padding:4px 10px}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font-weight:700;font-size:1rem;color:#05060c!important;text-decoration:none;background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 0 24px #00e5ff40}
.btn:hover{filter:brightness(1.1)}.btn-small{padding:7px 16px}
.btn-ghost{background:none;color:var(--txt)!important;border:1px solid var(--line);box-shadow:none}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:80px 5vw 60px;max-width:1200px;margin:auto}
.tag{color:var(--a);text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;margin:.2em 0}
.grad{background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.15rem;color:var(--mut)}.note{background:var(--card);border-left:3px solid var(--a);padding:10px 14px;border-radius:8px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.shot{aspect-ratio:16/10;border:2px dashed var(--line);border-radius:var(--r);display:grid;place-items:center;text-align:center;color:var(--mut);background:repeating-linear-gradient(45deg,#0d1020,#0d1020 12px,#10142a 12px,#10142a 24px)}
.shot-hero{box-shadow:0 0 60px #a855f730}
.section{padding:70px 5vw;max-width:1200px;margin:auto}.alt{background:var(--bg2);max-width:none}
.alt>*{max-width:1100px;margin-left:auto;margin-right:auto}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);margin:0 0 .3em}.sub{color:var(--mut);margin-top:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.2s}
.card:hover{border-color:#00e5ff60;transform:translateY(-2px)}.card h3{margin:0 0 8px}.card p{color:var(--mut);margin:0}
.wide{grid-column:1/-1}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chips li{border:1px solid #00e5ff50;color:var(--a);padding:5px 12px;border-radius:999px;font-size:.9rem}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.depth{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.steps li{margin-bottom:14px;color:var(--mut)}.steps strong{color:var(--txt)}
.eyes{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;perspective:600px}
.eye{width:150px;height:110px;border-radius:50%;border:2px solid var(--b);display:grid;place-items:center;text-align:center;background:#a855f715}
.eye.lead{border-color:var(--a);background:#00e5ff15;transform:scale(1.12) rotateY(14deg);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.18) rotateY(-10deg)}}
.eyes-cap{width:100%;text-align:center;color:var(--a);font-weight:700}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0}
.tl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}.tl p{color:var(--mut);margin:0}.tl h3{margin:10px 0 6px}
.dot{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));color:#05060c;font-weight:800}
.tl.free{border-color:#00e5ff80}
details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin:10px auto}
summary{cursor:pointer;font-weight:600}details p{color:var(--mut)}
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;max-width:720px;display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;background:#0a0c18;color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:11px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--a);border-color:transparent}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--mut)}.check input{margin-top:5px}
.hp{display:none}.form-status{color:#ff7a90;margin:0}.fallback{color:var(--mut);margin:0;font-size:.9rem}
.thanks{max-width:720px;border-color:var(--a)}
.foot{text-align:center;color:var(--mut);padding:30px;border-top:1px solid var(--line);font-size:.9rem}
@media(max-width:860px){
.hero,.depth{grid-template-columns:1fr;padding-top:40px}.grid,.shots{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:1fr 1fr}
.menu-btn{display:block}.links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg2);padding:20px;border-bottom:1px solid var(--line)}
.links.open{display:flex}}
@media(max-width:560px){.grid,.shots,.timeline,.row{grid-template-columns:1fr}}

/* ===== Theme v2: holographic grid, scanlines, particles, stereo hero ===== */
:root{--pink:#ff3df2}
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.grid-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
background-image:linear-gradient(#00e5ff14 1px,transparent 1px),linear-gradient(90deg,#00e5ff14 1px,transparent 1px);background-size:48px 48px;
mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 80%);
animation:gridmove 20s linear infinite}
@keyframes gridmove{to{background-position:0 48px,48px 0}}
.scanlines{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.35;
background:repeating-linear-gradient(0deg,transparent 0 2px,#00000040 2px 3px)}
.scanlines::after{content:"";position:absolute;left:0;right:0;height:120px;background:linear-gradient(transparent,#00e5ff0d,transparent);animation:scan 7s linear infinite}
@keyframes scan{from{top:-120px}to{top:100%}}
.logo{text-shadow:0 0 12px #00e5ff80}
h2{text-shadow:0 0 18px #a855f750}
h2::before{content:"// ";color:var(--a);font-family:ui-monospace,monospace;font-size:.7em}
.divider{height:1px;max-width:1100px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--a),var(--b),var(--pink),transparent);box-shadow:0 0 12px var(--a);position:relative}
.divider::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);background:var(--bg);border:1px solid var(--a);box-shadow:0 0 10px var(--a)}
.alt{background:#0d1020cc}
/* stereo two-eye hero */
.stereo{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;padding:18px;border-radius:28px;background:#0a0d1ccc;border:1px solid var(--line);box-shadow:0 0 50px #a855f730,inset 0 0 30px #00e5ff10}
.stereo::before{content:"";position:absolute;left:50%;top:12px;bottom:40px;width:1px;background:linear-gradient(transparent,var(--a),transparent)}
.lens{margin:0;position:relative;overflow:hidden;border-radius:46% 12% 12% 46%/38% 12% 12% 38%;border:2px solid var(--a);box-shadow:0 0 22px #00e5ff60;aspect-ratio:1/0.82}
.lens-r{border-radius:12% 46% 46% 12%/12% 38% 38% 12%;border-color:var(--b);box-shadow:0 0 22px #a855f760}
.lens img{width:100%;height:100%;object-fit:cover;object-position:20% 30%;display:block}
.lens-l img{filter:hue-rotate(-12deg) saturate(1.1)}.lens-r img{filter:hue-rotate(18deg)}
.lens figcaption{position:absolute;top:8px;left:12px;font:700 .8rem ui-monospace,monospace;color:#05060c;background:var(--a);padding:1px 7px;border-radius:6px}
.lens-r figcaption{left:auto;right:12px;background:var(--b)}
.lens::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 55%,#07080fcc 100%)}
.stereo-cap{grid-column:1/-1;text-align:center;margin:4px 0 0;color:var(--mut);font-size:.85rem;font-family:ui-monospace,monospace}
/* framed screenshots */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.frame{margin:0;padding:10px 10px 0;background:linear-gradient(145deg,#00e5ff30,#a855f730);border-radius:16px;position:relative;box-shadow:0 0 30px #00e5ff20;transition:.25s}
.frame:hover{box-shadow:0 0 44px #00e5ff50;transform:translateY(-3px)}
.frame::before{content:"● ● ●";position:absolute;top:-2px;left:16px;font-size:8px;letter-spacing:2px;color:var(--a);opacity:.7}
.frame img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #00e5ff40;margin-top:6px}
.frame figcaption{padding:10px 6px 12px;color:var(--mut);font-size:.92rem}.frame b{color:var(--a)}
.shot-depth{margin-top:28px;aspect-ratio:21/8}
.card,.tl,.form,details{background:#12162acc;backdrop-filter:blur(4px)}
.btn{box-shadow:0 0 24px #00e5ff40,0 0 40px #ff3df220}
.foot a{color:var(--a)}
@media(max-width:860px){.gallery{grid-template-columns:1fr}.stereo{padding:12px}}
@media(max-width:560px){.hero{padding:28px 5vw 30px}.section{padding:48px 5vw}.lens{aspect-ratio:1/1}.shot-depth{aspect-ratio:4/3}h1{font-size:2.1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}#particles{display:none}}

/* ===== v3: brand art, pricing, compatibility ===== */
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:34px;height:34px;border-radius:9px;filter:drop-shadow(0 0 8px #00e5ff80)}
.hero{position:relative;isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:-1;background:url(assets/hero-art.webp) 70% 40%/cover no-repeat;opacity:.55;
mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 85%,transparent),linear-gradient(transparent,#000 15%,#000 80%,transparent);mask-composite:intersect;
-webkit-mask-image:radial-gradient(ellipse 70% 80% at 65% 45%,#000 40%,transparent 80%)}
.hero-text{text-shadow:0 2px 12px #07080f}
.ver{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid #ff3df280;border-radius:999px;color:#ff9df8;letter-spacing:.04em;text-transform:none;font-family:ui-monospace,monospace}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px}
.price{background:#12162acc;border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative}
.price h3{font-size:2.2rem;margin:0}.price small{font-size:.9rem;color:var(--mut)}.price p{margin:4px 0 0;color:var(--mut)}
.deal{border:1px solid var(--a);box-shadow:0 0 30px #00e5ff40,inset 0 0 20px #00e5ff15;background:linear-gradient(145deg,#00e5ff18,#a855f718)}
.deal h3{color:var(--a);text-shadow:0 0 14px #00e5ff90}
.badge{position:absolute;top:-12px;left:18px;background:linear-gradient(90deg,var(--a),var(--b));color:#05060c;font-weight:800;font-size:.75rem;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}
.fine{color:var(--mut);font-size:.88rem}
.crypto{margin-top:22px}.crypto ul{margin:8px 0 0;padding-left:20px;color:var(--mut)}.crypto li{margin:4px 0}.crypto strong{color:var(--txt)}
.timeline .tl:nth-child(4) .dot{background:linear-gradient(135deg,#3dffa0,var(--a))}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#12162acc;margin-top:20px}
.compat{width:100%;border-collapse:collapse;font-size:.95rem}
.compat th,.compat td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compat th{color:var(--a);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.compat tr:last-child td{border-bottom:0}.compat td:last-child{color:var(--mut)}
.st{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.ok{background:#3dffa025;color:#3dffa0;border:1px solid #3dffa070}.wip{background:#ffc94025;color:#ffc940;border:1px solid #ffc94070}.exp{background:#ff3df225;color:#ff9df8;border:1px solid #ff3df270}
@media(max-width:860px){.hero-art{opacity:.35}}
@media(max-width:560px){.prices{grid-template-columns:1fr;gap:24px}
.compat thead{display:none}.compat tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line)}.compat td{display:block;border:0;padding:3px 0}.compat td:first-child{font-weight:700}}

/* ===== v4: guides ===== */
.guide-card{text-decoration:none;color:inherit;display:block}.guide-card .more{display:inline-block;margin-top:10px;color:var(--a);font-weight:700}
.guides{grid-template-columns:1fr}
.article{max-width:760px;margin:auto;padding:50px 5vw 70px}
.article h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.article h2{margin-top:1.6em;font-size:1.5rem}.article p,.article li{color:#c9cfe8}
.article li{margin:6px 0}.article .meta{color:var(--mut);font-size:.9rem}
.article figure{margin:24px 0}.article figure img{width:100%;height:auto;border-radius:12px;border:1px solid #00e5ff40;box-shadow:0 0 30px #00e5ff20}
.article figcaption{color:var(--mut);font-size:.88rem;margin-top:6px}
.callout{background:#12162acc;border-left:3px solid var(--a);padding:14px 18px;border-radius:8px;margin:20px 0}
.crumbs{font-size:.88rem;color:var(--mut)}.crumbs a{color:var(--mut)}
.guide-links{display:flex!important}
@media(max-width:860px){.guide-links{position:static;flex-direction:row;background:none;padding:0;border:0;gap:12px}.guide-links a:not(.btn){display:none}}
.btn-small{white-space:nowrap}
/* depth illustration + press kit */
.depth-illus{margin:28px 0 0;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:#0a0d1ccc;box-shadow:0 0 40px #a855f720}
.depth-illus svg{width:100%;height:auto;display:block}
.depth-illus figcaption{color:var(--mut);font-size:.9rem;margin-top:8px;text-align:center}
.facts{width:100%;border-collapse:collapse;margin-top:18px}.facts th,.facts td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}.facts th{color:var(--a);width:34%;font-weight:600}
.press-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:20px}
.press-assets figure{margin:0;background:#12162acc;border:1px solid var(--line);border-radius:var(--r);padding:10px}
.press-assets img{width:100%;height:150px;object-fit:contain;display:block;border-radius:8px;background:#07080f}
.press-assets figcaption{font-size:.9rem;color:var(--mut);margin-top:8px}
.press-main{max-width:960px;margin:0 auto;padding:48px 5vw}
img,svg,video{max-width:100%}
html,body{overflow-x:hidden}
@media(max-width:560px){.facts th,.facts td{display:block;width:auto;padding:6px 4px}.facts th{border-bottom:0;padding-top:12px}}
.anim-video{margin:28px 0 0}.anim-video video{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 0 30px #00e5ff20;background:#07080f}
.anim-video figcaption{color:var(--mut);font-size:.9rem;text-align:center;margin-top:8px}
.glossary dt{color:var(--a);font-weight:700;margin-top:14px}.glossary dd{margin:4px 0 0;color:var(--txt)}
.article table.facts{display:block;overflow-x:auto}
/* ---- v3 design enhancements ---- */
.nav{transition:padding .25s,box-shadow .25s,background .25s}
.nav.shrink{padding-top:6px;padding-bottom:6px;background:#07080fee;box-shadow:0 4px 24px #00000080}
.depth-bg{position:relative;isolation:isolate}
.depth-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#07080ff2,#07080fcc 40%,#07080ff2),url(assets/bg-depth.webp) center/cover no-repeat}
/* slider */
.slider{position:relative;margin-top:32px;border-radius:18px;padding:10px;background:linear-gradient(145deg,#00e5ff30,#a855f730);box-shadow:0 0 30px #00e5ff20}
.slides{position:relative;display:grid}
.slide{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .5s}
.slide.is-active{opacity:1;visibility:visible}
.slide img{width:100%;height:clamp(240px,60vw,640px);object-fit:contain;background:#090e18;border-radius:14px;display:block;box-shadow:0 0 0 1px #00e5ff33,0 0 24px #00e5ff26,0 8px 30px #0008}
.slide figcaption{padding:10px 6px 30px;color:var(--mut);text-align:center;font-size:.95rem}
.sl-btn{position:absolute;top:45%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--a);background:#07080fcc;color:var(--a);font-size:1.6rem;cursor:pointer;line-height:1}
.sl-prev{left:16px}.sl-next{right:16px}
.sl-btn:hover,.sl-btn:focus-visible{box-shadow:0 0 18px var(--a)}
.sl-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:10px}
.sl-dots button{width:12px;height:12px;border-radius:50%;border:1px solid var(--a);background:transparent;cursor:pointer;padding:0}
.sl-dots button[aria-selected="true"]{background:var(--a);box-shadow:0 0 10px var(--a)}
/* picker */
.picker{margin:24px 0 8px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:#12162acc}
.pk-label{margin:0 0 10px;color:var(--mut)}
.pk-btns{display:flex;flex-wrap:wrap;gap:8px}
.pk-btns button{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#0d1020;color:var(--txt);cursor:pointer;font:inherit;min-height:44px}
.pk-btns button[aria-selected="true"]{border-color:var(--a);box-shadow:0 0 14px #00e5ff60;color:var(--a)}
.pk-panel{display:grid;grid-template-columns:200px 1fr;gap:4px 18px;align-items:center;margin-top:16px}
.pk-panel[hidden]{display:none}
.pk-svg{width:200px;height:80px;grid-row:span 2}
.lvl-ok{color:#2ee6a6}.lvl-man{color:var(--a)}.lvl-exp{color:#f5b942}
.pk-panel p{margin:0;color:var(--txt)}.pk-panel .pk-note{color:var(--mut)}
.pk-badge{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;border:1px solid currentColor;font-size:.8rem}
.lvl-ok .pk-badge{color:#2ee6a6}.lvl-man .pk-badge{color:var(--a)}.lvl-exp .pk-badge{color:#f5b942}
.pk-foot{margin:12px 0 0;font-size:.85rem;color:var(--mut)}
@media(max-width:560px){.pk-panel{grid-template-columns:1fr}.pk-svg{grid-row:auto}}
/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
/* back to top */
.to-top{position:fixed;right:18px;bottom:18px;z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid var(--a);background:#07080fdd;color:var(--a);font-size:1.3rem;cursor:pointer;box-shadow:0 0 16px #00e5ff40}
.to-top:hover{box-shadow:0 0 26px var(--a)}
/* accordion */
details summary{cursor:pointer}
details[open]{box-shadow:0 0 18px #00e5ff25}
details>p{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* hover glow */
.card,.tl{transition:box-shadow .25s,transform .25s,border-color .25s}
.card:hover,.tl:hover{box-shadow:0 0 28px #00e5ff35;border-color:#00e5ff80;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.slide{transition:none}}
.fix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:22px}
.fix-clip{margin:0}.fix-clip video,.fix-clip img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);background:#07080f}
.fix-clip figcaption{color:var(--mut);font-size:.9rem;text-align:center;margin-top:8px}