/* ============================================================= tokens */
:root{
  --bg0:#04091C; --bg1:#102658;
  --panel0:#0E224E; --panel1:#050C24;
  --accent:#1E9BFF; --accent-soft:#5FC4FF; --accent-hover:#3AACFF;
  --fg:#EAF4FF; --fg-dim:#8FA9CC;
  --ok:#3DDC97; --danger:#FF6B7A; --warn:#FFD166;
  --track:#122244;
  --border:rgba(95,196,255,.18);
  --glow:0 0 22px rgba(30,155,255,.55);
  --glow-soft:0 0 28px rgba(95,196,255,.22);
  --halo:radial-gradient(1100px 520px at 50% -8%, rgba(95,196,255,.16), transparent 62%);
  --app:var(--halo), linear-gradient(180deg,var(--bg1),var(--bg0));
  --panel:linear-gradient(180deg,var(--panel0),var(--panel1));
  --card:rgba(14,34,78,.55);
  --card-hover:rgba(14,34,78,.85);
  --radius:16px;
  --tok-kw:#5FC4FF; --tok-str:#3DDC97; --tok-com:#5B7AA8; --tok-num:#FFD166;
  --tok-fn:#9ECBFF; --tok-type:#FF9F6B; --tok-op:#8FA9CC; --tok-var:#EAF4FF;
  --header-h:64px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
:root[data-theme="bright"]{
  --bg0:#EFF4FB; --bg1:#E3EDFB;
  --panel0:#FFFFFF; --panel1:#EAF1FB;
  --accent:#0B7DE0; --accent-soft:#1787E8; --accent-hover:#0A6CC4;
  --fg:#0B1730; --fg-dim:#4A5E7A;
  --ok:#0FA968; --danger:#E0445C; --warn:#C88A00;
  --track:#DCE6F2;
  --border:rgba(11,125,224,.16);
  --glow:0 0 22px rgba(11,125,224,.28);
  --glow-soft:0 0 26px rgba(23,135,232,.18);
  --halo:radial-gradient(1100px 520px at 50% -8%, rgba(23,135,232,.14), transparent 62%);
  --app:var(--halo), linear-gradient(180deg,var(--bg1),var(--bg0));
  --panel:linear-gradient(180deg,var(--panel0),var(--panel1));
  --card:rgba(255,255,255,.7);
  --card-hover:rgba(255,255,255,.95);
  --tok-kw:#0B6BC0; --tok-str:#0E9E63; --tok-com:#7C8CA3; --tok-num:#B07A00;
  --tok-fn:#2F6FB0; --tok-type:#C0551C; --tok-op:#4A5E7A; --tok-var:#0B1730;
}

/* ============================================================= reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--fg); background:var(--bg0);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:4px}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.kicker{font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); margin:0 0 14px}
h1,h2,h3{font-weight:600; letter-spacing:-.01em; line-height:1.12; margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.1rem); font-weight:700; letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.lead{color:var(--fg-dim); font-size:clamp(1rem,1.6vw,1.15rem); max-width:64ch}

/* ============================================================= header */
header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg0) 72%, transparent); border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:22px; height:var(--header-h)}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:.02em}
.brand .logo{width:34px; height:34px; border-radius:9px; flex:none; background:linear-gradient(180deg,var(--bg1),var(--bg0)); border:1px solid var(--border); box-shadow:var(--glow-soft); display:grid; place-items:center; color:var(--accent-soft)}
.brand .logo svg{width:20px; height:20px}
.nav-links{display:flex; gap:4px; margin-left:6px}
.nav-links a{padding:8px 13px; border-radius:9px; color:var(--fg-dim); font-size:.94rem; transition:.18s}
.nav-links a:hover{color:var(--fg); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.spacer{flex:1}
.hdr-actions{display:flex; align-items:center; gap:10px}

.icon-btn{width:40px; height:40px; border-radius:11px; cursor:pointer; border:1px solid var(--border); background:color-mix(in srgb, var(--panel0) 55%, transparent); color:var(--fg); display:grid; place-items:center; transition:.18s}
.icon-btn:hover{background:var(--card-hover); box-shadow:var(--glow-soft)}
.icon-btn svg{width:19px; height:19px}

.lang{position:relative}
.lang-btn{height:40px; border-radius:11px; cursor:pointer; border:1px solid var(--border); background:color-mix(in srgb, var(--panel0) 55%, transparent); color:var(--fg); display:flex; align-items:center; gap:8px; padding:0 13px; font-family:var(--font); font-size:.9rem; transition:.18s}
.lang-btn:hover{background:var(--card-hover)}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:210px; padding:6px; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.4); display:none; z-index:60}
.lang.open .lang-menu{display:block; animation:pop .16s ease}
@keyframes pop{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.lang-item{width:100%; text-align:left; padding:9px 12px; border-radius:9px; cursor:pointer; background:none; border:0; color:var(--fg); font-family:var(--font); font-size:.92rem; display:flex; justify-content:space-between; gap:12px; transition:.15s}
.lang-item:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.lang-item .native{color:var(--fg-dim); font-size:.85rem}
.lang-item.active{color:var(--accent-soft)}
.lang-item.active::before{content:"✓ "}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px; font-family:var(--font); font-weight:600; font-size:.95rem; cursor:pointer; border:1px solid transparent; transition:.18s; letter-spacing:.01em}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--glow)}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
.btn-lg{padding:14px 26px; font-size:1.02rem}

