:root{
      --bg: #050505;
      --surface: #0b0b0b;
      --muted: #bfbfbf;
      --text: #ffffff;
      --glass: rgba(255,255,255,0.03);
      --shadow: 0 22px 60px rgba(0,0,0,0.8);
      --radius-lg: 18px;
      --radius-md: 12px;
      --container: 1100px;
      --focus: 0 0 0 6px rgba(255,255,255,0.06);
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    *{box-sizing:border-box}
    html, body {
    height: 100%;
    margin: 0;
    background: linear-gradient(180deg, var(--bg), #020202 140%);
    background-color: var(--bg); 
    color: var(--text);
    color-scheme: dark; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    font-size: 16px;
    scroll-behavior: smooth;
    }

    .container{max-width:var(--container);margin:0 auto;padding:1rem 0.5rem;}

       
    ::-webkit-scrollbar {
    width: 8px;
    }

    
    ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0); 
    border: none;
    }

   
    ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0); 
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0); 
    transition: background 0.3s ease;
    }

   
    ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(70, 70, 70);
    }

  
    html {
    scrollbar-width: thin;
    scrollbar-color: rgba(49, 49, 49) transparent;
    }





    a{color:inherit;text-decoration:none;color: rgb(165, 21, 21);}
    img{max-width:100%;display:block}

 
    section {
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:12vh 1rem;            
    }
    .inner { max-width:960px; margin:0 auto; width:100%; }

    cer{
      color: rgba(255, 0, 0, 0.712);
    }

    pop{
      font-size: 0.9rem;
      color: var(--muted);
      font-weight: 500;
    }

    h3{margin:0 0 1rem 0; max-width: 300px;transition: transform 1s ease-out; font-size: 3rem;;}

    h4{margin:0 0 1rem 0; max-width: 800px;transition: transform 1s ease-out; font-size: 3rem;;}

    h5 {
    margin: 0;
    max-width: 1000px;
    font-size: 4.5rem;
    color: #ff0000a1;
    text-shadow:
        0 0 1px #ff0000a1,
        0 0 5px #ff0000a1,
        0 0 10px #ff0000a1;
    transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
    text-decoration: underline dotted red;
    }

    h5:hover {
    transform: scale(1.03);
    text-shadow:
        0 0 8px #ff0000a1,
        0 0 15px #ff0000a1,
        0 0 22px #ff0000a1;
    }

    @keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 1px #ff0000a1, 0 0 5px #ff0000a1, 0 0 10px #ff0000a1; }
    50% { text-shadow: 0 0 3px #ff0000a1, 0 0 7px #ff0000a1, 0 0 12px #ff0000a1; }
    }

    h5.pulsing {
    animation: glowPulse 2s infinite ease-in-out;
    }


    strong.spec {
    color: rgb(255, 255, 255);
    font-weight: 700;
    text-shadow: 0 0 10px rgb(255, 255, 255);
    }



    h1, h2 {
      margin: 0 0 1rem 0;
      max-width: 300px;
      transition: filter 1s ease-out;
      font-size: 5rem
    }

    h1:hover, h2:hover {
      filter: drop-shadow(0px 0px 15px #9f00ff);
    }


    article.card.is-revealed {
      transition: transform 1s ease-out;
    }

    article.card.is-revealed:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 0 20px 6px rgb(255 255 255 / 32%);
    }


    p{margin:0 0 1rem 0}

    .eyebrow{color:var(--muted);font-weight:600;margin-bottom:.8rem}
    .hero h1{
      font-weight:800;line-height:1.02;
      font-size:clamp(2rem,6vw,3.6rem);
      letter-spacing:-0.6px;
    }


    .cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      width: 12px;
      height: 12px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      pointer-events: none; 
      transform: translate(-50%, -50%);
      transition: transform 0.1s ease-out;
      backdrop-filter: blur(4px);
      z-index: 9999;
      box-shadow: 0 0 10px rgba(180, 100, 255, 0.7);
    }

    .lead{color:var(--muted);max-width:60ch;font-size:1rem}

    .actions{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
    .cta-primary{
      display:inline-flex;align-items:center;gap:.6rem;padding:12px 16px;border-radius:14px;
      background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);font-weight:700;cursor:pointer;
      transition:transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms ease;
    }
    .cta-primary:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(255,255,255,0.02)}
    .cta-ghost{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}

 
    .hero-visual{
      margin-top:3.2rem;
      background:#333333;border-radius:var(--radius-lg); padding:1rem; position:relative; overflow:hidden;
      height:380px; display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
      transform:translateY(0); transition:transform 800ms cubic-bezier(.16,.84,.28,1);
    }
    .floating{animation:floaty 8s ease-in-out infinite}
    @keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-12px)} 100%{transform:translateY(0)} }

   
    .projects .grid{display:grid;grid-template-columns:1fr;gap:1.8rem}
    .card{background:var(--surface);border-radius:var(--radius-md);overflow:hidden;position:relative;padding-bottom:0;box-shadow:0 18px 48px rgba(0,0,0,0.7);transition:transform 520ms cubic-bezier(.16,.84,.28,1)}
    .card:hover{transform:translateY(-10px)}
    .thumb{height:220px;overflow:hidden}
    .meta{padding:1.2rem}
    .chip{background:rgba(255,255,255,0.02);padding:.36rem .66rem;border-radius:999px;font-size:.82rem;color:var(--muted);margin-right:.4rem}

    
    .about .bio{color:var(--muted);line-height:1.75;font-size:1.02rem;margin-bottom:1.25rem}
    .skills{background:var(--surface);padding:1.25rem;border-radius:14px}
    .skill{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
    .progress{height:12px;background: rgb(255 0 0 / 18%);;border-radius:999px;overflow:hidden;width:60%}
    .progress>i{display:block;height:100%;background:linear-gradient(90deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86));width:60%}


    .timeline-list{display:grid;gap:1.6rem}

 
    .card-form{background:var(--surface);padding:1.6rem;border-radius:14px;display:grid;gap:1rem;max-width:760px}
    .form-row{display:grid;grid-template-columns:1fr;gap:.9rem}
    input,textarea{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:.85rem;border-radius:10px;font-size:1rem}
    textarea{min-height:160px;resize:vertical}
    .form-actions{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}

    footer{padding:2rem 1rem;color:var(--muted);text-align:left}


    [data-reveal] {
      opacity: 0;
      transform: translateY(30px) scale(0.998);
      filter: blur(2px);
      transition: 
        opacity 1s cubic-bezier(.25,.1,.25,1),
        transform 1s cubic-bezier(.25,.1,.25,1),
        filter 1s cubic-bezier(.25,.1,.25,1);
    }

    [data-reveal].is-revealed {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    hr{
      border: none;
      height: 2px;
      background: #c50c0cce;
      margin: 4rem 0;
      box-shadow: 0 0 10px #ff0000;
    }

    .micro-fade{
      opacity:0;
      transform:translateY(10px);
      transition:opacity 750ms cubic-bezier(.16,.84,.28,1), transform 750ms cubic-bezier(.16,.84,.28,1);
    }
    .micro-fade.show{opacity:1;transform:none}


    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:120}
    .modal.is-open{display:flex}
    .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.82);backdrop-filter: blur(6px)}
    .modal-panel{position:relative;background:var(--surface);padding:1.25rem;border-radius:12px;max-width:920px;width:calc(100% - 2rem);z-index:10;box-shadow:var(--shadow)}
    .modal-panel .close{position:absolute;right:10px;top:10px;border:0;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer}

    
    a:focus, button:focus, input:focus, textarea:focus{outline:none;box-shadow:var(--focus)}

   
    @media (min-width:900px){
      section{ padding:15vh 2rem; min-height:115vh }
      .projects .grid{grid-template-columns:repeat(2,1fr);gap:2rem;max-width:1100px}
      .hero-visual{height:420px}
      .thumb{height:260px}
      .form-row{grid-template-columns:1fr 1fr}
      .form-actions{flex-direction:row;align-items:center;gap:1rem}
    }
    @media (min-width:1400px){
      section{ padding:8vh 50px; min-height:50px }
      .projects .grid{grid-template-columns:repeat(3,1fr)}
      .hero-visual{height:480px}
    }

    @media (hover: none), (pointer: coarse) {
      .cursor-dot{display:none!important}
    }