:root{
--bg: #070b10;
--bg-raised: #0c131b;
--line: rgba(231,236,243,0.09);
--line-strong: rgba(231,236,243,0.16);
--text: #e7ecf3;
--muted: #8996a8;
--accent: #f2b632;
--accent-dim: rgba(242,182,50,0.14);
--accent-glow: rgba(242,182,50,0.25);
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--maxw: 1080px;
}

*{box-sizing:border-box;}
html{
scroll-behavior:smooth;
scroll-padding-top:76px;
}
body{
margin:0;
background:
radial-gradient(900px 500px at 85% -10%, rgba(242,182,50,0.06), transparent 60%),
var(--bg);
color:var(--text);
font-family:var(--sans);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x: hidden;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: rgba(231, 236, 243, 0.15);
border-radius: 4px;
transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}

::selection{background:var(--accent-dim); color:var(--accent);}
a{color:inherit; transition: color 0.2s ease;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }

/* ===== Header ===== */
header.site{
position:sticky; top:0; z-index:50;
background:rgba(7,11,16,0.85);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
header.site:hover {
border-bottom-color: var(--line-strong);
}
.nav{
max-width:var(--maxw); margin:0 auto; padding:16px 24px;
display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo{
font-family:var(--mono); font-weight:600; font-size:15px;
text-decoration:none; color:var(--text); letter-spacing:0.2px;
transition: transform 0.2s ease;
}
.logo:hover {
transform: translateY(-1px);
}
.logo span{color:var(--accent);}
.nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
.nav-links a{
font-size:14px; text-decoration:none; color:var(--muted);
transition: all .2s ease; font-weight:500;
position: relative;
padding: 4px 0;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
background: var(--accent);
transition: width 0.25s ease;
border-radius: 2px;
}
.nav-links a:hover{
color:var(--text);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-right{display:flex; align-items:center; gap:10px;}
.icon-btn{
width:34px; height:34px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); border-radius:8px; color:var(--muted);
text-decoration:none; transition:all .2s ease;
}
.icon-btn:hover{
color:var(--accent);
border-color:var(--accent);
background:var(--accent-dim);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(242,182,50,0.15);
}
.icon-btn:active {
transform: translateY(0);
}
.resume-btn{
font-family:var(--mono); font-size:13px; font-weight:600;
border:1px solid var(--line-strong); padding:8px 14px; border-radius:8px;
text-decoration:none; color:var(--text); transition:all .2s ease;
box-shadow: 0 0 0 rgba(242,182,50,0);
}
.resume-btn:hover{
border-color:var(--accent);
color:var(--accent);
background: var(--accent-dim);
transform: translateY(-2px);
box-shadow: 0 4px 14px var(--accent-glow);
}
.resume-btn:active {
transform: translateY(0);
}
.menu-toggle{
display:none; background:none; border:1px solid var(--line); border-radius:8px;
color:var(--text); width:34px; height:34px; cursor:pointer; font-size:16px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.menu-toggle:hover {
border-color: var(--line-strong);
background: rgba(255,255,255,0.05);
}
@media (max-width:820px){
.nav-links{
display:none; position:absolute; top:60px; right:24px; left:24px;
flex-direction:column; gap:2px; background:var(--bg-raised);
border:1px solid var(--line); border-radius:12px; padding:10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
animation: fadeInDown 0.25s ease forwards;
}
.nav-links.show{display:flex;}
.nav-links a{padding:10px 8px; border-radius:6px;}
.nav-links a:hover{background:rgba(255,255,255,0.04);}
.nav-links a::after { display: none; }
.menu-toggle{display:block;}
}

@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

/* ===== Section shell ===== */
section{padding:76px 0;}
section.tight{padding:56px 0;}

/* Modern CSS Scroll Reveal (Browsers supporting CSS Animation Timeline) */
@supports (animation-timeline: view()) {
section, .proj-card, .skill-card, .award-card, .term-card, .photo-card, .quick-strip {
animation: scrollReveal auto linear both;
animation-timeline: view();
animation-range: entry 10% cover 25%;
}
}

@keyframes scrollReveal {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.eyebrow{
font-family:var(--mono); font-size:12px; color:var(--accent);
letter-spacing:0.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.eyebrow::before{
content:""; width:16px; height:1px; background:var(--accent); display:inline-block;
transition: width 0.3s ease;
}
section:hover .eyebrow::before {
width: 28px;
}
h2.h{font-size:30px; margin:0 0 10px; letter-spacing:-0.3px;}
.lede{color:var(--muted); max-width:600px; margin:0; font-size:15.5px;}
.section-head{
display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
margin-bottom:36px; border-bottom:1px solid var(--line); padding-bottom:28px;
transition: border-color 0.3s ease;
}
.section-head:hover {
border-bottom-color: var(--line-strong);
}
.section-head-meta{font-family:var(--mono); font-size:12.5px; color:var(--muted); white-space:nowrap;}
@media (max-width:640px){ .section-head{flex-direction:column; align-items:flex-start; gap:10px;} }

/* ===== Hero ===== */
.hero{padding:64px 0 60px;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px;} }
.badge-row{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.badge{
display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px;
color:var(--muted); border:1px solid var(--line); padding:6px 11px; border-radius:20px;
transition: all 0.25s ease;
background: rgba(255,255,255,0.01);
}
.badge:hover {
border-color: var(--line-strong);
color: var(--text);
transform: translateY(-1px);
background: rgba(255,255,255,0.03);
}

/* Pulsing animation for live status */
.dot-live{
width:7px; height:7px; border-radius:50%; background:#4ade80;
box-shadow:0 0 0 0 rgba(74,222,128,0.7);
animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
0% {
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
}
70% {
box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
}
}

.hero h1{
font-size:clamp(40px, 6vw, 62px); line-height:1.03; margin:0 0 6px;
letter-spacing:-1.2px; font-weight:800;
}
.hero h1 .last{color:var(--muted); font-weight:700;}
.hero p.tagline{
color:var(--muted); font-size:17px; max-width:520px; margin:18px 0 30px;
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px;}
.btn{
display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:9px;
text-decoration:none; font-weight:600; font-size:14.5px; transition:all .25s cubic-bezier(0.16, 1, 0.3, 1); border:1px solid transparent;
cursor: pointer;
}
.btn-primary{background:var(--accent); color:#1a1204; box-shadow: 0 2px 10px rgba(242,182,50,0.2);}
.btn-primary:hover{
background:#ffd166;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(242,182,50,0.35);
}
.btn-primary:active { transform: translateY(-1px); }

.btn-ghost{border-color:var(--line-strong); color:var(--text); background: transparent;}
.btn-ghost:hover{
border-color:var(--accent);
color:var(--accent);
background: var(--accent-dim);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.btn-ghost:active { transform: translateY(-1px); }

.stat-row{display:flex; gap:34px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:26px;}
.stat { transition: transform 0.2s ease; }
.stat:hover { transform: translateY(-2px); }
.stat b{font-family:var(--mono); font-size:24px; display:block; color:var(--text); transition: color 0.2s ease;}
.stat:hover b { color: var(--accent); }
.stat span{font-size:12.5px; color:var(--muted);}

.hero-visual{
aspect-ratio:1/1; border-radius:16px; border:1px solid var(--line);
background:
linear-gradient(160deg, rgba(242,182,50,0.08), transparent 55%),
var(--bg-raised);
display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.hero-visual:hover {
border-color: var(--line-strong);
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5), 0 0 30px rgba(242,182,50,0.08);
transform: translateY(-4px);
}
.hero-visual .grid-dots{
position:absolute; inset:0;
background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
background-size:22px 22px;
transition: transform 0.5s ease;
}
.hero-visual:hover .grid-dots {
transform: scale(1.05);
}
.avatar-big{
width:60%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; position:relative; z-index:1;
border:1px solid var(--line-strong); background:linear-gradient(150deg,#111a24,#0a1119);
transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.hero-visual:hover .avatar-big {
transform: scale(1.03);
border-color: var(--accent);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.avatar-big img{width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease;}
.avatar-big:hover img { transform: scale(1.08); }
.avatar-big .initials{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-weight:700; font-size:56px; color:var(--accent);
}
.visual-tag{
position:absolute; bottom:16px; left:16px; right:16px; z-index:2;
display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--muted);
}
.visual-badge{
position:absolute; top:16px; right:16px; z-index:2; font-family:var(--mono); font-size:11px;
color:var(--muted); border:1px solid var(--line); padding:5px 9px; border-radius:6px; text-align:right; line-height:1.5;
background: rgba(12, 19, 27, 0.7); backdrop-filter: blur(4px);
transition: all 0.25s ease;
}
.visual-badge:hover {
border-color: var(--accent);
color: var(--accent);
}

/* ===== About ===== */
.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:32px; align-items:stretch;}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }
.photo-card{
border:1px solid var(--line); border-radius:14px; overflow:hidden; position:relative;
background:var(--bg-raised); min-height:280px;
transition: all 0.3s ease;
}
.photo-card:hover {
border-color: var(--line-strong);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.photo-card img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition: transform 0.5s ease;}
.photo-card:hover img { transform: scale(1.06); }
.photo-card .initials{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-weight:700; font-size:64px; color:var(--accent);
}
.photo-card .cap{
position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
font-family:var(--mono); font-size:12.5px; z-index:2;
transition: color 0.3s ease;
}
.photo-card:hover .cap { color: var(--accent); }

.term-card{
border:1px solid var(--line); border-radius:14px; background:var(--bg-raised); overflow:hidden;
display:flex; flex-direction:column;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.term-card:hover {
border-color: var(--line-strong);
transform: translateY(-4px);
box-shadow: 0 14px 35px rgba(0,0,0,0.4);
}
.term-bar{
display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line);
}
.term-bar .tdot{width:10px; height:10px; border-radius:50%; background:#3a3f47; transition: background 0.2s ease;}
.term-card:hover .term-bar .tdot:nth-child(1) { background: #ff5f56; }
.term-card:hover .term-bar .tdot:nth-child(2) { background: #ffbd2e; }
.term-card:hover .term-bar .tdot:nth-child(3) { background: #27c93f; }
.term-bar .fname{font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-left:8px;}
.term-body{padding:24px 26px; font-size:15px; color:#cdd6e2;}
.term-body p{margin:0 0 16px;}
.term-body p:last-child{margin-bottom:0;}
.term-body .prompt{font-family:var(--mono); color:var(--accent); font-size:12.5px; margin-bottom:14px;}

/* ===== GitHub Activity Graph Styling ===== */
#github {
background: #0d1117;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 20px;
color: #c9d1d9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin-top: 24px;
position: relative;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#github:hover {
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.gh-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 14px;
color: #8b949e;
}

.gh-title {
display: flex;
align-items: center;
gap: 8px;
}

.gh-username {
color: #8b949e;
text-decoration: none;
transition: color 0.2s ease;
}
.gh-username:hover {
color: #58a6ff;
text-decoration: underline;
}

.gh-calendar-wrapper {
display: flex;
flex-direction: column;
overflow-x: auto;
padding-bottom: 6px;
}

.gh-months {
display: flex;
font-size: 11px;
color: #8b949e;
margin-left: 20px;
margin-bottom: 6px;
gap: 28px;
}

.gh-grid {
display: flex;
gap: 3px;
min-height: 105px;
}

.gh-week {
display: flex;
flex-direction: column;
gap: 3px;
}

.gh-day {
width: 11px;
height: 11px;
border-radius: 2px;
background-color: #161b22;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), outline 0.15s ease, box-shadow 0.15s ease;
position: relative;
cursor: pointer;
}

.gh-day:hover {
transform: scale(1.45);
z-index: 10;
outline: 1px solid #fff;
box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

/* Contribution Colors (GitHub Dark Theme) */
.gh-day[data-level="0"], .lvl-0 { background-color: #161b22; }
.gh-day[data-level="1"], .lvl-1 { background-color: #0e4429; }
.gh-day[data-level="2"], .lvl-2 { background-color: #006d32; }
.gh-day[data-level="3"], .lvl-3 { background-color: #26a641; }
.gh-day[data-level="4"], .lvl-4 { background-color: #39d353; }

/* GitHub Hover Tooltip Styling */
.gh-tooltip {
position: absolute;
background: #6e7681;
color: #ffffff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transform: translate(-50%, -100%) translateY(-6px);
}

.gh-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #6e7681 transparent transparent transparent;
}

.gh-tooltip.show {
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%) translateY(-10px);
}

.gh-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14px;
font-size: 12px;
color: #8b949e;
}

.gh-legend {
display: flex;
align-items: center;
gap: 4px;
}

.gh-legend .square {
width: 11px;
height: 11px;
border-radius: 2px;
}

.gh-loading {
font-size: 13px;
color: #8b949e;
padding: 20px 0;
}

/* ===== Skills ===== */
.skill-groups{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
@media (max-width:900px){ .skill-groups{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .skill-groups{grid-template-columns:1fr;} }
.skill-card{
border:1px solid var(--line); border-radius:12px; padding:18px 18px 8px; background:var(--bg-raised);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.skill-card:hover {
transform: translateY(-5px);
border-color: var(--line-strong);
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4), 0 0 15px rgba(242,182,50,0.05);
}
.skill-card h3{
font-family:var(--mono); font-size:12.5px; letter-spacing:0.4px; color:var(--muted);
margin:0 0 14px; font-weight:600; display:flex; justify-content:space-between;
}
.skill-card h3 em{color:var(--accent); font-style:normal;}
.chip-list{display:flex; flex-wrap:wrap; gap:8px; padding-bottom:10px;}
.chip{
font-size:13px; padding:6px 11px; border-radius:7px; border:1px solid var(--line);
color:#d6dde7; background:rgba(255,255,255,0.015);
transition: all 0.2s ease;
cursor: default;
}
.chip:hover {
border-color: var(--accent);
color: var(--text);
background: var(--accent-dim);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* ===== Projects ===== */
.proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:820px){ .proj-grid{grid-template-columns:1fr;} }
.proj-card{
border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--bg-raised);
display:flex; flex-direction:column;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.proj-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.proj-card:hover{
border-color:var(--line-strong);
transform: translateY(-6px);
box-shadow: 0 16px 36px -10px rgba(0,0,0,0.5), 0 0 20px rgba(242,182,50,0.08);
}
.proj-card:hover::before {
opacity: 1;
}
.proj-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;}
.proj-status{
font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line);
padding:4px 9px; border-radius:20px; display:flex; align-items:center; gap:6px; white-space:nowrap;
transition: border-color 0.2s ease;
}
.proj-card:hover .proj-status {
border-color: var(--line-strong);
}
.proj-status .d{width:6px; height:6px; border-radius:50%; background:var(--accent);}
.proj-card h3{
font-size:19px; margin:2px 0 10px;
transition: color 0.2s ease;
}
.proj-card:hover h3 {
color: var(--text);
}
.proj-card p{color:var(--muted); font-size:14.5px; margin:0 0 18px; flex:1;}
.tag-row{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px;}
.tag{
font-family:var(--mono); font-size:11px; color:#aab4c2; border:1px solid var(--line);
padding:4px 8px; border-radius:6px;
transition: all 0.2s ease;
}
.tag:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(242,182,50,0.05);
}
.proj-card .link{
font-size:13.5px; font-weight:600; text-decoration:none; color:var(--accent);
display:inline-flex; align-items:center; gap:6px; width:fit-content;
transition: transform 0.2s ease, gap 0.2s ease;
}
.proj-card .link:hover{
text-decoration:none;
gap: 10px;
transform: translateX(3px);
}

/* ===== Timeline (education + experience) ===== */
.timeline{border-left:1px solid var(--line); margin-left:6px; padding-left:28px;}
.t-item{position:relative; padding-bottom:34px; transition: transform 0.3s ease;}
.t-item:last-child{padding-bottom:0;}
.t-item::before{
content:""; position:absolute; left:-34px; top:4px; width:11px; height:11px; border-radius:50%;
background:var(--bg); border:2px solid var(--accent);
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.t-item:hover::before {
transform: scale(1.4);
background: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
.t-item:hover {
transform: translateX(4px);
}
.t-item .t-date{font-family:var(--mono); font-size:12px; color:var(--accent); margin-bottom:6px;}
.t-item h3{font-size:17px; margin:0 0 4px;}
.t-item .t-org{font-size:13.5px; color:var(--muted); margin-bottom:8px;}
.t-item ul{margin:0; padding-left:18px; color:#cdd6e2; font-size:14px;}
.t-item ul li{margin-bottom:4px; transition: color 0.2s ease;}
.t-item ul li:hover { color: var(--text); }

/* ===== Awards ===== */
.award-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){ .award-grid{grid-template-columns:1fr;} }
.award-card{
border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--bg-raised);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.award-card:hover {
transform: translateY(-4px);
border-color: var(--line-strong);
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.award-top{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.award-icon{
width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--accent); flex-shrink:0;
transition: transform 0.3s ease, background 0.3s ease;
}
.award-card:hover .award-icon {
transform: rotate(10deg) scale(1.1);
background: var(--accent-dim);
border-color: var(--accent);
}
.award-pos{font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line); padding:4px 9px; border-radius:20px;}
.award-card h3{font-size:16px; margin:0 0 4px;}
.award-card .org{font-size:13px; color:var(--muted); margin-bottom:10px;}
.award-card p{font-size:13.5px; color:#c7d0dc; margin:0;}

/* ===== Quick info strip ===== */
.quick-strip{
display:flex; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-raised);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.quick-strip:hover {
border-color: var(--line-strong);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.quick-strip .qi{
flex:1; padding:16px 20px; border-right:1px solid var(--line);
transition: background 0.25s ease, transform 0.25s ease;
}
.quick-strip .qi:hover {
background: rgba(255,255,255,0.025);
}
.quick-strip .qi:last-child{border-right:none;}
.quick-strip .qi span{display:block; font-size:11.5px; color:var(--muted); font-family:var(--mono); margin-bottom:4px;}
.quick-strip .qi b{font-size:14.5px; font-weight:600; transition: color 0.2s ease;}
.quick-strip .qi:hover b { color: var(--accent); }
@media (max-width:640px){ .quick-strip{flex-direction:column;} .quick-strip .qi{border-right:none; border-bottom:1px solid var(--line);} .quick-strip .qi:last-child{border-bottom:none;} }

/* ===== Contact / footer ===== */
.contact-box{
border:1px solid var(--line); border-radius:16px; padding:48px; background:var(--bg-raised);
display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.contact-box:hover {
border-color: var(--line-strong);
box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 25px rgba(242,182,50,0.06);
transform: translateY(-2px);
}
.contact-box h2{font-size:32px; margin:0; letter-spacing:-0.5px; max-width:480px;}
footer{padding:50px 0 40px; border-top:1px solid var(--line); margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px;}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr; gap:26px;} }
.footer-grid h4{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:0.4px; margin:0 0 14px;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid ul li{margin-bottom:9px;}
.footer-grid ul a{
text-decoration:none; color:#cdd6e2; font-size:14px;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-block;
}
.footer-grid ul a:hover{
color:var(--accent);
transform: translateX(3px);
}
.footer-logo{font-family:var(--mono); font-weight:600; font-size:16px; margin-bottom:10px;}
.footer-logo span{color:var(--accent);}
.footer-desc{color:var(--muted); font-size:14px; max-width:280px; margin-bottom:16px;}
.footer-social{display:flex; gap:8px;}
.footer-bottom{
display:flex; justify-content:space-between; align-items:center; margin-top:44px; padding-top:22px;
border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); flex-wrap:wrap; gap:10px;
}
.footer-bottom a{text-decoration:none; color:var(--muted); transition: color 0.2s ease;}
.footer-bottom a:hover{color:var(--accent);}
.logo,
.footer-logo {
text-decoration: none;
color: inherit;
}
/* Accessibility Focus Styles */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 4px;