:root{
      --bg:linear-gradient(180deg,#d9d9d9 0%, #b5b5b5 60%); --card:#0b1220; --muted:#464646; --accent-ess:#03491f; --accent-prem:#f59e0b; --glass: rgba(255,255,255,0.04);
      --radius:16px; --gap:20px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    body{
        margin:0;
        background:linear-gradient(180deg,#d9d9d9 0%, #b5b5b5 60%);
        color:rgb(37, 37, 37);
        min-height:100vh;
        padding:40px;}
    .wrap{
        max-width:1100px;
        margin:0 auto
    }
    header{display:flex;
        align-items:center;
        justify-content:space-between;
        margin-bottom:28px
    }
    header h1{
        font-size:20px;
        margin:0
    }

    .grid{display:grid;
        grid-template-columns:1fr 1fr;
        gap:var(--gap);
        align-items:start
    }
    @media(max-width:880px){.grid{grid-template-columns:1fr}}

    .card{
        background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border-radius:var(--radius);
        padding:22px;
        box-shadow:0 6px 18px rgba(2,6,23,0.6);
        border:1px solid rgba(255,255,255,0.04)
    }
    .card .label{
        display:inline-flex;
        align-items:center;
        gap:10px;
        font-weight:600
    }
    .card h2{
        margin:10px 0 8px;
        font-size:20px
    }
    .muted{
        color:var(--muted);
        font-size:14px
    }

    .features{
        margin:14px 0 18px;
        display:flex;
        flex-direction:column;
        gap:8px
    }
    .feature{display:flex;
        gap:10px;
        align-items:flex-start
    }
    .dot{
        width:10px;
        height:10px;
        border-radius:50%;
        margin-top:6px
    }

    .actions{
        display:flex;
        gap:12px
    }
    .btn{padding:10px 14px;border-radius:12px;border:0;cursor:pointer;font-weight:600}
    .btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit}
    .btn-primary{color:#072027}
    .ess{background:linear-gradient(90deg,var(--accent-ess),#38bdf8);}
    .prem{background:linear-gradient(90deg,var(--accent-prem),#f59e0b);}

    /* visual distinction */
    .card.essence{border-left:6px solid var(--accent-ess)}
    .card.premium{border-left:6px solid var(--accent-prem)}

    /* download row */
    .download-row{display:flex;gap:8px;align-items:center;margin-top:12px}
    .download-link{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--glass);font-weight:600;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.03)}

    /* modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:28px}
    .modal.show{display:flex}
    .modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.6),rgba(2,6,23,0.85))}
    .modal-card{
        position:relative;
        z-index:5;
        width:100%;
        max-width:980px;
        height:80vh;
        background:linear-gradient(180deg,#d9d9d9 0%, #b5b5b5 60%);
        border-radius:12px;
        overflow:hidden;
        display:flex;
        flex-direction:column
    }
    .modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.03)}
    .modal-body{
        flex:1;
        display:flex;
        gap:12px
    }

    .pdf-preview{
        flex:2;
        background:linear-gradient(180deg,#d9d9d9 0%, #b5b5b5 60%)
    }
    .pdf-preview iframe{width:100%;height:100%;border:0}
    .pdf-info{width:340px;padding:16px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0));border-left:1px solid rgba(255,255,255,0.02)}

    footer{margin-top:28px;padding-top:18px;border-top:1px dashed rgba(255,255,255,0.03)}
    .docs{display:flex;gap:12px;flex-wrap:wrap}
    .doc{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;display:flex;gap:12px;align-items:center;border:1px solid rgba(255,255,255,0.02)}

    .accordion{margin-top:12px}
    .acc-item{border-radius:10px;overflow:hidden}
    .acc-head{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
    .acc-body{padding:10px 12px;border-top:1px solid rgba(255,255,255,0.02);display:none}
    .acc-body.show{display:block}

    small{color:var(--muted)}