/* ═══════════════════════════════════════════════
   ROSHAN KUMAR · PORTFOLIO · style.css
   Dark techy AI theme
═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050810;--bg2:#080d16;--bg3:#0d1421;--bg4:#111827;
  --t:#e8f2ff;--t2:#7a95c4;--t3:#4a6090;
  --b:#00d4ff;--b2:#0099cc;--b3:rgba(0,212,255,.12);
  --p:#a78bfa;--g:#00ff9d;
  --bdr:rgba(0,212,255,.1);--sh:rgba(0,0,0,.5);
  --fh:'Orbitron',monospace;--fb:'Space Grotesk',sans-serif;--fm:'DM Mono',monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t);font-family:var(--fb);font-weight:300;overflow-x:hidden;cursor:none}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.025) 2px,rgba(0,0,0,.025) 4px);pointer-events:none;z-index:500}

/* CURSOR */
.cur-dot{width:6px;height:6px;background:var(--b);border-radius:50%;position:fixed;transform:translate(-50%,-50%);z-index:9999;pointer-events:none;box-shadow:0 0 8px var(--b)}
.cur-ring{width:30px;height:30px;border:1px solid var(--b);border-radius:50%;position:fixed;transform:translate(-50%,-50%);z-index:9998;pointer-events:none;transition:width .12s,height .12s,border-color .12s,opacity .12s;opacity:.6}
.cur-ring.hov{width:48px;height:48px;border-color:var(--p);opacity:.35}

/* HUD CORNERS */
.hud{position:fixed;width:50px;height:50px;z-index:400;pointer-events:none;opacity:.25}
.hud-tl{top:14px;left:14px;border-top:1px solid var(--b);border-left:1px solid var(--b)}
.hud-tr{top:14px;right:14px;border-top:1px solid var(--b);border-right:1px solid var(--b)}
.hud-bl{bottom:14px;left:14px;border-bottom:1px solid var(--b);border-left:1px solid var(--b)}
.hud-br{bottom:14px;right:14px;border-bottom:1px solid var(--b);border-right:1px solid var(--b)}

/* THREE.JS CANVAS */
#bgCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:1rem 5%;display:flex;align-items:center;justify-content:space-between;transition:all .4s}
nav.sc{background:rgba(5,8,16,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr)}
.n-logo{font-family:var(--fh);font-size:.82rem;color:var(--b);text-decoration:none;letter-spacing:.15em}
.n-logo::before{content:'[';color:var(--t3);margin-right:.25rem}
.n-logo::after{content:']';color:var(--t3);margin-left:.25rem}
.n-links{display:flex;gap:2rem;list-style:none}
.n-links a{font-family:var(--fm);font-size:.65rem;color:var(--t2);text-decoration:none;letter-spacing:.15em;text-transform:uppercase;transition:color .2s}
.n-links a:hover,.n-links a.active{color:var(--b);text-shadow:0 0 10px rgba(0,212,255,.4)}
.n-cta{font-family:var(--fm);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--bg);background:var(--b);padding:.5rem 1.3rem;transition:all .25s;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.n-cta:hover{background:var(--p);box-shadow:0 0 18px rgba(167,139,250,.4)}

