@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --bg-base: #050805;
  --bg-0: rgba(10,15,10,0.65); 
  --bg-1: rgba(13,19,13,0.65); 
  --bg-2: rgba(17,24,17,0.65);
  --bg-3: rgba(20,31,20,0.65); 
  --bg-4: rgba(24,32,24,0.65);

  --accent: #4ade80; --accent-dim: #22c55e;
  --accent-glow: rgba(74,222,128,0.12);
  --accent-glow-strong: rgba(74,222,128,0.2);
  --text-primary: #e8ede8; --text-secondary: #8fa48f; --text-muted: #4a5e4a;
  --border: rgba(74,222,128,0.1); --border-hover: rgba(74,222,128,0.25);
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior:smooth; }
body { background:var(--bg-base); color:var(--text-primary); font-family:var(--font-body); font-size:16px; line-height:1.7; overflow-x:hidden; cursor:none; }

#matrix-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#cursor,#navbar,section,.tools-ticker-section,footer { position:relative; z-index:2; }

#cursor { position:fixed; top:0; left:0; pointer-events:none; z-index:9999; mix-blend-mode:difference; }
#cursor-dot { width:8px; height:8px; background:var(--accent); border-radius:50%; position:absolute; transform:translate(-50%,-50%); }
#cursor-ring { width:36px; height:36px; border:1px solid rgba(74,222,128,.5); border-radius:50%; position:absolute; transform:translate(-50%,-50%); transition:width .2s,height .2s,border-color .2s; }
body.cursor-hover #cursor-ring { width:56px; height:56px; border-color:var(--accent); }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg-1); }
::-webkit-scrollbar-thumb { background:var(--accent-dim); border-radius:2px; }
::selection { background:var(--accent-glow-strong); color:var(--accent); }

/* ── Navbar & Language Toggle ── */
#navbar { position:fixed; top:0; left:0; right:0; z-index:100; padding:0 5%; display:flex; align-items:center; justify-content:space-between; height:72px; background:rgba(10,15,10,.7); backdrop-filter:blur(20px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; }
#navbar.scrolled { border-color:var(--border); background:rgba(10,15,10,.92); }
.nav-logo { font-family:var(--font-mono); font-size:1.1rem; color:var(--accent); text-decoration:none; letter-spacing:.05em; }
.nav-logo span { color:var(--text-secondary); }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; margin-right: auto; margin-left: 3rem; }
.nav-links a { font-family:var(--font-mono); font-size:.72rem; color:var(--text-secondary); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--accent); transition:width .3s; }
.nav-links a:hover { color:var(--accent); }
.nav-links a:hover::after { width:100%; }

.lang-switch { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.65rem; color:var(--text-muted); }
.lang-switch button { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:0.1em; transition:color 0.2s; padding:4px; }
.lang-switch button:hover { color:var(--accent); }
.lang-switch button.active { color:var(--accent); font-weight:700; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }

