/* VibeVox — About page, Apple-style, light/dark synced with the landing (lpTheme). */
:root{
  --color-apple-blue:#0071e3; --color-link-blue:#0066cc; --color-signal-blue:#2997ff;
  --canvas:#f5f5f7; --surface:#fff; --ice:#f4f8fb; --ink:#1d1d1f; --ink-2:#474747; --ash:#707070;
  --hairline:#d2d2d7; --pebble:#e2e2e5; --nav-bg:rgba(255,255,255,.8);
  --font-text:'SF Pro Text','Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:'SF Pro Display','Inter',ui-sans-serif,system-ui,sans-serif;
  --r:8px; --rpill:980px;
}
html[data-theme="dark"]{
  --canvas:#000; --surface:#1d1d1f; --ice:#16181d; --ink:#f5f5f7; --ink-2:#a1a1a6; --ash:#86868b;
  --hairline:#424245; --pebble:#3a3a3c; --nav-bg:rgba(22,22,23,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-text);
  font-size:17px;letter-spacing:-.272px;line-height:1.47;-webkit-font-smoothing:antialiased}
a{color:var(--color-link-blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px) saturate(1.8);
  background:var(--nav-bg);border-bottom:1px solid var(--hairline)}
.nav-in{max-width:900px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:22px;height:22px}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-right a.back{font-size:12px;color:var(--color-link-blue)}
.lang-sel,.theme-btn{border:1px solid var(--hairline);color:var(--ink);cursor:pointer;background:transparent}
.lang-sel{appearance:none;border-radius:var(--rpill);font-family:var(--font-text);font-size:12px;padding:5px 22px 5px 12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M1 1l3 3 3-3' stroke='%23888' fill='none' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center}
.theme-btn{border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none}
.theme-btn svg{width:15px;height:15px;stroke:currentColor}
.theme-btn .ic-moon{display:none}
html[data-theme="dark"] .theme-btn .ic-sun{display:none}
html[data-theme="dark"] .theme-btn .ic-moon{display:block}

/* hero */
.hero{text-align:center;padding:64px 0 8px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:-.264px;color:var(--color-signal-blue);text-transform:none}
.hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5.4vw,52px);
  line-height:1.08;letter-spacing:.4px;margin:12px auto 0;max-width:14ch}
.hero .lead{font-size:clamp(19px,2.2vw,24px);font-weight:300;letter-spacing:-.19px;line-height:1.3;
  color:var(--ink);margin:20px auto 0;max-width:660px}

/* sections */
main{padding-bottom:40px}
section.blk{max-width:720px;margin:0 auto;padding:34px 20px 0}
section.blk h2{font-family:var(--font-text);font-weight:600;font-size:22px;letter-spacing:-.3px;
  margin-bottom:14px;padding-top:22px;border-top:1px solid var(--hairline)}
section.blk p{margin-bottom:12px;color:var(--ink-2)}
section.blk b{color:var(--ink)}
section.blk ul{list-style:none;margin:0}
section.blk li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--ink-2)}
section.blk li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--color-signal-blue)}

/* stats band */
.stats-wrap{background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-top:44px;padding:44px 0}
html[data-theme="dark"] .stats-wrap{background:#0c0c0e}
.stats-title{text-align:center;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.3px;margin-bottom:28px}
.statgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;text-align:center;max-width:820px;margin:0 auto;padding:0 20px}
.statgrid .v{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.44px;color:var(--ink)}
.statgrid .l{font-size:12px;letter-spacing:-.264px;color:var(--ash);margin-top:6px}

/* cta */
.cta{text-align:center;padding:60px 20px 20px}
.cta h2{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,38px);letter-spacing:.2px;margin-bottom:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:400;font-size:17px;letter-spacing:-.272px;
  padding:13px 28px;border-radius:var(--rpill);cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--color-apple-blue);color:#f4f8fb}
.btn-primary:hover{background:#0077ed;text-decoration:none}

/* footer */
footer{border-top:1px solid var(--hairline);padding:26px 20px 44px;margin-top:40px}
footer .in{max-width:820px;margin:0 auto;font-size:12px;color:var(--ash);display:flex;flex-direction:column;gap:8px}
footer a{color:var(--ash)}
footer a:hover{color:var(--ink)}

@media(max-width:640px){.statgrid{grid-template-columns:repeat(3,1fr);gap:26px}}