/* ============================================================= sections */
section{padding:84px 0}
.sec-head{margin-bottom:48px; max-width:760px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}

/* page hero (sub-pages) */
.page-hero{padding:64px 0 20px}
.page-hero .lead{margin:16px 0 0}

/* features */
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat{position:relative; padding:26px 26px 24px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); transition:.22s}
.feat:hover{background:var(--card-hover); transform:translateY(-3px); box-shadow:var(--glow-soft); border-color:var(--accent-soft)}
.feat .n{font-family:var(--mono); font-size:.78rem; color:var(--accent-soft); display:block; margin-bottom:12px}
.feat h3{font-size:1.12rem; margin-bottom:10px}
.feat p{margin:0; color:var(--fg-dim); font-size:.95rem}
.feat .ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-soft); margin-bottom:16px}
.feat .ic svg{width:20px; height:20px}

/* screenshots */
.shots{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.shot{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--panel); box-shadow:0 24px 60px rgba(0,0,0,.35); transition:.25s}
:root[data-theme="bright"] .shot{box-shadow:0 24px 60px rgba(23,80,140,.15)}
.shot:hover{transform:translateY(-4px) scale(1.01); border-color:var(--accent-soft)}
.shot img{width:100%; height:auto}
.shot figcaption{padding:14px 16px; font-size:.86rem; color:var(--fg-dim); border-top:1px solid var(--border)}
.shot.wide{grid-column:1 / -1}

/* downloads */
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.dl{padding:30px 28px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); transition:.22s; text-align:left; display:flex; flex-direction:column; gap:12px}
.dl:hover{background:var(--card-hover); border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
.dl .os{display:flex; align-items:center; gap:12px; font-weight:600; font-size:1.15rem}
.dl .os svg{width:26px; height:26px; color:var(--accent-soft)}
.dl .items{color:var(--fg-dim); font-size:.9rem; margin:0}
.dl .btn{margin-top:auto}

/* pricing */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:820px; margin:0 auto}
.price{padding:34px 32px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); position:relative; transition:.22s}
.price:hover{border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
.price.hot{border-color:var(--accent); box-shadow:var(--glow-soft)}
.price .flag{position:absolute; top:-13px; left:26px; padding:5px 14px; border-radius:999px; background:var(--accent); color:#fff; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em}
.price h3{font-size:1.2rem; margin-bottom:6px}
.price .amt{font-size:2.4rem; font-weight:700; letter-spacing:-.02em; margin:10px 0 4px}
.price .amt small{font-size:1rem; font-weight:400; color:var(--fg-dim)}
.price p{color:var(--fg-dim); font-size:.95rem; margin:0 0 22px}
.price .btn{width:100%}

/* ============================================================= forms (buy / contact) */
.panel{max-width:640px; margin:0 auto; padding:36px 38px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card)}
.panel.narrow{max-width:520px}
.field{display:block; margin-bottom:18px}
.field > span{display:block; font-size:.86rem; color:var(--fg-dim); margin-bottom:7px; font-weight:500}
.input, textarea.input, select.input{
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel0) 60%, transparent); color:var(--fg);
  font-family:var(--font); font-size:.96rem; transition:.16s;
}
.input:focus{outline:none; border-color:var(--accent-soft); box-shadow:var(--glow-soft)}
textarea.input{resize:vertical; min-height:120px}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px}
.seg-opt{padding:18px; border-radius:13px; border:1px solid var(--border); background:var(--card); cursor:pointer; transition:.16s; text-align:left}
.seg-opt:hover{border-color:var(--accent-soft)}
.seg-opt.sel{border-color:var(--accent); box-shadow:var(--glow-soft); background:var(--card-hover)}
.seg-opt b{display:block; font-size:1.05rem}
.seg-opt .p{color:var(--accent-soft); font-size:1.15rem; font-weight:700; margin:4px 0}
.seg-opt small{color:var(--fg-dim)}
.summary{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-radius:12px; background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid var(--border); margin:20px 0}
.summary .amt{font-size:1.6rem; font-weight:700}
.note{font-size:.85rem; color:var(--fg-dim); margin-top:16px}
.mail{color:var(--accent-soft); font-family:var(--mono)}
.ok-banner{padding:16px 18px; border-radius:12px; border:1px solid var(--ok); color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent); font-weight:500; margin-bottom:18px; display:none}

/* ============================================================= footer */
footer{border-top:1px solid var(--border); padding:48px 0 56px; color:var(--fg-dim); font-size:.9rem}
.foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.foot .brand{color:var(--fg)}
.foot small{font-size:.8rem}
.foot .col h4{font-size:.85rem; color:var(--fg); margin:0 0 12px; letter-spacing:.02em}
.foot .col a{display:block; padding:4px 0; color:var(--fg-dim); font-size:.9rem}
.foot .col a:hover{color:var(--accent-soft)}

/* ============================================================= reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .feat:hover,.shot:hover,.dl:hover,.price:hover{transform:none}
}

/* ============================================================= responsive */
@media (max-width:960px){
  .feats{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr}
  .dl-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:560px){
  .feats{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  .btn-lg{width:100%}
}