@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --aqua:#7fffd4;
  --azure:#00bfff;
  --black:#050608;
  --panel:#0b1114;
  --line:rgba(127,255,212,.18);
  --text:#f4fffc;
  --muted:#a9bbb7;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 80% 10%,rgba(0,191,255,.13),transparent 28rem),
    radial-gradient(circle at 10% 35%,rgba(127,255,212,.08),transparent 25rem),
    var(--black);
  color:var(--text); min-height:100vh; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.navbar{
  height:74px;display:flex;align-items:center;justify-content:space-between;
  padding:0 6%;border-bottom:1px solid var(--line);
  background:rgba(5,6,8,.78);backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:20;
}
.logo{font-size:18px;font-weight:800;letter-spacing:-.6px}
.logo span{color:var(--aqua);margin-left:5px}
nav{display:flex;align-items:center;gap:28px;color:#c5d4d1;font-size:14px}
nav a{transition:.2s}
nav a:hover{color:var(--aqua)}
.nav-contact{padding:10px 15px;border:1px solid var(--aqua);border-radius:10px;color:var(--aqua)}
.menu{display:none;background:none;border:0;color:var(--aqua);font-size:25px}
.hero{
  min-height:calc(100vh - 74px);display:grid;grid-template-columns:1.1fr .9fr;
  align-items:center;gap:40px;padding:80px 9%;
}
.eyebrow{font-size:11px;letter-spacing:3px;color:var(--aqua);font-weight:700;margin-bottom:16px}
h1{font-size:clamp(46px,7vw,86px);line-height:.98;letter-spacing:-4px}
h1 span,h2 span{color:var(--aqua)}
.hero-text,.section-head>p:last-child,.page-title>p:last-child,.cta>p:not(.eyebrow),.profile-strip p{
  color:var(--muted);line-height:1.8;max-width:600px;margin-top:22px
}
.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border-radius:11px;font-weight:700;font-size:14px;transition:.25s}
.primary{background:var(--aqua);color:#00120d;box-shadow:0 0 30px rgba(127,255,212,.15)}
.primary:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(127,255,212,.3)}
.ghost{border:1px solid var(--line);background:#091014}
.ghost:hover{border-color:var(--aqua);color:var(--aqua)}
.hero-card{height:410px;display:grid;place-items:center;position:relative}
.orb{
  width:280px;height:280px;border-radius:50%;
  background:linear-gradient(135deg,var(--aqua),var(--azure));
  filter:blur(1px);opacity:.85;box-shadow:0 0 100px rgba(0,191,255,.2);
  animation:float 5s ease-in-out infinite;
}
.code-card{
  position:absolute;width:min(350px,90%);padding:28px;border:1px solid rgba(255,255,255,.18);
  border-radius:20px;background:rgba(5,8,10,.82);backdrop-filter:blur(18px);
  box-shadow:0 30px 80px #000; transform:rotate(-3deg)
}
.code-card span{font-size:45px;color:var(--aqua);font-weight:800}
.code-card p{font-size:24px;font-weight:800;margin-top:18px}
.code-card small{color:var(--muted);display:block;margin-top:8px}
@keyframes float{50%{transform:translateY(-15px) scale(1.03)}}
.section{padding:110px 9%;border-top:1px solid var(--line)}
.section-head h2{font-size:52px;letter-spacing:-2px}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:45px}
.skill,.service-card{
  background:linear-gradient(145deg,rgba(127,255,212,.055),rgba(0,191,255,.025));
  border:1px solid var(--line);border-radius:17px;padding:25px;
  transition:.25s;
}
.skill:hover,.service-card:hover{transform:translateY(-5px);border-color:rgba(127,255,212,.5)}
.skill b{display:block;font-size:22px;color:var(--aqua)}
.skill span{display:block;color:var(--muted);font-size:13px;margin-top:8px}
.cta{margin:0 9% 100px;padding:70px;border:1px solid var(--line);border-radius:25px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(127,255,212,.09),transparent 50%),#090d0f}
.cta>p{margin-left:auto;margin-right:auto}
.cta h2{font-size:clamp(30px,5vw,55px);letter-spacing:-2px}
.cta .btn{margin-top:28px}
footer{border-top:1px solid var(--line);padding:25px 6%;display:flex;justify-content:space-between;color:#748682;font-size:12px}
.about-page{padding:80px 9% 100px}
.page-title{max-width:800px;margin-bottom:60px}
.page-title h1{font-size:clamp(45px,7vw,76px)}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.service-card{min-height:250px}
.service-icon{width:50px;height:50px;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center;color:var(--aqua);font-weight:800;margin-bottom:24px}
.service-card h2{font-size:25px}
.service-card p{color:var(--muted);line-height:1.7;margin:12px 0 22px;max-width:550px}
.service-card a{color:var(--aqua);font-weight:700;font-size:13px}
.profile-strip{margin-top:70px;border:1px solid var(--line);padding:38px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:#090d0f}
.profile-strip h2{font-size:38px;letter-spacing:-1.5px}
@media(max-width:760px){
  .navbar{padding:0 5%}
  nav{display:none;position:absolute;top:74px;left:0;right:0;padding:18px 5%;background:#070a0c;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
  nav.open{display:flex}
  .menu{display:block}
  .hero{grid-template-columns:1fr;padding:65px 7%;text-align:left}
  .hero-card{height:300px}
  .orb{width:210px;height:210px}
  .section,.about-page{padding-left:7%;padding-right:7%}
  .skills-grid,.services{grid-template-columns:1fr}
  .cta{margin-left:7%;margin-right:7%;padding:45px 25px}
  footer{padding:22px 7%;flex-direction:column;gap:8px}
  .profile-strip{flex-direction:column;align-items:flex-start}
  h1{letter-spacing:-2.5px}
}