/* v1.7.2-pro — luxe glow */
:root{
  --bg:#0b0b10; --text:#eaeaf3; --muted:#a2a5b2;
  --card:rgba(18,18,27,.55); --card-b:#232336;
  --brand:#ff2d55; --brand2:#ffd166; --accent:#8be9fd;
}

*{box-sizing:border-box} html,body{margin:0} a{text-decoration:none;color:inherit}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text); line-height:1.6;
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(255,45,85,.10), transparent 60%),
    radial-gradient(900px 480px at 110% -10%, rgba(255,209,102,.10), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

/* floating ambient glows */
body::before, body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none; filter:blur(50px);
  width:min(44vw,780px); height:min(44vw,780px);
  background:radial-gradient(circle at 50% 50%, rgba(255,45,85,.18), transparent 60%);
  left:-8%; bottom:18%; opacity:.55; animation:float1 22s ease-in-out infinite;
}
body::after{
  left:auto; right:-10%; bottom:auto; top:6%;
  background:radial-gradient(circle at 50% 50%, rgba(255,209,102,.16), transparent 60%);
  animation:float2 26s ease-in-out infinite;
}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-38px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,24px)}}

.container{max-width:1150px;margin:0 auto;padding:0 22px}
.section{padding:80px 0;border-bottom:1px solid #1a1a27}

/* header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,16,.6); backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid #1a1a27;
}
.nav{display:flex;gap:16px;align-items:center;justify-content:center;padding:10px 0}
.nav a{padding:8px 12px;border-radius:12px;opacity:.9;transition:background .2s, color .2s}
.nav a:hover{background:#151526}
.nav .btn{margin-left:10px}

/* buttons */
.btn{
  display:inline-block; border:0; cursor:pointer; font-weight:800;
  padding:10px 16px; border-radius:14px; color:#111;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  box-shadow:0 0 30px rgba(255,45,85,.35), 0 0 60px rgba(255,209,102,.22);
  position:relative; overflow:hidden; transform:translateZ(0);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.38), transparent 60%);
  mix-blend-mode:soft-light; transform:translateX(-100%); opacity:0;
  transition:transform .55s ease, opacity .25s;
}
.btn:hover::after{transform:translateX(0); opacity:.8}

/* hero */
.hero{padding:120px 0 80px;text-align:center}
.hero h1{
  margin:0 0 12px; font-size: clamp(32px, 4vw, 48px); line-height:1.1;
  background:linear-gradient(90deg,#fff 0%, #ffe7b0 45%, #ffd166 60%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 8px 40px rgba(0,0,0,.35);
}
.hero p{max-width:720px;margin:0 auto 26px;opacity:.9}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  position:relative; background:var(--card); border:1px solid var(--card-b);
  border-radius:20px; overflow:hidden; backdrop-filter: blur(8px);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:0 22px 56px rgba(0,0,0,.4); border-color:#2a2a3d}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0;
  background:linear-gradient(160deg, rgba(255,45,85,.35), rgba(255,209,102,.25));
  opacity:.12; transition:opacity .25s;
}
.card:hover::before{opacity:.22}
.card .body{position:relative; z-index:1; padding:18px}
.card .thumb{height:150px; display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0d0d18,#0f0f1c)}
.card .thumb img{height:72px;opacity:.92}
.title-ico{display:flex;align-items:center;gap:10px}
.title-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}

/* filters & badges */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.filter{
  padding:6px 12px; border-radius:12px; border:1px solid #2a2a3c; background:#12121c;
  transition:border-color .15s, color .15s; cursor:pointer
}
.filter.active,.filter:hover{border-color:var(--brand); color:#fff}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{font-size:12px;padding:6px 8px;border-radius:999px;background:#171727;border:1px solid #2a2a38;color:#c7cada}

/* skills */
.skill-list{display:grid;gap:12px;margin-top:16px}
.skill-row{display:grid;grid-template-columns:170px 1fr 48px; gap:12px; align-items:center}
.skill-bar{position:relative;height:10px;background:#0e0e17;border:1px solid #23233a;border-radius:999px;overflow:hidden}
.skill-bar>span{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-right:1px solid rgba(255,255,255,.18);
  transition:width .9s cubic-bezier(.2,.7,0,1);
}

/* forms */
.input,.textarea{
  width:100%; background:#141420; color:var(--text);
  border:1px solid #2a2a38; border-radius:12px; padding:10px 12px;
}
.textarea{min-height:120px; resize:vertical}

/* footer */
.site-footer{padding:42px 0;border-top:1px solid #1a1a27}
.site-footer .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* reveal motion */
[data-fade]{transform:translateY(14px);opacity:0;transition:transform .6s ease, opacity .6s ease}
.show{transform:none!important;opacity:1!important}

/* responsive */
@media (max-width:980px){
  .cards{grid-template-columns:1fr}
  .skill-row{grid-template-columns:1fr 1fr 48px}
}

/* accessibility */
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
  [data-fade]{transition:none}
  .btn::after{transition:none}
}