.wrap{ max-width:1100px; margin:0 auto; padding:28px 16px 90px; }

    /* Hero */
    .hero{
      border-radius: 26px;
      padding: 34px 22px;
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(1100px 460px at 55% -30%, rgba(99,102,241,.22), transparent 60%),
        radial-gradient(900px 420px at 15% 10%, rgba(236,72,153,.12), transparent 55%),
        linear-gradient(180deg, #ffffff, #f6f7fb);
      box-shadow: 0 30px 70px rgba(2,6,23,.08);
      position:relative;
      overflow:hidden;
    }
    .crumbs{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
      color:#64748b;
      font-size:13px;
      margin-bottom:10px;
    }
    .crumbs a{ text-decoration:none; opacity:.9; }
    .crumbs a:hover{ text-decoration:underline; }

    .kicker{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(99,102,241,.18);
      background:rgba(99,102,241,.08);
      color:#3730a3;
      font-weight:900;
      font-size:12px;
      letter-spacing:.3px;
      width:fit-content;
    }
    .dot{
      width:8px;height:8px;border-radius:99px;
      background: linear-gradient(135deg,#6366F1,#4F46F5);
    }

    h1{
      margin: 12px 0 8px;
      font-size: 38px;
      line-height: 1.1;
      letter-spacing: -0.6px;
    }
    .sub{
      margin:0;
      color:#475569;
      line-height:1.75;
      font-size: 15px;
      max-width: 85ch;
    }
    .meta{
      margin-top: 14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      color:#64748b;
      font-size: 13px;
    }
    .meta span{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.75);
    }

    /* Layout */
    .grid{
      margin-top: 16px;
      display:grid;
      grid-template-columns: 0.95fr 2.05fr;
      gap: 14px;
      align-items:start;
    }

    .card{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(15,23,42,.10);
      border-radius: 22px;
      padding: 16px;
      box-shadow: 0 18px 40px rgba(2,6,23,.06);
      position: relative;
      overflow:hidden;
    }
    .card:before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(600px 180px at 20% 0%, rgba(99,102,241,.12), transparent 55%);
      opacity:.55;
      pointer-events:none;
    }

    /* TOC */
    .toc{
      position: sticky;
      top: 14px;
    }
    .toc h2{
      margin:0 0 10px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .35px;
      color:#0f172a;
      position:relative;
    }
    .toc a{
      display:block;
      text-decoration:none;
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid transparent;
      color:#0f172a;
      font-weight: 900;
      font-size: 13px;
      position:relative;
      transition:.2s ease;
    }
    .toc a:hover{
      background: rgba(99,102,241,.08);
      border-color: rgba(99,102,241,.18);
      transform: translateY(-1px);
    }

    /* Content */
    .content h2{
      margin: 0 0 8px;
      font-size: 20px;
      letter-spacing:-.2px;
      position:relative;
    }
    .content h3{
      margin: 14px 0 8px;
      font-size: 16px;
      position:relative;
    }
    .content p{
      margin: 0 0 12px;
      color:#334155;
      line-height:1.85;
      font-size: 14px;
      position:relative;
    }
    .content ul{
      margin: 0 0 12px 18px;
      color:#334155;
      line-height:1.85;
      font-size: 14px;
      position:relative;
    }
    .content li{ margin: 6px 0; }

    .note{
      border-radius: 18px;
      border: 1px dashed rgba(15,23,42,.14);
      background: rgba(255,255,255,.75);
      padding: 12px 12px;
      color:#475569;
      font-size: 13px;
      line-height:1.7;
      position:relative;
    }

    /* Inline chips */
    code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(15,23,42,.04);
    }

    /* Contact box */
    .contact{
      margin-top: 14px;
      border-radius: 22px;
      padding: 14px;
      background:
        radial-gradient(900px 420px at 10% 0%, rgba(99,102,241,.18), transparent 60%),
        radial-gradient(900px 420px at 90% 10%, rgba(236,72,153,.14), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92));
      border: 1px solid rgba(15,23,42,.10);
      box-shadow: 0 18px 40px rgba(2,6,23,.06);
      position:relative;
    }
    .contact strong{ display:block; margin-bottom: 6px; }
    .contact a{ font-weight: 900; text-decoration:none; }
    .contact a:hover{ text-decoration: underline; }

    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      .toc{ position:relative; top:auto; }
      h1{ font-size: 30px; }
    }

    /* Print-friendly */
    @media print{
      body{ background:#fff; }
      .hero, .card, .contact{ box-shadow:none; }
      .toc{ display:none; }
      .wrap{ padding: 0; }
      a{ text-decoration:none; }
    }