:root{
  --bg: #05060f;
  --panel: #10122098;
  --panel-solid: #12142a;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --text: #f1f2f9;
  --muted: #a3a8c2;
  --muted-dim: #6b7090;
  --indigo: #7c8cf8;
  --purple: #a855f7;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --orange: #fbbf24;
  --gradient: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
  --gradient-text: linear-gradient(90deg, #38bdf8 0%, #a855f7 100%);
  --ring-gradient: conic-gradient(from 200deg, #ec4899, #6366f1, #22d3ee, #ec4899);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 900px 600px at 75% 15%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 90%, rgba(56,189,248,.08), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4,h5{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.muted{color:var(--muted);font-size:14.5px;}

/* HEADER */
header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4vw;
  background:rgba(5,6,15,.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.logo{
  font-family:'Sacramento',cursive;
  font-size:34px;
  font-weight:400;
  color:#fff;
  line-height:1;
}
.logo span{color:var(--pink);}
nav ul{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:var(--text);}
nav a{position:relative;padding-bottom:6px;transition:color .2s;}
nav a:hover, nav a.active{color:var(--indigo);}
nav a.active::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--indigo);border-radius:2px;
}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;}
.header-cv{padding:11px 20px;font-size:13px;}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:10px;font-weight:600;font-size:14px;
  cursor:pointer;border:none;transition:.25s;white-space:nowrap;
}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 10px 26px -10px rgba(139,92,246,.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(139,92,246,.65);}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border-strong);}
.btn-outline:hover{border-color:var(--purple);color:var(--purple);}

/* HERO */
.hero{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;
  padding:80px 6vw 90px;
  max-width:1400px;margin:0 auto;
}
.hello{color:var(--purple);font-weight:600;font-size:18px;margin-bottom:8px;}
.name{font-size:clamp(36px,4.8vw,58px);font-weight:800;line-height:1.12;margin-bottom:16px;color:#fff;}
.gradient-text{
  background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.role{color:#fff;font-weight:700;font-size:clamp(19px,2vw,23px);margin-bottom:18px;}
.desc{color:var(--muted);font-size:15px;max-width:460px;margin-bottom:34px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:30px;}
.socials{display:flex;gap:14px;}
.socials a{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);
  transition:all .2s;
}
.socials a:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-3px);}

.hero-photo{position:relative;width:100%;max-width:420px;aspect-ratio:1/1.05;margin:0 auto;}
.ring{
  position:absolute;inset:0;border-radius:50%;
  background:var(--ring-gradient);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter:drop-shadow(0 0 45px rgba(168,85,247,.4));
  animation:spin 16s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-photo img{
  position:absolute;inset:6%;width:88%;height:88%;border-radius:50%;
  object-fit:cover;object-position:top center;z-index:2;
}
.float-chip{
  position:absolute;width:60px;height:60px;border-radius:16px;
  background:var(--panel-solid);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:var(--cyan);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  z-index:3;animation:float 5s ease-in-out infinite;
}
.float-chip i{font-size:26px;}
.chip-1{top:10%;left:-4%;animation-delay:0s;}
.chip-2{top:12%;right:-6%;animation-delay:1.4s;}
.chip-3{bottom:14%;right:-4%;animation-delay:2.8s;}
.js-chip{color:var(--orange);font-size:17px;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* RESPONSIVE */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center;padding:60px 6vw 70px;}
  .hero-text .desc{margin-left:auto;margin-right:auto;}
  .hero-actions,.socials{justify-content:center;}
  .hero-photo{order:-1;max-width:300px;margin-bottom:30px;}
}
@media(max-width:760px){
  header nav{
    position:fixed;top:66px;left:0;right:0;background:var(--panel-solid);
    flex-direction:column;padding:18px 6vw;border-bottom:1px solid var(--border);
    transform:translateY(-140%);transition:.3s;display:flex;
  }
  header nav.open{transform:translateY(0);}
  nav ul{flex-direction:column;gap:16px;}
  .nav-toggle{display:block;}
  .header-cv{display:none;}
}
/* ABOUT + SKILLS */
.about-skills-wrap{padding:0 6vw 90px;max-width:1400px;margin:0 auto;}
.about-skills-card{
  display:grid;grid-template-columns:1fr 1.15fr;gap:50px;
  background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;
  padding:44px 46px;
}
.card-title{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:18px;color:#fff;
}
.ico-plain{color:var(--indigo);font-size:18px;}
.about-col p{margin-bottom:18px; font-size: 20px;}
.read-more{color:var(--purple);font-weight:600;font-size:14px;}
.read-more:hover{text-decoration:underline;}

.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.skill-badge{
  background:var(--bg);border:1px solid var(--border);border-radius:14px;
  padding:20px 10px;text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);
  transition:.2s;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.skill-badge i{font-size:30px;}
.skill-badge:hover{border-color:var(--purple);color:var(--text);transform:translateY(-4px);}

