:root{
  /* === NEXORA BRAND COLOURS — change here to recolour whole site === */
  --volt:#c8ff2e;          /* Electric Volt (main new colour) */
  --volt-2:#8dff6a;
  --violet:#7b3dff;        /* Deep violet accent */
  --bg:#07060f;
  --bg-2:#0e0c1d;
  --text:#f2f1fa;
  --muted:#9d9bb8;
  --line:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.04);
  --font-h:'Syne','Space Grotesk',system-ui,sans-serif;--font-s:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.footer,.nav{position:relative;z-index:2}
.grad{background:linear-gradient(100deg,var(--volt),var(--volt-2) 40%,#a98bff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;transition:.3s}
.nav.solid{background:rgba(7,6,15,.75);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav nav{display:flex;gap:28px;align-items:center;font-size:.95rem;color:var(--muted)}
.nav nav a:hover{color:var(--volt)}
.logo{font-family:var(--font-h);font-weight:700;letter-spacing:.12em;display:flex;align-items:center;gap:10px}
.logo b{color:var(--volt)}
.logo-mark{width:22px;height:22px;background:linear-gradient(135deg,var(--volt),var(--violet));transform:rotate(45deg);border-radius:5px;box-shadow:0 0 22px var(--volt)}
.burger{display:none;background:none;border:0;width:36px;height:30px;cursor:pointer;position:relative}
.burger span{position:absolute;left:4px;right:4px;height:2px;background:var(--text);transition:.3s}
.burger span:first-child{top:10px}.burger span:last-child{top:18px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;border:1px solid var(--volt);background:var(--volt);color:#0a0a12;font-weight:600;font-family:var(--font-h);cursor:pointer;transition:.3s;box-shadow:0 0 30px rgba(200,255,46,.25)}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(200,255,46,.45)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--volt);color:var(--volt);box-shadow:none}
.btn-sm{padding:9px 20px;font-size:.88rem;color:#0a0a12!important}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 5vw 80px;position:relative}
.hero-inner{max-width:760px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--volt);margin-bottom:22px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 12px var(--volt);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.3}}
h1{font-family:var(--font-h);font-size:clamp(2.6rem,7vw,5.6rem);line-height:1.02;letter-spacing:-.03em;font-weight:700}
h2{font-family:var(--font-h);font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.1;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:1.15rem;max-width:560px;margin:24px 0 34px}
.cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats{display:flex;gap:44px;margin-top:56px;flex-wrap:wrap}
.hero-stats b{display:block;font-family:var(--font-h);font-size:2.2rem;color:var(--volt)}
.hero-stats span{color:var(--muted);font-size:.85rem}
.scroll-cue{position:absolute;bottom:26px;left:5vw;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.scroll-cue i{width:48px;height:1px;background:var(--volt);animation:line 2s infinite}
@keyframes line{50%{width:14px}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:rgba(7,6,15,.6);backdrop-filter:blur(10px);padding:18px 0}
.track{display:flex;gap:44px;width:max-content;font-family:var(--font-h);font-size:1.5rem;font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);animation:slide 28s linear infinite}
.track span:nth-child(4n+2){color:var(--volt);-webkit-text-stroke:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
.section{padding:120px 5vw}
.head{margin-bottom:56px;max-width:700px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;perspective:1200px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{position:relative;padding:34px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);backdrop-filter:blur(14px);transform-style:preserve-3d;transition:border-color .3s,box-shadow .3s}
.card:hover{border-color:rgba(200,255,46,.5);box-shadow:0 20px 60px rgba(123,61,255,.25)}
.card h3{font-family:var(--font-h);font-size:1.3rem;margin:14px 0 8px;transform:translateZ(30px)}
.card p{color:var(--muted)}
.ico{width:56px;height:56px;display:grid;place-items:center;font-size:1.6rem;border-radius:16px;background:rgba(200,255,46,.1);border:1px solid rgba(200,255,46,.25);transform:translateZ(50px)}
.card.big{text-align:center;padding:50px 30px}
.card.big b{font-family:var(--font-h);font-size:4rem;color:var(--volt)}
.note{margin-top:20px;color:var(--muted);font-size:.8rem}

/* about + portfolio */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trust .card{padding:28px;text-align:center}
.trust b{display:block;font-family:var(--font-h);font-size:2rem;color:var(--volt)}
.trust span{color:var(--muted);font-size:.9rem}
.proj{display:block;padding:18px 18px 26px}
.proj .thumb{height:160px;border-radius:16px;display:grid;place-items:center;font-size:3rem;margin-bottom:8px;transform:translateZ(40px);border:1px solid var(--line)}
.t1{background:linear-gradient(135deg,#2a1a6e,#7b3dff)}.t2{background:linear-gradient(135deg,#1c3a12,#c8ff2e55)}
.t3{background:linear-gradient(135deg,#5a1a5e,#ff4fd8aa)}.t4{background:linear-gradient(135deg,#0f2a4a,#3dc4ff99)}
.t5{background:linear-gradient(135deg,#4a2a0f,#ffb03d99)}.t6{background:linear-gradient(135deg,#0e0c1d,#c8ff2e66,#7b3dff)}
.proj h3,.proj p{padding:0 8px}
.proj em{display:inline-block;margin:14px 8px 0;font-style:normal;color:var(--volt);font-weight:600;font-family:var(--font-h)}
.proj:hover em{text-decoration:underline}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;counter-reset:s}
.steps li{padding:30px 26px;border-left:2px solid var(--volt);background:linear-gradient(90deg,rgba(200,255,46,.06),transparent)}
.steps em{font-style:normal;font-family:var(--font-h);font-size:2.6rem;color:var(--volt);opacity:.9}
.steps h3{font-family:var(--font-h);margin:6px 0}
.steps p{color:var(--muted)}

/* pricing */
.price .amt{font-family:var(--font-h);font-size:2.4rem;margin:10px 0 20px}
.price ul{margin-bottom:28px;display:grid;gap:10px;color:var(--muted)}
.price li::before{content:"✓";color:var(--volt);margin-right:10px}
.price.hot{border-color:var(--volt);box-shadow:0 0 60px rgba(200,255,46,.15)}
.badge{position:absolute;top:-13px;right:24px;background:var(--volt);color:#0a0a12;font-size:.72rem;font-weight:700;padding:4px 14px;border-radius:999px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px;border-radius:32px;background:linear-gradient(135deg,rgba(123,61,255,.18),rgba(200,255,46,.06));border:1px solid var(--line);backdrop-filter:blur(18px)}
form{display:grid;gap:14px}
input,select,textarea{width:100%;padding:15px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(7,6,15,.6);color:var(--text);font:inherit;outline:none;transition:.25s}
input:focus,select:focus,textarea:focus{border-color:var(--volt);box-shadow:0 0 0 3px rgba(200,255,46,.15)}
form .btn{justify-self:start}
.form-msg{min-height:1.4em;color:var(--volt);font-size:.9rem}

.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:36px 5vw;border-top:1px solid var(--line);background:rgba(7,6,15,.8);color:var(--muted);font-size:.9rem}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:860px){
  .burger{display:block}
  .nav nav{position:fixed;inset:0 0 auto 0;top:64px;flex-direction:column;gap:0;background:rgba(7,6,15,.97);padding:10px 5vw 24px;transform:translateY(-130%);transition:.4s;border-bottom:1px solid var(--line)}
  .nav nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav nav.open{transform:none}
  .contact,.about{grid-template-columns:1fr;padding:30px;gap:30px}.about{padding:0}
  .section{padding:80px 5vw}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

.mail{display:inline-block;margin-top:6px;color:var(--volt);font-family:var(--font-h);font-weight:600;font-size:1.1rem}.mail:hover,.footer a:hover{text-decoration:underline}

.proj{cursor:pointer;outline:none}.proj:focus-visible{border-color:var(--volt)}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(4,3,10,.82);backdrop-filter:blur(10px)}
.modal[hidden]{display:none}
.modal-box{position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;padding:26px;border-radius:26px;background:var(--bg-2);border:1px solid rgba(200,255,46,.35);box-shadow:0 30px 100px rgba(123,61,255,.35);animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.94)}}
.modal-box .thumb{height:150px;border-radius:16px;display:grid;place-items:center;font-size:3.4rem;margin-bottom:16px}
.modal-box h3{font-family:var(--font-h);font-size:1.5rem;margin-bottom:6px}
.modal-box p{color:var(--muted);margin-bottom:14px}
.modal-box ul{display:grid;gap:9px;margin-bottom:22px}
.modal-box li::before{content:"✓";color:var(--volt);margin-right:10px}
.modal-x{position:absolute;top:12px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(7,6,15,.7);color:var(--text);font-size:1.4rem;cursor:pointer}
.modal-x:hover{border-color:var(--volt);color:var(--volt)}

/* ================= v2 : Nexora identity + animation layer ================= */
.logo{gap:12px}
.mark{width:34px;height:34px;filter:drop-shadow(0 0 14px rgba(200,255,46,.45));animation:markPulse 4s ease-in-out infinite}
@keyframes markPulse{50%{filter:drop-shadow(0 0 22px rgba(123,61,255,.8));transform:rotate(-4deg) scale(1.05)}}
.wm{display:flex;flex-direction:column;line-height:1;font-family:var(--font-h);font-weight:800;letter-spacing:.2em;font-size:1.15rem}
.wm small{font-family:var(--font-s);font-weight:500;font-size:.56rem;letter-spacing:.32em;color:var(--volt);margin-top:5px;text-transform:uppercase}
.logo-mark{display:none}

/* shutter intro */
#shutter{position:fixed;inset:0;z-index:9999;pointer-events:all;animation:shFail .01s 6s forwards}
@keyframes shFail{to{visibility:hidden;pointer-events:none}}
.sh{position:absolute;left:0;right:0;height:50.2%;background:#07060f;transition:transform 1s cubic-bezier(.77,0,.18,1)}
.sh-t{top:0;border-bottom:1px solid rgba(200,255,46,.4)}.sh-b{bottom:0}
.sh-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;transition:opacity .4s,transform .6s}
.sh-c b{font-family:var(--font-h);font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.3em;margin-left:.3em;background:linear-gradient(100deg,#fff,var(--volt));-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-c span{font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
.mark-lg{width:84px;height:84px;margin-bottom:14px;animation:spinIn 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes spinIn{from{transform:rotate(-120deg) scale(.2);opacity:0}}
.bar{width:min(260px,60vw);height:3px;background:rgba(255,255,255,.1);border-radius:3px;margin-top:22px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--volt));box-shadow:0 0 14px var(--volt)}
.sh-c em{font-style:normal;font-family:var(--font-s);font-size:.8rem;color:var(--volt);letter-spacing:.2em}
#shutter.open .sh-t{transform:translateY(-101%)}#shutter.open .sh-b{transform:translateY(101%)}
#shutter.open .sh-c{opacity:0;transform:scale(1.2)}
#shutter.gone{display:none}

#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--violet),var(--volt));box-shadow:0 0 12px var(--volt)}
#glow{position:fixed;z-index:1;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(123,61,255,.18),rgba(200,255,46,.05) 45%,transparent 70%);opacity:0;transition:opacity .4s;will-change:transform}
body.pointer #glow{opacity:1}

/* nav entrance */
.nav{transform:translateY(-110%);transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s,background .3s,border-color .3s}
body.ready .nav{transform:none}
.nav nav a:not(.btn){position:relative}
.nav nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--volt);transition:width .3s}
.nav nav a:not(.btn):hover::after,.nav nav a.act::after{width:100%}.nav nav a.act{color:var(--text)}

/* hero */
h1,h2{font-family:var(--font-h);font-weight:700}
h1{font-size:clamp(2.1rem,4.9vw,4.2rem);line-height:1.06}
h2{font-size:clamp(1.7rem,3.6vw,2.9rem)}
.hero-inner{max-width:820px}
.rot-wrap{display:block;overflow:hidden;height:1.15em;padding-bottom:.05em}
.rot{display:inline-block;background:linear-gradient(100deg,var(--volt),var(--volt-2) 40%,#a98bff);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .55s cubic-bezier(.7,0,.2,1),opacity .55s}
.rot.out{transform:translateY(-110%);opacity:0}.rot.pre{transition:none;transform:translateY(110%);opacity:0}
.a-in{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,.9s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,.9s)}
body.ready .a-in{opacity:1;transform:none}
.eyebrow.a-in{--d:.6s}

/* split text */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .wi{display:inline-block;transform:translateY(110%) rotate(5deg);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*55ms + var(--base,0s))}
.split.in .wi{transform:none}
#h1{--base:.7s}
.split .grad{background:none;color:inherit}
.split .grad .wi{background:linear-gradient(100deg,var(--volt),var(--volt-2) 45%,#a98bff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* floating chips */
.chips{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:16px;background:rgba(14,12,29,.7);border:1px solid rgba(200,255,46,.3);backdrop-filter:blur(14px);box-shadow:0 14px 50px rgba(0,0,0,.4);opacity:0;animation:chipIn .9s cubic-bezier(.2,.8,.2,1) forwards,float 6s ease-in-out infinite}
.chip i{font-style:normal;font-size:1.4rem}.chip b{display:block;font-family:var(--font-s);font-size:.9rem}.chip small{color:var(--muted);font-size:.74rem}
.c1{right:8%;top:24%;animation-delay:2.3s,2.3s}.c2{right:30%;bottom:20%;animation-delay:2.6s,3s}.c3{right:4%;bottom:34%;animation-delay:2.9s,3.6s}
@keyframes chipIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1}}
@keyframes float{50%{transform:translateY(-14px)}}
.hero-stats b{font-family:var(--font-h)}

/* brand banner */
.banner-wrap{padding:70px 5vw 0}
.banner{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:38px 44px;border-radius:28px;border:1px solid rgba(200,255,46,.35);background:linear-gradient(120deg,#14102e,#0b0a1c 50%,#1c2a0b);background-size:200% 200%;animation:bgShift 10s ease infinite;isolation:isolate}
@keyframes bgShift{50%{background-position:100% 50%}}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 40%,rgba(200,255,46,.12) 50%,transparent 60%);transform:translateX(-100%);animation:sweep 5s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(100%)}}
.b-txt small{letter-spacing:.35em;color:var(--volt);font-size:.7rem}
.b-txt h3{font-family:var(--font-h);font-weight:800;font-size:clamp(1.6rem,4vw,2.7rem);line-height:1.1;margin:8px 0}
.b-txt p{color:var(--muted)}
.b-orbit{position:absolute;right:-40px;top:-60px;width:260px;height:260px;z-index:-1;opacity:.55}
.b-orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--volt);animation:spin 14s linear infinite}
.b-orbit i:nth-child(2){inset:30px;border-color:var(--violet);animation-duration:9s;animation-direction:reverse}
.b-orbit i:nth-child(3){inset:64px;border-style:dashed;animation-duration:20s}
@keyframes spin{to{transform:rotate(360deg)}}

/* card spotlight + magnetic */
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(200,255,46,.14),transparent 60%)}
.card:hover::before{opacity:1}
.btn{will-change:transform}
.btn::after{content:"";position:absolute}
.btn span{transition:transform .3s}.btn:hover span{transform:translateX(5px)}
.ico{transition:transform .4s cubic-bezier(.2,.8,.2,1)}.card:hover .ico{transform:translateZ(50px) rotate(-8deg) scale(1.12)}
.grid{perspective:1400px}
.card h3{font-family:var(--font-s)}

