:root{
  --bg:#050c16;
  --bg2:#0b1626;
  --card:rgba(11,25,41,.68);
  --card2:rgba(255,255,255,.04);
  --border:rgba(135,206,250,.16);
  --text:#eef8ff;
  --muted:#9fb8cb;
  --sky:#8fd9ff;
  --cyan:#34d7ff;
  --blue:#4b8dff;
  --radius:24px;
  --shadow:0 18px 48px rgba(0,0,0,.28);
  --max:1240px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  scroll-behavior:smooth;
}

html,body{
  overflow-x:hidden;
}

body{
  font-family:"Inter",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 20%, rgba(52,215,255,.16), transparent 22%),
    radial-gradient(circle at 90% 15%, rgba(143,217,255,.14), transparent 20%),
    radial-gradient(circle at 75% 85%, rgba(75,141,255,.14), transparent 24%),
    linear-gradient(135deg, #040b14 0%, #07101d 45%, #081829 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(143,217,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,217,255,.025) 1px, transparent 1px);
  background-size:32px 32px;
}

#particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  display:block;
  width:100%;
}

.container{
  width:min(92%,var(--max));
  margin:0 auto;
  position:relative;
  z-index:1;
}

.section{
  padding:92px 0;
  position:relative;
}

.glass{
  background:var(--card);
  border:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.glass-soft{
  background:var(--card2);
  border:1px solid rgba(143,217,255,.1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:20px;
}

.glass:hover{
  border-color:rgba(143,217,255,.22);
}

.site-header{
  position:sticky;
  top:14px;
  z-index:50;
  padding-top:14px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:-.03em;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(143,217,255,.22), rgba(52,215,255,.22));
  color:#04111a;
  font-weight:900;
  box-shadow:0 0 36px rgba(52,215,255,.18);
}

.desktop-nav{
  display:flex;
  gap:24px;
}

.desktop-nav a{
  color:#d6ecfb;
  font-size:.95rem;
  transition:.25s;
}

.desktop-nav a:hover{
  color:var(--sky);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-btn{
  padding:11px 18px;
  border-radius:999px;
  font-weight:700;
  color:#031019;
  background:linear-gradient(135deg,var(--sky),var(--cyan));
  box-shadow:0 12px 30px rgba(52,215,255,.22);
}

.menu-btn{
  display:none;
  border:0;
  background:transparent;
  color:white;
  font-size:1.2rem;
  cursor:pointer;
}

.mobile-menu{
  display:none;
  position:fixed;
  left:16px;
  right:16px;
  top:88px;
  z-index:55;
  padding:18px;
}

.mobile-menu.show{
  display:grid;
  gap:12px;
}

.mobile-menu a{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(143,217,255,.09);
}

/* HERO */
.hero{
  padding:72px 0 56px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:34px;
  align-items:center;
}

.hero-left h1{
  font-size:clamp(2.8rem,6vw,5.8rem);
  line-height:1.02;
  letter-spacing:-.06em;
  margin:18px 0 18px;
}

.hero-left h1 span{
  background:linear-gradient(135deg,#f0fbff 0%, var(--sky) 45%, var(--cyan) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(143,217,255,.16);
  background:rgba(143,217,255,.07);
  color:var(--sky);
  font-size:.9rem;
  font-weight:600;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#59ff9b;
  box-shadow:0 0 14px #59ff9b;
}

.hero-text{
  max-width:760px;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.95;
  margin-bottom:26px;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:26px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  transition:.28s;
  border:1px solid transparent;
  cursor:pointer;
}

.btn-primary{
  color:#04111a;
  background:linear-gradient(135deg,var(--sky),var(--cyan));
  box-shadow:0 14px 34px rgba(52,215,255,.22);
}

.btn-secondary{
  background:rgba(255,255,255,.03);
  color:#eaf7ff;
  border-color:rgba(143,217,255,.18);
}

.btn:hover{
  transform:translateY(-3px);
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.metric{
  padding:18px;
}

.metric h3{
  color:var(--sky);
  font-size:1.08rem;
  margin-bottom:8px;
}

.metric p{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.65;
}

/* PROFILE */
.profile-card{
  padding:26px;
}

.profile-visual{
  position:relative;
  padding:12px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(143,217,255,.22), rgba(52,215,255,.08));
  margin-bottom:20px;
}

.profile-ring{
  position:absolute;
  inset:-1px;
  border-radius:28px;
  background:conic-gradient(from 180deg, rgba(143,217,255,.15), rgba(52,215,255,.03), rgba(75,141,255,.16), rgba(143,217,255,.15));
  filter:blur(10px);
}

.profile-photo{
  position:relative;
  z-index:1;
  height:500px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(143,217,255,.14);
  background:linear-gradient(180deg,#102239,#081423);
}

.has-photo{
  position:relative;
  overflow:hidden;
}

.real-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
}

.photo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(5,12,22,.18), rgba(5,12,22,.02));
  pointer-events:none;
}

.status-row{
  margin-bottom:16px;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(143,217,255,.16);
  background:rgba(143,217,255,.07);
  font-size:.9rem;
  font-weight:600;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#59ff9b;
  box-shadow:0 0 14px #59ff9b;
}

.contact-shortcuts{
  display:grid;
  gap:12px;
}

.contact-shortcuts a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(143,217,255,.09);
  transition:.26s;
}

