/* =========================================================
   Dhammapal Waghmare — Interactive AI Portfolio
   ========================================================= */

:root{
  --bg-0:#040910;
  --bg-1:#060d17;
  --panel-bg:rgba(6, 16, 28, 0.92);
  --cyan:#3fd8ff;
  --cyan-soft:#8fe9ff;
  --cyan-dim:#1c5a72;
  --blue:#0ea5e9;
  --orange:#f7941d;
  --orange-soft:#ffb15c;
  --ink-0:#eaf6ff;
  --ink-1:#9db3c4;
  --ink-2:#5f7a8c;
  --line:rgba(63, 216, 255, 0.22);
  --line-strong:rgba(63, 216, 255, 0.55);
  --font-display:'Orbitron', sans-serif;
  --font-body:'Rajdhani', sans-serif;
  --font-mono:'Share Tech Mono', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{overflow:hidden;}
body{
  margin:0;
  background:radial-gradient(ellipse at 78% 32%, #0a1a2c 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  color:var(--ink-0);
  font-family:var(--font-body);
  overflow:hidden;
  height:100vh;
  height:100dvh;
  position:relative;
}

::selection{background:var(--cyan);color:#001018;}

/* scrollbars hidden everywhere, scrolling still works */
*{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
*::-webkit-scrollbar{display:none; width:0; height:0;}

/* ---------- ambient background ---------- */
.bg-grid{
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(63,216,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,216,255,0.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at 65% 40%, black 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 65% 40%, black 10%, transparent 72%);
  pointer-events:none; z-index:0;
}
.bg-stars{position:fixed; inset:0; pointer-events:none; z-index:0;}
.bg-stars span{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#bfe9ff; opacity:.55;
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.15;}50%{opacity:.85;}}

.bg-glow{position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0;}
.bg-glow--blue{width:640px; height:640px; right:-120px; top:-80px; background:radial-gradient(circle, rgba(63,216,255,0.18), transparent 70%);}
.bg-glow--orange{width:420px; height:420px; left:-140px; bottom:-140px; background:radial-gradient(circle, rgba(247,148,29,0.10), transparent 70%);}

.scanline{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.4;
  background:repeating-linear-gradient(rgba(255,255,255,0) 0px, rgba(255,255,255,0) 2px, rgba(63,216,255,0.02) 3px, rgba(255,255,255,0) 4px);
}

/* ---------- top controls ---------- */
.top-controls{
  position:fixed; top:26px; right:30px; display:flex; gap:12px; z-index:40;
}
.icon-btn{
  width:44px; height:44px; border-radius:10px;
  background:rgba(9,22,35,0.7);
  border:1px solid var(--line);
  color:var(--cyan-soft);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s ease;
  backdrop-filter:blur(6px);
  position:relative;
}
.icon-btn svg{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  position:absolute; display:none;
}
.icon-btn:hover{border-color:var(--cyan); box-shadow:0 0 16px rgba(63,216,255,.35); color:#fff;}
.icon-btn .icon-unmuted{display:block;}
.icon-btn .icon-muted{display:none;}
.icon-btn.is-muted .icon-unmuted{display:none;}
.icon-btn.is-muted .icon-muted{display:block;}
.icon-btn.is-muted{color:var(--ink-2);}
.icon-btn:not(.is-muted){color:var(--cyan); border-color:var(--line-strong); box-shadow:0 0 14px rgba(63,216,255,.2);}

/* ---------- left rail ---------- */
.left-rail{
  position:fixed; left:26px; top:50%; transform:translateY(-58%);
  display:flex; flex-direction:column; align-items:center; gap:16px; z-index:40;
}
.rail-btn{
  width:52px; height:52px; border-radius:12px;
  background:rgba(9,22,35,0.75);
  border:1px solid var(--line);
  color:var(--cyan-soft);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s ease;
}
.rail-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.rail-btn:hover{border-color:var(--cyan); color:#fff;}
.rail-btn--active{
  border-color:var(--orange);
  color:var(--orange-soft);
  box-shadow:0 0 18px rgba(247,148,29,.35), inset 0 0 12px rgba(247,148,29,.12);
}

.rail-socials{
  display:flex; flex-direction:column; gap:12px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.22,.8,.3,1), opacity .35s ease, margin .35s ease;
}
.rail-socials.is-open{max-height:220px; opacity:1; margin-top:2px;}
.rail-socials .socials{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.rail-socials .social-btn{
  width:44px; height:44px; border-radius:11px;
}
.rail-socials .social-btn svg{width:17px; height:17px;}


/* ---------- stage layout ---------- */
.stage{
  position:relative; z-index:5;
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:grid;
  grid-template-columns:minmax(340px, 640px) 1fr;
  align-items:center;
  gap:24px;
  padding:64px 64px 64px 130px;
}
.content-col{max-width:640px;}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  color:var(--cyan);
  letter-spacing:.35em;
  font-size:12.5px;
  margin:0 0 18px;
  text-transform:uppercase;
}
.eyebrow-bar{width:18px; height:2px; background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
.eyebrow-ticks{color:var(--orange); letter-spacing:.15em; opacity:.85;}

.name{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  margin:0 0 16px;
  font-size:clamp(2.6rem, 5.4vw, 4.6rem);
  letter-spacing:.01em;
  transition:font-size .4s cubic-bezier(.22,.8,.3,1), margin .4s ease, gap .4s ease;
}
.name-line{display:block; transition:.4s ease;}

.name.is-compact{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px;
  font-size:clamp(1.5rem, 2.6vw, 2.15rem);
  margin:0 0 10px;
}
.name.is-compact .name-line{display:inline;}
.name-line--light{
  color:#f3fbff;
  text-shadow:0 0 26px rgba(120,200,255,0.25);
}
.name-line--accent{
  background:linear-gradient(120deg, var(--cyan) 0%, #7fd8ff 45%, var(--blue) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(63,216,255,.35);
}

.role{
  display:flex; align-items:center; gap:10px;
  font-size:1.18rem; font-weight:600; color:var(--orange-soft);
  margin:0 0 30px; letter-spacing:.02em;
}
.role-dot{width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px var(--orange); flex:none;}

/* ---------- nav menu ---------- */
.nav-menu{
  display:flex; flex-direction:column; gap:12px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s cubic-bezier(.22,.8,.3,1), opacity .4s ease, margin .4s ease;
  margin-bottom:0;
}
.nav-menu.is-open{ max-height:640px; opacity:1; margin-bottom:26px; }

.nav-item{
  --clip:20px;
  position:relative;
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:460px;
  padding:14px 22px;
  background:linear-gradient(90deg, rgba(12,28,44,0.75), rgba(9,20,32,0.55));
  border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - var(--clip)) 0, 100% 50%, calc(100% - var(--clip)) 100%, 0 100%);
  color:var(--ink-0);
  font-family:var(--font-display);
  font-weight:600; font-size:.92rem; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; text-align:left;
  transition:.22s ease;
}
.nav-item:hover, .nav-item:focus-visible{
  border-color:var(--cyan);
  background:linear-gradient(90deg, rgba(18,46,66,0.85), rgba(10,24,38,0.6));
  box-shadow:0 0 22px rgba(63,216,255,.18), inset 0 0 18px rgba(63,216,255,.08);
  transform:translateX(4px);
  outline:none;
}
.nav-icon{
  width:26px; height:26px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan);
}
.nav-icon svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.nav-label{flex:1;}
.nav-corner{
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan-dim); box-shadow:none; transition:.2s ease; flex:none;
}
.nav-item:hover .nav-corner{background:var(--cyan); box-shadow:0 0 8px var(--cyan);}

/* ---------- hint ---------- */
.hint{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-1); font-size:1.02rem; font-weight:500;
  margin:0 0 34px;
  max-height:60px; opacity:1; overflow:hidden;
  transition:max-height .35s ease, opacity .3s ease, margin .35s ease;
}
.hint.is-hidden{
  max-height:0; opacity:0; margin:0; pointer-events:none;
}
.mouse-icon{width:19px; height:19px; fill:none; stroke:var(--cyan-soft); stroke-width:1.6;}
.hint-arrow{color:var(--orange); font-weight:700; letter-spacing:1px;}
#hintLabel{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  animation:typewriter-loop 8s steps(26, end) infinite;
}
@keyframes typewriter-loop{
  0%, 100%{width:0;}
  60%{width:13.8em;}
  70%{width:13.8em;}
}

