*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:           #1a2630;
  --accent:       #88ccff;
  --accent2:      #b4dcff;
  --accent-dim:   rgba(136,204,255,0.09);
  --accent-glow:  rgba(136,204,255,0.28);
  --glass:        rgba(18,32,46,0.72);
  --glass-border: rgba(136,204,255,0.15);
  --text:         #f2f8ff;
  --text-dim:     rgba(200, 225, 248, 0.932);
  --font-head: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-body: 'Outfit', sans-serif;
}

html, body { width:100%; height:100%; background:var(--bg); color:var(--text); font-family:var(--font-body); overflow:hidden; cursor:none; }

/* ── CURSOR ──────────────────────────────────────────────────── */
#cursor { position:fixed; top:0; left:0; width:10px; height:10px; background:var(--accent); border-radius:50%; pointer-events:none; z-index:10000; transform:translate(-50%,-50%); transition:width .25s,height .25s; mix-blend-mode:screen; box-shadow:0 0 12px var(--accent-glow); }
#cursor-ring { position:fixed; top:0; left:0; width:36px; height:36px; border:1px solid rgba(136,204,255,.4); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .3s,height .3s,border-color .3s; }
body:has(a:hover) #cursor, body:has(button:hover) #cursor { width:20px; height:20px; }
body:has(a:hover) #cursor-ring, body:has(button:hover) #cursor-ring { width:52px; height:52px; border-color:var(--accent); }

/* ── CANVAS ──────────────────────────────────────────────────── */
#canvas { position:fixed; inset:0; z-index:0; background:var(--bg); }

/* ── HOME HALO — sits above canvas (z:5), below UI (z:100) ─────
   Dark/dimmed centre, bright glowing ring at the sphere edge    */
#home-halo {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* matches sphere apparent size — 85% of the smaller viewport dim */
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(20,32,44,0.85) 0%,
    rgba(20,32,44,0.75) 25%,
    rgba(20,32,44,0.50) 48%,
    rgba(20,32,44,0.15) 68%,
    rgba(20,32,44,0.02) 82%,
    transparent         100%
  );
  filter: blur(10px);
  transition: opacity .9s ease;
}
#home-halo.hidden { opacity:0; }

/* ── LOADER ──────────────────────────────────────────────────── */
#loader { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; background:var(--bg); transition:opacity 1s ease .4s; }
#loader.hide { opacity:0; pointer-events:none; }
.loader-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; margin:0 5px; animation:ldot 1.2s ease-in-out infinite; box-shadow:0 0 8px var(--accent); }
.loader-dot:nth-child(2){animation-delay:.2s} .loader-dot:nth-child(3){animation-delay:.4s}
@keyframes ldot{0%,80%,100%{transform:scale(.4);opacity:.3}40%{transform:scale(1);opacity:1}}

/* ── APP ─────────────────────────────────────────────────────── */
#app { position:fixed; inset:0; z-index:100; pointer-events:none; opacity:0; transition:opacity 1.2s ease; }
#app.ready { opacity:1; pointer-events:auto; }

/* ── NAV ─────────────────────────────────────────────────────── */
nav { position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; justify-content:space-between; padding:26px 52px; pointer-events:auto; }
.nav-logo { font-family:var(--font-head); font-size:.9rem; font-weight:700; letter-spacing:.18em; color:var(--text); text-transform:uppercase; text-decoration:none; cursor:none; display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.nav-logo-row { display:flex; align-items:center; gap:10px; }
.nav-logo-row::before { content:''; width:8px; height:8px; background:var(--accent); border-radius:50%; box-shadow:0 0 12px var(--accent); animation:pnode 2.4s ease-in-out infinite; flex-shrink:0; }
.nav-logo-sub { font-family:var(--font-mono); font-size:.48rem; letter-spacing:.18em; color:var(--text-dim); opacity:.55; margin-left:18px; text-transform:uppercase; font-weight:400; }
@keyframes pnode{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.6)}}
.nav-links { display:flex; gap:4px; }
.nav-link { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--text-dim); text-transform:uppercase; background:none; border:none; cursor:none; padding:8px 18px; position:relative; transition:color .25s; }
.nav-link::after { content:''; position:absolute; bottom:4px; left:18px; right:18px; height:1px; background:var(--accent); transform:scaleX(0); transition:transform .3s; transform-origin:left; }
.nav-link:hover,.nav-link.active { color:var(--text); }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }

/* ── HAMBURGER (mobile) ──────────────────────────────────────── */
.hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:1px solid var(--glass-border); border-radius:3px; cursor:none; padding:8px; transition:border-color .25s; }
.hamburger span { display:block; height:1px; background:var(--text-dim); transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); background:var(--accent); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); background:var(--accent); }
.hamburger:hover { border-color:var(--accent); }
.hamburger:hover span { background:var(--accent); }

/* ── MOBILE MENU ─────────────────────────────────────────────── */
.mobile-menu {
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:490; /* below nav (500) - nav sits on top */
  background:rgba(15,23,35,0.97);
  backdrop-filter:blur(16px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.2,0,0,1);
  pointer-events:none;
}
.mobile-menu.open { transform:translateY(0); pointer-events:auto; }
.mobile-nav-link {
  font-family:var(--font-head); font-size:2.2rem; font-weight:800;
  letter-spacing:-.02em; color:var(--text-dim); background:none; border:none;
  cursor:none; padding:12px 40px; text-transform:uppercase;
  transition:color .25s, transform .25s;
}
.mobile-nav-link:hover { color:var(--accent); transform:translateX(8px); }
.mobile-nav-link.active { color:var(--accent); }
.mobile-menu-divider { width:40px; height:1px; background:var(--glass-border); margin:8px 0; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.section { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .6s ease, transform .6s ease; transform:translateY(10px); }
.section.active { opacity:1; pointer-events:auto; transform:translateY(0); }

/* ── HOME ────────────────────────────────────────────────────── */
#home { flex-direction:column; }
.home-content { text-align:center; z-index:10; display:flex; flex-direction:column; align-items:center; }
.home-greeting { font-family:var(--font-mono); font-size:.66rem; color:var(--accent); letter-spacing:.28em; text-transform:uppercase; margin-bottom:26px; opacity:0; transform:translateY(18px); animation:fup .8s ease .4s forwards; }
.home-name { font-family:var(--font-head); font-size:clamp(3rem,7.5vw,6.8rem); font-weight:800; line-height:.93; letter-spacing:-.025em; color:var(--text); opacity:0; transform:translateY(28px); animation:fup .9s ease .65s forwards; }
.home-name span { color:var(--accent); }
.home-titles { margin-top:24px; font-family:var(--font-mono); font-size:.78rem; color:var(--text-dim); letter-spacing:.08em; height:22px; overflow:hidden; opacity:0; animation:fup .8s ease 1.05s forwards; }
.titles-inner { transition:transform .6s cubic-bezier(.4,0,.2,1); }
.title-item { height:22px; display:flex; align-items:center; justify-content:center; }
.home-tagline { margin-top:34px; max-width:455px; font-size:.96rem; font-weight:300; line-height:1.78; color:var(--text-dim); opacity:0; animation:fup .8s ease 1.25s forwards; }
.home-tagline strong { color:var(--text); font-weight:500; }
.home-ctas { margin-top:48px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; opacity:0; animation:fup .8s ease 1.45s forwards; }
@keyframes fup{ to{opacity:1;transform:translateY(0)} }

.btn-primary { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; background:var(--accent); color:#0c1820; border:none; padding:14px 34px; border-radius:2px; cursor:none; font-weight:500; transition:all .3s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(136,204,255,0.28); }
.btn-ghost { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; background:none; color:var(--text); border:1px solid var(--glass-border); padding:14px 34px; border-radius:2px; cursor:none; transition:all .3s; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.scroll-hint { position:absolute; bottom:44px; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.57rem; letter-spacing:.22em; color:var(--text-dim); text-transform:uppercase; opacity:0; animation:fup .8s ease 2s forwards; }
.scroll-line { width:1px; height:42px; background:linear-gradient(to bottom,var(--accent),transparent); animation:sline 2.2s ease-in-out infinite; }
@keyframes sline{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.4);opacity:.3}}

/* ── SHARED ──────────────────────────────────────────────────── */
.section-header { display:flex; align-items:baseline; gap:18px; margin-bottom:32px; }
.section-label { font-family:var(--font-mono); font-size:.60rem; color:var(--accent); letter-spacing:.25em; text-transform:uppercase; }
.section-title { font-family:var(--font-head); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; letter-spacing:-.02em; }

/* ── PROJECTS ────────────────────────────────────────────────── */
/* Sphere moves UP → appears at top ~25% of viewport */
#projects { align-items:flex-end; padding-bottom:0; overflow:hidden; }
.projects-wrap { width:100%; max-width:1280px; padding:0 52px 48px; max-height:70vh; overflow-y:auto; }
.projects-wrap::-webkit-scrollbar { width:2px; }
.projects-wrap::-webkit-scrollbar-thumb { background:var(--accent-dim); }

.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.filter-btn { font-family:var(--font-mono); font-size:.61rem; letter-spacing:.10em; text-transform:uppercase; background:none; border:1px solid var(--glass-border); color:var(--text-dim); padding:6px 16px; border-radius:100px; cursor:none; transition:all .25s; }
.filter-btn:hover,.filter-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

.project-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:3px; overflow:hidden; cursor:none; position:relative; transition:transform .35s cubic-bezier(.2,0,0,1),border-color .3s,box-shadow .3s; }
.project-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(136,204,255,.06),transparent 55%); opacity:0; transition:opacity .3s; }
.project-card:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 18px 52px rgba(0,0,0,.45),0 0 26px var(--accent-dim); }
.project-card:hover::before { opacity:1; }
.project-thumb { width:100%; aspect-ratio:16/9; background:linear-gradient(140deg,#0f1e2c,#0c1928); display:flex; align-items:center; justify-content:center; position:relative; }
.project-thumb-icon { font-size:2.4rem; opacity:.18; transition:opacity .3s,transform .3s; }
.project-card:hover .project-thumb-icon { opacity:.4; transform:scale(1.1); }
.project-thumb-glow { position:absolute; inset:0; background:radial-gradient(circle at 50% 60%,rgba(136,204,255,.08),transparent 65%); opacity:0; transition:opacity .3s; }
.project-card:hover .project-thumb-glow { opacity:1; }
.project-body { padding:20px; }
.project-cat { font-family:var(--font-mono); font-size:.57rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.project-title { font-family:var(--font-head); font-size:1.05rem; font-weight:700; margin-bottom:8px; line-height:1.25; }
.project-desc { font-size:.82rem; font-weight:300; line-height:1.68; color:rgba(200, 225, 248, 0.884); margin-bottom:14px; }
.project-tags { display:flex; gap:5px; flex-wrap:wrap; }
.tag { font-family:var(--font-mono); font-size:.57rem; letter-spacing:.07em; text-transform:uppercase; background:rgba(136,204,255,.07); border:1px solid rgba(136,204,255,.17); color:var(--accent2); padding:3px 9px; border-radius:2px; }
.project-arrow { position:absolute; top:14px; right:14px; width:30px; height:30px; border:1px solid var(--glass-border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:.7rem; opacity:0; transition:opacity .3s,border-color .3s,color .3s; cursor:none; }
.project-card:hover .project-arrow { opacity:1; border-color:var(--accent); color:var(--accent); }

/* ── ABOUT ───────────────────────────────────────────────────── */
/* Sphere moves LEFT → visible on left side of viewport */
#about { display:block; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .6s ease, transform .6s ease; transform:translateY(10px); }
#about.active { opacity:1; pointer-events:auto; transform:translateY(0); }

.about-grid {
  display:grid;
  grid-template-columns:420px 1fr;
  width:100%;
  height:100vh;
  overflow:hidden;
}
.about-left {
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:90px 32px 48px 52px;
  display:flex; flex-direction:column; gap:0;
  border-right:1px solid var(--glass-border);
}
.about-left::-webkit-scrollbar { width:0; }
.about-right {
  height:100vh;
  overflow-y:auto;
  padding:90px 52px 60px 48px;
}
.about-right::-webkit-scrollbar { width:2px; }
.about-right::-webkit-scrollbar-thumb { background:var(--accent-dim); }

.portrait-frame { width:100%; aspect-ratio:3/4; max-width:240px; border:1px solid var(--glass-border); border-radius:3px; background:linear-gradient(155deg,#101e2c,#0a1620); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin-bottom:22px; flex-shrink:0; }
.portrait-placeholder { font-size:4.5rem; opacity:.1; }
.portrait-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 55%,rgba(136,204,255,.05)); }
.portrait-glow { position:absolute; bottom:-50px; left:50%; transform:translateX(-50%); width:200px; height:200px; background:radial-gradient(circle,rgba(136,204,255,.16),transparent 65%); }
.about-chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:28px; }
.chip { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.10em; text-transform:uppercase; border:1px solid var(--glass-border); color:var(--text-dim); padding:7px 13px; border-radius:2px; background:none; cursor:none; transition:all .25s; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.chip:hover { border-color:var(--accent); color:var(--accent); }

/* Skills now in left column */
.about-skills-label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.about-skills-label::after { content:''; flex:1; height:1px; background:linear-gradient(to right,var(--glass-border),transparent); }
.skills-cloud { display:flex; gap:6px; flex-wrap:wrap; }
.skill-pill { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:100px; border:1px solid var(--glass-border); color:var(--text-dim); transition:all .3s; animation:sfloat var(--dur,3s) ease-in-out infinite; animation-delay:var(--del,0s); }
.skill-pill:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
@keyframes sfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.bio-text { font-size:.97rem; font-weight:300; line-height:1.88; color:rgba(205,228,250,.82); margin-bottom:44px; }
.bio-text strong { color:var(--text); font-weight:500; }
.bio-text em { color:var(--accent2); font-style:normal; }
.about-block { margin-bottom:40px; }
.about-block-label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.about-block-label::after { content:''; flex:1; height:1px; background:linear-gradient(to right,var(--glass-border),transparent); }
.edu-item { margin-bottom:16px; }
.edu-degree { font-family:var(--font-head); font-size:.92rem; font-weight:600; }
.edu-school { font-family:var(--font-mono); font-size:.66rem; color:var(--text-dim); margin-top:3px; }
.timeline { position:relative; padding-left:22px; }
.timeline::before { content:''; position:absolute; left:0; top:8px; bottom:0; width:1px; background:linear-gradient(to bottom,var(--accent),transparent); }
.timeline-item { position:relative; margin-bottom:24px; }
.timeline-item::before { content:''; position:absolute; left:-26px; top:6px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.timeline-role { font-family:var(--font-head); font-size:.92rem; font-weight:600; }
.timeline-org { font-family:var(--font-mono); font-size:.65rem; color:var(--accent2); margin-top:3px; }
.timeline-desc { font-size:.80rem; font-weight:300; line-height:1.65; color:rgba(200,225,248,0.72); margin-top:6px; }

/* ── CONTACT ─────────────────────────────────────────────────── */
/* Sphere moves DOWN → visible at bottom, content at top */
#contact { align-items:flex-start; padding-top:56px; overflow:hidden; }
.contact-wrap { width:100%; max-width:920px; margin:0 auto; padding:0 52px 60px; max-height:calc(100vh - 80px); overflow-y:auto; }
.contact-wrap::-webkit-scrollbar { width:2px; }
.contact-wrap::-webkit-scrollbar-thumb { background:var(--accent-dim); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:58px; }
.contact-big { font-family:var(--font-head); font-size:clamp(1.8rem,3.5vw,2.75rem); font-weight:800; line-height:1.1; margin-bottom:20px; }
.contact-big span { color:var(--accent); display:block; }
.contact-sub { font-size:.86rem; font-weight:300; line-height:1.74; color:var(--text-dim); margin-bottom:34px; }
.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.social-card { border:1px solid var(--glass-border); border-radius:3px; padding:13px; display:flex; align-items:center; gap:9px; text-decoration:none; cursor:none; transition:all .3s; color:var(--text-dim); background:var(--glass); }
.social-card:hover { border-color:var(--accent); color:var(--text); transform:translateY(-2px); }
.social-card:hover .sicon { color:var(--accent); }
.sicon { font-size:.95rem; transition:color .3s; }
.slabel { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.10em; }
.form-group { margin-bottom:16px; }
.form-label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:7px; }
.form-input, .form-textarea { width:100%; background:var(--glass); border:1px solid var(--glass-border); border-radius:2px; color:var(--text); font-family:var(--font-body); font-size:.85rem; padding:11px 14px; outline:none; resize:none; transition:border-color .3s,box-shadow .3s; }
.form-input:focus,.form-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-dim); }
.form-textarea { height:110px; }
.submit-btn { width:100%; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; background:var(--accent); color:#0c1820; border:none; padding:14px; border-radius:2px; cursor:none; font-weight:500; transition:all .3s; }
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(136,204,255,0.26); }
.submit-success { display:none; text-align:center; padding:22px; font-family:var(--font-mono); font-size:.7rem; color:var(--accent); letter-spacing:.12em; }
.submit-success.show { display:block; }

/* ── PROJECT DETAIL PANEL ────────────────────────────────────── */
.project-detail {
  position:fixed; inset:0; z-index:700;
  background:rgba(12,22,34,0.97);
  backdrop-filter:blur(12px);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(.2,0,0,1);
  pointer-events:none;
}
.project-detail.open { transform:translateX(0); pointer-events:auto; }
.detail-close {
  position:sticky; top:0;
  width:100%; display:flex; align-items:center; gap:14px;
  padding:22px 52px;
  background:rgba(12,22,34,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--glass-border);
  cursor:none; border:none; color:var(--text-dim);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  transition:color .25s;
  z-index:10;
}
.detail-close:hover { color:var(--accent); }
.detail-close-x { width:32px; height:32px; border:1px solid var(--glass-border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:border-color .25s,color .25s; flex-shrink:0; }
.detail-close:hover .detail-close-x { border-color:var(--accent); }
.detail-body { max-width:960px; margin:0 auto; padding:52px 52px 80px; }

.detail-hero { margin-bottom:52px; }
.detail-cat { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.detail-title { font-family:var(--font-head); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.03em; line-height:.95; margin-bottom:22px; }
.detail-summary { font-size:1.05rem; font-weight:300; line-height:1.82; color:var(--text-dim); max-width:680px; }
.detail-summary strong { color:var(--text); font-weight:500; }

.detail-thumb { width:100%; aspect-ratio:16/7; background:linear-gradient(140deg,#0f1e2c,#0c1928); border:1px solid var(--glass-border); border-radius:3px; display:flex; align-items:center; justify-content:center; margin-bottom:52px; position:relative; overflow:hidden; }
.detail-thumb-icon { font-size:5rem; opacity:.12; }
.detail-thumb-glow { position:absolute; inset:0; background:radial-gradient(circle at 50% 60%,rgba(136,204,255,.06),transparent 65%); }

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:48px; }
.detail-block-label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.detail-block-label::after { content:''; flex:1; height:1px; background:linear-gradient(to right,var(--glass-border),transparent); }
.detail-text { font-size:.88rem; font-weight:300; line-height:1.78; color:var(--text-dim); }
.detail-text strong { color:var(--text); font-weight:500; }

.detail-tags { display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.detail-tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(136,204,255,.08); border:1px solid rgba(136,204,255,.20); color:var(--accent2); padding:5px 12px; border-radius:2px; }

.detail-role-badge { display:inline-block; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#0c1820; padding:6px 16px; border-radius:2px; font-weight:500; margin-top:8px; }

/* ── CORNER HUD ──────────────────────────────────────────────── */
.corner-dec { position:fixed; z-index:200; pointer-events:none; font-family:var(--font-mono); font-size:.52rem; letter-spacing:.14em; color:var(--text-dim); opacity:.42; line-height:1.65; }
.corner-dec.tl { top:22px; left:22px; }
.corner-dec.tr { top:22px; right:22px; text-align:right; }
.corner-dec.bl { bottom:22px; left:22px; }
.corner-dec.br { bottom:22px; right:22px; text-align:right; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:900px){
  /* Disable custom cursor on mobile/touch */
  html, body { cursor:auto; }
  #cursor, #cursor-ring { display:none; }
  .hamburger, .btn-primary, .btn-ghost, .filter-btn, .chip,
  .project-card, .submit-btn, .social-card, .mobile-nav-link,
  .nav-link, .skill-pill, .detail-close, .nav-logo { cursor:pointer; }

  nav { padding:18px 24px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }

  /* Home — fix title overflow and tagline margins */
  .home-name { font-size:clamp(2.2rem,12vw,2.8rem); letter-spacing:-.02em; }
  .home-tagline { max-width:100%; padding:0 25px; font-size:.88rem; }
  .home-ctas { flex-direction:column; align-items:center; }
  .scroll-hint { display:none; }

  /* Projects */
  #projects { align-items:flex-start; padding-top:90px; padding-bottom:0; }
  .projects-wrap { padding:0 24px 40px; max-height:calc(100vh - 100px); }
  .projects-grid { grid-template-columns:1fr; }

  /* About — single column, portrait centred */
  #about { display:flex; align-items:flex-start; overflow-y:auto; }
  .about-grid { grid-template-columns:1fr; height:auto; overflow:visible; }
  .about-left { height:auto; overflow:visible; padding:90px 24px 24px; align-items:center; border-right:none; border-bottom:1px solid var(--glass-border); }
  .about-right { height:auto; overflow:visible; padding:32px 24px 60px; }
  .portrait-frame { margin-left:auto; margin-right:auto; }
  .about-chips { justify-content:center; }
  .about-skills-label { justify-content:center; }
  .skills-cloud { justify-content:center; }

  /* Contact */
  #contact { padding-top:90px; }
  .contact-wrap { padding:0 24px 60px; max-height:calc(100vh - 90px); }
  .contact-grid { grid-template-columns:1fr; gap:36px; }

  /* Detail */
  .detail-body { padding:32px 24px 60px; }
  .detail-grid { grid-template-columns:1fr; gap:32px; }
  .detail-close { padding:18px 24px; }
}