/* === Design Tokens === */
:root {
  --bg: #0f1115;
  --bg-alt: #161a21;
  --bg-soft: #1f2530;
  --bg-glow: radial-gradient(circle at 30% 30%, #233042, #0f1115 60%);
  --text: #e6ebf3;
  --text-dim: #9aa4b4;
  --brand: #6366f1;
  --brand-accent: #8b5cf6;
  --brand-radial: radial-gradient(circle at 30% 30%, #6366f1, #8b5cf6 60%);
  --danger: #ef4444;
  --warn: #f59e0b;
  --success: #10b981;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 4px -2px rgba(0,0,0,.4),0 4px 8px -2px rgba(0,0,0,.25);
  --shadow: 0 4px 12px -2px rgba(0,0,0,.5),0 12px 24px -4px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 32px -4px rgba(0,0,0,.55),0 24px 48px -8px rgba(0,0,0,.45);
  --gradient: linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);
  --font-stack: 'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --ease: cubic-bezier(.65,.05,.36,1);
}

.light-theme {
  --bg: #f5f7fb;
  --bg-alt: #ffffff;
  --bg-soft: #eef2f9;
  --text: #1d2430;
  --text-dim: #5a6575;
  --bg-glow: radial-gradient(circle at 30% 30%, #ffffff, #eef2f9 60%);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.05),0 4px 8px -2px rgba(0,0,0,.07);
  --shadow: 0 4px 14px -2px rgba(0,0,0,.08),0 12px 28px -8px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 40px -8px rgba(0,0,0,.15),0 24px 56px -10px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; font-family: var(--font-stack); background: var(--bg-glow); color: var(--text);
  -webkit-font-smoothing: antialiased; line-height: 1.6; font-size: 16px;
}
body::before {
  content: ""; position: fixed; inset:0; background:
    radial-gradient(circle at 80% 20%,rgba(99,102,241,.15),transparent 60%),
    radial-gradient(circle at 10% 80%,rgba(236,72,153,.12),transparent 60%);
  pointer-events:none; z-index:-1; filter: blur(30px) saturate(1.2);
}

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

/* Layout */
.container { width: min(1200px, 92%); margin-inline:auto; }
.container.narrow { width: min(900px, 92%); }

.section { padding: clamp(3rem, 6vw, 6rem) 0; position:relative; }
.section.alt { background: linear-gradient(145deg,var(--bg-alt),var(--bg-soft)); }
.section-title { font-size: clamp(1.9rem, 4vw, 3rem); margin:0 0 1.25rem; letter-spacing:-.5px; }
.section-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }

/* Header */
.site-header { position:sticky; top:0; backdrop-filter: blur(14px); background:rgba(15,17,21,.7); border-bottom:1px solid rgba(255,255,255,.06); z-index:50; }
.light-theme .site-header { background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.08); }
.nav-wrapper { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; }
.logo { font-weight:800; font-size:1.35rem; letter-spacing:-1px; display:flex; align-items:center; gap:.25rem; }
.logo .accent { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo.small { font-size:1.05rem; }

.main-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
.main-nav a { text-decoration:none; color:var(--text-dim); font-weight:500; position:relative; padding:.35rem .2rem; }
.main-nav a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gradient); transition: width .35s var(--ease); border-radius:2px; }
.main-nav a:hover,.main-nav a:focus { color:var(--text); }
.main-nav a:hover::after,.main-nav a:focus::after { width:100%; }

.nav-toggle { display:none; background:none; border:1px solid rgba(255,255,255,.15); padding:.5rem .75rem; border-radius: var(--radius-sm); color:var(--text); font-size:1rem; }
.light-theme .nav-toggle { border-color: rgba(0,0,0,.15); }

.actions { display:flex; align-items:center; gap:.75rem; }
.theme-toggle { background:linear-gradient(145deg,var(--bg-soft),var(--bg-alt)); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding:.55rem .65rem; cursor:pointer; color:var(--text); font-size:1rem; box-shadow: var(--shadow-sm); }
.light-theme .theme-toggle { border-color: rgba(0,0,0,.08); }
.theme-toggle:hover { transform:translateY(-2px); }

