:root {
    --ink:#2c3338; --muted:#5b6770; --bg:#ffffff; --soft:#f4f8fa; --line:#e2e8ec;
    --blue:#19A3CF; --blue-dark:#0f7ea3; --blue-tint:#e5f4fa; --charcoal:#444444;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif; }
  .wrap { max-width:1020px; margin:0 auto; padding:0 1.25rem; }

  /* header */
  .top { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
  .top .wrap { display:flex; align-items:center; gap:1.5rem; height:64px; }
  .top img { height:34px; width:auto; display:block; }
  .top nav { margin-left:auto; display:flex; gap:1.3rem; align-items:center; }
  .top nav a { color:var(--charcoal); text-decoration:none; font-size:.92rem; font-weight:600; }
  .top nav a:hover { color:var(--blue-dark); }
  .top nav a.btn { background:var(--blue); color:#fff; padding:.45rem 1rem; border-radius:7px; }
  @media (max-width:720px) { .top nav a.hide-m { display:none; } }

  /* hero */
  .hero { background:linear-gradient(180deg, var(--soft), #fff); border-bottom:1px solid var(--line); }
  .hero .wrap { display:grid; grid-template-columns: 1.2fr .9fr; gap:2.5rem; align-items:center; padding-top:4rem; padding-bottom:4rem; }
  @media (max-width:860px) { .hero .wrap { grid-template-columns:1fr; } }
  .kicker { color:var(--blue-dark); font-weight:700; text-transform:uppercase; letter-spacing:.09em; font-size:.78rem; margin:0 0 .6rem; }
  h1 { font-size:clamp(1.9rem, 4.2vw, 2.8rem); line-height:1.13; margin:0 0 1rem; letter-spacing:-.015em; color:var(--charcoal); }
  .lead { font-size:1.12rem; color:var(--muted); margin:0 0 1.6rem; max-width:58ch; }
  .cta { display:inline-block; background:var(--blue); color:#fff; text-decoration:none; font-weight:650; padding:.75rem 1.4rem; border-radius:8px; margin:0 .7rem .6rem 0; }
  .cta:hover { background:var(--blue-dark); }
  .cta.ghost { background:transparent; color:var(--blue-dark); border:1.5px solid var(--blue); }

  .term { background:#20282e; border-radius:12px; box-shadow:0 14px 34px rgba(32,40,46,.18); overflow:hidden; }
  .term .bar { display:flex; gap:6px; padding:10px 14px; background:#2a343b; }
  .term .bar span { width:11px; height:11px; border-radius:50%; background:#4a565e; }
  .term pre { margin:0; padding:1.1rem 1.25rem 1.3rem; color:#d7e6ee; font:13.5px/1.75 Consolas, monospace; overflow-x:auto; }
  .term .c { color:#6f8694; } .term .b { color:#5ec8ea; } .term .g { color:#8fd6a0; }

  /* sections */
  section { padding:3.4rem 0 0; }
  h2 { font-size:1.55rem; color:var(--charcoal); letter-spacing:-.012em; margin:0 0 .4rem; }
  .sect-sub { color:var(--muted); margin:0 0 1.6rem; max-width:70ch; }
  .explain p { max-width:76ch; margin:.8rem 0; }
  .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
  .card { background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:10px; padding:1.2rem 1.3rem; }
  .card h3 { margin:.1rem 0 .5rem; font-size:1.02rem; color:var(--charcoal); }
  .card p { margin:0; color:var(--muted); font-size:.94rem; }

  .who { background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:3rem 0 3.2rem; margin-top:3.4rem; }
  .who .cards .card { border-top-color:var(--charcoal); }

  ol.steps { counter-reset:s; list-style:none; padding:0; display:grid; gap:.8rem; max-width:820px; }
  ol.steps li { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem 1rem 3.4rem; position:relative; }
  ol.steps li::before { counter-increment:s; content:counter(s); position:absolute; left:1rem; top:1rem; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--blue-tint); color:var(--blue-dark); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.92rem; }

  .trust { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
  .trust div { border-left:3px solid var(--blue); padding:.2rem 0 .2rem 1rem; color:var(--muted); font-size:.94rem; }
  .trust b { color:var(--ink); display:block; margin-bottom:.15rem; }

  details { background:#fff; border:1px solid var(--line); border-radius:8px; padding:.75rem 1.05rem; margin:.5rem 0; max-width:820px; }
  summary { font-weight:650; cursor:pointer; color:var(--charcoal); }
  details p { color:var(--muted); }

  footer { border-top:1px solid var(--line); margin-top:3.6rem; padding:2rem 0 2.6rem; background:var(--soft); }
  footer .wrap { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; }
  footer img { height:26px; opacity:.9; }
  footer p { margin:0; color:var(--muted); font-size:.86rem; }
  footer a { color:var(--blue-dark); }
  code { background:var(--blue-tint); border-radius:4px; padding:.05em .35em; font-size:.9em; }

/* sub-pages */
.crumb { color:var(--muted); font-size:.85rem; margin:2rem 0 0; }
.crumb a { color:var(--blue-dark); text-decoration:none; }
.page h1 { font-size:clamp(1.6rem,3.5vw,2.2rem); margin-top:.4rem; }
table.plain { border-collapse:collapse; width:100%; font-size:.92rem; margin:.8rem 0 1.4rem; }
table.plain th, table.plain td { border:1px solid var(--line); padding:.5rem .8rem; text-align:left; vertical-align:top; }
table.plain th { background:var(--blue-tint); color:var(--charcoal); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
pre.block { background:#20282e; color:#d7e6ee; border-radius:10px; padding:1rem 1.2rem; overflow-x:auto; font:13.5px/1.7 Consolas, monospace; }
pre.block .c { color:#6f8694; }
.contact { margin-top:.4rem; }
.contact b { color:var(--ink); }