:root{
  --radius:12px;

  /* Dark theme */
  --bg-dark: linear-gradient(135deg,#0b1220,#0f172a,#001f2f,#002b3a);
  --text-dark: #19d1c5;
  --muted-dark: #0dff00;
  --accent-dark: #38bdf8;
  --card-dark: rgba(255,255,255,0.04);
  --glass-dark: rgba(255,255,255,0.03);

/* Light theme overrides (Day mode) */
:root[data-theme="light"]{
  --bg-1: linear-gradient(135deg,#00ff6a,#00bbff); /* soft pastel gradient */
  --bg-2: #0ee52a; /* light cream background */
  --card: rgba(255,255,255,0.6); /* semi-transparent cards */
  --muted: #6b7280; /* subtle grey text */
  --accent: #00ff9d; /* warm orange accent */
  --glass: rgba(255,255,255,0.5); /* glass effect for inputs */
  --text: #1f2937; /* default text color */
}



}

/* Theme selection */
:root[data-theme="dark"]{
  --bg: var(--bg-dark);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --accent: var(--accent-dark);
  --card: var(--card-dark);
  --glass: var(--glass-dark);
}

:root[data-theme="light"]{
  --bg: var(--bg-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --accent: var(--accent-light);
  --card: var(--card-light);
  --glass: var(--glass-light);
}

/* Base reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto;
  background: var(--bg);
  background-size:400% 400%;
  animation: gradientMove 12s ease infinite;
  color: var(--text);
  line-height:1.5;
}

/* Gradient text for highlights */
.gradient-text{
  background: linear-gradient(90deg,#00ff15,#00ffee,#81c784,#0059ff,#00ffbb);
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: textGradient 6s ease infinite;
}

/* Keyframes for animation */
@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes textGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Container */
.container{width:90%;max-width:1100px;margin:0 auto}

/* Header */
.site-header{
  position:sticky;top:0;backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border-bottom:1px solid rgba(255,255,255,0.04);
  z-index:50;
}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;font-size:1.2rem;color:var(--accent);letter-spacing:0.6px}
.actions{display:flex;align-items:center;gap:16px}
.nav-links{list-style:none;display:flex;gap:18px}
.nav-links a{color:var(--text);text-decoration:none;font-weight:500;font-size:0.95rem;opacity:0.92;transition:all .25s}
.nav-links a:hover{color:var(--accent);transform:translateY(-2px)}
.icon-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:10px;cursor:pointer;font-size:16px;color:var(--text)}

/* Hero */
.hero{display:flex;align-items:center;justify-content:space-between;padding:60px 0;gap:30px;flex-wrap:wrap}
.hero-left{flex:1;min-width:280px;max-width:640px;opacity:0;transform:translateY(20px);transition:all .8s ease}
.hero-left.inview{opacity:1;transform:none}
.intro{font-size:2.2rem;margin-bottom:10px}
.lead{color:var(--muted);margin-bottom:18px}
.cta-row{display:flex;align-items:center;gap:12px}
.btn{background:linear-gradient(90deg,var(--accent),#00ff9d);padding:10px 16px;border-radius:12px;color:#fff;text-decoration:none;font-weight:600;box-shadow:0 8px 24px rgba(255,111,97,0.12);transition:transform .2s ease}
.btn:hover{transform:translateY(-4px)}

/* Avatar */
.avatar-wrap{width:320px;height:320px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;align-items:center;justify-content:center;padding:18px;box-shadow:0 10px 40px rgba(2,6,23,0.6);opacity:0;transform:translateY(20px);transition:all .9s ease}
.avatar-wrap.inview{opacity:1;transform:none}
.avatar{width:100%;height:100%;object-fit:cover;border-radius:16px;border:4px solid rgba(255,111,97,0.08);box-shadow:0 8px 30px rgba(255,111,97,0.12)}

/* About */
.about{padding:60px 0}
.about h2{color:var(--accent);margin-bottom:18px}
.about-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:center;opacity:0;transform:translateY(20px);transition:all .7s ease}
.about-grid.inview{opacity:1;transform:none}
.about p{color:var(--muted)}
.about-img{width:100%;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.6)}

/* Projects */
.projects{padding:60px 0}
.projects h2{color:var(--accent);margin-bottom:18px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.project-card{background:var(--card);padding:14px;border-radius:12px;transition:transform .28s,box-shadow .28s;opacity:0;transform:translateY(18px)}
.project-card.inview{opacity:1;transform:none}
.project-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(255,111,97,0.08)}
.project-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px}

/* Contact */
.contact{padding:60px 0;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
#contactForm{max-width:560px;margin:18px auto 0;display:flex;flex-direction:column;gap:12px}
#contactForm input,#contactForm textarea{padding:12px;border-radius:10px;border:none;background:var(--glass);color:var(--text)}
#contactForm input:focus,#contactForm textarea:focus{outline:2px solid rgba(255,111,97,0.18)}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:50px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:15px}
.site-footer a{color:var(--accent);text-decoration:none}

/* Responsive */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .avatar-wrap{width:260px;height:260px}
}
@media (max-width:700px){
  .nav-links{display:none}
  .header-inner{gap:12px}
  .avatar-wrap{width:220px;height:220px}
  .intro{font-size:1.6rem}
  .hero{padding:40px 0}
  .footer-inner{flex-direction:column;gap:8px}
}


/* Background gradient animation for all themes */
body {
  background: linear-gradient(135deg, #11a37a, #087347, #03456e, #000000);
  background-size: 400% 400%;
  animation: gradientMove 7s ease infinite;
  color: var(--text);
}

/* Keyframes for moving gradient */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Contact section at the bottom */
.contact {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(180deg, rgba(0,255,0,0.02), rgba(0,255,0,0.05));
  color: var(--text);
  margin-top: auto; /* Pushes section to bottom if using flex layout on main */
}

/* Telegram button */
.telegram-btn {
  display: inline-block;
  background: #0088cc;
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  margin-top: 20px;
}

.telegram-btn:hover {
  background: #00aaff;
  transform: scale(1.05);
}


@keyframes textGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



.about-text-box {
  background: rgba(0, 50, 50, 0.2); /* tortburchak fon */
  padding: 30px 40px;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  display: inline-block;  /* rasm bilan aralashmasligi uchun */
  max-width: 600px;       /* matnni qattiq kengaytirmaslik uchun */
}

/* Gradient text for About Me heading */
.about-text-box h2 {
  background: linear-gradient(90deg,
    #00f2ff,
    #00d4b4,
    #00a58f,
    #007a66,
    #00d4b4,
    #00f2ff
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  color: transparent;
  animation: textGradient 6s ease infinite;
}

@keyframes textGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Accent span gradient */
.hero-text-box h2 .accent {
  background: linear-gradient(90deg,
    #001eff,
    #00ff95,
    #07c220,
    #b3ff66,
    #33ffcc
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  color: transparent;
  animation: textGradient 6s ease infinite;
  display: inline-block; /* gradientni yaxshiroq ko‘rsatish uchun */
  padding-right: 8px;   /* biroz bo‘shliq qo‘shish */
}

/* Hero text box */
.hero-left {
  display: flex;
  flex-direction: column; /* vertical joylashuv */
  justify-content: flex-start;
  align-items: flex-start; /* yozuv chapdan boshlansin */
  width: 100%; /* eniga cho‘zilsin */
  max-width: 600px; /* maksimal kenglik 870px ga kamaytirildi */
  padding: 30px 40px; /* ichki bo‘shliq */
  background: rgba(0, 128, 128, 0.05); /* engil shaffof box */
  border-radius: 20px; /* biroz yumaloqroq */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* chuqurroq soya */
  gap: 20px; /* elementlar orasini kengaytirdik */
}

/* Hero text */
.hero-text-box .intro {
  font-size: 2.2rem; /* kattaroq qoldirdik */
  font-weight: 600;
  margin-bottom: 10px;
}

.hero-text-box .lead {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 16px;
}

.hero-text-box .cta-row {
  margin-top: 12px;
}

/* Lead text */
.hero-text-box .lead {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 12px;
}

/* CTA button row */
.hero-text-box .cta-row {
  margin-top: 10px;
}


/* Gradient text for specific elements */
.hero-left .intro,
.hero-left .lead,
.about h2,
.about p {
  background: linear-gradient(90deg, #00f2ff, #00d4b4, #00a58f, #007a66, #00d4b4, #00f2ff);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradient 6s ease infinite;
}



.social-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 19px 25px;
  max-width: 1600px; /* box kengligi */
  margin: 25px auto 0; /* markazga va pastga joylash */
  background: rgba(0,128,128,0.07); /* shaffof alohida box */
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.social-box .title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
}

.social-box .social-compact {
  display: flex;
  gap: 30px; /* iconlar orasini kengaytirish */
}

.social-box .social-compact a img {
  width: 70px;
  height: 70px;
  transition: transform 0.2s ease;
}

.social-box .social-compact a:hover img {
  transform: scale(1.15);
}

.social img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.social img:hover {
  transform: scale(1.1);
}





.projects-box {
  background: rgba(0, 128, 128, 0.05); /* yengil shaffof fon */
  padding: 20px 30px;                  /* ichki bo‘shliq */
  border-radius: 16px;                  /* yumaloq burchaklar */
  text-align: center;                   /* matn markazga */
  margin: 0 auto 30px auto;             /* markazga va pastga bo‘shliq */
  width: 2000px;                          /* enini belgilaymiz */
  max-width: 100%;                        /* kichik ekranlarda moslashuv */
  box-shadow: 0 8px 30px rgba(0,0,0,0.15); /* engil soya */
}