/* ═══════════════════════════════════════════════════
   hero.css — Home / index page styles
   ═══════════════════════════════════════════════════ */

/* ── HERO SECTION ── */
#hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 5% 100px; position: relative; overflow: hidden; }
canvas#particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--accent-rgb),0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb),0.032) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%); }
.hero-inner { position: relative; z-index: 2; }
.hero-orb { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.05) 40%, transparent 70%); filter: blur(44px); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: orbFloat 8s ease-in-out infinite; }
@keyframes orbFloat { 0%,100%{ transform: translate(-50%,-50%) scale(1); } 50%{ transform: translate(-50%,-54%) scale(1.07); } }

.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px; border-radius: 100px; border: 1px solid var(--glass-border); background: var(--glass-bg2); backdrop-filter: blur(12px); font-size: 11px; letter-spacing: 0.16em; font-weight: 500; color: var(--accent); text-transform: uppercase; margin-bottom: 36px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 4px 5px 16px var(--neo-dark), -2px -2px 8px var(--neo-light); }
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: dotPulse 2s infinite; }
.hero-name { font-size: clamp(54px,9vw,116px); font-weight: 700; line-height: 0.88; letter-spacing: -0.04em; margin-bottom: 18px; }
.hn1 { display: block; background: linear-gradient(155deg, #fff 0%, rgba(var(--accent-rgb),0.55) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 4px 32px rgba(var(--accent-rgb),0.22)); }
.hn2 { display: block; color: var(--text-primary); }
.hero-sub  { font-size: clamp(11px,1.4vw,14px); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 22px; }
.hero-tagline { font-size: clamp(15px,1.7vw,18px); font-weight: 300; color: var(--text-secondary); max-width: 500px; margin: 0 auto 50px; line-height: 1.8; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 56px; }
.stat-chip { padding: 13px 24px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 5px 7px 18px var(--neo-dark), -3px -3px 9px var(--neo-light); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .3s cubic-bezier(.34,1.4,.64,1); }
.stat-chip:hover { transform: translateY(-5px) scale(1.06); }
.stat-val { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.stat-lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.scroll-cue { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.32; }
.scroll-cue span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
.scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--accent), transparent); animation: sLine 2s ease-in-out infinite; }
@keyframes sLine { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ── ABOUT SECTION ── */
#about { background: transparent; }
.about-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.about-body { padding: 40px 44px; }
.about-text { font-size: 16px; line-height: 1.85; color: var(--text-secondary); font-weight: 300; }
.about-text strong { color: var(--text-primary); font-weight: 600; }
.about-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.a-chip { padding: 8px 16px; border-radius: 100px; border: 1px solid var(--glass-border); background: var(--glass-bg2); backdrop-filter: blur(10px); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--text-secondary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 3px 4px 10px var(--neo-dark), -1px -1px 5px var(--neo-light); transition: all .3s cubic-bezier(.34,1.4,.64,1); cursor: default; }
.a-chip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),0.35); transform: translateY(-2px); }
.about-sidebar { display: flex; flex-direction: column; gap: 14px; }
.focus-card { padding: 20px 22px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 5px 6px 18px var(--neo-dark), -3px -3px 10px var(--neo-light); display: flex; align-items: center; gap: 16px; transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s; cursor: default; }
.focus-card:hover { transform: translateX(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 20px rgba(var(--accent-rgb),0.09); }
.focus-ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb),0.2); display: flex; align-items: center; justify-content: center; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.28); }
.focus-ico svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.focus-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.focus-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.05em; }

/* ── HOME EXPERIENCE TEASER ── */
#exp-teaser { background: rgba(5,7,14,0.42); }
[data-theme="light"] #exp-teaser { background: rgba(235,238,248,0.52); }
.timeline { max-width: 760px; margin: 0 auto; position: relative; padding-left: 44px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(to bottom, var(--accent), rgba(var(--accent-rgb),0.12), transparent); opacity: 0.32; }
.tl-item { position: relative; margin-bottom: 30px; }
.tl-dot { position: absolute; left: -50px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #060810; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.12), 0 0 16px rgba(var(--accent-rgb),0.28); }
.tl-card { padding: 28px 34px; }
.tl-period { font-size: 10px; font-family: 'JetBrains Mono',monospace; color: var(--accent); letter-spacing: 0.14em; display: block; margin-bottom: 10px; text-transform: uppercase; }
.tl-role { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.01em; }
.tl-co { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color .2s; }
a.tl-co:hover { color: var(--accent); }
.tl-co-logo { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); flex-shrink: 0; }
[data-theme="light"] .tl-co-logo { background: rgba(255,255,255,0.7); }
.tl-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.75; font-weight: 300; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tl-tag { padding: 4px 12px; border-radius: 8px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--glass-border); color: var(--text-muted); font-weight: 500; }

/* ── MORE LINK ── */
.more-link { display: flex; justify-content: center; margin-top: 36px; }