.contact-shortcuts a:hover{
  transform:translateX(4px);
  border-color:rgba(143,217,255,.2);
}

.contact-shortcuts strong{
  display:block;
  margin-bottom:4px;
}

.contact-shortcuts span{
  color:var(--muted);
  font-size:.92rem;
}

/* HEADINGS */
.section-heading{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:28px;
}

.line{
  width:48px;
  height:2px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--sky),var(--cyan));
  box-shadow:0 0 34px rgba(52,215,255,.2);
}

.overline{
  color:var(--sky);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  font-weight:700;
  margin-bottom:8px;
}

.section-heading h2{
  font-size:clamp(1.9rem,2.5vw,2.9rem);
  line-height:1.15;
  letter-spacing:-.04em;
}

/* ABOUT */
.about-grid,
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

.about-card,
.contact-panel,
.skill-card{
  padding:28px;
}

.about-card p,
.timeline-body p,
.contact-panel p{
  color:var(--muted);
  line-height:1.9;
}

.about-card p + p{
  margin-top:16px;
}

.about-points{
  display:grid;
  gap:14px;
}

.point{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
}

.point i{
  color:var(--sky);
  margin-top:4px;
}

.point h3{
  margin-bottom:6px;
  font-size:1.02rem;
}

.point p{
  color:var(--muted);
  line-height:1.75;
  font-size:.95rem;
}

/* SKILLS */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.skill-card,
.project-card,
.timeline-item,
.education-item,
.certification-item,
.contact-panel{
  position:relative;
  transition:.3s;
}

.skill-card:hover,
.project-card:hover,
.timeline-item:hover,
.education-item:hover,
.certification-item:hover,
.contact-panel:hover{
  transform:translateY(-7px);
  border-color:rgba(143,217,255,.22);
}

.skill-card::before,
.project-card::before,
.timeline-item::before,
.education-item::before,
.certification-item::before,
.contact-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(143,217,255,.14), transparent 35%, transparent 70%, rgba(52,215,255,.12));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.75;
}

.skill-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  background:linear-gradient(135deg, rgba(143,217,255,.18), rgba(52,215,255,.1));
  color:var(--sky);
  font-size:1.28rem;
  box-shadow:0 0 34px rgba(52,215,255,.12);
}

.skill-card h3,
.project-content h3,
.timeline-body h3{
  font-size:1.08rem;
  margin-bottom:10px;
}

.skill-list{
  list-style:none;
  margin-top:10px;
  display:grid;
  gap:6px;
}

.skill-list li{
  position:relative;
  padding-left:14px;
  font-size:.95rem;
  color:#cfe9ff;
  line-height:1.65;
}