/* Hero */
.hero { min-height: clamp(600px, 92vh, 900px); display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(2rem, 4vw, 4rem); align-items:center; }
.hero-copy h1 { font-size:clamp(2.2rem,5.2vw,4.5rem); line-height:1.05; margin:0 0 1rem; font-weight:800; }
.gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size: clamp(1.05rem,1.6vw,1.35rem); color:var(--text-dim); max-width: 60ch; }
.hero-ctas { display:flex; gap:1rem; margin:1.75rem 0 1.25rem; flex-wrap:wrap; }
.social-list { list-style:none; display:flex; gap:.85rem; padding:0; margin:1rem 0 0; }
.social-list a { display:grid; place-items:center; width:42px; height:42px; background:linear-gradient(145deg,var(--bg-soft),var(--bg-alt)); border:1px solid rgba(255,255,255,.08); border-radius:50%; font-size:1.25rem; text-decoration:none; color:var(--text); box-shadow: var(--shadow-sm); }
.social-list a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.hero-art { position:relative; display:flex; justify-content:center; }
.card.profile { background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); padding:1.75rem 1.5rem 1.9rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); backdrop-filter: blur(20px) saturate(1.4); width: min(380px, 100%); position:relative; overflow:hidden; }
.light-theme .card.profile { background: linear-gradient(165deg, rgba(255,255,255,.85), rgba(255,255,255,.6)); border-color: rgba(0,0,0,.08); }
.card.profile::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 15%,rgba(99,102,241,.35),transparent 60%); opacity:.85; pointer-events:none; }
.avatar { width:110px; height:110px; border-radius:50%; overflow:hidden; margin-bottom:.75rem; position:relative; box-shadow:0 0 0 4px rgba(255,255,255,.08),0 6px 18px -4px rgba(0,0,0,.5); }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.card.profile h2 { margin:.25rem 0 .35rem; font-size:1.35rem; letter-spacing:-.5px; }
.card.profile p { margin:0 0 1rem; color:var(--text-dim); font-size:.95rem; }
.tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.tags span { background:rgba(99,102,241,.16); color:#c7ccff; padding:.4rem .65rem; font-size:.7rem; font-weight:600; border-radius:999px; letter-spacing:.5px; text-transform:uppercase; }
.light-theme .tags span { background:rgba(99,102,241,.1); color:#4f46e5; }

.scroll-indicator { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); animation: floatY 3.5s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,-10px);} }

/* Buttons */
.btn { --btn-bg: var(--brand); --btn-color:#fff; --btn-border: transparent; --btn-pad:.85rem 1.25rem; --btn-fsize:.95rem; font-family:inherit; font-weight:600; letter-spacing:.4px; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius: var(--radius-sm); text-decoration:none; cursor:pointer; background:var(--btn-bg); color:var(--btn-color); border:1px solid var(--btn-border); padding:var(--btn-pad); font-size:var(--btn-fsize); transition:.4s var(--ease); position:relative; overflow:hidden; }
.btn svg { flex-shrink: 0; }
.btn.primary { background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899); background-size:200% 100%; }
.btn.primary:hover { background-position:100% 0; box-shadow: 0 4px 14px -2px rgba(99,102,241,.5),0 8px 32px -4px rgba(139,92,246,.4); transform:translateY(-3px); }
.btn.outline { --btn-bg: transparent; --btn-color: var(--text); --btn-border: rgba(255,255,255,.2); }
.light-theme .btn.outline { --btn-border: rgba(0,0,0,.2); }
.btn.outline:hover { background:rgba(255,255,255,.06); transform:translateY(-2px); }
.btn.ghost { --btn-bg: rgba(255,255,255,.08); --btn-color: var(--text); }
.btn.ghost:hover { background:rgba(255,255,255,.15); transform:translateY(-2px); }
.btn.large { --btn-pad:1rem 1.75rem; --btn-fsize:1.05rem; }
.btn.small { --btn-pad:.55rem .9rem; --btn-fsize:.8rem; }

