:root{
    --ground:#f5f7fa; --card:#ffffff; --border:#d7dde5; --border-strong:#c4ccd7;
    --ink:#131a24; --body:#374253; --muted:#5b6675; --faint:#8a94a3;
    --primary:#0b5ed7; --primary-tint:#eef4fe; --primary-deep:#0a4fb5;
    --shadow:0 1px 2px rgba(16,24,40,.05);
    --shadow-card:0 1px 3px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --maxw:1080px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--sans);color:var(--body);background:var(--ground);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:var(--primary);text-decoration:none}
  a:hover{text-decoration:underline}
  h1,h2,h3{color:var(--ink);line-height:1.16;letter-spacing:-.02em;text-wrap:balance;margin:0}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;padding:.66em 1.15em;border-radius:10px;border:1px solid transparent;transition:background .2s,border-color .2s}
  .btn:hover{text-decoration:none}
  .btn.primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px -6px rgba(11,94,215,.5)}
  .btn.primary:hover{background:var(--primary-deep)}
  .btn.ghost{background:#fff;color:var(--ink);border-color:var(--border-strong)}
  .btn.ghost:hover{border-color:var(--faint)}
  .cs-band{background:#099;color:#fff;border-top:1px solid #077;border-bottom:1px solid #077}
  .cs-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
  .cs-band img{height:27px;width:auto;display:block}
  .cs-band .cs-text{font-size:1.08rem;font-weight:600;line-height:1.3;flex:1 1 320px;margin:0}
  .cs-band .cs-text span{display:block;font-weight:400;font-size:.92rem;opacity:.92;margin-top:1px}
  .cs-band .btn{background:#fff;color:#044;border-color:#fff;font-size:.95rem;padding:.6em 1.1em}
  .cs-band .btn:hover{background:#e8f5f5}
  .btn svg{width:17px;height:17px}

  header.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
  .nav .wrap{display:flex;align-items:center;gap:18px;height:60px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:1rem}
  .brand:hover{text-decoration:none}
  .brand .mark{width:24px;height:24px;color:var(--ink)}
  .nav nav{margin-left:auto;display:flex;align-items:center;gap:24px}
  .nav nav a{color:var(--muted);font-weight:500;font-size:.94rem}
  .nav nav a:hover{color:var(--ink);text-decoration:none}

  section{padding:60px 0}
  .sec-head{max-width:660px;margin-bottom:30px}
  .sec-head h2{font-size:1.85rem;margin:.5rem 0 .6rem}
  .sec-head p{margin:0;font-size:1.02rem;color:var(--muted)}

  /* hero */
  .hero{padding:56px 0}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  .hero h1{font-size:2.7rem;margin:.6rem 0 1rem}
  .hero p.sub{font-size:1.1rem;color:var(--muted);margin:0 0 1.5rem;max-width:44ch}
  .hero .actions{display:flex;gap:12px;flex-wrap:wrap}
  .hero .photo{border-radius:16px;border:1px solid var(--border);box-shadow:0 24px 50px -26px rgba(16,24,40,.4);width:100%;object-fit:cover}
  @media(max-width:820px){ .hero .wrap{grid-template-columns:1fr;gap:24px} .hero h1{font-size:2.15rem} .hero .photo{grid-row:2} }

  .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media(max-width:860px){.cards{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:440px){.cards{grid-template-columns:1fr}}
  .card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-card);padding:18px 16px}
  .card .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--primary-tint);color:var(--primary);margin-bottom:12px}
  .card .ic svg{width:20px;height:20px}
  .card h3{font-size:1rem;margin-bottom:5px}
  .card p{margin:0;font-size:.88rem;color:var(--muted)}

  .apps{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:800px){.gallery{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.gallery{grid-template-columns:1fr}}
  .tile{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}
  .tile img{aspect-ratio:4/3;object-fit:cover;width:100%;background:#eef1f6}
  .tile .body{padding:14px 15px 16px}
  .tile h3{font-size:1.02rem;display:flex;align-items:center;gap:8px}
  .tile .wip{font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);background:#eef1f6;border:1px solid var(--border);border-radius:999px;padding:1px 7px}
  .tile p{margin:5px 0 0;font-size:.88rem;color:var(--muted)}

  /* specs */
  .specwrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-card)}
  table.specs{border-collapse:collapse;width:100%;font-size:.94rem}
  table.specs th,table.specs td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top}
  table.specs tr:last-child th,table.specs tr:last-child td{border-bottom:0}
  table.specs th{width:34%;color:var(--ink);font-weight:600;background:#fbfcfd;white-space:nowrap}
  table.specs td{color:var(--body)}

  /* build */
  .build{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .build .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
  @media(max-width:820px){.build .split{grid-template-columns:1fr;gap:26px}}
  .build .assembly{border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow-card);width:100%}
  .steps{counter-reset:step;display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
  .steps li{position:relative;padding-left:44px}
  .steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--primary-tint);color:var(--primary);font-weight:700;display:grid;place-items:center;border:1px solid #cfe0fb}
  .steps h3{font-size:1rem;margin-bottom:3px}
  .steps p{margin:0;font-size:.92rem;color:var(--muted)}
  .steps code{font-family:var(--mono);font-size:.85em;background:#eef1f6;border:1px solid var(--border);border-radius:5px;padding:1px 5px}
  .build .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
  .lic-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
  .tag{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--primary);background:var(--primary-tint);border:1px solid #cfe0fb;border-radius:6px;padding:3px 9px}

  /* companion app */
  .app .split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  @media(max-width:820px){.app .split{grid-template-columns:1fr;gap:26px}}
  .app .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .app .appnote{margin:16px 0 0;font-size:.86rem;color:var(--faint)}
  .app .demowrap{display:flex;justify-content:center}
  .app .demoframe{width:100%;max-width:400px;aspect-ratio:400/840;border:0;background:transparent}
  .app .videocard{position:relative;display:block;margin:22px 0 0;border-radius:12px;overflow:hidden;
    border:1px solid var(--border-strong);box-shadow:var(--shadow-card);aspect-ratio:16/9;background:#0d1117}
  .app .videocard img{width:100%;height:100%;object-fit:cover;opacity:.94;transition:opacity .2s,transform .35s}
  .app .videocard:hover img{opacity:1;transform:scale(1.03)}
  .app .videocard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.4))}
  .app .videocard .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
    width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.4)}
  .app .videocard .play svg{width:24px;height:24px;margin-left:3px;color:var(--primary)}
  .app .videocard .vlabel{position:absolute;left:14px;bottom:11px;z-index:2;color:#fff;font-weight:600;font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.55)}

  /* press */
  .press{padding:44px 0;text-align:center}
  .press .plinks{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-weight:500;font-size:.95rem}

  footer{background:var(--ink);color:#c7cfdb;padding:40px 0 28px;font-size:.9rem}
  footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
  footer .brand{color:#fff}
  footer .brand .mark{color:#fff}
  footer a{color:#c7cfdb}
  footer a:hover{color:#fff}
  footer .legal{max-width:34ch;color:#95a0b1;line-height:1.55}
  footer .flinks{display:flex;gap:22px;flex-wrap:wrap}
  footer .base{border-top:1px solid #2a3546;margin-top:24px;padding-top:16px;color:#7a8698;font-size:.82rem}