/* Base Styles */
:root { /* Core tokens */
  --color-primary:#0070f3; --color-primary-alt:#0059be;
  --color-bg:#f7f8fa; --color-bg-alt:#ffffff; --color-bg-soft:#fafbfc;
  --color-text:#1a202c; --color-text-light:#5a6474; --color-border:#e3e8ef; --color-accent:#0070f3;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.03);
  --shadow-md:0 6px 18px -6px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --gradient-hero: linear-gradient(140deg,#ffffff,#eef5ff 55%,#e2efff);
  --transition:.28s cubic-bezier(.4,0,.2,1);
  --focus-ring:0 0 0 3px rgba(0,112,243,.35);
  font-size:16px;
  color-scheme: light;
}

.dark { /* Dark tokens */
  --color-bg:#1b222c; --color-bg-alt:#232d3a; --color-bg-soft:#1f2732;
  --color-text:#f5f7fa; --color-text-light:#bac4d2; --color-border:#303d4d;
  --gradient-hero: linear-gradient(145deg,#1b222c,#203041 60%,#253a4d);
  --shadow-md:0 6px 24px -8px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif; background:var(--color-bg); color:var(--color-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55; }

.no-js .fade-in { opacity: 1; transform: none; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1,h2,h3 { line-height:1.15; font-weight:600; margin:0 0 .65em; letter-spacing:-.02em; }
h1 { font-size:clamp(2.3rem,4.9vw,3.3rem); font-weight:700; }
h2 { font-size:clamp(1.7rem,3.1vw,2.25rem); }
h3 { font-size:1.05rem; letter-spacing:.5px; }

p { line-height: 1.6; margin: 0 0 1em; }
ul { padding-left: 1.2rem; }

/* Layout */
.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.section { padding: 5rem 0 4rem; position: relative; }
.section.alt { background: var(--color-bg-alt); }
.section:nth-of-type(even).alt { background: var(--color-bg); }
.section h2 { position: relative; }
.section h2::after { content: ""; position: absolute; left: 0; bottom: -0.4rem; width: 3rem; height: 3px; background: var(--color-primary); border-radius: 2px; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--color-border); transition:background var(--transition),border-color var(--transition); }
.dark .site-header { background:rgba(27,34,44,0.85); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 64px; }
.logo { font-weight: 700; font-size: 1.15rem; letter-spacing: .5px; display: flex; align-items: center; }
.logo span { color: var(--color-primary); }

/* Nav */
.nav-list { list-style: none; display: flex; gap: 1.5rem; padding: 0; margin: 0; }
.nav-list a { font-weight: 500; position: relative; padding: .25rem 0; }
.nav-list a::after { content:""; position: absolute; left:0; bottom:0; height:2px; width:0; background: var(--color-primary); transition: width var(--transition); }
.nav-list a:focus::after, .nav-list a:hover::after, .nav-list a.active::after { width:100%; }
.nav-toggle { display:none; background:none; border:1px solid var(--color-border); padding:.5rem .75rem; border-radius: var(--radius-sm); cursor:pointer; font-size:1rem; }
.nav-toggle:hover, .nav-toggle:focus { background: var(--color-bg-alt); }

/* Theme toggle */
.theme-toggle { background:var(--color-bg-alt); border:1px solid var(--color-border); padding:.55rem .7rem; border-radius:var(--radius-pill); cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; line-height:1; transition:background var(--transition),border-color var(--transition),color var(--transition); box-shadow:var(--shadow-sm); }
.theme-toggle:hover, .theme-toggle:focus { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; }
.theme-toggle .icon-moon { display: none; }
.dark .theme-toggle .icon-sun { display: none; }
.dark .theme-toggle .icon-moon { display: block; }

/* Hero */
.hero { padding-top:7rem; background:var(--gradient-hero); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 25%,rgba(0,112,243,.10),transparent 60%); pointer-events:none; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 3rem; align-items: center; }
.hero-text .subtitle { font-weight: 600; font-size: 1.1rem; color: var(--color-primary); margin-top: .25rem; }
.hero-text .intro { max-width: 560px; font-size: 1.05rem; }
.hero-photo-wrapper { display:flex; justify-content:center; }
.hero-photo { width:300px; height:300px; border-radius:50%; background:linear-gradient(135deg,var(--color-primary),#5aa9ff); padding:4px; box-shadow:0 2px 6px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04); animation:float 11s ease-in-out infinite; }
.hero-photo img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }
.scroll-indicator { text-align:center; margin-top:3rem; font-size:.85rem; letter-spacing:2px; opacity:.6; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.6;} 50% { opacity:1;} }

/* Cards and grids */
.content-card, .project-card, .edu-item, .contact-card, .timeline-item { background:var(--color-bg-alt); border:1px solid var(--color-border); padding:1.45rem 1.45rem 1.35rem; border-radius:var(--radius-lg); position:relative; display:flex; flex-direction:column; gap:.6rem; transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.dark .content-card, .dark .project-card, .dark .edu-item, .dark .contact-card, .dark .timeline-item { background:var(--color-bg-alt); }
.content-card:hover, .project-card:hover, .edu-item:hover, .contact-card:hover, .timeline-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(0,112,243,.35); }

.skills-grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); margin-top:2rem; }
.skill-cat { background: var(--color-bg-alt); border:1px solid var(--color-border); padding:1rem 1rem .85rem; border-radius: var(--radius-md); transition: background var(--transition), border-color var(--transition); }
.skill-cat:hover { border-color: var(--color-primary); }
.dark .skill-cat { background:#242e3d; }

.projects-grid { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin-top:2rem; }
.project-card .tech { font-size:.75rem; letter-spacing:1px; text-transform:uppercase; color: var(--color-text-light); margin-top:-.2rem; }

.timeline { display:flex; flex-direction:column; gap:1.5rem; position:relative; }
.timeline::before { content:""; position:absolute; left:12px; top:0; width:2px; height:100%; background: linear-gradient(var(--color-primary),transparent); }
.timeline-item { padding-left:2.5rem; }
.timeline-item::before { content:""; position:absolute; left:5px; top:1.3rem; width:16px; height:16px; border:3px solid var(--color-primary); background: var(--color-bg); border-radius:50%; }
.timeline-item .time-range { font-size:.75rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color: var(--color-primary); }
.timeline-item h3 { margin:.25rem 0 .25rem; }
.timeline-item ul { margin:0; padding-left:1rem; font-size:.9rem; display:grid; gap:.35rem; }

.edu-list { display:grid; gap:1.5rem; margin-top:1.5rem; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.contact-cards { display:grid; gap:1.25rem; margin:1.5rem 0 2.5rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.contact-form { max-width:640px; display:grid; gap:1rem; }
.form-row { display:flex; flex-direction:column; gap:.4rem; }
input, textarea { font:inherit; padding:.7rem .85rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg-alt); color:var(--color-text); transition:border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.contact-form textarea { resize: none; }
.dark input, .dark textarea { background:#242e3d; }
input:focus, textarea:focus { outline:none; border-color:var(--color-primary); box-shadow:var(--focus-ring); }

.more-projects { margin-top:2.5rem; font-size:.95rem; }

/* Buttons */
.btn { --btn-bg:var(--color-primary); --btn-color:#fff; display:inline-block; font-weight:600; padding:.78rem 1.15rem; border-radius:var(--radius-pill); border:1px solid var(--color-primary); background:var(--btn-bg); color:var(--btn-color); letter-spacing:.3px; transition:background var(--transition),color var(--transition),border-color var(--transition),transform .18s ease; box-shadow:var(--shadow-sm); }
.btn:hover, .btn:focus { background:var(--color-primary-alt); text-decoration:none; }
.btn.outline { background:transparent; color:var(--color-primary); }
.btn.outline:hover, .btn.outline:focus { background:var(--color-primary); color:#fff; }
.btn:active { transform:translateY(1px); }

/* Footer */
.site-footer { background: var(--color-bg-alt); padding:2.5rem 0 2rem; border-top:1px solid var(--color-border); margin-top:2rem; }
.dark .site-footer { background:#242e3d; }
.footer-grid { display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:center; justify-content:space-between; }
.social-links { list-style:none; display:flex; gap:.85rem; padding:0; margin:0; }
.social-links a { width:40px; height:40px; display:grid; place-items:center; background: var(--color-bg); border:1px solid var(--color-border); border-radius: 50%; font-size:1rem; transition: background var(--transition), transform var(--transition), border-color var(--transition); }
.social-links a:hover { background: var(--color-primary); color:#fff; transform: translateY(-3px); border-color: var(--color-primary); text-decoration:none; }

/* Utility */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:1rem; top:1rem; width:auto; height:auto; padding:.75rem 1rem; background:#000; color:#fff; z-index:1000; }
.contact-inline { list-style:none; padding:0; margin:1.25rem 0 0; display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.95rem; }
.contact-inline a { text-decoration:none; }
.contact-inline a:hover .tooltip { opacity:1; transform:translateY(-6px); }
.tooltip { background: var(--color-text); color:#fff; padding:.2rem .5rem; font-size:.65rem; border-radius: var(--radius-sm); position:relative; top:-2px; margin-left:.35rem; opacity:0; transform:translateY(-2px); transition: var(--transition); }

/* Animations */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; will-change:transform,opacity; }
.fade-in.visible { opacity:1; transform:none; }

/* Email copy feedback */
.copy-success { animation: flash 1.8s ease; }
@keyframes flash { 0% { background: var(--color-primary); color:#fff; } 100% { background: var(--color-bg-alt); color: inherit; } }

/* Media Queries */
@media (max-width: 880px) {
  .nav-toggle { display:block; }
  .nav-list { position:absolute; right:1rem; top:64px; flex-direction:column; background: var(--color-bg-alt); border:1px solid var(--color-border); padding:1rem 1.25rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 190px; opacity:0; visibility:hidden; transform: translateY(-6px); transition: var(--transition); }
  .dark .nav-list { background:#242e3d; }
  .nav-list.open { opacity:1; visibility:visible; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .fade-in { opacity:1 !important; transform:none !important; }
}

/* Privacy placeholder */
.privacy { padding:4rem 0; }

/* Noscript */
.noscript { background:#fffae6; color:#333; padding:1rem; text-align:center; font-size:.85rem; }