/* Updated unified gradient, removed repeating gradients and improved footer */
:root{
  --bg-a:#021028;
  --bg-b:#042847;
  --accent:#2EB6FF; --accent-2:#6CE6FF;
  --glass:rgba(255,255,255,0.03); --muted:#9fb6cf; --text:#dceefb;
  --card-border: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;position:relative;overflow-x:hidden}
body{
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-a) 0%, var(--bg-b) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

/* unified gradient layer */
#bg-gradient{
  position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg, rgba(2,16,40,0.65) 0%, rgba(4,40,71,0.55) 45%, rgba(6,54,95,0.45) 100%);
  pointer-events:none;
  filter:blur(28px) saturate(1.05);
}

/* particle canvas behind everything */
canvas{display:block;position:fixed;inset:0;z-index:-3;pointer-events:none}

/* Top bar */
.hero{min-height:62vh;padding:36px 48px 24px 48px;display:flex;flex-direction:column;gap:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-size:20px;font-weight:700;color:var(--accent)}

/* Theme button */
.theme-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--text);cursor:pointer;backdrop-filter:blur(6px)}

/* Main content layout */
.content{display:flex;align-items:flex-start;gap:24px}
.intro{flex:1;max-width:980px}
.headline{font-size:42px;margin:10px 0 6px;color:var(--accent);letter-spacing:0.4px}
.sub{color:var(--muted);font-size:16px;margin:0 0 18px}

/* Hero grid */
.hero-grid{display:flex;gap:18px;align-items:stretch}
.hero-left{flex:1}
.hero-right{width:360px;display:flex;align-items:center;justify-content:center}

/* Profile card (3D interactive) */
.profile-card{
  width:320px;height:240px;border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:0 12px 50px rgba(2,6,23,0.7);
  border:1px solid var(--card-border);
  transform-style:preserve-3d;transition:transform 350ms cubic-bezier(.2,.9,.25,1);
}
.pc-inner{padding:22px;display:flex;flex-direction:column;gap:12px;transform:translateZ(18px)}
.pc-name{font-size:20px;margin:0;color:var(--accent-2)}
.pc-role{margin:0;color:var(--muted)}
.pc-stats{display:flex;gap:12px;margin-top:6px}
.pc-stats div{background:rgba(255,255,255,0.02);padding:8px 10px;border-radius:8px;text-align:center}
.pc-stats strong{display:block;font-size:16px}
.pc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pc-tags span{background:rgba(46,182,255,0.06);padding:6px 8px;border-radius:8px;font-size:13px}

/* CTA buttons */
.cta-row{display:flex;gap:12px;margin:8px 0 16px}
.cta{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;backdrop-filter:blur(6px);transition:transform 160ms, box-shadow 160ms}
.cta-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 30px rgba(46,182,255,0.08)}
.cta-outline{border:1px solid rgba(255,255,255,0.06);color:var(--text);background:transparent}

/* meta cards */
.meta-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.card{background:rgba(255,255,255,0.02);padding:12px;border-radius:12px;border:1px solid var(--card-border)}
.card.highlight{border:1px solid rgba(46,182,255,0.22);box-shadow:0 6px 22px rgba(46,182,255,0.04)}

/* Language list with styled bullets */
.lang-list{
  list-style:none;
  padding:0;
  margin:8px 0 0 0;
}
.lang-list li{
  position:relative;
  padding-left:18px;
  margin-bottom:6px;
  color:var(--text);
}
.lang-list li:before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 8px rgba(46,182,255,0.4);
}

/* side menu 3D */
.side-menu{width:140px;transform-style:preserve-3d;perspective:900px;margin-top:40px}
.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.menu-item{transform-origin:center right;transition:transform 240ms cubic-bezier(.2,.9,.25,1), box-shadow 240ms}
.menu-item a{display:block;padding:12px 16px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));text-decoration:none;color:var(--text);font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.01)}
.menu-item:hover{transform:translateZ(18px) rotateY(-10deg) scale(1.08);box-shadow:0 12px 40px rgba(2,6,23,0.6)}

/* Removed skill bars styles */

/* sections */
.section{padding:60px 48px;border-top:1px solid rgba(255,255,255,0.02)}
.section-title{font-size:28px;color:var(--accent);margin:0 0 18px}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.project{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:18px;border-radius:14px;border:1px solid var(--card-border);position:relative;overflow:hidden;transition:transform 260ms, box-shadow 260ms}
.project:hover{transform:translateY(-8px) translateZ(0);box-shadow:0 16px 50px rgba(2,6,23,0.6)}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg, rgba(46,182,255,0.03), transparent 40%);opacity:0;transition:opacity 260ms;pointer-events:none;}
.project:hover::after{opacity:1}

.proj-inner {
  position: relative;
  z-index: 2;
}

/* small buttons - FIXED */
.btn-sm{
  margin-top:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:transparent;
  font-weight:700;
  cursor:pointer;
  color: var(--text);
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.btn-sm:hover {
  background: rgba(46,182,255,0.1);
  border-color: var(--accent);
}

/* skills grid */
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px}
.skill-card{background:rgba(255,255,255,0.02);padding:16px;border-radius:12px;border:1px solid var(--card-border)}

/* footer - redesigned: darker, high-readability */
.footer{
  padding:48px 48px;
  background:linear-gradient(180deg, rgba(1,8,22,0.12), rgba(1,8,22,0.18));
  margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.03);
}
.contact-wrap{
  display:flex;justify-content:space-between;gap:20px;align-items:center;max-width:1100px;margin:0 auto;
}
.contact-card{max-width:520px}
.contact-card h3{margin:0 0 8px;color:var(--accent);font-size:18px}
.contact-card p{margin:6px 0;color:var(--muted);font-size:14px}
.contact-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.cta-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:10px 14px;border-radius:10px;color:var(--text)}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(1,6,20,0.6);opacity:0;pointer-events:none;transition:opacity 240ms}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px;max-width:820px;width:94%;border:1px solid var(--card-border)}
.modal-close{position:absolute;right:18px;top:14px;background:transparent;border:0;color:var(--muted);font-size:26px;cursor:pointer}

