@property --a{syntax:'<color>';inherits:false;initial-value:#4646ff}
@property --b{syntax:'<color>';inherits:false;initial-value:#9d9aff}
@property --c{syntax:'<color>';inherits:false;initial-value:#0b0a24}
:root{--ink:#07060f;--panel:#110f26;--line:rgba(157,154,255,.18);--indigo:#4646ff;--lilac:#9d9aff;--mist:#ebeaff;--mute:#a6a4c8;--mint:#3df2c0;
--hd:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--bd:'DM Sans','Segoe UI',system-ui,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--ink);color:var(--mist);font:400 17px/1.6 var(--bd);overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--hd);line-height:1.05;margin:0;letter-spacing:-.02em}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:96px 0;position:relative}
h2{font-size:clamp(32px,4.6vw,52px);font-weight:800;max-width:16ch}
.sub{color:var(--mute);max-width:46ch;margin:14px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font:500 16px var(--bd);border:1px solid var(--line);transition:transform .25s,box-shadow .25s,background .25s;cursor:pointer}
.btn:focus-visible,summary:focus-visible,nav a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.btn.p{background:linear-gradient(120deg,var(--indigo),#7a5cff);border-color:transparent;color:#fff;box-shadow:0 8px 30px -8px var(--indigo)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px var(--indigo)}
.btn.g:hover{background:rgba(157,154,255,.1)}
/* aurora bg */
.aur{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aur i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 22s ease-in-out infinite alternate}
.aur i:nth-child(1){width:560px;height:560px;background:var(--indigo);top:-160px;left:-120px}
.aur i:nth-child(2){width:460px;height:460px;background:#7a2cff;top:30%;right:-140px;animation-delay:-8s;opacity:.35}
.aur i:nth-child(3){width:380px;height:380px;background:#0f8fb0;bottom:-120px;left:30%;animation-delay:-14s;opacity:.25}
@keyframes drift{to{transform:translate(90px,70px) scale(1.2)}}
/* header */
header{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
header.s{background:rgba(7,6,15,.72);backdrop-filter:blur(16px);border-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font:800 21px var(--hd)}
.brand img{height:30px;width:auto}
nav{display:flex;gap:30px;color:var(--mute);font-size:15px}
nav a{transition:color .2s}nav a:hover{color:#fff}
.bar .btn{padding:10px 20px;font-size:15px}
/* hero */
.hero{padding:150px 0}
.hg{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:stretch}
h1{font-size:clamp(38px,5vw,62px);font-weight:700;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
h1 span{background:linear-gradient(100deg,#fff 20%,var(--lilac) 60%,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.hero p.l{color:var(--mute);font-size:18px;max-width:46ch;margin:22px 0 30px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.chips{list-style:none;display:flex;gap:12px 28px;flex-wrap:wrap;margin:36px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}.chips li{display:flex;align-items:center;gap:9px;color:var(--mute);font-size:14.5px}.chips svg{width:15px;height:15px;stroke:var(--mint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.in{opacity:0;transform:translateY(26px);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.in:nth-child(2){animation-delay:.12s}.in:nth-child(3){animation-delay:.24s}.in:nth-child(4){animation-delay:.36s}
@keyframes up{to{opacity:1;transform:none}}
/* generator mock */
.gen{background:linear-gradient(160deg,rgba(24,21,54,.9),rgba(12,10,30,.9));border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:0 40px 90px -30px rgba(70,70,255,.55);display:flex;flex-direction:column;flex:1}.gw{display:flex}.hg>.gw{align-self:stretch}
@keyframes float{50%{transform:translateY(-12px)}}
.prompt{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:15px;min-height:50px}
.prompt b{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);flex:none;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.3}}
.caret{display:inline-block;width:2px;height:1em;background:var(--lilac);margin-left:2px;vertical-align:-2px;animation:pulse .9s infinite}
.pg{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(110px,1fr);gap:12px;margin:16px 0}
.po{border-radius:14px;position:relative;overflow:hidden;background:radial-gradient(at 20% 10%,var(--a),transparent 62%),radial-gradient(at 85% 95%,var(--b),transparent 58%),var(--c);transition:--a 1.1s,--b 1.1s,--c 1.1s,transform .6s}
.po::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);opacity:0}
.gen.busy .po::after{opacity:1;animation:sweep 1s ease-in-out infinite}
.gen.busy .po{transform:scale(.96)}
@keyframes sweep{to{transform:translateX(120%)}}
.po:nth-child(2){transition-delay:.12s}.po:nth-child(3){transition-delay:.24s}.po:nth-child(4){transition-delay:.36s}
.po u{position:absolute;left:8px;bottom:8px;right:8px;height:6px;border-radius:4px;background:rgba(255,255,255,.7);text-decoration:none}
.po u+u{bottom:20px;width:55%;opacity:.4}
.gb{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--mute)}
.gb em{font-style:normal;background:linear-gradient(120deg,var(--indigo),#7a5cff);color:#fff;padding:8px 18px;border-radius:999px;font-weight:500}
/* tools */
.tg{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.card{grid-column:span 2;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;position:relative;overflow:hidden;transition:transform .35s,border-color .35s}
.card:nth-child(n+4){grid-column:span 3}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--x,50%) var(--y,0%),rgba(70,70,255,.28),transparent 70%);opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(157,154,255,.5)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.ic{width:46px;height:46px;border-radius:14px;background:rgba(70,70,255,.2);display:grid;place-items:center;margin-bottom:22px}
.ic svg{width:24px;height:24px;stroke:var(--lilac);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:22px;margin-bottom:8px}.card p{color:var(--mute);margin:0 0 18px;font-size:16px}
.card a{color:var(--lilac);font-weight:500;font-size:15px}.card a:hover{color:#fff}
/* tools sheet */
#tools{margin-top:0;padding:88px 0 96px;border-radius:44px 44px 0 0;background:linear-gradient(180deg,rgba(20,17,46,.9),rgba(7,6,15,0) 92%);box-shadow:inset 0 1px 0 rgba(157,154,255,.35)}
#tools h2{margin:0 auto;text-align:center;max-width:18ch}
#tools .sub{margin:14px auto 0;text-align:center}
@media(max-width:900px){#tools{border-radius:28px 28px 0 0;padding-top:64px}}
/* steps */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:52px 0 40px;position:relative}
.sg::before{content:"";position:absolute;top:27px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--indigo),var(--mint));opacity:.5}
.st{position:relative}
.st b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);border:2px solid var(--indigo);font:800 22px var(--hd);margin-bottom:20px;box-shadow:0 0 30px -4px var(--indigo)}
.st h3{font-size:22px;margin-bottom:6px}.st p{margin:0;color:var(--mute);max-width:30ch}
/* gallery */
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);margin-top:44px}
.tr{display:flex;gap:18px;width:max-content;animation:mq 45s linear infinite}
.mq:hover .tr{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.gp{width:200px;aspect-ratio:3/4.2;border-radius:18px;flex:none;padding:18px;display:flex;align-items:flex-end;font:800 22px/1 var(--hd);color:#fff;background:radial-gradient(at 20% 10%,var(--a),transparent 62%),radial-gradient(at 85% 95%,var(--b),transparent 58%),var(--c);border:1px solid var(--line);transition:transform .4s}
.gp:hover{transform:scale(1.05) rotate(-1.5deg)}
.mid{text-align:center;margin-top:40px}
/* why */
.wg{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:48px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel)}
.wi{padding:28px 22px;border-right:1px solid var(--line);transition:background .3s}
.wi:last-child{border:0}.wi:hover{background:rgba(70,70,255,.12)}
.wi h3{font-size:18px;margin-bottom:8px}.wi p{margin:0;color:var(--mute);font-size:15px}
/* pricing */
.pr{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:48px 0 28px;max-width:820px}
.pc{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:34px}
.pc.h{background:linear-gradient(160deg,#2b27a8,#15123f);border-color:rgba(157,154,255,.5);box-shadow:0 30px 70px -30px var(--indigo)}
.pc h3{font-size:28px;margin-bottom:16px}.pc ul{list-style:none;margin:0;padding:0}
.pc li{padding:8px 0 8px 28px;position:relative;color:var(--mist)}
.pc li::before{content:"";position:absolute;left:0;top:15px;width:14px;height:8px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg) scale(.8)}
.pl{margin-left:20px;color:var(--lilac)}.pl:hover{color:#fff}
/* faq */
.fq{max-width:760px;margin-top:44px}
details{border-bottom:1px solid var(--line);padding:6px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font:700 20px var(--hd)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;color:var(--lilac);transition:transform .35s}
details[open] summary::after{transform:rotate(135deg)}
details p{margin:0 0 20px;color:var(--mute);max-width:60ch;animation:fade .5s}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}
/* final */
.fin{margin:0;padding:0 24px;overflow-x:clip}
.fb{max-width:1112px;margin:0 auto;border-radius:34px;padding:84px 24px;text-align:center;background:radial-gradient(at 20% 0%,#5a52ff,transparent 60%),radial-gradient(at 90% 100%,#7a2cff,transparent 55%),#16134a;border:1px solid var(--line);position:relative;overflow:hidden}
.fb h2{margin:0 auto;max-width:14ch}.fb p{color:#d6d4ff;margin:16px 0 30px}
.fb .btn{background:#fff;color:#1c1990;border:0;font-weight:700}.fb .btn:hover{transform:translateY(-2px) scale(1.03)}
/* footer */
footer{padding:70px 0 40px;margin-top:80px;border-top:1px solid var(--line)}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fg p{color:var(--mute);font-size:15px;max-width:34ch;margin:14px 0 0}
.fg h4{margin:0 0 14px;font:700 16px var(--hd)}
.fg a{display:block;color:var(--mute);font-size:15px;padding:4px 0;transition:color .2s}.fg a:hover{color:#fff}
.cp{margin-top:48px;color:var(--mute);font-size:14px}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}
@media(max-width:900px){
.hg{grid-template-columns:1fr}nav{display:none}.hero{padding:120px 0}
.tg{grid-template-columns:1fr 1fr}.card,.card:nth-child(n+4){grid-column:auto}
.sg{grid-template-columns:1fr}.sg::before{display:none}
.wg{grid-template-columns:1fr 1fr}.wi{border-bottom:1px solid var(--line)}
.pr{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}section{padding:70px 0}}
@media(max-width:560px){.tg,.wg{grid-template-columns:1fr}.pl{display:block;margin:14px 0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.in,.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* tools bento */
.th{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
#tools h2{margin:0;text-align:left;max-width:14ch}
#tools .sub{margin:0 0 20px;text-align:left}
.tg{grid-template-columns:1.2fr 1fr 1fr;gap:18px;margin-top:48px}
.tg .card,.tg .card:nth-child(n+4){grid-column:auto;display:flex;flex-direction:column;padding:22px;border-radius:26px;background:linear-gradient(160deg,rgba(24,21,54,.9),rgba(12,10,30,.9))}
.tg .card:first-child{grid-row:span 2}
.card h3{font-size:21px}.card p{font-size:15.5px}
.vz{flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:22px;min-height:120px}
.vz.c{justify-content:center}
.gx{display:block;border-radius:14px;background:radial-gradient(at 20% 10%,var(--a),transparent 62%),radial-gradient(at 85% 95%,var(--b),transparent 58%),var(--c)}
.wide{flex:1;min-height:110px}
.mp{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:14.5px}
.mp b{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);animation:pulse 1.4s infinite}
.mg{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(110px,1fr);gap:12px}
.mt{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mt .gx{aspect-ratio:3/4;border-radius:10px}
.ly{display:flex;align-items:flex-end;justify-content:center;gap:12px}
.ly i{height:76px;border:1.5px solid var(--line);border-radius:10px;background:rgba(157,154,255,.08);transition:border-color .3s,background .3s}
.ly i.on{border-color:var(--mint);background:rgba(61,242,192,.1)}
.card:hover .ly i{border-color:var(--lilac)}.card:hover .ly i.on{border-color:var(--mint)}
.ex{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.pbar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.pbar u{display:block;height:100%;text-decoration:none;background:linear-gradient(90deg,var(--indigo),var(--mint));transform-origin:left;animation:fillb 3.4s ease-in-out infinite}
@keyframes fillb{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@media(max-width:900px){.tg{grid-template-columns:1fr 1fr}.tg .card:first-child{grid-column:1/-1;grid-row:auto}}
@media(max-width:560px){.tg{grid-template-columns:1fr}}

/* glass buttons */
.btn,.gb em{position:relative;overflow:hidden;isolation:isolate;backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);transition:transform .3s,box-shadow .3s,background .3s,border-color .3s}
.btn::after,.gb em::after{content:"";position:absolute;top:-10%;left:-80%;width:45%;height:120%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);transform:skewX(-20deg);animation:glint 5.5s ease-in-out infinite;pointer-events:none}
.btn.g::after{animation-delay:1.4s;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent)}
.bar .btn::after{animation-delay:2.8s}
.gb em::after{animation-delay:3.6s}
@keyframes glint{0%,68%{left:-80%}100%{left:140%}}
@keyframes glintH{from{left:-80%}to{left:140%}}
.btn:hover::after,.gb em:hover::after{animation:glintH .9s ease-out}
.btn:active{transform:translateY(0) scale(.98)}
.btn.p,.gb em{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(120deg,rgba(70,70,255,.92),rgba(122,92,255,.88));border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 8px 30px -8px var(--indigo)}
.btn.p:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.25),0 16px 44px -8px var(--indigo)}
.btn.g{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 24px -10px rgba(0,0,0,.6)}
.btn.g:hover{transform:translateY(-3px);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.07));border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 36px -10px rgba(157,154,255,.5)}
.fb .btn{background:linear-gradient(180deg,#fff,#e9e8ff);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 12px 34px -10px rgba(0,0,0,.5)}
.fb .btn::after{background:linear-gradient(105deg,transparent,rgba(70,70,255,.3),transparent)}
.fb .btn:hover{box-shadow:inset 0 1px 0 #fff,0 18px 46px -10px rgba(255,255,255,.5)}

/* glass border refinement */
.btn,.btn.p,.btn.g,.fb .btn,.gb em{border:0}
.btn{padding:12px 24px;font-size:15.5px;letter-spacing:.005em}.cta{gap:12px}.fb .btn{padding:14px 30px;font-size:16px}
.btn::before,.gb em::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(255,255,255,.12) 38%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;opacity:.85;transition:opacity .3s}
.btn:hover::before{opacity:1}
.btn::after,.gb em::after{width:60%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.1) 35%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.1) 65%,transparent 100%)}
.btn.g::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.06) 35%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.06) 65%,transparent)}
.fb .btn::after{background:linear-gradient(105deg,transparent,rgba(70,70,255,.08) 35%,rgba(70,70,255,.28) 50%,rgba(70,70,255,.08) 65%,transparent)}
.btn.p,.gb em{box-shadow:inset 0 -10px 18px -10px rgba(0,0,0,.3),0 8px 30px -8px var(--indigo)}
.btn.p:hover{box-shadow:inset 0 -10px 18px -10px rgba(0,0,0,.3),0 16px 44px -8px var(--indigo)}
.btn.g{box-shadow:0 6px 24px -10px rgba(0,0,0,.6)}
.btn.g:hover{box-shadow:0 14px 36px -10px rgba(157,154,255,.5)}
.fb .btn{box-shadow:0 12px 34px -10px rgba(0,0,0,.5)}
.fb .btn:hover{box-shadow:0 18px 46px -10px rgba(255,255,255,.5)}

