/* MovTron website. One stylesheet for every page. No external fonts or libraries: the site works offline. */
:root {
  --bg:#070d0b; --bg2:#0b1512; --card:#0f1b17; --card2:#13231d; --line:#1f342c; --ink:#eaf5ef; --mute:#9bb0a6; --dim:#6f857b;
  --c1:#34d399; --c2:#10b981; --c3:#14b8a6; --ok:#34d399; --warn:#fbbf24;
  --grad:linear-gradient(110deg,var(--c1),var(--c2) 55%,var(--c3));
  --glow:0 0 0 1px rgba(16,185,129,.25), 0 18px 60px rgba(52,211,153,.12);
  --radius:18px; --max:1160px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; overflow-x:hidden; }
img, svg { max-width:100%; display:block; }
a { color:inherit; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 22px; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mute { color:var(--mute); }
.center { text-align:center; }

/* background: a faint grid with two soft lights */
.sky { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(700px 420px at 8% 12%, rgba(52,211,153,.13), transparent 62%),
    linear-gradient(rgba(31,52,44,.35) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(31,52,44,.35) 1px, transparent 1px) 0 0 / 56px 100%,
    var(--bg);
  -webkit-mask-image:linear-gradient(#000 0, #000 55%, transparent 100%); mask-image:linear-gradient(#000 0, #000 55%, transparent 100%); }

/* top bar */
.nav { position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); background:rgba(7,13,11,.72); border-bottom:1px solid transparent; transition:border-color .3s; }
.nav.stuck { border-bottom-color:var(--line); }
.nav .wrap { display:flex; align-items:center; gap:26px; height:68px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:800; font-size:21px; letter-spacing:-.02em; }
.brand svg { width:36px; height:36px; }
.nav nav { display:flex; gap:24px; margin-left:auto; }
.nav nav a { text-decoration:none; color:var(--mute); font-size:15px; font-weight:600; transition:color .2s; }
.nav nav a:hover { color:var(--ink); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-weight:700; font-size:16px; padding:13px 22px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .25s ease, border-color .25s ease; }
.btn:hover { transform:translateY(-1px); border-color:#2f5445; }
.btn.primary { border:0; color:#03140d; background:var(--grad); box-shadow:0 10px 34px rgba(52,211,153,.28); }
.btn.primary:hover { box-shadow:0 14px 44px rgba(16,185,129,.42); }
.btn.small { padding:9px 15px; font-size:14.5px; border-radius:11px; }
.btn svg { width:18px; height:18px; }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--c1); outline-offset:3px; border-radius:8px; }
.menu { display:none; }

/* hero */
.hero { padding:64px 0 34px; }
.hero .wrap { display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:9px; padding:6px 13px; border-radius:99px; border:1px solid var(--line); background:rgba(15,27,23,.7); color:var(--mute); font-size:14px; font-weight:600; }
.pill i { width:8px; height:8px; border-radius:50%; background:var(--c1); box-shadow:0 0 12px var(--c1); animation:blink 1.6s ease-in-out infinite; }
h1 { font-size:clamp(38px,5.4vw,64px); line-height:1.04; letter-spacing:-.035em; margin:18px 0 16px; }
.lead { font-size:clamp(17px,1.5vw,20px); color:var(--mute); max-width:560px; margin:0 0 24px; }
.cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.facts { display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:0; list-style:none; color:var(--mute); font-size:15px; }
.facts li { display:flex; align-items:center; gap:8px; }
.facts svg { width:17px; height:17px; color:var(--c1); flex:none; }
.indie { margin-top:20px; font-size:13.5px; color:var(--dim); max-width:560px; }
.stagecard { position:relative; border-radius:26px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(19,35,29,.9),rgba(11,21,18,.9)); box-shadow:var(--glow); padding:18px; overflow:hidden; }
.stagecard::before { content:""; position:absolute; inset:-1px; border-radius:26px; padding:1px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; }
.stagecard svg { width:100%; height:auto; }
.hud { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; padding:12px 14px; border-radius:14px; background:rgba(7,13,11,.6); border:1px solid var(--line); font-size:14.5px; color:var(--mute); }
.hud b { color:var(--ink); font-variant-numeric:tabular-nums; }
.meter { flex:1; height:8px; border-radius:99px; background:#14251f; overflow:hidden; margin:0 4px; }
.meter i { display:block; height:100%; width:0; border-radius:99px; background:var(--grad); transition:width .5s ease; }

/* sections */
section { padding:74px 0; }
.kicker { font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c1); }
h2 { font-size:clamp(28px,3.4vw,42px); line-height:1.12; letter-spacing:-.03em; margin:10px 0 12px; }
.sub { color:var(--mute); max-width:680px; margin:0 0 34px; font-size:18px; }
.center .sub { margin-left:auto; margin-right:auto; }
.card { background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover { transform:translateY(-3px); border-color:#2f5445; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.card h3 { margin:14px 0 6px; font-size:19px; letter-spacing:-.01em; }
.card p { margin:0; color:var(--mute); font-size:16px; }
.icon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.25); color:var(--c1); }
.icon svg { width:23px; height:23px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:s; }
.step { position:relative; padding-top:20px; }
.step .num { counter-increment:s; position:absolute; top:-15px; left:22px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px; color:#03140d; background:var(--grad); box-shadow:0 6px 20px rgba(52,211,153,.35); }
.step .num::before { content:counter(s); }
.step .art { height:132px; border-radius:13px; background:rgba(7,13,11,.55); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
.step .art svg { width:100%; height:100%; }
.who { display:inline-block; margin-top:10px; font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:99px; }
.who.you { background:rgba(251,191,36,.12); color:var(--warn); }
.who.app { background:rgba(52,211,153,.12); color:var(--c1); }

/* what moves */
.lists { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.list { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.list li { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; color:var(--ink); font-size:16.5px; }
.list li span { color:var(--mute); font-size:15px; display:block; }
.list svg { width:22px; height:22px; margin-top:2px; }
.yes svg { color:var(--ok); } .no svg { color:var(--dim); }

/* privacy diagram */
.flow { display:grid; grid-template-columns:1fr auto 1.2fr auto 1fr; align-items:center; gap:10px; margin-top:8px; }
.node { text-align:center; padding:20px 12px; border-radius:16px; border:1px solid var(--line); background:rgba(7,13,11,.5); }
.node.me { border-color:rgba(52,211,153,.5); box-shadow:0 0 0 4px rgba(52,211,153,.07); }
.node svg { width:44px; height:44px; margin:0 auto 8px; color:var(--c1); }
.node b { display:block; } .node span { color:var(--mute); font-size:14px; }
.wire { width:64px; height:2px; background:linear-gradient(90deg,transparent,var(--c1),transparent); position:relative; overflow:hidden; }
.wire::after { content:""; position:absolute; top:-2px; left:-20px; width:20px; height:6px; border-radius:6px; background:var(--c1); filter:blur(1px); animation:run 1.8s linear infinite; }
.nocloud { margin-top:16px; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; border:1px dashed #2f5445; color:var(--mute); font-size:15.5px; }
.nocloud svg { width:30px; height:30px; flex:none; color:var(--dim); }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1040px; margin:0 auto; align-items:stretch; }
.plan { display:flex; flex-direction:column; } .plan .btn { margin-top:auto; }
.plan { position:relative; }
.plan.best { border-color:rgba(52,211,153,.55); box-shadow:var(--glow); }
.tag { position:absolute; top:-13px; right:20px; font-size:12.5px; font-weight:800; padding:4px 11px; border-radius:99px; color:#03140d; background:var(--grad); }
.intro { display:inline-block; align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:99px; background:rgba(52,211,153,.12); color:var(--c1); border:1px solid rgba(52,211,153,.32); margin-top:4px; }
.price { font-size:40px; font-weight:800; letter-spacing:-.02em; margin:8px 0 2px; }
.price s { font-size:.5em; font-weight:600; color:var(--dim); margin-left:6px; text-decoration-thickness:2px; }
.fill { background:rgba(251,191,36,.16); color:var(--warn); padding:1px 6px; border-radius:6px; font-weight:600; }
.price small { display:block; font-size:15px; font-weight:600; color:var(--mute); margin-top:2px; }
.plan ul { list-style:none; padding:0; margin:16px 0 20px; display:grid; gap:8px; color:var(--mute); font-size:15.5px; }
.plan li { display:grid; grid-template-columns:20px 1fr; gap:9px; } .plan li svg { width:18px; height:18px; color:var(--c1); margin-top:3px; }
.fine { font-size:14px; color:var(--dim); margin-top:18px; }

/* tested table */
table { width:100%; border-collapse:collapse; font-size:15.5px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
th { color:var(--mute); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
.tablecard { padding:6px 8px; overflow-x:auto; }

/* faq */
.faq { max-width:820px; margin:0 auto; display:grid; gap:10px; }
details { border:1px solid var(--line); border-radius:14px; background:var(--card); padding:0 18px; transition:border-color .2s; }
details[open] { border-color:#2f5445; }
summary { cursor:pointer; list-style:none; padding:16px 0; font-weight:700; display:flex; justify-content:space-between; gap:14px; align-items:center; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-size:22px; font-weight:500; color:var(--c1); transition:transform .25s; }
details[open] summary::after { transform:rotate(45deg); }
details p { margin:0 0 16px; color:var(--mute); }

/* closing band and footer */
.band { margin:30px 0 0; padding:44px 30px; border-radius:26px; border:1px solid var(--line); text-align:center; background:radial-gradient(600px 220px at 50% 0, rgba(16,185,129,.25), transparent 70%), var(--card); }
footer { margin-top:70px; border-top:1px solid var(--line); padding:36px 0 44px; color:var(--mute); font-size:14.5px; }
footer .cols { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:26px; }
footer h4 { margin:0 0 10px; color:var(--ink); font-size:15px; }
footer a { display:block; text-decoration:none; color:var(--mute); padding:3px 0; } footer a:hover { color:var(--ink); }
.legal { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px; color:var(--dim); }
.draft { position:fixed; left:14px; bottom:14px; z-index:30; font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:10px; background:rgba(251,191,36,.14); color:var(--warn); border:1px solid rgba(251,191,36,.35); }
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:40; padding:12px 18px; border-radius:12px; background:#14251f; border:1px solid #2f5445; color:var(--ink); font-size:15px; transition:opacity .25s, transform .25s; }
.toast.on { opacity:1; transform:translate(-50%,0); }

/* text pages (privacy, terms, refunds, licences) */
.doc { max-width:780px; margin:0 auto; padding:54px 22px 30px; }
.doc h1 { font-size:clamp(30px,4vw,44px); margin:0 0 8px; }
.doc h2 { font-size:22px; margin:34px 0 8px; letter-spacing:-.01em; }
.doc p, .doc li { color:#c9d8d0; }
.doc .note { padding:14px 16px; border-radius:14px; border:1px solid rgba(251,191,36,.35); background:rgba(251,191,36,.08); color:#f3dca0; font-size:15.5px; }
.doc code { background:#14251f; padding:2px 6px; border-radius:6px; font-size:.92em; }
.doc .fill { background:rgba(251,191,36,.16); color:var(--warn); padding:1px 6px; border-radius:6px; font-weight:600; }

/* motion */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0ms); }
.reveal.in { opacity:1; transform:none; }
@keyframes blink { 50% { opacity:.3; } }
@keyframes run { to { left:100%; } }
@keyframes float { 50% { transform:translateY(-7px); } }
@keyframes dash { to { stroke-dashoffset:-36; } }
@keyframes pulse { 0% { r:6; opacity:.9; } 100% { r:22; opacity:0; } }
@keyframes pop { 0%, 12% { opacity:0; transform:translateY(8px) scale(.9); } 22%, 100% { opacity:1; transform:none; } }
@keyframes fill { from { transform:scaleX(.05); } to { transform:scaleX(1); } }
@keyframes spin { to { transform:rotate(360deg); } }
.floaty { animation:float 6s ease-in-out infinite; }
.floaty.b { animation-delay:-3s; }
.dash { stroke-dasharray:4 14; animation:dash 1.4s linear infinite; }

@media (max-width:980px) {
  .hero .wrap { grid-template-columns:1fr; } .steps { grid-template-columns:1fr 1fr; row-gap:30px; } .grid3 { grid-template-columns:1fr 1fr; } .plans { grid-template-columns:1fr; max-width:460px; }
  .nav nav { display:none; } .menu { display:inline-flex; margin-left:auto; }
  .nav.open nav { display:grid; position:absolute; top:68px; left:0; right:0; padding:14px 22px 20px; gap:14px; background:rgba(7,13,11,.97); border-bottom:1px solid var(--line); }
}
@media (max-width:680px) {
  body { font-size:16px; } section { padding:54px 0; } .hero { padding-top:38px; }
  .steps, .grid3, .grid2, .lists, .plans, footer .cols { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr; } .wire { width:2px; height:34px; margin:0 auto; background:linear-gradient(transparent,var(--c1),transparent); } .wire::after { display:none; }
  .nav .cta-top { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}