.nav-dropdown { position:relative; }
.nav-dropdown-btn { font-family:var(--font-mono); font-size:.72rem; color:var(--text-secondary); background:none; border:none; cursor:pointer; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:5px; padding:4px 0; transition:color .2s; }
.nav-dropdown-btn:hover,.nav-dropdown-btn.open { color:var(--accent); }
.dropdown-arrow { transition:transform .2s; display:inline-block; }
.nav-dropdown-btn.open .dropdown-arrow { transform:rotate(180deg); }
.nav-dropdown-menu { position:absolute; top:calc(100% + 14px); right:0; background:rgba(13,19,13,.97); border:1px solid var(--border); border-radius:4px; min-width:160px; padding:8px 0; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s,transform .2s,visibility .2s; z-index:200; backdrop-filter:blur(20px); }
.nav-dropdown-menu.open { opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-menu a { display:flex; align-items:center; gap:10px; padding:10px 18px; font-family:var(--font-mono); font-size:.68rem; color:var(--text-secondary); text-decoration:none; letter-spacing:.08em; transition:color .2s,background .2s; }
.nav-dropdown-menu a:hover { color:var(--accent); background:var(--accent-glow); }
.nav-dropdown-menu a svg { width:14px; height:14px; flex-shrink:0; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:transparent; border:none; }
.hamburger span { width:24px; height:1px; background:var(--text-primary); transition:all .3s; display:block; }

/* ── Hero ── */
#hero { min-height:100vh; display:flex; align-items:center; padding:0 5%; position:relative; overflow:hidden; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(74,222,128,.06) 0%,transparent 70%),linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 100%); }
.hero-content { position:relative; z-index:2; max-width:820px; }
.hero-tag { font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:12px; }
.hero-tag::before { content:''; width:32px; height:1px; background:var(--accent); }

.glitch-banner { width:100%; overflow:hidden; margin:.5rem 0; position:relative; border-top:1px solid rgba(74,222,128,.07); border-bottom:1px solid rgba(74,222,128,.07); padding:5px 0; }
.glitch-banner::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,transparent 8%,transparent 92%,transparent 100%); z-index:2; pointer-events:none; }
.glitch-track { display:flex; align-items:center; white-space:nowrap; animation:tickL 22s linear infinite; }
.glitch-track--rev { animation:tickR 22s linear infinite; }
@keyframes tickL { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes tickR { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.gw { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); padding:0 1.5rem; cursor:default; }
.gw.glitch-active { color:var(--accent); animation:gflash .4s steps(1) forwards; }
@keyframes gflash { 0%{opacity:1} 20%{opacity:.3;filter:hue-rotate(90deg)} 50%{opacity:1} 75%{opacity:.6} 100%{opacity:1;filter:none} }
.gs { color:rgba(74,222,128,.2); font-family:var(--font-mono); font-size:.7rem; }

.hero-name { font-family:var(--font-display); font-size:clamp(3.5rem,9vw,7.5rem); font-weight:800; line-height:.92; letter-spacing:-.03em; color:var(--text-primary); margin:.3rem 0; }
.hero-name .accent { color:var(--accent); }
.hero-roles { font-family:var(--font-mono); font-size:clamp(.9rem,2vw,1.05rem); color:var(--text-secondary); margin-bottom:1.4rem; min-height:1.8em; }
.hero-roles .typed-cursor { color:var(--accent); }
.hero-bio { font-size:1rem; color:var(--text-secondary); max-width:540px; line-height:1.8; margin-bottom:2.5rem; font-weight:300; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary { font-family:var(--font-mono); font-size:.75rem; background:var(--accent); color:#0a0f0a; padding:14px 32px; border:none; border-radius:3px; cursor:pointer; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .2s,box-shadow .2s; font-weight:700; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(74,222,128,.3); }
.btn-secondary { font-family:var(--font-mono); font-size:.75rem; background:transparent; color:var(--text-primary); padding:14px 32px; border:1px solid var(--border-hover); border-radius:3px; cursor:pointer; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:border-color .2s,color .2s; }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

/* ── INTERACTIVE HERO PHOTO ── */
.hero-photo-col { position:absolute; right:5%; top:50%; transform:translateY(-50%); z-index:2; perspective: 1000px; }
.hero-photo-wrapper { width:260px; height:320px; cursor:crosshair; transform-style: preserve-3d; }
.hero-photo-frame { 
  width:100%; height:100%; border:1px solid var(--border); border-radius:4px; 
  position:relative; background:var(--bg-2); 
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; transition: transform 0.1s ease-out;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Image & Glitch Layers */
.hero-photo-frame img { width:100%; height:100%; object-fit:cover; display:block; filter: grayscale(0.2) contrast(1.1); }
.glitch-layer { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; pointer-events:none; mix-blend-mode: screen; }
.layer-r { transform: translate(-4px, 2px); filter: brightness(1) sepia(1) hue-rotate(-50deg) saturate(5); }
.layer-g { transform: translate(4px, -2px); filter: brightness(1) sepia(1) hue-rotate(50deg) saturate(5); }
.layer-b { transform: translate(-2px, 4px); filter: brightness(1) sepia(1) hue-rotate(180deg) saturate(5); }

/* Glitch Animation Triggers on Click (.glitching class added via JS) */
.hero-photo-frame.glitching .main-img { opacity: 0.8; }
.hero-photo-frame.glitching .glitch-layer { opacity: 0.8; animation: photoGlitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.hero-photo-frame.glitching .layer-g { animation-duration: 0.3s; animation-direction: reverse; }
.hero-photo-frame.glitching .layer-b { animation-duration: 0.5s; }

@keyframes photoGlitch {
  0% { clip-path: inset(20% 0 80% 0); transform: translate(-4px, 2px); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); }
  40% { clip-path: inset(40% 0 50% 0); transform: translate(-4px, 4px); }
  60% { clip-path: inset(80% 0 5% 0); transform: translate(4px, 2px); }
  80% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, -4px); }
  100% { clip-path: inset(30% 0 50% 0); transform: translate(0, 0); }
}

/* 3D Glare */
.photo-glare { 
  position:absolute; inset:0; pointer-events:none; opacity: var(--glare-op, 0);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.2) 0%, transparent 50%);
  transition: opacity 0.2s; mix-blend-mode: overlay;
}

