/* ==========================================================================
   NETFLIX THEME — loaded AFTER style.css, so it only overrides.
   Palette: #141414 background, #E50914 red, white/grey text.
   ========================================================================== */

:root {
  --bg: #141414;
  --surface: #181818;
  --surface2: #232323;
  --text: #ffffff;
  --muted: #b3b3b3;
  --dim: #808080;
  --accent: #e50914;
  --accent2: #e50914;
  --accent3: #f5c518;
  --pink: #e50914;
  --glow: rgba(229, 9, 20, .4);
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --radius: 6px;
  --glass-bg: #181818;
  --glass-bg-strong: #232323;
  --glass-border: rgba(255, 255, 255, .08);
  --glass-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  --hard-blue: none; --hard-green: none; --hard-pink: none; --hard-yellow: none;
  --nx-pad: 4%;
}

/* ---------- Kill the old "creative studio" effects ---------- */
body { background: #141414; cursor: auto; }
body::before, body::after, .noise, #cursor, #cursor-ring, #bg-canvas, .nav-theme,
.orbit, .scroll-hint, .process-line { display: none !important; }
a, button, [onclick], .nav-btn, .hamburger, .service-card, .project-card,
.fsocial, .social-btn, .filter-btn, .lightbox-close, .lightbox-arrow,
.gallery-item, .gallery-filter-btn, .overlay-btn, .repo-btn,
.btn-primary, .btn-outline, .btn-submit, .btn-whatsapp, .whatsapp-float { cursor: pointer; }
::selection { background: #e50914; color: #fff; }

/* ---------- Top navigation (transparent → solid black on scroll) ---------- */
nav {
  top: 0; left: 0; transform: none; width: 100%;
  padding: 18px var(--nx-pad); border: 0; border-radius: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  transition: background .4s;
}
nav.scrolled { top: 0; padding: 14px var(--nx-pad); background: #141414; }
.nav-logo {
  color: #e50914; font-weight: 900; letter-spacing: 1px; font-size: 28px;
  text-transform: uppercase; transform: scaleY(1.1);
}
.nav-logo span { color: #e50914; }
.nav-logo::after { display: none; }
.nav-links { gap: 4px; margin-left: auto; }
.nav-btn { font-size: 14px; letter-spacing: 0; text-transform: none; padding: 8px 14px; color: #e5e5e5; }
.nav-btn::before { display: none; }
.nav-btn:hover { color: #b3b3b3; }
.nav-btn.active { color: #fff; font-weight: 700; }
.mobile-menu { background: rgba(0,0,0,.96); backdrop-filter: none; }
.mobile-menu .nav-btn { font-size: 22px !important; }

/* ---------- Buttons: Play (white) & More Info (grey) ---------- */
.btn-primary, .btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 28px; border-radius: 4px; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  text-decoration: none; transition: background .2s, transform .2s; box-shadow: none;
}
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover { background: rgba(255,255,255,.75); color: #000; transform: none; box-shadow: none; }
.btn-primary::before { content: '▶'; font-size: 15px; }
.btn-outline { background: rgba(109,109,110,.7); color: #fff; }
.btn-outline:hover { background: rgba(109,109,110,.45); color: #fff; border: 0; transform: none; }
.btn-outline::before { content: 'ⓘ'; font-size: 18px; }
.btn-submit { background: #e50914; border-radius: 4px; box-shadow: none; }
.btn-submit:hover { background: #f6121d; transform: none; box-shadow: none; }
.btn-whatsapp { border-radius: 4px; box-shadow: none; }
.btn-whatsapp:hover { transform: none; box-shadow: none; }
.whatsapp-float { border-radius: 50px; box-shadow: 0 4px 20px rgba(0,0,0,.6); }
.whatsapp-float:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(0,0,0,.6); }

/* ---------- Billboard hero (replaces old split hero) ---------- */
#hero.nx-billboard {
  min-height: 92vh; padding: 0 var(--nx-pad); align-items: center;
  background:
    linear-gradient(77deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 80%),
    linear-gradient(to top, #141414 2%, rgba(20,20,20,0) 35%),
    radial-gradient(ellipse at 78% 38%, rgba(229,9,20,.45), transparent 55%),
    radial-gradient(ellipse at 95% 90%, rgba(120,0,10,.5), transparent 50%),
    #0b0b0b;
}
#hero.nx-billboard::before { display: none; }
.nx-hero-inner { max-width: 640px; padding-top: 70px; }
.nx-tag {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-weight: 700; font-size: 14px; letter-spacing: 6px; color: #b3b3b3; text-transform: uppercase;
}
.nx-tag b { color: #e50914; font-size: 26px; letter-spacing: 0; }
.nx-title {
  font-family: var(--font-display); font-weight: 900; line-height: 1.02;
  font-size: clamp(42px, 7vw, 86px); margin-bottom: 18px;
  text-shadow: 2px 2px 6px rgba(0,0,0,.45);
}
.nx-title span { display: block; }
.nx-title .red { color: #e50914; }
.nx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 16px; }
.nx-match { color: #46d369; font-weight: 700; }
.nx-badge { border: 1px solid rgba(255,255,255,.5); padding: 0 6px; font-size: 13px; color: #fff; }
.nx-hd { border: 1px solid rgba(255,255,255,.5); border-radius: 3px; padding: 0 5px; font-size: 11px; }
.nx-desc { font-size: clamp(15px, 1.5vw, 20px); line-height: 1.5; max-width: 560px; color: #fff; margin-bottom: 26px; text-shadow: 1px 1px 4px rgba(0,0,0,.6); }
.nx-hero-inner .hero-cta { gap: 12px; }
.nx-maturity {
  position: absolute; right: 0; bottom: 22%; z-index: 2;
  background: rgba(51,51,51,.6); border-left: 3px solid #dcdcdc; padding: 10px 40px 10px 14px; font-size: 18px;
}
#hero.nx-billboard .hero-stats {
  border: 0; margin-top: 34px; padding-top: 0; gap: 34px; animation: none;
}
.stat-num, .stat-item:nth-child(n) .stat-num { color: #fff !important; font-size: 30px; }
.stat-label { color: #b3b3b3; font-size: 11px; letter-spacing: 1px; }

/* ---------- Sections become "rows" ---------- */
.section-inner { padding: 36px 0 10px; max-width: none; }
.services-section, .process-section, .testimonials-section { background: none; }
.page-header, .page-header.centered { text-align: left; margin: 0 var(--nx-pad) 14px; }
.page-header.centered .page-label::after { display: none; }
.page-header.centered .page-label { justify-content: flex-start; }
.page-label { display: none; }            /* tiny eyebrow labels are not Netflix-y */
.page-title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: 0; color: #e5e5e5; }
.page-title br { display: none; }
.page-title span, .page-title .hl-marker { color: #e5e5e5; }
.hl-marker i { display: none; }
.section-subtitle { margin: 6px 0 0; text-align: left; font-size: 14px; color: #808080; max-width: 640px; }
/* inner pages (about/contact/portfolio) keep a big heading */
.page-wrap { max-width: none; padding: 110px var(--nx-pad) 60px; }
.page-wrap .page-header { margin: 0 0 24px; }
.page-wrap .page-title { font-size: clamp(30px, 4vw, 48px); font-weight: 800; color: #fff; }
.page-wrap .page-title span { color: #e50914; }
.page-wrap .page-label { display: flex; color: #e50914; }
.page-wrap .page-label::before { background: #e50914; }

/* ---------- Horizontal scroll rows (CSS-only conversion of existing grids) ---------- */
.services-grid, .process-timeline, .websites-grid, .repo-grid, .testimonials-grid {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 14px var(--nx-pad) 60px; margin: 0;
  scrollbar-width: none;
}
.services-grid::-webkit-scrollbar, .process-timeline::-webkit-scrollbar,
.websites-grid::-webkit-scrollbar, .repo-grid::-webkit-scrollbar,
.testimonials-grid::-webkit-scrollbar { display: none; }
.services-grid > *, .process-timeline > *, .websites-grid > *, .repo-grid > *, .testimonials-grid > * {
  flex: 0 0 auto; scroll-snap-align: start;
}

/* Row wrapper added by script.js for arrow buttons */
.nx-row { position: relative; }
.nx-arrow {
  position: absolute; top: 14px; bottom: 60px; width: var(--nx-pad); min-width: 44px; z-index: 20;
  border: 0; background: rgba(20,20,20,.55); color: #fff; font-size: 34px;
  opacity: 0; transition: opacity .25s, background .25s;
}
.nx-row:hover .nx-arrow { opacity: 1; }
.nx-arrow:hover { background: rgba(20,20,20,.85); }
.nx-prev { left: 0; border-radius: 0 4px 4px 0; }
.nx-next { right: 0; border-radius: 4px 0 0 4px; }

/* ---------- Cards: scale on hover like Netflix tiles ---------- */
.service-card, .step-card, .testimonial-card, .website-card, .repo-card, .project-card {
  background: #181818; border: 0; border-radius: 6px; box-shadow: none;
  transition: transform .3s ease, box-shadow .3s ease, background .3s;
}
.service-card:hover, .step-card:hover, .testimonial-card:hover, .website-card:hover,
.repo-card:hover, .project-card:hover {
  transform: scale(1.06); z-index: 10; background: #232323;
  box-shadow: 0 14px 40px rgba(0,0,0,.8); border: 0;
}
.service-card:nth-child(n):hover { border-color: transparent; box-shadow: 0 14px 40px rgba(0,0,0,.8); }
.service-card::before { height: 3px; background: #e50914; }
.service-card::after { color: #e50914; opacity: .9; font-weight: 800; font-size: 22px; content: attr(data-num); }

/* Services = poster tiles */
.service-card { width: 250px; min-height: 330px; padding: 26px 22px; background: linear-gradient(160deg, #2a2a2a, #181818); }
.service-card.featured { background: linear-gradient(160deg, #5a0a10, #181818); box-shadow: none; border: 0; }
.service-popular { background: #e50914; color: #fff; border-radius: 3px; transform: none; box-shadow: none; font-size: 11px; font-weight: 700; padding: 4px 10px; }
.service-card .service-icon-wrap { background: #e50914 !important; box-shadow: none; border-radius: 8px; }
.service-card .service-tagline { color: #46d369 !important; font-style: normal; font-weight: 600; }
.service-title { font-size: 19px; font-weight: 800; }

/* Process = "Episodes" */
.process-step { width: 300px; align-items: stretch; text-align: left; }
.step-number {
  width: auto; height: auto; border-radius: 0; background: none !important; box-shadow: none !important;
  color: #fff; font-size: 54px; font-weight: 900; margin: 0 0 -6px 4px; justify-content: flex-start;
  -webkit-text-stroke: 2px #6d6d6e; color: transparent;
}
.step-card { padding: 22px; min-height: 190px; }

/* Testimonials */
.testimonial-card { width: 380px; padding: 26px; }
.testimonial-card.featured-testi { background: #232323; border: 0; }

/* Websites & code projects = 16:9 tiles */
.website-card { width: 340px; overflow: hidden; }
.repo-card { width: 340px; overflow: hidden; }
.browser-frame { display: none; }          /* fake browser bar → clean thumbnail */
.site-thumb, .repo-card .repo-placeholder, .project-thumb { aspect-ratio: 16/9 !important; }
.site-info, .repo-body { padding: 14px 16px 18px; }
.site-title, .repo-title { font-size: 16px; font-weight: 700; }
.site-desc, .repo-desc { font-size: 12.5px; color: #b3b3b3; }
.go-arrow { color: #fff !important; }
.work-section { margin-top: 18px; }
.work-section:first-of-type { margin-top: 0; }
.work-section-head { margin: 0 0 4px var(--nx-pad); }
.work-section-title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: #e5e5e5; }
.work-section-title span { color: #e5e5e5; }
.work-section-desc { font-size: 13px; color: #808080; }
.work-section-head .page-label { display: none; }
.websites-grid, .repo-grid { margin-left: calc(var(--nx-pad) * -1); margin-right: calc(var(--nx-pad) * -1); }
.work-nav { justify-content: flex-start; margin: 10px 0 30px; }
.work-nav a, .filter-btn, .gallery-filter-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 50px;
  padding: 7px 18px; font-size: 14px; font-weight: 500; box-shadow: none;
}
.work-nav a:hover, .filter-btn:hover, .filter-btn.active,
.gallery-filter-btn:hover, .gallery-filter-btn.active {
  background: #fff; color: #000; border-color: #fff; box-shadow: none; transform: none;
}
.repo-btn { border-radius: 4px; box-shadow: none; }
.repo-btn-code { background: #333; border: 0; box-shadow: none; }
.repo-btn-code:hover, .repo-btn-demo:hover { box-shadow: none; transform: none; background: #555; }
.repo-btn-demo { background: #fff; color: #000; box-shadow: none; }

/* Tags / chips */
.about-tag { background: #2f2f2f; border: 0; border-radius: 3px; color: #e5e5e5; font-size: 11px; padding: 4px 10px; }
.about-tag:hover { color: #fff; background: #e50914; transform: none; border: 0; }

/* Gallery (design work) */
.gallery-grid { column-gap: 8px; }
.gallery-item { border: 0; border-radius: 4px; margin-bottom: 8px; box-shadow: none; }
.gallery-item:hover { transform: scale(1.04); z-index: 5; box-shadow: 0 14px 40px rgba(0,0,0,.8); border: 0; }
.gallery-item[data-cat] .gallery-cat-pill { background: #e50914; color: #fff; border-radius: 3px; }
.gallery-load-more-btn { background: #333; color: #fff; border: 0; border-radius: 4px; box-shadow: none; }
.gallery-load-more-btn:hover { background: #555; color: #fff; transform: none; box-shadow: none; }
.lightbox { background: rgba(0,0,0,.92); backdrop-filter: none; }
.lightbox-close, .lightbox-arrow { background: #181818; border: 0; border-radius: 50%; }
.lightbox-close:hover, .lightbox-arrow:hover { color: #fff; background: #e50914; }
.lightbox img { border-radius: 6px; }

/* Skills section: red progress bars */
.skills-wrapper { margin: 0 var(--nx-pad); gap: 60px; }
.skill-track, .skill-bar { height: 5px; background: #333; border-radius: 0; }
.skill-fill-bar, .skill-fill { background: #e50914; border-radius: 0; }
.skill-pct { color: #46d369; }
.tech-group-label, .skills-title { color: #e5e5e5; font-size: 14px; letter-spacing: 0; text-transform: none; }
.tech-item { background: #181818; border: 0; border-radius: 4px; }
.tech-grid .tech-item:nth-child(n):hover { box-shadow: none; transform: scale(1.08); border: 0; background: #232323; }

/* Clients row: white logo tiles → greyscale posters */
.clients-section { padding-bottom: 20px; }
.brand-tile { border-radius: 4px; background: #fff; box-shadow: none; border: 0; animation: none; }
.brand-tile:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(0,0,0,.8); border: 0; }

/* FAQ */
.faq-section .faq-list { max-width: none !important; margin: 0 var(--nx-pad) !important; }
.faq-item { background: #2f2f2f !important; border: 0 !important; border-radius: 0 !important; }
.faq-item:hover { background: #414141 !important; }
.faq-item summary { font-size: 18px; padding: 6px 0; }
.faq-item summary::after { color: #fff; }

/* CTA */
.cta-section { padding: 60px var(--nx-pad) 0; }
.cta-inner {
  max-width: none; border: 0; border-radius: 0; box-shadow: none; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(229,9,20,.35), transparent 60%), #0f0f0f;
  padding: 80px 30px;
}
.cta-glow { display: none; }
.cta-label { color: #b3b3b3; letter-spacing: 0; text-transform: none; font-size: 16px; }
.cta-title { font-weight: 900; }
.cta-title span { color: #e50914; }

/* About / contact */
.about-img-frame, .contact-form, .contact-icon, .social-btn, .fsocial {
  background: #181818; border: 0; border-radius: 6px; box-shadow: none;
}
.about-img-border { display: none; }
.about-initials-big { background: none; -webkit-text-fill-color: #e50914; opacity: .6; }
.exp-badge { background: #e50914; border-radius: 4px; transform: none; box-shadow: none; }
.about-bio a, .portfolio-cta-line a, .faq-item p a { color: #fff; text-decoration: underline; }
.about-bio a:hover, .portfolio-cta-line a:hover { color: #e50914; }
.form-input, .form-textarea { background: #333; border: 0; border-bottom: 2px solid transparent; border-radius: 4px; }
.form-input:focus, .form-textarea:focus { border-bottom-color: #e50914; box-shadow: none; }
.social-btn:hover, .fsocial:nth-child(n):hover { background: #e50914; color: #fff; border: 0; box-shadow: none; transform: none; }

/* Footer */
.footer { border-top: 0; background: #141414; margin-top: 60px; }
.footer::before { display: none; }
.footer-logo, .footer-logo span { color: #e50914; }
.footer-col-title { letter-spacing: 0; text-transform: none; color: #fff; font-size: 15px; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --nx-pad: 4%; }
  .nx-arrow { display: none; }
  .nx-maturity { display: none; }
  .services-grid, .process-timeline, .testimonials-grid { grid-template-columns: none; }
  .skills-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #hero.nx-billboard { min-height: 82vh; }
  .nx-title { font-size: clamp(38px, 12vw, 60px); }
  .service-card { width: 210px; min-height: 290px; }
  .website-card, .repo-card { width: 270px; }
  .process-step { width: 250px; }
  .testimonial-card { width: 290px; }
  .btn-primary, .btn-outline { font-size: 15px; padding: 10px 20px; }
  .nx-logo, .nav-logo { font-size: 24px; }
  .service-card:hover, .step-card:hover, .website-card:hover, .repo-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   v2 — closer match to the reference video:
   name splash → "Who's watching?" → billboard + Continue Exploring →
   Skill Universe sidebar → "To Be Continued…" ending
   ========================================================================== */
:root { --font-bebas: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif; }

/* Condensed cinematic display font for headings */
.nx-title, .page-title, .work-section-title, .cta-title, .nx-splash-name,
.nx-ep b, .step-title, .service-title, .nx-uni-nav button, .nx-who h2 {
  font-family: var(--font-bebas); letter-spacing: 1px; font-weight: 400;
}
.nx-title { font-size: clamp(64px, 11vw, 150px); line-height: .92; letter-spacing: 2px; text-transform: uppercase; }
.page-title { font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; text-transform: uppercase; }
.page-wrap .page-title { font-size: clamp(44px, 6vw, 84px); font-weight: 400; }
.work-section-title { font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; text-transform: uppercase; }
.service-title { font-size: 26px; font-weight: 400; }
.step-title { font-size: 24px; font-weight: 400; }

/* ---------- Intro overlay ---------- */
.nx-intro-overlay {
  position: fixed; inset: 0; z-index: 5000; background: #000;
  display: none; align-items: center; justify-content: center; overflow: hidden;
}
html.nx-intro .nx-intro-overlay { display: flex; }
html.nx-intro body { overflow: hidden; }
.nx-intro-overlay.is-leaving { opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.nx-skip {
  position: absolute; top: 22px; right: 4%; z-index: 3; background: none; border: 1px solid #555;
  color: #b3b3b3; padding: 7px 16px; border-radius: 3px; font-size: 13px;
}
.nx-skip:hover { color: #fff; border-color: #fff; }

.nx-splash {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at 50% 58%, rgba(229,9,20,.6), #000 62%);
  animation: nxSplashOut .6s ease 2.3s forwards;
}
.nx-splash-name {
  font-size: clamp(72px, 18vw, 240px); line-height: .9; color: #fff; letter-spacing: 6px;
  text-shadow: 0 0 40px rgba(229,9,20,.9), 0 0 90px rgba(229,9,20,.5);
  animation: nxZoom 2.4s cubic-bezier(.2,.7,.2,1) both;
}
.nx-splash-sub {
  margin-top: 14px; color: #e50914; font-weight: 700; letter-spacing: 8px; font-size: clamp(11px, 1.6vw, 18px);
  opacity: 0; animation: nxFade .8s ease .9s forwards;
}
@keyframes nxZoom { from { transform: scale(1.35); opacity: 0; filter: blur(8px); } 35% { opacity: 1; filter: blur(0); } to { transform: scale(1); } }
@keyframes nxFade { to { opacity: 1; } }
@keyframes nxSplashOut { to { opacity: 0; visibility: hidden; } }

.nx-who { position: relative; z-index: 1; text-align: center; padding: 0 5%; opacity: 0; animation: nxFade .7s ease 2.5s forwards; }
.nx-who h2 { font-size: clamp(40px, 5.5vw, 72px); color: #fff; margin-bottom: 34px; letter-spacing: 2px; }
.nx-profiles { display: flex; gap: clamp(14px, 2.6vw, 36px); justify-content: center; flex-wrap: wrap; }
.nx-profile { background: none; border: 0; color: #808080; width: clamp(110px, 14vw, 180px); transition: color .2s; }
.nx-avatar {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  aspect-ratio: 1; border-radius: 8px; border: 3px solid transparent;
  font-size: clamp(36px, 5vw, 66px); font-weight: 800; color: #fff; transition: transform .2s, border-color .2s;
}
.nx-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-ini { font-family: var(--font-bebas); letter-spacing: 2px; }
.p-me     { background: linear-gradient(135deg, #e50914, #5a0a10); }
.p-client { background: linear-gradient(135deg, #3b82f6, #1e3a8a); }
.p-rec    { background: linear-gradient(135deg, #34d399, #047857); }
.p-dev    { background: linear-gradient(135deg, #fbbf24, #d97706); color: #1a1100; font-family: monospace; }
.nx-profile:hover, .nx-profile:focus-visible { color: #fff; }
.nx-profile:hover .nx-avatar, .nx-profile:focus-visible .nx-avatar { border-color: #fff; transform: scale(1.06); }
.nx-name { display: block; margin-top: 14px; font-size: clamp(15px, 1.5vw, 21px); font-weight: 600; }
.nx-psub { display: block; margin-top: 3px; font-size: 12px; color: #6b6b6b; }

/* ---------- Billboard: photo + Continue Exploring ---------- */
#hero.nx-billboard {
  flex-direction: column; align-items: flex-start; justify-content: flex-end;
  min-height: 100vh; padding-top: 110px; position: relative; overflow: hidden;
}
.nx-hero-inner { position: relative; z-index: 3; padding-top: 0; margin-top: auto; }
.nx-photo {
  position: absolute; right: 2%; bottom: 0; width: min(48vw, 680px); z-index: 1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 52% 46%, #000 38%, transparent 74%);
          mask-image: radial-gradient(ellipse 62% 64% at 52% 46%, #000 38%, transparent 74%);
  filter: saturate(1.05) contrast(1.05);
}
.nx-photo img { width: 100%; height: auto; display: block; }
.nx-continue { position: relative; z-index: 3; width: 100%; margin-top: 30px; padding-bottom: 34px; }
.nx-continue h3 { font-size: 18px; font-weight: 700; color: #e5e5e5; margin-bottom: 10px; }
.nx-ep-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 14px; }
.nx-ep-row::-webkit-scrollbar { display: none; }
.nx-ep {
  flex: 0 0 clamp(200px, 21vw, 300px); aspect-ratio: 16/9; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px; border-radius: 6px; color: #fff; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.nx-ep::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), transparent 60%); }
.nx-ep::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 40%); background: #e50914; }
.nx-ep span { position: relative; z-index: 1; }
.nx-ep b { display: block; font-size: clamp(22px, 2.4vw, 32px); line-height: 1; text-transform: uppercase; }
.nx-ep small { display: block; margin-top: 4px; font-size: 11px; color: #ddd; }
.nx-ep:hover { transform: scale(1.07); z-index: 5; box-shadow: 0 14px 40px rgba(0,0,0,.8); }
.nx-ep.e1 { background: linear-gradient(135deg, #7e22ce, #2a0a45); }
.nx-ep.e2 { background: linear-gradient(135deg, #e50914, #4a0508); }
.nx-ep.e3 { background: linear-gradient(135deg, #2563eb, #0b1f55); }
.nx-ep.e4 { background: linear-gradient(135deg, #f59e0b, #6b2c00); }
.nx-maturity { display: none; }

/* ---------- Process = colourful episode posters ---------- */
.process-step:nth-child(2) .step-card { background: linear-gradient(135deg, #6b21a8, #1b0b2e); }
.process-step:nth-child(3) .step-card { background: linear-gradient(135deg, #b91c1c, #2a0507); }
.process-step:nth-child(4) .step-card { background: linear-gradient(135deg, #1d4ed8, #07163d); }
.process-step:nth-child(5) .step-card { background: linear-gradient(135deg, #d97706, #3a1a00); }
.step-card .step-desc { color: #e0e0e0; font-size: 12px; }

/* ---------- Skill Universe (JS adds the sidebar + data-tab) ---------- */
.skills-wrapper[data-tab] { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; margin: 0 var(--nx-pad); }
.nx-uni-nav { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 4px; border-left: 2px solid #333; }
.nx-uni-nav button {
  background: none; border: 0; text-align: left; color: #808080; padding: 12px 18px; margin-left: -2px;
  font-size: 26px; border-left: 3px solid transparent; transition: color .2s, background .2s;
}
.nx-uni-nav button:hover { color: #fff; }
.nx-uni-nav button.active { color: #fff; border-left-color: #e50914; background: linear-gradient(90deg, rgba(229,9,20,.28), transparent); }
.skills-wrapper[data-tab] .skills-left, .skills-wrapper[data-tab] .skills-right { grid-column: 2; grid-row: 1; min-width: 0; }
.skills-wrapper[data-tab="0"] .skills-right { display: none; }
.skills-wrapper[data-tab="1"] .skills-left, .skills-wrapper[data-tab="2"] .skills-left { display: none; }
.skills-wrapper[data-tab="1"] .tech-group:nth-child(2) { display: none; }
.skills-wrapper[data-tab="2"] .tech-group:nth-child(1) { display: none; }
.skills-wrapper[data-tab] .tech-group-label { display: none; }
.skills-wrapper[data-tab] .tech-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.skills-wrapper[data-tab] .tech-item { padding: 24px 8px; background: #1f1f1f; }
.skills-wrapper[data-tab] .skill-bar-row { animation: nxFade .5s ease both; }

/* ---------- Ending credits: TO BE CONTINUED… ---------- */
.cta-inner { background: radial-gradient(ellipse at 50% 100%, rgba(229,9,20,.45), transparent 62%), #000; padding: 110px 30px 90px; }
.cta-title { font-size: clamp(60px, 12vw, 170px); line-height: .92; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; }
.nx-cta-lead { font-size: clamp(14px, 1.6vw, 20px); color: #b3b3b3; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 34px; }
.cta-label { color: #808080; }
.cta-sub { color: #b3b3b3; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .skills-wrapper[data-tab] { grid-template-columns: 1fr; gap: 18px; }
  .nx-uni-nav { grid-column: 1; flex-direction: row; border-left: 0; overflow-x: auto; scrollbar-width: none; }
  .nx-uni-nav button { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; margin: 0; font-size: 22px; padding: 8px 14px; }
  .nx-uni-nav button.active { border-bottom-color: #e50914; background: none; }
  .skills-wrapper[data-tab] .skills-left, .skills-wrapper[data-tab] .skills-right { grid-column: 1; grid-row: 2; }
}
@media (max-width: 768px) {
  #hero.nx-billboard { padding-top: 90px; }
  .nx-photo { width: 92vw; right: -18%; opacity: .45; top: 60px; bottom: auto; }
  .nx-ep { flex-basis: 210px; }
  .nx-profile { width: 40%; }
  #hero.nx-billboard .hero-stats { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-splash { display: none; }
  .nx-who { opacity: 1 !important; }
}

/* ---- hero headline: never wrap mid-line, stay on one screen even with a fallback font ---- */
.nx-title { font-size: clamp(52px, 8.5vw, 118px); }
.nx-title span { white-space: nowrap; }
.nx-hero-inner { max-width: 760px; }
#hero.nx-billboard { padding-top: 96px; }
@media (max-height: 760px) and (min-width: 769px) { .nx-title { font-size: clamp(48px, 7vw, 92px); } .nx-meta, .nx-desc { margin-bottom: 14px; } }


/* ==========================================================================
   v3 — cinematic polish: ambience, motion, Top-10 numbers, tilt, reveals
   ========================================================================== */
html { scrollbar-color: #3a3a3a #141414; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #e50914; }

/* scroll progress + profile avatar */
#nxProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1100; pointer-events: none;
  background: linear-gradient(90deg, #e50914, #ff6a3d); box-shadow: 0 0 14px rgba(229,9,20,.9); }
nav.scrolled { box-shadow: 0 6px 30px rgba(0,0,0,.6); }
.nx-nav-avatar { width: 34px; height: 34px; margin-left: 12px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e50914, #5a0a10); color: #fff; text-decoration: none; font-family: var(--font-bebas); letter-spacing: 1px;
  transition: transform .2s, box-shadow .2s; }
.nx-nav-avatar:hover { transform: scale(1.1); box-shadow: 0 0 0 2px #fff; }

/* ---------- Hero ambience: drifting light, film grain, vignette, cursor spotlight ---------- */
.nx-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nx-aurora i { position: absolute; border-radius: 50%; filter: blur(95px); animation: nxDrift 18s ease-in-out infinite alternate; }
.nx-aurora i:nth-child(1) { width: 46vw; height: 46vw; right: -8%; top: -14%; background: #e50914; opacity: .5; }
.nx-aurora i:nth-child(2) { width: 34vw; height: 34vw; right: 24%; bottom: -20%; background: #7e22ce; opacity: .32; animation-duration: 23s; }
.nx-aurora i:nth-child(3) { width: 28vw; height: 28vw; left: -9%; bottom: 6%; background: #2563eb; opacity: .2; animation-duration: 28s; }
@keyframes nxDrift { to { transform: translate(-7vw, 6vh) scale(1.18); } }
.nx-grain { position: absolute; inset: -60%; z-index: 2; pointer-events: none; opacity: .09; animation: nxGrain .9s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes nxGrain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-5%,-2%)} 80%{transform:translate(4%,4%)} 100%{transform:translate(0,0)} }
#hero.nx-billboard::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 38%), rgba(255,255,255,.08), transparent 62%);
  box-shadow: inset 0 0 220px rgba(0,0,0,.75); }
.nx-photo, .nx-hero-inner, .nx-continue { z-index: 3; }

/* hero entrance (starts when the intro overlay is dismissed) */
html:not(.nx-intro) .nx-tag, html:not(.nx-intro) .nx-title span, html:not(.nx-intro) .nx-meta,
html:not(.nx-intro) .nx-desc, html:not(.nx-intro) .nx-hero-inner .hero-cta,
html:not(.nx-intro) .nx-hero-inner .hero-stats, html:not(.nx-intro) .nx-continue {
  animation: nxRise .9s cubic-bezier(.2,.7,.2,1) both;
}
html:not(.nx-intro) .nx-tag { animation-delay: .05s; }
html:not(.nx-intro) .nx-title span:nth-child(1) { animation-delay: .15s; }
html:not(.nx-intro) .nx-title span:nth-child(2) { animation-delay: .3s; }
html:not(.nx-intro) .nx-title span:nth-child(3) { animation-delay: .45s; }
html:not(.nx-intro) .nx-meta { animation-delay: .6s; }
html:not(.nx-intro) .nx-desc { animation-delay: .72s; }
html:not(.nx-intro) .nx-hero-inner .hero-cta { animation-delay: .85s; }
html:not(.nx-intro) .nx-hero-inner .hero-stats { animation-delay: .98s; }
html:not(.nx-intro) .nx-continue { animation-delay: 1.1s; }
html:not(.nx-intro) .nx-photo { animation: nxPhoto 1.6s cubic-bezier(.2,.7,.2,1) .2s both; }
@keyframes nxRise { from { opacity: 0; transform: translateY(46px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nxPhoto { from { opacity: 0; transform: scale(1.08) translateX(40px); } to { opacity: 1; transform: none; } }
.nx-new { margin-left: 10px; padding: 3px 9px; border-radius: 3px; background: #e50914; color: #fff; font-size: 11px; letter-spacing: 2px; font-weight: 800; animation: nxBlink 2.4s ease-in-out infinite; }
@keyframes nxBlink { 50% { box-shadow: 0 0 16px rgba(229,9,20,.9); } }
.nx-hero-inner .btn-primary { animation: nxPulse 2.8s ease-in-out 2s infinite; }
@keyframes nxPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }

/* ---------- Row titles with red marker ---------- */
.section-inner .page-title::before, .work-section-title::before {
  content: ''; display: inline-block; width: 5px; height: .78em; margin-right: 12px; vertical-align: -.04em;
  background: #e50914; border-radius: 2px; box-shadow: 0 0 14px rgba(229,9,20,.7);
}

/* ---------- Services: giant outlined "Top 10" numbers ---------- */
.service-card { overflow: hidden; border: 1px solid rgba(255,255,255,.06); }
.service-card::after {
  content: attr(data-num); position: absolute; top: auto; right: 2px; bottom: -22px;
  font-family: var(--font-bebas); font-size: 150px; line-height: 1; font-weight: 400; letter-spacing: 0;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.13); opacity: 1; pointer-events: none; transition: -webkit-text-stroke-color .3s, transform .4s;
}
.service-card:hover::after { -webkit-text-stroke-color: rgba(229,9,20,.75); transform: translateY(-8px); }
.service-card .service-icon-wrap { width: 58px; height: 58px; box-shadow: 0 0 34px rgba(229,9,20,.5); }
.service-icon { font-size: 28px; }
.service-card:hover { box-shadow: 0 18px 50px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.18); }

/* ---------- Glow bars, glossy cards ---------- */
.skill-track, .skill-bar { height: 6px; border-radius: 6px; overflow: visible; }
.skill-fill-bar, .skill-fill { border-radius: 6px; background: linear-gradient(90deg, #8f050d, #e50914, #ff5a3d); box-shadow: 0 0 14px rgba(229,9,20,.65); }
.step-card, .nx-ep, .website-card, .repo-card { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.step-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 40%); }
.step-card { position: relative; }

/* ---------- Scroll reveal ---------- */
.nx-reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.nx-reveal.in { opacity: 1; transform: none; }

/* touch devices: no tilt, no hover-scale surprises */
@media (hover: none) { .nx-ep:hover, .service-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nx-reveal { opacity: 1; transform: none; } .nx-aurora i, .nx-grain { animation: none !important; } }
@media (max-width: 768px) {
  .service-card::after { font-size: 110px; }
  .nx-aurora i { filter: blur(60px); }
}

/* keep service text above the giant outlined number */
.service-card > * { position: relative; z-index: 1; }
.service-card::after { z-index: 0; }


/* ==========================================================================
   v4 — hero right-side showcase (pure CSS, no image files needed)
   ========================================================================== */
.nx-showcase {
  position: absolute; z-index: 3; right: 4%; top: 104px;
  width: min(44vw, 640px); height: min(58vh, 480px); pointer-events: none;
}
html:not(.nx-intro) .nx-showcase { animation: nxPhoto 1.4s cubic-bezier(.2,.7,.2,1) .35s both; }
.nx-sc-card { position: absolute; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.65); animation: scFloat 7s ease-in-out infinite; }
@keyframes scFloat { 50% { translate: 0 -14px; } }

/* main browser card */
.sc-main { left: 0; top: 8%; width: 76%; z-index: 2; background: #181818;
  transform: perspective(1300px) rotateY(-9deg) rotateX(3deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 90px rgba(229,9,20,.35); }
.sc-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #101010; }
.sc-bar span { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.sc-bar span:nth-child(2) { background: #febc2e; } .sc-bar span:nth-child(3) { background: #28c840; }
.sc-bar em { flex: 1; margin-left: 8px; padding: 3px 12px; border-radius: 6px; background: rgba(255,255,255,.07); color: #9a9a9a; font: normal 11px/1.4 var(--font-mono); text-align: center; }
.sc-screen { position: relative; padding: 18px 18px 16px; height: 215px; overflow: hidden;
  background: radial-gradient(ellipse at 80% 0%, rgba(229,9,20,.45), transparent 60%), linear-gradient(160deg, #1c1c1c, #0c0c0c); }
.sc-nav { height: 8px; width: 55%; border-radius: 4px; background: #333; margin-bottom: 18px; }
.sc-h1 { height: 20px; width: 78%; border-radius: 3px; background: #fff; margin-bottom: 8px; }
.sc-h2 { height: 20px; width: 52%; border-radius: 3px; background: #e50914; margin-bottom: 16px; }
.sc-btns { display: flex; gap: 8px; margin-bottom: 16px; }
.sc-btns b { height: 20px; width: 70px; border-radius: 3px; background: #fff; }
.sc-btns b + b { background: #555; width: 58px; }
.sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-tiles i { height: 52px; border-radius: 5px; background: linear-gradient(135deg, #7e22ce, #2a0a45); }
.sc-tiles i:nth-child(2) { background: linear-gradient(135deg, #e50914, #4a0508); }
.sc-tiles i:nth-child(3) { background: linear-gradient(135deg, #2563eb, #0b1f55); }
.sc-play { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: #e50914; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; padding-left: 2px; animation: nxPulseRed 2.4s ease-in-out infinite; }
@keyframes nxPulseRed { 50% { box-shadow: 0 0 0 10px rgba(229,9,20,0); } 0% { box-shadow: 0 0 0 0 rgba(229,9,20,.6); } }
.sc-meta { padding: 12px 16px 14px; background: #141414; }
.sc-meta-top { display: flex; justify-content: space-between; align-items: baseline; }
.sc-meta b { font: 400 22px/1 var(--font-bebas); letter-spacing: 1px; color: #fff; text-transform: uppercase; }
.sc-meta small { display: block; color: #9a9a9a; font-size: 11px; margin-top: 3px; }
.sc-progress { height: 4px; margin-top: 10px; border-radius: 4px; background: #333; overflow: hidden; }
.sc-progress i { display: block; height: 100%; width: 0; background: #e50914; box-shadow: 0 0 10px #e50914; animation: scProg 6s ease-in-out 1.6s infinite alternate; }
@keyframes scProg { to { width: 78%; } }

/* poster cards behind */
.sc-back1, .sc-back2 { padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.sc-back1 { right: 0; top: 0; width: 38%; aspect-ratio: 3/4; z-index: 1; rotate: 7deg;
  background: linear-gradient(150deg, #a21caf, #2a0a45 80%); animation-delay: -2s; }
.sc-back2 { right: 9%; bottom: 0; width: 40%; aspect-ratio: 4/3; z-index: 1; rotate: -5deg;
  background: linear-gradient(150deg, #f59e0b, #7c2d12 80%); animation-delay: -4s; }
.sc-tag { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.75); font-weight: 700; }
.sc-title { font: 400 26px/.95 var(--font-bebas); letter-spacing: 1px; color: #fff; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sc-shapes { position: relative; flex: 1; }
.sc-shapes i { position: absolute; display: block; }
.sc-shapes i:nth-child(1) { width: 54px; height: 54px; border-radius: 50%; background: #fff; opacity: .92; left: 8%; top: 22%; }
.sc-shapes i:nth-child(2) { width: 0; height: 0; border-left: 34px solid transparent; border-right: 34px solid transparent; border-bottom: 58px solid #e50914; left: 38%; top: 36%; }
.sc-shapes i:nth-child(3) { width: 40px; height: 40px; border-radius: 6px; border: 4px solid #fff; left: 20%; top: 62%; transform: rotate(18deg); }
.sc-bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; padding: 8px 2px 10px; }
.sc-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,.55)); }
.sc-bars i:last-child { background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.7); }

/* floating chips */
.nx-chip { position: absolute; z-index: 4; padding: 8px 14px; border-radius: 6px; font-weight: 700; font-size: 13px; color: #fff;
  background: rgba(20,20,20,.88); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: scFloat 5s ease-in-out infinite; }
.nx-chip.c1 { left: -4%; top: 2%; color: #f5c518; animation-delay: -1s; }
.nx-chip.c2 { right: 2%; top: 54%; background: #e50914; border-color: transparent; animation-delay: -2.5s; }
.nx-chip.c3 { left: 6%; bottom: 3%; animation-delay: -3.5s; }

@media (max-width: 1100px) { .nx-showcase { width: 40vw; right: 2%; } .sc-title { font-size: 20px; } }
@media (max-width: 900px) { .nx-showcase { display: none; } }
@media (prefers-reduced-motion: reduce) { .nx-sc-card, .nx-chip, .sc-progress i, .sc-play { animation: none !important; } .sc-progress i { width: 78%; } }

/* style.css has "#hero > * { position: relative; z-index: 1 }" — re-assert absolute layers with higher specificity */
#hero.nx-billboard > .nx-aurora   { position: absolute; z-index: 0; }
#hero.nx-billboard > .nx-grain    { position: absolute; z-index: 2; }
#hero.nx-billboard > .nx-showcase { position: absolute; z-index: 3; }
#hero.nx-billboard > .nx-maturity { position: absolute; }

/* let the showcase grow on very wide screens */
.nx-showcase { width: min(46vw, 820px); height: min(62vh, 560px); }
@media (max-width: 1100px) { .nx-showcase { width: 40vw; height: min(58vh, 480px); } }
@media (max-width: 900px) { .nx-showcase { display: none; } }


/* ==========================================================================
   About page: real photo in the frame (initials stay as fallback behind it)
   ========================================================================== */
.about-img-frame { position: relative; border-radius: 8px; overflow: hidden;
  box-shadow: 0 25px 70px rgba(0,0,0,.7), 0 0 80px rgba(229,9,20,.28); }
.about-img-frame .about-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  z-index: 1; filter: contrast(1.04) saturate(1.05); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.about-img-wrap:hover .about-photo { transform: scale(1.05); }
.about-img-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(20,20,20,.85) 0%, rgba(20,20,20,0) 38%), linear-gradient(135deg, rgba(229,9,20,.18), transparent 45%); }
.about-img-border { display: block; border: 2px solid rgba(229,9,20,.55); border-radius: 8px; top: 18px; left: 18px; right: -18px; bottom: -18px; }
.exp-badge { z-index: 4; box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 30px rgba(229,9,20,.45); }
.exp-badge .num { font-family: var(--font-bebas); font-weight: 400; font-size: 44px; letter-spacing: 1px; }


/* ==========================================================================
   v5 — motion layer: embers, typing line, ticker, cursor glow, magnetic &
   ripple buttons, staggered cards, service pop-up, page transitions, to-top
   ========================================================================== */
#hero.nx-billboard > .nx-embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* typing "Now playing" line */
.nx-typed { display: flex; align-items: center; gap: 10px; margin: -2px 0 16px; font-size: 13px; letter-spacing: 3px; font-weight: 700; color: #9a9a9a; text-transform: uppercase; min-height: 20px; }
.nx-typed b { color: #fff; font-weight: 800; letter-spacing: 2px; }
.nx-typed i { width: 2px; height: 1.2em; background: #e50914; animation: nxCaret .8s steps(1) infinite; margin-left: -6px; }
.nx-live { width: 9px; height: 9px; border-radius: 50%; background: #e50914; box-shadow: 0 0 0 0 rgba(229,9,20,.7); animation: nxLive 1.8s ease-out infinite; flex: none; }
@keyframes nxCaret { 50% { opacity: 0; } }
@keyframes nxLive { 70% { box-shadow: 0 0 0 10px rgba(229,9,20,0); } 100% { box-shadow: 0 0 0 0 rgba(229,9,20,0); } }
html:not(.nx-intro) .nx-typed { animation: nxRise .9s cubic-bezier(.2,.7,.2,1) .55s both; }

/* shimmering red headline word */
html:not(.nx-intro) .nx-title span.red {
  background: linear-gradient(90deg, #e50914 0%, #ff6a3d 35%, #e50914 70%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: nxRise .9s cubic-bezier(.2,.7,.2,1) .3s both, nxShimmer 5s linear 1.4s infinite;
}
@keyframes nxShimmer { to { background-position: -220% 0; } }

/* skills ticker */
.nx-marquee { position: relative; z-index: 4; overflow: hidden; padding: 16px 0; border-block: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(90deg, #0b0b0b, #170608 50%, #0b0b0b);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nx-marquee-track { display: flex; width: max-content; animation: nxTicker 38s linear infinite; }
.nx-marquee:hover .nx-marquee-track { animation-play-state: paused; }
.nx-marquee span { font: 400 clamp(22px, 2.6vw, 34px)/1 var(--font-bebas); letter-spacing: 3px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.45); padding: 0 22px; white-space: nowrap; transition: color .3s, -webkit-text-stroke-color .3s; }
.nx-marquee span::after { content: '✦'; margin-left: 44px; color: #e50914; -webkit-text-stroke: 0; font-size: .6em; vertical-align: .15em; }
.nx-marquee span:hover { color: #fff; -webkit-text-stroke-color: #fff; }
@keyframes nxTicker { to { transform: translateX(-50%); } }

/* cursor glow */
.nx-cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; z-index: 9000; pointer-events: none;
  border: 1.5px solid rgba(229,9,20,.85); background: rgba(229,9,20,.08); mix-blend-mode: screen; opacity: 0;
  transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s; }
.nx-cursor.on { opacity: 1; }
.nx-cursor.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(229,9,20,.18); }
.nx-cursor.down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.nx-cursor-dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; z-index: 9001; pointer-events: none; opacity: 0; transition: opacity .3s; }
.nx-cursor-dot.on { opacity: 1; }
@media (hover: none) { .nx-cursor, .nx-cursor-dot { display: none; } }

/* magnetic + ripple buttons */
.btn-primary, .btn-outline, .btn-submit, .btn-whatsapp, .nx-nav-avatar { position: relative; overflow: hidden; will-change: transform; }
.nx-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0); animation: nxRipple .65s ease-out forwards; pointer-events: none; }
.btn-outline .nx-ripple, .btn-submit .nx-ripple { background: rgba(255,255,255,.35); }
@keyframes nxRipple { to { transform: scale(4); opacity: 0; } }
.btn-primary::after, .btn-submit::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: nxSheen 4.5s ease-in-out 2.4s infinite; pointer-events: none; }
@keyframes nxSheen { 0% { left: -80%; } 22%, 100% { left: 140%; } }

/* staggered card entrance once a row scrolls in */
.nx-row.in .services-grid > *, .nx-row.in .process-timeline > *, .nx-row.in .websites-grid > *, .nx-row.in .repo-grid > *, .nx-row.in .testimonials-grid > * {
  animation: nxCardIn .8s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes nxCardIn { from { opacity: 0; transform: translateX(70px) scale(.92); filter: blur(6px); } }
.tech-grid .tech-item { transition: transform .25s, background .25s; }

/* cards: subtle glow follows cursor inside the card */
.service-card, .nx-ep, .website-card, .repo-card { --gx: 50%; --gy: 0%; }
.service-card::before, .nx-ep::before { background-image: radial-gradient(260px circle at var(--gx) var(--gy), rgba(255,255,255,.14), transparent 65%); }
.service-card { cursor: pointer; }
.service-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.service-more { position: relative; z-index: 1; margin-top: 14px; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; transform: translateY(8px); transition: .3s; letter-spacing: 1px; }
.service-card:hover .service-more, .service-card:focus-visible .service-more { opacity: 1; transform: none; }

/* service pop-up ("movie page") */
.nx-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.78); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .35s; }
.nx-modal.open { opacity: 1; pointer-events: auto; }
.nx-modal-box { position: relative; width: min(860px, 100%); max-height: 90vh; overflow: auto; border-radius: 10px; background: #181818;
  box-shadow: 0 40px 120px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); transform: translateY(40px) scale(.94); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.nx-modal.open .nx-modal-box { transform: none; }
.nx-modal-hero { position: relative; padding: 64px 40px 30px; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(ellipse at 85% 0%, rgba(229,9,20,.7), transparent 60%), linear-gradient(160deg, #3b0a10, #181818 85%); }
.nx-modal-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(to top, #181818, transparent); }
.nx-modal-ico { position: absolute; right: 36px; top: 30px; font-size: 76px; filter: drop-shadow(0 0 30px rgba(229,9,20,.8)); animation: scFloat 5s ease-in-out infinite; }
.nx-modal-tag { position: relative; z-index: 1; font-size: 12px; letter-spacing: 4px; color: #b3b3b3; font-weight: 700; margin-bottom: 8px; }
.nx-modal-title { position: relative; z-index: 1; font: 400 clamp(40px, 6vw, 70px)/.95 var(--font-bebas); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; color: #fff; }
.nx-modal-cta { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.nx-modal-body { padding: 8px 40px 38px; }
.nx-modal-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; font-size: 14px; }
.nx-modal-desc { font-size: 17px; line-height: 1.6; color: #e5e5e5; max-width: 640px; margin-bottom: 14px; }
.nx-modal-tagline { color: #46d369; font-weight: 700; }
.nx-modal-close { position: absolute; z-index: 5; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #181818; color: #fff; font-size: 18px; transition: background .2s, transform .3s; }
.nx-modal-close:hover { background: #e50914; transform: rotate(90deg); }
@media (max-width: 600px) { .nx-modal-hero { padding: 60px 22px 24px; } .nx-modal-body { padding: 6px 22px 28px; } .nx-modal-ico { font-size: 52px; right: 20px; } }

/* page transition */
.nx-wipe { position: fixed; inset: 0; z-index: 8000; pointer-events: none; background: #e50914; transform: translateY(100%); }
.nx-wipe::after { content: ''; position: absolute; inset: 0; background: #0b0b0b; transform: translateY(8%); }
.nx-wipe.cover { animation: nxWipeIn .42s cubic-bezier(.7,0,.3,1) forwards; pointer-events: auto; }
.nx-wipe.reveal { transform: translateY(0); animation: nxWipeOut .6s cubic-bezier(.7,0,.3,1) .05s forwards; }
@keyframes nxWipeIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes nxWipeOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* back-to-top with progress ring */
.nx-top { position: fixed; right: 22px; bottom: 90px; z-index: 900; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(20,20,20,.92);
  color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.nx-top.show { opacity: 1; transform: none; pointer-events: auto; }
.nx-top:hover { background: #e50914; }
.nx-top svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.nx-top circle { fill: none; stroke-width: 3; }
.nx-top .bg { stroke: rgba(255,255,255,.14); } .nx-top .fg { stroke: #e50914; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; }

/* heading underline draw + hover lift on tags */
.section-inner .page-title, .work-section-title { position: relative; }
.about-tag { transition: transform .2s, background .2s, color .2s; }
.about-tag:hover { transform: translateY(-3px); }
.faq-item { transition: background .25s, transform .25s; }
.faq-item[open] { background: #3a3a3a !important; }
.faq-item:hover { transform: translateX(6px); }
.tech-item:hover img { animation: nxWiggle .5s ease; }
@keyframes nxWiggle { 25% { transform: rotate(-10deg) scale(1.15); } 75% { transform: rotate(8deg) scale(1.15); } }
.fsocial, .social-btn { transition: transform .25s, background .25s; }
.fsocial:hover, .social-btn:hover { transform: translateY(-5px) rotate(-6deg) !important; }
.footer-logo { transition: letter-spacing .4s, text-shadow .4s; }
.footer-logo:hover { letter-spacing: 6px; text-shadow: 0 0 24px rgba(229,9,20,.9); }

@media (prefers-reduced-motion: reduce) {
  .nx-marquee-track, .nx-live, .nx-typed i, .btn-primary::after, .btn-submit::after { animation: none !important; }
  .nx-wipe { display: none; }
  .nx-embers { display: none; }
}
@media (max-width: 768px) { .nx-top { right: 14px; bottom: 80px; } .nx-typed { font-size: 11px; letter-spacing: 2px; } }

/* modal: keep the title clear of the floating icon */
.nx-modal-title { padding-right: clamp(70px, 14vw, 130px); }
.nx-modal-hero { overflow: hidden; }


/* ==========================================================================
   v6 — NAVBAR rebuild (nav.nx-nav) : sliding indicator, search palette,
   profile dropdown, mobile drawer, hide-on-scroll
   ========================================================================== */
html { scroll-padding-top: 84px; }

nav.nx-nav {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; transform: none; z-index: 1000;
  display: flex; align-items: center; gap: 34px; padding: 16px var(--nx-pad);
  background: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,0));
  border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .35s, padding .35s, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
nav.nx-nav.scrolled {
  top: 0; padding: 10px var(--nx-pad); background: rgba(14,14,14,.88);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 30px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.07);
}
nav.nx-nav.nx-hide { transform: translateY(-115%); }
.nx-logo { flex: none; font-size: 28px; line-height: 1; }

/* links + sliding red indicator */
.nx-links { position: relative; display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nx-links li { margin: 0; padding: 0; list-style: none; }
.nx-links a {
  display: block; padding: 10px 16px; color: #d8d8d8; text-decoration: none;
  font: 500 14.5px/1 'Inter', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .2px; border-radius: 4px; transition: color .2s;
}
.nx-links a:hover, .nx-links a:focus-visible { color: #fff; }
.nx-links a.active { color: #fff; font-weight: 700; }
.nx-links a:focus-visible, .nx-search:focus-visible, .nx-me:focus-visible, .nx-burger:focus-visible, .nx-hire:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nx-ind {
  position: absolute !important; left: 0; bottom: -3px; height: 3px; width: var(--iw, 0); border-radius: 3px; background: #e50914;
  box-shadow: 0 0 14px rgba(229,9,20,.95); transform: translateX(var(--ix, 0)); opacity: 0; pointer-events: none;
}
.nx-ind.ready { transition: transform .38s cubic-bezier(.3,.85,.25,1), width .38s cubic-bezier(.3,.85,.25,1), opacity .25s; }

/* right-hand cluster */
.nx-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nx-search {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; color: #e5e5e5;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  font: 500 13.5px/1 'Inter', Arial, sans-serif; transition: background .2s, border-color .2s, color .2s, width .3s;
}
.nx-search:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.nx-search kbd, .nx-pal kbd {
  display: inline-block; min-width: 20px; padding: 3px 6px; border-radius: 4px; text-align: center;
  font: 600 11px/1 'Inter', monospace; color: #b3b3b3; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
}
.nx-hire {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 4px;
  background: #e50914; color: #fff; text-decoration: none; font: 700 14px/1 'Inter', Arial, sans-serif; transition: background .2s, box-shadow .3s;
}
.nx-hire:hover { background: #f6121d; box-shadow: 0 0 24px rgba(229,9,20,.7); color: #fff; }
.nx-hire::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation: nxSheen 5s ease-in-out 1.5s infinite; pointer-events: none; }

/* profile dropdown */
.nx-user { position: relative; }
.nx-me { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0; border: 0; background: none; color: #fff; }
.nx-me span { width: 36px; height: 36px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e50914, #5a0a10); font: 400 18px/1 var(--font-bebas); letter-spacing: 1px; transition: box-shadow .2s, transform .2s; }
.nx-me:hover span, .nx-me[aria-expanded="true"] span { box-shadow: 0 0 0 2px #fff; }
.nx-me i { width: 0; height: 0; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; transition: transform .25s; }
.nx-me[aria-expanded="true"] i { transform: rotate(180deg); }
.nx-dd {
  position: absolute; right: 0; top: calc(100% + 16px); width: 270px; padding: 8px 0; border-radius: 8px;
  background: rgba(16,16,16,.97); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right; visibility: hidden; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility .2s;
}
.nx-dd.open { opacity: 1; transform: none; visibility: visible; }
.nx-dd::before { content: ''; position: absolute; right: 14px; top: -6px; width: 10px; height: 10px; background: #101010; border-left: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); transform: rotate(45deg); }
.nx-dd-head { padding: 10px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 6px; }
.nx-dd-head b { display: block; font-size: 15px; color: #fff; }
.nx-dd-head small { color: #8a8a8a; font-size: 12px; }
.nx-dd a, .nx-dd button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 18px; border: 0; background: none; text-align: left; text-decoration: none;
  color: #d8d8d8; font: 500 14px/1.2 'Inter', Arial, sans-serif; transition: background .15s, color .15s; }
.nx-dd a:hover, .nx-dd button:hover, .nx-dd a:focus-visible, .nx-dd button:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: 0; }
.nx-dd em { font-style: normal; width: 20px; text-align: center; }

/* burger */
.nx-burger { display: none; width: 42px; height: 42px; padding: 0; border: 0; background: rgba(255,255,255,.07); border-radius: 6px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nx-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s, width .3s; }
.nx-burger span:nth-child(2) { width: 15px; align-self: flex-end; margin-right: 10px; }
.nx-burger:hover span:nth-child(2) { width: 22px; margin-right: 10px; }

/* mobile drawer */
.nx-drawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; pointer-events: none; transition: visibility 0s .45s; }
.nx-drawer.open { visibility: visible; pointer-events: auto; transition: none; }
.nx-drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); opacity: 0; transition: opacity .4s; }
.nx-drawer.open .nx-drawer-bg { opacity: 1; }
.nx-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 400px); overflow-y: auto; display: flex; flex-direction: column; padding: 86px 30px 26px;
  background: radial-gradient(ellipse at 100% 0%, rgba(229,9,20,.35), transparent 55%), #121212; border-left: 1px solid rgba(255,255,255,.1);
  transform: translateX(100%); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.nx-drawer.open .nx-drawer-panel { transform: none; }
.nx-drawer-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 17px; transition: background .2s, transform .3s; }
.nx-drawer-close:hover { background: #e50914; transform: rotate(90deg); }
.nx-dl { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); text-decoration: none; color: #fff;
  font: 400 clamp(40px, 11vw, 54px)/1 var(--font-bebas); letter-spacing: 2px; opacity: 0; transform: translateX(34px); }
.nx-dl small { font: 600 12px/1 'Inter', Arial, sans-serif; letter-spacing: 1px; color: #e50914; width: 22px; }
.nx-dl.active { color: #e50914; }
.nx-dl:hover { color: #e50914; padding-left: 6px; }
.nx-dl { transition: color .2s, padding .25s, opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.nx-drawer.open .nx-dl, .nx-drawer.open .nx-drawer-actions, .nx-drawer.open .nx-drawer-social { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .07s); }
.nx-drawer-actions, .nx-drawer-social { opacity: 0; transform: translateX(34px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.nx-drawer-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.nx-act { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: 6px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font: 600 13px/1 'Inter', Arial, sans-serif; transition: background .2s; }
.nx-act:hover { background: rgba(255,255,255,.18); color: #fff; }
.nx-act.wa { background: #1faa59; } .nx-act.wa:hover { background: #25c667; }
.nx-drawer-social { display: flex; gap: 10px; margin-top: 18px; }
.nx-drawer-social a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.07); color: #fff; text-decoration: none; font-weight: 700; transition: background .2s, transform .2s; }
.nx-drawer-social a:hover { background: #e50914; transform: translateY(-3px); }
.nx-drawer-foot { margin-top: auto; padding-top: 28px; color: #6f6f6f; font-size: 12px; }

/* search palette */
.nx-pal { position: fixed; inset: 0; z-index: 4500; display: flex; align-items: flex-start; justify-content: center; padding: 11vh 16px 16px; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.nx-pal.open { opacity: 1; visibility: visible; }
.nx-pal-box { width: min(660px, 100%); border-radius: 12px; overflow: hidden; background: #181818; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 120px rgba(0,0,0,.9), 0 0 60px rgba(229,9,20,.18); transform: translateY(-18px) scale(.97); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nx-pal.open .nx-pal-box { transform: none; }
.nx-pal-in { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; color: #9a9a9a; border-bottom: 1px solid rgba(255,255,255,.1); }
.nx-pal-in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: #fff; font: 500 17px/1 'Inter', Arial, sans-serif; }
.nx-pal-in input::placeholder { color: #707070; }
.nx-pal-list { max-height: min(54vh, 430px); overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.nx-pal-g { padding: 12px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #6f6f6f; }
.nx-pal-i { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 8px; color: #e5e5e5; text-decoration: none; border-left: 3px solid transparent; cursor: pointer; }
.nx-pal-i.on { background: rgba(229,9,20,.16); border-left-color: #e50914; color: #fff; }
.nx-pal-i .ic { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.07); font-size: 17px; }
.nx-pal-i.on .ic { background: #e50914; }
.nx-pal-i .tx { flex: 1; min-width: 0; }
.nx-pal-i b { display: block; font-size: 15px; font-weight: 600; }
.nx-pal-i small { display: block; color: #8a8a8a; font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-pal-i .tag { font-size: 11px; color: #777; letter-spacing: 1px; text-transform: uppercase; flex: none; }
.nx-pal-i .go { opacity: 0; color: #fff; transition: opacity .15s; } .nx-pal-i.on .go { opacity: 1; }
.nx-pal-empty { padding: 36px 16px; text-align: center; color: #8a8a8a; font-size: 14px; }
.nx-pal-empty b { display: block; font-size: 30px; margin-bottom: 8px; }
.nx-pal-foot { display: flex; gap: 20px; padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.1); color: #7a7a7a; font-size: 12px; }
.nx-pal-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* toast */
.nx-toast { position: fixed; left: 50%; bottom: 34px; z-index: 9500; padding: 12px 22px; border-radius: 8px; background: #fff; color: #000; font: 600 14px/1 'Inter', Arial, sans-serif;
  box-shadow: 0 14px 40px rgba(0,0,0,.6); transform: translate(-50%, 30px); opacity: 0; transition: .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.nx-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* responsive */
@media (max-width: 1100px) { .nx-search-label, .nx-search kbd { display: none; } .nx-search { width: 38px; padding: 0; justify-content: center; } nav.nx-nav { gap: 22px; } }
@media (max-width: 900px) {
  .nx-links, .nx-user { display: none; }
  .nx-burger { display: flex; }
  .nx-logo { font-size: 25px; }
}
@media (max-width: 480px) { .nx-hire { padding: 0 14px; font-size: 13px; } nav.nx-nav { padding-top: 12px; padding-bottom: 12px; } .nx-pal { padding-top: 7vh; } .nx-pal-foot span:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { nav.nx-nav, .nx-drawer-panel, .nx-dl, .nx-ind.ready { transition-duration: .01ms !important; } .nx-hire::after { animation: none; } }

/* focus-safe visibility transitions: visible immediately on open, hidden only after the fade on close */
.nx-pal { transition: opacity .25s, visibility 0s linear .25s; }
.nx-pal.open { transition: opacity .25s, visibility 0s; }
.nx-dd { transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s; }
.nx-dd.open { transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s; }

/* drawer quick-action buttons: single line */
.nx-act { white-space: nowrap; font-size: 12.5px; padding: 13px 4px; gap: 5px; }

/* ---- FIX: page-wipe must not leave a band over the navbar ---- */
.nx-wipe { display: none; }
.nx-wipe.cover, .nx-wipe.reveal { display: block; }
.nx-wipe::after { transform: none; top: -8%; height: 108%; }          /* trailing dark layer stays inside the wipe's own box */
.nx-wipe.cover  { animation: nxWipeIn .42s cubic-bezier(.7,0,.3,1) forwards; }
.nx-wipe.reveal { transform: translateY(0); animation: nxWipeOut .6s cubic-bezier(.7,0,.3,1) .05s forwards; }
@keyframes nxWipeOut { from { transform: translateY(0); } to { transform: translateY(-115%); } }

/* ---- FIX: social icons were default link-blue ---- */
.social-btn, .fsocial, .nx-drawer-social a { color: #e5e5e5 !important; text-decoration: none; }
.social-btn:hover, .fsocial:hover { color: #fff !important; }