/* ---------- socials ---------- */
.socials{display:flex; gap:14px;}
.social-btn{
  width:42px; height:42px; border-radius:9px;
  border:1px solid var(--line);
  background:rgba(9,22,35,0.6);
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan-soft); transition:.2s ease;
}
.social-btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.social-btn:hover{border-color:var(--cyan); color:#fff; box-shadow:0 0 16px rgba(63,216,255,.3); transform:translateY(-2px);}

/* ---------- robot column ---------- */
.robot-col{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:100%; min-height:520px;
}
.robot-platform{
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  width:420px; height:420px; pointer-events:none;
}
.ring{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid rgba(63,216,255,.35);
  transform:translate(-50%,-50%) rotateX(72deg);
  box-shadow:0 0 24px rgba(63,216,255,.15);
}
.ring-1{width:120px; height:120px; animation:pulse-ring 3.2s ease-in-out infinite;}
.ring-2{width:220px; height:220px; animation:pulse-ring 3.2s ease-in-out infinite .3s;}
.ring-3{width:320px; height:320px; animation:pulse-ring 3.2s ease-in-out infinite .6s;}
.ring-4{width:420px; height:420px; animation:pulse-ring 3.2s ease-in-out infinite .9s;}
@keyframes pulse-ring{
  0%,100%{opacity:.25;}
  50%{opacity:.65;}
}

.robot-btn{
  position:relative; z-index:2;
  background:none; border:none; padding:0; cursor:pointer;
  animation:float 5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-16px);}
}
.robot-img{
  width:min(30vw, 460px); max-width:520px; height:auto;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55)) drop-shadow(0 0 55px rgba(63,216,255,.25));
  transition:filter .25s ease, transform .25s ease;
}
.robot-btn:hover .robot-img{
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.6)) drop-shadow(0 0 75px rgba(63,216,255,.45));
  transform:scale(1.02);
}
.robot-btn:active .robot-img{transform:scale(.98);}
.robot-pulse{
  position:absolute; left:50%; bottom:2%; width:60px; height:14px; border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(63,216,255,.5), transparent 70%);
  filter:blur(4px);
  animation:pulse-shadow 5s ease-in-out infinite;
}
@keyframes pulse-shadow{
  0%,100%{opacity:.5; transform:translateX(-50%) scale(1);}
  50%{opacity:.9; transform:translateX(-50%) scale(1.3);}
}