.skill-list li::before{
  content:"-";
  position:absolute;
  left:0;
  color:#35d4ff;
  font-weight:bold;
}

/* TIMELINE */
.timeline{
  display:grid;
  gap:22px;
  margin-top:30px;
}

.timeline-item{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:24px;
  padding:26px;
}

.timeline-date{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.date-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(143,217,255,.08);
  border:1px solid rgba(143,217,255,.16);
  color:var(--sky);
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
}

.experience-top{
  margin-bottom:14px;
}

.experience-top h3{
  font-size:1.2rem;
  margin-bottom:10px;
  line-height:1.3;
}

.job-type{
  color:var(--sky);
  font-size:.95rem;
  font-weight:600;
}

.experience-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.company,
.location{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(143,217,255,.1);
  color:#dff3ff;
  font-size:.9rem;
}

.company i,
.location i{
  color:var(--sky);
}

.timeline-body p{
  color:var(--muted);
  line-height:1.9;
  font-size:.96rem;
  margin-bottom:16px;
}

/* TECH STACK */
.tech-stack{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.tech-stack span{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(52,215,255,.08);
  border:1px solid rgba(52,215,255,.18);
  color:#dff8ff;
  font-size:.82rem;
  transition:.3s ease;
}

.tech-stack span:hover{
  background:linear-gradient(135deg,var(--sky),var(--cyan));
  color:#04111a;
  transform:translateY(-2px);
}

/* PROJECTS */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.project-card{
  padding:0;
  overflow:hidden;
}

.project-content{
  padding:26px;
}

.project-top{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}

.project-top h3{
  font-size:1.18rem;
  line-height:1.4;
  color:var(--text);
}

.project-badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(143,217,255,.08);
  border:1px solid rgba(143,217,255,.14);
  color:var(--sky);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.03em;
}

.project-content p{
  color:var(--muted);
  line-height:1.9;
  font-size:.96rem;
  margin-bottom:18px;
}

/* EDUCATION */
.education-timeline{
  display:grid;
  gap:22px;
  margin-top:30px;
}

.education-item{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:24px;
  padding:24px;
}

.education-date{
  display:flex;
  align-items:flex-start;
}

.education-body h3{
  font-size:1.1rem;
  margin-bottom:12px;
  color:var(--text);
  line-height:1.5;
}

.education-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.education-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(143,217,255,.1);
  color:#dff3ff;
  font-size:.9rem;
}

.education-meta i{
  color:var(--sky);
}

/* CERTIFICATIONS */
.certification-timeline{
  display:grid;
  gap:22px;
  margin-top:30px;
}

.certification-item{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:24px;
  padding:24px;
}

.certification-date{
  display:flex;
  align-items:flex-start;
}

.certification-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.certification-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}

.certification-top h3{
  font-size:1.1rem;
  line-height:1.5;
  color:var(--text);
}

.certification-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.certification-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(143,217,255,0.1);
  color:#dff3ff;
  font-size:.9rem;
}

.certification-meta i{
  color:var(--sky);
}

.certificate-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(143,217,255,.08);
  border:1px solid rgba(143,217,255,.14);
  color:var(--sky);
  font-size:.9rem;
  font-weight:600;
  transition:.3s ease;
}

.certificate-link:hover{
  transform:translateX(4px);
  background:linear-gradient(135deg,var(--sky),var(--cyan));
  color:#04111a;
}

/* CONTACT */
.contact-panel{
  position:relative;
  overflow:hidden;
}

.contact-panel h3{
  font-size:1.25rem;
  margin-bottom:12px;
}

.panel-glow{
  position:absolute;
  inset:auto -60px -60px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(52,215,255,.16), transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}

.contact-list{
  display:grid;
  gap:14px;
  margin-top:22px;
}

.contact-list-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(143,217,255,.1);
  transition:.3s ease;
}

