:root{
        --primary:#1a73e8;
        --primary-dark:#0c59c5;
        --accent:#00c3a5;
        --bg:#f5f7fb;
        --text:#1f2933;
        --muted:#6b7280;
        --card-bg:#ffffff;
        --border:#e5e7eb;
    }

    *{box-sizing:border-box;margin:0;padding:0;}

    body{
        font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
        background:var(--bg);
        color:var(--text);
        line-height:1.7;
    }

    a{text-decoration:none;color:var(--primary);}
    a:hover{color:var(--primary-dark);}

    .page-wrapper{
        max-width:1080px;
        margin:0 auto;
        padding:20px 16px 40px;
    }

    header{
        margin-bottom:24px;
    }

    .breadcrumb{
        font-size:13px;
        color:var(--muted);
        margin-bottom:8px;
    }

    .breadcrumb a{color:var(--muted);}
    .breadcrumb span{margin:0 4px;}

    .hero-card{
        background:linear-gradient(145deg,#ffffff,#eef3ff);
        border-radius:18px;
        padding:24px 22px;
        display:grid;
        grid-template-columns:1.3fr 1fr;
        gap:18px;
        box-shadow:0 14px 30px rgba(15,23,42,0.12);
        align-items:center;
    }

    .hero-badge{
        display:inline-flex;
        align-items:center;
        gap:8px;
        font-size:12px;
        padding:4px 10px;
        border-radius:999px;
        background:rgba(26,115,232,0.08);
        color:var(--primary-dark);
        margin-bottom:10px;
    }

    .dot{
        width:8px;height:8px;border-radius:50%;background:var(--accent);
    }

    h1{
        font-size:26px;
        margin-bottom:10px;
        letter-spacing:-0.02em;
    }

    .hero-subtitle{
        font-size:15px;
        color:var(--muted);
        margin-bottom:18px;
    }

    .hero-meta{
        font-size:13px;
        color:var(--muted);
        display:flex;
        flex-wrap:wrap;
        gap:12px;
    }

    .hero-meta span{
        display:inline-flex;
        align-items:center;
        gap:6px;
    }

    .hero-meta svg{width:14px;height:14px;}

    .hero-cta{
        margin-top:16px;
    }

    .btn-primary{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:12px 22px;
        border-radius:999px;
        font-weight:600;
        font-size:15px;
        color:#fff;
        background:var(--primary);
        box-shadow:0 8px 20px rgba(26,115,232,0.35);
    }
    .btn-primary:hover{background:var(--primary-dark);}

    .btn-primary svg{
        width:16px;height:16px;margin-left:6px;
    }

    .hero-image{
        text-align:center;
    }

    .hero-image figure{
        margin:0;
        background:var(--card-bg);
        border-radius:16px;
        box-shadow:0 10px 25px rgba(15,23,42,0.16);
        overflow:hidden;
        border:1px solid rgba(148,163,184,0.25);
    }

    .hero-image img{
        display:block;
        width:100%;
        height:auto;
    }

    .img-caption{
        font-size:12px;
        color:var(--muted);
        padding:8px 10px 10px;
        text-align:left;
    }

    main{
        margin-top:26px;
        display:grid;
        gap:24px;
        grid-template-columns: minmax(0,3fr) minmax(0,1.1fr);
    }

    article{
        background:var(--card-bg);
        border-radius:18px;
        padding:22px 20px 26px;
        box-shadow:0 10px 24px rgba(15,23,42,0.08);
        border:1px solid var(--border);
    }

    article h2{
        font-size:20px;
        margin:22px 0 10px;
    }

    article h3{
        font-size:17px;
        margin:18px 0 8px;
    }

    article p{
        margin-bottom:12px;
        font-size:15px;
    }

    article ul, article ol{
        margin:0 0 12px 18px;
        padding-left:4px;
        font-size:15px;
    }

    article li{margin-bottom:6px;}

    .highlight-box{
        background:#f1f5ff;
        border-radius:12px;
        padding:14px 14px;
        border:1px solid #d0ddff;
        margin:12px 0 14px;
        font-size:14px;
    }

    .grid-two{
        display:grid;
        gap:14px;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
        margin:10px 0 16px;
    }

    .mini-card{
        background:#f9fafb;
        border-radius:12px;
        padding:12px 12px;
        border:1px solid #e5e7eb;
        font-size:14px;
    }

    .mini-card h3{
        font-size:15px;
        margin:0 0 4px;
    }

    .tech-table{
        width:100%;
        border-collapse:collapse;
        font-size:14px;
        margin:6px 0 14px;
    }

    .tech-table th,
    .tech-table td{
        padding:8px 6px;
        border-bottom:1px solid #e5e7eb;
        text-align:left;
    }

    .tech-table th{
        background:#f9fafb;
        font-weight:600;
    }

    .sidebar{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .side-card{
        background:var(--card-bg);
        border-radius:16px;
        padding:16px 16px 18px;
        box-shadow:0 8px 18px rgba(15,23,42,0.07);
        border:1px solid var(--border);
        font-size:14px;
    }

    .side-card h3{
        font-size:15px;
        margin-bottom:10px;
    }

    .badge-list{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }

    .badge-chip{
        padding:5px 10px;
        border-radius:999px;
        background:#f3f4ff;
        color:var(--primary-dark);
        font-size:12px;
    }

    .faq-block h3{
        margin-bottom:8px;
    }

    .faq-item{
        margin-bottom:10px;
    }

    footer{
        margin-top:26px;
        text-align:center;
        font-size:12px;
        color:var(--muted);
        padding-bottom:10px;
    }

    @media (max-width:900px){
        .hero-card{
            grid-template-columns:1fr;
            padding:18px 16px;
        }
        main{
            grid-template-columns:1fr;
        }
    }