/* ===== Dark SOC palette & reset ===== */
:root{
    --bg:#0a0f1f;
    --panel:#0b1226;
    --text:#e6eef7;
    --muted:#9fb2c8;
    --primary:#00ff88;
    --line:rgba(0,255,136,.18);
    --glowG:0 0 24px rgba(0,255,136,.35), 0 0 48px rgba(0,255,136,.2);
  }
  
  * { box-sizing:border-box; margin:0; padding:0; }
  html, body { height:100%; }
  
  body{
    background: radial-gradient(1100px 800px at 10% -10%, #0f1c33 0%, transparent 55%), var(--bg);
    color: var(--text);
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
    overflow-x: hidden;
  }
  
  /* ===== Background layers ===== */
  
  /* Cropped Kaspersky iframe: hide 100px from top and bottom */
  .cyber-map-wrapper{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;      /* clip excess */
    z-index: 0;
  }
  
  .cyber-map-wrapper iframe{
    position: absolute;
    top: -100px;           /* shift up to hide top 100px */
    left: 0;
    width: 100vw;
    height: calc(100vh + 200px); /* grow to cover after cropping */
    border: none;
    opacity: 0.25;
    pointer-events: none;  /* keep page interactive */
  }
  
  /* Canvases stacked above the map */
  #futuristic-layer,
  #cyber-network,
  #matrix-rain{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
  }
  
  #futuristic-layer { z-index: 1; }
  #cyber-network    { z-index: 2; opacity: .95; }
  #matrix-rain      { z-index: 3; opacity: .09; }
  
  /* ===== Header ===== */
  header{
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 4.5rem 1rem 3rem;
    background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 70%);
  }
  
  .header-flex{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.8rem 1rem 2.2rem;
  }
  
  .profile-pic{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
		margin-top: -2rem;
		margin-bottom: 4rem;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    padding: 6px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(0,255,136,.35), rgba(0,255,136,.05) 60%, transparent 70%);
    box-shadow: var(--glowG);
    will-change: transform;
  }
  
  .profile-pic img{
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #061023;
    display: block;
  }
  
  .profile-pic::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px solid rgba(0,255,136,.25);
    box-shadow:0 0 22px rgba(0,255,136,.35) inset;
    animation:ringPulse 3.2s ease-in-out infinite;
  }
  
  @keyframes ringPulse{
    0%,100%{ transform:scale(1); opacity:.9 }
    50%{ transform:scale(1.03); opacity:1 }
  }
  
  .header-name{
    text-align: right;
    margin-left: auto;
    padding-top: 5px;
    margin-top: -70px;
  }
  
  h1{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(2.2rem, 4vw, 3rem);
    margin-top:1rem;
    letter-spacing:1px;
    color:var(--primary);
    text-shadow:0 0 18px rgba(0,255,136,.5);
  }
  
  .tagline{ margin-top:.35rem; color:var(--muted); letter-spacing:.3px; }
  
  .download-btn{
    margin-top:1.2rem;
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.85rem 1.5rem; border-radius:999px;
    background:linear-gradient(90deg, #00ff88, #29ffa6);
    color:#002013; font-weight:800; text-decoration:none;
    box-shadow:var(--glowG);
    transition:transform .2s ease, filter .2s ease;
    font-size:1rem;
    will-change: transform, filter;
  }
  .download-btn:hover{ transform:translateY(-2px) scale(1.02); filter:saturate(1.15) }
  .download-btn .lock{ animation:lockPulse 1.6s infinite }
  @keyframes lockPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
  
  @media (max-width: 700px){
    .header-flex{
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 2.2rem 1rem 1.5rem;
    }
    .header-name{
      text-align: center;
      margin-left: 0;
      padding-top: 12px;
    }
  }
  
  /* ===== Sections & cards ===== */
  section{
    max-width:1000px;
    margin:0 auto;
    padding:2.2rem 1rem;
    position:relative;
    z-index:4; /* above backgrounds */
  }
  
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.4rem;
    backdrop-filter:blur(6px);
    box-shadow:0 6px 30px rgba(0,0,0,.25);
  }
  
  h2{
    font-family:'Orbitron',sans-serif;
    font-size:1.55rem;
    color:var(--primary);
    margin-bottom:.8rem;
    text-shadow:0 0 10px rgba(0,255,136,.45);
    display:flex; align-items:center; gap:.6rem;
  }
  
  h2 .dot{
    width:10px; height:10px; border-radius:50%;
    background:radial-gradient(circle at 40% 40%, var(--primary), transparent 70%);
    box-shadow:0 0 12px var(--primary);
  }
  
  .divider{
    height:1px; width:100%;
    background:linear-gradient(90deg, transparent, var(--line), transparent);
    margin:1.4rem 0 0;
  }
  
  p{ line-height:1.68; color:var(--text) }
  .muted{ color:var(--muted) }
  
  ul{ list-style:none; padding:0; margin:0 }
  li{
    padding:.55rem .75rem;
    margin:.35rem 0;
    border-radius:10px;
    background:rgba(0,255,136,.06);
    border:1px solid rgba(0,255,136,.14);
    transition:background .15s ease, transform .15s ease;
  }
  li:hover{ background:rgba(0,255,136,.12); transform:translateX(4px) }
  
  .job{ margin-bottom:1rem }
  .job h3{ margin-bottom:.25rem; font-weight:700 }
  .job span{ font-size:.92rem; color:var(--muted) }
  
  /* ===== Form ===== */
  form{ display:flex; flex-direction:column; gap:.8rem; max-width:540px; margin:0 auto; }
  input,textarea{
    background:#0c132a; color:var(--text);
    border:1px solid rgba(0,255,136,.28);
    padding:.85rem 1rem; border-radius:10px; outline:none;
    transition:border .15s ease, box-shadow .15s ease;
  }
  input:focus,textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 16px rgba(0,255,136,.25);
  }
  
  button{
    align-self:flex-start;
    padding:.85rem 1.4rem; border-radius:999px; border:0; cursor:pointer;
    background:linear-gradient(90deg, #00ff88, #2fffaa);
    color:#002013; font-weight:800;
    box-shadow:var(--glowG);
    transition:transform .15s ease, filter .2s ease;
    will-change: transform, filter;
  }
  button:hover{ transform:translateY(-1px); filter:saturate(1.15) }
  
  /* ===== Reveal animation ===== */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
  .reveal.show{ opacity:1; transform:none }
  
  /* ===== Footer ===== */
  footer{
    text-align:center; padding:1.4rem 1rem; color:var(--muted);
    border-top:1px solid var(--line); margin-top:2rem;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,.22));
  }
  
  /* ===== Links ===== */
  a{ color:var(--primary); text-decoration:none }
  a:hover{ text-decoration:underline }
  
  /* ===== Reduced motion ===== */
  @media (prefers-reduced-motion: reduce){
    .profile-pic::before,
    .download-btn .lock,
    .reveal{
      animation: none !important;
      transition: none !important;
    }
  }
  /* Container acts as the visible window */
.cyber-map-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;       /* Full viewport height */
    overflow: hidden;    /* Hide anything outside */
    z-index: 0;
  }
  
  /* Shift iframe up and make it taller so top & bottom parts are cropped */
  .cyber-map-wrapper iframe {
    position: absolute;
    top: -100px;         /* Hides first 100px from the top */
    left: 0;
    width: 100vw;
    height: calc(100vh + 200px); /* Extra height to cover both crops */
    border: none;
    opacity: 0.25;
    pointer-events: none;
  }