/* solid smooth glass edge (replaces masked ring) */
.btn::before,.gb em::before{display:none}
.btn.p,.gb em{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -10px 18px -10px rgba(0,0,0,.3),0 8px 30px -8px var(--indigo)}
.btn.p:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -10px 18px -10px rgba(0,0,0,.3),0 16px 44px -8px var(--indigo)}
.btn.g{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.22),0 6px 24px -10px rgba(0,0,0,.6)}
.btn.g:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.35),0 14px 36px -10px rgba(157,154,255,.5)}
.fb .btn{box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 12px 34px -10px rgba(0,0,0,.5)}
.fb .btn:hover{box-shadow:inset 0 0 0 1px #fff,0 18px 46px -10px rgba(255,255,255,.5)}

/* ---- global: inner pages ---- */
.ph{padding:150px 0 40px}.ph .wrap{max-width:1000px}
.crumb{font-size:14px;color:var(--mute);margin-bottom:18px}.crumb a:hover{color:#fff}
.ph h1{font-size:clamp(36px,5vw,58px)}.ph p.l{color:var(--mute);font-size:18px;max-width:52ch;margin:18px 0 28px}
.tv{height:340px;border-radius:24px;overflow:hidden;border:1px solid var(--line)}.tv .gx{display:block;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.fl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.fl div{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}.fl h3{font-size:19px}.fl p{color:var(--mute);margin:8px 0 0;font-size:15.5px}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:40px}
.hub .card{grid-column:auto;display:block}.hub .card .gx{aspect-ratio:2.4/1;width:100%;display:block;border-radius:14px;margin-bottom:18px}
.hub .card p{color:var(--mute);margin:8px 0 14px;font-size:15.5px}.hub .card span{color:var(--lilac);font-size:15px}

.ex.tw span{display:flex;justify-content:space-between;color:var(--mute)}.ex.tw b{color:#fff;font-weight:500}.ex.tw .pbar u{animation:none;transition:width .9s cubic-bezier(.2,.8,.2,1);width:40%}
.cs .csr{display:flex;justify-content:space-between;align-items:center;gap:10px}.cs em{font-style:normal;font-size:12px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mute);transition:.3s}
.cs em.on{color:#06142b;background:var(--mint);border-color:var(--mint)}.cs.ty #csl:after{content:"";display:inline-block;width:2px;height:1em;background:var(--mint);margin-left:3px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.csv{height:64px;display:flex;align-items:center;justify-content:center}.csv i{display:block;border:1px solid var(--mint);background:rgba(61,242,192,.12);border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1),height .8s cubic-bezier(.2,.8,.2,1)}
@keyframes blink{50%{opacity:0}}

.mg{transition:opacity .5s,transform .5s}.mg.busy{opacity:.35;transform:scale(.97)}.mp .caret{display:inline-block;width:2px;height:1em;background:var(--mint);margin-left:3px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.ly i{transition:background .5s,border-color .5s,box-shadow .5s}.csv{overflow:hidden}

.mt .gx{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,opacity .5s,--a 1s,--b 1s,--c 1s}
.mt .gx.pk{transform:translateY(-8px) scale(1.07);box-shadow:0 0 0 1.5px var(--mint),0 14px 28px -8px rgba(61,242,192,.45)}
.mt .gx:not(.pk){opacity:.72}

.eb{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--bd);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
.eb:before{content:"";width:22px;height:1px;background:var(--mint)}
.th{margin-bottom:0}.th>div:last-child{max-width:380px}
@media(max-width:760px){.th{flex-direction:column;align-items:flex-start}}
.th>div:last-child{max-width:none}
.th .sub{max-width:46ch;text-wrap:balance;margin-top:0}
.th .sub+.btn{margin-top:18px}
@media(min-width:1100px){.th .sub{white-space:nowrap;max-width:none}}

/* how it works */
.sx{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px;cursor:pointer;opacity:.62;transition:opacity .5s,border-color .5s,box-shadow .5s,transform .5s}
.sc.on{opacity:.62}.sc.act,.sc.act.on{opacity:1;border-color:rgba(157,154,255,.5);box-shadow:0 24px 60px -28px var(--indigo);transform:translateY(-4px)}
.sc h3{font-size:21px;margin-top:20px}.sc p{color:var(--mute);margin:8px 0 0;font-size:15.5px}
.sr{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sr b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--hd);border:2px solid var(--indigo);background:var(--ink);transition:.4s}
.sc.act .sr b{background:var(--indigo);box-shadow:0 0 0 6px rgba(70,70,255,.22)}
.ln{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}.ln u{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--indigo),var(--mint))}
.sc.act .ln u{animation:fillb 3.3s linear forwards}
.sv{height:118px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:14px;overflow:hidden}
.tl{display:flex;gap:10px;align-items:center;width:100%;height:100%}.tl .gx{flex:1;height:100%;aspect-ratio:auto;display:block;border-radius:10px;opacity:.5;transition:transform .4s,opacity .4s,box-shadow .4s}
.tl .gx.on{opacity:1;transform:scale(1.06);box-shadow:0 0 0 1.5px var(--mint),0 10px 22px -8px rgba(61,242,192,.5)}
.pv{display:flex;flex-direction:column;gap:10px;width:100%;height:100%}.pv .gx{flex:1;width:100%;aspect-ratio:auto;display:block;border-radius:10px;transition:--a .6s,--b .6s,--c .6s}
.sw{display:flex;gap:8px;justify-content:center}.sw s{width:16px;height:16px;border-radius:50%;opacity:.55;transition:.3s;text-decoration:none}.sw s.on{opacity:1;box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--mint)}
.dl{width:100%}.dl .dr{display:flex;justify-content:space-between;align-items:center}.dl small{color:var(--mute);font-size:12.5px}
.dl em{font-style:normal;font-size:12px;padding:3px 10px;border-radius:99px;background:var(--mint);color:#06142b;opacity:0;transform:scale(.8)}
.dl .pbar u{animation:none;transform:scaleX(0)}.sc.act .dl .pbar u{animation:fillb 2.4s ease-out .3s forwards}.sc.act .dl em{animation:pop .4s 2.7s forwards}
@keyframes pop{to{opacity:1;transform:none}}
@media(max-width:860px){.sx{grid-template-columns:1fr}}

.sv .ex.dl{border:0;background:none;padding:0}
.sc.act .dl .pbar u,.sc.act .dl em{animation:none}
.sc.act .dl.go .pbar u{animation:fillb 1.3s ease-out forwards}.sc.act .dl.go em{animation:pop .3s 1.3s forwards}
.fm{display:flex;align-items:center;gap:6px}.fm small{margin-left:auto}
.fm i{font-style:normal;font-size:12px;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mute);transition:.3s}
.fm i.on{background:var(--mint);border-color:var(--mint);color:#06142b}

.sv{height:150px;padding:12px}
.ox{display:flex;flex-direction:column;gap:6px;width:100%}
.ox>div{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:background .4s,border-color .4s,transform .4s}
.ox>div:after{content:"\203A";margin-left:auto;color:var(--mute);font-size:18px;line-height:1}
.ox .ic{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;background:rgba(157,154,255,.14);color:var(--lilac);transition:.4s}.ox .ic svg{width:13px;height:13px}
.ox b{display:block;font:600 13px var(--bd);color:#fff}.ox small{display:block;font-size:11.5px;color:var(--mute);line-height:1.25}
.ox>div.on{background:linear-gradient(100deg,#5b7cff,#a66bff);border-color:transparent;transform:scale(1.02)}.ox>div.on small{color:rgba(255,255,255,.85)}.ox>div.on .ic{background:rgba(255,255,255,.22);color:#fff}.ox>div.on:after{content:"\2713";color:#fff;font-size:14px}

/* step previews: content-sized, no clipping */
.sv{height:auto;min-height:176px;padding:14px;overflow:visible}
.tl,.pv{height:148px}
.ox{gap:8px}
.ox>div{padding:8px 12px;gap:12px;transform:none!important}
.ox .ic{width:28px;height:28px;border-radius:8px}.ox .ic svg{width:15px;height:15px}
.ox b{font-size:13.5px;line-height:1.3}.ox small{font-size:12px;line-height:1.3}

/* step 3: options + export status */
.oxw{width:100%;display:flex;flex-direction:column;gap:12px}
.ox>div{padding:7px 12px}.ox>div:after,.ox>div.on:after{content:none}
.xs .pbar{height:5px}.xs .pbar u{animation:none;transform:scaleX(0)}
.xl{display:grid;margin-top:8px;font-size:12.5px;color:var(--mute)}.xl>*{grid-area:1/1}.xl em{font-style:normal;color:var(--mint);opacity:0}
.oxw.go .xs .pbar u{animation:fillb .8s ease-out forwards}.oxw.go .xl span{animation:fadeo .2s .8s forwards}.oxw.go .xl em{animation:pop .25s .85s forwards}
@keyframes fadeo{to{opacity:0}}

/* step 3 final: file-name + progress + ready system */
.sc.act .dl.go .pbar u{animation:fillb .9s ease-out forwards}.sc.act .dl.go em{animation:pop .25s .95s forwards}
.sc:nth-child(3).act .ln u{animation-duration:4.8s}
.dl .dr span{font:600 15px var(--bd);color:#fff}.dl .fm{margin-top:12px}
/* gallery: aligned with the page container instead of full-bleed */
#gallery .mq{width:calc(100% - 48px);max-width:1112px;margin:44px auto 0;border-radius:22px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
#gallery .mq:hover .tr{animation-play-state:paused}

/* gallery: 2 rows, opposite directions */
#gallery .mq{display:flex;flex-direction:column;gap:18px}
#gallery .tr.rev{animation-direction:reverse;animation-duration:52s}
#gallery .gp{width:176px;aspect-ratio:3/3.5;padding:16px;font-size:19px}

/* why section */
.wx{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:48px}
.wc{grid-column:span 2;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;transition:border-color .5s,box-shadow .5s,transform .5s,background .5s}
.wc:nth-child(n+4){grid-column:span 3}
.wc h3{font-size:21px;margin-top:22px}.wc p{color:var(--mute);margin:8px 0 0;font-size:15.5px;max-width:38ch}
.wi2{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--a),var(--b));opacity:.75;transition:transform .5s,box-shadow .5s,opacity .5s}.wi2 svg{width:22px;height:22px}
.wc.act,.wc:hover{border-color:rgba(157,154,255,.5);background:linear-gradient(160deg,rgba(24,21,54,.95),var(--panel));box-shadow:0 24px 60px -30px var(--indigo);transform:translateY(-4px)}
.wc.act .wi2,.wc:hover .wi2{opacity:1;transform:scale(1.08) rotate(-4deg);box-shadow:0 10px 26px -8px var(--a)}
@media(max-width:900px){.wx{grid-template-columns:1fr 1fr}.wc,.wc:nth-child(n+4){grid-column:auto}}
@media(max-width:560px){.wx{grid-template-columns:1fr}}
/* why section: glass look */
.wc{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 50px -32px rgba(0,0,0,.7)}
.wc::before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-70px;top:-100px;background:radial-gradient(circle,var(--a),transparent 68%);opacity:.3;filter:blur(22px);transition:opacity .6s,transform .9s;pointer-events:none}
.wc::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 38%);pointer-events:none}
.wc>*{position:relative;z-index:1}
.wi2{--a:inherit;--b:inherit;opacity:.95;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px -10px var(--a)}
.wc.act,.wc:hover{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 28px 60px -30px var(--a)}
.wc.act::before,.wc:hover::before{opacity:.6;transform:scale(1.3)}
.wc.act .wi2,.wc:hover .wi2{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px -8px var(--a)}

