:root{--bg:#0b1220;--bg-soft:#0f172a;--fg:#e6edf3;--muted:#94a3b8;--primary:#0ea5e9;--primary-600:#0284c7;--card:#111827;--ring:rgba(14,165,233,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--fg);background:linear-gradient(180deg,#0b1220 0%,#0a1426 50%,#0b1220 100%)}
img{max-width:100%;display:block}
a{color:var(--fg);text-decoration:none}
.container{max-width:1100px;margin:auto;padding:0 20px}
.section{padding:96px 0;position:relative}
@media (pointer: fine){ body.cursor-enabled{ cursor: none } }

.site-header{position:sticky;top:0;z-index:40;background:rgba(11,18,32,.6);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(148,163,184,.15);overflow:hidden}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:.5px}
.nav-links{display:flex;gap:20px}
.nav-links a{color:var(--muted)}
.nav-links a.active,.nav-links a:hover{color:#fff}
.theme-toggle,.nav-toggle{background:transparent;color:#fff;border:1px solid rgba(148,163,184,.3);padding:8px 10px;border-radius:10px}
.nav-toggle{display:none}

.hero{min-height:calc(100vh - 64px);display:grid;place-items:center;overflow:hidden;position:relative}
.hero-bg{position:absolute;inset:0;z-index:-1; background:
  radial-gradient(1200px 600px at 50% 0%, #0b1220 0%, #0a1224 55%, #070f1e 100%);
}
/* Corner neon glow (bottom-left primary, top-right ambient) */
.hero-bg::before{
  content:""; position:absolute; left:-20%; bottom:-30%; width:80%; height:80%;
  background: radial-gradient(closest-side, rgba(37,99,235,.9), rgba(37,99,235,.45) 35%, rgba(15,23,42,0) 70%);
  filter: blur(28px); opacity:.8;
  transform: translate(calc(var(--px,0) * -.2%), calc(var(--py,0) * .2%));
  animation: cornerPulse 6s ease-in-out infinite;
}
.hero-bg::after{
  content:""; position:absolute; right:-25%; top:-35%; width:70%; height:70%;
  background: radial-gradient(closest-side, rgba(30,58,138,.5), rgba(30,58,138,.25) 40%, rgba(15,23,42,0) 75%);
  filter: blur(26px); opacity:.5;
  transform: translate(calc(var(--px,0) * .1%), calc(var(--py,0) * -.1%));
}
@keyframes cornerPulse{ 0%,100%{ opacity:.7 } 50%{ opacity:.95 } }
.hero::before{
  content:""; position:absolute; left:0; bottom:0; width:62%; height:62%; pointer-events:none; z-index:-1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='rgba(59,130,246,0.3)' stroke-width='2'><polyline points='30,20 10,40 30,60'/><polyline points='110,20 130,40 110,60'/><rect x='60' y='80' width='20' height='20' rx='3'/><circle cx='30' cy='100' r='4'/><circle cx='110' cy='100' r='4'/></g></svg>");
  background-size: 140px 140px; background-repeat: repeat; opacity:.18; mix-blend-mode:screen; filter:blur(.2px);
}
.hero-inner{text-align:center}
.code-float{position:absolute;white-space:pre; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; line-height:1.4; color:#cbd5e1; opacity:.75; padding:8px 10px; border-radius:10px; border:1px solid rgba(148,163,184,.25); background:rgba(2,6,23,.45); backdrop-filter: blur(6px); box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 18px rgba(59,130,246,.25); animation: codeDrift var(--dur,10s) linear infinite;}
@keyframes codeDrift{ 0%{ transform: translateY(0) translateX(0); opacity:.1 } 50%{ opacity:.9 } 100%{ transform: translateY(-140px) translateX(40px); opacity:0 } }

/* Decorative snowman (responsive, centered track) */
.snowman-track{ position:fixed; bottom:6px; left:50%; transform:translateX(-50%); width:78px; height:104px; pointer-events:none; z-index:6; animation: snowSlide 16s ease-in-out infinite alternate }
@keyframes snowSlide{ from{ transform: translateX(-50%) } to{ transform: translateX(calc(-50% + 28vw)) } }
.snowman{ position:absolute; inset:0; filter: drop-shadow(0 0 14px rgba(59,130,246,.35)); animation: bob 4s ease-in-out infinite }
@keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
@media (max-width: 640px){
  .snowman-track{ width:56px; height:75px; animation-duration:12s }
  .snowman{ transform-origin: bottom center }
}
.badge{display:inline-block;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac;padding:6px 10px;border-radius:999px;font-size:12px;margin-bottom:16px}
.title{font-size:64px;line-height:1.02;margin:0 0 12px;font-weight:800;letter-spacing:-.02em}
.subtitle{color:var(--muted);font-size:20px;margin:2px auto 22px;max-width:780px}
.cta{display:flex;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 18px;border-radius:14px;border:1px solid rgba(148,163,184,.25);font-weight:600;transition:transform .18s ease, box-shadow .22s ease, background-color .18s ease, border-color .18s ease}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-600));border-color:transparent;color:#fff;box-shadow:0 12px 28px rgba(14,165,233,.25)}
.btn.primary:hover{transform:translateY(-1.5px);box-shadow:0 18px 40px rgba(14,165,233,.32)}
.btn.outline{background:transparent;border-color:rgba(148,163,184,.35);color:#e5e7eb}
.btn.outline:hover{border-color:rgba(59,130,246,.6);background:linear-gradient(180deg,rgba(59,130,246,.08),rgba(59,130,246,.04))}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:#e5e7eb;transform:translateY(-1px)}
.btn.small{height:38px;padding:0 14px;border-radius:12px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.btn.cardbtn{background:linear-gradient(135deg,#9333ea,#2563eb);color:#fff;border-color:transparent;position:relative}
.btn.cardbtn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(147,51,234,.35);filter:blur(6px);opacity:.6}
.btn.cardbtn:hover{transform:translateY(-1.5px);box-shadow:0 16px 36px rgba(37,99,235,.35)}

.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.18);border-radius:16px;overflow:hidden}
.card .card-body{padding:16px}
.profile{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:16px}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid rgba(148,163,184,.3)}
.info .name{font-weight:700}
.info .role{color:var(--muted);margin-bottom:8px}
.highlights{margin:12px 0 0;padding:0 0 0 18px;color:var(--muted)}

/* Business Card Modal */
.card-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.card-modal[aria-hidden="false"]{display:flex}
.card-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.75);backdrop-filter:blur(6px)}
.card-dialog{position:relative;width:min(92vw,820px);padding:18px}
.card-close{position:absolute;right:18px;top:12px;height:36px;width:36px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(148,163,184,.25);color:#e5e7eb}
.flip-wrap{position:relative;margin-top:18px;display:grid;justify-content:center}
.flip-card{width:min(88vw,720px);height:auto;aspect-ratio:16/9;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.flip-card .face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;overflow:hidden}
.flip-card .face img{width:100%;height:100%;object-fit:cover;display:block}
.flip-card .back{transform:rotateY(180deg)}
.flip-card.flipped{transform:rotateY(180deg)}
.flip-hint{margin-top:10px;color:var(--muted);text-align:center;font-size:12px}

.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.skill{padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.2);text-align:center;display:flex;align-items:center;gap:10px;justify-content:center}
.skill .ico{display:inline-flex;filter:drop-shadow(0 0 10px rgba(59,130,246,.45))}
.skill:hover{border-color:rgba(59,130,246,.45);box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(-2px);transition:all .22s ease}