/* ─── HERO ─── */
#hero{min-height:100vh;display:flex;align-items:center;padding:0 5%;position:relative;z-index:2}
.hero-inner{max-width:900px}
.hero-sys{font-family:var(--fm);font-size:.64rem;color:var(--g);letter-spacing:.18em;margin-bottom:1.8rem;display:flex;align-items:center;gap:.6rem;opacity:0;transform:translateY(18px)}
.sys-prefix{color:var(--b);animation:blink 1.2s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-name-block{perspective:900px;margin-bottom:.4rem}
.hero-name-row{font-family:var(--fh);font-size:clamp(3.8rem,8.5vw,9rem);font-weight:900;line-height:.9;letter-spacing:-.01em;color:var(--t);opacity:0;transform:translateY(70px) rotateX(-20deg);display:block}
.hero-name-row.accent{color:var(--b);text-shadow:0 0 60px rgba(0,212,255,.3)}
.hero-divider{width:0;height:1px;background:linear-gradient(90deg,var(--b),var(--p),transparent);margin:1.6rem 0;box-shadow:0 0 6px rgba(0,212,255,.25)}
.hero-meta{display:flex;gap:2.5rem;flex-wrap:wrap;opacity:0;margin-bottom:1.2rem}
.hm-item{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;color:var(--t2)}
.hm-item span{color:var(--b);margin-left:.4rem}
.status-green{color:var(--g) !important}
.hero-desc{max-width:540px;color:var(--t2);font-size:.96rem;line-height:1.85;opacity:0;margin-bottom:2.5rem}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;opacity:0}
.hero-status-panel{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1rem;perspective:600px}
.hs-card{background:rgba(13,20,33,.88);border:1px solid var(--bdr);border-left:2px solid var(--b);padding:.75rem 1.1rem;font-family:var(--fm);font-size:.62rem;color:var(--t2);opacity:0;backdrop-filter:blur(8px);transform:translateX(20px)}
.hs-card strong{color:var(--b);display:block;margin-bottom:.12rem}
.dot-live{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);margin-right:.4rem;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* BUTTONS */
.btn-primary{padding:.82rem 2rem;background:transparent;color:var(--b);font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--b);position:relative;overflow:hidden;transition:all .3s;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);display:inline-block}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--b);transform:translateX(-101%);transition:transform .3s;z-index:-1}
.btn-primary:hover{color:var(--bg);box-shadow:0 0 22px rgba(0,212,255,.35)}
.btn-primary:hover::before{transform:translateX(0)}
.btn-outline{padding:.82rem 2rem;background:transparent;color:var(--t2);font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--bdr);transition:all .3s;display:inline-block}
.btn-outline:hover{color:var(--t);border-color:var(--t2)}

/* SECTIONS */
section{padding:7rem 5%;position:relative;z-index:2}
.section-alt{background:rgba(8,13,22,.7)}
.section-inner{max-width:1200px;margin:0 auto}
.sec-label{font-family:var(--fm);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--b);display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.sec-label::before{content:'//';color:var(--t3);font-size:.7rem}
.sec-hr{width:0;height:1px;background:linear-gradient(90deg,var(--b),transparent);margin-bottom:3rem}
.sec-title{font-family:var(--fh);font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:.02em;line-height:1.1;margin-bottom:3rem;color:var(--t)}
.sec-title em{font-style:normal;color:var(--b);text-shadow:0 0 28px rgba(0,212,255,.25)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:auto 1fr;gap:5rem;align-items:center}
.photo-card{width:270px;height:350px;position:relative;transform:rotateY(-10deg) rotateX(5deg);transition:transform .6s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;box-shadow:20px 20px 60px rgba(0,0,0,.6),0 0 40px rgba(0,212,255,.07)}
.photo-card:hover{transform:rotateY(0) rotateX(0);box-shadow:8px 8px 40px rgba(0,0,0,.5),0 0 60px rgba(0,212,255,.12)}
.photo-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:grayscale(15%) contrast(1.08)}
.photo-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.09) 0%,transparent 50%);z-index:2;pointer-events:none}
.photo-card::after{content:'';position:absolute;inset:-1px;border:1px solid rgba(0,212,255,.22);z-index:3}
.photo-scan{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.55),transparent);z-index:5;animation:scan 3s linear infinite;opacity:.45}
@keyframes scan{from{top:0}to{top:100%}}
.photo-label{position:absolute;bottom:0;left:0;right:0;z-index:4;background:rgba(5,8,16,.92);border-top:1px solid var(--bdr);color:var(--b);font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;padding:.5rem .9rem;text-transform:uppercase}
.photo-border-accent{position:absolute;top:10px;left:10px;right:-10px;bottom:-10px;border:1px solid rgba(0,212,255,.13);z-index:-1;transform:translateZ(-8px)}
.about-text p{color:var(--t2);font-size:.95rem;line-height:1.85;margin-bottom:1.1rem}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.stat-card{padding:1.3rem;background:var(--bg3);border:1px solid var(--bdr);position:relative;overflow:hidden;transition:all .3s}
.stat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.04),transparent);pointer-events:none}
.stat-card:hover{border-color:rgba(0,212,255,.28);box-shadow:0 0 20px rgba(0,212,255,.07);transform:translateY(-2px)}
.stat-num{font-family:var(--fh);font-size:2.2rem;font-weight:900;color:var(--b);line-height:1;text-shadow:0 0 18px rgba(0,212,255,.28)}
.stat-lbl{font-family:var(--fm);font-size:.6rem;color:var(--t3);letter-spacing:.12em;text-transform:uppercase;margin-top:.25rem}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.sk-card{padding:1.5rem;background:var(--bg3);border:1px solid var(--bdr);position:relative;overflow:hidden;transition:all .3s}
.sk-card::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--b),var(--p));transition:width .4s}
.sk-card:hover{border-color:rgba(0,212,255,.22);transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 18px rgba(0,212,255,.05)}
.sk-card:hover::after{width:100%}
.sk-shine{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.05) 0%,transparent 50%);pointer-events:none;opacity:0;transition:opacity .3s}
.sk-card:hover .sk-shine{opacity:1}
.sk-head{font-family:var(--fm);font-size:.63rem;color:var(--b);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.9rem;padding-bottom:.65rem;border-bottom:1px solid var(--bdr);position:relative;z-index:1}
.sk-tags{display:flex;flex-wrap:wrap;gap:.38rem;position:relative;z-index:1}
.sk-tag{padding:.2rem .58rem;font-family:var(--fm);font-size:.64rem;color:var(--t2);background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.1);transition:all .2s}
.sk-tag:hover{background:rgba(0,212,255,.12);color:var(--b);border-color:rgba(0,212,255,.28)}