/* ---------- overlay + panel ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(2,7,12,.55);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:49;
}
.overlay.is-open{opacity:1; pointer-events:auto;}

.panel{
  position:fixed; top:0; right:0; height:100vh;
  width:min(560px, 92vw);
  background:var(--panel-bg);
  border-left:1px solid var(--line-strong);
  box-shadow:-30px 0 80px rgba(0,0,0,.55);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,.85,.3,1);
  z-index:50;
  display:flex; flex-direction:column;
  backdrop-filter:blur(10px);
}
.panel.is-open{transform:translateX(0);}
.panel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--cyan), transparent 60%, var(--orange));
  box-shadow:0 0 14px rgba(63,216,255,.6);
}

.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 34px 20px;
  border-bottom:1px solid var(--line);
}
.panel-breadcrumb{
  margin:0; font-family:var(--font-display); font-weight:700;
  letter-spacing:.16em; font-size:1.28rem; color:var(--orange-soft);
  text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.chev{color:var(--cyan); font-weight:400;}
.panel-close{
  width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--cyan-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.2s ease;
}
.panel-close svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.panel-close:hover{border-color:var(--cyan); color:#fff; box-shadow:0 0 14px rgba(63,216,255,.3);}

.panel-body{
  flex:1; overflow-y:auto;
  padding:26px 34px 46px;
}

/* ---- panel content blocks ---- */
.p-lead{
  font-size:1.05rem; line-height:1.65; color:var(--ink-0); font-weight:500;
  margin:0 0 28px;
}
.p-kicker{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em;
  color:var(--cyan); font-size:.82rem; margin:0 0 16px;
}
.p-kicker svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;}