/* Filters */
.filters { display:flex; flex-wrap:wrap; gap:.75rem; }
.filter-btn { background:var(--bg-soft); color:var(--text-dim); border:1px solid rgba(255,255,255,.08); padding:.55rem .9rem; border-radius: var(--radius-sm); font-size:.75rem; letter-spacing:.5px; font-weight:600; text-transform:uppercase; cursor:pointer; transition:.3s var(--ease); }
.light-theme .filter-btn { border-color: rgba(0,0,0,.08); }
.filter-btn:hover { color:var(--text); }
.filter-btn.active { background:var(--brand-radial); color:#fff; box-shadow: var(--shadow-sm); }

/* Skills Grid */
.skills-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap:1rem; }
.skill-card { padding:1rem .85rem 1.05rem; background: linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.5rem; backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); animation: fadeIn .6s var(--ease); }
.light-theme .skill-card { background: linear-gradient(155deg,rgba(255,255,255,.9),rgba(255,255,255,.6)); border-color: rgba(0,0,0,.08); }
.skill-card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%,rgba(99,102,241,.3),transparent 60%); opacity:0; transition:.5s var(--ease); }
.skill-card:hover::before { opacity:1; }
.skill-card h3 { margin:0; font-size:.9rem; letter-spacing:.5px; font-weight:700; text-transform:uppercase; }
.skill-card span { font-size:.7rem; font-weight:500; color:var(--text-dim); letter-spacing:.5px; }
.skill-card .icon { font-size:1.55rem; }

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

/* Timeline */
.timeline { position:relative; margin:2rem 0 0; }
.timeline::before { content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background:linear-gradient(var(--brand),transparent); }
.tl-item { position:relative; padding-left:55px; margin-bottom:2.25rem; opacity:0; transform:translateX(-30px); transition:.8s var(--ease); }
.tl-item.visible { opacity:1; transform:none; }
.tl-point { position:absolute; left:6px; top:.3rem; width:16px; height:16px; background:var(--brand); border-radius:50%; box-shadow:0 0 0 4px rgba(99,102,241,.25),0 0 0 8px rgba(99,102,241,.08); }
.tl-content h3 { margin:0 0 .35rem; font-size:1.15rem; letter-spacing:.2px; }
.tl-content p { margin:0 0 .75rem; color:var(--text-dim); }
.bullets { margin:0; padding-left:1.1rem; display:grid; gap:.3rem; }
.bullets li { line-height:1.35; }

