.hero-graphics {
    background: url('/assets/images/hero-bg2.jpg') center/cover no-repeat;
    position: relative;
    color: #0f172a;
}

/* Optional: overlay for readability */
.hero-graphics::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(245, 246, 250, 0.2);
    /*background: rgba(255, 255, 255, 0.85);*/ /* light overlay for contrast */
}

/* Keep content above the overlay */
.hero-graphics > .container {
    position: relative;
    z-index: 2;
}

/*.bg-light-gradient-bottom {
    background: rgba(13, 110, 253, 0.08) !important;
    background: linear-gradient(1turn, rgba(13, 110, 253, 0.12), hsla(0, 0%, 100%, 0) 80%) !important;
    background: -moz-linear-gradient(1turn, rgba(13, 110, 253, 0.12) 0, hsla(0, 0%, 100%, 0) 80%) !important;
}*/

.bg-light-gradient-bottom {
    background: rgba(13, 110, 253, 0.15) !important;
    background: linear-gradient(1turn, rgba(13, 110, 253, 0.2), hsla(0, 0%, 100%, 0) 80%) !important;
}

:root{
    --primary:#754FFE;
    --secondary:#4A3AFF;
    --accent:#DCD7FF;
    --bg-dark:#0D0D16;
    --bg-light:#F9F9FB;
    --text:#0C0C14;
    --muted:#6B7280;
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.12);
    --gradient:linear-gradient(90deg,var(--primary) 0%, var(--secondary) 100%);
}
/*body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg-light); color:var(--text); margin:0;}
.container{max-width:1080px; margin:0 auto; padding:48px 20px 96px;}
h1{font-weight:800; font-size:40px; letter-spacing:-0.02em; margin:0 0 8px}
h2{font-size:26px; font-weight:800; margin:32px 0 12px}
h3{font-size:18px; font-weight:700; margin:20px 0 10px}
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;}
.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.dark-block{background:var(--bg-dark); color:#fff; border-radius:18px; padding:24px; border:1px solid #1f2030}
footer{margin-top:56px; color:var(--muted); font-size:14px}*/