/* Pixelize website — one stylesheet, light + dark */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f7f6ff;--bg2:#efedff;--surface:#ffffff;--text:#17143a;--muted:#5b5880;--line:#e4e1f6;
  --primary:#4b3fe0;--primary-ink:#ffffff;--primary-soft:#ece9ff;--link:#4b3fe0;
  --teal:#12b5a4;--pink:#ff4f9d;--amber:#ffb02e;
  --grad:linear-gradient(135deg,#4b3fe0 0%,#6f8cf0 100%);
  --hero-glow:radial-gradient(60% 50% at 15% 10%,rgba(111,92,255,.22),transparent 70%),radial-gradient(50% 45% at 90% 35%,rgba(18,181,164,.18),transparent 70%);
  --dark-card:linear-gradient(135deg,#1c1560 0%,#3a2fb5 60%,#3f8f8a 130%);
  --ok:#1f9d63;--warn-bg:#e8f6f3;--warn-line:#bfe6df;
  --shadow:0 10px 30px -12px rgba(52,40,160,.28);--shadow-lg:0 30px 60px -25px rgba(40,28,140,.45);
  --radius:20px;--maxw:1120px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0c0a22;--bg2:#12102f;--surface:#171442;--text:#f2f0ff;--muted:#aaa6d3;--line:#2b2760;
  --primary:#8b7dff;--primary-ink:#0c0a22;--primary-soft:#241f66;--link:#a79dff;
  --hero-glow:radial-gradient(60% 50% at 15% 10%,rgba(111,92,255,.30),transparent 70%),radial-gradient(50% 45% at 90% 35%,rgba(18,181,164,.18),transparent 70%);
  --dark-card:linear-gradient(135deg,#171046 0%,#2f259f 60%,#2d7c78 130%);
  --warn-bg:#12302e;--warn-line:#1f5a55;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);--shadow-lg:0 30px 60px -25px rgba(0,0,0,.8);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c0a22;--bg2:#12102f;--surface:#171442;--text:#f2f0ff;--muted:#aaa6d3;--line:#2b2760;
    --primary:#8b7dff;--primary-ink:#0c0a22;--primary-soft:#241f66;--link:#a79dff;
    --hero-glow:radial-gradient(60% 50% at 15% 10%,rgba(111,92,255,.30),transparent 70%),radial-gradient(50% 45% at 90% 35%,rgba(18,181,164,.18),transparent 70%);
    --dark-card:linear-gradient(135deg,#171046 0%,#2f259f 60%,#2d7c78 130%);
    --warn-bg:#12302e;--warn-line:#1f5a55;
    --shadow:0 10px 30px -12px rgba(0,0,0,.6);--shadow-lg:0 30px 60px -25px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em;font-weight:800}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--primary);color:var(--primary-ink);padding:10px 16px;border-radius:10px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 6px 16px -6px rgba(75,63,224,.6)}
.links{display:flex;gap:4px;margin-left:auto;align-items:center}
.links a{color:var(--text);font-size:.92rem;font-weight:500;padding:8px 12px;border-radius:10px}
.links a:hover{background:var(--primary-soft);text-decoration:none}
.links a[aria-current="page"]{background:var(--primary-soft);color:var(--link);font-weight:700}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;font:inherit}
.icon-btn:hover{background:var(--primary-soft)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none}
.theme-btn .moon{display:block}.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:none}:root[data-theme="dark"] .theme-btn .sun{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .moon{display:none}:root:not([data-theme="light"]) .theme-btn .sun{display:block}}

