body {
  overflow-x: hidden;  /* prevents any accidental sideways scroll */
}

:root{
    --bg: #0b0b10;
    --surface: #12121a;
    --text: #e6e6ef;
    --muted: #b5b7c0;
    --brand: #5006f1;
    --brand-2: #7b4afc;
    --card: #161625;
    --ring: #292a3a;
    --radius: 18px;
    --maxw: 1100px;
}

/* CSS reset (small & safe) */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"League Spartan",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#0e0e14);color:var(--text);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Layout helpers */
.container{max-width:var(--maxw);margin-inline:auto;padding: clamp(16px,2.5vw,28px);} 
.grid{display:grid;gap:clamp(16px,2.5vw,28px)}

/* Skip link for a11y */
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:16px;top:16px;background:#fff;color:#000;padding:8px 12px;border-radius:10px}

/* Header / Nav */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 16, 0.6); /* must have transparency */
  -webkit-backdrop-filter: saturate(140%) blur(10px); /* for iOS Safari */
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ring);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:36px;height:36px}
.brand h1{font-weight:800;letter-spacing:.4px;font-size:clamp(18px,2.6vw,24px)}
.brand h1 span{color:var(--brand)}
.navlinks{display:flex;gap:16px;align-items:center}
.navlinks a{padding:10px 12px;border-radius:12px;line-height:1.1;color:var(--muted)}
.navlinks a:hover,.navlinks a:focus{color:#fff;background:rgba(80,6,241,.1)}

/* Mobile menu */
.menu-btn{display:none;border:1px solid var(--ring);background:transparent;border-radius:12px;padding:10px 12px}
.menu-btn .bar{display:block;width:22px;height:2px;background:#fff;position:relative}
.menu-btn .bar::before,.menu-btn .bar::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff}
.menu-btn .bar::before{top:-6px}.menu-btn .bar::after{top:6px}

@media (max-width: 768px){
    .menu-btn{display:block}
    .navlinks{position:fixed;inset:auto 0 0 0;transform:translateY(100%);transition:transform .35s ease;flex-direction:column;padding:20px;background:var(--surface);border-top:1px solid var(--ring)}
    .navlinks.open{transform:translateY(0)}
    header{backdrop-filter:none}
}

/* Hero */
.hero{padding-block: clamp(28px,6vw,72px)}
.hero .grid{grid-template-columns: 1.1fr .9fr;align-items:center}
.kicker{color:var(--brand);font-weight:700;letter-spacing:.2px}
.hero h2{font-size:clamp(28px,6vw,56px);line-height:1.05;margin:8px 0 12px}
.hero p{max-width:52ch;color:var(--muted);font-weight:400}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{padding:12px 16px;border-radius:14px;border:1px solid var(--ring);background:transparent;color:#fff;display:inline-flex;align-items:center;gap:10px}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card);border:1px solid var(--ring)}
.socials a:hover{transform:translateY(-2px)}
.portrait {
  display: block;             /* ensures it behaves properly in grid/flex */
  max-width: 100%;            /* keeps it inside its container */
  height: auto;               /* maintains correct proportions */
  justify-self: center;
  border-radius: 24px;
  box-shadow: 0 10px 40px #0007;
  border: 1px solid var(--ring);
}


@media (max-width: 900px){
    .hero .grid{grid-template-columns:1fr}
    .portrait{order:-1}
}

/* Section headers */
.section-title{font-size:clamp(24px,4.2vw,40px);text-align:center;margin:0 0 8px}
.section-sub{color:var(--muted);text-align:center;max-width:70ch;margin:0 auto 20px}

/* About */
.about{padding-block: clamp(28px,6vw,72px)}
.about-card{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:clamp(18px,3vw,28px);text-align:center}

/* Skills */
.skills{padding-block: clamp(28px,6vw,72px)}
.skills-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2.2vw,22px)}
.skill{grid-column:span 12;background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);padding:20px;display:flex;gap:16px;align-items:flex-start}
.skill h3{margin:2px 0 6px;font-size:clamp(18px,2.4vw,22px)}
.skill p{color:var(--muted)}
.skill svg{min-width:56px}
@media (min-width:600px){.skill{grid-column:span 6}}
@media (min-width:960px){.skill{grid-column:span 3}}

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

/* Motion respect */
@media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important;scroll-behavior:auto !important}
}