/* responsive */
@media (max-width:900px){
  .content{flex-direction:column}
  .hero-right{width:100%}
  .meta-cards{grid-template-columns:repeat(1,1fr)}
  .contact-wrap{flex-direction:column;align-items:flex-start;padding:0 16px}
}

/* Light theme overrides */
body.theme-light{
  --bg-a:#f6fbff; --bg-b:#eaf6ff; --card-border: rgba(2,20,40,0.06); --accent:#0a6cff; --accent-2:#6fb8ff; --text:#041428; --muted:#2b5b7a;
}



/* Topbar practice link */
.top-link{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  margin-right:12px;
  padding:8px 12px;
  border-radius:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.02);
  backdrop-filter:blur(6px);
}
.top-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(2,6,23,0.35);}

/* Practice section */
.practice-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.008));
  border:1px solid var(--card-border);
  padding:18px;
  border-radius:12px;
  max-width:1100px;
  margin:0 auto;
  box-shadow:0 10px 40px rgba(3,10,25,0.55);
}
.practice-task{margin:0 0 12px;color:var(--accent);font-size:18px}
.practice-controls{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}
.practice-controls label{color:var(--muted);font-weight:700}
#lang-select{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);width:100%;max-width:200px}

.practice-body{display:flex;gap:16px;align-items:flex-start}
#code-input{flex:1;min-height:140px;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.18);color:var(--text);font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;font-size:14px;resize:vertical}
.practice-actions{width:220px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.result{min-height:48px;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.01);color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center}
.result.success{background:linear-gradient(90deg, rgba(46,182,255,0.06), rgba(108,230,255,0.04));color:var(--accent-2);border:1px solid rgba(46,182,255,0.12)}
.result.error{background:linear-gradient(90deg, rgba(255,80,80,0.02), rgba(255,80,80,0.01));color:#ffb3b3;border:1px solid rgba(255,80,80,0.08)}

.practice-note{margin-top:12px;color:var(--muted);font-size:13px}
@media (max-width:900px){
  .practice-body{flex-direction:column}
  .practice-actions{width:100%}
}



/* Enhanced select dropdown styling */
#lang-select {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 4px 20px rgba(2,6,23,0.4);
  transition: all 0.25s ease;
  width: 100%;
  max-width: 200px;
}

#lang-select:hover {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(46,182,255,0.25);
}

#lang-select:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 12px rgba(108,230,255,0.35);
}

#lang-select option {
  background-color: #021028;
  color: #fff;
  font-weight: 600;
  padding: 10px;
}


/* === Enhanced button animations and unified style === */
button, .cta, .btn-sm, .cta-ghost, .theme-btn {
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

button::before, .cta::before, .btn-sm::before, .cta-ghost::before, .theme-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(46,182,255,0.15), rgba(108,230,255,0.15));
  transition: all 0.4s ease-in-out;
  z-index: -1;
}

button:hover::before, .cta:hover::before, .btn-sm:hover::before, .cta-ghost:hover::before, .theme-btn:hover::before {
  left: 100%;
}

button:hover, .cta:hover, .btn-sm:hover, .cta-ghost:hover, .theme-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(46,182,255,0.3);
}

button:active, .cta:active, .btn-sm:active, .cta-ghost:active, .theme-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(46,182,255,0.15);
}

/* Ensure readable text color */
.cta, .cta-outline, .btn-sm, .cta-ghost, .theme-btn {
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.35);
}

/* For light theme contrast */
body.theme-light .cta-outline,
body.theme-light .btn-sm,
body.theme-light .cta-ghost,
body.theme-light .theme-btn {
  background: linear-gradient(180deg, #0a6cff, #6fb8ff);
  color: #fff !important;
  border: none;
}



/* === MOBILE ADAPTATION (PROFESSIONAL) === */
@media (max-width: 600px) {
  body { font-size: 15px; overflow-x: hidden; }
  .hero { padding: 24px 20px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .logo { font-size: 18px; text-align: center; width: 100%; }
  .theme-btn { align-self: flex-end; }
  .headline { font-size: 28px; text-align: center; }
  .sub { font-size: 14px; text-align: center; margin-bottom: 16px; }
  .hero-grid { flex-direction: column; gap: 20px; }
  .hero-left, .hero-right { width: 100%; text-align: center; }
  .profile-card { width: 100%; height: auto; padding: 20px; }
  .pc-inner { padding: 16px; }
  .cta-row { flex-direction: column; align-items: center; }
  .cta { width: 100%; text-align: center; }
  .meta-cards { grid-template-columns: 1fr; gap: 10px; }
  .side-menu { width: 100%; margin-top: 20px; }
  .menu-list { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px; }
  .menu-item a { padding: 10px 12px; font-size: 14px; }
  .section { padding: 40px 20px; }
  .section-title { font-size: 22px; text-align: center; }
  .projects-grid { grid-template-columns: 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .practice-body { flex-direction: column; }
  .practice-actions { width: 100%; }
  .footer { padding: 32px 20px; text-align: center; }
  .contact-wrap { flex-direction: column; align-items: center; gap: 20px; }
  .contact-actions { align-items: center; }
}


/* === MOBILE: Wider code input field === */
@media (max-width: 600px) {
  #code-input {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 14px 16px;
  }
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top-actions .top-link {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.25s ease;
}
.top-actions .top-link:hover {
  background: rgba(255,255,255,0.05);
  color: var(--accent-2);
}