/* featured NexoHypic */
.feat{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:54px;border-radius:34px;background:linear-gradient(135deg,rgba(123,61,255,.16),rgba(200,255,46,.05));border:1px solid var(--line);backdrop-filter:blur(16px)}
.ticks{display:grid;gap:12px;margin:0 0 30px;color:var(--text)}
.ticks li{padding-left:2px;transition:transform .3s}.ticks li:hover{transform:translateX(8px)}
.phone-wrap{text-align:center}
.phone{position:relative;width:250px;height:500px;margin:0 auto;border-radius:42px;padding:12px;background:linear-gradient(160deg,#2a2550,#0c0a1a);border:2px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(123,61,255,.4),0 0 60px rgba(200,255,46,.12);animation:float 6s ease-in-out infinite}
.notch{position:absolute;top:14px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:14px;background:#05040c;z-index:3}
.screen{height:100%;border-radius:32px;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 30%,#1d3a12,#0a0f0a 70%);display:flex;flex-direction:column;align-items:center;padding:52px 18px 20px;gap:18px}
.scan-frame{position:relative;width:170px;height:170px;display:grid;place-items:center}
.scan-frame span{position:absolute;width:34px;height:34px;border:3px solid var(--volt)}
.scan-frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.scan-frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.scan-frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 10px}.scan-frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
.scan-line{position:absolute;left:8px;right:8px;height:3px;border-radius:3px;background:var(--volt);box-shadow:0 0 18px var(--volt);animation:scan 2.4s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:90%}}
.scan-ico{font-size:4rem;transition:transform .4s,opacity .4s}.scan-ico.sw{transform:scale(.4);opacity:0}
.modes{display:flex;gap:8px}.modes i{font-style:normal;font-size:.72rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:.3s}.modes i.on{background:var(--volt);color:#0a0a12;border-color:var(--volt);font-weight:600}
.result{margin-top:auto;width:100%;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(200,255,46,.3);font-size:.85rem;font-family:var(--font-s);transition:opacity .3s}
.cap{display:block;margin-top:18px;color:var(--muted);font-size:.75rem}

/* filters + portfolio */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filters button{padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--muted);font:600 .9rem var(--font-s);cursor:pointer;transition:.3s}
.filters button:hover{color:var(--text);border-color:var(--volt)}.filters button.on{background:var(--volt);color:#0a0a12;border-color:var(--volt)}
.proj{position:relative}
.proj.hide{display:none}
.proj .thumb{position:relative;overflow:hidden}
.proj .thumb svg{width:84px;height:84px}
.proj .thumb::after{content:"▶";position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;display:none;place-items:center;background:var(--volt);color:#0a0a12;font-size:.8rem;padding-left:2px}
.proj.hasv .thumb::after{display:grid}
.proj .sample{position:absolute;top:26px;left:26px;z-index:2;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(7,6,15,.75);border:1px solid var(--line);color:var(--muted);transform:translateZ(60px)}
.proj .ptag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--volt);padding:12px 8px 0;display:block}
.proj h3{margin-top:6px}
.t7{background:linear-gradient(135deg,#5a1a1a,#ff6a3d99)}.t8{background:linear-gradient(135deg,#1a1a5a,#3d7bff99)}.t9{background:linear-gradient(135deg,#0e0c1d,#3dffc4aa,#7b3dff)}.t10{background:linear-gradient(135deg,#2e2e0f,#e8d84a88)}

/* modal v2 */
.modal-box{width:min(640px,100%)}
.m-tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);margin-bottom:6px}
.modal-box .thumb svg{width:84px;height:84px}
.vtabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.vtabs button{padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 .82rem var(--font-s);cursor:pointer}
.vtabs button.on{background:var(--volt);color:#0a0a12;border-color:var(--volt)}
.vbox{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line);margin-bottom:18px;display:grid;place-items:center}
.vbox video,.vbox iframe{width:100%;height:100%;border:0;background:#000}
.vsoon{text-align:center;color:var(--muted);padding:20px;font-size:.9rem}.vsoon b{display:block;font-size:2rem;margin-bottom:6px}
.m-actions{display:flex;gap:12px;flex-wrap:wrap}

/* dashboard */
.dash{display:grid;grid-template-columns:64px 1fr;border-radius:28px;overflow:hidden;border:1px solid rgba(200,255,46,.25);background:rgba(10,9,22,.8);backdrop-filter:blur(16px);box-shadow:0 40px 100px rgba(123,61,255,.25)}
.d-side{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;background:rgba(255,255,255,.03);border-right:1px solid var(--line)}
.d-side i{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-style:normal;color:var(--muted);transition:.3s}.d-side i.on,.d-side i:hover{background:rgba(200,255,46,.14);color:var(--volt)}
.d-main{padding:22px;display:grid;gap:18px;min-width:0}
.d-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-h);font-size:1.2rem}
.live{font:500 .78rem var(--font-s);color:var(--muted);display:flex;align-items:center;gap:8px}.live i{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 10px var(--volt);animation:pulse 1.4s infinite}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi,.panel{padding:18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.kpi small,.panel small{color:var(--muted);font-size:.78rem}
.kpi b{display:block;font-family:var(--font-h);font-size:1.9rem;margin:4px 0}
.kpi em{font-style:normal;font-size:.78rem;color:var(--volt)}
.d-row{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.chart{width:100%;height:150px;margin-top:10px;overflow:visible}
.chart .line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1) .3s}
.chart .area{opacity:0;transition:opacity 1.4s 1.2s}
.dash.in .chart .line{stroke-dashoffset:0}.dash.in .chart .area{opacity:1}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:10px}
.bars i{flex:1;height:var(--h);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--volt),var(--violet));transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.dash.in .bars i{transform:none}.bars i:nth-child(2){transition-delay:.1s}.bars i:nth-child(3){transition-delay:.2s}.bars i:nth-child(4){transition-delay:.3s}.bars i:nth-child(5){transition-delay:.4s}.bars i:nth-child(6){transition-delay:.5s}
.feed ul{display:grid;gap:8px;margin-top:10px;min-height:150px;align-content:start}
.feed li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.04);font-size:.88rem;animation:feedIn .6s cubic-bezier(.2,.8,.2,1)}
.feed li small{color:var(--muted);white-space:nowrap}
@keyframes feedIn{from{opacity:0;transform:translateY(-14px)}}

