:root{
      --bg:#0B1220;          /* deep navy, calmer */
      --panel:#0F172A;       /* slate */
      --glass:rgba(255,255,255,.04);
      --text:#E6EAF2;        /* softer white */
      --muted:#B5BDCF;       /* muted slate */
      --brand:#6E7CF6;       /* subtle indigo */
      --brand-2:#3EC9D6;     /* muted teal */
      --accent:#F7C948;      /* warm accent */
      --ring: 0 0 0 1px rgba(110,124,246,.25), 0 10px 28px rgba(62,201,214,.10);
      --radius:20px;
      --shadow:0 14px 44px rgba(3,7,18,.45);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}

    /* ====== Animated background grid + gradient fog ====== */
    .bg-grid{position:fixed;inset:0;z-index:-3;background:
      radial-gradient(80vw 50vh at 10% -10%, rgba(110,124,246,.18), transparent 60%),
      radial-gradient(65vw 45vh at 90% -10%, rgba(62,201,214,.14), transparent 55%),
      linear-gradient(180deg, rgba(11,18,32,.95), rgba(11,18,32,.98));
      filter:saturate(105%);
    }
    .grid-lines{display:none}
    @keyframes gridFloat{to{transform:perspective(900px) rotateX(65deg) translateY(-10%)}}

    /* ====== Header ====== */
    header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(6,11,41,.9), rgba(6,11,41,.55));backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
    .nav{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.4px}
    .badge{font-family:"JetBrains Mono",monospace;background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
    .navspacer{flex:1}
    .nav a{color:var(--text);text-decoration:none;opacity:.9}
    .nav a:hover{opacity:1}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:linear-gradient(90deg, rgba(124,123,255,.15), rgba(0,231,246,.15));border:1px solid rgba(255,255,255,.12);box-shadow:var(--ring);text-decoration:none;color:var(--text)}
    .btn:active{transform:translateY(1px)}
    .brand .image { height: 35px; }

    /* ====== Hero ====== */
    .hero{max-width:1200px;margin:0 auto;padding:96px 20px 48px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
    @media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:56px}}
    h1{font-size:clamp(32px,6vw,64px);line-height:1.05;margin:0 0 16px;font-weight:900;letter-spacing:.2px}
    .subtitle{color:var(--muted);font-size:clamp(16px,2.2vw,20px);margin-bottom:22px}
    .cta{display:flex;gap:12px;flex-wrap:wrap}
    .heroCard{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}

    /* Glass avatar card */
    .avatar{display:flex;align-items:center;gap:16px}
    .avatar img{width:110px;height:110px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
    .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .chip{padding:6px 10px;border-radius:999px;background:rgba(124,123,255,.12);border:1px solid rgba(124,123,255,.25);font-size:12px}

    /* ====== Section titles ====== */
    section{max-width:1200px;margin:0 auto;padding:28px 20px 72px}
    .stitle{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.5px;margin:22px 0 18px}
    .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 24px rgba(124,123,255,.8)}

    /* ====== Projects grid ====== */
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    @media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:680px){.grid{grid-template-columns:1fr}}

    .card{position:relative;overflow:hidden;border-radius:16px;background:var(--panel);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}

    .card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.36)}

    .cardContent{padding:18px}
    .card h3{margin:0 0 6px;font-size:18px}
    .card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
    .card:hover{transform:translateY(-6px)}
    .card .shine{position:absolute;inset:-40% -40% auto auto;background:radial-gradient(600px 200px at 0% 0%, rgba(124,123,255,.22), transparent 60%);transform:rotate(15deg);pointer-events:none}
    .cardContent{padding:18px}
    .card h3{margin:0 0 8px;font-size:20px}
    .card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
    .thumb{width:100%;height:240px;object-fit:cover;display:block;border-bottom:1px solid rgba(255,255,255,.08);background:#0A103A;}  

    /* ====== Footer ====== */
    footer{border-top:1px solid rgba(255,255,255,.08);padding:28px 20px;color:var(--muted);text-align:center}

    /* Small helper classes */
    .row{display:flex;gap:10px;flex-wrap:wrap}
    .mono{font-family:"JetBrains Mono",monospace}
    .muted{color:var(--muted)}
    .link{color:var(--text);text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.3)}

    /* Hover tilt */
    .tilt{transform-style:preserve-3d;perspective:800px}
    .tilt:hover .card{transform:translateY(-6px) rotateX(.8deg) rotateY(.8deg)}
  /* ====== Mobile optimizations ====== */
    @media (max-width:900px){
      .hero{grid-template-columns:1fr;padding:56px 16px 24px}
      .heroCard{padding:16px}
    }
    @media (max-width:680px){
      .grid{grid-template-columns:1fr}
      .card{border-radius:14px}
      .thumb{height:220px}
      .card h3{font-size:18px}
      .card p{font-size:15px;line-height:1.6}
      .btn{padding:12px 16px}
      header .nav{padding:10px 14px}
    }
    
    a  {
        color: white;
        text-decoration: none;
    }
    
      @media (max-width:680px){
      #about .heroCard{
        grid-template-columns:1fr; text-align:left;
      }
      #about .heroCard img{
        width:180px;height:180px;border-radius:20px;justify-self:center;
      }
    }


    /* ================== REAL MOBILE OPTIMIZATION ================== */

/* Prevent random horizontal scroll */
html, body { overflow-x: hidden; }
.nav { flex-wrap: wrap; align-items: center; row-gap: 10px; }

/* Brand line must be allowed to shrink */
.brand { min-width: 0; flex: 1 1 280px; }
.badge { white-space: nowrap; }
.muted.mono { white-space: nowrap; opacity: .85; }

/* Make header links/button behave like pills */
.nav > a { flex: 0 0 auto; }
.btn { padding: 10px 14px; }

/* ---------- MOBILE HEADER (<=680px) ---------- */
@media (max-width: 680px){

  header .nav{
    padding: 10px 12px;
    gap: 10px;
  }

  /* shrink brand */
  .brand img{ height: 26px; }
  .muted.mono{ display:none; }       /* remove "// Back-End / PHP" on phones */
  .badge{ font-size: 14px; }

  /* turn nav into scroll row instead of exploding */
  .navspacer{ display:none; }
  header .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header .nav::-webkit-scrollbar{ display:none; }

  /* smaller pills */
  .btn{ padding: 10px 12px; }
}

/* ---------- HERO FIX ---------- */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    padding: 54px 16px 18px;
    gap: 18px;
  }
  .cta .btn{ width: auto; }

  h1{ font-size: 34px; }
  .subtitle{ font-size: 15px; line-height: 1.6; }

  .heroCard{ padding: 14px; }
  .avatar{ flex-direction: column; align-items: flex-start; }
  .avatar img{ width: 90px; height: 90px; }
  .chip{ padding: 7px 10px; font-size: 12px; }

    section{ padding: 22px 16px 56px; }
    .grid{ gap: 14px; }
    .thumb{ height: 180px; }
    .cardContent{ padding: 14px; }
    .card h3{ font-size: 18px; }
    .card p{ font-size: 14px; line-height: 1.65; }
    #about .heroCard{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 16px;
    }

    #about .heroCard img{
        width: 120px;
        height: 120px;
        border-radius: 16px;
    }

    #about .heroCard ul{
        padding-left: 18px;
    }
}
/* Disable hover/tilt/parallax behavior on touch devices */
@media (hover:none), (pointer:coarse){
  .card:hover{ transform:none !important; }
  .tilt:hover .card{ transform:none !important; }
}