/* ==========================================================================
   Vidora – theme styles (visual design unchanged from the original)
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#07080f;--tx:#f4f5ff;--mu:#9a9fbd;--g1:rgba(255,255,255,.085);--g2:rgba(255,255,255,.022);--bd:rgba(255,255,255,.12);--hi:rgba(255,255,255,.2);--inp:rgba(0,0,0,.3);
--a:#8b7bff;--b:#38bdf8;--c:#f472b6;--grad:linear-gradient(115deg,#8b7bff,#38bdf8 55%,#f472b6);--on:#fff;--hd:rgba(7,8,15,.6);--sh:0 30px 80px -30px rgba(0,0,0,.75);--glow:rgba(139,123,255,.3);--orb:.5}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#eceefb;--tx:#14152b;--mu:#5d6285;--g1:rgba(255,255,255,.78);--g2:rgba(255,255,255,.38);--bd:rgba(120,110,210,.2);--hi:rgba(255,255,255,.95);--inp:rgba(255,255,255,.75);--grad:linear-gradient(115deg,#6d5cf0,#0ea5e9 55%,#ec4899);--hd:rgba(236,238,251,.7);--sh:0 30px 70px -30px rgba(90,80,200,.35);--glow:rgba(109,92,240,.2);--orb:.42;color-scheme:light}}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{--bg:#eceefb;--tx:#14152b;--mu:#5d6285;--g1:rgba(255,255,255,.78);--g2:rgba(255,255,255,.38);--bd:rgba(120,110,210,.2);--hi:rgba(255,255,255,.95);--inp:rgba(255,255,255,.75);--grad:linear-gradient(115deg,#6d5cf0,#0ea5e9 55%,#ec4899);--hd:rgba(236,238,251,.7);--sh:0 30px 70px -30px rgba(90,80,200,.35);--glow:rgba(109,92,240,.2);--orb:.42;color-scheme:light}

/* ---- Base --------------------------------------------------------------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);height:100%}
*{box-sizing:border-box;margin:0}
body{min-height:100%;background:var(--bg);color:var(--tx);font:400 16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--hd);backdrop-filter:blur(16px)}
a{color:inherit;text-decoration:none}

/* Accessibility utilities (invisible to sighted mouse users) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:where(a,button,summary):focus-visible{outline:2px solid var(--a);outline-offset:3px}
.tabs button:focus-visible{outline-offset:-2px}
.hl{color:var(--tx)}

/* ---- Background --------------------------------------------------------- */
.orbs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.orbs i{position:absolute;border-radius:50%;filter:blur(100px);opacity:var(--orb);animation:dr 22s ease-in-out infinite alternate}
.orbs i:nth-child(1){width:560px;height:560px;background:#7c6cff;top:-180px;left:-140px}
.orbs i:nth-child(2){width:500px;height:500px;background:#1fb6f0;top:160px;right:-180px;animation-delay:-8s}
.orbs i:nth-child(3){width:420px;height:420px;background:#e8559f;bottom:-160px;left:32%;animation-delay:-14s;opacity:calc(var(--orb) * .7)}
@keyframes dr{to{transform:translate(70px,50px) scale(1.12)}}
.grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--bd) 1px,transparent 1px),linear-gradient(90deg,var(--bd) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 5%,transparent 65%);mask-image:radial-gradient(ellipse at 50% 0,#000 5%,transparent 65%);opacity:.55}

/* ---- Layout ------------------------------------------------------------- */
.wrap{max-width:1160px;margin:auto;padding:0 24px}
.sg{font-family:Outfit,Inter,system-ui,sans-serif}
section{padding:92px 0}
.sec-flush{padding:0}
.sec-top0{padding-top:0}

/* glass */
.box,.res,.pf,.step,.card,.stats,details,.cta{background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--bd);box-shadow:var(--sh),inset 0 1px 0 var(--hi)}

/* ---- Header ------------------------------------------------------------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--hd);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--bd)}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-actions{display:flex;gap:8px}
.logo{display:flex;align-items:center;gap:10px;font:700 1.35rem Outfit,sans-serif;letter-spacing:-.02em}
.logo b{width:34px;height:34px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:1rem;box-shadow:0 6px 22px var(--glow)}
.links{display:flex;gap:30px;font-size:.9rem;color:var(--mu);font-weight:500}
.links a:hover{color:var(--tx)}

/* ---- Buttons ------------------------------------------------------------ */
.btn{border:0;cursor:pointer;font:600 .92rem Inter,sans-serif;color:var(--on);background:var(--grad);padding:13px 24px;border-radius:14px;position:relative;overflow:hidden;transition:.3s;box-shadow:0 10px 30px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:.7s}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:translateX(120%)}
.btn[aria-disabled="true"]{cursor:progress}
.out{background:var(--g1);color:var(--tx);border:1px solid var(--bd);box-shadow:inset 0 1px 0 var(--hi)}
.ic1{width:42px;height:42px;padding:0;display:grid;place-items:center}

