:root{
  --accent:#0088FF;--warm:#FFB000;
  --bg:#fff;--bg-alt:#f5f7fa;--card:#fff;--text:#1d1d1f;--muted:#5f6670;--line:#e3e7ec;
  --link:#0071e3;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1116;--bg-alt:#151a21;--card:#1a2029;--text:#f2f4f7;--muted:#a1a9b5;--line:#2a323d;--link:#4da6ff}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--link)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0}
ul{padding:0;margin:0;list-style:none}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:64px 24px;
  background:
    linear-gradient(180deg,rgba(6,16,30,.38),rgba(6,16,30,.62)),
    url("hero.jpg") center/cover no-repeat,
    linear-gradient(180deg,#4aa8ff 0%,#8fd0f0 45%,#5fae7c 80%,#2f7a52 100%);}
.hero-inner{max-width:640px}
.app-icon{width:128px;height:128px;border-radius:22%;box-shadow:0 12px 36px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2);margin-bottom:28px}
.hero h1{font-size:clamp(2.6rem,8vw,4.25rem);font-weight:700;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.tagline{font-size:clamp(1.2rem,3.4vw,1.6rem);font-weight:500;margin:16px 0 0;line-height:1.35}
.lead{font-size:1.1rem;margin:20px auto 36px;max-width:34em;opacity:.92}
.btn{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;text-decoration:none;font-weight:600;font-size:1.05rem;padding:15px 30px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--warm);outline-offset:3px}
.btn svg{width:22px;height:22px;flex:none}

/* screenshots */
.shots{padding:96px 0 32px;background:var(--bg)}
.shots ul{display:flex;gap:28px;justify-content:center;max-width:1100px;margin:0 auto;padding:0 24px}
.shots li{flex:1 1 0;max-width:300px}
.shots img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.18))}

/* features */
.features{max-width:1000px;margin:0 auto;padding:80px 24px 24px}
.features h2{font-size:1.9rem;text-align:center;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px}
.card p{margin:16px 0 0;font-weight:500}
.ico{display:inline-flex;width:46px;height:46px;border-radius:13px;align-items:center;justify-content:center;background:rgba(0,136,255,.12);color:var(--accent)}
.ico svg{width:26px;height:26px}
.card:nth-child(3n) .ico{background:rgba(255,176,0,.18);color:#c98300}

/* article pages */
.site-header{max-width:720px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600}
.brand img{border-radius:22%}
.article{max-width:720px;margin:0 auto;padding:24px 24px 72px}
.article h1{font-size:clamp(1.9rem,6vw,2.5rem);margin-bottom:12px}
.article h2{font-size:1.6rem;margin:56px 0 12px;padding-top:36px;border-top:1px solid var(--line)}
.article h1+.meta+section>h2,.article h1+section>h2{border-top:0;padding-top:0;margin-top:32px}
.article h3{font-size:1.15rem;margin:30px 0 6px}
.article p{margin:0 0 14px}
.article ul{list-style:disc;padding-left:1.3em;margin:0 0 14px}
.article li{margin-bottom:8px}
.meta{color:var(--muted);font-size:.95rem}
.article section[id]{scroll-margin-top:16px}

/* language switch */
.lang{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;line-height:1.4;color:var(--muted)}
.lang a{color:var(--text);text-decoration:none}
.lang a:hover{text-decoration:underline}
.lang b{color:var(--text);font-weight:700}
.hero>.lang{position:absolute;top:18px;right:20px;color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.18)}
.hero>.lang a,.hero>.lang b{color:#fff}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--bg-alt);text-align:center;padding:36px 24px 44px;color:var(--muted);font-size:.92rem}
.site-footer p{margin:8px 0 0}
.site-footer a{color:var(--text);text-decoration:none}
.site-footer a:hover{text-decoration:underline}

@media (max-width:640px){
  body{font-size:16px}
  .shots{padding-top:56px}
  .shots ul{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 24px 24px;-webkit-overflow-scrolling:touch}
  .shots li{flex:0 0 68%;max-width:260px;scroll-snap-align:center}
  .features{padding-top:56px}
}

/* landing: single screen, mockup left of text */
body.landing{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body.landing .hero{flex:1;min-height:0;gap:clamp(32px,6vw,96px);text-align:left;padding:56px 32px 32px}
.hero-shot img{display:block;height:min(74vh,720px);height:min(74svh,720px);width:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
body.landing .hero-inner{max-width:520px}
body.landing .hero .app-icon{margin-left:0}
body.landing .site-footer{padding:16px 24px 18px}
@media (max-width:800px){
  body.landing .hero{flex-direction:column;text-align:center;padding:64px 20px 24px;gap:24px}
  .hero-shot img{height:32vh;height:32svh}
  body.landing .hero h1{font-size:2.4rem;margin:0}
  body.landing .hero .tagline{font-size:1.05rem;margin:6px 0}
  body.landing .hero .lead{font-size:.95rem;line-height:1.45;margin:0 0 16px}
  body.landing .site-footer{padding:10px 16px 12px;font-size:.8rem}
  body.landing .hero .app-icon{display:none}
}