.projects .section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section h2{font-size:32px;letter-spacing:-.01em}
.section h2{position:relative;display:inline-block;padding-bottom:8px}
.section h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#a78bfa)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(148,163,184,.25);background:transparent;color:var(--muted)}
.chip.active,.chip:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.project img{width:100%;height:168px;object-fit:cover;background:rgba(148,163,184,.1)}
.project .links{display:flex;gap:12px;margin-top:8px}

.contact .form{max-width:760px}
.contact .card{padding:18px}
.contact .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact .fields .full{grid-column:1/-1}
.contact{position:relative}
.contact::before{content:"";position:absolute;left:-15%;bottom:-20%;width:70%;height:70%;background:radial-gradient(closest-side, rgba(37,99,235,.55), rgba(37,99,235,.25) 40%, transparent 70%);filter:blur(24px);opacity:.5;z-index:-1}
.field input,.field textarea{transition:border-color .2s ease, box-shadow .2s ease}
.field input:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(59,130,246,.35)}
.field{display:grid;gap:6px;margin-bottom:12px}
.field.with-ico{grid-template-columns:20px 1fr;align-items:center}
.field.with-ico label{grid-column:1/-1}
.field.with-ico .ico{color:#60a5fa;filter:drop-shadow(0 0 12px rgba(59,130,246,.45))}
.field.with-ico input,.field.with-ico textarea{grid-column:2}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.02);border:1px solid rgba(148,163,184,.2);border-radius:12px;color:#fff;padding:12px}
.field input:focus,.field textarea:focus{outline:2px solid var(--ring);border-color:transparent}
.hp{position:absolute;left:-10000px;opacity:0}
.form-status{margin-left:12px;color:var(--muted)}

