:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#94a3b8;
      --accent:#06b6d4;
      --accent-purple:#7c3aed;
      --glass:rgba(255,255,255,0.03);
      --radius:16px;
      color-scheme:dark;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;scroll-padding-top:100px}
    body{
      min-height:100vh;
      background:#0a0e1a;
      color:#e6eef6;
      line-height:1.6;
      padding:16px;
      position:relative;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
    }
    body.light-mode{
      --bg:#f8fafc;
      --card:#ffffff;
      --muted:#64748b;
      --accent:#0891b2;
      --accent-purple:#8b5cf6;
      background:#f1f5f9;
      color:#0f172a;
    }
    .loading-screen{
      position:fixed;
      inset:0;
      background:linear-gradient(135deg,#0a0e1a,#1a1f3a);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:9999;
      transition:opacity 0.5s,visibility 0.5s;
    }
    .loading-screen.hidden{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
    .loader{
      width:60px;
      height:60px;
      border:4px solid rgba(6,182,212,0.2);
      border-top-color:#06b6d4;
      border-radius:50%;
      animation:spin 1s linear infinite;
    }
    @keyframes spin{
      to{transform:rotate(360deg)}
    }
    .bg-gradient{
      position:fixed;
      inset:0;
      z-index:-3;
      background:linear-gradient(135deg,#0a0e1a 0%,#0f1724 25%,#1a1f3a 50%,#0f1724 75%,#0a0e1a 100%);
      background-size:400% 400%;
      animation:gradientMove 25s ease infinite;
      transition:background 0.5s;
    }
    body.light-mode .bg-gradient{
      background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 25%,#cbd5e1 50%,#e2e8f0 75%,#f1f5f9 100%);
    }
    .bg-overlay{
      position:fixed;
      inset:0;
      z-index:-2;
      background:radial-gradient(circle at 20% 50%,rgba(6,182,212,0.12) 0%,transparent 50%),
                 radial-gradient(circle at 80% 80%,rgba(124,58,237,0.12) 0%,transparent 50%);
      animation:overlayMove 20s ease infinite alternate;
    }
    @keyframes gradientMove{
      0%,100%{background-position:0% 50%}
      50%{background-position:100% 50%}
    }
    @keyframes overlayMove{
      0%{transform:translate(0,0) scale(1)}
      100%{transform:translate(50px,30px) scale(1.1)}
    }
    .particles{
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      opacity:1;
      transition:opacity 0.5s;
    }
    body.light-mode .particles{opacity:0.3}
    .particle{
      position:absolute;
      background:rgba(6,182,212,0.6);
      border-radius:50%;
      animation:float linear infinite;
    }
    body.light-mode .particle{background:rgba(8,145,168,0.5)}
    .particle.small{width:2px;height:2px}
    .particle.medium{width:4px;height:4px;opacity:0.4}
    .particle.large{width:6px;height:6px;opacity:0.2}
    @keyframes float{
      0%{transform:translateY(100vh) translateX(0) scale(0) rotate(0deg);opacity:0}
      10%{opacity:1}
      90%{opacity:1}
      100%{transform:translateY(-100vh) translateX(100px) scale(1.5) rotate(360deg);opacity:0}
    }
    .container{
      max-width:1100px;
      margin:0 auto;
      padding:20px;
      position:relative;
      z-index:1;
    }
    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:48px;
      padding:24px 32px;
      background:rgba(11,18,32,0.95);
      backdrop-filter:blur(10px);
      border-radius:20px;
      border:1px solid rgba(6,182,212,0.25);
      box-shadow:0 0 0 1px rgba(6,182,212,0.15);
      animation:slideDown 0.8s cubic-bezier(0.4,0,0.2,1);
      position:sticky;
      top:16px;
      overflow:hidden;
      z-index:50;
      min-height:72px;
      transition:all 0.5s;
    }
    body.light-mode header{
      background:rgba(255,255,255,0.95);
      border-color:rgba(8,145,168,0.25);
      box-shadow:0 0 0 1px rgba(8,145,168,0.15);
    }
    header::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg,transparent,rgba(6,182,212,0.15),transparent);
      animation:headerShine 8s infinite;
    }
    @keyframes headerShine{
      0%,100%{left:-100%}
      50%{left:200%}
    }
    @keyframes slideDown{
      from{transform:translateY(-50px);opacity:0}
      to{transform:translateY(0);opacity:1}
    }
    .brand{
      display:flex;
      gap:14px;
      align-items:center;
      animation:fadeIn 1s ease 0.3s both;
      z-index:10;
    }
    @keyframes fadeIn{
      from{opacity:0;transform:translateX(-20px)}
      to{opacity:1;transform:translateX(0)}
    }
    .logo{
      width:52px;
      height:52px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--accent),var(--accent-purple));
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:22px;
      box-shadow:0 8px 28px rgba(6,182,212,0.5),0 0 0 4px rgba(6,182,212,0.15);
      transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
      animation:pulse 3s ease-in-out infinite;
      position:relative;
      letter-spacing:-1px;
    }
    .logo::after{
      content:'';
      position:absolute;
      top:-4px;
      left:-4px;
      right:-4px;
      bottom:-4px;
      border-radius:16px;
      border:2px solid rgba(6,182,212,0.4);
      animation:logoBorder 3s ease-in-out infinite;
    }
    @keyframes pulse{
      0%,100%{box-shadow:0 8px 28px rgba(6,182,212,0.5),0 0 0 4px rgba(6,182,212,0.15)}
      50%{box-shadow:0 8px 36px rgba(6,182,212,0.7),0 0 0 6px rgba(6,182,212,0.25)}
    }
    @keyframes logoBorder{
      0%,100%{transform:scale(1);opacity:1}
      50%{transform:scale(1.2);opacity:0.5}
    }
    .logo:hover{
      transform:rotate(360deg) scale(1.2);
      box-shadow:0 12px 48px rgba(6,182,212,0.8);
    }
    .brand-text h1{
      font-size:22px;
      margin:0;
      font-weight:800;
      background:linear-gradient(135deg,#ffffff,var(--accent));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      letter-spacing:-0.5px;
      transition:all 0.5s;
    }
    body.light-mode .brand-text h1{
      background:linear-gradient(135deg,#0f172a,var(--accent));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .brand-text .subtitle{
      font-size:14px;
      color:var(--muted);
      margin-top:3px;
      font-weight:500;
    }
    nav{
      display:flex;
      gap:8px;
      animation:fadeIn 1s ease 0.5s both;
      flex-wrap:wrap;
      justify-content:center;
    }
    nav a{
      color:var(--muted);
      text-decoration:none;
      font-size:15px;
      font-weight:600;
      transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
      position:relative;
      padding:10px 18px;
      border-radius:10px;
    }
    nav a::before{
      content:'';
      position:absolute;
      bottom:6px;
      left:18px;
      right:18px;
      height:2px;
      background:linear-gradient(90deg,var(--accent),var(--accent-purple));
      transform:scaleX(0);
      transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
      border-radius:2px;
    }
    nav a::after{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(6,182,212,0.12);
      border-radius:10px;
      opacity:0;
      transition:opacity 0.3s;
    }
    nav a:hover{color:#ffffff}
    body.light-mode nav a:hover{color:#0f172a}
    nav a:hover::before{transform:scaleX(1)}
    nav a:hover::after{opacity:1}
    .theme-toggle{
      width:52px;
      height:52px;
      border-radius:14px;
      background:rgba(6,182,212,0.12);
      border:2px solid rgba(6,182,212,0.3);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
      font-size:24px;
      position:relative;
      overflow:hidden;
    }
    .theme-toggle:hover{
      background:rgba(6,182,212,0.22);
      border-color:rgba(6,182,212,0.5);
      transform:rotate(180deg) scale(1.1);
    }
    .hero{
      display:grid;
      grid-template-columns:1fr 380px;
      gap:36px;
      margin-bottom:80px;
      align-items:start;
    }
    .card{
      background:rgba(11,18,32,0.95);
      backdrop-filter:blur(10px);
      padding:28px;
      border-radius:18px;
      box-shadow:0 8px 32px rgba(2,6,23,0.6),inset 0 1px 0 rgba(255,255,255,0.08);
      border:1px solid rgba(6,182,212,0.2);
      transition:all 0.5s cubic-bezier(0.4,0,0.2,1);
      opacity:0;
      transform:translateY(30px);
      animation:slideUp 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
      position:relative;
      overflow:hidden;
      will-change:transform;
    }
    body.light-mode .card{
      background:rgba(255,255,255,0.95);
      box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(0,0,0,0.05);
      border-color:rgba(8,145,168,0.2);
    }
    .card::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg,transparent,rgba(6,182,212,0.12),transparent);
      transition:left 0.8s;
    }
    .card:hover::before{left:100%}
    @keyframes slideUp{
      to{opacity:1;transform:translateY(0)}
    }
    .card:hover{
      transform:translateY(-10px);
      box-shadow:0 20px 60px rgba(6,182,212,0.35),inset 0 1px 0 rgba(255,255,255,0.15);
      border-color:rgba(6,182,212,0.4);
    }
    body.light-mode .card:hover{
      box-shadow:0 20px 60px rgba(8,145,168,0.25),inset 0 1px 0 rgba(0,0,0,0.1);
    }
    .intro h2{
      font-size:36px;
      margin:0 0 16px 0;
      font-weight:900;
      background:linear-gradient(135deg,#ffffff,var(--accent),var(--accent-purple));
      background-size:200% auto;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      animation:gradientText 3s ease infinite;
      line-height:1.15;
      letter-spacing:-1px;
    }
    body.light-mode .intro h2{
      background:linear-gradient(135deg,#0f172a,var(--accent),var(--accent-purple));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    @keyframes gradientText{
      0%,100%{background-position:0% center}
      50%{background-position:100% center}
    }
    .intro>p{
      color:var(--muted);
      margin:0 0 28px 0;
      font-size:16px;
      line-height:1.7;
      font-weight:400;
    }
    .socials{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:14px 24px;
      border-radius:12px;
      background:rgba(6,182,212,0.12);
      border:2px solid rgba(6,182,212,0.3);
      text-decoration:none;
      color:#ffffff;
      transition:all .4s cubic-bezier(0.4,0,0.2,1);
      font-size:15px;
      font-weight:600;
      cursor:pointer;
      position:relative;
      overflow:hidden;
    }
    body.light-mode .btn{
      color:#0f172a;
      background:rgba(8,145,168,0.12);
      border-color:rgba(8,145,168,0.3);
    }
    .btn::before{
      content:'';
      position:absolute;
      top:50%;
      left:50%;
      width:0;
      height:0;
      background:radial-gradient(circle,rgba(6,182,212,0.4),transparent);
      transform:translate(-50%,-50%);
      transition:width 0.6s,height 0.6s;
      border-radius:50%;
    }
    .btn:hover::before{width:300px;height:300px}
    .btn:hover{
      background:rgba(6,182,212,0.22);
      transform:translateY(-4px);
      border-color:rgba(6,182,212,0.6);
      box-shadow:0 10px 28px rgba(6,182,212,0.4);
    }
    .btn span{position:relative;z-index:1}
    .profile{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .avatar{
      width:100%;
      height:240px;
      border-radius:20px;
      background:linear-gradient(135deg,#0ea5a4,var(--accent-purple));
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 12px 48px rgba(6,182,212,0.5),inset 0 -2px 8px rgba(0,0,0,0.3);
      position:relative;
      animation:float-avatar 5s ease-in-out infinite;
      border:3px solid rgba(6,182,212,0.3);
    }
    @keyframes float-avatar{
      0%,100%{transform:translateY(0) rotate(0deg)}
      25%{transform:translateY(-10px) rotate(-1deg)}
      75%{transform:translateY(-10px) rotate(1deg)}
    }
    .avatar::after{
      content:'';
      position:absolute;
      top:-50%;
      left:-50%;
      width:200%;
      height:200%;
      background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.2) 50%,transparent 70%);
      animation:shine 4s infinite;
    }
    @keyframes shine{
      0%{transform:rotate(0deg)}
      100%{transform:rotate(360deg)}
    }
    .avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
      position:relative;
      z-index:1;
    }
    .avatar:hover img{transform:scale(1.2) rotate(2deg)}
    .profile .card{
      padding:22px;
      animation-delay:0.2s;
    }
    .profile .label{
      font-size:11px;
      color:var(--muted);
      margin-bottom:7px;
      text-transform:uppercase;
      letter-spacing:1.5px;
      font-weight:700;
    }
    .profile .value{
      font-size:16px;
      font-weight:600;
      color:#ffffff;
    }
    body.light-mode .profile .value{color:#0f172a}
    .section-card{margin-bottom:36px}
    .section-card:last-child{margin-bottom:0}
    .intro{
      display:flex;
      flex-direction:column;
      gap:0;
    }
    .intro-card{
      margin-bottom:36px;
      animation-delay:0.1s;
    }
    .section-card h3{
      font-size:20px;
      margin:0 0 18px 0;
      font-weight:800;
      color:var(--accent);
      display:flex;
      align-items:center;
      gap:12px;
      letter-spacing:-0.5px;
    }
    .section-card h3::before{
      content:'';
      width:5px;
      height:26px;
      background:linear-gradient(180deg,var(--accent),var(--accent-purple));
      border-radius:3px;
      box-shadow:0 0 10px rgba(6,182,212,0.5);
    }
    .section-card p{
      color:var(--muted);
      margin:0;
      line-height:1.85;
      font-size:15px;
    }
    .intro .card:nth-child(1){animation:slideInFromLeft 0.8s cubic-bezier(0.4,0,0.2,1) 0.1s both}
    .intro .card:nth-child(2){animation:slideInFromBottom 0.8s cubic-bezier(0.4,0,0.2,1) 0.3s both}
    .intro .card:nth-child(3){animation:slideInFromLeft 0.8s cubic-bezier(0.4,0,0.2,1) 0.5s both}
    .profile .avatar{animation:scaleIn 1s cubic-bezier(0.4,0,0.2,1) 0.2s both}
    .profile .card{animation:slideInFromRight 0.8s cubic-bezier(0.4,0,0.2,1) both}
    .profile .card:nth-child(2){animation-delay:0.4s}
    .profile .card:nth-child(3){animation-delay:0.6s}
    @keyframes slideInFromLeft{
      0%{opacity:0;transform:translateX(-50px)}
      100%{opacity:1;transform:translateX(0)}
    }
    @keyframes slideInFromRight{
      0%{opacity:0;transform:translateX(50px)}
      100%{opacity:1;transform:translateX(0)}
    }
    @keyframes slideInFromBottom{
      0%{opacity:0;transform:translateY(50px)}
      100%{opacity:1;transform:translateY(0)}
    }
    @keyframes scaleIn{
      0%{opacity:0;transform:scale(0.8)}
      100%{opacity:1;transform:scale(1)}
    }
    .skills{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      justify-content:flex-start;
      align-items:center;
    }
    .chip{
      background:linear-gradient(135deg,rgba(6,182,212,0.15),rgba(124,58,237,0.15));
      padding:14px 26px;
      border-radius:32px;
      font-size:14px;
      color:#ffffff;
      border:2px solid rgba(6,182,212,0.35);
      font-weight:700;
      transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
      cursor:default;
      position:relative;
      overflow:hidden;
      letter-spacing:0.5px;
      min-width:fit-content;
      white-space:nowrap;
    }
    body.light-mode .chip{
      color:#0f172a;
      background:linear-gradient(135deg,rgba(8,145,168,0.15),rgba(139,92,246,0.15));
      border-color:rgba(8,145,168,0.35);
    }
    .chip::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg,transparent,rgba(6,182,212,0.4),transparent);
      transition:left 0.5s;
    }
    .chip:hover::before{left:100%}
    .chip:hover{
      background:linear-gradient(135deg,rgba(6,182,212,0.3),rgba(124,58,237,0.3));
      transform:translateY(-5px) scale(1.1);
      box-shadow:0 10px 24px rgba(6,182,212,0.5);
      border-color:rgba(6,182,212,0.7);
    }
    .section-title{
      font-size:32px;
      margin:0 0 36px 0;
      font-weight:900;
      background:linear-gradient(135deg,#ffffff,var(--accent),var(--accent-purple));
      background-size:200% auto;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      animation:gradientText 3s ease infinite;
      position:relative;
      display:inline-block;
      letter-spacing:-1px;
    }
    body.light-mode .section-title{
      background:linear-gradient(135deg,#0f172a,var(--accent),var(--accent-purple));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .section-title::after{
      content:'';
      position:absolute;
      bottom:-10px;
      left:0;
      width:70px;
      height:5px;
      background:linear-gradient(90deg,var(--accent),var(--accent-purple));
      border-radius:3px;
      box-shadow:0 2px 10px rgba(6,182,212,0.5);
    }
    .project-slider-container{
      position:relative;
      overflow:hidden;
      padding:0 20px;
    }
    .project-list{
      display:flex;
      gap:20px;
      padding:20px 0;
      transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
      align-items:stretch;
    }
    .project{
      text-decoration:none;
      color:inherit;
      padding:0;
      background:rgba(11,18,32,0.95);
      backdrop-filter:blur(10px);
      border-radius:16px;
      transition:all 0.5s cubic-bezier(0.4,0,0.2,1);
      cursor:pointer;
      border:1px solid rgba(6,182,212,0.2);
      position:relative;
      overflow:hidden;
      opacity:0;
      transform:translateY(40px);
      width:320px;
      flex-shrink:0;
      display:flex;
      flex-direction:column;
      min-height:200px;
    }
    body.light-mode .project{
      background:rgba(255,255,255,0.95);
      border-color:rgba(8,145,168,0.2);
    }
    .project-image{
      width:100%;
      height:180px;
      object-fit:cover;
      border-radius:16px 16px 0 0;
      transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
      background:linear-gradient(135deg,#1a1f3a,#0f1724);
    }
    .project:hover .project-image{
      transform:scale(1.1);
    }
    .project-content{
      padding:24px;
      flex:1;
      display:flex;
      flex-direction:column;
    }
    .project::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:5px;
      background:linear-gradient(90deg,var(--accent),var(--accent-purple));
      transform:scaleX(0);
      transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
      box-shadow:0 2px 10px rgba(6,182,212,0.5);
    }
    .project::after{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg,transparent,rgba(6,182,212,0.15),transparent);
      transition:left 0.8s;
    }
    .project:hover::before{transform:scaleX(1)}
    .project:hover::after{left:100%}
    .project.visible{animation:projectSlideUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards}
    @keyframes projectSlideUp{
      to{opacity:1;transform:translateY(0)}
    }
    .project:nth-child(1){animation-delay:0.1s}
    .project:nth-child(2){animation-delay:0.2s}
    .project:nth-child(3){animation-delay:0.3s}
    .project:hover{
      transform:translateY(-14px) scale(1.03);
      box-shadow:0 24px 72px rgba(6,182,212,0.5);
      border-color:rgba(6,182,212,0.6);
    }
    .project h3{
      margin:0 0 14px 0;
      color:#ffffff;
      transition:all 0.3s ease;
      font-size:22px;
      font-weight:800;
      letter-spacing:-0.5px;
    }
    body.light-mode .project h3{color:#0f172a}
    .project p{
      margin:0;
      color:var(--muted);
      font-size:15px;
      transition:color 0.3s ease;
      line-height:1.75;
    }
    .project:hover h3{
      color:var(--accent);
      transform:translateX(6px);
    }
    .slider-nav{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:12px;
      margin-top:24px;
    }
    .slider-btn{
      width:40px;
      height:40px;
      border-radius:50%;
      background:rgba(6,182,212,0.15);
      border:2px solid rgba(6,182,212,0.3);
      color:#06b6d4;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      font-weight:bold;
      transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
      user-select:none;
    }
    .slider-btn:hover{
      background:rgba(6,182,212,0.25);
      border-color:rgba(6,182,212,0.5);
      transform:scale(1.1);
    }
    .slider-btn:disabled{
      opacity:0.4;
      cursor:not-allowed;
      transform:none;
    }
    .slider-dots{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .slider-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:rgba(6,182,212,0.3);
      cursor:pointer;
      transition:all 0.3s ease;
    }
    .slider-dot.active{
      background:#06b6d4;
      transform:scale(1.2);
    }
    .slider-dot:hover{background:rgba(6,182,212,0.6)}
    #contact{animation:fadeIn 1s ease}
    #contact form{
      margin-top:28px;
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    #contact input,
    #contact textarea{
      padding:14px 18px;
      border-radius:12px;
      border:2px solid rgba(6,182,212,0.3);
      background:rgba(6,182,212,0.08);
      color:#ffffff;
      font-family:inherit;
      font-size:14px;
      font-weight:500;
      transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    body.light-mode #contact input,
    body.light-mode #contact textarea{
      background:rgba(8,145,168,0.05);
      border-color:rgba(8,145,168,0.3);
      color:#0f172a;
    }
    #contact input::placeholder,
    #contact textarea::placeholder{color:rgba(148,163,184,0.7)}
    #contact input:focus,
    #contact textarea:focus{
      outline:none;
      border-color:var(--accent);
      background:rgba(6,182,212,0.15);
      box-shadow:0 0 0 4px rgba(6,182,212,0.15),0 6px 24px rgba(6,182,212,0.25);
      transform:translateY(-3px);
    }
    #contact textarea{resize:vertical;min-height:120px}
    #contact button{
      align-self:flex-start;
      background:linear-gradient(135deg,var(--accent),#0891a8);
      color:#fff;
      border:none;
      font-weight:700;
      font-size:15px;
      box-shadow:0 8px 28px rgba(6,182,212,0.5);
      position:relative;
      overflow:hidden;
      padding:14px 32px;
      border-radius:12px;
      cursor:pointer;
    }
    #contact button::before{
      content:'';
      position:absolute;
      top:50%;
      left:50%;
      width:0;
      height:0;
      background:rgba(255,255,255,0.3);
      transform:translate(-50%,-50%);
      transition:width 0.6s,height 0.6s;
      border-radius:50%;
    }
    #contact button:hover::before{width:300px;height:300px}
    #contact button:hover{
      background:linear-gradient(135deg,#0891a8,var(--accent));
      box-shadow:0 12px 40px rgba(6,182,212,0.7);
      transform:translateY(-3px);
    }
    #contact button:disabled{opacity:0.6;cursor:not-allowed}
    .form-message{
      padding:14px 18px;
      border-radius:10px;
      font-size:14px;
      font-weight:600;
      margin-top:10px;
      animation:slideIn 0.3s ease;
    }
    .form-message.success{
      background:rgba(34,197,94,0.15);
      border:2px solid rgba(34,197,94,0.4);
      color:#4ade80;
    }
    .form-message.error{
      background:rgba(239,68,68,0.15);
      border:2px solid rgba(239,68,68,0.4);
      color:#f87171;
    }
    @keyframes slideIn{
      from{opacity:0;transform:translateY(-10px)}
      to{opacity:1;transform:translateY(0)}
    }
    footer{
      margin-top:90px;
      padding:36px 0;
      text-align:center;
      color:var(--muted);
      font-size:15px;
      font-weight:500;
      border-top:1px solid rgba(6,182,212,0.2);
      animation:fadeIn 1s ease;
      position:relative;
    }
    footer::before{
      content:'';
      position:absolute;
      top:-2px;
      left:50%;
      transform:translateX(-50%);
      width:120px;
      height:3px;
      background:linear-gradient(90deg,transparent,var(--accent),transparent);
      box-shadow:0 2px 10px rgba(6,182,212,0.5);
    }
    .scroll-indicator{
      position:fixed;
      bottom:24px;
      right:24px;
      width:50px;
      height:50px;
      background:linear-gradient(135deg,var(--accent),var(--accent-purple));
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow:0 8px 24px rgba(6,182,212,0.6),0 0 0 3px rgba(6,182,212,0.2);
      transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
      z-index:999;
      opacity:0;
      pointer-events:none;
      border:2px solid rgba(255,255,255,0.2);
    }
    .scroll-indicator.visible{
      opacity:1;
      pointer-events:all;
      animation:bounceIn 0.6s cubic-bezier(0.4,0,0.2,1);
    }
    @keyframes bounceIn{
      0%{transform:scale(0) rotate(0deg)}
      50%{transform:scale(1.2) rotate(180deg)}
      100%{transform:scale(1) rotate(360deg)}
    }
    .scroll-indicator:hover{
      transform:translateY(-10px) scale(1.15);
      box-shadow:0 16px 48px rgba(6,182,212,0.8),0 0 0 6px rgba(6,182,212,0.3);
    }
    .scroll-indicator span{
      font-size:24px;
      animation:bounce 2.5s infinite;
      display:block;
    }
    @keyframes bounce{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-8px)}
    }
    @media(prefers-reduced-motion:reduce){
      *{
        animation-duration:0.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:0.01ms!important;
      }
    }
    @media(max-width:1024px){
      .container{padding:18px}
      header{padding:24px 28px;margin-bottom:48px;min-height:76px}
      nav{display:none}
      .hero{grid-template-columns:1fr;gap:28px;margin-bottom:64px}
      .avatar{height:240px;max-width:400px;margin:0 auto}
      .section-title{font-size:32px;margin-bottom:40px}
      .intro h2{font-size:36px;margin-bottom:16px}
      .project-slider-container{padding:0 16px}
      .project{width:320px;min-height:180px}
    }
    @media(max-width:768px){
      body{padding:12px}
      .container{padding:12px}
      header{
        display:flex;
        flex-wrap:nowrap;
        padding:16px 20px;
        gap:16px;
        border-radius:18px;
        min-height:auto;
        justify-content:space-between;
      }
      .brand{
        flex:1;
        min-width:150px;
      }
      nav{display:none}
      .theme-toggle{
        width:44px;
        height:44px;
        font-size:18px;
        flex-shrink:0;
      }
      .brand-text h1{font-size:16px}
      .brand-text .subtitle{font-size:12px}
      .logo{width:44px;height:44px;font-size:18px}
      .intro h2{font-size:28px;margin-bottom:14px;line-height:1.2}
      .intro>p{font-size:15px;line-height:1.6;margin-bottom:24px}
      .section-title{font-size:24px;margin-bottom:32px}
      .btn{font-size:14px;padding:12px 18px;width:100%}
      .socials{flex-direction:column;gap:12px}
      .avatar{height:240px;max-width:100%}
      .skills{gap:12px;justify-content:center}
      .chip{font-size:13px;padding:10px 18px;border-radius:24px}
      .scroll-indicator{width:52px;height:52px;bottom:24px;right:24px}
      .scroll-indicator span{font-size:24px}
      .project-slider-container{padding:0 8px}
      .project{width:260px;min-height:140px}
      .project-content{padding:20px}
      .project h3{font-size:18px}
      .project p{font-size:14px}
      .section-card{margin-bottom:28px}
      .intro-card{margin-bottom:28px}
      .hero{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
      #projects{margin-bottom:40px!important}
      footer{margin-top:50px;padding:24px 0}
    }
    @media(max-width:480px){
      body{padding:12px}
      .container{padding:12px}
      header{padding:18px 20px;border-radius:18px;top:12px;margin-bottom:32px;min-height:68px;gap:14px}
      .intro h2{font-size:26px;margin-bottom:14px}
      .section-title{font-size:22px;margin-bottom:28px}
      .brand-text h1{font-size:16px}
      .brand-text .subtitle{display:none}
      .logo{width:44px;height:44px;font-size:18px;border-radius:12px}
      .theme-toggle{width:44px;height:44px;font-size:18px}
      .btn{width:100%;justify-content:center;padding:15px 22px;font-size:15px}
      .socials{flex-direction:column;gap:14px}
      .intro>p{margin-bottom:28px;font-size:15px;line-height:1.6}
      .avatar{height:240px}
      .card{padding:28px;border-radius:18px}
      .section-card{margin-bottom:28px}
      .intro-card{margin-bottom:28px}
      .project{width:260px;min-height:140px}
      .project-content{padding:16px}
      .project-slider-container{padding:0 8px}
      .skills{gap:12px;justify-content:center}
      .chip{font-size:13px;padding:12px 20px;border-radius:24px}
      .scroll-indicator{width:52px;height:52px;bottom:24px;right:24px}
      .scroll-indicator span{font-size:26px}
      .hero{margin-bottom:40px}
      #projects{margin-bottom:40px!important}
      footer{margin-top:50px;padding:28px 0}
    }
    @media(min-width:1025px){
      .container{padding:32px}
      header{padding:32px 40px;margin-bottom:64px;min-height:88px}
      .hero{grid-template-columns:1fr 400px;gap:48px;margin-bottom:96px}
      .intro h2{font-size:40px;margin-bottom:20px}
      .intro>p{font-size:17px;line-height:1.7;margin-bottom:32px}
      .section-title{font-size:36px;margin-bottom:40px}
      .avatar{height:300px}
      .card{padding:32px;border-radius:20px}
      .section-card{margin-bottom:40px}
      .intro-card{margin-bottom:40px}
      .project-content{padding:24px}
      .btn{font-size:16px;padding:16px 28px}
      .skills{gap:18px;justify-content:flex-start}
      .chip{font-size:15px;padding:16px 28px;border-radius:36px}
      .socials{gap:18px}
      .scroll-indicator{width:64px;height:64px;bottom:36px;right:36px}
      .scroll-indicator span{font-size:32px}
      .card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 24px 80px rgba(6,182,212,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}
      .project:hover{transform:translateY(-16px) scale(1.04);box-shadow:0 28px 88px rgba(6,182,212,0.6)}
      .btn:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 16px 40px rgba(6,182,212,0.5)}
      .chip:hover{transform:translateY(-6px) scale(1.12);box-shadow:0 12px 32px rgba(6,182,212,0.6)}
    }