@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0A0814;--bg2:#0D0B1A;--card:#15131F;--card2:#1A1726;--line:#2A2738;--v:#7C5CFF;--v2:#8B6CFF;--v3:#A78BFA;--t:#EDEBF2;--t2:#8A8794;--t3:#A09CAB;--g:#4ADE80}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--t);background:var(--bg);line-height:1.55;overflow-x:hidden;
background-image:radial-gradient(900px 600px at 15% -5%,#3B2A6B88,transparent 60%),radial-gradient(800px 600px at 90% 10%,#2A1F4A99,transparent 60%),radial-gradient(1000px 700px at 50% 110%,#2A1F4A66,transparent 60%);background-attachment:scroll}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0;
background-image:radial-gradient(1px 1px at 10% 20%,#fff8,transparent),radial-gradient(1px 1px at 30% 70%,#fff6,transparent),radial-gradient(1px 1px at 55% 35%,#fff7,transparent),radial-gradient(1px 1px at 75% 80%,#fff5,transparent),radial-gradient(1px 1px at 88% 25%,#fff8,transparent),radial-gradient(1px 1px at 45% 90%,#fff5,transparent),radial-gradient(1.5px 1.5px at 65% 55%,#fff6,transparent),radial-gradient(1px 1px at 20% 50%,#fff4,transparent);background-size:600px 600px}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.top{position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);background:#0A081499;border-bottom:1px solid #2A273866}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.18em;font-size:15px}
.logo i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--v3) 30%,var(--v) 60%,#2A1F4A);box-shadow:0 0 18px #7C5CFF99}
.links{display:flex;gap:30px;font-size:14px;color:var(--t3)}.links a:hover{color:var(--t)}
.right{display:flex;gap:12px;align-items:center}
.lang{font:500 12px 'JetBrains Mono',monospace;border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--t3)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:12px 22px;font-weight:600;font-size:14px;border:1px solid var(--line);background:#15131Fcc;color:var(--t);cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--v2)}
.btn.p{background:linear-gradient(135deg,var(--v2),var(--v));border-color:#A78BFA66;box-shadow:0 0 24px #7C5CFF66,inset 0 1px 0 #fff3}
.btn.p:hover{box-shadow:0 0 36px #8B6CFFaa}
.btn.sm{padding:8px 16px;font-size:13px}
.eyebrow{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--v3);display:inline-flex;gap:8px;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
h1,h2{letter-spacing:-.04em;line-height:1.02;font-weight:700}
h1{font-size:76px;margin:22px 0}h2{font-size:52px;margin:16px 0 18px}
.grey{color:#6E6A7C;display:block}
.lead{color:var(--t3);font-size:18px;max-width:560px}
section{padding:110px 0}
.card{background:linear-gradient(180deg,#1A1726cc,#15131Fcc);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(10px)}
.hero{padding:90px 0 60px;text-align:center}.hero .lead{margin:0 auto}
.ctas{display:flex;gap:14px;justify-content:center;margin-top:34px}
.persp{perspective:1600px;margin-top:70px}
.win{transform:rotateX(18deg);transform-origin:top;border-radius:16px;padding:0;overflow:hidden;box-shadow:0 40px 120px #7C5CFF33,0 0 0 1px #2A2738}
.bar{display:flex;gap:7px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:center}.bar b{width:11px;height:11px;border-radius:50%;background:#2A2738}.bar span{margin-left:14px;font:500 12px 'JetBrains Mono';color:var(--t2)}
.winbody{display:grid;grid-template-columns:240px 1fr;min-height:380px}
.side{border-right:1px solid var(--line);padding:20px;text-align:left;font-size:13px;color:var(--t3);display:flex;flex-direction:column;gap:12px}
.side .f{border:1px solid var(--line);border-radius:10px;padding:10px;background:#0D0B1A}
.gridg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px}
.tile{aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line);position:relative;overflow:hidden}
.prog{margin:0 20px 20px;height:6px;border-radius:9px;background:#2A2738;overflow:hidden}.prog i{display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--v),var(--v3));box-shadow:0 0 12px var(--v)}
.g1{background:radial-gradient(circle at 30% 30%,#A78BFA,transparent 50%),linear-gradient(160deg,#2A1F4A,#0D0B1A)}
.g2{background:radial-gradient(circle at 70% 60%,#7C5CFF,transparent 55%),conic-gradient(from 90deg,#1A1726,#3B2A6B,#1A1726)}
.g3{background:linear-gradient(200deg,#3B2A6B,#0A0814 60%),radial-gradient(circle at 50% 80%,#4ADE8055,transparent)}
.g4{background:radial-gradient(ellipse at 50% 100%,#8B6CFF,transparent 60%),linear-gradient(#0D0B1A,#2A1F4A)}
.g5{background:conic-gradient(from 200deg at 40% 60%,#7C5CFF,#15131F,#A78BFA,#15131F,#7C5CFF)}
.g6{background:radial-gradient(circle at 20% 80%,#A78BFAaa,transparent 40%),radial-gradient(circle at 80% 20%,#7C5CFFaa,transparent 40%),#0D0B1A}
.g7{background:repeating-linear-gradient(135deg,#1A1726 0 14px,#2A1F4A 14px 28px)}
.g8{background:radial-gradient(circle,#A78BFA55 2px,transparent 3px) 0 0/18px 18px,linear-gradient(#2A1F4A,#0A0814)}
.tile.wait:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#fff1 50%,transparent 70%);animation:sh 1.6s infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.step{padding:28px}.step .n{font:500 13px 'JetBrains Mono';color:var(--v3)}.step h3{margin:40px 0 8px;font-size:19px}.step p,.feat p{color:var(--t2);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0}
.stats div{text-align:center}.stats b{font-size:44px;letter-spacing:-.04em;display:block}.stats span{color:var(--t2);font-size:13px}
.note{font:500 11px 'JetBrains Mono';color:var(--t2);letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-top:14px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}.feat{padding:28px}.feat .ic{width:40px;height:40px;border-radius:10px;background:#7C5CFF22;border:1px solid #7C5CFF55;display:grid;place-items:center;color:var(--v3);margin-bottom:22px;font-weight:700}.feat h3{font-size:18px;margin-bottom:6px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.plan{padding:32px}.plan.hot{border-color:#7C5CFF99;box-shadow:0 0 50px #7C5CFF33}
.plan h3{font-size:16px;color:var(--t3);font-weight:600}.price{font-size:46px;font-weight:700;letter-spacing:-.04em;margin:12px 0 4px}.price small{font-size:15px;color:var(--t2);font-weight:500}
.tbd{display:inline-block;font:500 10px 'JetBrains Mono';letter-spacing:.14em;color:#FBBF24;border:1px dashed #FBBF2488;border-radius:99px;padding:3px 9px;margin-left:8px;vertical-align:middle}
.plan ul{list-style:none;margin:22px 0 26px;color:var(--t3);font-size:14px;display:grid;gap:9px}.plan li:before{content:"✓ ";color:var(--g)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.pack{padding:22px 26px;display:flex;justify-content:space-between;align-items:center}
.sub{font:500 12px 'JetBrains Mono';letter-spacing:.18em;color:var(--t2);text-transform:uppercase;margin-top:50px}
.faq{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.faq .card{padding:26px}.faq h4{font-size:16px;margin-bottom:8px}.faq p{color:var(--t2);font-size:14px}
.rules{padding:40px;display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center}.rules ul{list-style:none;display:grid;gap:12px}.rules li{padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#0D0B1A;font-size:14px;color:var(--t3)}.rules li b{color:var(--t)}
footer{border-top:1px solid var(--line);padding:60px 0 0;overflow:hidden}
.fcols{display:flex;justify-content:space-between;color:var(--t2);font-size:14px}.fcols div{display:flex;gap:24px}
.word{font-size:300px;font-weight:800;letter-spacing:-.06em;line-height:.85;text-align:center;color:transparent;-webkit-text-stroke:1.5px #3B2A6B;margin-top:40px;user-select:none}
.fade{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.fade.in{opacity:1;transform:none}
/* studio */
.studio{display:grid;grid-template-columns:420px 1fr;gap:22px;padding:34px 0 60px}
.panel{padding:22px;display:grid;gap:20px;align-content:start}
.lbl{display:flex;justify-content:space-between;font:500 11px 'JetBrains Mono';letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.drop{display:block;border:1.5px dashed #3B2A6B;border-radius:14px;padding:22px;text-align:center;background:#0D0B1A99;cursor:pointer;transition:.2s;font-size:14px}
.drop:hover,.drop.over{border-color:var(--v2);background:#7C5CFF14}
.drop small{display:block;color:var(--t2);font-size:12px;margin-top:6px}
.drop .st{margin-top:10px;font-size:13px}.ok{color:var(--g)}.bad{color:#F87171}
textarea{width:100%;min-height:130px;resize:vertical;background:#0D0B1A;border:1px solid var(--line);border-radius:12px;color:var(--t);padding:14px;font:14px Inter;outline:none}textarea:focus{border-color:var(--v2)}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;background:#0D0B1A;border:1px solid var(--line);color:var(--t3);border-radius:10px;padding:9px 0;font:500 13px Inter;cursor:pointer}.seg button.on{border-color:var(--v2);color:var(--t);background:#7C5CFF22}
.chk{display:flex;gap:10px;font-size:13px;color:var(--t3);align-items:flex-start}.chk input{accent-color:var(--v);margin-top:3px}
.gen{width:100%;justify-content:center;padding:15px;font-size:15px}.gen:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.credits{display:flex;align-items:center;gap:8px;font:500 12px 'JetBrains Mono';border:1px solid #7C5CFF66;border-radius:99px;padding:6px 12px;color:var(--v3)}
.res{padding:22px}.reshead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gal .tile span{position:absolute;left:10px;bottom:10px;font:500 10px 'JetBrains Mono';color:#fffb;background:#0008;padding:3px 7px;border-radius:6px}
.mini{font-size:12px;color:var(--t2)}
.rulebox{border:1px solid #7C5CFF44;background:#7C5CFF10;border-radius:12px;padding:14px;font-size:12.5px;color:var(--t3)}.rulebox b{color:var(--t)}