/* EXPERIENCE */
.exp-wrap{max-width:820px}
.exp-item{display:grid;grid-template-columns:155px 1fr;gap:2rem;padding:2.5rem 0;border-bottom:1px solid var(--bdr)}
.exp-item:first-child{padding-top:0}
.exp-item:last-child{border-bottom:none}
.exp-date{font-family:var(--fm);font-size:.64rem;color:var(--b);letter-spacing:.06em;line-height:1.7}
.exp-co{font-family:var(--fm);font-size:.67rem;color:var(--t3);margin-top:.4rem;letter-spacing:.04em}
.exp-role{font-family:var(--fh);font-size:1.05rem;font-weight:700;margin-bottom:.8rem;color:var(--t);letter-spacing:.03em}
.exp-list{list-style:none;color:var(--t2);font-size:.9rem}
.exp-list li{padding:.28rem 0 .28rem 1.2rem;position:relative;border-bottom:1px solid rgba(0,212,255,.04)}
.exp-list li:last-child{border-bottom:none}
.exp-list li::before{content:'>';position:absolute;left:0;color:var(--b);font-family:var(--fm);font-size:.74rem}

/* PROJECTS — rendered by React */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem}
.pr-card{padding:1.8rem;background:var(--bg3);border:1px solid var(--bdr);position:relative;overflow:hidden;transition:all .3s;cursor:default}
.pr-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--b),transparent);transform:scaleX(0);transition:transform .4s}
.pr-card:hover{border-color:rgba(0,212,255,.2);box-shadow:0 0 28px rgba(0,0,0,.5),0 0 18px rgba(0,212,255,.05);transform:translateY(-4px)}
.pr-card:hover::before{transform:scaleX(1)}
.pr-glow{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,.07) 0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.pr-card:hover .pr-glow{opacity:1}
.pr-num{font-family:var(--fh);font-size:.62rem;color:var(--b);letter-spacing:.2em;margin-bottom:.55rem;opacity:.7}
.pr-name{font-family:var(--fh);font-size:.92rem;font-weight:700;margin-bottom:.5rem;color:var(--t);letter-spacing:.03em}
.pr-desc{font-size:.86rem;color:var(--t2);line-height:1.72;margin-bottom:1.1rem}
.pr-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.pr-tag{font-family:var(--fm);font-size:.6rem;color:var(--b2);border:1px solid rgba(0,212,255,.17);padding:.16rem .48rem}
.pr-badge{font-family:var(--fm);font-size:.58rem;padding:.13rem .52rem;letter-spacing:.06em;text-transform:uppercase;position:absolute;top:.9rem;right:.9rem}
.pr-badge.ai{background:rgba(167,139,250,.13);color:var(--p);border:1px solid rgba(167,139,250,.28)}
.pr-badge.p1{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.22)}
.pr-badge.new{background:rgba(0,255,157,.08);color:var(--g);border:1px solid rgba(0,255,157,.22)}
.pr-badge.auto{background:rgba(245,158,11,.08);color:#fbbf24;border:1px solid rgba(245,158,11,.22)}

/* CERTIFICATIONS */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.cert-card{padding:1.5rem;background:var(--bg3);border:1px solid var(--bdr);display:flex;gap:1.1rem;align-items:flex-start;transition:all .3s}
.cert-card:hover{border-color:rgba(0,212,255,.22);box-shadow:0 0 18px rgba(0,212,255,.05)}
.cert-ico{width:40px;height:40px;background:rgba(0,212,255,.05);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.cert-name{font-family:var(--fh);font-size:.85rem;font-weight:700;color:var(--t);margin-bottom:.22rem;letter-spacing:.02em}
.cert-by{font-family:var(--fm);font-size:.61rem;color:var(--b);letter-spacing:.08em;text-transform:uppercase}
.cert-yr{font-family:var(--fm);font-size:.61rem;color:var(--t3);margin-top:.22rem}
.cert-pill{display:inline-block;margin-top:.42rem;padding:.12rem .48rem;font-family:var(--fm);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase}
.cert-pill.done{background:rgba(0,255,157,.08);color:var(--g);border:1px solid rgba(0,255,157,.22)}
.cert-pill.prog{border:1px solid rgba(245,158,11,.3);color:#fbbf24}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:start}
.contact-quote{font-family:var(--fm);font-size:.88rem;color:var(--t2);line-height:1.85;border-left:2px solid var(--b);padding-left:1.2rem;margin-bottom:1.5rem}
.contact-quote strong{color:var(--b)}
.contact-sub{color:var(--t3);font-size:.9rem;margin-bottom:1.8rem}
.contact-links{display:flex;flex-direction:column;gap:.6rem}
.contact-link{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--t2);font-family:var(--fm);font-size:.74rem;letter-spacing:.04em;padding:.55rem 0;border-bottom:1px solid var(--bdr);transition:all .2s}
.contact-link:last-child{border-bottom:none}
.contact-link:hover{color:var(--b);padding-left:.5rem}
.ci{width:30px;height:30px;border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:.74rem;flex-shrink:0;transition:all .2s}
.contact-link:hover .ci{background:var(--b);color:var(--bg);border-color:var(--b);box-shadow:0 0 10px rgba(0,212,255,.28)}
.contact-form{display:flex;flex-direction:column;gap:.85rem}
.form-group{display:flex;flex-direction:column;gap:.3rem}
.form-label{font-family:var(--fm);font-size:.61rem;color:var(--t3);letter-spacing:.15em;text-transform:uppercase}
.form-input,.form-textarea{padding:.78rem 1rem;background:var(--bg3);border:1px solid var(--bdr);color:var(--t);font-family:var(--fb);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.form-input:focus,.form-textarea:focus{border-color:rgba(0,212,255,.4);box-shadow:0 0 10px rgba(0,212,255,.07)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--t3);opacity:.45}
.form-textarea{min-height:100px;resize:vertical}
.form-status{font-family:var(--fm);font-size:.72rem;min-height:1.4rem;margin-top:-.3rem}
.form-status.ok{color:var(--g)}
.form-status.err{color:#f87171}

/* FOOTER */
footer{padding:1.8rem 5%;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;position:relative;z-index:2}
.ft{font-family:var(--fm);font-size:.62rem;color:var(--t3);letter-spacing:.06em}
.ft strong{color:var(--b)}

/* GSAP INIT STATES */
.gsap-fade{opacity:0;transform:translateY(28px)}
.gsap-left{opacity:0;transform:translateX(-30px)}
.gsap-line{width:0}
.d1{--delay:.1s}.d2{--delay:.2s}.d3{--delay:.3s}.d4{--delay:.4s}.d5{--delay:.5s}.d6{--delay:.6s}

/* SCROLLBAR */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--b2)}
::selection{background:var(--b);color:var(--bg)}

/* RESPONSIVE */
@media(max-width:900px){
  .n-links,.n-cta{display:none}
  .hero-status-panel{display:none}
  .about-grid{grid-template-columns:1fr;gap:2.5rem}
  .photo-card{width:220px;height:285px;margin:0 auto}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .exp-item{grid-template-columns:1fr;gap:.5rem}
}

/* ═══════════════════════════════
   RK ANIMATED AVATAR
═══════════════════════════════ */
.rk-avatar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
@media(max-width:1100px){.rk-avatar{display:none}}

.av-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.35);
  animation: spinRing 18s linear infinite;
}
.av-ring-outer {
  width: 210px; height: 210px;
  border-style: dashed;
  border-color: rgba(0,212,255,.2);
  animation-duration: 22s;
}
.av-ring-mid {
  width: 170px; height: 170px;
  border-color: rgba(167,139,250,.35);
  animation-direction: reverse;
  animation-duration: 14s;
  box-shadow: 0 0 18px rgba(167,139,250,.12), inset 0 0 18px rgba(167,139,250,.06);
}
.av-ring-inner {
  width: 130px; height: 130px;
  border-color: rgba(0,212,255,.5);
  animation-duration: 9s;
  box-shadow: 0 0 12px rgba(0,212,255,.2);
}
@keyframes spinRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.av-core {
  position: absolute;
  width: 90px; height: 90px;
  background: rgba(5,8,16,.92);
  border: 1px solid rgba(0,212,255,.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,212,255,.2), inset 0 0 20px rgba(0,212,255,.05);
}
.av-initials {
  font-family: var(--fh);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--b);
  letter-spacing: .08em;
  text-shadow: 0 0 20px rgba(0,212,255,.7);
  position: relative;
  z-index: 2;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{text-shadow:0 0 20px rgba(0,212,255,.7)}
  50%{text-shadow:0 0 40px rgba(0,212,255,1),0 0 60px rgba(0,212,255,.4)}
}
.av-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.8), transparent);
  animation: scanLine 2.2s linear infinite;
  z-index: 1;
}
@keyframes scanLine { from{top:0} to{top:100%} }

