:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0b0d12;
  --muted:#5b6275;
  --brand:#6b5cff;
  --accent:#00a2ff;
  --ring: rgba(91,69,255,.18);
  --border: rgba(11,13,18,.08);
  --shadow: 0 10px 30px rgba(10, 14, 28, .08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 "Plus Jakarta Sans","Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
}
.logo{font-weight:800;letter-spacing:.4px;color:var(--text);display:flex;align-items:center;gap:8px}
.logo-mark{
  display:inline-grid;place-items:center;
  width:28px;height:28px;border-radius:9px;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff;font-weight:800;font-size:14px;
  box-shadow: var(--shadow);
}
.nav a{margin:0 10px;color:var(--text);opacity:.85;position:relative}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .25s ease;
  border-radius:2px;
}
.nav a:hover{opacity:1}
.nav a:hover::after{width:100%}

/* Animated blobs */
.blobs{position:fixed;inset:0;pointer-events:none;z-index:-1}
.float{{animation:float 12s ease-in-out infinite;transform-origin:center}}
.float.a{{animation-duration:16s}}
.float.b{{animation-duration:18s;animation-delay:-2s}}
.float.c{{animation-duration:20s;animation-delay:-3s}}
.float.d{{animation-duration:22s;animation-delay:-5s}}
@keyframes float{0%{{transform:translateY(0)}}
50%{{transform:translateY(16px)}}
100%{{transform:translateY(0)}}}

/* Hero */
.hero{
  position:relative;min-height:62vh;display:grid;place-items:center;
  overflow:hidden;padding:72px 20px 32px;
}
.hero-inner{max-width:1080px}
h1{font-size:clamp(30px,6.5vw,60px);line-height:1.1;margin:0 0 12px 0;font-weight:800;letter-spacing:.2px}
.underline{background:linear-gradient(120deg, rgba(124,92,255,.25), rgba(0,162,255,.25));padding:4px 10px;border-radius:14px}
.subtitle{font-size:clamp(16px,2.3vw,20px);color:var(--muted);margin:0 0 24px}
.cta{display:flex;gap:12px;margin:22px 0 10px}
.btn{
  display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid var(--border);
  color:var(--text);background:#fff;transition:all .25s ease;box-shadow: var(--shadow);cursor:pointer
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff;border:0;position:relative;overflow:hidden}
.btn.outline{background:transparent}
.sheen::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);transform:skewX(-20deg) translateX(-120%);}
.sheen:hover::before{transition:transform .7s ease;transform:skewX(-20deg) translateX(120%)}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.badges span{background:#fff;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:13px;box-shadow: var(--shadow)}
.badge-group{display:inline-flex;align-items:center;gap:8px;margin:10px 14px 0 0;padding-right:10px;border-right:1px solid var(--border)}
.badge-group:last-child{border-right:0}
.badge-title{font-size:12px;font-weight:800;letter-spacing:.2px;color:var(--muted);text-transform:uppercase;border:1px solid var(--border);background:#fff;border-radius:999px;padding:4px 8px}

/* Tech color pills */
.tech.dotnet{background:linear-gradient(90deg,#7c5cff,#a08bff);color:#fff;border:0}
.tech.aspnet{background:linear-gradient(90deg,#5b45ff,#7e66ff);color:#fff;border:0}
.tech.csharp{background:linear-gradient(90deg,#6d28d9,#8b5cf6);color:#fff;border:0}
.tech.ef{background:linear-gradient(90deg,#16a34a,#22c55e);color:#fff;border:0}
.tech.winforms{background:linear-gradient(90deg,#4338ca,#6366f1);color:#fff;border:0}
.tech.wpf{background:linear-gradient(90deg,#0ea5e9,#38bdf8);color:#fff;border:0}
.tech.angular{background:linear-gradient(90deg,#dd0031,#c3002f);color:#fff;border:0}
.tech.ts{background:linear-gradient(90deg,#007acc,#1e90ff);color:#fff;border:0}
.tech.js{background:linear-gradient(90deg,#f7df1e,#ffd84d);color:#1a1a1a;border:0}
.tech.html{background:linear-gradient(90deg,#e34f26,#ff6a3d);color:#fff;border:0}
.tech.css{background:linear-gradient(90deg,#2965f1,#3b82f6);color:#fff;border:0}
.tech.bootstrap{background:linear-gradient(90deg,#563d7c,#7c5cff);color:#fff;border:0}
.tech.sqlserver{background:linear-gradient(90deg,#a91d22,#e03137);color:#fff;border:0}
.tech.mysql{background:linear-gradient(90deg,#00758f,#00b3b3);color:#fff;border:0}

/* Sections */
.section{padding:64px 20px;max-width:1100px;margin:0 auto}
.section h2{font-size:26px;margin:0 0 16px;position:relative;display:inline-block}
.section h2::after{content:"";position:absolute;left:0;bottom:-6px;width:48%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.highlights{padding-left:18px;margin:8px 0;color:var(--muted)}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{position:relative;background:#fff;padding:20px;border-radius:18px;border:1px solid var(--border);box-shadow: var(--shadow);overflow:hidden;isolation:isolate;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(10,14,28,.12)}
.card-grad{position:absolute;inset:-2px;z-index:-1;background:linear-gradient(135deg, rgba(124,92,255,.2), rgba(0,162,255,.2));filter:blur(20px);opacity:0;transition:opacity .25s ease}
.card:hover .card-grad{opacity:1}
.card h3{margin:6px 0 8px}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:8px 0 12px}
.card .btn.small{padding:8px 12px;font-size:14px}

/* Footer */
.site-footer{padding:30px 20px;color:var(--muted);text-align:center;border-top:1px solid var(--border);margin-top:48px;background:#fff}

/* Muted badges (other tools) */
.badges.muted span{opacity:.75;background:#fff;border:1px dashed var(--border);font-size:12px;box-shadow:none}