.site-footer{padding:32px 0;border-top:1px solid rgba(148,163,184,.15);background:rgba(7,12,22,.85);backdrop-filter:blur(10px);position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,rgba(37,99,235,0),rgba(37,99,235,.9),rgba(37,99,235,0));filter:blur(.6px);box-shadow:0 0 16px rgba(59,130,246,.45)}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px;align-items:start}
.footer-brand{font-weight:700}
.footer-links,.footer-contact{display:grid;gap:8px}
.footer-contact a,.footer-links a{color:var(--muted)}
.footer-contact a:hover,.footer-links a:hover{color:#fff}
.footer-links{display:flex;gap:12px;color:var(--muted)}
.footer-links a:hover{color:#fff}

.socials{display:flex;gap:14px;justify-content:center;margin-top:14px;color:var(--muted)}

/* Left Social Dock */
.social-dock{ position:fixed; left:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:45 }
.dock-btn{ width:42px; height:42px; display:grid; place-items:center; color:#cbd5e1; border:1px solid rgba(148,163,184,.25); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); box-shadow:0 6px 18px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease }
.dock-btn:hover{ transform:translateX(3px) scale(1.05); color:#fff; border-color:rgba(255,255,255,.55) }
.dock-btn::after{ content: attr(aria-label); position:absolute; left:52px; white-space:nowrap; font-size:12px; color:#cbd5e1; background:rgba(2,6,23,.7); border:1px solid rgba(148,163,184,.25); padding:6px 8px; border-radius:8px; opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; box-shadow:0 8px 20px rgba(0,0,0,.35)}
.dock-btn:hover::after{ opacity:1; transform:translateY(0) }
.dock-btn.wa{ color:#25D366 }
.dock-btn.li{ color:#0A66C2 }
.dock-btn.ig{ color:#E1306C }
.dock-btn.gh{ color:#cbd5e1 }
.light .dock-btn{ background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.02)); color:#334155; border-color:rgba(15,23,42,.12) }
.light .dock-btn:hover{ color:#0f172a; border-color:rgba(15,23,42,.28) }

/* Particle trail for cursor */
.trail{ position:fixed; width:6px; height:6px; background:#3b82f6; border-radius:50%; pointer-events:none; z-index:9998; opacity:.9; box-shadow:0 0 10px rgba(59,130,246,.9); transition: transform .35s ease, opacity .35s ease, filter .35s ease; filter: blur(.4px) }

/* Dock entrance animation */
@keyframes dockIn{ from{ transform:translate(-12px,-50%); opacity:0 } to{ transform:translate(0,-50%); opacity:1 } }
.social-dock{ animation: dockIn .5s ease .2s both }

/* Floating sparks in hero */
.spark{ position:absolute; width:2px; height:2px; border-radius:50%; background: #60a5fa; box-shadow: 0 0 8px #60a5fa; opacity:.85; will-change: transform, opacity; animation: sparkFloat var(--dur,6s) linear infinite; }

/* Software section styling */
.software .muted{ color: var(--muted); margin-top: -6px; }
.tech-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px }
.pill{ display:inline-flex; align-items:center; height:30px; padding:0 10px; border-radius:999px; font-size:12px; color:#cbd5e1; border:1px solid rgba(148,163,184,.25); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)) }
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.svc{ padding:14px; border-radius:14px; border:1px solid rgba(148,163,184,.25); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease }
.svc:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.35); border-color: rgba(59,130,246,.45) }
.svc .ico{ color:#60a5fa; margin-bottom:6px; filter: drop-shadow(0 0 12px rgba(59,130,246,.45)) }
.svc:hover .ico{ color:#93c5fd }
.svc-title{ font-weight:600; margin-bottom:4px }
.svc-desc{ color:var(--muted) }
@media (max-width: 900px){ .services{ grid-template-columns:1fr } }
@keyframes sparkFloat{ 0%{ transform: translateY(0) translateX(0); opacity:.2 } 50%{ opacity:.9 } 100%{ transform: translateY(-120%) translateX(40%); opacity:0 } }

@media (max-width: 900px){
  .two-col{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 900px){ 
  .contact .fields{ grid-template-columns:1fr } 
}
@media (max-width: 640px){
  .nav-links{display:none;position:absolute;top:64px;right:16px;flex-direction:column;background:#0b1220;border:1px solid rgba(148,163,184,.2);padding:12px;border-radius:12px}
  .nav-links.open{display:flex}
  .nav-toggle{display:inline-flex}
  .title{font-size:40px}
  .grid{grid-template-columns:1fr}
}

/* Light Theme */
html.light{--bg:#f7fafc;--bg-soft:#ffffff;--fg:#0f172a;--muted:#4b5563;--primary:#0ea5e9;--primary-600:#0284c7;--card:#ffffff;--ring:rgba(14,165,233,.35)}
body.light{color:var(--fg);background:linear-gradient(180deg,#f7fafc 0%,#eef2f7 50%,#f7fafc 100%)}
.light .site-header{background:rgba(255,255,255,.75);border-bottom-color:rgba(15,23,42,.08)}
.light .nav-links a{color:#475569}
.light .nav-links a.active,.light .nav-links a:hover{color:#0f172a}
.light .card{border-color:rgba(15,23,42,.08);background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.01))}

/* Section background accents */
#software{position:relative}
#software::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 300px at 20% 100%, rgba(59,130,246,.12), transparent 60%), radial-gradient(900px 260px at 90% 0%, rgba(168,85,247,.1), transparent 60%);pointer-events:none;z-index:-1}
#about{position:relative}
#about::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 220px at 0% 20%, rgba(14,165,233,.12), transparent 60%);pointer-events:none;z-index:-1}
#skills{position:relative}
#skills::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 280px at 80% 80%, rgba(99,102,241,.1), transparent 60%);pointer-events:none;z-index:-1}
#projects{position:relative}
#projects::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 260px at 10% 50%, rgba(34,197,94,.08), transparent 60%);pointer-events:none;z-index:-1}
#contact{position:relative}
#contact::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 240px at 85% 100%, rgba(14,165,233,.12), transparent 60%);pointer-events:none;z-index:-1}

/* About emphasis */
.about .two-col>div:first-child{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.22);border-radius:16px;padding:16px}

/* Services, skills, projects accents */
.svc{position:relative}
.svc:hover{border-color:rgba(99,102,241,.5)}
.chip.active{background:linear-gradient(180deg,rgba(59,130,246,.18),rgba(59,130,246,.08));border-color:rgba(59,130,246,.6)}
.project:hover{border-color:rgba(59,130,246,.4)}
.contact .card{border:1px solid rgba(59,130,246,.25)}
.light .field input,.light .field textarea{background:rgba(0,0,0,.02);border-color:rgba(15,23,42,.12);color:#0f172a}

/* Neon accents */
.neon { position: relative; }
.neon::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:0 0 24px rgba(14,165,233,.35), inset 0 0 16px rgba(14,165,233,.15);}
.btn.primary{box-shadow:0 0 0 rgba(14,165,233,0);}
.btn.primary:hover{box-shadow:0 12px 36px rgba(14,165,233,.45), 0 0 24px rgba(14,165,233,.3) inset}
.chip.active{box-shadow:0 0 16px rgba(148,163,184,.25)}

/* Header aurora-style animated blobs (no cyan) */
.site-header::before{
  content:""; position:absolute; inset:-30% -10% 0 -10%; pointer-events:none;
  background:
    radial-gradient(120px 80px at 15% 60%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(160px 110px at 45% 40%, rgba(236,72,153,.16), transparent 62%),
    radial-gradient(140px 90px at 75% 70%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(200px 140px at 85% 10%, rgba(147,51,234,.12), transparent 65%);
  filter: blur(10px);
  animation: auroraShift 14s ease-in-out infinite alternate;
  opacity:.9; mix-blend-mode:screen;
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.85), rgba(29,78,216,0));
  filter: blur(.6px);
  box-shadow: 0 0 14px rgba(59,130,246,.45), 0 0 28px rgba(29,78,216,.25);
  pointer-events:none; animation: neonPulse 2.6s ease-in-out infinite;
}
@keyframes auroraShift{
  0%{ background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0% }
  50%{ background-position: 8% -4%, -6% 6%, 4% -6%, -4% 4% }
  100%{ background-position: -8% 6%, 6% -6%, -6% 6%, 6% -4% }
}
@keyframes neonPulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.85 } }

/* Hover motion */
.card:hover{transform:translateY(-3px); transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 16px 40px rgba(0,0,0,.25)}
.project img{transition:transform .35s ease}
.project:hover img{transform:scale(1.03)}
.btn{position:relative; overflow:hidden}
.btn::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform:translateX(-120%);}
.btn:hover::after{transition:transform .6s ease; transform:translateX(120%)}

/* Custom cursor */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; mix-blend-mode:screen }
.cursor-dot{ width:6px; height:6px; background:#0ea5e9; border-radius:50%; box-shadow:0 0 8px rgba(14,165,233,.9) }
.cursor-ring{ width:28px; height:28px; border:2px solid rgba(14,165,233,.7); border-radius:50%; filter:blur(.2px); transition:border-color .15s ease }
@media (pointer: coarse){ .cursor-dot,.cursor-ring{ display:none } }

/* Theme toggle visual */
#themeToggle{box-shadow:inset 0 -2px 0 rgba(255,255,255,.06)}
.light #themeToggle{color:#0f172a;border-color:rgba(15,23,42,.2)}