:root{
      --bg:#000000; /* dark slate */
      --card:#0b1220;
      --accent:#EA2424;
      --muted:#0b1220;
      --glass: rgba(255,255,255,0.04);
    }
    *{box-sizing:border-box}
    html,body{height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;margin:0;color:#e6eef8;background:linear-gradient(180deg,#EAEAEA 0%, #EAEAEA 80%);} 
    a{color:inherit;text-decoration:none}
    .container{max-width:1100px;margin:0 auto;padding:28px}

    /* Header */
    header{padding:20px 0;position:sticky;top:0;backdrop-filter: blur(6px);background:linear-gradient(180deg,rgba(255, 255, 255, 0.9),rgba(255,255,255,0.55));border-bottom:1px solid rgba(255,255,255,0.03);z-index:40}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:96px;height:96px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#EA2424);display:grid;place-items:center;color:#071127;font-weight:700}
    nav ul{display:flex;gap:18px;align-items:center;margin:0;padding:0;list-style:none}
    nav ul a{font-weight:600;color:var(--bg);font-size:14px}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;padding:60px 0}
    .hero-grid{display:grid;grid-template-columns:1fr;gap:24px}
    .eyebrow{display:inline-block;padding:6px 12px;background:var(--glass);border-radius:999px;color:var(--accent);font-weight:700;font-size:13px}
    h1{font-size:34px;margin:6px 0 0;color:#000;line-height:1.05}
    p.lead{color:var(--muted);font-size:16px;margin:10px 0 0;max-width:70ch}
    .cta{margin-top:18px;display:flex;gap:12px}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-weight:700}
    .btn-primary{background:linear-gradient(90deg,var(--accent),#AD0B0B);color:#FFFFFF}
    .btn-ghost{border:1px solid rgba(255,255,255,0.06);color:var(--muted);background:transparent}
    .center-div {display: flex;justify-content: center; align-items: center;width: 100%;margin-top: 10px;}

    /* Cards */
    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:24px}
    .card{background:linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0,0,0,0.2));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.0.01)}
    .stat{font-size:20px;font-weight:800;color:#000}
    .stat-sub{color:var(--muted);font-size:13px;margin-top:6px}

    /* Services */
    .services{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:48px 0}
    .service{background:rgba(173, 11, 11, 0.95);padding:18px;border-radius:12px;border:1px solid #AD0B0B}
    .service h3{margin:0 0 8px}
    .service p{margin:0;color:#e6eef8;font-size:14px}

    /* Projects / gallery */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .tile{height:120px;border-radius:10px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25)}

    /* Contact */
    .contact{display:grid;grid-template-columns:1fr 320px;gap:20px;margin:48px 0;align-items:start}
    .contact-card{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
    .field{display:flex;flex-direction:column;gap:8px}
    input,textarea{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:8px;color:#e6eef8}

    footer{padding:28px 0;color:var(--muted);font-size:14px;border-top:1px solid rgba(255,255,255,0.02)}

    @media(min-width:900px){
      .hero-grid{grid-template-columns:1fr 420px;align-items:center}
      h1{font-size:44px}
      .gallery .tile{height:180px}
      .services{grid-template-columns:repeat(4,1fr)}
      .contact{grid-template-columns:1fr 380px}
    }