a.contact-list-item:hover{
  transform:translateX(5px);
  border-color:rgba(143,217,255,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.contact-list-item i{
  width:18px;
  color:var(--sky);
  flex-shrink:0;
}

.contact-list-item span{
  color:#dff3ff;
  line-height:1.5;
}

.availability-box{
  margin-top:22px;
  padding:20px;
  border-radius:22px;
}

.availability-kicker{
  display:inline-block;
  margin-bottom:12px;
  color:var(--sky);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
}

.availability-box ul{
  list-style:none;
  display:grid;
  gap:10px;
}

.availability-box li{
  color:var(--muted);
  line-height:1.7;
  font-size:.96rem;
}

.contact-form{
  display:grid;
  gap:14px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

input,textarea{
  width:100%;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(143,217,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font:inherit;
  outline:none;
  transition:.24s;
}

.contact-form input,
.contact-form textarea{
  background:rgba(255,255,255,.035);
}

input:focus,textarea:focus{
  border-color:rgba(143,217,255,.34);
  box-shadow:0 0 0 4px rgba(143,217,255,.08);
}

textarea{
  min-height:180px;
  resize:vertical;
}

.submit-btn{
  justify-content:center;
  width:100%;
}

.submit-btn:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}

.form-status{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
  margin-top:2px;
}

.form-status.success{
  color:#7df7bc;
}

.form-status.error{
  color:#ff9ea8;
}

/* FOOTER */
.footer{
  padding:30px 0 46px;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:22px 24px;
  margin-bottom:16px;
}

.footer-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.footer-title{
  font-size:1.05rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.02em;
}

.footer-subtitle{
  color:var(--muted);
  font-size:.95rem;
}

.footer-bottom{
  text-align:center;
}

.footer-bottom p{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.7;
}

.footer-icons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.footer-icons a{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(143,217,255,.12);
  color:var(--sky);
  transition:.28s ease;
}

.footer-icons a:hover{
  transform:translateY(-4px);
  background:linear-gradient(135deg, rgba(143,217,255,.14), rgba(52,215,255,.14));
  border-color:rgba(143,217,255,.22);
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}

.reveal.delay-1{
  transition-delay:.1s;
}

.reveal.delay-2{
  transition-delay:.2s;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* RESPONSIVE */
@media (max-width:1080px){
  .hero-grid,
  .about-grid,
  .contact-layout{
    grid-template-columns:1fr;
  }

  .skills-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

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

@media (max-width:860px){
  .desktop-nav,
  .nav-btn{
    display:none;
  }

  .menu-btn{
    display:block;
  }

  .hero-grid,
  .about-grid,
  .contact-layout,
  .projects-grid,
  .skills-grid,
  .form-row,
  .timeline-item,
  .education-item,
  .certification-item{
    grid-template-columns:1fr;
  }

  .hero-metrics{
    grid-template-columns:1fr;
  }

  .profile-photo{
    height:380px;
  }

  .section{
    padding:76px 0;
  }

  .certification-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-bottom{
    text-align:left;
  }
}

@media (max-width:560px){
  .hero-left h1{
    font-size:2.45rem;
  }

  .nav{
    padding:12px 14px;
  }

  .profile-photo{
    height:300px;
  }

  .skills-grid{
    grid-template-columns:1fr;
  }
}

/* Language switcher and freelance mission links */
.language-toggle{
  min-width:42px;height:42px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(143,217,255,.24);background:rgba(143,217,255,.08);
  color:var(--sky);font:inherit;font-size:.82rem;font-weight:800;letter-spacing:.04em;
  cursor:pointer;transition:.25s ease;
}
.language-toggle:hover,.language-toggle:focus-visible{
  color:#04111a;background:linear-gradient(135deg,var(--sky),var(--cyan));
  outline:none;box-shadow:0 0 0 4px rgba(143,217,255,.1);
}
.mission-link{margin:14px 0 0!important;font-size:.9rem!important}
.mission-link a{color:var(--sky);font-weight:700}
.mission-link a:hover{text-decoration:underline}
@media(max-width:860px){.language-toggle{min-width:38px;height:38px}}