/* ---- Hero --------------------------------------------------------------- */
.hero{text-align:center;padding:90px 24px 48px;position:relative}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:99px;font-size:.82rem;color:var(--mu);background:linear-gradient(145deg,var(--g1),var(--g2));border:1px solid var(--bd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--hi)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
h1{font:600 clamp(2.7rem,7vw,5.2rem)/1.05 Outfit,sans-serif;letter-spacing:-.03em;margin:26px auto 22px;max-width:920px}
h1 em,h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--mu);font-size:clamp(1rem,1.8vw,1.18rem);max-width:580px;margin:0 auto 44px}

/* ---- Download box ------------------------------------------------------- */
.box{max-width:800px;margin:auto;padding:10px;border-radius:30px;position:relative;text-align:left}
.box::before{content:"";position:absolute;inset:-1px;border-radius:31px;padding:1px;background:conic-gradient(from var(--ang),#8b7bff,#38bdf8,#f472b6,#8b7bff);animation:spin 6s linear infinite;opacity:.8;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tabs{display:flex;gap:4px;padding:4px 4px 10px;overflow-x:auto}
.tabs button{border:0;background:none;color:var(--mu);font:500 .85rem Inter,sans-serif;padding:9px 18px;border-radius:12px;cursor:pointer;white-space:nowrap;transition:.2s}
.tabs button.on{background:var(--g1);color:var(--tx);box-shadow:inset 0 0 0 1px var(--bd),inset 0 1px 0 var(--hi)}
.row{display:flex;gap:10px;background:var(--inp);border:1px solid var(--bd);border-radius:20px;padding:8px;transition:.3s}
.row:focus-within{border-color:var(--a);box-shadow:0 0 0 5px var(--glow)}
.row input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font:400 1rem Inter,sans-serif;padding:12px 14px}
.row input::placeholder{color:var(--mu)}
.det{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--mu);padding:14px 10px 4px;min-height:40px}
.bar{height:3px;background:var(--bd);margin:6px 10px 2px;display:none;border-radius:3px;overflow:hidden}
.bar.show{display:block}
.bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad);transition:transform .25s}
.res{display:none;gap:18px;margin:12px 2px 2px;padding:16px;border-radius:22px;animation:up .6s cubic-bezier(.2,.7,.2,1)}
.res.show{display:flex}
@keyframes up{from{opacity:0;transform:translateY(16px)}}
.th{width:150px;aspect-ratio:3/4;border-radius:16px;flex:none;display:grid;place-items:center;background:var(--grad);position:relative;overflow:hidden}
.th::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 30% 15%,rgba(255,255,255,.4),transparent 60%)}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th span{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.45)}
.inf{flex:1;min-width:0}
.inf h2{font:600 1.2rem Outfit,sans-serif;margin:0 0 2px;max-width:none;letter-spacing:normal}
.inf p{color:var(--mu);font-size:.85rem;margin-bottom:14px}
.q{display:flex;flex-wrap:wrap;gap:8px}
.q :is(button,a){display:flex;align-items:center;gap:10px;background:var(--g1);color:var(--tx);border:1px solid var(--bd);border-radius:13px;padding:10px 15px;font:500 .85rem Inter,sans-serif;cursor:pointer;transition:.25s;box-shadow:inset 0 1px 0 var(--hi)}
.q :is(button,a):hover{border-color:var(--a);box-shadow:0 0 0 3px var(--glow)}
.q small{color:var(--mu);font-weight:400}
.q em{font-style:normal;font-size:.62rem;letter-spacing:.08em;padding:3px 8px;border-radius:99px;background:var(--grad);color:#fff;font-weight:600}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin-top:32px;color:var(--mu);font-size:.86rem}
.trust span::before{content:"✓ ";color:var(--b);font-weight:700}

/* ---- Section headings --------------------------------------------------- */
.hd{text-align:center;margin-bottom:52px}
.eb{font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font:600 clamp(1.9rem,4.4vw,3.2rem)/1.12 Outfit,sans-serif;letter-spacing:-.03em;margin:14px auto;max-width:720px}
.hd p{color:var(--mu);max-width:540px;margin:auto}

/* ---- Marquee ------------------------------------------------------------ */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding:6px 0}
.marq + .marq{margin-top:12px}
.mt{display:flex;gap:14px;width:max-content;animation:mq 55s linear infinite}
#m2{animation-direction:reverse;animation-duration:65s}
.marq:hover .mt{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.pf{display:flex;align-items:center;gap:12px;padding:10px 22px 10px 10px;border-radius:99px;font-weight:500;font-size:.92rem;white-space:nowrap;transition:.3s;box-shadow:inset 0 1px 0 var(--hi)}
.pf:hover{transform:translateY(-3px);border-color:var(--a)}
.ic{position:relative;isolation:isolate;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 .72rem Inter,sans-serif;flex:none;color:#fff;background:var(--grad)}
.ic.sm{width:24px;height:24px;font-size:.6rem}

/* ---- Steps / bento / stats / formats ------------------------------------ */
.steps,.fmt{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{padding:34px 30px;border-radius:26px}
.num{font:700 3.2rem/1 Outfit,sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.step h3,.card h3{font:600 1.25rem Outfit,sans-serif;margin-bottom:8px;letter-spacing:-.01em}
.step p,.card p{color:var(--mu);font-size:.94rem}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{grid-column:span 2;position:relative;padding:32px;border-radius:26px;overflow:hidden;transition:border-color .3s,transform .4s}
.card.w{grid-column:span 4}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--x,50%) var(--y,0%),var(--glow),transparent 60%);opacity:0;transition:.4s;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:var(--a)}.card:hover::before{opacity:1}
.fi{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:1.25rem;color:#fff;background:var(--grad);margin-bottom:20px;box-shadow:0 10px 26px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.4)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;border-radius:28px;padding:44px 0}
.stats div+div{border-left:1px solid var(--bd)}
.stats b{display:block;font:700 clamp(2.4rem,5.5vw,3.8rem)/1.1 Outfit,sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{color:var(--mu);font-size:.85rem}
.fmt{grid-template-columns:repeat(4,1fr)}
.fmt .card{grid-column:auto;text-align:center;padding:28px 18px}
.fmt strong{display:block;font:600 1.55rem Outfit,sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}

/* ---- FAQ ---------------------------------------------------------------- */
details{max-width:820px;margin:0 auto 12px;border-radius:20px;padding:20px 26px;transition:border-color .3s}
details[open]{border-color:var(--a)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:600 1.08rem Outfit,sans-serif}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--b);font-size:1.5rem;line-height:1;transition:.3s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mu);margin-top:12px;font-size:.95rem}