.timeline-item{
  position:relative; padding-left:22px; margin-bottom:26px;
  border-left:1px solid var(--line);
}
.timeline-item::before{
  content:""; position:absolute; left:-5px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 10px var(--orange);
}
.timeline-item:last-child{margin-bottom:0;}
.t-date{font-family:var(--font-mono); color:var(--orange-soft); font-size:.82rem; letter-spacing:.06em;}
.t-title{font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:#fff; margin:4px 0 2px;}
.t-sub{color:var(--ink-1); font-size:.92rem; margin:0 0 10px;}
.t-list{margin:0; padding-left:18px; color:var(--ink-1); font-size:.95rem; line-height:1.7;}
.t-list li::marker{color:var(--cyan);}
.t-list li{margin-bottom:4px;}

.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.tag{
  padding:7px 14px; border:1px solid var(--line); border-radius:8px;
  font-size:.82rem; font-weight:600; color:var(--cyan-soft);
  background:rgba(63,216,255,.05); letter-spacing:.02em;
}

.skill-group{margin-bottom:24px;}
.skill-group:last-child{margin-bottom:0;}
.skill-group h4{
  margin:0 0 10px; font-family:var(--font-display); font-size:.86rem;
  color:var(--orange-soft); letter-spacing:.1em; text-transform:uppercase;
}
.skill-chip-row{display:flex; flex-wrap:wrap; gap:9px;}
.chip{
  padding:6px 12px; border-radius:20px; font-size:.84rem; font-weight:600;
  background:rgba(63,216,255,.07); border:1px solid var(--line); color:var(--ink-0);
}

.project-card{
  border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  margin-bottom:20px; background:rgba(63,216,255,.03);
  transition:.2s ease;
}
.project-card:last-child{margin-bottom:0;}
.project-card:hover{border-color:var(--cyan); box-shadow:0 0 20px rgba(63,216,255,.12);}
.proj-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
.proj-title{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; margin:0;}
.proj-link{
  font-family:var(--font-mono); font-size:.78rem; color:var(--cyan); text-decoration:none;
  border:1px solid var(--line-strong); padding:4px 10px; border-radius:6px; white-space:nowrap;
  transition:.2s ease;
}
.proj-link:hover{background:rgba(63,216,255,.12); color:#fff;}
.proj-stack{font-family:var(--font-mono); font-size:.78rem; color:var(--orange-soft); margin:0 0 12px; letter-spacing:.02em;}

.edu-card{
  border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-bottom:16px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  background:rgba(63,216,255,.03);
}
.edu-card:last-child{margin-bottom:0;}
.edu-name{font-family:var(--font-display); font-weight:700; color:#fff; font-size:.98rem; margin:0 0 4px;}
.edu-inst{color:var(--ink-1); font-size:.88rem; margin:0;}
.edu-score{
  font-family:var(--font-mono); color:var(--cyan); font-size:.92rem; white-space:nowrap;
  border:1px solid var(--line-strong); border-radius:8px; padding:5px 10px;
}
.edu-year{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-2); margin:0 0 6px;}

.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.contact-row{
  display:flex; align-items:center; gap:14px;
  color:var(--ink-0); text-decoration:none; font-size:.98rem; font-weight:600;
  border:1px solid var(--line); border-radius:10px; padding:14px 18px;
  background:rgba(63,216,255,.03); transition:.2s ease;
}
a.contact-row:hover{border-color:var(--cyan); box-shadow:0 0 16px rgba(63,216,255,.15); transform:translateX(4px);}
.c-icon{
  width:36px; height:36px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(63,216,255,.08); color:var(--cyan);
}
.c-icon svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.c-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.c-label{font-size:.72rem; color:var(--ink-2); font-weight:500; letter-spacing:.06em; text-transform:uppercase;}
.c-value{font-size:.95rem; word-break:break-word;}

/* ---- contact form ---- */
.contact-form{display:flex; flex-direction:column; gap:16px; margin-bottom:32px;}
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cyan-soft);
}
.form-input{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:rgba(6,16,28,.6); color:var(--ink-0); font-family:var(--font-body); font-size:.98rem;
  transition:.2s ease;
}
.form-input::placeholder{color:var(--ink-2);}
.form-input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(63,216,255,.14);}
.form-textarea{resize:vertical; min-height:100px; font-family:var(--font-body); line-height:1.5;}
.form-submit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; border-radius:10px; border:1px solid var(--line-strong);
  background:linear-gradient(120deg, rgba(63,216,255,.18), rgba(247,148,29,.14));
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:.2s ease;
}
.form-submit:hover{border-color:var(--cyan); box-shadow:0 0 22px rgba(63,216,255,.32); transform:translateY(-2px);}
.form-submit svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.form-note{font-size:.78rem; color:var(--ink-2); margin:-6px 0 0;}
.form-status{
  font-size:.85rem; font-weight:600; margin:2px 0 0; min-height:1.2em;
}
.form-status.is-success{color:var(--cyan);}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px){
  .stage{
    grid-template-columns:minmax(300px, 560px) 1fr;
    padding:56px 48px 56px 116px;
    gap:16px;
  }
  .robot-img{width:min(34vw, 420px);}
}

