/* Reset & base */
:root{
    --bg:#f7f8fa;
    --card:#ffffff;
    --muted:#6b7280;
    --accent1:#4a90e2;
    --accent2:#7b68ee;
    --text:#0f172a;
}

*{box-sizing:border-box}
body{
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background:var(--bg);
    color:var(--text);
    margin:0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.site-header{
    background:transparent;
    padding:20px 0;
}
.header-inner{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
}
.logo{max-width:120px;height:auto}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600}
.top-header{padding:12px 0}
.top-header .header-inner{justify-content:center}

.container{max-width:1100px;margin:28px auto;padding:0 20px}

.hero{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:center}
.hero-left h1{font-size:36px;margin:0 0 12px;font-weight:700}
.lead{color:var(--muted);margin:0 0 20px}
.hero-ctas .btn{margin-right:12px}

.card-hero{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.card-hero h3{margin:0 0 6px}
.card-hero p{margin:0;color:var(--muted);font-size:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px}
.product{background:var(--card);padding:20px;border-radius:12px;border:1px solid rgba(15,23,42,0.04);box-shadow:0 6px 18px rgba(15,23,42,0.06);display:flex;flex-direction:column;justify-content:space-between;position:relative;padding-left:28px}
.product::before{content:"";position:absolute;left:12px;top:12px;bottom:12px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--accent1),var(--accent2));}
.product-title{font-weight:700;font-size:16px}
.product-sub{color:var(--muted);font-size:13px;margin-top:6px}
.product-desc{color:#334155;font-size:14px;margin:14px 0 18px;flex:1}
.product-actions{display:flex;gap:8px}

.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;border:1px solid transparent;color:#fff;background:linear-gradient(90deg,var(--accent1),var(--accent2));}
.btn.ghost{background:transparent;color:var(--accent1);border:1px solid rgba(74,144,226,0.12)}
.btn.primary{background:linear-gradient(90deg,#16a34a,#10b981);color:#fff;border-radius:10px}

.site-footer{margin:48px 0 24px}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 20px;color:var(--muted);text-align:center}

@media (max-width:880px){
    .hero{grid-template-columns:1fr;}
    .hero-right{order:2}
}

.website-list a:hover {
    color: #0056b3;
}