/* reviews, faq */
.stars{color:var(--volt);letter-spacing:.2em;transform:translateZ(30px)}
blockquote{margin:14px 0;color:var(--text);font-size:1.02rem;transform:translateZ(20px)}
figcaption{color:var(--muted);font-size:.85rem}
.faq{display:grid;gap:12px;max-width:820px}
.faq details{border-radius:18px;background:var(--glass);border:1px solid var(--line);padding:0 22px;transition:border-color .3s}
.faq details[open]{border-color:rgba(200,255,46,.5)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font:600 1.05rem var(--font-s);display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--volt);font-size:1.5rem;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:20px;animation:feedIn .5s}

/* generic reveal tweaks */
.reveal{transition-property:opacity,transform}
.mail{font-family:var(--font-s)}

@media(max-width:860px){
  .feat{grid-template-columns:1fr;padding:28px;gap:36px}
  .d-row{grid-template-columns:1fr}
  .dash{grid-template-columns:1fr}.d-side{flex-direction:row;justify-content:center;border-right:0;border-bottom:1px solid var(--line);padding:10px}
  .chips{display:none}
  .banner{padding:28px}
  .hero{padding-top:110px}
}
@media(prefers-reduced-motion:reduce){
  #shutter{display:none}.nav,.a-in,.split .wi{transform:none!important;opacity:1!important}
}
@media(max-width:860px){#bg3d{opacity:.42}.wm{font-size:1rem}.mark{width:30px;height:30px}}

/* ================= v3 : standalone cover + service cards ================= */
#bg3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cover{min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 72% 45%,#1d1247 0%,#0b0a1f 55%,#07060f 100%)}
.cover::before{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(200,255,46,.025) 3px 4px);pointer-events:none}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:linear-gradient(90deg,transparent,var(--volt),var(--violet),transparent);box-shadow:0 0 30px var(--volt)}
.hero-inner{position:relative;z-index:2}
.chips{z-index:2}
.cover .lead b{color:var(--text)}
.enter{position:absolute;left:50%;bottom:26px;z-index:4;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.enter i{font-style:normal;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(200,255,46,.5);color:var(--volt);animation:bob 1.8s ease-in-out infinite}
.enter:hover{color:var(--volt)}
@keyframes bob{50%{transform:translateY(7px)}}
.scroll-cue{display:none}

.site{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#0a0918,#0d0b20 45%,#08070f)}
.site::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;animation:gridMove 30s linear infinite}
@keyframes gridMove{to{background-position:64px 64px}}
.blob{position:absolute;z-index:-1;width:620px;height:620px;border-radius:50%;filter:blur(110px);opacity:.28;animation:drift 18s ease-in-out infinite}
.b1{left:-200px;top:6%;background:var(--violet)}.b2{right:-220px;top:38%;background:#6aa900;animation-delay:-6s}.b3{left:10%;top:74%;background:var(--violet);animation-delay:-11s}
@keyframes drift{50%{transform:translate(90px,-60px) scale(1.15)}}

/* ----- service cards ----- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;perspective:1500px}
.svc-slot{position:relative;height:360px;opacity:0;transform:var(--from,none);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.9,.25,1.05)}
.svc-slot.in{opacity:1;transform:none}
.svc-slot[data-m="1"]{--from:translateX(-110px) rotateY(-60deg)}
.svc-slot[data-m="2"]{--from:translateX(110px) rotateY(60deg)}
.svc-slot[data-m="3"]{--from:translateY(-100px) rotateX(-70deg)}
.svc-slot[data-m="4"]{--from:scale(.4) rotate(-14deg)}
.svc-slot[data-m="5"]{--from:translateY(-120px) rotateZ(8deg)}
.svc-slot[data-m="6"]{--from:translateY(70px) rotateZ(-12deg) scale(.9)}
.svc-slot[data-m="7"]{--from:rotateY(100deg) scale(.85)}
.svc-slot[data-m="8"]{--from:skewX(18deg) translateX(90px)}
.svc-slot[data-m="9"]{--from:scale(1.25);filter:blur(12px)}
.svc-slot[data-m="9"].in{filter:none}
.svc-slot[data-m="10"]{--from:translateY(110px) rotateX(55deg)}
.svc-slot:hover,.svc-slot:has(.svc.open),.svc-slot:has(.svc:focus-visible){z-index:30}
.svc{position:absolute;top:0;left:0;width:100%;height:360px;overflow:hidden;padding:22px;display:flex;flex-direction:column;cursor:pointer;outline:none;background:linear-gradient(150deg,#17132f,#0c0a1a);transition:height .55s cubic-bezier(.2,.9,.25,1),transform .55s,box-shadow .4s,border-color .3s}
.svc h3{font-family:var(--font-s);font-size:1.2rem;margin:14px 0 4px;transform:none}
.svc .sum{color:var(--muted);font-size:.93rem}
.svc .hint{margin-top:auto;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);opacity:.8;transition:opacity .3s}
.svc .more{opacity:0;transform:translateY(14px);transition:opacity .4s .12s,transform .4s .12s;margin-top:12px;border-top:1px solid var(--line);padding-top:14px}
.svc .more p{font-size:.88rem;margin-bottom:10px}
.svc .more ul{display:grid;gap:7px;margin-bottom:16px;font-size:.86rem}
.svc .more li::before{content:"✓";color:var(--volt);margin-right:9px}
.svc .btn-sm{padding:10px 18px}
@media(hover:hover){
  .svc:hover{height:580px;transform:scale(1.04);border-color:var(--volt);box-shadow:0 30px 80px rgba(123,61,255,.45),0 0 40px rgba(200,255,46,.15)}
  .svc:hover .more{opacity:1;transform:none}.svc:hover .hint{opacity:0}
}
.svc.open,.svc:focus-visible,.svc:has(a:focus-visible){height:580px;transform:scale(1.04);border-color:var(--volt);box-shadow:0 30px 80px rgba(123,61,255,.45)}
.svc.open .more,.svc:focus-visible .more,.svc:has(a:focus-visible) .more{opacity:1;transform:none}
.svc.open .hint{opacity:0}
@media(hover:none){
  .svc-slot{height:auto;min-height:360px;display:flex}
  .svc{position:relative;height:auto;min-height:360px;transform:none!important}
  .svc .more{display:none}.svc.open .more{display:block}
}

/* ----- unique 3D art per service ----- */
.art{height:150px;display:grid;place-items:center;perspective:700px;transform-style:preserve-3d;overflow:visible}
.art>*{grid-area:1/1}
/* 1 gyroscope */
.a-gyro{transform-style:preserve-3d}
.a-gyro i{display:block;border-radius:50%;border:2px solid var(--volt);box-shadow:0 0 14px rgba(200,255,46,.35)}
.a-gyro i:nth-child(1){width:120px;height:120px;animation:gy1 5s linear infinite}
.a-gyro i:nth-child(2){width:92px;height:92px;border-color:#a98bff;animation:gy2 4s linear infinite}
.a-gyro i:nth-child(3){width:64px;height:64px;border-style:dashed;animation:gy3 3s linear infinite}
.a-gyro b{width:20px;height:20px;border-radius:50%;background:var(--volt);box-shadow:0 0 28px var(--volt);animation:pulse 1.6s infinite}
@keyframes gy1{from{transform:rotateX(70deg) rotateZ(0)}to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes gy2{from{transform:rotateY(70deg) rotateZ(0)}to{transform:rotateY(70deg) rotateZ(-360deg)}}
@keyframes gy3{to{transform:rotateX(360deg) rotateY(180deg)}}
/* 2 gears */
.gs{display:flex;transform:rotateX(52deg) rotateZ(-28deg);transform-style:preserve-3d}
.gs span{font-size:62px;line-height:1;display:block;animation:rotz 6s linear infinite;filter:drop-shadow(0 12px 6px rgba(0,0,0,.5))}
.gs span:last-child{margin-left:-14px;margin-top:34px;font-size:46px;animation-direction:reverse}
@keyframes rotz{to{transform:rotate(360deg)}}
/* 3 chat bubbles */
.cb{display:flex;flex-direction:column;gap:8px;transform:rotateX(14deg) rotateY(-20deg);transform-style:preserve-3d}
.cb u{text-decoration:none;font-size:.8rem;padding:8px 14px;border-radius:16px 16px 16px 4px;background:rgba(123,61,255,.5);border:1px solid rgba(255,255,255,.2);animation:bub 3.6s ease-in-out infinite}
.cb u:nth-child(2){align-self:flex-end;border-radius:16px 16px 4px 16px;background:rgba(200,255,46,.85);color:#0a0a12;animation-delay:.6s}
.cb u:nth-child(3){animation-delay:1.2s}
@keyframes bub{0%,100%{transform:translateZ(0) scale(.92);opacity:.55}50%{transform:translateZ(46px) scale(1.04);opacity:1}}
/* 4 cube */
.cube{position:relative;width:70px;height:70px;transform-style:preserve-3d;animation:cubeRot 9s linear infinite}
.cube i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:1.4rem;color:var(--volt);border:2px solid var(--volt);background:rgba(200,255,46,.07);box-shadow:inset 0 0 20px rgba(200,255,46,.2)}
.cube i:nth-child(1){transform:translateZ(35px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(35px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(35px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(35px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(35px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(35px)}
@keyframes cubeRot{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
/* 5 banners */
.bn{position:relative;width:120px;height:70px;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-28deg)}
.bn i{position:absolute;inset:0;border-radius:10px;border:1px solid rgba(255,255,255,.3);animation:bnf 4s ease-in-out infinite}
.bn i:nth-child(1){background:linear-gradient(135deg,#7b3dff,#3d1d99);transform:translateZ(0)}
.bn i:nth-child(2){background:linear-gradient(135deg,#ff4fd8,#7b3dff);transform:translateZ(26px);animation-delay:.3s}
.bn i:nth-child(3){background:linear-gradient(135deg,var(--volt),#6aa900);transform:translateZ(52px);animation-delay:.6s}
@keyframes bnf{50%{translate:14px -12px}}
/* 6 timeline */
.tl{position:relative;display:grid;gap:7px;width:150px;transform:rotateX(38deg) rotateZ(-10deg)}
.tl div{display:flex;gap:6px;height:16px}
.tl s{display:block;height:100%;border-radius:5px;background:var(--violet);animation:clip 3s ease-in-out infinite;transform-origin:left}
.tl div:nth-child(1) s:first-child{width:46%;background:var(--volt)}.tl div:nth-child(1) s:last-child{width:30%}
.tl div:nth-child(2) s:first-child{width:22%;background:#ff4fd8}.tl div:nth-child(2) s:last-child{width:58%;background:var(--volt)}
.tl div:nth-child(3) s:first-child{width:64%}.tl div:nth-child(3) s:last-child{width:20%;background:#ff4fd8}
.tl s:last-child{animation-delay:.5s}
.tl em{position:absolute;top:-8px;bottom:-8px;left:0;width:2px;background:#fff;box-shadow:0 0 12px #fff;animation:ph 3.2s linear infinite}
@keyframes clip{50%{transform:scaleX(.82)}}@keyframes ph{to{left:100%}}
/* 7 browser */
.win{position:relative;width:132px;height:94px;border-radius:10px;border:2px solid var(--volt);background:rgba(10,9,22,.92);transform-style:preserve-3d;animation:swing 5s ease-in-out infinite}
.win::before{content:"";position:absolute;left:8px;top:7px;width:6px;height:6px;border-radius:50%;background:#ff5f56;box-shadow:10px 0 #ffbd2e,20px 0 #27c93f}
.win s{position:absolute;display:block}
.win s:nth-child(1){left:14px;top:30px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--volt),var(--violet));transform:translateZ(34px)}
.win s:nth-child(2){right:12px;top:32px;width:46px;height:10px;border-radius:5px;background:#a98bff;transform:translateZ(18px)}
.win s:nth-child(3){right:12px;top:52px;width:34px;height:10px;border-radius:5px;background:var(--volt);transform:translateZ(52px)}
@keyframes swing{0%,100%{transform:rotateY(-32deg) rotateX(8deg)}50%{transform:rotateY(32deg) rotateX(-6deg)}}
/* 8 phone */
.mini{position:relative;width:58px;height:106px;border-radius:15px;border:2px solid var(--volt);background:linear-gradient(160deg,#2a2550,#0c0a1a);animation:phs 6s ease-in-out infinite;box-shadow:0 0 30px rgba(123,61,255,.5)}
.mini::before{content:"";position:absolute;top:5px;left:50%;width:20px;height:4px;margin-left:-10px;border-radius:3px;background:#05040c}
.mini s{position:absolute;left:8px;right:8px;top:24px;bottom:12px;border-radius:8px;background:radial-gradient(circle at 50% 40%,rgba(200,255,46,.5),transparent 70%),#10101f;overflow:hidden;display:block}
.mini s::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--volt);box-shadow:0 0 10px var(--volt);animation:scan 2s ease-in-out infinite}
@keyframes phs{0%,100%{transform:rotateY(-38deg) rotateZ(6deg)}50%{transform:rotateY(38deg) rotateZ(-6deg)}}
/* 9 cv pages */
.pgs{position:relative;width:76px;height:100px;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-12deg)}
.pgs i{position:absolute;inset:0;border-radius:6px;transform-origin:left center;background:repeating-linear-gradient(180deg,transparent 0 12px,rgba(10,10,18,.22) 12px 14px),linear-gradient(#f4f3ff,#d9d4ff);border:1px solid #fff;animation:flip 4.5s ease-in-out infinite;backface-visibility:hidden}
.pgs i:nth-child(1){z-index:3}.pgs i:nth-child(2){z-index:2;animation-delay:.5s;background:repeating-linear-gradient(180deg,transparent 0 12px,rgba(10,10,18,.22) 12px 14px),linear-gradient(#eaffb5,#c8ff2e)}.pgs i:nth-child(3){z-index:1;animation-delay:1s;background:repeating-linear-gradient(180deg,transparent 0 12px,rgba(10,10,18,.22) 12px 14px),linear-gradient(#d4c2ff,#9d74ff)}
@keyframes flip{0%,15%{transform:rotateY(0)}55%,100%{transform:rotateY(-155deg)}}
/* 10 terminal */
.term{position:relative;width:138px;height:92px;padding:26px 12px 8px;border-radius:10px;background:#07060f;border:2px solid var(--volt);transform:rotateX(20deg) rotateY(-24deg);box-shadow:-14px 16px 30px rgba(0,0,0,.5);display:grid;gap:7px;align-content:start}
.term s{position:absolute;left:9px;top:8px;width:6px;height:6px;border-radius:50%;background:#ff5f56;box-shadow:10px 0 #ffbd2e,20px 0 #27c93f}
.term p{height:6px;border-radius:3px;background:var(--volt);width:0;animation:typ 3.6s steps(14) infinite}
.term p:nth-of-type(2){background:#a98bff;animation-delay:.9s}.term p:nth-of-type(3){animation-delay:1.8s}
.term b{position:absolute;right:12px;bottom:6px;color:var(--volt);animation:blink .9s steps(1) infinite}
@keyframes typ{0%{width:0}60%,100%{width:var(--w)}}@keyframes blink{50%{opacity:0}}

/* misc */
.about{grid-template-columns:1.1fr .9fr}
.head .lead{margin:14px 0 0}
@media(max-width:860px){
  #bg3d{opacity:.55}
  .enter{bottom:16px}
  .site::before{background-size:44px 44px}
  .blob{width:380px;height:380px}
}
@media(prefers-reduced-motion:reduce){.svc-slot{opacity:1!important;transform:none!important;filter:none!important}}
.svc .hint{position:absolute;left:22px;bottom:18px;margin:0}
.a-bn .bn{transform:rotateX(18deg) rotateY(-28deg) translateY(10px) scale(.88)}
.svc .art{margin-top:6px}
.pgs i{backface-visibility:visible;animation:flip2 5s ease-in-out infinite}
@keyframes flip2{0%,10%{transform:rotateY(0)}40%,60%{transform:rotateY(-150deg)}90%,100%{transform:rotateY(0)}}

/* ================= v4 : VIP portfolio (3D coverflow) ================= */
[hidden]{display:none!important}
.vip{display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;padding:7px 16px;margin-bottom:18px;border-radius:999px;font:700 .72rem var(--font-s);letter-spacing:.22em;color:#171205;background:linear-gradient(100deg,#ffe27a,#c8ff2e 70%);box-shadow:0 0 34px rgba(255,226,122,.35)}
.vip i{font-style:normal;font-size:.95rem}
.vip::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 3.6s ease-in-out infinite}
.pf{position:relative;padding:30px 20px 24px;border-radius:34px;border:1px solid rgba(255,226,122,.28);background:radial-gradient(ellipse at 50% 0%,rgba(255,226,122,.08),transparent 55%),linear-gradient(180deg,rgba(20,16,46,.8),rgba(9,8,20,.85));box-shadow:0 40px 120px rgba(123,61,255,.25),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
.pf-tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 12px;scrollbar-width:none;justify-content:center;flex-wrap:wrap}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tab{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--muted);font:600 .88rem var(--font-s);cursor:pointer;white-space:nowrap;transition:.3s}
.pf-tab:hover{color:var(--text);border-color:var(--volt);transform:translateY(-2px)}
.pf-tab.on{background:var(--volt);color:#0a0a12;border-color:var(--volt);box-shadow:0 0 28px rgba(200,255,46,.3)}
.pf-ti{font-size:1.05rem}
.pf-tag{text-align:center;color:var(--muted);font-size:.92rem;margin:4px 0 0}
.pf-stage{position:relative;height:500px;margin:10px auto 0;perspective:1400px;transform-style:preserve-3d;outline:none;touch-action:pan-y}
.pf-stage.swap .pf-card{animation:cardIn .8s cubic-bezier(.2,.9,.25,1.05) backwards}
.pf-stage.swap .pf-card:nth-child(2){animation-delay:.08s}.pf-stage.swap .pf-card:nth-child(3){animation-delay:.16s}.pf-stage.swap .pf-card:nth-child(4){animation-delay:.24s}.pf-stage.swap .pf-card:nth-child(5){animation-delay:.32s}
@keyframes cardIn{from{opacity:0;margin-top:80px;filter:blur(8px)}}
.pf-card{position:absolute;left:50%;top:50%;width:300px;height:430px;cursor:pointer;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.9,.25,1),opacity .5s;border-radius:26px}
.pf-in{position:relative;height:100%;padding:16px;border-radius:26px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(150deg,#1a1536,#0c0a1a);border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.55);transform-style:preserve-3d;transition:transform .25s,border-color .3s,box-shadow .3s;overflow:hidden}
.pf-in::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(200,255,46,.16),transparent 60%)}
.pf-card.active .pf-in{border-color:rgba(200,255,46,.7);box-shadow:0 40px 90px rgba(123,61,255,.5),0 0 50px rgba(200,255,46,.15)}
.pf-card.active .pf-in::before{opacity:1}
.pf-card:not(.active) .pf-in{filter:saturate(.7) brightness(.8)}
.pf-art{position:relative;height:150px;border-radius:18px;display:grid;place-items:center;overflow:hidden;perspective:500px;flex:none}
.pf-art i{position:absolute;display:block;border:2px solid rgba(255,255,255,.55);pointer-events:none}
.pf-ic{position:relative;font-size:3.2rem;line-height:1;z-index:2;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));transform:translateZ(40px);animation:icoF 4s ease-in-out infinite}
.pf-ic svg{width:70px;height:70px}
@keyframes icoF{50%{transform:translateY(-8px) translateZ(40px)}}
/* four 3D motion styles */
.sh1 i{width:90px;height:90px;border-radius:50%;animation:s1a 6s linear infinite}.sh1 i:nth-child(2){width:120px;height:120px;border-style:dashed;animation:s1b 8s linear infinite}.sh1 i:nth-child(3){width:60px;height:60px;animation:s1c 4s linear infinite}
@keyframes s1a{from{transform:rotateX(70deg) rotateZ(0)}to{transform:rotateX(70deg) rotateZ(360deg)}}@keyframes s1b{from{transform:rotateY(70deg) rotateZ(0)}to{transform:rotateY(70deg) rotateZ(-360deg)}}@keyframes s1c{to{transform:rotateX(360deg) rotateY(180deg)}}
.sh2 i{width:70px;height:70px;border-radius:12px;animation:s2 7s linear infinite}.sh2 i:nth-child(2){width:100px;height:100px;animation-duration:10s;animation-direction:reverse}.sh2 i:nth-child(3){width:46px;height:46px;animation-duration:5s}
@keyframes s2{from{transform:rotateX(-20deg) rotateY(0) rotateZ(0)}to{transform:rotateX(-20deg) rotateY(360deg) rotateZ(90deg)}}
.sh3 i{width:80px;height:80px;border-radius:14px;animation:s3 5s ease-in-out infinite}.sh3 i:nth-child(2){animation-delay:-1.6s;width:104px;height:104px}.sh3 i:nth-child(3){animation-delay:-3.2s;width:56px;height:56px}
@keyframes s3{0%,100%{transform:rotate(45deg) scale(.8) translateZ(0)}50%{transform:rotate(225deg) scale(1.15) translateZ(30px)}}
.sh4 i{width:130px;height:34px;border-radius:50%;animation:s4 5s ease-in-out infinite}.sh4 i:nth-child(2){animation-delay:-1.6s}.sh4 i:nth-child(3){animation-delay:-3.2s}
@keyframes s4{0%,100%{transform:rotateX(65deg) rotateZ(0) translateY(-24px)}50%{transform:rotateX(65deg) rotateZ(180deg) translateY(24px)}}
.g1{background:linear-gradient(135deg,#2a1a6e,#7b3dff)}.g2{background:linear-gradient(135deg,#0f2a4a,#3d9bff99)}.g3{background:linear-gradient(135deg,#1c3a12,#c8ff2e66)}.g4{background:linear-gradient(135deg,#5a1a5e,#ff4fd8aa)}.g5{background:linear-gradient(135deg,#4a2a0f,#ffb03d99)}.g6{background:linear-gradient(135deg,#5a1a1a,#ff6a3d99)}.g7{background:linear-gradient(135deg,#0e3a3a,#3dffc4aa)}.g8{background:linear-gradient(135deg,#1a1a5a,#3d7bff99)}.g9{background:linear-gradient(135deg,#0e0c1d,#c8ff2e66,#7b3dff)}.g10{background:linear-gradient(135deg,#2e2e0f,#e8d84a88)}
.pf-st,.m-tag .pf-st{align-self:flex-start;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-weight:600;margin-top:6px}
.st-live,.st-live-demo{color:var(--volt)!important;border-color:rgba(200,255,46,.5)!important}
.st-built{color:#a98bff!important;border-color:rgba(169,139,255,.5)!important}
.st-in-development{color:#ffd166!important;border-color:rgba(255,209,102,.5)!important}
.st-personal-project{color:#6ee7ff!important;border-color:rgba(110,231,255,.5)!important}
.st-build-idea{color:var(--muted)!important}
.pf-in h3{font-family:var(--font-s);font-size:1.2rem;margin:4px 0 0;transform:translateZ(24px)}
.pf-tg{color:var(--volt);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.pf-in p{color:var(--muted);font-size:.86rem;line-height:1.5}
.pf-tech{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pf-tech span,.m-tech span{font-size:.7rem;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text)}
.pf-go{margin-top:auto;font-style:normal;font-weight:600;font-family:var(--font-s);color:var(--volt);font-size:.88rem;opacity:0;transform:translateY(6px);transition:.3s}
.pf-card.active .pf-go{opacity:1;transform:none}
.pf-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.pf-ctrl>button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--text);font-size:1.1rem;cursor:pointer;transition:.3s}
.pf-ctrl>button:hover{border-color:var(--volt);color:var(--volt);transform:scale(1.1)}
.pf-dots{display:flex;gap:8px}
.pf-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.2);cursor:pointer;transition:.3s}
.pf-dot.on{width:26px;border-radius:6px;background:var(--volt);box-shadow:0 0 12px var(--volt)}
.m-tech{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.m-tag{display:flex;align-items:center;gap:6px}
@media(max-width:860px){
  .pf{padding:22px 10px 18px;border-radius:26px}
  .pf-stage{height:480px}
  .pf-card{width:260px;height:420px}
  .pf-tabs{justify-content:flex-start;flex-wrap:nowrap}
}
@media(prefers-reduced-motion:reduce){.pf-art i,.pf-ic,.vip::after{animation:none!important}}

/* ===== reviews marquee ===== */
.rv-sum{color:var(--volt);font:600 1rem var(--font-s);letter-spacing:.04em;margin-top:10px}
.rv{display:grid;gap:18px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:8px 0}
.rv-row{overflow:hidden}
.rv-track{display:flex;gap:18px;width:max-content;animation:rvSlide var(--dur,60s) linear infinite}
.rv-row.rev .rv-track{animation-direction:reverse}
.rv-row:hover .rv-track{animation-play-state:paused}
@keyframes rvSlide{to{transform:translateX(calc(-50% - 9px))}}
.rv-card{flex:none;width:340px;padding:24px;border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--line);backdrop-filter:blur(12px);transition:transform .4s cubic-bezier(.2,.9,.25,1),border-color .3s,box-shadow .3s}
.rv-card:hover{transform:perspective(900px) rotateY(-7deg) translateY(-8px);border-color:rgba(200,255,46,.5);box-shadow:0 24px 60px rgba(123,61,255,.35)}
.rv-card blockquote{margin:12px 0 16px;font-size:.98rem;line-height:1.6;color:var(--text)}
.rv-card figcaption{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted)}
.rv-card figcaption b{color:var(--text);font-family:var(--font-s);font-size:.92rem}
.rv-static{-webkit-mask-image:none;mask-image:none}
.rv-static .rv-track{animation:none;width:auto;flex-wrap:wrap}
@media(max-width:860px){.rv-card{width:290px}}
@media(prefers-reduced-motion:reduce){.rv-track{animation:none}.rv-row{overflow-x:auto}}

/* ================= v5 : readable portfolio + brief wizard ================= */
.st-build{color:var(--volt)!important;border-color:rgba(200,255,46,.55)!important;background:rgba(200,255,46,.08)}
.nav nav a[href="#portfolio"]{color:var(--text)}
.nav nav a[href="#portfolio"]::before{content:"♛";color:#ffe27a;margin-right:6px;font-size:.8rem}
#portfolio h2{font-size:clamp(2.2rem,5vw,3.7rem)}
#portfolio .head .lead{font-size:1.15rem;color:#c3c1da;max-width:760px}
.pf-card{width:340px;height:450px}
.pf-in h3{font-size:1.4rem}
.pf-tg{font-size:.78rem}
.pf-in p{font-size:.95rem;color:#cfcde6;line-height:1.55}
.pf-tech span{font-size:.76rem;padding:4px 11px}
.pf-st{font-size:.7rem!important;padding:5px 12px!important}
.pf-card:not(.active) .pf-in{filter:saturate(.9) brightness(.92)}
.pf-stage{height:520px}
.pf-info{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;margin:14px 6px 8px;padding:30px;border-radius:24px;background:linear-gradient(135deg,rgba(123,61,255,.16),rgba(200,255,46,.05));border:1px solid rgba(200,255,46,.3)}
.pf-info.pop{animation:infoIn .55s cubic-bezier(.2,.9,.25,1)}
@keyframes infoIn{from{opacity:0;transform:translateY(16px)}}
.pf-info h3{font-family:var(--font-h);font-size:clamp(1.6rem,3vw,2.2rem);margin:10px 0 4px}
.pf-info .pf-tg{display:block;font-size:.82rem;margin-bottom:12px}
.pf-info p{font-size:1.08rem;line-height:1.65;color:#d6d4ec}
.pf-info h4{font:600 .78rem var(--font-s);letter-spacing:.18em;text-transform:uppercase;color:var(--volt);margin-bottom:12px}
.pf-info ul{display:grid;gap:10px;margin-bottom:16px}
.pf-info li{font-size:1.02rem;color:var(--text);padding-left:26px;position:relative}
.pf-info li::before{content:"✓";position:absolute;left:0;color:var(--volt);font-weight:700}
.pf-tech.big span{font-size:.82rem;padding:6px 14px}
.pf-info .btn{margin-top:16px}
.m-by{color:var(--volt);font:600 .95rem var(--font-s);margin:2px 0 14px}
.m-h{font:600 .74rem var(--font-s);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.modal-box p{font-size:1rem;color:#d0cee6}
@media(max-width:860px){
  .pf-card{width:280px;height:440px}
  .pf-info{grid-template-columns:1fr;gap:20px;padding:22px}
}

/* ----- contact brief wizard ----- */
.cw{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start;padding:50px;border-radius:34px;background:linear-gradient(135deg,rgba(123,61,255,.18),rgba(200,255,46,.05));border:1px solid var(--line);backdrop-filter:blur(18px)}
.cw-direct{margin:26px 0;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.cw-direct small{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}
.cw-mail{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.cw-mail a{font:600 1.05rem var(--font-s);color:var(--volt);word-break:break-all}
.cw-mail button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font:600 .8rem var(--font-s);cursor:pointer;transition:.3s}
.cw-mail button:hover{border-color:var(--volt);color:var(--volt)}
.cw-live{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}
.cw-live i{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 10px var(--volt);animation:pulse 1.4s infinite}
.cw-next{display:grid;gap:14px;counter-reset:n}
.cw-next li{display:flex;gap:14px;align-items:flex-start}
.cw-next b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(200,255,46,.12);border:1px solid rgba(200,255,46,.5);color:var(--volt);font-family:var(--font-h)}
.cw-next strong{display:block;font-family:var(--font-s)}.cw-next span{color:var(--muted);font-size:.9rem}
.cw-card{position:relative;padding:28px;border-radius:26px;background:linear-gradient(150deg,#17132f,#0c0a1a);border:1px solid rgba(200,255,46,.3);box-shadow:0 30px 80px rgba(0,0,0,.5);min-height:460px;display:flex;flex-direction:column}
.cw-prog{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:16px}
.cw-prog i{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--violet),var(--volt));box-shadow:0 0 12px var(--volt);transition:width .5s cubic-bezier(.2,.9,.25,1)}
.cw-lbl{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:.82rem;margin-bottom:18px}
.cw-lbl b{color:var(--volt)}.cw-lbl em{font:600 1rem var(--font-s);font-style:normal;color:var(--text)}
.cw-pane{display:none;flex:1}
.cw-pane.on{display:block;animation:paneIn .5s cubic-bezier(.2,.9,.25,1)}
@keyframes paneIn{from{opacity:0;transform:translateX(26px)}}
.cw-q{font:600 1.05rem var(--font-s);margin:0 0 14px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cw-q small{color:var(--volt);font-weight:500;font-size:.8rem}
.cw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;perspective:800px}
.cw-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font:600 .82rem var(--font-s);transition:transform .35s cubic-bezier(.2,.9,.25,1),border-color .3s,background .3s,box-shadow .3s;position:relative}
.cw-tile i{font-style:normal;font-size:1.7rem;transition:transform .4s}
.cw-tile:hover{transform:translateY(-5px) rotateX(10deg);border-color:rgba(200,255,46,.6)}
.cw-tile:hover i{transform:scale(1.2) rotate(-6deg)}
.cw-tile.on{background:rgba(200,255,46,.14);border-color:var(--volt);box-shadow:0 0 28px rgba(200,255,46,.22)}
.cw-tile.on::after{content:"✓";position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--volt);color:#0a0a12;font-size:.7rem;display:grid;place-items:center;font-weight:700}
#cwBudget{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;border:0;padding:0;outline:none;background:linear-gradient(90deg,var(--volt) var(--p,20%),rgba(255,255,255,.12) var(--p,20%));margin:6px 0 8px;box-shadow:none}
#cwBudget::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--volt);border:4px solid #0c0a1a;box-shadow:0 0 0 2px var(--volt),0 0 20px var(--volt);cursor:grab}
#cwBudget::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--volt);border:4px solid #0c0a1a;box-shadow:0 0 0 2px var(--volt);cursor:grab}
.cw-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;margin-bottom:24px}
.cw-chips{display:flex;flex-wrap:wrap;gap:10px}
.cw-chips button{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:600 .85rem var(--font-s);cursor:pointer;transition:.3s}
.cw-chips button:hover{border-color:var(--volt)}
.cw-chips button.on{background:var(--volt);color:#0a0a12;border-color:var(--volt)}
.cw textarea{min-height:150px;resize:vertical}
.cw-fields{display:grid;gap:12px;margin-bottom:16px}
.cw-sum{display:grid;gap:8px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px dashed rgba(200,255,46,.4)}
.cw-sum div{display:flex;gap:12px;font-size:.88rem}.cw-sum small{flex:none;width:72px;color:var(--volt);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;padding-top:3px}.cw-sum span{color:var(--text);word-break:break-word}
.cw-err{color:#ff8a8a;font-size:.88rem;min-height:1.3em;margin:10px 0 0}
.cw-nav{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.cw-nav .btn{padding:12px 24px}
.cw-nav #cwNext{margin-left:auto}
.cw-done{text-align:center;padding:30px 10px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;animation:paneIn .6s}
.cw-done p{color:var(--muted);max-width:360px}
.cw-done-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.cw-check{width:84px;height:84px}
.cw-check svg{width:100%;height:100%;fill:none;stroke:var(--volt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cw-check circle{stroke-dasharray:152;stroke-dashoffset:152;animation:draw .8s .1s forwards;filter:drop-shadow(0 0 10px var(--volt))}
.cw-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(max-width:860px){
  .cw{grid-template-columns:1fr;padding:22px;gap:30px}
  .cw-tiles{grid-template-columns:repeat(2,1fr)}
  .cw-card{padding:20px}
}
.pf-card{height:486px}
.pf-stage{height:545px}
@media(max-width:860px){.pf-card{height:470px}.pf-stage{height:520px}}

/* ================= footer + legal pages ================= */
.ft{position:relative;z-index:2;background:#06050d;border-top:1px solid var(--line);padding:76px 5vw 30px;overflow:hidden}
.ft::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--volt),var(--violet),transparent);background-size:200% 100%;animation:ftline 6s linear infinite}
@keyframes ftline{to{background-position:-200% 0}}
.ft-in{max-width:1300px;margin:0 auto}
.ft-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px}
.ft-brand p{color:var(--muted);margin:18px 0;max-width:340px;font-size:.95rem}
.ft-mail{color:var(--volt);font:600 .95rem var(--font-s);word-break:break-all}
.ft-mail:hover{text-decoration:underline}
.ft-col{display:flex;flex-direction:column;gap:6px}
.ft-col h4{font:700 .8rem var(--font-s);letter-spacing:.22em;text-transform:uppercase;color:#7d7b96;margin-bottom:14px}
.ft-col a{position:relative;width:max-content;max-width:100%;padding:5px 0;color:#c3c1da;font-size:1.02rem;transition:color .3s,transform .3s}
.ft-col a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--volt);transition:width .3s}
.ft-col a:hover{color:var(--volt);transform:translateX(6px)}
.ft-col a:hover::after{width:100%}
.ft-bottom{margin-top:56px;padding-top:30px;border-top:1px solid var(--line);display:grid;gap:18px}
.ft-mark{width:110px;height:110px;color:rgba(255,255,255,.14);transition:color .5s,transform .6s cubic-bezier(.2,.9,.25,1)}
.ft-bottom:hover .ft-mark{color:rgba(200,255,46,.5);transform:rotate(-6deg) scale(1.05)}
.ft-legal{display:flex;gap:26px;flex-wrap:wrap}
.ft-legal a{color:#c3c1da;font-size:1rem}.ft-legal a:hover{color:var(--volt)}
.ft-bottom p{color:#7d7b96;font-size:.92rem}
@media(max-width:980px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media(max-width:560px){.ft{padding-top:56px}.ft-grid{grid-template-columns:1fr;gap:34px}.ft-col a{font-size:1.15rem}.ft-mark{width:96px;height:96px}}

.legal{max-width:820px;margin:0 auto;padding:130px 6vw 80px;position:relative;z-index:2}
.legal h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:8px}
.legal .upd{color:var(--muted);margin-bottom:34px;font-size:.9rem}
.legal h2{font-size:1.3rem;margin:34px 0 10px;font-family:var(--font-s)}
.legal p,.legal li{color:#cfcde6;line-height:1.75;margin-bottom:10px}
.legal ul{list-style:disc;padding-left:22px}
.legal a{color:var(--volt)}
.legal-top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;background:rgba(7,6,15,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}