@media (max-width: 980px){
  .stage{
    grid-template-columns:1fr;
    grid-auto-flow:row;
    padding:104px 28px 40px;
    gap:0;
    text-align:left;
    align-content:start;
  }
  .content-col{max-width:100%;}
  .robot-col{order:-1; min-height:300px; margin-bottom:8px;}
  .robot-platform{transform:translateX(-50%) scale(.78);}
  .robot-img{width:min(52vw, 320px);}
  .left-rail{
    left:50%; top:16px; transform:translateX(-50%);
    flex-direction:row; gap:12px;
  }
  .top-controls{top:16px; right:16px;}
  .nav-item{max-width:100%;}
  .nav-menu.is-open{margin-bottom:22px;}

  #homeBtn,
  #menuBtn,
  .socials a[aria-label="LinkedIn"],
  .socials a[aria-label="GitHub"],
  .socials a[aria-label="Email"] {
    display: none !important;
  }
}

@media (max-width: 640px){
  .stage{padding:96px 22px 36px;}
  .eyebrow{font-size:11px; letter-spacing:.28em;}
  .name{font-size:clamp(2.1rem, 9vw, 2.8rem);}
  .name.is-compact{font-size:clamp(1.3rem, 6vw, 1.7rem); gap:10px;}
  .role{font-size:1rem; margin-bottom:24px;}
  .nav-item{padding:13px 18px; font-size:.84rem;}
  .robot-img{width:58vw;}
  .rail-btn{width:46px; height:46px;}
  .icon-btn{width:40px; height:40px;}

  .panel{width:100vw;}
  .panel-head{padding:20px 20px 14px;}
  .panel-breadcrumb{font-size:1.08rem;}
  .panel-body{padding:16px 20px 40px;}

  .edu-card{flex-direction:column; align-items:flex-start; gap:8px;}
  .edu-score{align-self:flex-start;}
  .proj-head{flex-wrap:wrap; gap:8px;}
  .contact-row{flex-wrap:wrap;}
}

@media (max-width: 400px){
  .stage{padding:90px 16px 32px;}
  .name{font-size:clamp(1.8rem, 10vw, 2.3rem);}
  .role{font-size:.92rem;}
  .hint{font-size:.9rem;}
  .robot-img{width:64vw;}
  .robot-platform{transform:translateX(-50%) scale(.6);}
  .socials{gap:10px;}
  .social-btn{width:38px; height:38px;}
  .top-controls{gap:8px;}
  .left-rail{gap:8px;}
  .rail-btn{width:42px; height:42px;}
  .rail-btn svg{width:18px; height:18px;}
}

@media (max-height: 640px) and (min-width: 981px){
  .robot-platform, .robot-img{transform:scale(.82);}
  .stage{padding-top:36px; padding-bottom:36px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* Focus visibility */
button:focus-visible, a:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}