:root{  
    --bg:#050816;  
    --card:rgba(12,18,40,.78);  
    --text:#f5f7ff;  
    --muted:#a4aed6;  
    --line:rgba(110,231,255,.22);  
    --neon:#0ef;  
    --neon2:#a855f7;  
    --success:#10b981;  
    --error:#ef4444;  
    --shadow:0 0 18px rgba(110,231,255,.18), 0 0 36px rgba(168,85,247,.12);  
  } 
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
  
}
  
  *{box-sizing:border-box;margin:0;padding:0}  
  body{  
    font-family:'Inter',sans-serif;  
      background: linear-gradient(rgba(5, 12, 20, 0.85), rgba(5, 12, 20, 0.75)), url(background.webp);
      background-attachment: fixed;
      background-size: cover;
    color:var(--text);  
    min-height:100vh;  
    overflow-x:hidden;  
  }

  .container{  
    max-width:1180px;  
    margin:auto;  
    padding:22px;  
  }  
  .topbar{  
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(1.4vh * 0.9);
    padding: calc(1.4vh * 0.9) 0 calc(2.2vh * 0.9);
    border-bottom: calc(0.12vh * 0.9) solid rgba(110,231,255,.22);
    margin-bottom: calc(2.6vh * 0.9);
    flex-wrap: wrap;
    width: 100%;
  }  
.logo {
    font-size: calc(1.9vh * 0.7);
    font-weight: 800;
    letter-spacing: calc(0.5vh * 0.7);
    text-shadow:
        0 0 calc(1vh * 0.9) rgba(110,231,255,.35),
        0 0 calc(2.2vh * 0.9) rgba(168,85,247,.2);
    color: #f5f7ff;
}
  .nav{  
    display: flex;
    gap: calc(1.8vh * 0.9);
    flex-wrap: wrap;
    align-items: center;  
  }  
  .nav a{
    color: #a4aed6;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    font-size: calc(1.6vh * 0.7);
    transition: .2s;
  }  
  .nav a:hover{color:var(--text)}  
  .back{  
    width: 22%;
    aspect-ratio: 20/5;
    background: rgba(55,155,157,.8);
    border: none;
    color: #fff;
    z-index: 99;
  }
 .back:active {
  opacity: .5;
}
  .hero{  
    text-align:center;  
    padding:24px 12px 34px;  
    transition: .5s;    
    opacity: 0;  
    scale: 0;  
  }  
  .heroLoaded {  
    scale: 1;  
    opacity: 1;  
  }  
      
  .hero h1{  
    font-size:clamp(2rem,5vw,4rem);  
    font-weight:800;  
    line-height:1.05;  
    text-shadow:0 0 12px rgba(110,231,255,.34), 0 0 28px rgba(168,85,247,.18);  
  }  
  .hero p{  
    max-width:840px;  
    margin:14px auto 0;  
    color:var(--muted);  
    line-height:1.8;  
    font-size:1.02rem;  
  }  
.email-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(55,155,157,.8);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-light);
}
  .highlight{  
    color:var(--neon);  
    text-shadow:0 0 10px rgba(110,231,255,.35);  
  }  
  .grid{  
    display:grid;  
    grid-template-columns:1.08fr .92fr;  
    gap:22px;  
  }  
  @media (max-width:960px){.grid{grid-template-columns:1fr}}  
  
  .card{  
    background:var(--card);  
    border:1px solid rgba(110,231,255,.18);  
    border-radius:24px;  
    padding:24px;  
    box-shadow:var(--shadow);  
    backdrop-filter:blur(10px);  
    transition: scale .5s;  
    
  }  
  .loaded {  
    scale: 1;  
    opacity: 1;  
  }  
  section, .card {  
    scroll-margin-top: 90px;  
  }  
  
  .profile{  
    display:flex;  
    flex-direction:column;  
    align-items:center;  
    text-align:center;  
  }  
  .avatar-wrap{
  position: relative;
  width: 170px;
  height: 170px;
    border-radius: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  position: relative;
  z-index: 2;
  border-radius: 15%;
}

/* Animated circling border */