/* ---- CTA / footer ------------------------------------------------------- */
.cta{text-align:center;padding:78px 26px;border-radius:36px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0,rgba(139,123,255,.3),transparent 55%),radial-gradient(ellipse at 85% 100%,rgba(244,114,182,.24),transparent 55%);pointer-events:none}
.cta>*{position:relative}.cta h2{margin-top:10px}.cta p{color:var(--mu);margin-bottom:28px}
footer{border-top:1px solid var(--bd);padding:56px 0 40px;margin-top:60px;color:var(--mu);font-size:.9rem}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
.fg h3{color:var(--tx);font:600 .95rem Outfit,sans-serif;margin-bottom:12px}
.fg a{display:block;padding:3px 0;transition:.2s}.fg a:hover{color:var(--tx)}
.fg .about{margin-top:14px;max-width:300px}
.disc{margin-top:38px;padding-top:22px;border-top:1px solid var(--bd);font-size:.76rem;line-height:1.8}

/* ---- Reveal / word split ------------------------------------------------ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
.wo{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .16em;margin:-.08em -.06em -.16em}
.wi{display:inline-block;transform:translateY(118%) rotate(5deg);transform-origin:left bottom;opacity:0}
.sp.go .wi{animation:wr .85s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes wr{to{transform:none;opacity:1}}
em .wi{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h1.sp em,h2.sp em{background:none;color:inherit}

@media (max-width:860px){.links{display:none}.steps,.fmt,.stats{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.bento{grid-template-columns:1fr}.card,.card.w{grid-column:auto}.fg{grid-template-columns:1fr 1fr}.res{flex-direction:column}.th{width:100%;aspect-ratio:16/9}.hero{padding-top:56px}section{padding:60px 0}.stats div:nth-child(3){border-left:0}.stats div{padding:12px 0}}
@media (max-width:520px){.row{flex-direction:column}.row .btn{width:100%}}
/* !important is intentional: it must beat every animation/transition declared above */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.wi{opacity:1;transform:none}}

