:root{
  --bg: #0b0b10; --card:#111318; --text:#e7eaf0; --muted:#9aa3b2;
  --brand:#38bdf8; --brand-2:#6366f1; --line:#1c1f27; --shadow: 0 10px 30px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --bg:#ffffff; --card:#f6f8fb; --text:#0c1222; --muted:#5b6473; --line:#e9edf2; --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(56,189,248,0.15),transparent),
             radial-gradient(1000px 500px at 110% -20%,rgba(99,102,241,0.12),transparent),
             var(--bg);
  color:var(--text);
  font:16px/1.6 'Inter', system-ui,Segoe UI,Roboto,Inter,sans-serif
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin-inline:auto;padding:0 0px}
.container_temp{
    width: 100% !important;
    background: #0b0b10;
    margin: 0;
    padding: 0;
}
/* Header */
header{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));backdrop-filter:saturate(140%) blur(8px)}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid transparent}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(45deg,var(--brand),var(--brand-2));box-shadow:0 0 18px rgba(56,189,248,.8)}

nav a{padding:8px 12px;border-radius:12px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));box-shadow:var(--shadow)}
.btn.primary{border-color:transparent;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:white}
.btn.ghost{background:transparent}
.theme{border-radius:12px;padding:8px 10px;border:1px solid var(--line);cursor:pointer;background:var(--card)}

/* Hero */
.hero{padding:120px 0 70px}
.hero h1{font-size:clamp(36px,6vw,64px);line-height:1.05;margin:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:780px;color:var(--muted);margin:14px 0 26px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.badge{font-size:13px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.02)}

/* Section */
section{padding:70px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(22px,3.5vw,32px);margin:0 0 22px}
.sub{color:var(--muted);margin:0 0 30px}

/* Grid */
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid.cols-4,.grid.cols-3{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}

/* Skills */
.skill{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid var(--line);flex-direction: column;}
.skill small{color:var(--muted)}

/* Projects */
.project{display:flex;flex-direction:column;gap:12px;justify-content: space-between;}
.thumb {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(56, 189, 248, .15), rgb(255 255 255 / 42%));
    position: relative;
    overflow: hidden;
}
.thumb::after{content:\"\";position:absolute;inset:auto -20% -40% -20%;height:120%;background:radial-gradient(40% 60% at 50% 0%,rgba(255,255,255,.08),transparent)}
.thumb img{
     width: 100%;
    height: 100%;
    object-fit: contain; /* change to cover if you want a full fit */
    display: block;
    padding: 10px; /* reduces sizing effect if too big */
    box-sizing: border-box;
}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.meta .chip{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:4px 8px;border-radius:999px}

/* About */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}
@media (max-width:900px){.about{grid-template-columns:1fr}}

/* Contact */
.contact .rows{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){.contact .rows{grid-template-columns:1fr}}
input, textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit}
textarea{min-height:120px;resize:vertical}
.contact-section { padding: 4rem 1rem; }
  .contact-section .container { max-width: 900px; margin: 0 auto; }
  .contact-section h2 { font-size: 2rem; margin-bottom: 0.75rem; }
  .contact-card {
        display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 0.5px solid #e5e7eb;
    border-radius: 10px;
    background: #6b96ee78 !important;
  }
  .email-link { font-weight: 600; text-decoration: none; }
  .email-link:hover { text-decoration: underline; }
  .copy-btn {
    border: 1px solid #e5e7eb; background: white; padding: 0.4rem 0.7rem;
    border-radius: 8px; cursor: pointer;
  }
  .copy-btn:active { transform: translateY(1px); }
  .copy-status { margin-left: 0.25rem; font-size: 0.9rem; color: #16a34a; }

/* Footer */
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);text-align:center}

/* Enter animations */
.reveal{opacity:0;transform:translateY(14px);}
.reveal.show{opacity:1;transform:none;transition:all .7s ease}
.skill-group {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.65;
}