@keyframes spinBorder{
  0%{ --angle: 0deg; }
  100%{ --angle: 360deg;}
}
  .name{  
    font-size:1.9rem;  
    font-weight:800;  
    margin-bottom:8px;  
  }  
  .tag{  
    display:inline-block;  
    padding:8px 14px;  
    border-radius:999px;  
    border:1px solid rgba(110,231,255,.22);  
    background:rgba(110,231,255,.08);  
    color:#bff7ff;  
    margin-bottom:16px;  
    font-size:.9rem;  
  }  
  .text{  
    color:#e2e8ff;  
    line-height:1.85;  
    font-size:1rem;  
    text-align:left;  
  }  
  .text strong{  
    color:var(--neon);  
  }  
  .info-box{  
    width:100%;  
    margin-top:18px;  
    padding:16px;  
    border-radius:18px;  
    background:rgba(255,255,255,.04);  
    border:1px solid rgba(110,231,255,.14);  
    text-align:left;  
  }  
  .info-row{  
    display:flex;  
    align-items:center;  
    gap:10px;  
    padding:8px 0;  
    color:#edf2ff;  
    flex-wrap:wrap;  
  }  
  .info-row i{  
    color:var(--neon);  
    width:18px;  
  }  
  .links{  
    display:flex;  
    gap:10px;  
    flex-wrap:wrap;  
    margin-top:18px;  
    justify-content:center;  
  }  
  .linkbtn{  
    display:inline-flex;  
    align-items:center;  
    gap:8px;  
    text-decoration:none;  
    color:#fff;  
    padding:11px 15px;  
    border-radius:14px;  
    border:1px solid rgba(110,231,255,.22);  
    background:linear-gradient(135deg, rgba(110,231,255,.12), rgba(168,85,247,.12));  
    box-shadow:0 0 16px rgba(110,231,255,.11);  
    transition:.2s ease;
    font-weight:500;  
  }  
  .linkbtn:hover{background: #fff; color: #000;}  
  .section-title{  
    font-size:1.2rem;  
    font-weight:800;  
    margin-bottom:16px;  
    text-shadow:0 0 10px rgba(168,85,247,.16);  
  }  
  .list{  
    display:grid;  
    gap:12px;  
  }  
  .item{  
    padding:15px 16px;  
    border-radius:16px;  
    background:rgba(255,255,255,.04);  
    border:1px solid rgba(110,231,255,.14);  
  }  
  .item h3{  
    font-size:1rem;  
    margin-bottom:6px;  
  }  
  .item p{  
    color:var(--muted);  
    line-height:1.7;  
    font-size:.95rem;  
  }  
  .badges{  
    display:flex;  
    flex-wrap:wrap;  
    gap:10px;  
    margin-top:16px;  
    justify-content:center;  
  }  
  .badge{  
    padding:9px 12px;  
    border-radius:999px;  
    background:rgba(255,255,255,.05);  
    border:1px solid rgba(168,85,247,.22);  
    color:#edf4ff;  
    font-size:.88rem;  
  }  
  
  /* SVG CIRCLE STYLES & POWER GRID */  
  .power-progress-grid {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
    gap: 1rem;  
    margin: 1.5rem 0 0.8rem;  
  }  
  .power-card {  
    flex: 1;  
    min-width: 100px;  
    background: rgba(0,0,0,0.25);  
    border-radius: 28px;  
    padding: 1rem 0.5rem;  
    text-align: center;  
    backdrop-filter: blur(4px);  
    border: 1px solid rgba(110,231,255,.2);  
    transition: 0.2s;  
  }  
  .svg-circle {  
    width: 90px;  
    height: 90px;  
    margin: 0 auto 8px;  
  }  
  .circle-bg {  
    stroke: rgba(110,231,255,0.15);  
    stroke-width: 5;  
  }  
  .circle-progress {  
    stroke: var(--neon);  
    stroke-width: 5;  
    stroke-linecap: round;  
    fill: none;  
    stroke-dasharray: 251.2;  
    stroke-dashoffset: calc(251.2 - (251.2 * var(--percent)) / 100);  
    transition: stroke-dashoffset 1.2s ease-out;  
    filter: drop-shadow(0 0 6px rgba(0,255,213,0.5));  
  }  
  .skill-label {  
    font-weight: 700;  
    font-size: 0.9rem;  
    margin-top: 8px;  
    color: #eef4ff;  
  }  
  .skill-percent {  
    font-family: "MyFont", monospace;  
    font-size: 1.1rem;  
    font-weight: 600;  
    color: var(--neon);  
    letter-spacing: 1px;  
  }  
  .perf-badge {  
    display: inline-flex;  
    align-items: center;  
    gap: 6px;  
    background: rgba(0,255,213,0.1);  
    border-radius: 40px;  
    padding: 5px 12px;  
    font-size: 0.8rem;  
    border: 1px solid rgba(110,231,255,0.3);  
  }  
  .stats{  
    margin-top:22px;  
    display:grid;  
    grid-template-columns:repeat(3,1fr);  
    gap:12px;  
  }  
  @media (max-width:560px){.stats{grid-template-columns:1fr}}  
  .stat{  
    text-align:center;  
    padding:16px 12px;  
    border-radius:18px;  
    background:rgba(255,255,255,.04);  
    border:1px solid rgba(110,231,255,.14);  
  }  
  .stat .num{  
    font-size:1.7rem;  
    font-weight: 0;  
    color:var(--neon);  
    font-family: "MyFont";  
    text-shadow:0 0 10px rgba(110,231,255,.26);  
  }  
  .stat .lbl{  
    color:var(--muted);  
    font-size:.9rem;  
    margin-top:5px;  
  }  
  .contact-card{  
    margin-top:22px;  
  }  
  .contact-grid{  
    display:grid;  
    grid-template-columns:1fr 1fr;  
    gap:14px;  
    margin-top:14px;  
  }  
  @media (max-width:700px){.contact-grid{grid-template-columns:1fr}}  
  .contact-box{  
    padding:14px 15px;  
    border-radius:16px;  
    background:rgba(255,255,255,.04);  
    border:1px solid rgba(110,231,255,.14);  
  }  
  .contact-box h3{  
    font-size:1rem;  
    margin-bottom:10px;  
  }  
  .contact-line{  
    display:flex;  
    align-items:center;  
    gap:10px;  
    padding:7px 0;  
    color:#edf2ff;  
    flex-wrap:wrap;  
  }  
  .contact-line i{color:var(--neon);width:18px}  
  .form{  
    display:grid;  
    gap:14px;  
    margin-top:12px;  
  }  
  .form-group{  
    display:grid;  
    gap:8px;  
  }  
  .form-group label{  
    font-weight:600;  
    color:#eef4ff;  
  }  
  .form-group input,  
  .form-group textarea{  
    width:100%;  
    padding:14px 15px;  
    border-radius:14px;  
    border:1px solid rgba(110,231,255,.16);  
    background:rgba(255,255,255,.04);  
    color:var(--text);  
    outline:none;  
    font-family:inherit;  
  }  
  .form-group input:focus,  
  .form-group textarea:focus{  
    border-color:rgba(110,231,255,.5);  
    box-shadow:0 0 0 3px rgba(110,231,255,.12);  
  }  
.captcha {
  width:100%; 
  padding: 14px 15px;
  background:rgba(255,255,255,.04); 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 14px;
  border: 1px solid rgba(110,231,255,.2);
  color: #0ef;
  font-size: 25px;
  text-transform: uppercase;
}
.captcha p {
  background: white;
  color: #000;
  width: 30%;
  padding: 12px 0;
  text-align: center;
  font-size: 20px;
  text-transform: none;
   -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Edge (hore) */
    user-select: none;
}

  .submit-btn{  
    padding:14px 18px;  
    position: relative;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  width: 100%;
  height: 45px;
  outline: none;
  border-radius: 40px;
    box-shadow: 0 0 10px rgba(55,155,157,8);
  border: 2px solid rgba(55,155,157,.8);
  z-index: 1;
  overflow: hidden;
}
.submit-btn::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 300%;
  top: -100%;
  left: 0;
  background: linear-gradient(#081b29, rgba(55,155,157,1), #081b29, rgba(55,155,157,.8));
  z-index: -1;
  transition: .5s;
}
.submit-btn:hover::before {
  top: 0;
}
  .submit-btn:disabled{  
    opacity:.72;  
    cursor:not-allowed;  
    transform:none;  
  }  
  .alert{  
    display:none;  
    margin-top:12px;  
    padding:13px 15px;  
    border-radius:14px;  
    font-weight:600;  
  }  
  .alert.success{  
    display:none;  
    background:rgba(16,185,129,.12);  
    border:1px solid rgba(16,185,129,.28);  
    color:#7dffcb;  
  }  
  .alert.error{  
    display:none;  
    background:rgba(239,68,68,.12);  
    border:1px solid rgba(239,68,68,.28);  
    color:#ff9b9b;  
  }  
  .loading{  
    display:none;  
    width:18px;  
    height:18px;  
    border-radius:50%;  
    border:2px solid rgba(255,255,255,.3);  
    border-top-color:#fff;  
    animation:spin 1s linear infinite;  
    margin-left:10px;  
    vertical-align:middle;  
  }  
  @keyframes spin{to{transform:rotate(360deg)}}  
  footer{  
    text-align:center;  
    padding:32px 0 12px;  
    color:var(--muted);  
    font-size:.94rem;  
  }  
  footer .line{  
    margin-top:8px;  
  }  
  .target {  
    border: 1px solid #0ef;  
    box-shadow: 0 0 20px 5px #0ef;
  }  
  .fast-metrics {  
    margin-top: 18px;  
    display: flex;  
    justify-content: center;  
    gap: 16px;  
    flex-wrap: wrap;  
  }  
  .metric-chip {  
    background: rgba(0,0,0,0.35);  
    border-radius: 60px;  
    padding: 6px 16px;  
    font-size: 0.85rem;  
    font-weight: 500;  
    backdrop-filter: blur(4px);  
  }  
  .metric-chip i {  
    color: var(--neon);  
    margin-right: 6px;  
  }
.we span {
  background: linear-gradient(115deg, #00ffd5, #00ff66, #ff0099, #ff0000, #0000ff, #00ffd5);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }