:root{
      --bg:#070611;
      --card:#120825;
      --card2:#160a2b;
      --text:#f4f1ff;
      --muted:#c9c1ea;
      --line:rgba(255,255,255,.10);

      /* === Purple palette === */
      --accent:#8b5cf6;   /* primary purple */
      --accent2:#d8b4fe;  /* lavender */
      --accent3:#a78bfa;  /* mid purple */
      --gold:#c9a56a;

      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --radius: 18px;
      --max: 1140px;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 15% 0%, rgba(139,92,246,.28), rgba(0,0,0,0)),
        radial-gradient(900px 500px at 85% 10%, rgba(216,180,254,.18), rgba(0,0,0,0)),
        radial-gradient(800px 500px at 50% 100%, rgba(167,139,250,.14), rgba(0,0,0,0)),
        linear-gradient(180deg, #05030c 0%, #0a0620 55%, #070611 100%);
      line-height:1.75;
    }
    a{ color:var(--accent2); text-decoration:none; }
    a:hover{ text-decoration:underline; }

    /* Topbar */
    .topbar{
      position:sticky; top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(7,6,17,.68);
      border-bottom:1px solid var(--line);
    }
    .topbar .wrap{
      max-width:var(--max);
      margin:auto;
      padding:14px 20px;
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.2px;
    }
    .dot{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      box-shadow:0 0 0 4px rgba(139,92,246,.16);
    }
    .nav{ display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
    .nav a{ color:var(--muted); }
    .nav a:hover{ color:var(--text); text-decoration:none; }

    /* Hero */
    .hero{
      max-width:var(--max);
      margin:0 auto;
      padding:46px 20px 14px;
      display:grid;
      grid-template-columns: 1.12fr .88fr;
      gap:18px;
      align-items:stretch;
    }
    .heroCard{
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      background:linear-gradient(180deg, rgba(139,92,246,.18), rgba(18,10,43,.88));
      position:relative;
    }
    .heroCard .inner{ padding:34px 28px 26px; }
    .badgeRow{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
    .badge{
      font-size:12px;
      color:rgba(255,255,255,.88);
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.25);
      padding:6px 10px;
      border-radius:999px;
    }
    h1{
      font-family:"Playfair Display", serif;
      margin:8px 0 14px;
      font-size:40px;
      line-height:1.16;
      letter-spacing:.2px;
    }
    .sub{
      color:var(--muted);
      margin:0 0 18px;
      font-size:16px;
      max-width:62ch;
    }
    .ctaRow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.14);
      font-weight:800;
      font-size:14px;
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease;
    }
    .btn:hover{ transform:translateY(-1px); }
    .btnPrimary{
      background:linear-gradient(135deg,var(--accent), #5b21b6);
      color:#fff;
      border-color: rgba(139,92,246,.40);
      box-shadow:0 14px 40px rgba(139,92,246,.20);
    }
    .btnGhost{ background:rgba(0,0,0,.22); color:rgba(255,255,255,.92); }

    .sideCard{
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      background:linear-gradient(180deg, rgba(167,139,250,.12), rgba(18,10,43,.78));
      display:flex; flex-direction:column;
    }
    .imgWrap{
      aspect-ratio: 1200 / 800;
      background:#0a0820;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:center;
      padding:10px;
    }
    .sideCard img{
      width:100%; height:100%;
      object-fit:cover;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
    }
    .sideCard .meta{
      padding:16px 18px 18px;
      color:var(--muted);
      font-size:13px;
    }

    /* Layout */
    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:18px 20px 70px;
      display:grid;
      grid-template-columns: 1fr 340px;
      gap:18px;
      align-items:start;
    }
    .content{
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      background:rgba(18,10,43,.55);
      padding:26px 24px;
    }
    h2{
      font-family:"Playfair Display", serif;
      margin:28px 0 10px;
      font-size:26px;
      letter-spacing:.2px;
    }
    h3{
      margin:18px 0 8px;
      font-size:17px;
      letter-spacing:.2px;
    }
    p{ margin:10px 0; color:rgba(255,255,255,.92); }
    ul{ margin:10px 0 10px 18px; color:rgba(255,255,255,.92); }
    li{ margin:6px 0; }

    .callout{
      margin:16px 0 18px;
      padding:14px;
      border-radius:14px;
      border:1px solid rgba(139,92,246,.26);
      background: linear-gradient(135deg, rgba(139,92,246,.20), rgba(0,0,0,.15));
      color: rgba(255,255,255,.92);
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      margin:12px 0 6px;
    }
    .card{
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      background:rgba(0,0,0,.22);
    }
    .card b{ color:var(--accent2); }

    .steps{
      counter-reset: step;
      margin:14px 0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .step{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      border-radius:16px;
      padding:14px;
      position:relative;
      overflow:hidden;
    }
    .step:before{
      counter-increment: step;
      content: counter(step);
      position:absolute;
      top:12px; left:12px;
      width:32px; height:32px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-weight:900;
      color:#fff;
      background:linear-gradient(135deg,var(--accent), #5b21b6);
      box-shadow: 0 10px 30px rgba(139,92,246,.25);
    }
    .step .inner{ padding-left:46px; }
    .step .title{
      font-weight:900;
      margin:0 0 6px;
      letter-spacing:.2px;
      color:rgba(255,255,255,.94);
    }
    .step .mini{
      color:var(--muted);
      font-size:13px;
      margin:0 0 6px;
    }

    .imgBlock{
      margin:16px 0;
      border:1px solid var(--line);
      border-radius:16px;
      overflow:hidden;
      background:rgba(0,0,0,.20);
    }
    .imgBlock img{ width:100%; height:auto; display:block; }
    .imgBlock .cap{
      padding:10px 12px;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
    }

    /* Sidebar */
    .sidebar{
      position:sticky;
      top:72px;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .sideBox{
      border:1px solid var(--line);
      border-radius:16px;
      background: rgba(18,10,43,.55);
      box-shadow: var(--shadow);
      padding:16px;
    }
    .sideBox h3{
      margin:0 0 10px;
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:1px;
      color:rgba(255,255,255,.85);
    }
    .kpi{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .kpi .item{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.20);
      border-radius:14px;
      padding:10px;
      color:var(--muted);
      font-size:13px;
    }
    .kpi .item span{
      display:block;
      color:rgba(255,255,255,.92);
      font-weight:900;
      margin-top:2px;
      font-size:14px;
    }
    .toc a{
      display:block;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      margin:8px 0;
      background:rgba(0,0,0,.18);
      color:rgba(255,255,255,.88);
    }
    .toc a:hover{ border-color:rgba(139,92,246,.30); text-decoration:none; }

    details{
      border:1px solid rgba(255,255,255,.10);
      border-radius:14px;
      background:rgba(0,0,0,.18);
      padding:10px 12px;
      margin:10px 0;
    }
    summary{
      cursor:pointer;
      font-weight:900;
      color:rgba(255,255,255,.92);
    }

    .footer{
      max-width:var(--max);
      margin:24px auto 0;
      padding:22px 20px 46px;
      color:var(--muted);
      font-size:13px;
      border-top:1px solid var(--line);
    }

    @media (max-width: 980px){
      .hero{ grid-template-columns:1fr; }
      .container{ grid-template-columns:1fr; }
      .sidebar{ position:relative; top:auto; }
      h1{ font-size:34px; }
    }
    @media (max-width: 520px){
      h1{ font-size:30px; }
      .content{ padding:18px 16px; }
      .heroCard .inner{ padding:24px 18px 18px; }
      .grid2{ grid-template-columns:1fr; }
    }