:root{
      --accent: #1f6feb; /* Main blue */
      --accent-2: #7c3aed; /* purple */
      --text-accent: #1f6feb; /* For specific text highlights */
      --bg: #0b0f14;
      --card: #0f1720;
      --glass: rgba(255,255,255,0.04);
      --text-muted-color: #a0b3d1; /* Brighter muted color for clarity */
    }
    html,body{height:100%; scroll-behavior: smooth;}
    body{
      background: linear-gradient(180deg,#020617 0%, #081026 60%);
      color: #e6eef8;
      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height: 1.6; /* Improved line spacing for readability */
    }
    p { color: #d0dff0; }
    .text-muted { color: var(--text-muted-color) !important; }
    .hero{
      min-height:80vh;
      display:flex;
      align-items:center;
      padding-top:6rem;
      padding-bottom:3rem;
    }
    .brand-mark{font-weight:700;letter-spacing:0.6px}
    .pill-roles span{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:6px 10px;border-radius:999px;margin-right:8px;font-weight:600;color:white}
    .glass-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:18px}
    .service-card{
        border-radius:12px;
        padding:18px;
        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);
        transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .service-card:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }
    .cta-btn{
        background:linear-gradient(90deg,var(--accent),var(--accent-2));
        border:none;
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }
    .cta-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    .project-thumb{
        height:120px;
        background:linear-gradient(135deg,#0f1724,#07102a);
        border-radius:10px;
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
        color:#9fb7ff;
        font-size: 14px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .project-thumb:hover {
        background: linear-gradient(135deg,#1a2533,#0e1a3a);
        transform: translateY(-4px);
    }
    .main-footer {
        background-color: #081026; /* Darker shade from gradient */
        color: var(--text-muted-color);
    }
    .main-footer h5 {
        color: #e6eef8;
        margin-bottom: 1rem;
    }
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    .footer-links a {
        color: var(--text-muted-color);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .footer-links a:hover {
        color: var(--accent);
    }
    .social-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border-radius: 50%;
        background-color: var(--glass);
        color: white;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .social-links a:hover {
        background-color: var(--accent);
        transform: translateY(-3px);
    }
    /* Contact Page Specific Styles */
    .contact-info-list a {
        color: var(--text-muted-color);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .contact-info-list a:hover {
        color: var(--accent);
    }
    .text-accent {
        color: var(--text-accent) !important;
    }
    .social-links-contact a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin-right: 8px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.07);
        color: white;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .social-links-contact a:hover {
        background-color: var(--accent);
    }
    .floating-blob{position:absolute;right:-120px;top:-40px;filter:blur(36px);opacity:0.45;width:420px;height:420px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));z-index:0}

    /* Responsive adjustments for mobile */
    @media (max-width: 767.98px) {
        .hero {
            padding-top: 3rem; /* Reduce hero padding on mobile */
        }
        .floating-blob {
            display: none; /* Hide blob on small screens */
        }
    }