:root{
      --bg:#f5f7fb;
      --card:#ffffff;
      --text:#142033;
      --muted:#5b6b82;
      --border:#e7edf6;
      --brand:#0b5cff;
      --brand2:#1d4ed8;
      --accent:#06b6d4;
      --shadow: 0 12px 30px rgba(12, 24, 44, .08);
      --radius: 18px;
      --max: 1120px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background: radial-gradient(1200px 800px at 10% 0%, rgba(11,92,255,.10), transparent 55%),
                  radial-gradient(1000px 650px at 90% 10%, rgba(6,182,212,.10), transparent 55%),
                  var(--bg);
      line-height:1.7;
    }
    a{color:var(--brand); text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{max-width:var(--max); margin:0 auto; padding:28px 18px 64px;}
    header{
      background: linear-gradient(135deg, rgba(11,92,255,.12), rgba(6,182,212,.10));
      border:1px solid var(--border);
      border-radius: calc(var(--radius) + 6px);
      padding: 26px 22px;
      box-shadow: var(--shadow);
    }
    .kicker{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:6px 12px;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--border);
      color:var(--muted);
      font-size:13px;
      font-weight:600;
    }
    .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent))}
    h1{
      margin:14px 0 8px;
      font-size: clamp(26px, 3.2vw, 40px);
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .sub{
      margin:0;
      color:var(--muted);
      font-size: 16px;
      max-width: 78ch;
    }
    .grid{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap:18px;
      margin-top:18px;
    }
    @media (max-width: 900px){
      .grid{grid-template-columns:1fr}
    }
    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .content{padding:20px 20px 18px}
    h2{
      font-size: 20px;
      margin: 0 0 8px;
      letter-spacing:-.01em;
    }
    h3{
      font-size: 16px;
      margin: 18px 0 6px;
    }
    p{margin: 10px 0}
    ul{margin:10px 0 0; padding-left: 18px}
    li{margin:6px 0; color:var(--text)}
    .muted{color:var(--muted)}
    .callout{
      background: linear-gradient(135deg, rgba(11,92,255,.08), rgba(6,182,212,.06));
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color:#fff;
      font-weight: 800;
      letter-spacing:.01em;
      border:0;
      cursor:pointer;
      text-decoration:none !important;
      width:100%;
      text-align:center;
      box-shadow: 0 10px 22px rgba(11,92,255,.22);
    }
    .btn:hover{filter:brightness(1.03)}
    .aside{
      padding: 18px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .pill{
      display:flex; gap:10px; align-items:flex-start;
      padding: 12px;
      border-radius: 14px;
      border:1px solid var(--border);
      background:#fff;
    }
    .icon{
      width:34px; height:34px; border-radius: 12px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(11,92,255,.14), rgba(6,182,212,.10));
      border:1px solid rgba(11,92,255,.12);
      flex:0 0 auto;
    }
    .icon svg{width:18px;height:18px}
    .pill b{display:block}
    .media{
      padding:14px;
      border-top:1px solid var(--border);
      background: linear-gradient(180deg, #ffffff, #fbfdff);
    }

    figure{margin:0}
    .img-frame{
      border:1px solid var(--border);
      border-radius: 16px;
      overflow:hidden;
      background:#eef3fb;
      box-shadow: 0 10px 22px rgba(12,24,44,.06);
    }
    .img-frame img{
      display:block;
      width:100%;
      height:auto;
    }
    .figcap{
      padding:10px 12px;
      font-size:13px;
      color:var(--muted);
      border-top:1px solid var(--border);
      background:#fff;
    }
    .img-note{
      font-size:12px;
      color:var(--muted);
      margin-top:8px;
    }

    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
    }
    @media (max-width: 780px){
      .two-col{grid-template-columns:1fr}
    }

    .faq{padding: 18px 20px 6px}
    details{
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 12px 12px;
      background:#fff;
      margin: 10px 0 12px;
    }
    summary{
      cursor:pointer;
      font-weight:800;
      list-style:none;
    }
    summary::-webkit-details-marker{display:none}
    details p{margin:10px 0 0; color:var(--muted)}
    footer{
      margin-top:18px;
      color:var(--muted);
      font-size:13px;
      text-align:center;
      padding: 18px 8px;
    }
    .divider{height:1px;background:var(--border); margin: 14px 0}