.av-corner {
  position: absolute;
  width: 8px; height: 8px;
}
.av-tl { top: 4px; left: 4px; border-top: 1.5px solid var(--b); border-left: 1.5px solid var(--b); }
.av-tr { top: 4px; right: 4px; border-top: 1.5px solid var(--b); border-right: 1.5px solid var(--b); }
.av-bl { bottom: 4px; left: 4px; border-bottom: 1.5px solid var(--b); border-left: 1.5px solid var(--b); }
.av-br { bottom: 4px; right: 4px; border-bottom: 1.5px solid var(--b); border-right: 1.5px solid var(--b); }

.av-orbit {
  position: absolute;
  width: 160px; height: 160px;
  animation: spinRing 6s linear infinite;
  border-radius: 50%;
}
.av-orbit2 {
  width: 195px; height: 195px;
  animation-duration: 10s;
  animation-direction: reverse;
}
.av-planet {
  position: absolute;
  width: 7px; height: 7px;
  background: var(--b);
  border-radius: 50%;
  top: -3.5px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--b);
}
.av-planet2 {
  width: 5px; height: 5px;
  background: var(--p);
  box-shadow: 0 0 8px var(--p);
}

.av-labels {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .8rem;
  white-space: nowrap;
}
.av-lbl {
  font-family: var(--fm);
  font-size: .54rem;
  color: var(--t3);
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: labelPulse 3s ease-in-out infinite;
}
.av-lbl2 { animation-delay: .6s; }
.av-lbl3 { animation-delay: 1.2s; }
@keyframes labelPulse {
  0%,100%{color:var(--t3)} 50%{color:var(--b)}
}

