:root{
      --bg:#0e0f14;          /* dark base */
      --card:#12141b;        /* card bg */
      --muted:#9aa1b2;       /* muted text */
      --text:#e6e9ef;        /* primary text */
      --brand:#5b8cff;       /* accent */
      --brand-2:#7aeea8;     /* accent alt */
      --border:#232633;      /* border */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
    }
    *{
        box-sizing:border-box
    }
    html{
        
        scroll-behavior:smooth;
    }
    body{
        margin:0; 
        font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; 
        color:var(--text); 
        background:linear-gradient(180deg,#0b0c11 0%, #0f1016 100%);
    }    
    a{
        color:inherit;
         text-decoration:none;
    }
    img{
        max-width:100%; 
        display:block;
    }
    .container{
        width:min(1150px,92%); 
        margin-inline:auto;
    }

    /* Header */
    header{
        position:sticky; 
        top:0; 
        z-index:50; 
        backdrop-filter:saturate(180%) blur(8px); 
        background:rgba(14,15,20,.6); 
        border-bottom:1px solid var(--border)
    }
    .nav{
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        padding:14px 0
    }
   
    .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
    .brand .logo{
        inline-size:44px; 
        block-size:38px; 
        border-radius:10px; 
        background:linear-gradient(135deg,var(--brand),var(--brand-2)); 
        display:grid; 
        place-items:center; 
        font-weight:800; 
        color:#0b0c11;
        font-family: "Sonsie One", system-ui !important;
    }
    nav ul{
        display:flex; 
        gap:22px; 
        list-style:none; 
        margin:0; 
        padding:0
    }
    nav a{font-weight:500; color:var(--muted)}
    nav a.active, nav a:hover{color:var(--text)}
    .menu-btn{display:none}

    /* Hero */
    .Hero{
        background: url('../images/home.jpg') !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed !important;
    }
    .hero{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; padding:80px 0}
    .hero h1{
        font-size: clamp(28px, 4.2vw, 56px); 
        line-height:1.08; 
        margin:0 0 14px;
    }


    .hero .cta{
        display:flex; 
        gap:14px; 
        margin-top:26px;
    }
    .btn{
        display:inline-flex; 
        align-items:center; 
        gap:10px; 
        padding:12px 18px;
         border-radius:12px; 
         border:1px solid var(--border); 
         background:var(--card); 
         color:var(--text); 
         box-shadow:var(--shadow);
        }
        .aboutBtn{
            margin-top: 25px;
            margin-right: 15px;
            background:var(--card); 
            border:1px solid var(--border);
            border-radius:12px; 
            padding:12px 18px;
            display:inline-block;
        }
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b0c11; border-color:transparent}
    /* .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)} */
    .hero-figure{position:relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden;}
    .hero-figure::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 30% 20%, rgba(91,140,255,.25), transparent 60%)}


    .hero .roles {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.5px;
  min-height: 36px;

    }
    /* Sections */
    section{padding:70px 0}
    .section-head{display:flex; align-items:end; justify-content:space-between; margin-bottom:28px}
    .eyebrow{
        font-weight:700; 
        letter-spacing:.24em; 
        color:var(--brand-2); 
        font-size:14px
    }
    .name{
        font-family: "Roboto Condensed", sans-serif;
    }
    .tittle{
        line-height: 2;
        font-family: "Poppins", sans-serif;
        word-spacing: 3px;
    }
    .title{font-size: clamp(22px,3.2vw,34px); margin:6px 0 0}
    .muted{color:var(--muted)}

    /* About */
    .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px}
    .about-card{padding:24px}
    .kv{display:grid; grid-template-columns:auto 1fr; gap:6px 18px}
    .kv dt{color:var(--muted)}

    /* Skills */
    .skills{display:grid; grid-template-columns:1fr 1fr; gap:22px}
    .skill{padding:18px}
    .meter{height:10px; background:#1a1d27; border-radius:20px; overflow:hidden; border:1px solid var(--border)}
    .bar{height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand-2))}
    .skill h4{margin:.2rem 0 .6rem}

    /* Services */
    .services{
        display:grid; 
        grid-template-columns:repeat(3,1fr); 
        gap:18px
    }
    .service{
        padding:22px; 
        transition:transform .2s ease;
        background-color: #232633;
        border-radius: 10px;
        
    }
    .service:hover{
        transform:translateY(-4px);
        border: #9aa1b2 1px solid; 
    }

 
    .service .icon{
        color:var(--brand-2)
    }
    /* Resume timeline */
    .timeline{display:grid; grid-template-columns:1fr 1fr; gap:22px}
    .item{padding:20px; position:relative}
    .item h4{margin:.3rem 0 .4rem}
    .item .range{font-size:12px; color:var(--brand)}

    /* Portfolio */
    .card{
        border-radius: 10px;
    }
    .filters{display:flex; gap:10px; flex-wrap:wrap}
    .chip{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#12141b; cursor:pointer; font-size:13px}
    .chip.active{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b0c11; border-color:transparent}
    .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px}
    .work{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border)}
    .work .cap{position:absolute; inset:auto 0 0 0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)); padding:14px; font-weight:500}

    /* Fun facts */
    .facts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    .fact{padding:24px; text-align:center}
    .fact .num{font-size:32px; font-weight:700}

    /* Testimonials */
    .testi{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
    .quote{padding:24px}
    .quote .who{margin-top:12px; color:var(--muted)}

    /* Blog */
    .posts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .post{overflow:hidden}
    .post .body{padding:16px}

    /* Contact */
    form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    form .full{grid-column:1 / -1}
    input, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#0f121a; color:var(--text)}
    textarea{min-height:120px; resize:vertical}

    footer{padding:40px 0; border-top:1px solid var(--border); text-align:center; color:var(--muted)}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer */

.footer-socials a{
    margin-right: 5px;
}
/* Footer */


    /* Color switcher (simple) */
    .switcher{position:fixed; right:16px; bottom:16px; z-index:60; display:flex; gap:10px}
    .sw{inline-size:36px; block-size:36px; border-radius:12px; border:1px solid var(--border); cursor:pointer}

    /* Responsive */
    @media (max-width: 980px){
      .hero{grid-template-columns:1fr; padding:48px 0}
      .about-grid, .skills, .timeline{grid-template-columns:1fr}
      .services{grid-template-columns:repeat(2,1fr)}
      .grid{grid-template-columns:repeat(2,1fr)}
      .testi{grid-template-columns:1fr}
      .posts{grid-template-columns:repeat(2,1fr)}
      .facts{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 640px){
      nav ul{display:none}
      .menu-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#131521}
      .mobile{position:absolute; inset:60px 0 auto 0; background:#0f1117; border-bottom:1px solid var(--border); display:none}
      .mobile ul{list-style:none; margin:0; padding:10px; display:grid; gap:10px}
      .services{grid-template-columns:1fr}
      .grid{grid-template-columns:1fr}
      .posts{grid-template-columns:1fr}
    }