/* ---- Motion extras ------------------------------------------------------ */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
@keyframes fp{50%{translate:0 -12px}}
@keyframes bl{50%{opacity:0}}
.box{transition:transform .2s ease-out}
#sp{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad);z-index:70}
.cur{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 65%);pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s}
.hf{position:absolute;z-index:1;transition:transform .25s ease-out}
.hf1{left:-50px;bottom:300px}.hf2{right:-50px;bottom:360px}.hf3{left:-30px;bottom:130px}.hf4{right:-30px;bottom:150px}
.hf .pf{animation:fp 7s ease-in-out infinite}
@media (max-width:1320px){.hf{display:none}}

/* ---- Live demo ---------------------------------------------------------- */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.dsteps{list-style:none;padding:0;display:grid;gap:14px}
.dsteps li{display:flex;gap:16px;padding:20px 22px;border-radius:20px;border:1px solid var(--bd);background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 var(--hi);opacity:.45;transform:scale(.97);transition:.45s}
.dsteps li.on{opacity:1;transform:none;border-color:var(--a);box-shadow:0 0 0 4px var(--glow),inset 0 1px 0 var(--hi)}
.dsteps b{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff;flex:none}
.dsteps h3{font:600 1.08rem Outfit,sans-serif;margin-bottom:2px}
.dsteps p{color:var(--mu);font-size:.9rem}
.phwrap{position:relative;display:grid;place-items:center}
.ph{width:290px;height:580px;border-radius:46px;padding:10px;position:relative;background:linear-gradient(145deg,var(--g1),var(--g2));border:1px solid var(--bd);box-shadow:var(--sh),inset 0 1px 0 var(--hi),0 0 100px -20px var(--glow);animation:fp 6s ease-in-out infinite;transition:transform .2s ease-out}
.notch{position:absolute;top:20px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:99px;background:#000;z-index:2}
.scr{height:100%;border-radius:36px;background:var(--bg);overflow:hidden;padding:52px 16px 16px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--bd)}
.mrow{background:var(--inp);border:1px solid var(--bd);border-radius:14px;padding:13px 12px;font-size:.78rem;min-height:46px;word-break:break-all}
.mrow span::after{content:"▍";color:var(--a);animation:bl 1s steps(1) infinite}
.md{opacity:0;transform:translateY(8px);transition:.4s;display:flex;gap:8px;align-items:center;font-size:.78rem;color:var(--mu)}
.md.show{opacity:1;transform:none}
.mprog{height:5px;border-radius:5px;background:var(--bd);overflow:hidden}
.mprog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad)}
.mres{opacity:0;transform:translateY(14px) scale(.96);transition:.5s;display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;border:1px solid var(--bd);background:linear-gradient(145deg,var(--g1),var(--g2));font-size:.85rem}
.mres.show{opacity:1;transform:none}
.mth{width:46px;height:60px;border-radius:10px;background:var(--grad);flex:none}
.mres small{display:block;color:var(--mu);font-size:.72rem}
.ok{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#34d399;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.sk{height:64px;border-radius:16px;background:linear-gradient(145deg,var(--g1),var(--g2));border:1px solid var(--bd)}
.sk:first-of-type{margin-top:auto}
.fchip{position:absolute;padding:9px 16px;border-radius:99px;font-size:.8rem;font-weight:600;background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--bd);box-shadow:var(--sh),inset 0 1px 0 var(--hi);animation:fp 5s ease-in-out infinite}
.c1{top:70px;right:6%}.c2{bottom:100px;left:4%;animation-delay:-2s}

/* ---- Burst + toast ------------------------------------------------------ */
.bp{position:fixed;width:7px;height:7px;margin:-3px;border-radius:50%;z-index:80;pointer-events:none;animation:bp .85s ease-out forwards}
@keyframes bp{to{transform:translate(var(--x),var(--y)) scale(0);opacity:0}}
.toast{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:300px;padding:13px 18px;border-radius:16px;font-size:.85rem;z-index:70;background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--bd);box-shadow:var(--sh),inset 0 1px 0 var(--hi);opacity:0;transform:translateY(20px);transition:.5s;pointer-events:none}
.toast.show{opacity:1;transform:none}
@media (max-width:860px){.demo{grid-template-columns:1fr;gap:36px}.cur{display:none}}