/* why section: smoother colour transitions */
.wc{transition:border-color 1s ease,box-shadow 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.wc.act,.wc:hover{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.02))}
.wc::before{transition:opacity 1.3s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.wc::after{background:linear-gradient(115deg,rgba(255,255,255,.17),transparent 46%);opacity:.55;transition:opacity 1s ease}
.wc.act::after,.wc:hover::after{opacity:1}
.wi2{transition:transform 1s cubic-bezier(.2,.8,.2,1),box-shadow 1s ease,opacity 1s ease}

/* gallery: back to a single row, original card size */
#gallery .gp{width:200px;aspect-ratio:3/4.2;padding:18px;font-size:22px}

/* gallery page */
.gf{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 34px}
.gf button{font:500 14.5px var(--bd);color:var(--mute);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:99px;padding:9px 18px;cursor:pointer;transition:.3s}
.gf button:hover{color:#fff}.gf button.on{color:#06142b;background:var(--mint);border-color:var(--mint)}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}.gg .gp{width:auto}
.gp small{display:block;font:500 13px var(--bd);opacity:.8;margin-top:6px}

/* faq: full container width, card rows */
.fq{max-width:none;display:grid;gap:12px;margin-top:44px}
.fq details{border:1px solid var(--line);border-radius:18px;padding:0 28px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));transition:border-color .5s,background .5s}
.fq details:hover{border-color:rgba(157,154,255,.35)}
.fq:not(.js) details[open],.fq.js details.o{border-color:rgba(157,154,255,.5);background:linear-gradient(145deg,rgba(70,70,255,.14),rgba(255,255,255,.02))}
.fq summary{padding:24px 0;font-size:19px}
.fq summary::after{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(157,154,255,.12);font-size:22px;line-height:1;flex:none}
.fq details p{margin:0;padding-bottom:26px;max-width:72ch;font-size:16.5px}
/* final CTA: glass look */
.fin{position:relative;isolation:isolate}
.fin::before,.fin::after{content:"";position:absolute;border-radius:50%;filter:blur(48px);z-index:-1;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.fin::before{width:380px;height:380px;left:12%;top:-70px;background:radial-gradient(circle,#5a52ff,#7a2cff 60%,transparent 72%);opacity:.85}
.fin::after{width:340px;height:340px;right:10%;bottom:-80px;background:radial-gradient(circle,#1fd1a0,#2a5bff 60%,transparent 72%);opacity:.6;animation-delay:-9s}
.fb{background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 40px 90px -40px rgba(70,70,255,.6)}
.fb::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 38%);pointer-events:none}
.fb>*{position:relative}

/* final CTA: glass reflection sweep (like the button) */
.fb::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-50%;width:34%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.07) 35%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.07) 65%,transparent);transform:skewX(-18deg);pointer-events:none;animation:fbs 7s ease-in-out infinite}
@keyframes fbs{0%,45%{left:-50%}100%{left:130%}}
.fb>*{z-index:1}
@media(prefers-reduced-motion:reduce){.fb::after{animation:none;left:20%}}
/* footer tagline */
.ft{color:var(--mute);font-size:15px;line-height:1.55;max-width:30ch;margin:14px 0 0}