/* ═══════════════════════════════
   SKILL MARQUEE
═══════════════════════════════ */
.sk-marquee-wrap {
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  overflow: hidden;
  position: relative;
}
.sk-marquee-wrap::before,
.sk-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.sk-marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.sk-marquee-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.section-alt .sk-marquee-wrap::before { background: linear-gradient(90deg, var(--bg2), transparent); }
.section-alt .sk-marquee-wrap::after  { background: linear-gradient(-90deg, var(--bg2), transparent); }

.sk-marquee-label {
  font-family: var(--fm);
  font-size: .6rem;
  color: var(--b);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  opacity: .6;
}
.sk-marquee { overflow: hidden; margin-bottom: .6rem; }
.sk-marquee:last-child { margin-bottom: 0; }
.sk-marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
}
.sk-marquee-track span {
  font-family: var(--fm);
  font-size: .72rem;
  color: var(--t2);
  padding: .3rem .9rem;
  border: 1px solid var(--bdr);
  background: rgba(0,212,255,.04);
  margin-right: .5rem;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.sk-marquee-track span:hover { color: var(--b); border-color: rgba(0,212,255,.3); }
.sk-track-fwd { animation: marqueeL 35s linear infinite; }
.sk-track-rev { animation: marqueeR 30s linear infinite; }
@keyframes marqueeL { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqueeR { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* ═══════════════════════════════
   COMPANY LOGOS
═══════════════════════════════ */
.co-logo {
  margin-top: .8rem;
  opacity: .7;
  transition: opacity .2s;
}
.co-logo:hover { opacity: 1; }
.co-logo svg { width: 100px; height: 28px; }

/* ═══════════════════════════════
   TERMINAL WINDOW
═══════════════════════════════ */
.terminal-wrap { flex-shrink: 0; }

.terminal {
  width: 420px;
  background: #020408;
  border: 1px solid rgba(0,212,255,.25);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,212,255,.08),
    0 20px 60px rgba(0,0,0,.7),
    0 0 40px rgba(0,212,255,.06);
  font-family: 'DM Mono', monospace;
  position: relative;
}

/* top bar */
.term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1rem;
  background: #0a0f1a;
  border-bottom: 1px solid rgba(0,212,255,.12);
}
.term-dots { display: flex; gap: .45rem; }
.td {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.td-r { background: #ff5f57; }
.td-y { background: #ffbd2e; }
.td-g { background: #28ca42; }
.term-title {
  font-size: .68rem;
  color: var(--t3);
  letter-spacing: .06em;
}
.term-icon { font-size: .75rem; color: var(--t3); }

/* body */
.term-body {
  padding: 1.1rem 1.2rem 1.4rem;
  min-height: 340px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: none;
}
.term-body::-webkit-scrollbar { display: none; }

/* lines */
.tl {
  font-size: .72rem;
  line-height: 1.75;
  display: block;
  margin-bottom: .05rem;
  white-space: pre-wrap;
  word-break: break-all;
}
.tl-prompt { color: #00ff9d; }
.tl-prompt::before { content: '$ '; color: rgba(0,212,255,.5); }
.tl-out    { color: #7a95c4; padding-left: .2rem; }
.tl-key    { color: #00d4ff; }
.tl-val    { color: #e8f2ff; }
.tl-dim    { color: #3a5070; }
.tl-ok     { color: #00ff9d; }
.tl-warn   { color: #f59e0b; }
.tl-sep    { color: #1a2a40; letter-spacing: .05em; }
.tl-blank  { display: block; height: .6rem; }

/* blinking cursor */
.cursor {
  display: inline-block;
  width: 8px; height: .85em;
  background: var(--b);
  vertical-align: middle;
  animation: blink-cur .9s step-end infinite;
  margin-left: 1px;
}
@keyframes blink-cur { 0%,100%{opacity:1} 50%{opacity:0} }

/* scanline overlay */
.terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 4px
  );
  pointer-events: none;
  z-index: 1;
  border-radius: 8px;
}

@media(max-width:900px){
  .terminal { width: 100%; }
}