/* ---- Platform icon glow ------------------------------------------------- */
.ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bc,transparent);opacity:1;transition:opacity .3s;z-index:-1}
.pf:hover .ic::before,.ic.on::before,.hf .ic::before{opacity:1}
.hf .ic{box-shadow:0 0 18px -2px var(--bc)}
.pf .ic{box-shadow:0 4px 14px -4px var(--bc,transparent)}
.pf:hover .ic{box-shadow:0 0 20px -2px var(--bc,transparent)}

/* ---- Ad slots ----------------------------------------------------------- */
.adslot{max-width:970px;margin:0 auto;padding:30px 0}
.adl{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);margin-bottom:8px;text-align:center}
.adbox{position:relative;min-height:110px;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--bd);box-shadow:var(--sh),inset 0 1px 0 var(--hi)}
.shim{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:18px;padding:18px 22px;overflow:hidden;transition:opacity .6s;background:linear-gradient(145deg,var(--g1),var(--g2))}
.shim i{display:block;border-radius:10px;background:var(--bd)}
.shim .im{width:150px;height:74px;flex:none;border-radius:14px}
.shim span{flex:1;display:grid;gap:10px}
.shim span i{height:12px}.shim span i:nth-child(1){width:70%}.shim span i:nth-child(2){width:92%}.shim span i:nth-child(3){width:45%}
.shim::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-100%);animation:shm 1.5s ease-in-out infinite}
@keyframes shm{to{transform:translateX(100%)}}
.adbox.ready .shim{opacity:0;pointer-events:none}
.adbox ins{opacity:0;transition:opacity .7s}.adbox.ready ins{opacity:1}
.demo-ad{display:grid;place-items:center;min-height:110px;padding:10px;color:var(--mu);font-size:.88rem;opacity:0;transition:opacity .7s}
.adbox.ready .demo-ad{opacity:1}
@media (max-width:520px){.shim .im{width:90px}}

/* ---- Content pages (legal, about, contact, blog) ------------------------ */
.page{padding:clamp(40px,8vw,80px) 0 20px}
.doc{max-width:840px;margin:0 auto;padding:clamp(28px,5vw,52px) clamp(20px,5vw,56px);border-radius:30px;background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--bd);box-shadow:var(--sh),inset 0 1px 0 var(--hi)}
.doc h1{font-size:clamp(2.1rem,5vw,3.3rem);margin:10px 0 6px;max-width:none;text-align:left}
.doc .meta{color:var(--mu);font-size:.88rem;margin-bottom:8px}
.doc h2{font:600 1.3rem/1.3 Outfit,sans-serif;letter-spacing:-.01em;margin:34px 0 10px;max-width:none}
.doc p,.doc li{color:var(--mu)}
.doc>p:first-of-type{margin-top:18px}
.doc p+p{margin-top:12px}
.doc ul,.doc ol{padding-left:1.3em;margin:10px 0;display:grid;gap:8px}
.doc strong{color:var(--tx)}
.doc code{font-size:.9em;padding:1px 6px;border-radius:6px;background:var(--inp);border:1px solid var(--bd)}
.doc p a:not(.btn),.doc li a{color:var(--b);text-decoration:underline;text-underline-offset:3px}
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-top:26px}
.post{display:flex;flex-direction:column;gap:8px;padding:26px 24px;border-radius:22px;transition:border-color .3s,transform .3s}
.post h3{font:600 1.15rem/1.3 Outfit,sans-serif}
.post p{font-size:.9rem;flex:1}
.post .more{color:var(--b);font-size:.88rem;font-weight:600}
.post:hover{transform:translateY(-3px);border-color:var(--a)}
.fg nav a[aria-current="page"]{color:var(--tx)}

/* Long brand name: keep the header on one line on phones (the downloader box is right below anyway) */
@media (max-width:520px){.nav-actions .btn:not(.ic1){display:none}.nav .logo{font-size:1.15rem}}

@media (max-width:520px){h1{font-size:clamp(2.05rem,10vw,2.7rem)}}
@media (max-width:520px){.fg{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.fg>div:first-child{grid-column:1/-1}}
.doc h1,h2{overflow-wrap:break-word}