/* ===================================================
   SUBHADIP SARKAR PORTFOLIO v5.0 — ENTERPRISE 3D
   Fixed Kali/Pygame SVGs + Hacking Tool Icons
   =================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #000; color: #fff; overflow-x: hidden; cursor: none; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #6366f1; }
::selection { background: rgba(99,102,241,.3); }
:root {
  --grad: linear-gradient(135deg,#6366f1,#a78bfa 40%,#38bdf8);
  --acc: #6366f1; --acc2: #38bdf8; --green: #22c55e;
  --border: rgba(255,255,255,.08);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.4,0,.2,1);
}

/* LOADER */
#loader { position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .7s var(--ease),visibility .7s; }
#loader.out { opacity:0;visibility:hidden;pointer-events:none; }
.ld-inner { text-align:center; }
.ld-logo { width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid rgba(99,102,241,.5);margin:0 auto 1.2rem;display:block;box-shadow:0 0 40px rgba(99,102,241,.4); }
.ld-name { font-size:.7rem;letter-spacing:6px;color:#555;font-family:'JetBrains Mono',monospace;margin-bottom:1.5rem; }
.ld-track { width:180px;height:1px;background:rgba(255,255,255,.08);margin:0 auto .8rem;overflow:hidden; }
.ld-bar { height:100%;width:0;background:var(--grad);transition:width .12s linear; }
.ld-pct { font-family:'JetBrains Mono',monospace;font-size:.65rem;color:#444;letter-spacing:2px; }

/* CURSOR */
#cdot { position:fixed;width:5px;height:5px;background:#fff;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);mix-blend-mode:difference; }
#cring { position:fixed;width:34px;height:34px;border:1px solid rgba(99,102,241,.6);border-radius:50%;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s; }
#cring.big { width:52px;height:52px;border-color:var(--acc2); }

/* NAV */
#nav { position:fixed;top:0;left:0;right:0;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 5rem;transition:all .5s var(--ease2); }
#nav.solid { background:rgba(0,0,0,.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:.9rem 5rem; }
.nav-brand { display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff; }
.nav-icon { width:32px;height:32px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(99,102,241,.6); }
.nav-brand span { font-size:.95rem;font-weight:800;letter-spacing:3px; }
.nav-brand em { color:var(--acc);font-style:normal; }
.nav-ul { display:flex;gap:2.5rem;list-style:none; }
.nav-ul a { color:#6b7280;text-decoration:none;font-size:.82rem;font-weight:500;letter-spacing:.3px;transition:color .25s; }
.nav-ul a:hover { color:#fff; }
.nav-hire { padding:.55rem 1.3rem;border:1px solid rgba(255,255,255,.15);border-radius:100px;font-size:.8rem;font-weight:600;color:#fff;text-decoration:none;transition:all .3s; }
.nav-hire:hover { background:#fff;color:#000; }
.nav-hbg { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:4px; }
.nav-hbg span { display:block;width:22px;height:1.5px;background:#fff;border-radius:2px; }

/* HERO */
#hero { position:relative;min-height:100vh;display:flex;align-items:center;padding:0 5rem;overflow:hidden; }
#heroCanvas { position:absolute;inset:0;width:100%;height:100%;z-index:0; }
.orb { position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:1; }
.orb1 { width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%);top:-100px;right:-100px;animation:orbFloat 12s ease-in-out infinite; }
.orb2 { width:400px;height:400px;background:radial-gradient(circle,rgba(56,189,248,.12),transparent 70%);bottom:0;left:20%;animation:orbFloat 9s ease-in-out infinite reverse;animation-delay:-3s; }
.orb3 { width:300px;height:300px;background:radial-gradient(circle,rgba(167,139,250,.12),transparent 70%);top:40%;left:40%;animation:orbFloat 15s ease-in-out infinite;animation-delay:-6s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-30px) scale(1.05)} 66%{transform:translate(-20px,20px) scale(.97)} }
.hero-wrap { position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding-top:5rem; }
.hero-status { display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#6b7280;letter-spacing:2px;text-transform:uppercase;margin-bottom:2.2rem; }
.pulse { width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulseAnim 2s ease infinite; }
@keyframes pulseAnim { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }
.hero-h1 { font-size:clamp(3rem,6vw,5.5rem);font-weight:900;line-height:.95;letter-spacing:-2px;margin-bottom:2rem; }
.word { display:block; }
.hero-grad,.grad-text { background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-p { font-family:'JetBrains Mono',monospace;font-size:.78rem;color:#4b5563;letter-spacing:3px;text-transform:uppercase;margin-bottom:3rem; }
.hero-btns { display:flex;gap:1rem;margin-bottom:3.5rem;flex-wrap:wrap; }
.btn-white { display:inline-flex;align-items:center;gap:8px;padding:.85rem 2rem;background:#fff;color:#000;font-size:.88rem;font-weight:700;border-radius:100px;text-decoration:none;border:none;cursor:none;transition:all .3s; }
.btn-white:hover { transform:scale(1.04);box-shadow:0 0 40px rgba(255,255,255,.15); }
.btn-ghost { display:inline-flex;align-items:center;gap:8px;padding:.85rem 2rem;background:transparent;color:#9ca3af;font-size:.88rem;font-weight:600;border-radius:100px;text-decoration:none;border:1px solid rgba(255,255,255,.12);cursor:none;transition:all .3s; }
.btn-ghost:hover { color:#fff;border-color:rgba(255,255,255,.3); }
.hero-stats { display:flex;align-items:center;gap:2.5rem; }
.hstat { display:flex;flex-direction:column; }
.hstat-n { font-size:2.5rem;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hstat-l { font-family:'JetBrains Mono',monospace;font-size:.62rem;color:#374151;letter-spacing:2px;text-transform:uppercase;margin-top:3px; }
.hstat-div { width:1px;height:36px;background:rgba(255,255,255,.06); }

/* HERO PROFILE */
.hero-profile { position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:500px; }
.hp-glow { position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.25),transparent 70%);filter:blur(40px);animation:glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.15);opacity:1} }
.hp-ring { position:absolute;border-radius:50%;border:1px solid; }
.r1 { width:380px;height:380px;border-color:rgba(99,102,241,.2);animation:spin 25s linear infinite; }
.r2 { width:310px;height:310px;border-color:rgba(56,189,248,.12);animation:spin 18s linear infinite reverse; }
.r3 { width:440px;height:440px;border-color:rgba(167,139,250,.07);animation:spin 35s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.hp-img { width:240px;height:240px;border-radius:50%;overflow:hidden;border:2px solid rgba(99,102,241,.5);box-shadow:0 0 80px rgba(99,102,241,.3),0 0 160px rgba(99,102,241,.1);position:relative;z-index:2; }
.hp-img img { width:100%;height:100%;object-fit:cover;display:block; }
.hp-tag { position:absolute;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:.4rem 1rem;font-size:.72rem;font-weight:600;white-space:nowrap;z-index:3;animation:tagF 4s ease-in-out infinite; }
.ht1{top:10%;right:6%;animation-delay:0s}.ht2{top:34%;left:2%;animation-delay:.8s}.ht3{bottom:22%;right:2%;animation-delay:1.6s}.ht4{bottom:6%;left:12%;animation-delay:2.4s}.ht5{top:55%;right:5%;animation-delay:3.2s}
@keyframes tagF { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero-scroll-hint { position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:#374151;letter-spacing:3px; }
.scroll-line { width:1px;height:52px;background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);animation:scrollLine 2.5s ease infinite; }
@keyframes scrollLine { 0%{opacity:0;transform:scaleY(0);transform-origin:top}60%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1);transform-origin:bottom} }

/* SHARED */
section { padding:8rem 0;position:relative; }
.ctr { max-width:1220px;margin:0 auto;padding:0 5rem; }
.tag-label { font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#374151;letter-spacing:4px;text-transform:uppercase;margin-bottom:1.2rem; }
.sec-title { font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.05;letter-spacing:-1px;margin-bottom:1.2rem; }
.sec-sub { color:#6b7280;font-size:1rem;line-height:1.8;margin-bottom:3.5rem;max-width:560px; }
.body-p { color:#6b7280;font-size:1rem;line-height:1.9;margin-bottom:1.2rem; }
.body-p strong { color:#fff; }

/* ABOUT */
#about { background:#080808;border-top:1px solid var(--border); }
.noise-bg { position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;pointer-events:none; }
.about-grid { display:grid;grid-template-columns:1fr 1.2fr;gap:6rem;align-items:center; }
.about-card { position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 60px 120px rgba(0,0,0,.7);cursor:none;transition:transform .4s var(--ease); }
.about-img { width:100%;height:460px;object-fit:cover;display:block;filter:brightness(.85) saturate(1.15); }
.about-card-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.3) 50%,transparent 100%);padding:2rem;display:flex;flex-direction:column;justify-content:flex-end; }
.aco-name { font-size:1.3rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.3rem; }
.aco-role { font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#6b7280;margin-bottom:.4rem; }
.aco-loc { font-size:.78rem;color:#374151;margin-bottom:.8rem; }
.aco-badges { display:flex;gap:.5rem;flex-wrap:wrap; }
.aco-badges span { padding:.22rem .7rem;border:1px solid rgba(255,255,255,.1);border-radius:4px;font-size:.65rem;font-family:'JetBrains Mono',monospace;color:#6b7280; }
.open-badge { border-color:rgba(34,197,94,.3)!important;color:var(--green)!important; }
.about-facts { display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:2.5rem 0;padding:1.5rem;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px; }
.af { text-align:center; }
.af-n { display:block;font-size:2rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px; }
.af-l { font-family:'JetBrains Mono',monospace;font-size:.62rem;color:#374151;letter-spacing:1.5px;text-transform:uppercase; }

/* MARQUEE */
#marquee-sec { padding:3rem 0;background:#000;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden; }
.marquee-wrap { overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent);mask:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent); }
.marquee-track { display:flex;gap:2.5rem;width:max-content;animation:marqAnim 30s linear infinite; }
@keyframes marqAnim { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
.mq-item { display:flex;align-items:center;gap:.7rem;padding:.6rem 1.2rem;border:1px solid var(--border);border-radius:100px;white-space:nowrap;background:rgba(255,255,255,.02);transition:border-color .3s; }
.mq-item:hover { border-color:rgba(99,102,241,.4); }
.mq-item img { width:22px;height:22px;object-fit:contain; }
.mq-item span { font-size:.78rem;color:#6b7280;font-family:'JetBrains Mono',monospace; }

/* SHOWCASE */
#showcase { background:#000; }
.cards-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem; }
.card-lg { grid-column:span 2; }
.card-wide { grid-column:span 2; }
.card { position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--border);cursor:none;display:block;text-decoration:none;color:#fff;transition:border-color .4s,transform .4s var(--ease),box-shadow .4s; }
.card:hover { border-color:rgba(255,255,255,.2);transform:translateY(-8px);box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 60px rgba(99,102,241,.08); }
.card-img { width:100%;object-fit:cover;display:block;min-height:220px;filter:brightness(.6) saturate(1.2);transition:filter .5s,transform .6s var(--ease); }
.card-lg .card-img,.card-wide .card-img { min-height:360px; }
.card:hover .card-img { filter:brightness(.4) saturate(1.4);transform:scale(1.05); }
.card-badge { position:absolute;top:1rem;left:1rem;z-index:2;padding:.2rem .7rem;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:2px;background:linear-gradient(135deg,rgba(99,102,241,.4),rgba(56,189,248,.3));border:1px solid rgba(99,102,241,.4);color:#a78bfa;backdrop-filter:blur(8px); }
.card-body { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.98) 0%,rgba(0,0,0,.5) 40%,transparent 100%);padding:1.8rem;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .4s var(--ease); }
.card:hover .card-body { opacity:1; }
.card-cat { display:inline-block;padding:.2rem .65rem;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.3);color:#a78bfa;margin-bottom:.7rem;align-self:flex-start; }
.cat-green{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#22c55e}.cat-blue{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.25);color:#38bdf8}.cat-yellow{background:rgba(234,179,8,.1);border-color:rgba(234,179,8,.25);color:#eab308}.cat-purple{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.25);color:#a78bfa}.cat-orange{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.25);color:#f97316}.cat-red{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#f87171}
.card-body h3 { font-size:1.1rem;font-weight:700;margin-bottom:.5rem; }
.card-lg .card-body h3,.card-wide .card-body h3 { font-size:1.5rem; }
.card-body p { font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:1rem; }
.card-cta { font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#fff;letter-spacing:1px;padding:.45rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:4px;align-self:flex-start; }
.card-shine { position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);pointer-events:none;transform:translateX(-100%);transition:transform .9s var(--ease); }
.card:hover .card-shine { transform:translateX(100%); }

/* SKILLS */
#skills { background:#080808;border-top:1px solid var(--border); }
.mesh-bg { position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,.06),transparent 60%);pointer-events:none; }
.skill-cat-label { font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#6366f1;letter-spacing:3px;text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem; }
.skill-cat-label::after { content:'';flex:1;height:1px;background:var(--border); }
.skills-logo-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem; }
.skills-logo-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem; }
.slg-item { background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;transition:all .35s var(--ease); }
.slg-item:hover { background:rgba(255,255,255,.05);border-color:rgba(99,102,241,.3);transform:translateY(-4px);box-shadow:0 16px 40px rgba(99,102,241,.1); }
.slg-item img { width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,255,255,.1)); }
.slg-tool-svg { width:44px;height:44px; }
.slg-emoji { font-size:2rem;line-height:1; }
.slg-name { font-size:.75rem;font-weight:600;color:#d1d5db;text-align:center; }
.slg-pct { font-family:'JetBrains Mono',monospace;font-size:.62rem;color:#4b5563;letter-spacing:1px; }
.slg-bar { width:100%;height:2px;background:rgba(255,255,255,.05);border-radius:1px;overflow:hidden; }
.slg-fill { height:100%;width:0;background:var(--grad);border-radius:1px;transition:width 1.6s var(--ease); }

/* CONTACT */
#contact { background:#080808;border-top:1px solid var(--border); }
.contact-bg { position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(99,102,241,.06),transparent 60%);pointer-events:none; }
.contact-inner { display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start; }
.contact-links { display:flex;flex-direction:column;gap:.6rem;margin-top:2rem; }
.clink { display:flex;align-items:center;gap:1rem;color:#6b7280;text-decoration:none;font-size:.88rem;padding:.7rem 0;border-bottom:1px solid var(--border);transition:color .25s; }
.clink:hover { color:#fff; }
.clink-svg { width:18px;height:18px;flex-shrink:0;color:#374151;transition:color .25s; }
.clink:hover .clink-svg { color:#fff; }
.contact-form { display:flex;flex-direction:column;gap:.8rem; }
.fg input,.fg textarea { width:100%;padding:.95rem 1.2rem;background:rgba(255,255,255,.03);border:1px solid var(--border);color:#fff;font-family:'Inter',sans-serif;font-size:.9rem;outline:none;border-radius:8px;resize:vertical;transition:border-color .3s; }
.fg input:focus,.fg textarea:focus { border-color:var(--acc); }
.fg input::placeholder,.fg textarea::placeholder { color:#374151; }
#fmsg { padding:.8rem 1rem;border-radius:6px;font-size:.82rem;font-family:'JetBrains Mono',monospace; }
#fmsg.ok { background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);color:var(--green); }
#fmsg.err { background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);color:#ef4444; }

/* FOOTER */
footer { background:#000;border-top:1px solid var(--border);padding:2.5rem 0; }
.footer-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem; }
.footer-brand { display:flex;align-items:center;gap:.9rem; }
.footer-icon { width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(99,102,241,.5); }
.fb-name { font-size:.9rem;font-weight:900;letter-spacing:3px; }
.fb-name em { color:var(--acc);font-style:normal; }
.fb-sub { font-family:'JetBrains Mono',monospace;font-size:.6rem;color:#374151;letter-spacing:1.5px;margin-top:2px; }
.footer-links { display:flex;gap:1.5rem;align-items:center; }
.footer-social { display:flex;align-items:center;gap:.5rem;color:#374151;text-decoration:none;font-size:.78rem;transition:color .25s; }
.footer-social:hover { color:#fff; }
.footer-social svg { width:16px;height:16px; }
.footer-bottom { font-family:'JetBrains Mono',monospace;font-size:.65rem;color:#1f2937;letter-spacing:1px;border-top:1px solid rgba(255,255,255,.04);padding-top:1.5rem; }

/* SCROLL REVEAL */
.rv-ready { opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease); }
.rv-ready.in { opacity:1;transform:none; }

/* RESPONSIVE */
@media(max-width:1100px){
  .hero-wrap{grid-template-columns:1fr;gap:3rem}
  .hero-profile{height:340px}
  .hp-img{width:190px;height:190px}
  .r1{width:280px;height:280px}.r2{width:230px;height:230px}.r3{width:340px;height:340px}
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .contact-inner{grid-template-columns:1fr;gap:3rem}
  .skills-logo-grid,.skills-logo-grid-4{grid-template-columns:repeat(3,1fr)}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .card-lg,.card-wide{grid-column:span 2}
}
@media(max-width:768px){
  #nav{padding:1rem 1.5rem}
  #nav.solid{padding:.8rem 1.5rem}
  .nav-ul{display:none;flex-direction:column;position:fixed;inset:0;background:rgba(0,0,0,.97);align-items:center;justify-content:center;gap:2rem;z-index:998}
  .nav-ul.open{display:flex}
  .nav-ul a{font-size:1.4rem}
  .nav-hire{display:none}
  .nav-hbg{display:flex}
  #hero{padding:0 1.5rem}
  .ctr{padding:0 1.5rem}
  section{padding:5rem 0}
  .cards-grid{grid-template-columns:1fr}
  .card-lg,.card-wide{grid-column:span 1}
  .skills-logo-grid,.skills-logo-grid-4{grid-template-columns:repeat(2,1fr)}
  .pi{grid-template-columns:50px 1fr;gap:1rem}
}