.photo-corner { position:absolute; width:16px; height:16px; border-color:var(--accent); border-style:solid; border-width:0; transform: translateZ(20px); }
.photo-corner.tl { top:8px; left:8px; border-top-width:2px; border-left-width:2px; }
.photo-corner.tr { top:8px; right:8px; border-top-width:2px; border-right-width:2px; }
.photo-corner.bl { bottom:8px; left:8px; border-bottom-width:2px; border-left-width:2px; }
.photo-corner.br { bottom:8px; right:8px; border-bottom-width:2px; border-right-width:2px; }

.scroll-indicator { position:absolute; bottom:36px; left:5%; z-index:2; display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:.65rem; color:var(--text-muted); letter-spacing:.15em; }
.scroll-line { width:40px; height:1px; background:var(--text-muted); position:relative; overflow:hidden; }
.scroll-line::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--accent); animation:sline 2s ease-in-out infinite; }
@keyframes sline { 0%{left:-100%} 100%{left:100%} }

/* ── Tools Ticker ── */
.tools-ticker-section { background:var(--bg-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.ticker-row { padding:13px 0; overflow:hidden; position:relative; }
.ticker-row:first-child { border-bottom:1px solid rgba(74,222,128,.06); }
.ticker-row::before,.ticker-row::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.ticker-row::before { left:0; background:linear-gradient(90deg,var(--bg-1),transparent); }
.ticker-row::after  { right:0; background:linear-gradient(-90deg,var(--bg-1),transparent); }
.ticker-track { display:flex; width:max-content; }
.ticker-left  .ticker-track { animation:tickLeft 35s linear infinite; }
.ticker-right .ticker-track { animation:tickRight 35s linear infinite; }
@keyframes tickLeft  { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes tickRight { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.ticker-items { display:flex; align-items:center; }
.ticker-tool { display:flex; align-items:center; gap:9px; padding:0 22px; white-space:nowrap; border-right:1px solid rgba(74,222,128,.07); }
.ticker-tool i { font-size:1.3rem; line-height:1; filter:grayscale(.3); }
.ticker-tool .devicon-threejs-original,.ticker-tool .devicon-nextjs-original,.ticker-tool .devicon-github-original,.ticker-tool .devicon-latex-original { color:var(--text-secondary)!important; }
.ticker-tool .tool-svg { width:18px; height:18px; flex-shrink:0; }
.ticker-tool span { font-family:var(--font-mono); font-size:.65rem; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; }
.tools-ticker-section:hover .ticker-track { animation-play-state:paused; }

/* ── Sections ── */
section { padding:120px 5%; }
.section-tag { font-family:var(--font-mono); font-size:.68rem; color:var(--accent); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.75rem; display:flex; align-items:center; gap:10px; }
.section-tag::before { content:'//'; color:var(--text-muted); }
.section-title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin-bottom:1rem; color:var(--text-primary); }
.section-sub { font-size:.95rem; color:var(--text-secondary); max-width:500px; margin-bottom:4rem; font-weight:300; }

/* ── About ── */
#about { background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-text p { color:var(--text-secondary); margin-bottom:1.2rem; font-weight:300; line-height:1.9; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-top:1.5rem; }
.stat-box { padding:24px; background:var(--bg-2); border:1px solid var(--border); transition:background .2s; }
.stat-box:hover { background:var(--bg-3); }
.stat-num { font-family:var(--font-display); font-size:2.2rem; font-weight:800; color:var(--accent); line-height:1; }
.stat-label { font-family:var(--font-mono); font-size:.65rem; color:var(--text-muted); letter-spacing:.1em; margin-top:6px; }

/* ── Developer Profile JSON Box (About Right) ── */
.profile-code-window { border:1px solid var(--border); border-radius:6px; overflow:hidden; background:#0d1117; font-family:var(--font-mono); font-size:.8rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.mac-bar { display:flex; align-items:center; gap:6px; padding:12px 16px; background:#161b22; border-bottom:1px solid rgba(255,255,255,.05); position:relative; }
.mac-bar span { width:12px; height:12px; border-radius:50%; }
.mac-bar span:nth-child(1) { background:#ff5f57; }
.mac-bar span:nth-child(2) { background:#ffbd2e; }
.mac-bar span:nth-child(3) { background:#28c840; }
.mac-title { position:absolute; left:50%; transform:translateX(-50%); font-size:.65rem; color:var(--text-muted); letter-spacing:.08em; }
.json-code { padding:20px; line-height:1.8; color:#e6edf3; }
.jc-line { display:flex; flex-wrap:wrap; }
.jc-line.i1 { padding-left:1.5rem; }
.jc-line.i2 { padding-left:3.0rem; }
.jc-line.i3 { padding-left:4.5rem; }
.jc-brace, .jc-bracket { color:#8b949e; }
.jc-key { color:#7ee787; }
.jc-colon { color:#8b949e; margin-right:6px; }
.jc-str { color:#a5d6ff; }
.jc-val { color:#ffa657; }
.jc-comma { color:#8b949e; }
.t-green { color:var(--accent); }

/* ── Experience ── */
#experience { background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg-3) 100%); }
.experience-layout { display:flex; flex-direction:column; max-width:800px; margin:0 auto; }
.timeline { position:relative; padding-left:2rem; margin-top:2rem; }
.timeline::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg,var(--accent),var(--border)); }
.timeline-item { position:relative; margin-bottom:3rem; padding-left:2.5rem; }
.timeline-dot { position:absolute; left:-2.5rem; top:6px; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-2); box-shadow:0 0 12px var(--accent); }
.timeline-period { font-family:var(--font-mono); font-size:.65rem; color:var(--accent); letter-spacing:.15em; margin-bottom:.5rem; }
.timeline-role { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--text-primary); margin-bottom:.25rem; }
.timeline-company { font-size:.85rem; color:var(--text-secondary); margin-bottom:1rem; }
.timeline-desc { color:var(--text-secondary); font-size:.9rem; font-weight:300; line-height:1.8; max-width:650px; }
.timeline-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.tag { font-family:var(--font-mono); font-size:.65rem; color:var(--accent); background:var(--accent-glow); border:1px solid var(--border); padding:4px 12px; border-radius:2px; letter-spacing:.05em; }

/* ── Skills ── */
#skills { background:linear-gradient(180deg,var(--bg-3) 0%,var(--bg-4) 100%); }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.skill-category { border:1px solid var(--border); border-radius:4px; padding:28px; background:var(--bg-3); transition:border-color .3s; }
.skill-category:hover { border-color:var(--border-hover); }
.skill-cat-header { display:flex; align-items:center; gap:10px; margin-bottom:1.5rem; }
.skill-cat-icon { font-size:1rem; color:var(--accent); }
.skill-cat-title { font-family:var(--font-mono); font-size:.7rem; color:var(--accent); letter-spacing:.15em; text-transform:uppercase; }
.skill-tags-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.skill-pill { font-family:var(--font-mono); font-size:.62rem; color:var(--text-secondary); background:rgba(255,255,255,.03); border:1px solid var(--border); padding:6px 14px; border-radius:2px; transition:border-color .2s,color .2s,background .2s; cursor:default; }
.skill-pill:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }

/* ── Projects ── */
#projects { background:linear-gradient(180deg,var(--bg-4) 0%,rgba(12,22,12,.65) 100%); }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.project-card { border:1px solid var(--border); border-radius:4px; background:var(--bg-3); overflow:hidden; transition:border-color .3s,box-shadow .3s; cursor:pointer; }
.project-card:hover { border-color:var(--border-hover); box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 1px var(--accent); transform:translateY(-4px)!important; }
.project-img { height:200px; background:var(--bg-2); position:relative; overflow:hidden; }
.project-img > img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.project-card:hover .project-img > img { transform:scale(1.04); }
.project-img-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.project-img > img + .project-img-fallback { display:none; }
.project-img-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--accent-glow) 0%,transparent 60%); }
.project-num { font-family:var(--font-display); font-size:5rem; font-weight:800; color:rgba(74,222,128,.06); position:absolute; right:20px; bottom:-10px; line-height:1; user-select:none; }
.project-type-badge { position:absolute; top:16px; left:16px; font-family:var(--font-mono); font-size:.6rem; color:var(--accent); background:rgba(10,15,10,.85); border:1px solid var(--border); padding:4px 10px; border-radius:2px; letter-spacing:.1em; z-index:2; }
.project-body { padding:28px; }
.project-title { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text-primary); margin-bottom:.75rem; }
.project-desc { font-size:.85rem; color:var(--text-secondary); line-height:1.8; margin-bottom:1.5rem; font-weight:300; }
.project-tech { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1.5rem; }
.project-links { display:flex; gap:1rem; }
.project-link { font-family:var(--font-mono); font-size:.65rem; color:var(--text-secondary); text-decoration:none; letter-spacing:.1em; display:flex; align-items:center; gap:6px; transition:color .2s; }
.project-link:hover { color:var(--accent); }
.project-link svg { width:14px; height:14px; }

/* ── Education ── */
#education { background:linear-gradient(180deg,rgba(12,22,12,.65) 0%,rgba(10,19,10,.65) 100%); }
.edu-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.edu-card { border:1px solid var(--border); border-radius:4px; padding:32px; background:var(--bg-3); transition:border-color .3s; }
.edu-card:hover { border-color:var(--border-hover); }
.edu-period { font-family:var(--font-mono); font-size:.65rem; color:var(--accent); letter-spacing:.15em; margin-bottom:.75rem; }
.edu-degree { font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--text-primary); line-height:1.3; margin-bottom:.5rem; }
.edu-school { font-size:.85rem; color:var(--text-secondary); margin-bottom:1rem; }
.edu-desc { font-size:.82rem; color:var(--text-muted); font-weight:300; line-height:1.7; }
.edu-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.6rem; color:var(--accent); background:var(--accent-glow); border:1px solid var(--border); padding:4px 10px; border-radius:2px; margin-top:1rem; }

/* ── Contact ── */
#contact { background:linear-gradient(180deg,rgba(10,19,10,.65) 0%,rgba(8,13,8,.9) 100%); }
.contact-wrapper { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
.contact-info p { color:var(--text-secondary); font-weight:300; line-height:1.9; margin-bottom:2.5rem; }

/* ── Code Editor Form ── */
.code-editor { border:1px solid var(--border); border-radius:4px; overflow:hidden; background:#0d1117; font-family:var(--font-mono); }
.editor-titlebar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:#161b22; border-bottom:1px solid var(--border); }
.editor-dots { display:flex; gap:6px; }
.editor-dots span { width:12px; height:12px; border-radius:50%; }
.dot-red { background:#ff5f57; } .dot-yellow { background:#ffbd2e; } .dot-green { background:#28c840; }
.editor-filename { font-size:.68rem; color:var(--text-muted); letter-spacing:.08em; }
.editor-lang { font-size:.62rem; color:var(--text-muted); }
.editor-body { position:relative; }
.editor-lines { position:absolute; left:0; top:0; bottom:0; width:40px; background:#161b22; border-right:1px solid rgba(255,255,255,.05); display:flex; flex-direction:column; padding:20px 0; align-items:center; user-select:none; }
.editor-lines span { font-size:.65rem; color:#3d444d; line-height:2.25; display:block; width:100%; text-align:center; }
.editor-code { padding:20px 20px 20px 60px; }
.code-line { display:flex; align-items:center; min-height:36px; }
.code-key { color:#7ee787; font-size:.78rem; min-width:90px; }
.code-colon { color:#8b949e; font-size:.78rem; }
.code-quote { color:#a5d6ff; font-size:.78rem; }
.code-input { background:transparent; border:none; outline:none; color:#ffa657; font-family:var(--font-mono); font-size:.78rem; flex:1; padding:0; caret-color:var(--accent); }
.code-input::placeholder { color:#3d444d; }
.code-comma { color:#8b949e; font-size:.78rem; margin-left:2px; }
.code-bracket { color:#8b949e; font-size:.78rem; }
.code-textarea-wrap { align-items:flex-start; padding-top:4px; }
.code-textarea { background:transparent; border:none; outline:none; color:#ffa657; font-family:var(--font-mono); font-size:.78rem; flex:1; padding:0; resize:none; line-height:1.8; caret-color:var(--accent); min-height:80px; }
.code-textarea::placeholder { color:#3d444d; }
.editor-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:#161b22; border-top:1px solid rgba(255,255,255,.05); }
.editor-status { display:flex; gap:16px; }
.editor-status span { font-size:.62rem; color:#3d444d; }
.editor-submit { font-family:var(--font-mono); font-size:.7rem; background:transparent; color:var(--accent); border:1px solid var(--accent); padding:8px 20px; border-radius:2px; cursor:pointer; letter-spacing:.1em; text-transform:uppercase; transition:background .2s,box-shadow .2s; display:flex; align-items:center; gap:8px; }
.editor-submit:hover { background:var(--accent-glow); box-shadow:0 0 12px rgba(74,222,128,.2); }
.form-status { font-family:var(--font-mono); font-size:.72rem; padding:12px 20px; text-align:center; display:none; }
.form-status.success { color:var(--accent); display:block; }
.form-status.error   { color:#f87171; display:block; }

/* ── Epic Footer ── */
#footer { position:relative; overflow:hidden; background:rgba(5,8,5,0.98); border-top:1px solid var(--border); padding:120px 5% 60px 5%; }
.footer-huge-text { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:clamp(6rem, 20vw, 15rem); font-weight:800; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,0.06); white-space:nowrap; z-index:1; pointer-events:none; user-select:none; letter-spacing:-0.04em; }
.footer-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:5rem; }
.marquee-container { width:100vw; position:relative; left:50%; transform:translateX(-50%); overflow:hidden; background:transparent; display:block; }
.marquee-track { display:flex; width:max-content; animation:scrollMarquee 30s linear infinite; }
.marquee-track span { font-family:var(--font-mono); font-size:clamp(2.5rem, 6vw, 4.5rem); font-weight:700; color:var(--text-primary); padding-right:2rem; white-space:nowrap; text-transform:uppercase; letter-spacing:-0.02em; }
@keyframes scrollMarquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

.footer-tech-sentence { font-family:var(--font-mono); font-size:0.72rem; color:var(--text-secondary); line-height:1.9; text-align:center; max-width:700px; margin:0 auto; font-weight:300; }
.footer-tech-sentence a { color:var(--text-primary); text-decoration:none; border-bottom:1px solid var(--border); transition:color 0.2s, border-color 0.2s; font-weight:400; }
.footer-tech-sentence a:hover { color:var(--accent); border-color:var(--accent); }
.footer-bottom { width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:2rem; border-top:1px solid var(--border); padding-top:2rem; font-family:var(--font-mono); font-size:0.7rem; color:var(--text-muted); }
.f-socials { display:flex; gap:1.5rem; align-items:center; }
.f-socials a { color:var(--text-secondary); transition:color 0.2s, transform 0.2s; cursor:pointer; }
.f-socials a:hover { color:var(--accent); transform:translateY(-2px); }
.f-socials svg { width:18px; height:18px; }

/* ── Reveal & Blur Logic ── */
[data-reveal] { opacity:0; transform:translateY(40px); filter:blur(10px); transition:opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out; }
[data-reveal].visible { opacity:1; transform:translateY(0); filter:blur(0); }

/* ── Responsive ── */
@media (max-width:1024px) {
  .hero-photo-col { display:none; }
  .about-grid,.contact-wrapper { grid-template-columns:1fr; gap:3rem; }
  .edu-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .lang-switch { margin-right: 1.5rem; }
  .hamburger { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:fixed; top:72px; left:0; right:0; background:rgba(10,15,10,.98); padding:2rem 5%; gap:1.5rem; border-bottom:1px solid var(--border); z-index:99; margin:0; }
  .nav-links.open .nav-dropdown-menu { position:static; opacity:1; visibility:visible; transform:none; background:transparent; border:none; padding:0 0 0 1rem; }
  section { padding:80px 5%; }
  .glitch-banner { display:none; }
  .footer-bottom { flex-direction:column; text-align:center; gap:1.5rem; justify-content:center; }
}
@media (max-width:600px) {
  .projects-grid,.skills-grid,.edu-grid { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; }
  section { padding:64px 5%; }
  .ticker-tool span { display:none; }
  .ticker-tool { padding:0 14px; }
  .code-key { min-width:70px; font-size:.72rem; }
  .code-input,.code-textarea { font-size:.72rem; }
  .editor-code { padding:14px 14px 14px 52px; }
  .profile-code-window { font-size: .65rem; }
  .jc-line.i2 { padding-left: 1.5rem; }
  .jc-line.i3 { padding-left: 2.5rem; }
}
@media (max-width:380px) {
  .hero-name { font-size:2.8rem; }
  .btn-primary,.btn-secondary { padding:12px 20px; font-size:.68rem; }
}

@media (pointer: coarse) {
  #cursor { display: none !important; }
  body { cursor: auto !important; }
  body.cursor-hover #cursor-ring { border-color: transparent !important; }
}