/* Solutions Section */
.solutions-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.solution-card { background: linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding:2rem 1.75rem; position:relative; overflow:hidden; backdrop-filter: blur(18px); box-shadow: var(--shadow-sm); opacity:0; transform:translateY(25px); transition:.75s var(--ease); }
.light-theme .solution-card { background: linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6)); border-color: rgba(0,0,0,.08); }
.solution-card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 70% 20%,rgba(99,102,241,.3),transparent 65%); opacity:0; transition:.5s var(--ease); }
.solution-card:hover::before { opacity:1; }
.solution-card:hover { transform:translateY(-6px); box-shadow: var(--shadow); }
.solution-card.visible { opacity:1; transform:none; }
.solution-icon { width:70px; height:70px; border-radius: var(--radius); background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.15)); display:grid; place-items:center; margin-bottom:1.25rem; color:var(--brand); }
.solution-card h3 { margin:0 0 .75rem; font-size:1.25rem; letter-spacing:.2px; }
.solution-card > p { margin:0 0 1.25rem; color:var(--text-dim); line-height:1.6; }
.solution-benefits { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.solution-benefits li { color:var(--text-dim); font-size:.9rem; padding-left:0; display:flex; align-items:center; gap:.5rem; }
.solution-benefits li::before { content:""; display:inline-block; width:4px; height:4px; background:var(--success); border-radius:50%; }

/* Portfolio Section */
.portfolio-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); }
.portfolio-card { background: linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09); border-radius: var(--radius-lg); overflow:hidden; position:relative; backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); opacity:0; transform:translateY(30px); transition:.8s var(--ease); }
.light-theme .portfolio-card { background: linear-gradient(155deg,rgba(255,255,255,.9),rgba(255,255,255,.65)); border-color: rgba(0,0,0,.08); }
.portfolio-card:hover { transform:translateY(-8px); box-shadow: var(--shadow-lg); }
.portfolio-card.visible { opacity:1; transform:none; }
.portfolio-preview { height:200px; background: linear-gradient(135deg,#1a1f2e,#252b3d); display:grid; place-items:center; position:relative; overflow:hidden; }
.light-theme .portfolio-preview { background: linear-gradient(135deg,#e8ecf4,#f5f7fb); }
.portfolio-preview::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 60% 40%,rgba(99,102,241,.25),transparent 70%); }
.dashboard-mockup { width:85%; height:75%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:8px; overflow:hidden; position:relative; }
.light-theme .dashboard-mockup { background:rgba(255,255,255,.9); border-color:rgba(0,0,0,.1); }
.mockup-header { height:24px; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:6px; padding:0 10px; }
.mockup-header span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); }
.mockup-content { padding:12px; display:flex; flex-direction:column; gap:8px; height:calc(100% - 24px); }
.chart-bar { height:100%; background: linear-gradient(90deg,rgba(99,102,241,.3),rgba(139,92,246,.2)); border-radius:4px; animation: growBar 2s ease infinite; }
.chart-bar:nth-child(2) { animation-delay:.3s; opacity:.8; }
.chart-bar:nth-child(3) { animation-delay:.6s; opacity:.6; }
.chart-pie { width:80px; height:80px; border-radius:50%; background: conic-gradient(rgba(99,102,241,.4) 0% 35%, rgba(139,92,246,.3) 35% 70%, rgba(236,72,153,.2) 70% 100%); }
.chart-line { flex:1; background: linear-gradient(to top,rgba(99,102,241,.1),transparent), repeating-linear-gradient(90deg,rgba(99,102,241,.3) 0px,rgba(99,102,241,.3) 2px,transparent 2px,transparent 20px); border-radius:4px; }
.chart-grid { height:100%; display:grid; grid-template-columns: repeat(3,1fr); gap:6px; }
.chart-grid::before,.chart-grid::after { content:""; background:rgba(99,102,241,.25); border-radius:3px; }
@keyframes growBar { 0%,100%{ transform:scaleY(.7);} 50%{ transform:scaleY(1);} }
.portfolio-info { padding:1.5rem 1.5rem 1.75rem; }
.portfolio-info h3 { margin:0 0 .65rem; font-size:1.15rem; letter-spacing:.2px; }
.portfolio-info p { margin:0 0 1rem; color:var(--text-dim); font-size:.9rem; line-height:1.5; }
.tech-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.tech-tags span { background:rgba(99,102,241,.15); color:#c4c8ff; padding:.3rem .65rem; font-size:.7rem; font-weight:600; border-radius:999px; letter-spacing:.5px; }
.light-theme .tech-tags span { background:rgba(99,102,241,.12); color:#4f46e5; }

/* Cards - AI */
.cards { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.card.glass { background: linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding:1.5rem 1.35rem 1.6rem; position:relative; overflow:hidden; backdrop-filter: blur(18px); box-shadow: var(--shadow-sm); opacity:0; transform:translateY(25px); transition:.75s var(--ease); }
.light-theme .card.glass { background: linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.55)); border-color: rgba(0,0,0,.08); }
.card.glass::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 75% 20%,rgba(99,102,241,.35),transparent 65%); opacity:0; transition:.5s var(--ease); }
.card.glass:hover::before { opacity:1; }
.card.glass h3 { margin:.15rem 0 .5rem; letter-spacing:.3px; font-size:1.05rem; }
.card.glass p { margin:0 0 .85rem; color:var(--text-dim); font-size:.9rem; }
.card.glass .badge { display:inline-block; background:rgba(99,102,241,.25); color:#d6d8ff; padding:.35rem .7rem; font-size:.6rem; font-weight:600; letter-spacing:.5px; border-radius:999px; text-transform:uppercase; }
.light-theme .card.glass .badge { background:rgba(99,102,241,.15); color:#4338ca; }
.card.glass.visible { opacity:1; transform:none; }

/* CTA Contact */
.section.cta { background: linear-gradient(120deg,#1f2530,#14181f 60%,#1f2530); text-align:center; }
.light-theme .section.cta { background: linear-gradient(120deg,#ffffff,#eef2f9 60%,#ffffff); }
.section.cta h2 { max-width:18ch; margin-inline:auto; }
.contact-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:2rem; }

/* Footer */
.site-footer { background: #0c0f12; padding:3rem 0 2.4rem; margin-top:2rem; border-top:1px solid rgba(255,255,255,.08); }
.light-theme .site-footer { background:#ffffff; border-color: rgba(0,0,0,.08); }
.footer-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
.foot-links { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot-links a { text-decoration:none; color:var(--text-dim); font-size:.85rem; }
.foot-links a:hover { color:var(--text); }
.social-foot { display:flex; gap:.75rem; align-items:flex-start; }
.social-foot a { width:44px; height:44px; display:grid; place-items:center; background:linear-gradient(145deg,var(--bg-soft),var(--bg-alt)); border:1px solid rgba(255,255,255,.08); border-radius:50%; text-decoration:none; font-size:1.2rem; color:var(--text); }
.social-foot a:hover { transform:translateY(-4px); box-shadow: var(--shadow); }
.foot-note { font-size:.75rem; color:var(--text-dim); }

/* Back to top */
.back-to-top { position:fixed; right:1.25rem; bottom:1.25rem; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background: linear-gradient(145deg,var(--bg-soft),var(--bg-alt)); color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:1.1rem; opacity:0; pointer-events:none; transition:.4s var(--ease); box-shadow: var(--shadow-sm); }
.light-theme .back-to-top { border-color: rgba(0,0,0,.15); }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform:translateY(-4px); box-shadow: var(--shadow); }

/* Responsive Nav */
@media (max-width: 880px) {
  .main-nav ul { position:fixed; top:60px; right:1rem; background: linear-gradient(155deg,rgba(20,24,31,.95),rgba(20,24,31,.8)); padding:1rem 1.15rem; border:1px solid rgba(255,255,255,.08); flex-direction:column; align-items:flex-start; gap:.5rem; border-radius: var(--radius); min-width:200px; box-shadow: var(--shadow); transform-origin: top right; transform:scale(.8) translateY(-20px); opacity:0; pointer-events:none; backdrop-filter: blur(18px); }
  .light-theme .main-nav ul { background: linear-gradient(155deg,rgba(255,255,255,.95),rgba(255,255,255,.75)); border-color: rgba(0,0,0,.08); }
  .main-nav ul.open { opacity:1; pointer-events:auto; transform:scale(1) translateY(0); }
  .nav-toggle { display:inline-block; }
}

/* Animations on scroll */
[data-animate] { opacity:0; transform:translateY(30px); transition: .9s var(--ease); }
[data-animate].visible { opacity:1; transform:none; }

/* Utilities */
.hidden { display:none !important; }
.text-center { text-align:center; }

/* Scrollbar styling */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background: #0b0d11; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--brand),var(--brand-accent)); border-radius:50px; }
.light-theme ::-webkit-scrollbar-track { background:#e5e9f1; }
.light-theme ::-webkit-scrollbar-thumb { background: linear-gradient(#6366f1,#8b5cf6); }

/* Focus */
:focus-visible { outline:2px dashed var(--brand); outline-offset:3px; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * { animation:none!important; transition:none!important; }
}