.links .play{display:none}
.links a.play{color:#fff;padding:8px 18px 8px 14px;border-radius:12px}
.links a.play:hover{background:#1a1a1a}
/* Google Play style button */
.play{display:inline-flex;align-items:center;gap:10px;background:#050505;color:#fff;border:1px solid #8a8a8a;border-radius:12px;padding:8px 18px 8px 14px;line-height:1.1;min-height:48px}
.play:hover{text-decoration:none;background:#1a1a1a}
.play svg{width:26px;height:28px;flex:none}
.play small{display:block;font-size:.62rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase;opacity:.9}
.play b{display:block;font-size:1.18rem;font-weight:600;letter-spacing:-.01em}
.play.sm{min-height:40px;padding:5px 14px 5px 11px;border-radius:10px}
.play.sm svg{width:20px;height:22px}.play.sm b{font-size:.98rem}.play.sm small{font-size:.5rem}

@media (max-width:980px){
  .links{position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 20px;display:none;margin:0}
  .links.open{display:flex}
  .links a{font-size:1.15rem;padding:16px 8px;border-radius:0;border-bottom:1px solid var(--line)}
  .links .play{display:inline-flex;margin-top:18px;align-self:flex-start;border-bottom:1px solid #8a8a8a}
  .nav-actions{margin-left:auto}.menu-btn{display:grid}
  .nav .play.sm{display:none}
}

/* ---------- buttons / chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:14px;font-weight:700;font-size:1rem;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit}
.btn:hover{text-decoration:none;box-shadow:var(--shadow)}
.btn.primary{background:var(--grad);color:#fff;border:0}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill{text-align:center;display:inline-flex;align-items:center;gap:8px;background:var(--primary-soft);color:var(--link);font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;padding:9px 16px;border-radius:999px}
.pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.88rem;font-weight:500}
.chips svg{width:14px;height:14px;stroke:var(--ok);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--hero-glow);padding:64px 0 28px;text-align:center}
.hero h1{font-size:clamp(2.35rem,6.4vw,4.1rem);margin:22px auto 20px;max-width:15ch;letter-spacing:-.035em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:640px;margin:0 auto 28px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.phones{position:relative;max-width:640px;margin:46px auto 0;height:clamp(330px,88vw,600px)}
.phones img{position:absolute;border-radius:7%/3.9%;box-shadow:var(--shadow-lg)}
.phones .c{left:50%;transform:translateX(-50%);width:50%;top:0;z-index:3}
.phones .l{left:0;width:40%;top:9%;transform:rotate(-7deg);z-index:2}
.phones .r{right:0;width:40%;top:9%;transform:rotate(7deg);z-index:2}

/* ---------- sections ---------- */
section{padding:84px 0}
.section-head{text-align:center;max-width:700px;margin:0 auto 46px}
.section-head h2{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:16px 0 12px;letter-spacing:-.03em}
.section-head p{color:var(--muted);font-size:1.05rem}
.alt{background:var(--bg2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 18px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:2.1rem;font-weight:800;color:var(--link);letter-spacing:-.03em;line-height:1.1}
.stat span{color:var(--muted);font-size:.95rem}
.fine{color:var(--muted);font-size:.85rem;text-align:center;margin-top:16px}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat b{font-size:1.8rem}section{padding:60px 0}}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.g3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card h3{font-size:1.2rem;margin:18px 0 8px}
.card p{color:var(--muted);margin-bottom:12px}
.card .more{font-weight:700;font-size:.95rem}
.ico{width:48px;height:48px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff}
.ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.t{background:linear-gradient(135deg,#12b5a4,#3dd6c4)}.ico.p{background:linear-gradient(135deg,#ff4f9d,#ff7ab8)}.ico.a{background:linear-gradient(135deg,#ff9f1a,#ffc65c)}

/* spotlight */
.spot{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.spot h2{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:18px 0 14px;letter-spacing:-.03em}
.spot>div>p{color:var(--muted);font-size:1.05rem}
.ticks{list-style:none;padding:0;margin:22px 0}
.ticks li{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px}
.ticks .ok{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin-top:2px}
.ticks .ok svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.note{display:flex;gap:12px;align-items:flex-start;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:14px;padding:14px 18px;font-size:.95rem}
.note svg{flex:none;width:20px;height:20px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.spot-img{display:grid;place-items:center}
.spot-img img{width:min(100%,360px);border-radius:7%/3.9%;box-shadow:var(--shadow-lg)}
@media (max-width:860px){.spot{grid-template-columns:1fr;gap:36px}.spot.rev .spot-img{order:2}}

/* personas */
.persona ul{list-style:none;padding:0;margin:14px 0 0}
.persona li{position:relative;padding-left:20px;margin-bottom:9px;color:var(--text)}
.persona li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--primary)}

/* screenshots */
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 26px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.shot{flex:0 0 min(62vw,250px);scroll-snap-align:center;text-align:center;background:none;border:0;padding:0;cursor:zoom-in;color:var(--text);font:inherit}
.shot img{border-radius:7%/3.9%;box-shadow:var(--shadow);transition:transform .2s}
.shot:hover img{transform:translateY(-4px)}
.shot span{display:block;margin-top:12px;color:var(--muted);font-size:.92rem}
.center{text-align:center;margin-top:10px}
dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
dialog.lb::backdrop{background:rgba(8,6,28,.88)}
.lb-in{display:grid;place-items:center;width:100%;height:100%;padding:20px;position:relative}
.lb-in img{max-height:88vh;width:auto;max-width:92vw;border-radius:24px}
.lb-close{position:absolute;top:14px;right:14px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:12px}.lb-nav.next{right:12px}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:38px 26px 26px;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-20px;left:24px;width:42px;height:42px;border-radius:14px;background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow)}
.step h3{font-size:1.2rem}.step p{color:var(--muted);margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:34px}}

/* dark privacy card */
.dark{background:var(--dark-card);color:#fff;border-radius:28px;padding:56px 32px;text-align:center;box-shadow:var(--shadow-lg)}
.dark .pill{background:rgba(255,255,255,.14);color:#fff}
.dark h2{font-size:clamp(1.8rem,4.4vw,2.7rem);margin:18px 0 12px;letter-spacing:-.03em}
.dark>p{color:rgba(255,255,255,.82);max-width:620px;margin:0 auto 34px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;max-width:860px;margin:0 auto}
.dgrid div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:22px}
.dgrid svg{width:24px;height:24px;stroke:#7ff3e4;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dgrid b{display:block;margin:10px 0 4px;font-size:1.05rem}
.dgrid span{color:rgba(255,255,255,.8);font-size:.93rem}
@media (max-width:640px){.dgrid{grid-template-columns:1fr}.dark{padding:44px 20px}}

/* pro */
.pro{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pro .card.hl{border:2px solid var(--primary);position:relative}
.tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--primary-soft);color:var(--link)}
.tag.pro-t{background:linear-gradient(135deg,#ffb02e,#ffd36b);color:#4a3000}
@media (max-width:760px){.pro{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:19px 22px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--link);border-bottom:2.5px solid var(--link);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq .ans{padding:0 22px 20px;color:var(--muted)}
.faq .ans p:last-child{margin:0}

/* cta */
.cta{background:var(--grad);color:#fff;border-radius:28px;padding:56px 28px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1)}
.cta::before{width:260px;height:260px;left:-80px;top:-100px}.cta::after{width:300px;height:300px;right:-110px;bottom:-140px}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:clamp(1.9rem,4.4vw,2.6rem);margin:0 0 10px}
.cta p{opacity:.92;margin:0 0 26px}
.cta a.l{color:#fff;text-decoration:underline}

/* footer */
footer{padding:64px 0 36px;border-top:1px solid var(--line);margin-top:40px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.fgrid h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.fgrid a{display:block;color:var(--text);padding:5px 0}
.fgrid a.play{display:inline-flex;color:#fff;padding:5px 14px 5px 11px}
.fgrid p{color:var(--muted);max-width:330px}
.legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
@media (max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}

/* ---------- inner pages ---------- */
.page-hero{background:var(--hero-glow);padding:56px 0 30px;text-align:center}
.page-hero h1{font-size:clamp(2rem,5.4vw,3.2rem);margin:18px 0 12px;letter-spacing:-.03em}
.page-hero p{color:var(--muted);max-width:640px;margin:0 auto;font-size:1.1rem}
.doc{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;padding:40px 0 20px}
.toc{position:sticky;top:90px;font-size:.93rem}
.toc b{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc a{display:block;padding:7px 12px;border-left:2px solid var(--line);color:var(--text)}
.toc a:hover{border-color:var(--primary);background:var(--primary-soft);text-decoration:none}
.prose{max-width:760px;min-width:0}
.prose h2{font-size:1.7rem;margin:2.2em 0 .6em;padding-top:.2em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:1.6em 0 .5em}
.prose p,.prose li{color:var(--text)}
.prose li{margin-bottom:.45em}
.prose .meta{color:var(--muted);font-size:.92rem}
.prose table{width:100%;border-collapse:collapse;margin:1em 0 1.4em;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--primary-soft)}
.prose code{background:var(--primary-soft);padding:2px 7px;border-radius:7px;font-size:.92em}
.callout{background:var(--primary-soft);border-radius:16px;padding:16px 20px;margin:1.2em 0}
.callout p{margin:0}
.howto{display:grid;grid-template-columns:1fr 250px;gap:34px;align-items:start;margin:0 0 8px}
.howto img{border-radius:7%/3.9%;box-shadow:var(--shadow)}
.num{list-style:none;counter-reset:n;padding:0}
.num li{counter-increment:n;position:relative;padding-left:46px;margin-bottom:16px;min-height:32px}
.num li::before{content:counter(n);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:10px;background:var(--primary-soft);color:var(--link);font-weight:800;display:grid;place-items:center}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:12px}.toc{position:static;display:flex;flex-wrap:wrap;gap:8px}.toc b{width:100%}.toc a{border:1px solid var(--line);border-radius:999px;padding:6px 14px}.howto{grid-template-columns:1fr}.howto img{max-width:240px}}

/* form */
.form{display:grid;gap:16px;max-width:680px;margin:0 auto}
.form label{display:block;font-weight:700;font-size:.93rem;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.form textarea{min-height:150px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.toolrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.toolrow:last-child{border:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.nav,footer,.cta,.toc{display:none}body{background:#fff;color:#000}}