:root{
  --bg:#0b0d0f;
  --panel:#0f1216;
  --panel-2:#0d1014;
  --text:#dde5ea;
  --muted:#a0afb8;
  --primary:#51acaa;
  --glow: 0 0 50px rgba(81,172,170,.35), 0 0 140px rgba(81,172,170,.18);
  --radius:20px;
  --shadow: 0 12px 60px rgba(0,0,0,.55);

  /* Animation tuning (super smooth) */
  --dur: .9s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --hover-ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  font-family:'Sora',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background: var(--bg);
  line-height:1.65;
  background-image:
    radial-gradient(60rem 30rem at 120% -10%, rgba(81,172,170,.18), transparent 60%),
    radial-gradient(50rem 25rem at -20% -10%, rgba(81,172,170,.12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cg fill='none' stroke='%2320282f' stroke-width='1'%3E%3Cpath d='M0 100 Q200 60 400 100 T800 100 T1200 100'/%3E%3Cpath d='M0 200 Q240 160 480 200 T960 200 T1200 200'/%3E%3Cpath d='M0 300 Q220 260 440 300 T880 300 T1200 300'/%3E%3Cpath d='M0 400 Q260 360 520 400 T1040 400 T1200 400'/%3E%3Cpath d='M0 500 Q240 460 480 500 T960 500 T1200 500'/%3E%3Cpath d='M0 600 Q220 560 440 600 T880 600 T1200 600'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
  background-size: cover, cover, cover;
  overflow-x:hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background: #0a0c0e}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #1b2429, #152024);
  border:3px solid #0a0c0e; border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{background:#1f2d30}

/* Navbar */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; margin:12px;
  background: rgba(13,16,20,.6); backdrop-filter: blur(10px);
  border:1px solid #121820; border-radius:var(--radius);
  box-shadow: var(--shadow);
  transition: transform .6s var(--ease), background .6s var(--ease);
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text)}
.logo{
  display:inline-grid; place-items:center; width:36px; height:36px;
  background: radial-gradient(circle at 30% 30%, rgba(81,172,170,.6), transparent 60%);
  border:1px solid #1a242a; border-radius:10px; font-weight:700;
  transition: transform .5s var(--hover-ease);
  will-change: transform;
}
.brand:hover .logo{transform: rotate(8deg) scale(1.05)}
.brand-text{font-weight:700; letter-spacing:.5px}
.brand-text span{color:var(--primary)}

.links{display:flex; gap:1rem; align-items:center}
.links a{color:var(--muted); text-decoration:none; padding:.6rem .9rem; border-radius:12px; transition:color .35s var(--ease), background .35s var(--ease)}
.links a:hover{color:var(--text); background:#10161c}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; border-radius:12px; text-decoration:none; cursor:pointer; border:1px solid #192129; transition:transform .45s var(--hover-ease), box-shadow .45s var(--hover-ease), background .45s var(--hover-ease); font-weight:600; will-change: transform}
.btn--primary{background:linear-gradient(180deg, #2b3a3f, #162025); color:var(--text); box-shadow:var(--glow)}
.btn--primary:hover{transform:translateY(-2px) scale(1.02)}
.btn--ghost{background:#0f151b; color:var(--text)}
.btn--ghost:hover{background:#121a20}

.hamburger{display:none; background:transparent; border:0; width:44px; height:44px; border-radius:10px}
.hamburger span{display:block;width:22px;height:2px;background:#9eb2bd;margin:5px auto;border-radius:4px;transition:.3s}

/* Sections */
.section{padding:8rem 2rem}
.section-title{font-size:clamp(1.4rem, 1.2rem + 1.2vw, 2rem); margin:0 0 2rem 0; letter-spacing:.6px}

/* Hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.headline{font-size:clamp(2.2rem, 2rem + 3vw, 4.6rem); line-height:1.06; margin:.4rem 0 1rem}
.accent{color:var(--primary)}
.subhead{color:var(--muted)}
.hero-ctas{display:flex; gap:.8rem; margin:1.4rem 0 1rem}
.badge{display:inline-flex; align-items:center; gap:.5rem; background:#0e151a; padding:.4rem .7rem; border-radius:999px; border:1px solid #172028; color:#9db0b9}
.meta-pills{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.pill{display:inline-flex; align-items:center; padding:.45rem .7rem; border-radius:999px; border:1px solid #1d2730; background:#0d1318; color:#c1d0d9; font-size:.9rem; transition:transform .35s var(--hover-ease)}
.pill:hover{transform:translateY(-2px)}
.hero-visual{position:relative}
.hero-bg-glow{position:absolute; inset:auto; top:10%; right:-15%; width:40vw; height:40vw; background:radial-gradient(closest-side, rgba(81,172,170,.3), transparent 60%); filter:blur(40px); pointer-events:none; transition:transform .8s var(--ease)}

/* Terminal */
.terminal{overflow:hidden; border-radius:16px; background:#0c0f13; border:1px solid #19202a; transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.card{padding:1rem; background:var(--panel); border:1px solid #121a21; border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.card--glow{box-shadow: var(--glow)}
.card:hover{transform:translateY(-3px)}
.term-top{display:flex; align-items:center; gap:.5rem; border-bottom:1px solid #141a21; padding:.6rem .75rem; background:#0d1216}
.dot{width:10px; height:10px; border-radius:50%}
.dot.red{background:#ec6a5f}.dot.yellow{background:#f4bf4f}.dot.green{background:#61c554}
.term-title{margin-left:auto; color:#8da1aa; font-family:'JetBrains Mono',monospace; font-size:.85rem}
.code{margin:0; padding:1rem; font-family:'JetBrains Mono',monospace; color:#dfeaf0}
pre{margin:0; overflow:auto; max-height:460px}

/* Features/Strengths */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.features-grid .card h3{margin:.2rem 0 0.3rem}
.features-grid .card p{color:var(--muted)}

/* Projects */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.project-media{height:180px; border-radius:14px; background: linear-gradient(145deg,#0e1419,#0a0e12); border:1px solid #151d24; margin-bottom:.8rem; overflow:hidden}
.project-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .9s var(--ease); will-change: transform}
.project:hover .project-media img{transform:scale(1.06)}
.project .pill{font-size:.8rem}

/* About */
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.about-media{position:relative; height:360px; overflow:hidden}
.orb{position:absolute; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(81,172,170,.9), rgba(81,172,170,.15) 60%, transparent 70%);
  filter:blur(10px); top:10%; left:10%; animation:float 8s ease-in-out infinite;
}
.orb.small{width:160px; height:160px; top:auto; bottom:10%; right:12%; left:auto; animation-duration:10s}
.mesh{position:absolute; inset:0; background:conic-gradient(from 90deg at 50% 50%, rgba(81,172,170,.08), transparent); mix-blend-mode:screen}

/* Contact */
.form .field{display:flex; flex-direction:column; gap:.4rem}
.form input,.form textarea{
  background:#0a0e12; border:1px solid #162029; border-radius:12px; padding:0.9rem 1rem; color:var(--text);
  outline:none; transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease)
}
.form input:focus,.form textarea:focus{border-color:#23343a; box-shadow:0 0 0 3px rgba(81,172,170,.15); transform:translateY(-1px)}

/* Footer */
.footer{padding:3rem 2rem; border-top:1px solid #10161c; background:#0a0d10}
.footer-inner{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem; align-items:start}
.footer a{color:#b4c2ca; text-decoration:none; transition:color .3s var(--ease)}
.footer a:hover{color:#e8f1f6}
.footer .pill{border-color:#1e2a32; background:#0b1115}

/* Reveal Animations (ultra smooth) */
.reveal{opacity:0; transform:translateY(14px) scale(.98); filter:saturate(.9); will-change: transform, opacity}
.reveal.in-view{opacity:1; transform:translateY(0) scale(1); filter:saturate(1)}
.anim-fade{transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.anim-slide{transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.anim-scale{transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.reveal{transition-delay: var(--delay, 0s)}

/* Scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--primary), #1a837f);
  z-index:1000; box-shadow: 0 0 10px rgba(81,172,170,.6); transition: width .15s linear
}

/* Media queries */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; gap:2rem}
  .about-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr; gap:1rem}
  .projects-grid{grid-template-columns:1fr; gap:1rem}
  .links{display:none}
  .hamburger{display:block}
  .footer-inner{grid-template-columns:1fr}
  .nav{margin:8px}
}

/* Keyframes */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}