:root{
    --bg:#0b0b0d; /* black */
    --fg:#ffffff; /* white */
    --muted:#c9c9cf;
    --primary:#f6c90e; /* yellow */
    --primary-weak: rgba(246, 201, 14, .15);
    --card:#121218;
    --border:rgba(255,255,255,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 18px;
    --radius-lg: 26px;
    --maxw:1200px;
  }
  /* Navbar LinkedIn link animation */
.nav a.link.linkedin {
    position: relative;
    overflow: hidden;
  }
  .nav a.link.linkedin::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .nav a.link.linkedin:hover::after {
    transform: translateX(0);
  }
  .nav a.link.linkedin i {
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }
  .nav a.link.linkedin:hover i {
    color: var(--primary);
    text-shadow: 0 0 8px rgba(246,201,14,0.7);
  }
  
  /* Hero section animations */
  .hero .content {
    animation: fadeUp 1s ease forwards;
  }
  @keyframes fadeUp {
    0% {opacity: 0; transform: translateY(20px);}
    100% {opacity: 1; transform: translateY(0);}
  }
  
  /* Hero buttons animation delay */
  .hero .cta-row .btn {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeBtn 0.8s ease forwards;
  }
  .hero .cta-row .btn:nth-child(1) {animation-delay: 0.4s;}
  .hero .cta-row .btn:nth-child(2) {animation-delay: 0.6s;}
  @keyframes fadeBtn {
    to {opacity: 1; transform: translateY(0);}
  }
  
  /* Hero mobile improvement */
  @media (max-width: 620px) {
    .hero .content {
      padding: 20px 14px;
    }
    .title {
      font-size: clamp(28px, 8vw, 48px);
    }
    .subtitle {
      font-size: clamp(14px, 4vw, 18px);
      color: white;
    }
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family:Manrope, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, "Noto Sans", sans-serif;
    color:var(--fg); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  a{color:var(--fg); text-decoration:none}
  img{max-width:100%; display:block}
  .container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

  /* Navbar */
  .nav{
    position:fixed; inset:0 0 auto 0; height:72px; z-index:50;
    display:flex; align-items:center; justify-content:center; backdrop-filter: blur(8px);
    background:linear-gradient(to bottom, rgba(11,11,13,.8), rgba(11,11,13,.2) 70%, transparent);
    border-bottom:1px solid var(--border);
  }
  .nav .inner{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:var(--maxw); padding:0 20px}
  .logo{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
  .logo i{color:var(--primary)}
  .logo .mark{width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--primary) 0 35%, transparent 36%), #111;
    box-shadow:0 0 50px 10px rgba(246,201,14,.25) inset, 0 6px 22px rgba(0,0,0,.5)}
  .nav a.link{opacity:.85; font-weight:600; padding:10px 14px; border-radius:12px; transition:.25s ease}
  .nav a.link:hover{background:var(--primary-weak); color:#fff; opacity:1}
  .menu{display:flex; gap:6px}
  .menu-btn{display:none; background:none; border:1px solid var(--border); color:var(--fg); padding:10px 12px; border-radius:12px}

  @media (max-width:880px){
    .menu{position:fixed; top:72px; right:16px; left:16px; background:#0f0f14; border:1px solid var(--border); border-radius:16px; flex-direction:column; padding:10px; display:none}
    .menu.open{display:flex}
    .menu-btn{display:inline-flex}
  }

  /* Hero */
  .hero{
    position:relative; min-height:92vh; display:grid; place-items:center; padding-top:72px; overflow:hidden;
    background:
      radial-gradient(650px 250px at 20% 15%, rgba(246,201,14,.12), transparent 60%),
      radial-gradient(600px 300px at 85% 25%, rgba(246,201,14,.08), transparent 70%),
      radial-gradient(800px 420px at 50% 110%, rgba(246,201,14,.18), transparent 70%),
      url('/assets//laptopwork.jpg') center/cover no-repeat fixed;
  }
  .hero::after{ /* subtle yellow light sweep */
    content:""; position:absolute; inset:-40% -40% auto -40%; height:120%; transform:skewY(-8deg);
    background:linear-gradient(to right, transparent, rgba(246,201,14,.12) 40%, transparent 70%);
    animation:sweep 8s linear infinite;
  }
  @keyframes sweep{0%{transform:translateX(-60%) skewY(-8deg)} 100%{transform:translateX(60%) skewY(-8deg)}}

  .hero .content{position:relative; z-index:2; text-align:center; padding:28px 18px; backdrop-filter: blur(2px)}
  .kicker{display:inline-block; padding:6px 12px; border:1px solid var(--border); border-radius:999px; font-size:12px; letter-spacing:.4px; opacity:.9}
  .title{font-size:clamp(34px, 6vw, 64px); font-weight:800; margin:14px 0}
  .subtitle{ color:white;font-size:clamp(16px, 2.6vw, 22px); color:var(--muted); max-width:760px; margin:0 auto 18px}

  /* Rotating links/phrases */
  .rotator{margin-top:16px; display:inline-flex; gap:10px; align-items:center; font-weight:700}
  .rotator a{position:relative; padding:10px 14px; border-radius:999px; border:1px solid var(--border); overflow:hidden}
  .rotator a .ink{position:absolute; inset:0; background:var(--primary-weak); transform:translateY(100%); transition:transform .45s ease}
  .rotator a:hover .ink{transform:translateY(0)}

  .cta-row{margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
  .btn{
    display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px; font-weight:700;
    border:1px solid var(--border); background:#111; box-shadow:var(--shadow); transition:.25s ease;
  }
  .btn.primary{background:var(--primary); color:#111}
  .btn:hover{transform:translateY(-2px)}

  /* Sections */
  section{padding:80px 0; position:relative}
  .section-title{font-size:clamp(26px,4.2vw,42px); font-weight:800; margin:0 0 14px}
  .section-sub{color:var(--muted); margin-bottom:26px}

  /* About */
  .about{background:
    radial-gradient(600px 240px at 15% 10%, rgba(246,201,14,.12), transparent 70%),
    linear-gradient(#0b0b0d, #0b0b0d)}
  .about-grid{display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:center}
  .avatar-wrap{position:relative; width:240px; height:240px; border-radius:50%; overflow:hidden; margin:auto}
  .avatar-wrap::before{content:""; position:absolute; inset:-8px; border-radius:50%; padding:8px; background:conic-gradient(from 90deg, var(--primary), transparent 40%, var(--primary) 80%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
  .avatar{width:100%; height:100%; object-fit:cover}
  .intro h3{font-size:clamp(20px,2.8vw,28px); margin:6px 0 12px}
  .intro p{color:var(--muted)}

  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr; text-align:center}
  }

  /* Services */
  .services{background:linear-gradient(#0b0b0d, #0b0b0d)}
  .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  .card{
    position:relative; background:linear-gradient(180deg, #111 0%, #0e0e12 100%);
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    overflow:hidden; min-height:210px;
  }
  .card:hover{transform:translateY(-6px); border-color:rgba(246,201,14,.45); box-shadow:0 16px 38px rgba(246,201,14,.12)}
  .card i{font-size:28px; color:var(--primary)}
  .card h4{margin:10px 0 8px; font-size:20px}
  .card p{color:var(--muted)}
  .chip{display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; border:1px dashed var(--border); opacity:.85}

  @media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:620px){.cards{grid-template-columns:1fr}}

  /* Contact */
  .contact{background:
    radial-gradient(700px 300px at 85% 15%, rgba(246,201,14,.1), transparent 70%),
    linear-gradient(#0b0b0d, #0b0b0d)}
  .contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}

  form{background:#101016; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
  label{display:block; font-weight:700; margin:10px 0 6px}
  input, textarea{width:100%; padding:14px 14px; border-radius:12px; border:1px solid var(--border); background:#0f0f14; color:var(--fg)}
  textarea{min-height:130px; resize:vertical}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  @media (max-width:620px){.form-row{grid-template-columns:1fr}}

  .info{background:#101016; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); height:100%}
  .info-item{display:flex; align-items:center; gap:12px; padding:10px 0}
  .info-item i{color:var(--primary)}

  /* Footer */
  footer{padding:30px 0 50px; color:var(--muted); border-top:1px solid var(--border); text-align:center}

  /* Reveal on scroll */
  .reveal{opacity:0; transform:translateY(16px); transition: .6s ease}
  .reveal.visible{opacity:1; transform:none}