/* ===== Final CTA: softer gradient (less highlight) ===== */
.fin::before{width:320px;height:320px;top:-40px;opacity:.42;filter:blur(70px)}
.fin::after{width:280px;height:280px;bottom:-30px;opacity:.22;filter:blur(70px)}
.fb{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 70px -40px rgba(70,70,255,.3)}
.fb::before{background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 38%)}
.fb::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.03) 35%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.03) 65%,transparent)}

/* ===== Footer: modern 2-row layout ===== */
footer.ftr{position:relative;z-index:1;margin-top:90px;padding:0;border:0;background:linear-gradient(180deg,rgba(7,6,15,.0),var(--ink) 38px)}
footer.ftr::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(157,154,255,.35) 30%,rgba(61,242,192,.25) 70%,transparent)}
footer.ftr .wrap{padding-top:44px;padding-bottom:30px}
.fr1,.fr2{display:flex;align-items:center;justify-content:space-between;gap:24px 40px}
.fbrand{display:flex;align-items:center;gap:12px;height:36px;font:800 22px/1 var(--hd);color:#fff;letter-spacing:-.01em}
.fbrand img{height:32px;width:auto;display:block;flex:none}
.fbrand span{display:block;line-height:1;padding-top:1px}
.fl2{display:flex;align-items:center;gap:8px}
.fl2 a{display:flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;color:var(--mute);font-size:15px;line-height:1;transition:color .2s,background .2s}
.fl2 a:hover{color:#fff;background:rgba(157,154,255,.12)}
.fr2{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.cp2{margin:0;color:var(--mute);font-size:14px;line-height:1}
.fpay{display:flex;align-items:center;gap:16px}
.sec{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:14px;line-height:1}
.sec svg{width:16px;height:16px;color:var(--mint);flex:none}
.pb{display:flex;align-items:center;gap:8px}
.pm{display:flex;align-items:center;justify-content:center;width:52px;height:32px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);transition:border-color .25s,background .25s}
.pm:hover{border-color:rgba(157,154,255,.5);background:rgba(255,255,255,.08)}
.pm svg{width:34px;height:21px;display:block}
.pm b{font-weight:800;line-height:1;color:#fff}
.pm .vs{font:italic 800 13px/1 var(--hd);letter-spacing:.02em;color:#c9d2ff}
.pm .pp{font:800 11.5px/1 var(--hd);color:#8fb4ff}.pm .pp i{font-style:normal;color:#5cc8ff}
.pm .st{font:700 12.5px/1 var(--hd);color:#a99bff;letter-spacing:-.01em}
@media(max-width:900px){
.fr1,.fr2{flex-direction:column;gap:18px;text-align:center}
.fl2{flex-wrap:wrap;justify-content:center;gap:4px}
.fpay{flex-direction:column;gap:12px}
footer.ftr .wrap{padding-top:36px;padding-bottom:26px}}

/* FAQ: smooth accordion */
.fq details{overflow:hidden}
.fq details p{animation:none;will-change:opacity,transform}
.fq summary{user-select:none;-webkit-tap-highlight-color:transparent}
.fq summary::after{transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.fq:not(.js) details[open] summary::after,.fq.js details.o summary::after{transform:rotate(135deg);background:rgba(157,154,255,.24);color:#fff}
.fq summary:hover::after{background:rgba(157,154,255,.22)}
.fq.js details:not(.o) summary::after{transform:none}

/* footer payment badges: wallets + QR */
.pm{width:auto;min-width:52px;padding:0 10px}
.pm .bk{font:800 12.5px/1 var(--hd);color:#ff4d94;letter-spacing:-.01em}
.pm .ng{font:800 12.5px/1 var(--hd);color:#ff9b3d;letter-spacing:-.01em}
.pm .rk{font:800 12.5px/1 var(--hd);color:#c37bff;letter-spacing:-.01em}
.pm .bq{display:flex;align-items:center;gap:6px;font:700 11.5px/1 var(--hd);color:var(--mist);white-space:nowrap}
.pm .bq svg{width:13px;height:13px;color:var(--mint);flex:none}
.pb{flex-wrap:wrap;justify-content:flex-end}
.fr2{flex-wrap:wrap}
@media(max-width:900px){.pb{justify-content:center}}

/* legal + contact pages */
.legal{max-width:760px;margin-top:34px}
.legal .meta{color:var(--mute);font-size:14.5px;margin:0 0 30px}
.legal h2{font-size:24px;margin:38px 0 10px;max-width:none}
.legal p,.legal li{color:var(--mute);font-size:16.5px;line-height:1.7}
.legal p{margin:0 0 14px;max-width:none}
.legal ul{margin:0 0 14px;padding-left:22px}.legal li{padding:3px 0}
.legal a{color:var(--lilac);text-decoration:underline;text-underline-offset:3px}.legal a:hover{color:#fff}
.legal .note{margin-top:40px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);font-size:15px}
.cg{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;margin-top:38px;align-items:start}
.ci{display:grid;gap:14px}
.cc{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.cc i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(157,154,255,.14);color:var(--lilac);flex:none}
.cc i svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cc h3{font-size:17px;margin:0 0 4px}.cc p{margin:0;color:var(--mute);font-size:15.5px}.cc a{color:var(--mist)}.cc a:hover{color:#fff}
.cf{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:16px}
.cf label{display:grid;gap:8px;font-size:14.5px;color:var(--mist)}
.cf input,.cf select,.cf textarea{width:100%;font:400 16px var(--bd);color:#fff;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:13px 15px;outline:none;transition:border-color .25s,box-shadow .25s}
.cf textarea{min-height:140px;resize:vertical}
.cf select option{background:#110f26;color:#fff}
.cf input:focus,.cf select:focus,.cf textarea:focus{border-color:rgba(157,154,255,.6);box-shadow:0 0 0 3px rgba(157,154,255,.14)}
.cf .r2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf .btn{justify-self:start;border:0;cursor:pointer}
.cf small{color:var(--mute);font-size:13.5px}
@media(max-width:900px){.cg{grid-template-columns:1fr}.cf .r2{grid-template-columns:1fr}}

/* footer v4: 2 rows only */
.fr2{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.fr2 .cp2{flex:none;white-space:nowrap}
.fr2 .fpay{display:flex;align-items:center;gap:16px;min-width:0}
.fr2 .sec{flex:none;white-space:nowrap}
.fr2 .pb{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:8px;flex:none}
.pm .bn{display:flex;align-items:center;gap:6px;font:700 11.5px/1 var(--hd);color:#f3ba2f;white-space:nowrap}
.pm .bn svg{width:14px;height:14px;flex:none}
.pm .cr{display:flex;align-items:center;gap:6px;font:700 11.5px/1 var(--hd);color:var(--mist);white-space:nowrap}
.pm .cr svg{width:16px;height:16px;flex:none;display:block}
@media(max-width:1140px){.fr2{flex-direction:column;gap:18px}.fr2 .fpay{flex-direction:column;gap:12px}.fr2 .pb{flex-wrap:wrap;justify-content:center}}

/* ===== Animated GLASS logo (brand mark: document + </> + folded corner) ===== */
.brand .lg{width:38px;height:38px}
.fbrand .lg{width:40px;height:40px}
.lg{display:block;flex:none;overflow:visible;transition:transform .6s cubic-bezier(.2,1.3,.35,1);filter:drop-shadow(0 6px 14px rgba(67,68,252,.55)) drop-shadow(0 0 1px rgba(255,255,255,.35));will-change:transform}
.brand:hover .lg,.fbrand:hover .lg{transform:rotate(-5deg) scale(1.09)}
.lg *{transform-box:fill-box;transform-origin:center}
.lg-in{animation:lgpop .8s cubic-bezier(.2,1.25,.35,1) both}
.lg-gl{animation:lgglow 6.5s ease-in-out .85s infinite}
.lg-fold{transform-origin:0 100%;animation:lgfold .9s cubic-bezier(.2,1.2,.35,1) .45s both,lgflap 6.5s ease-in-out 1.4s infinite}
.lg-s{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100;stroke-dashoffset:100;animation:lgloop 6.5s linear infinite both,lgvis 6.5s linear infinite both}
.lg-sm{stroke-width:340}
.lg-sd{stroke:#12087c;stroke-opacity:.3;stroke-width:340}
.lg-sg{stroke:#fff;stroke-opacity:.16;stroke-width:560}
.lg-s1{animation-delay:.85s}
.lg-s2{animation-delay:1.05s}
.lg-s3{animation-delay:1.25s}
.lg-sh{transform:translateX(0) skewX(-18deg);transform-box:view-box;transform-origin:0 0;animation:lgsh 6.5s cubic-bezier(.5,0,.3,1) .85s infinite}
.brand:hover .lg-sh,.fbrand:hover .lg-sh{animation:lgshH .95s cubic-bezier(.4,0,.2,1) forwards}
.brand:hover .lg-fold,.fbrand:hover .lg-fold{animation:lgfold .9s cubic-bezier(.2,1.2,.35,1) .45s both,lgflapH .7s cubic-bezier(.3,1.5,.4,1) forwards}
@keyframes lgpop{0%{transform:scale(.55) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes lgfold{0%{transform:translate(320px,-320px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes lgloop{0%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.65,0,.25,1)}12%,76%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}90%,100%{stroke-dashoffset:-100}}
@keyframes lgvis{0%{opacity:0}2%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes lgglow{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes lgflap{0%,26%,100%{transform:none}36%{transform:scale(1.08) translate(-14px,14px)}46%{transform:scale(.99)}54%{transform:none}}
@keyframes lgflapH{to{transform:scale(1.12) translate(-24px,24px)}}
@keyframes lgsh{0%,22%{transform:translateX(0) skewX(-18deg)}52%,100%{transform:translateX(6600px) skewX(-18deg)}}
@keyframes lgshH{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(6600px) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.lg *{animation:none!important}.lg-s{stroke-dashoffset:0;opacity:1}.lg-sh{opacity:0}.lg{transition:none}}

/* ===== GLASS CARDS: every card = frosted glass + gloss + moving reflection =====
   Cards: .card .sc .wc .pc .fl>div .cc .cf .fq details .gen .legal .note .gp .tv
   Reflection: hover sweep + one-time sweep when scrolled into view (class .gs added by site.js) + cursor specular (--mx/--my set by site.js). */
@property --sp{syntax:'<number>';inherits:true;initial-value:0}
.card,.sc,.wc,.pc,.fl>div,.cc,.cf,.fq details,.gen,.legal .note{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.04),0 26px 50px -30px rgba(70,70,255,.5);transition:transform .35s,border-color .4s,box-shadow .4s,background .4s,opacity .5s,--sp .45s}
.gp,.tv{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.06),0 22px 44px -26px rgba(70,70,255,.5);transition:transform .4s,box-shadow .4s,--sp .45s}
.card:hover,.sc:hover,.wc:hover,.pc:hover,.fl>div:hover,.cc:hover,.cf:hover,.fq details:hover,.gen:hover,.gp:hover,.tv:hover{--sp:1}
.card:hover,.fl>div:hover,.cc:hover,.pc:hover{border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 1px 0 0 rgba(255,255,255,.1),0 30px 60px -30px rgba(90,82,255,.7)}
.sc.act,.sc.act.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 60px -28px var(--indigo);border-color:rgba(255,255,255,.3)}
.pc.h{background:linear-gradient(145deg,rgba(120,116,255,.38),rgba(40,34,160,.22));border-color:rgba(255,255,255,.3)}
.gen{background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.fq details[open],.fq details.o{background:linear-gradient(145deg,rgba(90,82,255,.2),rgba(255,255,255,.03))}
.card>*,.sc>*,.pc>*,.fl>div>*,.cc>*,.cf>*,.gen>*,.legal .note>*{position:relative;z-index:1}
.fq details>*{position:relative;z-index:1}
/* gloss (static) + cursor specular + reflection streak */
.card::after,.sc::after,.wc::after,.pc::after,.fl>div::after,.cc::after,.cf::after,.fq details::after,.gen::after,.legal .note::after,.gp::after,.tv::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:1;
 background:
  linear-gradient(112deg,transparent 34%,rgba(255,255,255,.1) 43%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.1) 57%,transparent 66%) no-repeat,
  radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,calc(var(--sp,0)*.2)),transparent 65%),
  linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,0) 34%);
 background-size:280% 100%,100% 100%,100% 100%;background-position:100% 0,0 0,0 0}
.gp::after,.tv::after{background:
  linear-gradient(112deg,transparent 34%,rgba(255,255,255,.12) 43%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.12) 57%,transparent 66%) no-repeat,
  radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,calc(var(--sp,0)*.22)),transparent 65%),
  linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%),
  linear-gradient(0deg,rgba(255,255,255,.07),transparent 28%);
 background-size:280% 100%,100% 100%,100% 100%,100% 100%;background-position:100% 0,0 0,0 0,0 0}
.card:hover::after,.sc:hover::after,.wc:hover::after,.pc:hover::after,.fl>div:hover::after,.cc:hover::after,.cf:hover::after,.fq details:hover::after,.gen:hover::after,.gp:hover::after,.tv:hover::after{animation:gsw2 1.15s cubic-bezier(.4,0,.2,1) both}
.gs::after{animation:gsw 1.5s cubic-bezier(.4,0,.2,1) both}
@keyframes gsw{from{background-position:100% 0,0 0,0 0,0 0}to{background-position:0 0,0 0,0 0,0 0}}
@keyframes gsw2{from{background-position:100% 0,0 0,0 0,0 0}to{background-position:0 0,0 0,0 0,0 0}}
.card::before{z-index:0}
.wc::after{opacity:1}
.wc:hover::after,.wc.act::after{opacity:1}
@media(prefers-reduced-motion:reduce){.gs::after,.card:hover::after,.sc:hover::after,.wc:hover::after,.pc:hover::after,.fl>div:hover::after,.cc:hover::after,.cf:hover::after,.fq details:hover::after,.gen:hover::after,.gp:hover::after,.tv:hover::after{animation:none}}
@media(max-width:700px){.card,.sc,.wc,.pc,.fl>div,.cc,.cf,.fq details,.gen,.legal .note{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}}

/* ===== Reflection effect ONLY on buttons (.btn, .gb em). Removed everywhere else (cards, CTA box, logo) for mobile ===== */
.card::after,.sc::after,.wc::after,.pc::after,.fl>div::after,.cc::after,.cf::after,.fq details::after,.gen::after,.legal .note::after,.gp::after,.tv::after,.fb::after{content:none!important;display:none!important;animation:none!important}
.lg-sh{display:none!important;animation:none!important}

/* ===== Consistent width on every page: content = header width (1160px wrap) ===== */
.ph .wrap{max-width:1160px}
.pr{max-width:none}
.fq{max-width:none}
.hub .card p{margin-bottom:0}
.card .tsoon{font-style:normal;font-family:inherit;font-weight:500;font-size:11.5px;letter-spacing:.02em;margin-left:10px;padding:3px 9px;border-radius:99px;vertical-align:middle;color:var(--lilac);background:rgba(157,154,255,.14);border:1px solid rgba(157,154,255,.28);white-space:nowrap}
.hub .card.soon .gx{filter:saturate(.7) brightness(.85)}
.card .tsoon{display:table;margin:8px 0 0}
.hub .card .dl{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:9px}
.hub .card .dl li{position:relative;padding-left:22px;color:var(--mute);font-size:14.5px;line-height:1.45}
.hub .card .dl li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:10px;border:solid var(--lilac);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg)}
.hub .card p{margin-bottom:16px}
.hub .card.soon p{margin-bottom:0}
/* "more tools coming" banner */
.mtb{margin-top:44px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 40px;border-radius:26px;border:1px solid rgba(255,255,255,.16);background:radial-gradient(at 0% 0%,rgba(90,82,255,.28),transparent 60%),radial-gradient(at 100% 100%,rgba(122,44,255,.22),transparent 55%),rgba(255,255,255,.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px -40px rgba(70,70,255,.5)}
.mtb h2{font-size:clamp(22px,3vw,30px);margin:8px 0 8px}
.mtb p{color:var(--mute);margin:0;max-width:52ch;font-size:16px}
.mtb .btn{flex:none}
@media(max-width:700px){.mtb{flex-direction:column;align-items:flex-start;padding:26px 22px;gap:20px}}
.mtb h2{max-width:none}
/* pricing: plans + per-tool details */
.xplans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.xpl{position:relative;overflow:hidden;text-align:center;padding:34px 24px 30px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 50px -30px rgba(70,70,255,.5)}
.xpl h3{font-size:21px;margin:0}.xpl small{display:block;color:var(--mute);margin-top:4px;font-size:14px}
.xpl .xamt{font:800 46px/1 var(--bd);margin:22px 0 4px;letter-spacing:-.02em}.xpl .xamt span{display:block;font:500 12px var(--bd);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:8px}
.xpl .xpd{display:inline-block;margin-top:16px;padding:5px 14px;border-radius:99px;font-size:13.5px;color:var(--mute);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.xpl .xsv{margin-top:12px;color:var(--mint);font-weight:500;font-size:14px}
.xpl.xbest{border-color:rgba(130,120,255,.7);background:linear-gradient(145deg,rgba(120,116,255,.3),rgba(40,34,160,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 60px -28px var(--indigo)}
.xpl .xbv{position:absolute;top:0;left:50%;transform:translateX(-50%);font-style:normal;font:500 11px var(--bd);letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:0 0 12px 12px;background:linear-gradient(120deg,#5a52ff,#7a5cff)}
.xpl.xbest h3{margin-top:10px}
.tpl{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tpl .tpr{color:var(--lilac);font-weight:500;margin:8px 0 14px;font-size:16px}
.tpl .dl{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:9px}
.tpl .dl li{position:relative;padding-left:22px;color:var(--mute);font-size:14.5px;line-height:1.45}
.tpl .dl li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:10px;border:solid var(--lilac);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg)}
@media(max-width:800px){.xplans{grid-template-columns:1fr}}
/* contact: channel cards */
.ch{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.ch2{grid-template-columns:repeat(2,1fr);margin-top:20px}
.cl{align-items:center;text-decoration:none;color:inherit;transition:transform .3s,border-color .3s}
.cl:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3)}
.cl h3{color:#fff}
.cl.off{opacity:.6;cursor:default}.cl.off:hover{transform:none;border-color:rgba(255,255,255,.13)}
@media(max-width:900px){.ch,.ch2{grid-template-columns:1fr}}