/* responsive */
@media(max-width:980px){
  .about-skills-card{grid-template-columns:1fr;padding:34px 28px;gap:34px;}
}
@media(max-width:560px){
  .skill-grid{grid-template-columns:repeat(2,1fr);}
}

/* EDUCATION */
.section-title{margin-bottom:20px;font-size:20px;}

.edu-card{ position:relative; overflow:hidden; }
.edu-bg-icon{
  position:absolute;
  bottom:-0px;
  right:-10px;
  font-size:220px;
  line-height:1;
  color:var(--purple);
  opacity:0.06;
  pointer-events:none;
  transform:rotate(-8deg);
}
.edu-wrap{padding:0 6vw 90px;max-width:1400px;margin:0 auto;}
.edu-card{
  position:relative;
  background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;
  padding:40px 46px;display:flex;gap:26px;
}
.edu-badge-date{
  position:absolute;top:28px;right:36px;
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.35);color:var(--purple);
  padding:8px 16px;border-radius:30px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.edu-top{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.edu-icon-circle{
  width:50px;height:50px;border-radius:50%;border:2px solid var(--purple);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 0 18px rgba(168,85,247,.5);flex-shrink:0;
}
.edu-line{width:2px;flex:1;background:linear-gradient(var(--purple), transparent);margin-top:6px;}
.edu-content{padding-top:4px;max-width:820px;}
.edu-content h3{font-size:24px;font-weight:800;color:#fff;margin-bottom:10px;max-width:640px;}
.edu-degree{display:flex;align-items:center;gap:8px;color:var(--purple);font-weight:700;font-size:15px;margin-bottom:16px;}
.edu-degree .dot{width:8px;height:8px;border-radius:50%;background:var(--purple);}
.edu-desc{margin-bottom:26px;max-width:680px;}
.edu-meta-row{display:flex;align-items:center;gap:26px;}
.edu-meta-item{display:flex;align-items:center;gap:12px;}
.edu-meta-icon{
  width:38px;height:38px;border-radius:50%;background:rgba(168,85,247,.15);color:var(--purple);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.meta-label{display:block;color:var(--muted-dim);font-size:12.5px;margin-bottom:2px;}
.edu-meta-item strong{font-size:14.5px;font-weight:700;color:#fff;}
.edu-meta-divider{width:1px;height:34px;background:var(--border);}

@media(max-width:760px){
  .edu-card{flex-direction:column;padding:30px 24px;}
  .edu-badge-date{position:static;align-self:flex-start;margin-bottom:16px;}
  .edu-top{flex-direction:row;}
  .edu-line{display:none;}
  .edu-meta-row{flex-wrap:wrap;gap:16px;}
}

/* PROJECTS */
.projects-wrap{padding:0 6vw 90px;max-width:1400px;margin:0 auto;}
.projects-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.projects-head .section-title{margin-bottom:0;}
.view-all{color:var(--indigo);font-size:14px;font-weight:600;}
.view-all:hover{text-decoration:underline;}

.projects-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.project-card{
  background:var(--panel-solid);border:1px solid var(--border);border-radius:18px;
  padding:24px 22px 26px;transition:.25s;
}
.project-card:hover{transform:translateY(-5px);border-color:var(--border-strong);}
.project-card h4{font-size:17px;font-weight:700;margin:6px 0 8px;color:#fff;}
.project-card p{margin-bottom:12px;}
.view-link{color:var(--purple);font-size:13.5px;font-weight:600;}
.view-link:hover{text-decoration:underline;}

/* device mockup - monitor only, enlarged */
.device-mock{margin-bottom:18px;display:flex;justify-content:center;}
.monitor{
  width:100%;height:190px;background:var(--bg);border:6px solid #1a1e33;border-radius:10px;
  overflow:hidden;position:relative;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
.monitor::after{
  content:'';position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  width:80px;height:14px;background:#1a1e33;border-radius:0 0 6px 6px;
}
.monitor img{width:100%;height:100%;object-fit:cover;object-position:top center;}

@media(max-width:1100px){
  .projects-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .projects-grid{grid-template-columns:1fr;}
  .projects-head{flex-direction:column;align-items:flex-start;gap:10px;}
}


/* CERTIFICATIONS */
.certs-wrap{padding:0 6vw 90px;max-width:1400px;margin:0 auto;}
.xsmall{font-size:12.5px;}

.certs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.cert-card{
  background:var(--panel-solid);border:1px solid var(--border);border-radius:16px;
  padding:30px 22px;text-align:center;transition:.25s;
}
.cert-card:hover{transform:translateY(-5px);border-color:var(--border-strong);}
.cert-badge-outer{
  width:74px;height:74px;border-radius:50%;margin:0 auto 18px;padding:5px;
  display:flex;align-items:center;justify-content:center;
}
.cert-badge-inner{
  width:100%;height:100%;border-radius:50%;background:var(--panel-solid);
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.cert-badge-inner i{font-size:26px;}
.cert-orange{background:repeating-conic-gradient(var(--orange) 0 10deg, transparent 10deg 20deg);}
.cert-yellow{background:repeating-conic-gradient(#facc15 0 10deg, transparent 10deg 20deg);}
.cert-purple{background:repeating-conic-gradient(var(--purple) 0 10deg, transparent 10deg 20deg);}
.cert-card h5{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.35;}
.cert-card p{line-height:1.55;min-height:70px;}
.cert-year{display:block;margin-top:12px;color:var(--muted-dim);font-size:12px;font-weight:600;}

@media(max-width:900px){
  .certs-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .certs-grid{grid-template-columns:1fr;}
}


/* MY SERVICES */
.services-wrap{padding:0 6vw 90px;max-width:1400px;margin:0 auto;}

.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.service-card{
  display:flex;align-items:flex-start;gap:18px;
  border-radius:16px;padding:26px 22px;
  background:var(--panel-solid);border:1px solid var(--border);
  transition:.25s;
}
.service-card:hover{transform:translateY(-5px);}
.service-card h4{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3;}
.service-card p{margin-bottom:14px;font-size:13.5px;}
.learn-more{font-size:13px;font-weight:600;}
.learn-more:hover{text-decoration:underline;}

.serv-icon{
  width:46px;height:46px;flex-shrink:0;
}
.serv-icon svg{width:100%;height:100%;}
.serv-icon-text{
  font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;
}

/* Blue theme */
.serv-blue-theme{border-color:rgba(56,189,248,.3);}
.serv-blue-theme .serv-icon{color:var(--cyan);filter:drop-shadow(0 0 10px rgba(56,189,248,.6));}
.serv-blue-theme .learn-more{color:var(--cyan);}

/* Purple theme */
.serv-purple-theme{border-color:rgba(168,85,247,.3);}
.serv-purple-theme .serv-icon{color:var(--purple);filter:drop-shadow(0 0 10px rgba(168,85,247,.6));}
.serv-purple-theme .learn-more{color:var(--purple);}

/* Pink theme */
.serv-pink-theme{border-color:rgba(236,72,153,.35);}
.serv-pink-theme .serv-icon{color:var(--pink);filter:drop-shadow(0 0 10px rgba(236,72,153,.6));}
.serv-pink-theme .learn-more{color:var(--pink);}

@media(max-width:900px){
  .services-grid{grid-template-columns:1fr;}
}

/* GET IN TOUCH v2 */
.contact-wrap{padding:0 6vw 90px;max-width:1400px;margin:0 auto;}
.contact-card-v2{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;
  background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;
  padding:46px 46px;
}
.contact-left h3{font-size:24px;font-weight:800;color:#fff;margin-bottom:16px;line-height:1.3;}
.contact-left p{margin-bottom:36px;}
.contact-line{margin-bottom:18px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:12px;}
.contact-line a{color:var(--muted);word-break:break-all;transition:.2s;}
.contact-line a:hover{color:var(--purple);}
.c-ico{color:var(--purple);font-size:16px;flex-shrink:0;}

.contact-right{display:flex;flex-direction:column;gap:16px;}
.form-row{display:flex;gap:16px;}
.form-row input, .full-input, .contact-right textarea{
  flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:15px 16px;color:var(--text);font-family:inherit;font-size:14px;width:100%;
}
.contact-right textarea{min-height:130px;resize:vertical;}
.contact-right input::placeholder,.contact-right textarea::placeholder{color:var(--muted-dim);}
.contact-right input:focus,.contact-right textarea:focus{outline:none;border-color:var(--purple);}
.full-btn{width:100%;padding:16px;font-size:14.5px;}

@media(max-width:900px){
  .contact-card-v2{grid-template-columns:1fr;padding:34px 26px;gap:34px;}
}
@media(max-width:560px){
  .form-row{flex-direction:column;}
}

/* FOOTER */
footer{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding:26px 4vw;border-top:1px solid var(--border);
  max-width:1400px;margin:0 auto;
}
.footer-copy{color:var(--muted-dim);font-size:12.5px;white-space:nowrap;}
.footer-socials{display:flex;gap:16px;}
.footer-socials a{
  color:var(--muted);font-size:18px;transition:.2s;
}
.footer-socials a:hover{color:var(--indigo);}
.to-top{
  width:40px;height:40px;border-radius:50%;background:transparent;
  border:1.5px solid var(--purple);color:var(--purple);
  font-size:16px;font-weight:700;cursor:pointer;transition:.25s;
  box-shadow:0 0 16px rgba(168,85,247,.35);
}
.to-top:hover{background:var(--gradient);color:#fff;border-color:transparent;}

@media(max-width:900px){
  footer{flex-direction:column;text-align:center;}
}