:root{
      --accent:#0d6efd;
      --bg:#0f1724;
      --card-bg:#0b1220;
      --muted:#9aa6b2;
    }
    *{box-sizing:border-box}
    body{
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      margin:0;
      background: linear-gradient(180deg,#071021 0%, #061428 60%, #0b1430 100%);
      color: #e6eef6;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* NAV */
    .navbar-brand { font-weight:700; letter-spacing:0.2px; }
    .nav-link { color: rgba(230,238,246,0.9) !important; }
    .navbar { backdrop-filter: blur(6px); }

    /* HERO - uses an inline SVG pattern + gradient (no external image) */
    .hero {
      min-height: 74vh;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
      border-bottom-left-radius: 36px;
      border-bottom-right-radius: 36px;
      padding: 6rem 1rem;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 10% 20%, rgba(13,110,253,0.16), transparent 6%),
        radial-gradient(circle at 90% 80%, rgba(99,102,241,0.12), transparent 8%),
        linear-gradient(180deg, rgba(5,12,25,0.6), rgba(3,8,18,0.9));
        z-index:0;
    }
    /* subtle tech pattern SVG as data URI */
    .hero::after{
      content:"";
      position:absolute;
      inset:0; 
      opacity:0.15;
      z-index:0;
      mix-blend-mode:screen;
    }

    .hero .hero-card{
      z-index:2;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.04);
      padding:2.25rem;
      border-radius:16px;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      max-width:980px;
      margin:auto;
      width:100%;
    }

    .hero h1{ font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height:1.05; margin-bottom:.5rem; color:#fff; }
    .hero p.lead { color: var(--muted); font-size:1rem; margin-bottom:1rem; }

    .cta-group .btn{ min-width:160px; }

    /* Services */
    .services { padding:4rem 1rem; }
    .service-card{
      border-radius:14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.04);
      padding:1.6rem;
      box-shadow: 0 10px 30px rgba(2,6,23,0.5);
      transition: transform .28s ease, box-shadow .28s ease;
    }
    .service-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(2,6,23,0.6); }
    .service-icon{
      width:56px;height:56px;border-radius:12px;display:grid;place-items:center;
      background: linear-gradient(135deg, rgba(13,110,253,0.14), rgba(99,102,241,0.08));
      margin-bottom:.9rem;
      border:1px solid rgba(255,255,255,0.03);
    }
    .service-title{ font-weight:600; color:#eef6ff; margin-bottom:.4rem; }

    /* About */
    #about { padding:3.5rem 1rem; background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent); border-top:1px solid rgba(255,255,255,0.02); }
    .founder-card{
      border-radius:14px; padding:1.2rem; display:flex; gap:1rem; align-items:center;
      background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
      border:1px solid rgba(255,255,255,0.03);
      box-shadow: 0 8px 24px rgba(3,7,20,0.45);
    }
    .avatar{
      width:120px; height:120px; flex:0 0 120px; border-radius:14px; overflow:hidden;
      display:grid; place-items:center; background:linear-gradient(135deg,#0d6efd,#6366f1);
      color:white; font-weight:700; font-size:1.05rem;
      border: 1px solid rgba(255,255,255,0.06);
    }

    /* Footer */
    footer{ padding:2rem 1rem; text-align:center; color: #9fb0c6; background:transparent; border-top:1px solid rgba(255,255,255,0.02); }

    /* Responsiveness tweaks */
    @media (max-width:767px){
      .hero{ padding:4.5rem 1rem 3rem; }
      .founder-card{ flex-direction:column; text-align:center;}
      .avatar{ width:110px; height:110px; }
    }