:root{
    --bg:#080911;
    --bg-panel:#0F1120;
    --card-solid:#12142A;
    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.14);
    --text:#F4F5F9;
    --text-soft:#9297AC;
    --text-faint:#5C6178;
    --violet:#7C6EF0;
    --blue:#4C8DF5;
    --grad:linear-gradient(100deg, var(--violet), var(--blue));
    --font-display:'Space Grotesk', 'Inter', sans-serif;
    --font-body:'Inter', sans-serif;
    --maxw:1240px;
  }
  body.light-mode{
    --bg:#F5F1FC;
    --bg-panel:#EDE6FA;
    --card-solid:#FFFFFF;
    --border:rgba(90,60,160,0.10);
    --border-strong:rgba(90,60,160,0.20);
    --text:#221B35;
    --text-soft:#655D80;
    --text-faint:#948CAD;
  }
  *{box-sizing:border-box;}
  button, a, .btn, .theme-btn, .nav-toggle{
    outline:none;
    -webkit-tap-highlight-color:transparent;
  }
  button:focus, a:focus, .btn:focus, .theme-btn:focus, .nav-toggle:focus{outline:none;}
  html{scroll-behavior:smooth; overflow-x:clip;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 2rem;}
  @media (max-width:640px){.wrap{padding:0 1.25rem;}}

  .bg-field{
    position:fixed;
    inset:-5%;
    z-index:-1;
    background:
      radial-gradient(700px 500px at 78% 8%, rgba(124,110,240,0.16), transparent 60%),
      radial-gradient(600px 500px at 15% 30%, rgba(76,141,245,0.10), transparent 60%),
      var(--bg);
    animation:bgDrift 20s ease-in-out infinite;
  }
  @keyframes bgDrift{
    0%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-1.5%,2%) scale(1.04);}
    100%{transform:translate(0,0) scale(1);}
  }
  @media (prefers-reduced-motion: reduce){.bg-field{animation:none;}}

  #particleField{position:fixed; inset:0; z-index:-1; pointer-events:none;}

  /* ---------- preloader ---------- */
  #preloader{
    position:fixed; inset:0; z-index:9999;
    background:color-mix(in srgb, var(--bg) 95%, transparent);
    display:flex; align-items:center; justify-content:center;
    transition:opacity 0.5s ease, visibility 0.5s ease;
  }
  #preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
  #preloader-logo{
    width:76px; height:76px;
    display:flex; align-items:center; justify-content:center;
    animation:preloaderHeartbeat 2.8s ease-in-out infinite;
  }
  #preloader-logo img{width:100%; height:100%; object-fit:contain;}
  @keyframes preloaderHeartbeat{
    0%, 100%{transform:scale(1);}
    15%{transform:scale(1.16);}
    30%{transform:scale(1);}
    45%{transform:scale(1.16);}
    70%{transform:scale(1);}
  }
  @media (prefers-reduced-motion: reduce){
    #preloader{transition:opacity 0.2s ease, visibility 0.2s ease;}
    #preloader-logo{animation:none;}
  }
  @media (prefers-reduced-motion: reduce){#particleField{display:none;}}

  /* ---------- nav ---------- */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(8,9,17,0.75);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
  body.light-mode .nav{background:rgba(245,241,252,0.75);}
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:1.1rem;
    padding-bottom:1.1rem;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-mark{
    width:64px; height:64px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    color:#fff;
  }
  .brand-mark picture{
    display:block;
    width:100%; height:100%;
  }
  .brand-name{font-family:var(--font-display); font-weight:600; font-size:15px;}
  .brand-name .dim{color:var(--text-faint); font-weight:500;}

  .nav-links{
    display:flex;
    gap:2.2rem;
    font-size:14px;
    font-weight:500;
    color:var(--text-soft);
  }
  .nav-links a{position:relative; padding:4px 0; transition:color 0.2s ease;}
  .nav-links a:hover{color:var(--text);}
  .nav-links a.active{color:var(--blue);}
  .nav-links a.active::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-6px;
    height:2px;
    background:var(--grad);
    border-radius:2px;
  }
  @media (max-width:640px){.nav-links{display:none;}}

  .nav-toggle{
    display:none;
    width:36px; height:36px;
    border-radius:10px;
    border:1px solid var(--border-strong);
    background:var(--card-solid);
    align-items:center; justify-content:center;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    margin-left:10px;
  }
  .nav-toggle span{width:16px; height:2px; background:var(--text); border-radius:2px; transition:transform 0.25s ease, opacity 0.25s ease;}
  .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  @media (max-width:640px){.nav-toggle{display:flex;}}

  .nav-mobile-panel{
    display:none;
    flex-direction:column;
    padding:0.4rem 0 1rem;
    border-top:1px solid var(--border);
  }
  .nav-mobile-panel.open{display:flex;}
  .nav-mobile-panel a{
    padding:0.9rem 0.2rem;
    font-size:15px;
    font-weight:500;
    color:var(--text-soft);
    border-bottom:1px solid var(--border);
  }
  .nav-mobile-panel a:last-child{border-bottom:none;}
  .nav-mobile-panel a.active{color:var(--blue);}
  @media (min-width:641px){.nav-mobile-panel{display:none !important;}}

  .theme-btn{
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid var(--border-strong);
    background:var(--card-solid);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    color:var(--blue);
    font-size:15px;
    box-shadow:0 2px 10px rgba(76,141,245,0.18);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
  }
  .theme-btn:hover{
    transform:translateY(-2px) rotate(15deg);
    box-shadow:0 6px 16px rgba(76,141,245,0.28);
    border-color:var(--blue);
  }

  /* ---------- hero ---------- */
  .hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    align-items:center;
  }
  @media (max-width:900px){
    .hero{grid-template-columns:1fr; padding-top:2.5rem; text-align:center;}
    .hero-buttons{justify-content:center;}
    .social-row{justify-content:center;}
    .hero-visual{margin:0 auto;}
  }

  .eyebrow{font-size:15px; color:var(--text-soft); margin-bottom:0.6rem;}
  .eyebrow strong{color:var(--violet); font-weight:500;}

  .hero-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.6rem, 5.6vw, 3.9rem);
    line-height:1.04;
    margin:0 0 0.5rem;
  }
  .hero-title .accent{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .title-rule{
    width:60px;
    height:3px;
    border-radius:3px;
    background:var(--grad);
    margin:0.6rem 0 1.5rem;
  }
  @media (max-width:900px){.title-rule{margin-left:auto; margin-right:auto;}}

  .hero-roles{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-display); font-weight:600; font-size:17px;
    margin:0 0 1rem;
    min-height:24px;
  }
  @media (max-width:900px){.hero-roles{justify-content:center;}}
  .hero-roles .role-caret{color:var(--blue);}
  #typeText{color:var(--blue);}
  #typeText::after{
    content:'|';
    display:inline-block;
    margin-left:2px;
    color:var(--blue);
    animation:blinkCursor 1s step-end infinite;
  }
  @keyframes blinkCursor{50%{opacity:0;}}
  @media (prefers-reduced-motion: reduce){#typeText::after{animation:none;}}

  .hero-desc{
    color:var(--text-soft);
    font-size:16px;
    max-width:44ch;
    margin:0 0 2rem;
  }
  @media (max-width:900px){.hero-desc{margin-left:auto; margin-right:auto;}}

  .hero-buttons{display:flex; gap:12px; margin-bottom:1.8rem; flex-wrap:wrap;}
  .hero-buttons-pair{display:flex; gap:12px;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    padding:0.85rem 1.4rem;
    border-radius:10px;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform 0.15s ease, opacity 0.15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--grad); color:#fff;}
  .btn-outline{background:transparent; border-color:var(--border-strong); color:var(--text);}
  .btn-outline:hover{background:var(--card-solid);}
  .social-label{
    font-size:11px;
    letter-spacing:0.12em;
    color:var(--text-faint);
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .social-row{display:flex; gap:10px;}
  .social-row a{
    width:36px; height:36px;
    border-radius:50%;
    background:var(--card-solid);
    border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    color:var(--text-soft);
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .social-row a:hover{color:var(--text); border-color:var(--blue);}

  /* ---------- hero visual (swap with your own image) ---------- */
  .hero-visual{
    position:relative;
    width:100%;
    max-width:480px;
    perspective:1200px;
  }
  .hero-visual .tilt-glow{
    position:absolute; inset:-14%;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(124,110,240,0.4), transparent 55%);
    opacity:0;
    transition:opacity 0.35s ease;
    pointer-events:none;
    filter:blur(24px);
    z-index:0;
  }
  .hero-visual:hover .tilt-glow{opacity:1;}
  .hero-visual .tilt-inner{
    position:relative;
    z-index:1;
    transform-style:preserve-3d;
    transition:transform 0.15s ease-out;
    will-change:transform;
    border-radius:20px;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-visual .tilt-inner{transition:none;}
  }
  /* ---------- services strip ---------- */
  .services{
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:1.8rem;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.6rem;
    margin-bottom:2.2rem;
	margin-top:-7px !important;
  }
  @media (max-width:900px){.services{grid-template-columns:repeat(2, 1fr);}}
  @media (max-width:520px){.services{grid-template-columns:1fr;}}
  .service-item{display:flex; gap:14px;}
  .service-icon{
    flex:none;
    width:44px; height:44px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
  }
  .service-icon.c1{background:rgba(76,141,245,0.16); color:#7CA9F8;}
  .service-icon.c2{background:rgba(124,110,240,0.16); color:#A79CF5;}
  .service-icon.c3{background:rgba(48,196,150,0.16); color:#4FD8AC;}
  .service-icon.c4{background:rgba(230,100,180,0.16); color:#F193C9;}
  .service-title{font-weight:600; font-size:15px; margin-bottom:4px;}
  .service-desc{font-size:13px; color:var(--text-soft); line-height:1.55;}

  /* ---------- projects ---------- */
  .projects-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.4rem;
  }
  .projects-eyebrow{font-size:12px; font-weight:600; letter-spacing:0.14em; color:var(--violet);}
  .projects-sub{font-size:13.5px; color:var(--text-soft); margin:5px 0 0;}
  .view-all{font-size:13px; font-weight:600; color:var(--blue); display:flex; align-items:center; gap:6px;}

  .projects-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(210px, 340px));
    gap:1.3rem;
    margin-bottom:2.2rem;
    perspective:1200px;
  }
  @media (max-width:560px){.projects-grid{grid-template-columns:1fr;}}
  .project-card{
    background:var(--card-solid);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    transition:border-color 0.2s ease, transform 0.15s ease-out;
    transform-style:preserve-3d;
    will-change:transform;
  }
  .project-card:hover{border-color:var(--border-strong); transform:translateY(-3px);}
  @media (prefers-reduced-motion: reduce){.project-card{transition:border-color 0.2s ease;}}
  .project-thumb{
    height:130px;
    background:linear-gradient(160deg, rgba(76,141,245,0.14), rgba(124,110,240,0.08)), #0B0D1B;
    position:relative;
    display:flex;
    align-items:flex-start;
    padding:14px;
  }
  .project-thumb-icon{
    width:34px; height:34px;
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:15px;
    color:#fff;
    position:absolute;
    top:12px; left:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.35);
    z-index:2;
  }
  .project-body{padding:1rem 1.1rem 1.2rem;}
  .project-title{font-weight:600; font-size:14.5px; margin-bottom:3px;}
  .project-tag{font-size:12px; font-weight:500; margin-bottom:8px;}
  .project-desc{font-size:12.5px; color:var(--text-soft); line-height:1.5; margin-bottom:10px;}
  .project-arrow{font-size:13px; color:var(--text-soft);}

  /* ---------- stats bar ---------- */
  .stats{
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:1.6rem 1.8rem;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.2rem;
    margin-bottom:4rem;
  }
  @media (max-width:700px){.stats{grid-template-columns:repeat(2, 1fr);}}
  .stat-item{display:flex; align-items:center; gap:12px;}
  .stat-icon{
    width:38px; height:38px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:15px;
    flex:none;
  }
  .stat-num{font-family:var(--font-display); font-weight:700; font-size:19px;}
  .stat-label{font-size:12px; color:var(--text-soft);}

  footer{
    border-top:1px solid var(--border);
    padding:2rem 0;
    text-align:center;
    font-size:12.5px;
    color:var(--text-faint);
  }

  /* ---------- about me modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(5,6,12,0.72);
    backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center;
    padding:1.5rem;
  }
  .modal-overlay.open{display:flex; animation:fadeIn 0.2s ease;}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  @keyframes popIn{from{opacity:0; transform:translateY(10px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);}}

  .modal-box{
    background:var(--card-solid);
    border:1px solid var(--border-strong);
    border-radius:20px;
    max-width:960px; width:100%;
    max-height:92vh;
    max-height:92dvh;
    overflow-y:auto;
    position:relative;
    box-shadow:0 25px 70px rgba(0,0,0,0.55);
    animation:popIn 0.25s ease;
  }
  .modal-box::-webkit-scrollbar{width:8px;}
  .modal-box::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:8px;}

  .modal-close{
    position:absolute; top:16px; right:16px; z-index:2;
    width:32px; height:32px; border-radius:50%;
    background:var(--bg-panel); border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-soft); font-size:13px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .modal-close:hover{color:var(--text); border-color:var(--blue);}

  .modal-hero{
    padding:2rem 2rem 1.5rem;
    background:linear-gradient(160deg, rgba(124,110,240,0.14), rgba(76,141,245,0.06));
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:16px;
  }
  .modal-avatar{
    width:60px; height:60px; border-radius:16px; flex:none;
    background:var(--grad); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:20px;
    box-shadow:0 8px 20px rgba(76,141,245,0.3);
    overflow:hidden;
  }
  .modal-avatar img{width:100%; height:100%; object-fit:cover;}
  .modal-name{font-family:var(--font-display); font-weight:700; font-size:20px; margin:0 0 3px;}
  .modal-role{font-size:13px; color:var(--blue); font-weight:500;}

  .modal-body{padding:1.6rem 2rem 2rem;}
  .modal-body p{color:var(--text-soft); font-size:13.5px; line-height:1.7; margin:0 0 0.9rem;}
  .modal-body p:last-child{margin-bottom:0;}

  .modal-section{margin-top:1.8rem;}
  .modal-section-title{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; margin-bottom:1.1rem;}
  .modal-section-title i{color:var(--blue); font-size:13px;}

  .modal-columns{display:grid; grid-template-columns:1.15fr 1fr; gap:0 2rem; margin-top:1.8rem;}
  .modal-columns .modal-section{margin-top:0;}
  .modal-columns .modal-section + .modal-section{margin-top:1.8rem;}
  @media (max-width:720px){.modal-columns{grid-template-columns:1fr;}}

  .modal-chips{display:flex; flex-wrap:wrap; gap:10px;}
  .modal-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:0.55rem 1.05rem;
    border-radius:30px;
    font-size:12.5px; font-weight:500;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--border-strong);
  }
  .modal-chip i{font-size:12px;}

  .modal-timeline{position:relative; padding-left:20px;}
  .modal-timeline::before{content:""; position:absolute; left:4px; top:4px; bottom:4px; width:2px; background:var(--border-strong);}
  .modal-t-item{position:relative; padding-bottom:1.3rem;}
  .modal-t-item:last-child{padding-bottom:0;}
  .modal-t-dot{position:absolute; left:-20px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px rgba(76,141,245,0.18);}
  .modal-t-date{font-size:11px; color:var(--text-faint); margin-bottom:2px;}
  .modal-t-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .modal-t-role{font-weight:600; font-size:13.5px;}
  .modal-t-badge{font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap;}
  .modal-t-badge.current{background:rgba(76,141,245,0.16); color:#7CA9F8;}
  .modal-t-badge.duration{background:rgba(255,255,255,0.06); color:var(--text-soft);}
  .modal-t-company{font-size:12px; color:var(--blue); font-weight:500; margin:2px 0 3px;}
  .modal-t-desc{font-size:12px; color:var(--text-soft); line-height:1.5;}

  .modal-skill-row{margin-bottom:0.85rem;}
  .modal-skill-row:last-child{margin-bottom:0;}
  .modal-skill-top{display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:5px;}
  .modal-skill-pct{color:var(--text-soft); font-weight:600; flex:none;}
  .modal-skill-bar{height:5px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden;}
  .modal-skill-fill{height:100%; border-radius:4px; background:var(--grad); width:0;}
  @media (prefers-reduced-motion: reduce){.modal-skill-fill{transition:none !important;}}

  .modal-reveal{opacity:0; transform:translateY(14px);}
  @media (prefers-reduced-motion: reduce){.modal-reveal{opacity:1; transform:none;}}

  .modal-certs{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
  @media (max-width:560px){.modal-certs{grid-template-columns:repeat(2, 1fr);}}
  .modal-cert{background:var(--bg-panel); border:1px solid var(--border); border-radius:12px; padding:0.9rem 0.6rem; text-align:center;}
  .modal-cert-icon{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; margin:0 auto 8px;}
  .modal-cert-title{font-weight:600; font-size:11.5px; margin-bottom:2px;}
  .modal-cert-sub{font-size:9.5px; color:var(--text-faint); line-height:1.3;}

  @media (max-width:640px){
    .modal-hero{padding:1.5rem 1.3rem 1.2rem;}
    .modal-body{padding:1.3rem 1.3rem 1.6rem;}
  }

  /* ---------- scroll/entrance reveal ---------- */
  .reveal{opacity:0; transform:translateY(22px);}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none;}}

  /* ---------- scroll-to-top button ---------- */
  .scroll-top-btn{
    position:fixed; right:20px; bottom:20px; z-index:60;
    width:44px; height:44px; border-radius:50%;
    background:var(--card-solid); border:1px solid var(--border-strong);
    color:var(--text-soft);
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    cursor:pointer;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, color 0.2s ease, border-color 0.2s ease;
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
  }
  .scroll-top-btn.visible{opacity:1; visibility:visible; transform:translateY(0);}
  .scroll-top-btn:hover{color:var(--text); border-color:var(--blue);}
  @media (prefers-reduced-motion: reduce){.scroll-top-btn{transition:opacity 0.25s ease, visibility 0.25s;}}