/* velauni.com v4: violet night. One dark look on purpose (the brand lives in the dark, like the
   VELAUNI Studio panel): every colour is a token below, the page paints its own background. */
:root{
  --bg:#07050d;--bg2:#0c0916;--card:rgba(18,13,31,.72);--card2:rgba(26,19,44,.8);
  --line:rgba(170,140,255,.13);--line2:rgba(170,140,255,.3);
  --text:#f3f0ff;--mute:#a7a1bd;--dim:#726c8a;
  --accent:#9d6bff;--lilac:#c9b3ff;--deep:#6a35ff;--pink:#d27cff;--mint:#8cf0c4;
  --grad:linear-gradient(100deg,#6a35ff 0%,#9a5cff 55%,#d27cff 100%);
  --glow:0 0 0 1px rgba(157,107,255,.35),0 10px 40px -12px rgba(123,60,255,.65);
  --r:20px;--r2:14px;--max:1160px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:transparent;font:400 1rem/1.62 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;min-height:100vh;
  font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
html[data-lang="tr"] [lang="en"],html[data-lang="en"] [lang="tr"]{display:none!important}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:rgba(157,107,255,.45)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:84px}

/* the soft light (as in the plugin): violet glow rising from the bottom, drifting slowly; fine grain on top */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.sky i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.sky i:nth-child(1){width:70vw;height:46vw;left:15vw;bottom:-30vw;background:#5b22ff;animation:drift1 22s ease-in-out infinite}
.sky i:nth-child(2){width:40vw;height:28vw;left:52vw;bottom:-18vw;background:#a64dff;opacity:.35;animation:drift2 30s ease-in-out infinite}
.sky i:nth-child(3){width:30vw;height:22vw;left:-6vw;top:-14vw;background:#3b1aa8;opacity:.28;animation:drift2 26s ease-in-out -8s infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-8vw,-2vw)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(6vw,-3vw)}}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,4vw,env(safe-area-inset-left,0px));padding-right:max(16px,4vw,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.3rem)}
h3{font-size:1.1rem;letter-spacing:-.015em}
h1 em,h2 em,h3 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
p{text-wrap:pretty}
.lead{color:var(--mute);font-size:1.08rem;max-width:52ch}
.mut{color:var(--mute)}.dim{color:var(--dim)}.small{font-size:.875rem}
.label{display:inline-flex;align-items:center;gap:.55em;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lilac)}
.label:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(7,5,13,.7);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:10px;height:66px}
.logo{font-weight:700;font-size:1.22rem;letter-spacing:-.04em;display:inline-flex;align-items:baseline}
.logo b{color:var(--accent);text-shadow:0 0 14px rgba(157,107,255,.8)}
.nav{display:flex;gap:2px;margin-left:22px}
.nav a{padding:.42rem .8rem;border-radius:99px;color:var(--mute);font-size:.92rem;font-weight:500;transition:color .2s,background .2s}
.nav a:hover{color:var(--text);background:rgba(157,107,255,.1)}
.nav a[aria-current="page"]{color:var(--text);background:rgba(157,107,255,.16);box-shadow:inset 0 0 0 1px var(--line2)}
.sp{flex:1}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;padding:2px}
.lang button{background:none;border:0;color:var(--dim);font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.32rem .6rem;border-radius:99px;cursor:pointer}
.lang button[aria-pressed="true"]{background:rgba(157,107,255,.22);color:var(--text)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:12px;width:40px;height:40px;place-items:center;cursor:pointer}
.menu{display:none}
.menu.open{display:grid;border-top:1px solid var(--line);padding:6px max(16px,4vw) 18px}
.menu a{padding:.85rem 0;border-bottom:1px solid var(--line);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between}
.menu a:after{content:"→";color:var(--dim)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:.94rem;padding:.82rem 1.3rem;border-radius:99px;border:0;cursor:pointer;
  color:#fff;background:var(--grad);box-shadow:var(--glow);transition:transform .2s var(--ease),box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(210,124,255,.5),0 14px 46px -12px rgba(157,107,255,.85)}
.btn.ghost{background:rgba(157,107,255,.06);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{background:rgba(157,107,255,.12)}
.btn.sm{padding:.5rem .95rem;font-size:.84rem}
.btn.wide{width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.arrow{display:inline-block;transition:transform .2s var(--ease)}
a:hover .arrow{transform:translateX(3px)}
.pill{display:inline-flex;align-items:center;gap:.6em;border-radius:99px;padding:.34rem .5rem .34rem .8rem;font-size:.82rem;color:var(--lilac);
  background:rgba(157,107,255,.08);box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s}
.pill:hover{background:rgba(157,107,255,.15)}
.pill .tag{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--grad);border-radius:99px;padding:.1rem .45rem}
.pill .arrow{color:var(--mute)}

/* layout */
section{padding-top:72px;padding-bottom:72px}
section.tight{padding-top:24px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.shead h2{margin-top:12px}
.shead p{color:var(--mute);max-width:46ch;margin-top:10px}
.more{color:var(--lilac);font-size:.92rem;font-weight:500;white-space:nowrap}
.phead{padding-top:72px;padding-bottom:36px}
.phead h1{margin:14px 0 14px}
.crumb{display:inline-flex;gap:.4em;color:var(--mute);font-size:.9rem;margin-bottom:6px}
.crumb:hover{color:var(--text)}
.grid2,.grid3,.grid4{display:grid;gap:16px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start;min-width:0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card p{color:var(--mute);font-size:.95rem}
.card .meta{color:var(--dim);font-size:.84rem;margin-top:6px}
.num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:700;font-size:.9rem;color:#fff;background:var(--grad);box-shadow:var(--glow);margin-bottom:8px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center;padding-top:76px;padding-bottom:64px}
.hero h1{margin:20px 0 18px}
.hero .lead{margin-bottom:28px}
.hero .note{color:var(--dim);font-size:.84rem;margin-top:16px}

/* the panel drawing (an original illustration of the VELAUNI Studio panel) */
.mock{position:relative;perspective:1600px;justify-self:center;width:100%;max-width:520px}
.mock:before{content:"";position:absolute;inset:8% 4% -6%;background:radial-gradient(60% 55% at 50% 60%,rgba(123,60,255,.55),transparent 70%);filter:blur(30px);z-index:-1}
.panel{border-radius:24px;padding:16px;background:linear-gradient(180deg,rgba(24,17,42,.92),rgba(12,9,22,.94));box-shadow:0 0 0 1px rgba(170,140,255,.22),0 30px 80px -30px rgba(80,30,200,.8);
  transform:rotateY(-13deg) rotateX(7deg);transform-style:preserve-3d;animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotateY(-13deg) rotateX(7deg) translateY(0)}50%{transform:rotateY(-10deg) rotateX(5deg) translateY(-10px)}}
.p-head{display:flex;align-items:center;gap:8px;font-size:.86rem;padding:4px 4px 12px}
.p-head .mark{width:14px;height:14px;border-radius:5px;background:var(--grad);box-shadow:0 0 12px rgba(157,107,255,.8)}
.p-head b{font-weight:700;letter-spacing:-.03em}.p-head .mut{margin-left:-2px}
.p-head .on{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--mint);border:1px solid rgba(140,240,196,.35);border-radius:99px;padding:.15rem .5rem}
.p-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:.76rem;text-align:center;color:var(--mute)}
.p-tabs span{padding:.36rem;border-radius:9px}
.p-tabs .on{background:rgba(157,107,255,.25);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.p-view{position:relative;margin-top:12px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#05030a;box-shadow:inset 0 0 0 1px rgba(170,140,255,.32)}
.p-view:after{content:"";position:absolute;left:10%;right:10%;bottom:-38%;height:70%;border-radius:50%;background:#6a2cff;filter:blur(30px);opacity:.75;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.62;transform:translateX(-4%)}50%{opacity:.85;transform:translateX(5%)}}
.p-line{position:absolute;inset:0;z-index:1;display:flex;flex-wrap:wrap;gap:0 .32em;align-content:center;justify-content:center;padding:0 8%;font-weight:600;font-size:clamp(.9rem,2.1vw,1.25rem);letter-spacing:-.02em}
.p-line span{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(8px);animation:word 5s var(--ease) infinite}
.p-line span.acc{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.p-line span:nth-child(1){animation-delay:.2s}.p-line span:nth-child(2){animation-delay:.38s}.p-line span:nth-child(3){animation-delay:.56s}.p-line span:nth-child(4){animation-delay:.74s}.p-line span:nth-child(5){animation-delay:.92s}
@keyframes word{0%{opacity:0;filter:blur(8px);transform:translateY(8px)}12%,72%{opacity:1;filter:blur(0);transform:none}84%,100%{opacity:0;filter:blur(8px);transform:translateY(-8px)}}
.p-scrub{display:flex;align-items:center;gap:10px;margin:12px 2px 0;font-size:.66rem;color:var(--dim)}
.p-scrub .play{width:22px;height:22px;border-radius:50%;background:rgba(106,53,255,.5);box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center}
.p-scrub .play:after{content:"";border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.p-scrub .bar{flex:1;height:3px;border-radius:2px;background:rgba(170,140,255,.18);position:relative;overflow:hidden}
.p-scrub .bar:after{content:"";position:absolute;inset:0;background:var(--grad);transform-origin:left;animation:scrub 5s linear infinite}
@keyframes scrub{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.p-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.p-tiles span{display:grid;justify-items:center;gap:4px;padding:9px 2px 8px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--line);font-size:.58rem;color:var(--mute);white-space:nowrap}
.p-tiles span svg{width:15px;height:15px;color:var(--mute)}
.p-tiles span.on{border-color:rgba(201,179,255,.7);background:rgba(106,53,255,.2);color:var(--text);box-shadow:0 0 18px -4px rgba(157,107,255,.8)}
.p-tiles span.on svg{color:var(--lilac)}
.p-gen{margin-top:12px;border-radius:12px;padding:.7rem;text-align:center;font-size:.78rem;font-weight:600;color:#fff;background:var(--grad);box-shadow:0 0 30px -8px rgba(157,107,255,.9)}

/* the hub (home): the velauni mark with its four parts floating around it (an original illustration) */
.hub{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;justify-self:center}
.hub:before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(123,60,255,.55),transparent 66%);filter:blur(24px)}
.hub .rings{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.hub .ring{position:absolute;border-radius:50%;inset:12%;border:1px solid rgba(170,140,255,.18)}
.hub .ring.r2{inset:26%;border-color:rgba(170,140,255,.12)}
.hub .ring.r3{inset:0;border-style:dashed;border-color:rgba(170,140,255,.1);animation:spin 80s linear infinite}
.hub .ring.r1:after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--lilac);box-shadow:0 0 14px var(--accent),0 0 30px var(--accent)}
.hub .ring.r1{animation:spin 26s linear infinite}
.hub .ring.r2:after{content:"";position:absolute;bottom:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}
.hub .ring.r2{animation:spin 18s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hub .mark{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:28%;background:var(--grad);
  display:grid;place-items:center;font-weight:700;font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:-.06em;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 20px 60px -10px rgba(123,60,255,.9),0 0 120px -20px rgba(210,124,255,.8)}
.hub .mark span{transform:translateY(-6%)}
.hub .chip{position:absolute;display:inline-flex;align-items:center;gap:.5em;padding:.55rem .85rem;border-radius:99px;font-size:.86rem;font-weight:600;
  background:rgba(18,13,31,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line2),0 14px 40px -18px rgba(106,53,255,.9);
  animation:bob 7s ease-in-out infinite}
.hub .chip svg{width:16px;height:16px;color:var(--lilac)}
.hub .c1{left:4%;top:18%}.hub .c2{right:0;top:30%;animation-delay:-2s}.hub .c3{left:10%;bottom:16%;animation-delay:-4s}.hub .c4{right:8%;bottom:10%;animation-delay:-5.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:640px){.hub{max-width:340px}.hub .chip{font-size:.78rem;padding:.45rem .7rem}}

/* doors (home) */
.door{position:relative;display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;min-width:0;transition:border-color .25s,transform .25s var(--ease)}
.door:hover{border-color:var(--line2);transform:translateY(-3px)}
.door:after{content:"";position:absolute;right:-30%;bottom:-60%;width:80%;height:90%;border-radius:50%;background:#6a2cff;filter:blur(50px);opacity:.0;transition:opacity .35s}
.door:hover:after{opacity:.35}
.door .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--lilac);background:rgba(157,107,255,.12);box-shadow:inset 0 0 0 1px var(--line2);margin-bottom:6px}
.door .ic svg{width:22px;height:22px}
.door p{color:var(--mute);font-size:.93rem}
.door .go{margin-top:6px;color:var(--lilac);font-size:.88rem;font-weight:500}

/* work list (home) and work grid */
.wlist{border-top:1px solid var(--line)}
.wlist a{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--line);transition:padding .25s var(--ease),background .25s}
.wlist a:hover{padding-left:14px;background:linear-gradient(90deg,rgba(157,107,255,.08),transparent)}
.wlist h3{font-size:1.15rem}
.wlist .mut{font-size:.9rem}
.wlist .yr{color:var(--dim);font-size:.85rem;font-variant-numeric:tabular-nums}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wcard{display:block;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:border-color .25s,transform .25s var(--ease);min-width:0}
.wcard:hover{border-color:var(--line2);transform:translateY(-3px)}
.wcard .media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.wcard video,.wcard img{width:100%;height:100%;object-fit:cover}
.wcard .media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,5,13,.55));pointer-events:none}
.wcard .wb{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 20px 18px}
.wcard .wb h3{font-size:1.08rem}
.wcard .wb span{color:var(--dim);font-size:.84rem;white-space:nowrap}
.wcard .tools{color:var(--mute);font-size:.86rem;padding:0 20px 18px;margin-top:-10px}

/* product cards */
.pcard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:border-color .25s,transform .25s var(--ease);min-width:0}
.pcard:hover{border-color:var(--line2);transform:translateY(-3px)}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .shot img{transform:scale(1.03)}
.badge{position:absolute;top:12px;left:12px;color:#fff;background:var(--grad);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:.22rem .6rem;box-shadow:var(--glow)}
.pb{padding:18px 20px 20px;display:grid;gap:6px;flex:1}
.pb .mut{font-size:.82rem}
.pb h3{font-size:1.1rem}.pb p{color:var(--mute);font-size:.92rem}
.pr{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.pr b{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.go-c{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);color:var(--lilac)}

/* studio band (home) */
.band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:38px;border-radius:28px;overflow:hidden;
  background:radial-gradient(90% 140% at 0% 0%,rgba(106,53,255,.35),transparent 60%),radial-gradient(70% 120% at 100% 100%,rgba(210,124,255,.18),transparent 60%),var(--card2);
  box-shadow:inset 0 0 0 1px var(--line2)}
.band h2{margin:12px 0 10px}.band p{color:var(--mute);max-width:56ch}

/* cta */
.cta{position:relative;text-align:center;padding:56px 24px;border-radius:28px;overflow:hidden;display:grid;justify-items:center;gap:14px;
  background:radial-gradient(70% 120% at 50% 120%,rgba(106,53,255,.45),transparent 70%),var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.cta p{color:var(--mute);max-width:48ch}

/* product page */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.player{border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line2),0 30px 80px -40px rgba(106,53,255,.9)}
.player video{width:100%;aspect-ratio:16/9}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.gal img{border-radius:12px;aspect-ratio:16/10;object-fit:cover;width:100%;border:1px solid var(--line)}
.h2s{font-size:1.4rem;margin:40px 0 16px}
.checks{list-style:none;display:grid;gap:12px}
.checks li{position:relative;display:flex;gap:12px}
.checks li:before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px -2px rgba(157,107,255,.8)}
.checks li:after{content:"";position:absolute;left:6px;top:8px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.buy{position:sticky;top:90px;background:var(--card2);border-radius:var(--r);padding:24px;display:grid;gap:16px;box-shadow:inset 0 0 0 1px var(--line2),0 30px 70px -40px rgba(106,53,255,.8)}
.price{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.price span{display:block;font-size:.85rem;font-weight:400;letter-spacing:0;color:var(--mute);margin-top:8px}
.buy dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.9rem;border-top:1px solid var(--line);padding-top:16px}
.buy dt{color:var(--mute)}
.link{color:var(--lilac)}

/* studio page */
.film{position:relative;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line2),0 40px 120px -40px rgba(106,53,255,.95)}
.film video{width:100%;aspect-ratio:16/9;background:#000}
.presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.preset{padding:20px;border-radius:var(--r2);background:var(--card);border:1px solid var(--line);display:grid;gap:8px;align-content:start;min-width:0;transition:border-color .25s,box-shadow .25s}
.preset:hover{border-color:rgba(201,179,255,.55);box-shadow:0 0 30px -10px rgba(157,107,255,.8)}
.preset .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--lilac);background:rgba(106,53,255,.16);box-shadow:inset 0 0 0 1px var(--line2)}
.preset .ic svg{width:20px;height:20px}
.preset h3{font-size:1rem;margin-top:4px}
.preset p{color:var(--mute);font-size:.88rem}
.preset[hidden]{display:none}
@media (min-width:1101px){#presetGrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:640px){#presetGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#presetGrid .preset{padding:14px;gap:6px}#presetGrid .preset h3{font-size:.92rem}#presetGrid .preset p{font-size:.78rem;line-height:1.45}#presetGrid .preset .ic{width:34px;height:34px;border-radius:10px}}
.pfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pfilter button{display:inline-flex;align-items:center;gap:.45em;padding:.5rem .95rem;border-radius:99px;border:0;font:inherit;font-size:.88rem;font-weight:600;color:var(--mute);background:rgba(157,107,255,.06);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
.pfilter button:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.pfilter button.on{color:var(--text);background:rgba(157,107,255,.18);box-shadow:inset 0 0 0 1px var(--line2),0 0 24px -10px rgba(157,107,255,.9)}
.pfilter i{font-style:normal;font-size:.76rem;color:var(--dim)}
.pfilter button.on i{color:var(--lilac)}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-radius:var(--r);overflow:hidden;background:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
.spec div{background:var(--bg2);padding:20px}
.spec dt{color:var(--dim);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.spec dd{margin-top:6px;font-weight:500}

/* forms */
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
.perks{list-style:none;margin-top:22px;display:grid;gap:12px}
.form{background:var(--card2);border-radius:var(--r);padding:26px;display:grid;gap:16px;box-shadow:inset 0 0 0 1px var(--line2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label.f{display:grid;gap:7px;font-size:.85rem;color:var(--mute)}
input:not([type=radio]),textarea{width:100%;background:rgba(7,5,13,.8);border:1px solid var(--line2);border-radius:12px;color:var(--text);font-size:1rem;padding:.8rem .9rem}
input::placeholder,textarea::placeholder{color:var(--dim)}
textarea{resize:vertical;min-height:120px}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
fieldset{border:0;min-width:0}legend{font-size:.85rem;color:var(--mute);margin-bottom:9px}
.opts{display:flex;flex-wrap:wrap;gap:8px}.opts label{cursor:pointer;position:relative}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts .o{display:inline-block;border-radius:99px;padding:.45rem .9rem;font-size:.88rem;box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s}
.opts input:checked+.o{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.opts input:focus-visible+.o{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.fine{font-size:.78rem;color:var(--dim);text-align:center}

/* info page */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.about p+p{margin-top:14px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.facts div{padding:18px 20px;border-radius:var(--r2);background:var(--card);border:1px solid var(--line)}
.facts b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.facts span{color:var(--mute);font-size:.86rem}
.faq{display:grid;gap:10px;max-width:820px}
.faq details{border-radius:var(--r2);background:var(--card);border:1px solid var(--line);padding:0 20px;transition:border-color .2s}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--lilac);font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{color:var(--mute);padding-bottom:18px;max-width:70ch}
.channels{display:grid;gap:10px}
.channels a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:var(--r2);background:var(--card);border:1px solid var(--line);transition:border-color .2s}
.channels a:hover{border-color:var(--line2)}
.channels b{font-weight:600}
.channels span{color:var(--mute);font-size:.88rem}
.cgrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start}

/* centred pages (thanks, 404) */
.center{min-height:62vh;display:grid;place-content:center;justify-items:center;text-align:center;gap:14px;padding-top:60px;padding-bottom:60px}
.center .lead{margin:0 auto 10px}

/* footer */
footer{border-top:1px solid var(--line);margin-top:56px;background:linear-gradient(180deg,transparent,rgba(106,53,255,.06))}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding-top:44px;padding-bottom:24px}
footer p{color:var(--mute);font-size:.9rem;margin-top:10px;max-width:36ch}
.fl{display:grid;gap:8px;align-content:start;font-size:.92rem;color:var(--mute)}
.fl h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:4px}
.fl a:hover{color:var(--text)}
footer .base{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:.8rem;padding-top:0;padding-bottom:34px}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* launch window: [data-launch] shows until oct 31, [data-after] from nov 1 (istanbul time); the class is set in each page's head script */
html.after-launch [data-launch],html:not(.after-launch) [data-after]{display:none!important}
/* studio hero: the real panel running live in an iframe */
.demo{position:relative;justify-self:center;width:100%;max-width:440px}
.demo:before{content:"";position:absolute;inset:8% 4% -6%;background:radial-gradient(60% 55% at 50% 60%,rgba(123,60,255,.55),transparent 70%);filter:blur(30px);z-index:-1}
.demo-frame{border-radius:22px;overflow:hidden;background:#08060f;box-shadow:0 0 0 1px rgba(170,140,255,.22),0 30px 80px -30px rgba(80,30,200,.8)}
.demo iframe{display:block;width:100%;height:740px;border:0;background:#08060f;color-scheme:dark}
.demo-cap{margin-top:12px;font-size:.84rem;color:var(--dim);text-align:center}
.demo-note{margin:6px auto 0;max-width:42ch;font-size:.76rem;line-height:1.45;color:var(--mute);text-align:center}
/* launch gift */
.pill.gift{border-radius:16px;line-height:1.35;margin-top:22px}
.buy .pill.gift{margin-top:0}
.gift-cta h2{max-width:22ch}
.nw{white-space:nowrap}
@media (max-width:640px){.demo iframe{height:min(700px,86vh)}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .p-line span{opacity:1;filter:none;transform:none}
}
@media (max-width:980px){
  .nav{display:none}.menu-btn{display:grid}
  .hero,.pgrid,.join,.about,.cgrid{grid-template-columns:minmax(0,1fr)}
  .hero{gap:44px;padding-top:44px;padding-bottom:40px}
  .grid3,.grid4,.presets,.feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy{position:static}
  .band{grid-template-columns:minmax(0,1fr);padding:28px}
  .panel{transform:rotateY(-8deg) rotateX(5deg);animation:none}
}
@media (max-width:640px){
  section{padding-top:52px;padding-bottom:52px}
  .phead{padding-top:44px}
  .grid2,.grid3,.grid4,.two,.wgrid,.presets,.feats,.facts{grid-template-columns:minmax(0,1fr)}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shead{flex-direction:column;align-items:flex-start}
  .wlist a{grid-template-columns:minmax(0,1fr) auto}
  .wlist a .mut{grid-column:1/2;grid-row:2}
  .wlist a .yr{grid-row:1/3;grid-column:2;align-self:center}
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .wrap>div:first-child{grid-column:1/-1}
  footer .base{flex-direction:column}
  .top .btn{display:none}
  .top .btn.sup{display:inline-flex;padding:.42rem .8rem}
  .top .wrap{gap:8px}
  .panel{transform:none}
  .cta{padding:40px 20px}
}
@media (max-width:380px){.lang button{padding:.3rem .45rem}.top .btn.sup{padding:.4rem .6rem;font-size:.8rem}}

/* studio launch price */
.price s{font-size:1.15rem;font-weight:500;letter-spacing:0;color:var(--mute);margin-left:6px}

/* studio pricing (1.3.0): monthly + lifetime */
.plans-wrap{--pv:#9875ff;--pi:#6478ff;--ps:#1b182b;--pe:#28213b;--pt:#e6ddff;display:grid;gap:28px}
.plans-head{text-align:center;display:grid;justify-items:center;gap:14px}
.plans-head .lead{margin:0 auto}
.lcount{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin-top:6px;padding:9px 16px;border-radius:99px;
  background:rgba(27,24,43,.7);box-shadow:inset 0 0 0 1px rgba(152,117,255,.22);font-size:.84rem;color:var(--mute)}
.lc-t{color:var(--pt);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lc-t b{font-weight:600;color:#fff}
.lc-d{color:var(--dim)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:920px;width:100%;margin:0 auto;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;border-radius:22px;
  background:linear-gradient(180deg,rgba(40,33,59,.62),rgba(27,24,43,.9));box-shadow:inset 0 0 0 1px rgba(152,117,255,.15)}
.plan.best{box-shadow:inset 0 0 0 1px rgba(152,117,255,.55),0 0 0 1px rgba(152,117,255,.12),0 28px 80px -36px rgba(152,117,255,.6)}
.ptag{position:absolute;top:-11px;left:26px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:.28rem .7rem;border-radius:99px;background:linear-gradient(100deg,var(--pv),var(--pi));box-shadow:0 6px 20px -6px rgba(152,117,255,.7)}
.plan-top h3{font-size:1.2rem;letter-spacing:-.01em}
.plan-top p{color:var(--mute);font-size:.92rem;margin-top:2px}
.pp{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.pp .amt{font-size:3rem;font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff}
.pp .per{color:var(--mute);font-size:.95rem}
.pnote{color:var(--mute);font-size:.86rem;line-height:1.5;min-height:3em}
.pfine{font-size:.78rem;color:var(--dim);text-align:center;margin-top:-6px}
.pfine.left{text-align:left;margin-top:auto;padding-top:6px}
.plist{margin-top:6px;padding-top:18px;border-top:1px solid var(--line);font-size:.92rem;gap:10px}
.plist li:before{width:18px;height:18px}
.plist li:after{left:5px;top:7px}
.pbonus{display:flex;justify-content:center}
.pbonus .pill.gift{margin-top:0}
.pfaq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:920px;width:100%;margin:0 auto}
.pfaq>div{padding:18px 20px;border-radius:16px;background:rgba(27,24,43,.55);box-shadow:inset 0 0 0 1px var(--line)}
.pfaq h4{font-size:.92rem;margin-bottom:4px}
.pfaq p{color:var(--mute);font-size:.84rem;line-height:1.5}
.pspec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:920px;width:100%;margin:0 auto;font-size:.88rem}
.pspec dt{color:var(--dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em}
.pspec dd{margin-top:2px}
@media (max-width:820px){.plans,.pfaq{grid-template-columns:minmax(0,1fr)}.pspec{grid-template-columns:repeat(2,minmax(0,1fr))}.plan{padding:28px 22px 22px}.pnote{min-height:0}}

/* live demo: tap-to-start card on phones (keeps the page smooth until the visitor wants the demo) */
.demo-frame{position:relative}
.demo-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;color:#efeaff;font:inherit;
background:radial-gradient(70% 50% at 50% 42%,rgba(123,60,255,.32),transparent 70%),#08060f}
.demo-start[hidden]{display:none}
.demo.on .demo-start{display:none}
.demo-start b{font-size:1.05rem;font-weight:600;letter-spacing:.01em}
.demo-start small{font-size:.8rem;color:var(--dim)}
.demo-play{width:64px;height:64px;border-radius:50%;background:linear-gradient(140deg,#8a5cff,#5b22ff);box-shadow:0 0 0 1px rgba(200,180,255,.35),0 10px 40px -8px rgba(123,60,255,.9);position:relative}
.demo-play:after{content:"";position:absolute;left:26px;top:21px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
@media (pointer:coarse),(max-width:760px){.top{background:rgba(7,5,13,.97);backdrop-filter:none;-webkit-backdrop-filter:none}}

.hero-cta{align-items:stretch}.hero-cta .btn{padding:.8rem 1.5rem}.hero-cta .btn.lg{padding:1.05rem 2rem;font-size:1.12rem}.hero-cta .btn.lg .bt small{font-size:.8rem;opacity:.8}.hero-cta .bt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left}.hero-cta .bt small{font-size:.74rem;font-weight:500;opacity:.72;margin-top:3px}.hero-cta .btn.ghost{box-shadow:inset 0 0 0 1px rgba(157,107,255,.4);background:rgba(157,107,255,.08)}