*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg:  #080808; --bg2: #0d0d0d; --bg3: #121212; --bg4: #181818;
            --fg:  #ffffff; --fg2: #999999; --fg3: #555555;
            --ac:  #6366f1; --ac2: #818cf8;
            --bd:  rgba(255,255,255,0.06); --bd2: rgba(255,255,255,0.12);
            --r: 16px; --rsm: 8px; --rlg: 24px; --rxl: 32px;
        }

        html { scroll-behavior: smooth; }
        body { background: var(--bg); color: var(--fg); font-family: 'Inter', -apple-system, sans-serif; line-height: 1.6; overflow-x: hidden; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

        .it  { font-family: 'Playfair Display', Georgia, serif; font-style: italic; }
        .ac  { color: var(--ac2); }
        .ul  { text-decoration: underline; text-decoration-color: var(--ac); text-decoration-thickness: 2px; text-underline-offset: 6px; }

        /* ── BUTTONS ── */
        .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s, background-color .25s, border-color .25s, color .25s; cursor: pointer; border: none; font-family: inherit; white-space: nowrap; }
        .btn::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%); transform: skewX(-18deg); transition: left .6s cubic-bezier(.2,.7,.3,1); pointer-events: none; }
        .btn:hover::before { left: 120%; }
        .btn-p { background: linear-gradient(180deg, #7376f4 0%, #5b5ee9 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(99,102,241,.55); }
        .btn-p:hover { background: linear-gradient(180deg, #8386f7 0%, #6467ee 100%); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 4px rgba(0,0,0,.4), 0 14px 36px -8px rgba(99,102,241,.7); }
        .btn-p:active { transform: translateY(0); }
        .btn-g { background: rgba(255,255,255,.035); color: var(--fg); border: 1px solid rgba(255,255,255,.13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.3); }
        .btn-g::before { background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.1) 50%, transparent 100%); }
        .btn-g:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 28px -10px rgba(0,0,0,.7); }
        .btn-g:active { transform: translateY(0); }
        .btn-w { background: #fff; color: var(--ac); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(255,255,255,.35); }
        .btn-w:hover { background: #f4f4ff; transform: translateY(-2px); }
        .btn-lg { padding: 16px 34px; font-size: 15px; }
        .btn-arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
        .btn:hover .btn-arrow { transform: translateX(4px); }
        .btn-full { width: 100%; display: block; text-align: center; }

        /* ── NAV ── */
        .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: rgba(8,8,8,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--bd); }
        .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        .logo-img { width: 30px; height: 30px; filter: invert(1); border-radius: 4px; }
        .logo-name { font-size: 15px; font-weight: 700; color: var(--fg); letter-spacing: -0.3px; }
        .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 20px -12px rgba(0,0,0,.8); }
        .nav-links a { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; color: #d2d2d2; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.15px; line-height: 1; transition: color .2s, background-color .2s, box-shadow .25s; }
        .nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
        .nav-cta { padding: 10px 18px 10px 15px; font-size: 13.5px; font-weight: 700; gap: 8px; letter-spacing: -0.1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 1px rgba(129,140,248,.4), 0 0 0 5px rgba(99,102,241,.12), 0 8px 24px -8px rgba(99,102,241,.65); }
        .nav-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(129,140,248,.6), 0 0 0 7px rgba(99,102,241,.18), 0 14px 32px -8px rgba(99,102,241,.85); }
        .nav-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: navPulse 2.4s ease-out infinite; }
        @keyframes navPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
        @media (prefers-reduced-motion: reduce) { .nav-cta-dot { animation: none; } }

        /* ── HAMBURGER ── */
        .hamburger { display: none; background: none; border: 1px solid var(--bd2); border-radius: var(--rsm); width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; color: var(--fg); flex-shrink: 0; }
        .hamburger svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

        /* ── MOBILE NAV OVERLAY ── */
        .mnav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; padding: 0 28px; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
        .mnav.open { transform: translateX(0); }
        .mnav-top { display: flex; align-items: center; justify-content: space-between; height: 72px; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
        .mnav-close { background: none; border: 1px solid var(--bd2); border-radius: var(--rsm); width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--fg); font-size: 22px; line-height: 1; }
        .mnav-links { display: flex; flex-direction: column; flex: 1; justify-content: center; padding: 32px 0; }
        .mnav-links a { font-size: 38px; font-weight: 900; color: var(--fg); text-decoration: none; letter-spacing: -2px; line-height: 1; padding: 14px 0; border-bottom: 1px solid var(--bd); transition: color .2s; display: block; }
        .mnav-links a:first-child { border-top: 1px solid var(--bd); }
        .mnav-links a:hover { color: var(--ac2); }
        .mnav-bottom { padding-bottom: 40px; flex-shrink: 0; }

        /* ── HERO ── */
        .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; }
        .hero-bg { position: absolute; inset: -10%; background: radial-gradient(ellipse 55% 55% at 72% 28%, rgba(99,102,241,.13) 0%, transparent 70%), radial-gradient(ellipse 35% 40% at 15% 85%, rgba(139,92,246,.08) 0%, transparent 60%); animation: heroGlow 20s ease-in-out infinite alternate; will-change: transform, opacity; }
        @keyframes heroGlow { 0% { transform: translate3d(0,0,0) scale(1); opacity: .85; } 100% { transform: translate3d(-1.5%,1.5%,0) scale(1.06); opacity: 1; } }
        .hero-grid { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; position: relative; z-index: 1; }
        .hero-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.11); border-radius: 6px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 32px; }
        .tag-star { color: var(--ac2); font-size: 9px; line-height: 1; }
        .hero-h1 { font-size: clamp(52px, 6.5vw, 88px); font-weight: 900; line-height: 1.0; letter-spacing: -3px; margin-bottom: 28px; }
        .hero-h1 span { display: block; }
        .hero-sub { font-size: 17px; color: var(--fg2); line-height: 1.75; max-width: 500px; margin-bottom: 40px; }
        .hero-btns { display: flex; align-items: center; gap: 14px; }

        /* hero floating cards */
        .hero-visual { position: relative; height: 430px; }
        .hcard { position: absolute; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r); padding: 18px 20px; will-change: transform; }
        .hcard-a { top: 0; right: 0; width: 270px; animation: fl 6s ease-in-out infinite; }
        .hcard-b { bottom: 60px; left: 0; width: 190px; animation: fl 6s ease-in-out infinite 1.5s; }
        .hcard-c { top: 145px; left: 55px; width: 155px; animation: fl 6s ease-in-out infinite 3s; }
        @keyframes fl { 0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)} }
        .hcard-label { font-size: 11px; color: var(--fg3); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
        .hcard-val { font-size: 30px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; }
        .hcard-sub { font-size: 11px; margin-top: 5px; font-weight: 600; color: var(--fg3); }
        .mini-graph { display: flex; align-items: flex-end; gap: 2px; height: 32px; margin-top: 12px; }
        .bar { background: var(--ac); border-radius: 2px; width: 8px; opacity: .4; }
        .bar.hi { opacity: 1; }

        /* ── MARQUEE ── */
        .marquee { padding: 26px 0; background: var(--bg3); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); overflow: hidden; }
        .mtrack { display: flex; animation: mq 24s linear infinite; width: max-content; will-change: transform; }
        .mitem { display: flex; align-items: center; gap: 12px; padding: 0 32px; font-size: 13px; font-weight: 600; color: var(--fg3); white-space: nowrap; }
        .mstar { color: var(--ac2); }
        @keyframes mq { from{transform:translateX(0)}to{transform:translateX(-50%)} }

        /* ── STATS ── */
        .stats { background: var(--bg2); border-bottom: 1px solid var(--bd); padding: 48px 0; }
        .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
        .sitem { text-align: center; padding: 0 20px; position: relative; }
        .sitem:not(:last-child)::after { content:''; position:absolute; right:0; top:10%; height:80%; width:1px; background:var(--bd); }
        .sn { font-size: 48px; font-weight: 900; letter-spacing: -3px; line-height: 1; margin-bottom: 8px; }
        .sn em { color: var(--ac2); font-style: normal; }
        .sl { font-size: 13px; color: var(--fg3); font-weight: 500; }

        /* ── ABOUT ── */
        .about { padding: 120px 0; }
        .about-inner { display: grid; grid-template-columns: 72px 1fr; gap: 40px; align-items: start; }
        .about-icon { width: 60px; height: 60px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-top: 6px; flex-shrink: 0; }
        .about-text { font-size: clamp(24px, 3vw, 40px); font-weight: 700; line-height: 1.3; letter-spacing: -0.8px; }

        /* ── SECTION COMMONS ── */
        .eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ac2); margin-bottom: 16px; }
        .stitle { font-size: clamp(36px, 4vw, 56px); font-weight: 900; letter-spacing: -2px; line-height: 1.05; }
        .ssub { margin-top: 16px; font-size: 15px; color: var(--fg2); max-width: 480px; line-height: 1.7; }

        /* ── WORK ── */
        .work { padding: 80px 0 120px; background: var(--bg2); }
        .work-header { margin-bottom: 56px; }
        .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .wcard { background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; transition: all .3s; contain: layout style; }
        .wcard:hover { border-color: var(--bd2); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
        .wcard-full { grid-column: span 2; }
        .wcard-center { grid-column: 1 / -1; max-width: calc(50% - 10px); margin: 0 auto; }
        .wthumb { width: 100%; overflow: hidden; position: relative; }
        .wthumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s ease; }
        .wcard:hover .wthumb img { transform: scale(1.02); }
        .wthumb-landscape { aspect-ratio: 21/8; }
        .wthumb-chart img { object-position: right center; }
        .wthumb-normal { aspect-ratio: 16/10; }
        .winfo { padding: 24px 26px; }
        .wtag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fg3); margin-bottom: 8px; }
        .wtitle { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; }
        .wdesc { font-size: 13px; color: var(--fg2); line-height: 1.6; margin-bottom: 18px; }
        .wmeta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
        .wpill { font-size: 11px; font-weight: 600; color: var(--fg2); background: rgba(255,255,255,.04); border: 1px solid var(--bd); border-radius: 20px; padding: 5px 12px; }
        .wstats { display: flex; gap: 28px; }
        .wstat { font-size: 12px; color: var(--fg3); }
        .wstat strong { display: block; font-size: 18px; font-weight: 800; color: var(--fg); letter-spacing: -0.5px; }
        .wlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ac2); text-decoration: none; margin-top: 14px; transition: gap .2s; }
        .wlink:hover { gap: 10px; }

        /* ── CASE STUDY ── */
        .casestudy { padding: 120px 0; background: var(--bg); }
        .cs-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .cs-screens { display: flex; flex-direction: column; gap: 16px; }
        .cs-screen { border-radius: var(--r); overflow: hidden; border: 1px solid var(--bd); }
        .cs-screen img { width: 100%; display: block; }
        .cs-big-stat { font-size: 80px; font-weight: 900; letter-spacing: -4px; line-height: 1; color: var(--fg); margin: 20px 0 4px; }
        .cs-big-sub { font-size: 15px; color: var(--fg3); margin-bottom: 28px; }
        .cs-body { font-size: 16px; color: var(--fg2); line-height: 1.75; margin-bottom: 36px; }
        .cs-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .cs-metric { background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r); padding: 20px 22px; }
        .cs-metric-span { grid-column: span 2; }
        .cs-metric-n { font-size: 26px; font-weight: 900; letter-spacing: -1px; line-height: 1; margin-bottom: 4px; }
        .cs-metric-l { font-size: 12px; color: var(--fg3); }

        /* ── WHY NORTHCAP ── */
        .why { padding: 120px 0; background: var(--bg); }
        .why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 60px; }
        .why-card { background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r); padding: 32px 28px; transition: all .3s; contain: layout style; }
        .why-card:hover { border-color: var(--bd2); background: var(--bg4); transform: translateY(-3px); }
        .why-icon { width: 48px; height: 48px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; }
        .why-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 10px; }
        .why-desc { font-size: 13px; color: var(--fg2); line-height: 1.65; }

        /* ── TESTIMONIALS ── */
        .testimonials { padding: 120px 0; background: var(--bg); }
        .testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1100px; margin: 60px auto 0; align-items: stretch; }
        .testi-card { position: relative; isolation: isolate; display: flex; flex-direction: column; background: linear-gradient(160deg, #151515 0%, #0d0d0d 100%); border: 1px solid var(--bd); border-radius: var(--rlg); padding: 40px 44px 36px; overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .4s; }
        .testi-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 300px at 8% -12%, rgba(99,102,241,.18), transparent 62%); opacity: .6; transition: opacity .45s; pointer-events: none; }
        .testi-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(129,140,248,.55) 50%, transparent); opacity: .45; transition: opacity .35s; }
        .testi-card:hover { transform: translateY(-5px); border-color: rgba(129,140,248,.32); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.1), 0 18px 50px -20px rgba(99,102,241,.3); }
        .testi-card:hover::before, .testi-card:hover::after { opacity: 1; }
        .testi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
        .testi-stars { display: inline-flex; gap: 3px; }
        .testi-stars svg { width: 16px; height: 16px; fill: #8f95ff; filter: drop-shadow(0 0 6px rgba(129,140,248,.45)); }
        .testi-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ac2); white-space: nowrap; }
        .testi-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ac2); box-shadow: 0 0 8px rgba(129,140,248,.9); }
        .testi-quote { position: relative; margin-bottom: 28px; }
        .testi-mark { position: absolute; left: -10px; top: -30px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 96px; line-height: 1; color: rgba(129,140,248,.16); pointer-events: none; user-select: none; transition: color .35s; }
        .testi-card:hover .testi-mark { color: rgba(129,140,248,.3); }
        .testi-quote p { position: relative; font-size: 16.5px; line-height: 1.75; color: #cfcfcf; }
        .testi-quote p:first-of-type { color: #fff; font-weight: 500; }
        .testi-quote p + p { margin-top: 14px; }
        .testi-author { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--bd); }
        .testi-avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(180deg, rgba(99,102,241,.22), rgba(99,102,241,.08)); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ac2); font-size: 16px; flex-shrink: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(129,140,248,.35), 0 0 0 4px rgba(99,102,241,.1); }
        .testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .testi-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px; }
        .testi-role { font-size: 12px; color: var(--fg3); margin-top: 2px; }

        /* ── SERVICES ── */
        .services { padding: 120px 0; background: var(--bg2); }
        .svc-intro { margin-bottom: 72px; }
        .svc-tagline { font-size: clamp(36px, 4.2vw, 56px); font-weight: 900; letter-spacing: -2px; line-height: 1.05; max-width: 700px; }
        .svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
        .svc-card { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 34px 32px 30px; background: linear-gradient(160deg, #141414 0%, #0d0d0d 100%); border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .4s; }
        .svc-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 90% -10%, rgba(99,102,241,.2), transparent 62%); opacity: .55; transition: opacity .45s; pointer-events: none; }
        .svc-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(129,140,248,.55) 50%, transparent); opacity: .45; transition: opacity .35s; }
        .svc-card:hover { transform: translateY(-6px); border-color: rgba(129,140,248,.35); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.12), 0 18px 50px -20px rgba(99,102,241,.35); }
        .svc-card:hover::before, .svc-card:hover::after { opacity: 1; }
        .svc-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
        .svc-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--ac2); background: linear-gradient(180deg, rgba(99,102,241,.2), rgba(99,102,241,.08)); border: 1px solid rgba(129,140,248,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px -10px rgba(99,102,241,.6); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
        .svc-icon svg { width: 24px; height: 24px; }
        .svc-card:hover .svc-icon { transform: translateY(-2px) scale(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px -8px rgba(99,102,241,.8); }
        .svc-num { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 26px; line-height: 1; color: rgba(255,255,255,.12); letter-spacing: -1px; transition: color .35s; }
        .svc-card:hover .svc-num { color: rgba(129,140,248,.55); }
        .svc-name { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
        .svc-desc { font-size: 13.5px; color: var(--fg2); line-height: 1.7; margin-bottom: 28px; }
        .svc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ac2); padding-top: 18px; border-top: 1px solid var(--bd); transition: color .25s; }
        .svc-arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
        .svc-card:hover .svc-link { color: #fff; }
        .svc-card:hover .svc-arrow { transform: translateX(4px); }

        /* ── PROCESS ── */
        .process { padding: 120px 0; background: var(--bg); }
        .process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 60px; }
        .pstep { background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r); padding: 32px 28px; transition: all .3s; contain: layout style; }
        .pstep:hover { border-color: var(--bd2); background: var(--bg4); }
        .pnum { font-size: 11px; font-weight: 700; color: var(--fg3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; }
        .ptitle { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
        .pdesc { font-size: 13px; color: var(--fg2); line-height: 1.65; }

        /* ── PRICING ── */
        .pricing { padding: 120px 0; background: var(--bg2); }
        .pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 60px; }
        .pcard { background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rlg); padding: 40px 36px; transition: all .3s; }
        .pcard:hover { border-color: var(--bd2); transform: translateY(-4px); }
        .ptier { font-size: 12px; font-weight: 600; color: var(--fg3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
        .pprice { font-size: 56px; font-weight: 900; letter-spacing: -3px; line-height: 1; margin-bottom: 8px; }
        .pprice-plus { color: var(--ac2); font-size: .6em; letter-spacing: 0; margin-left: 2px; vertical-align: top; }
        .pnote { font-size: 13px; color: var(--fg3); margin-bottom: 28px; }
        .pdivider { height: 1px; background: var(--bd); margin-bottom: 28px; }
        .pfeatures { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 36px; }
        .pfeat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg2); }
        .pcheck { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ac2); }

        /* Single wide pricing card (development page). */
        .pcard-wide { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 52px; max-width: 980px; margin: 60px auto 0; padding: 52px 56px; background: linear-gradient(160deg, #161616 0%, #0d0d0d 100%); overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .4s; }
        .pcard-wide::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px 360px at 6% -20%, rgba(99,102,241,.26), transparent 62%); opacity: .8; transition: opacity .45s; pointer-events: none; }
        .pcard-wide::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(129,140,248,.6) 50%, transparent); opacity: .6; transition: opacity .35s; }
        .pcard-wide:hover { transform: translateY(-4px); border-color: rgba(129,140,248,.35); box-shadow: 0 28px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.12), 0 20px 60px -20px rgba(99,102,241,.35); }
        .pcard-wide:hover::before, .pcard-wide:hover::after { opacity: 1; }
        .pwide-left { display: flex; flex-direction: column; align-items: flex-start; }
        .pwide-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ac2); margin-bottom: 26px; }
        .pwide-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac2); box-shadow: 0 0 10px rgba(129,140,248,.9); }
        .pwide-desc { font-size: 14.5px; color: var(--fg2); line-height: 1.7; margin: -6px 0 28px; max-width: 360px; }
        .pwide-meta { font-size: 12.5px; color: var(--fg3); margin-top: 16px; }
        .pwide-right { position: relative; padding-left: 52px; border-left: 1px solid var(--bd); }
        .pwide-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--fg3); margin-bottom: 22px; }
        .pfeatures-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin-bottom: 0; }
        .pfeatures-2col .pfeat { align-items: flex-start; color: #d4d4d4; font-size: 13.5px; line-height: 1.5; }
        .pfeatures-2col .pcheck { margin-top: 2px; background: rgba(99,102,241,.16); border-color: rgba(129,140,248,.4); }
        .pricing-note { max-width: 820px; margin: 32px auto 0; }

        /* ── CTA ── */
        .cta-sec { padding: 60px 0 80px; background: var(--bg2); }
        .cta-box { background: linear-gradient(135deg, var(--bg3) 0%, rgba(99,102,241,.07) 100%); border: 1px solid rgba(99,102,241,.2); border-radius: var(--rxl); padding: 80px; display: flex; align-items: center; justify-content: space-between; gap: 60px; }
        .cta-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--fg3); margin-bottom: 16px; }
        .cta-title { font-size: clamp(36px, 4vw, 52px); font-weight: 900; letter-spacing: -2px; line-height: 1.05; }
        .cta-sub { font-size: 15px; color: var(--fg2); margin-top: 12px; line-height: 1.65; max-width: 440px; }
        .cta-btns { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

        /* ── DISCORD CONTACT ── */
        .contact { padding: 0 0 120px; background: var(--bg2); }
        .form-wrap { max-width: 680px; }
        .form-header { margin-bottom: 48px; padding-top: 80px; border-top: 1px solid var(--bd); }
        .dc-steps { display: flex; flex-direction: column; border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
        .dc-step { display: flex; align-items: flex-start; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--bd); background: var(--bg3); transition: background .2s; }
        .dc-step:last-child { border-bottom: none; }
        .dc-step:hover { background: var(--bg4); }
        .dc-num { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--ac2); text-transform: uppercase; padding-top: 3px; flex-shrink: 0; min-width: 24px; }
        .dc-title { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 4px; }
        .dc-desc { font-size: 13px; color: var(--fg2); line-height: 1.6; }

        /* ── FOOTER ── */
        .footer { background: var(--bg); border-top: 1px solid var(--bd); padding: 80px 0 40px; }
        .footer-top { display: grid; grid-template-columns: 240px 1fr; gap: 80px; padding-bottom: 60px; border-bottom: 1px solid var(--bd); margin-bottom: 40px; }
        .footer-brand { display: flex; flex-direction: column; gap: 16px; }
        .footer-tagline { font-size: 13px; color: var(--fg3); line-height: 1.65; }
        .footer-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
        .fcol-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fg3); margin-bottom: 18px; }
        .fcol-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
        .fcol-links a { color: var(--fg2); text-decoration: none; font-size: 14px; transition: color .2s; }
        .fcol-links a:hover { color: var(--fg); }
        .footer-btm { display: flex; align-items: center; justify-content: space-between; }
        .footer-copy { font-size: 13px; color: var(--fg3); }
        .socials { display: flex; gap: 10px; }
        .social { width: 36px; height: 36px; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rsm); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; color: var(--fg2); transition: all .2s; }
        .social:hover { background: var(--bg4); color: var(--fg); border-color: var(--bd2); }

        /* ── REVEAL ── */
        .rv { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
        .rv.in { opacity: 1; transform: translateY(0); }
        .d1 { transition-delay:.1s } .d2 { transition-delay:.2s } .d3 { transition-delay:.3s } .d4 { transition-delay:.4s }

        /* ── REDUCED MOTION ── */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
            .rv { opacity: 1; transform: none; transition: none; }
            .mtrack { animation-play-state: paused; }
            .mnav { transition: none; }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 1024px) {
            .hero-grid, .about-inner, .cs-inner, .cta-box, .footer-top { grid-template-columns: 1fr; }
            .hero-visual, .about-icon { display: none; }
            .cta-box { align-items: flex-start; }
            .svc-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
            .process-grid { grid-template-columns: repeat(2,1fr); }
            .why-grid { grid-template-columns: repeat(2,1fr); }
            .cs-screens { flex-direction: row; }
        }
        @media (max-width: 768px) {
            .container { padding: 0 20px; }
            .nav-links { display: none; }
            .nav > .btn-p { display: none; }
            .hamburger { display: flex; }
            .nav { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
            .hero-bg { background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(99,102,241,.1) 0%, transparent 60%); }
            .wcard:hover { transform: none; box-shadow: none; }
            .btn-p:hover, .btn-g:hover, .btn-w:hover { transform: none; }
            .btn::before { display: none; }
            .pcard:hover { transform: none; }
            .pcard-wide { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 34px 26px 30px; }
            .pcard-wide:hover { transform: none; box-shadow: none; }
            .pwide-right { padding-left: 0; padding-top: 30px; border-left: 0; border-top: 1px solid var(--bd); }
            .pfeatures-2col { grid-template-columns: minmax(0, 1fr); }
            .pwide-left .btn { width: 100%; }
            .work-grid { grid-template-columns: 1fr; }
            .wcard-full { grid-column: span 1; }
            .wcard-center { max-width: none; margin: 0; }
            .wthumb-landscape { aspect-ratio: 16/9; }
            .svc-grid, .process-grid, .pricing-grid, .why-grid { grid-template-columns: 1fr; }
            .svc-card:hover { transform: none; box-shadow: none; }
            .svc-card { padding: 28px 24px 26px; }
            .stats-grid { grid-template-columns: repeat(2,1fr); gap: 32px; }
            .sitem::after { display: none; }
            .footer-top { gap: 40px; }
            .footer-cols { grid-template-columns: repeat(2,1fr); }
            .cta-box { padding: 40px 28px; flex-direction: column; align-items: stretch; gap: 28px; }
            .cta-btns { flex-direction: row; gap: 10px; }
            .cta-btns .btn { flex: 1; }
            .cs-screens { flex-direction: column; }
            .testi-grid { grid-template-columns: 1fr; }
            .testi-card { padding: 30px 26px 26px; }
            .testi-card:hover { transform: none; box-shadow: none; }
            .testi-head { flex-wrap: wrap; }
            .testi-mark { left: -6px; top: -24px; font-size: 72px; }
            .cs-metrics { grid-template-columns: 1fr 1fr; }
            .cs-metric-span { grid-column: span 2; }
            .hero-h1 { letter-spacing: -2px; }
            .stitle { letter-spacing: -1.5px; }
            .frow { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .hero-h1 { font-size: 40px; letter-spacing: -1.5px; }
            .hero-sub { font-size: 15px; }
            .hero-btns { flex-direction: column; align-items: flex-start; }
            .btn-lg { width: 100%; justify-content: center; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .sn { font-size: 36px; }
            .about-text { font-size: 22px; }
            .cs-big-stat { font-size: 60px; }
            .cta-title { font-size: 32px; }
            .cta-box { padding: 32px 20px; gap: 24px; }
            .cta-btns { flex-direction: column; gap: 10px; }
            .cta-btns .btn { flex: none; width: 100%; }
            .footer-cols { grid-template-columns: 1fr 1fr; }
            .pricing-grid { grid-template-columns: 1fr; }
            .wstats { flex-wrap: wrap; gap: 16px; }
            .mnav-links a { font-size: 30px; }
        }

        /* ===============================================================
           NORTHCAP - MULTI-PAGE / MARKETPLACE EXTENSIONS
           (appended; everything above is the original single-page brand)
           =============================================================== */

        /* -- SKIP LINK -- */
        .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ac); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--rsm) 0; font-size: 14px; font-weight: 600; text-decoration: none; }
        .skip-link:focus { left: 0; }
        :focus-visible { outline: 2px solid var(--ac2); outline-offset: 3px; border-radius: 4px; }

        /* -- NAV ACTIVE STATE -- */
        .nav-links a { position: relative; }
        .nav-links a.active { color: #fff; background: linear-gradient(180deg, rgba(99,102,241,.3), rgba(99,102,241,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(129,140,248,.35), 0 6px 18px -8px rgba(99,102,241,.7); }
        .nav-links a.active:hover { background: linear-gradient(180deg, rgba(99,102,241,.36), rgba(99,102,241,.2)); }
        .mnav-links a.active { color: var(--ac2); }

        /* -- PAGE HERO (subpages) -- */
        .phero { position: relative; padding: 168px 0 72px; overflow: hidden; border-bottom: 1px solid var(--bd); }
        .phero-bg { position: absolute; inset: -10%; background: radial-gradient(ellipse 60% 60% at 70% 10%, rgba(99,102,241,.12) 0%, transparent 70%); pointer-events: none; }
        .phero-inner { position: relative; z-index: 1; max-width: 800px; }
        .phero h1 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 900; letter-spacing: -2.6px; line-height: 1.03; margin-bottom: 22px; }
        .phero-sub { font-size: 17px; color: var(--fg2); line-height: 1.75; max-width: 620px; }
        .phero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }

        /* -- BREADCRUMB -- */
        .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--fg3); margin-bottom: 26px; }
        .crumbs a { color: var(--fg3); text-decoration: none; transition: color .2s; }
        .crumbs a:hover { color: var(--fg2); }
        .crumbs .sep { opacity: .45; }
        .crumbs .crumb-now { color: var(--fg2); }

        /* -- HOMEPAGE BUSINESS CATEGORY CARDS -- */
        .biz { padding: 110px 0; background: var(--bg); }
        .biz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
        .bizcard { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 44px 44px 40px; background: linear-gradient(160deg, #151515 0%, #0e0e0e 100%); border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .4s; }
        .bizcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 320px at 88% -10%, rgba(99,102,241,.22), transparent 62%); opacity: .7; transition: opacity .45s; pointer-events: none; }
        .bizcard::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(129,140,248,.55) 50%, transparent); opacity: .5; transition: opacity .35s; }
        .bizcard:hover { transform: translateY(-6px); border-color: rgba(129,140,248,.35); box-shadow: 0 28px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.12), 0 18px 60px -20px rgba(99,102,241,.35); }
        .bizcard:hover::before { opacity: 1; }
        .bizcard:hover::after { opacity: 1; }
        .bizcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
        .bizcard-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ac2); }
        .bizcard-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac2); box-shadow: 0 0 10px rgba(129,140,248,.9); }
        .bizcard-num { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 34px; font-weight: 400; line-height: 1; color: rgba(255,255,255,.14); letter-spacing: -1px; transition: color .35s; }
        .bizcard:hover .bizcard-num { color: rgba(129,140,248,.55); }
        .bizcard-title { font-size: 26px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.2; margin-bottom: 14px; max-width: 440px; }
        .bizcard-desc { font-size: 14.5px; color: var(--fg2); line-height: 1.7; margin-bottom: 28px; max-width: 460px; }
        .bizcard-list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-top: 26px; margin-bottom: 34px; border-top: 1px solid var(--bd); }
        .bizcard-list li { position: relative; padding-left: 28px; font-size: 13.5px; line-height: 1.55; color: #c9c9c9; }
        .bizcard-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(99,102,241,.14); border: 1px solid rgba(129,140,248,.35); }
        .bizcard-list li::after { content: ''; position: absolute; left: 5px; top: 6px; width: 5px; height: 8px; border-right: 1.5px solid var(--ac2); border-bottom: 1.5px solid var(--ac2); transform: rotate(45deg); }
        .bizcard-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: #fff; color: #0a0a0a; font-size: 13.5px; font-weight: 700; transition: background .25s, box-shadow .3s, gap .25s; }
        .bizcard-arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
        .bizcard:hover .bizcard-cta { background: var(--ac2); color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,.35); }
        .bizcard:hover .bizcard-arrow { transform: translateX(4px); }

        /* -- MARKETPLACE TABS -- */
        .mk-tabbar { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--bg3); border: 1px solid var(--bd); border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .mk-tabbar::-webkit-scrollbar { display: none; }
        .mk-tab { appearance: none; -webkit-appearance: none; border: 1px solid transparent; background: transparent; color: var(--fg2); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; padding: 11px 26px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
        .mk-tab:hover { color: var(--fg); background: rgba(255,255,255,.04); }
        .mk-tab[aria-selected="true"] { background: var(--bg4); color: var(--fg); border-color: var(--bd2); }
        .mk-tab-count { font-size: 11px; font-weight: 700; color: var(--fg3); margin-left: 8px; }
        .mk-tab[aria-selected="true"] .mk-tab-count { color: var(--ac2); }
        .mk-toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 44px; }
        .mk-blurb { font-size: 13.5px; color: var(--fg3); line-height: 1.7; max-width: 440px; }
        .mk-panel { animation: mkFade .35s ease both; }
        @keyframes mkFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

        /* -- PRODUCT GRID / CARDS -- */
        .prod-section { padding: 88px 0 110px; background: var(--bg); }
        .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .prod-grid-ugc { grid-template-columns: repeat(4, 1fr); }
        .prod-card { display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .35s; }
        .prod-card:hover { transform: translateY(-5px); border-color: var(--bd2); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
        .prod-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg4); }
        .prod-thumb-square { aspect-ratio: 1/1; }
        .prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
        .prod-card:hover .prod-thumb img { transform: scale(1.04); }
        .prod-flags { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 7px; z-index: 1; }
        .badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; padding: 6px 11px; border-radius: 6px; background: rgba(8,8,8,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--bd2); color: var(--fg2); }
        .badge-new { background: var(--ac); border-color: var(--ac); color: #fff; }
        .prod-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
        .prod-name { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.3; margin-bottom: 9px; }
        .prod-desc { font-size: 13px; color: var(--fg2); line-height: 1.68; margin-bottom: 20px; }
        .prod-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .prod-price { font-size: 21px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
        .prod-price small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fg3); margin-top: 6px; }
        .prod-price.is-tba { font-size: 15px; letter-spacing: -0.3px; color: var(--fg2); font-weight: 700; }
        .prod-go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ac2); transition: gap .25s; white-space: nowrap; }
        .prod-card:hover .prod-go { gap: 11px; }

        /* -- EMPTY STATE -- */
        .mk-empty { border: 1px dashed var(--bd2); border-radius: var(--rlg); padding: 64px 32px; text-align: center; color: var(--fg3); }
        .mk-empty h3 { font-size: 18px; font-weight: 800; color: var(--fg2); letter-spacing: -0.4px; margin-bottom: 10px; }
        .mk-empty p { font-size: 14px; line-height: 1.7; max-width: 460px; margin: 0 auto; }

        /* -- template cards (marketplace catalog, 2-up) -- */
        .tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
        .tpl-card { display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .35s; contain: layout style; }
        .tpl-card:hover { transform: translateY(-4px); border-color: var(--bd2); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
        .tpl-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg4); }
        .tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
        .tpl-card:hover .tpl-thumb img { transform: scale(1.04); }
        .tpl-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
        .tpl-name { font-size: 21px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.25; margin-bottom: 14px; }
        .tpl-name a { color: inherit; text-decoration: none; transition: color .2s; }
        .tpl-name a:hover { color: var(--ac2); }
        .tpl-feats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
        .tpl-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--fg2); line-height: 1.55; }
        .tpl-feats .pcheck { margin-top: 2px; }
        .tpl-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .tpl-btns { display: flex; gap: 10px; flex-wrap: wrap; }

        /* -- NOTE STRIP -- */
        .note { display: flex; align-items: flex-start; gap: 14px; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r); padding: 20px 24px; font-size: 13px; color: var(--fg2); line-height: 1.7; }
        .note strong { color: var(--fg); font-weight: 700; }
        .note-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.28); color: var(--ac2); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

        /* -- PRODUCT PAGE -- */
        .pp { padding: 132px 0 40px; }
        .pp-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 48px; align-items: start; }
        .pp-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ac2); margin-bottom: 14px; }
        .pp-title { font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; letter-spacing: -2.2px; line-height: 1.04; margin-bottom: 18px; }
        .pp-tagline { font-size: 16px; color: var(--fg2); line-height: 1.75; max-width: 620px; }
        .pp-stage { margin-top: 34px; border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; background: var(--bg3); }
        .pp-stage-media { position: relative; aspect-ratio: 16/9; background: var(--bg4); }
        .pp-stage-media > img, .pp-stage-media > video, .pp-stage-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
        .pp-thumbs { display: flex; gap: 10px; padding: 12px; overflow-x: auto; }
        .pp-thumb { flex: 0 0 108px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; border: 1px solid var(--bd); background: var(--bg4); cursor: pointer; padding: 0; opacity: .55; transition: border-color .25s, opacity .25s; }
        .pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .pp-thumb:hover { opacity: 1; }
        .pp-thumb[aria-current="true"] { opacity: 1; border-color: var(--ac); }

        .pp-buy { position: sticky; top: 96px; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rlg); padding: 30px 28px; }
        .pp-buy-price { font-size: 44px; font-weight: 900; letter-spacing: -2.4px; line-height: 1; }
        .pp-buy-price.is-tba { font-size: 24px; letter-spacing: -0.8px; color: var(--fg2); }
        .pp-buy-note { font-size: 12px; color: var(--fg3); margin-top: 10px; line-height: 1.6; }
        .pp-buy .pdivider { margin: 26px 0; }
        .pp-buy-actions { display: flex; flex-direction: column; gap: 10px; }
        .pp-specs { margin-top: 26px; border-top: 1px solid var(--bd); }
        .pp-spec { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--bd); font-size: 13px; }
        .pp-spec dt { color: var(--fg3); flex-shrink: 0; }
        .pp-spec dd { color: var(--fg); font-weight: 600; text-align: right; }

        .pp-content { padding: 76px 0 40px; }
        .pp-block { padding-top: 56px; margin-top: 56px; border-top: 1px solid var(--bd); }
        .pp-block.first { padding-top: 0; margin-top: 0; border-top: 0; }
        .pp-h2 { font-size: 26px; font-weight: 900; letter-spacing: -1px; margin-bottom: 22px; }
        .pp-prose { font-size: 15px; color: var(--fg2); line-height: 1.8; max-width: 760px; }
        .pp-prose p + p { margin-top: 16px; }
        .pp-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; max-width: 900px; }
        .pp-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--fg2); line-height: 1.6; }
        .pp-list .pcheck { margin-top: 2px; }
        .pp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .pp-cardlet { background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--r); padding: 26px 24px; }
        .pp-cardlet h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 10px; }
        .pp-cardlet p { font-size: 13px; color: var(--fg2); line-height: 1.68; }
        .pp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .pp-shot { border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; background: var(--bg4); aspect-ratio: 16/10; }
        .pp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .pp-related { padding: 30px 0 110px; }

        /* -- FILTERS (work page) -- */
        .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
        .filter { appearance: none; -webkit-appearance: none; font-family: inherit; cursor: pointer; background: var(--bg3); border: 1px solid var(--bd); color: var(--fg2); font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 30px; transition: all .25s; }
        .filter:hover { color: var(--fg); border-color: var(--bd2); }
        .filter[aria-pressed="true"] { background: var(--ac); border-color: var(--ac); color: #fff; }
        .wcard[hidden] { display: none; }

        /* -- GAME CARDS (our games page) -- */
        .game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
        .gcard { display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .35s; }
        .gcard:hover { transform: translateY(-5px); border-color: var(--bd2); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
        .gcard-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--bg4); }
        .gcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
        .gcard:hover .gcard-thumb img { transform: scale(1.04); }
        .gcard-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
        .gcard-title { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 9px; }
        .gcard-desc { font-size: 13.5px; color: var(--fg2); line-height: 1.7; margin-bottom: 20px; }
        .gcard-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 24px; }
        .gcard-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }

        /* -- GENERIC SECTIONS -- */
        .sec { padding: 110px 0; }
        .sec-alt { background: var(--bg2); }
        .sec-head { margin-bottom: 56px; }
        .lede { font-size: 15px; color: var(--fg2); line-height: 1.8; max-width: 720px; margin-top: 18px; }

        /* -- DISCORD STRIP -- */
        .dstrip { padding: 84px 0; background: var(--bg2); border-top: 1px solid var(--bd); }
        .dstrip-box { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; background: var(--bg3); border: 1px solid var(--bd); border-radius: var(--rxl); padding: 52px 56px; }
        .dstrip h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; letter-spacing: -1.4px; line-height: 1.1; margin-bottom: 14px; }
        .dstrip p { font-size: 14.5px; color: var(--fg2); line-height: 1.7; max-width: 560px; }
        .dstrip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; }
        .dstrip-col h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--fg3); margin-bottom: 12px; }
        .dstrip-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
        .dstrip-col li { font-size: 13.5px; color: var(--fg2); display: flex; gap: 9px; align-items: flex-start; }
        .dstrip-col li::before { content: '\2726'; color: var(--ac2); font-size: 10px; line-height: 1.7; flex-shrink: 0; }
        .dstrip-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

        /* -- 404 -- */
        .nf { min-height: 74vh; display: flex; align-items: center; text-align: center; padding: 160px 0 100px; }
        .nf-inner { margin: 0 auto; max-width: 620px; }
        .nf-code { font-size: 92px; font-weight: 900; letter-spacing: -5px; line-height: 1; color: var(--ac2); }

        /* -- RESPONSIVE (new components) -- */
        @media (max-width: 1024px) {
            .biz-grid { grid-template-columns: 1fr; }
            .prod-grid { grid-template-columns: repeat(2, 1fr); }
            .prod-grid-ugc { grid-template-columns: repeat(3, 1fr); }
            .tpl-grid { gap: 20px; }
            .pp-grid { grid-template-columns: 1fr; gap: 36px; }
            .pp-buy { position: static; }
            .pp-cards { grid-template-columns: 1fr 1fr; }
            .dstrip-box { grid-template-columns: 1fr; padding: 40px 32px; }
            .game-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .phero { padding: 128px 0 56px; }
            .biz { padding: 80px 0; }
            .biz-grid { gap: 16px; margin-top: 40px; }
            .bizcard:hover { transform: none; box-shadow: none; }
            .bizcard { padding: 32px 26px 28px; }
            .bizcard-head { margin-bottom: 26px; }
            .bizcard-title { font-size: 22px; }
            .prod-card:hover, .gcard:hover, .tpl-card:hover { transform: none; box-shadow: none; }
            .prod-section { padding: 56px 0 84px; }
            .prod-grid, .prod-grid-ugc { grid-template-columns: 1fr 1fr; gap: 14px; }
            .tpl-grid { grid-template-columns: 1fr; gap: 16px; }
            .tpl-body { padding: 20px 20px 22px; }
            .tpl-name { font-size: 18px; }
            .tpl-btns { width: 100%; }
            .tpl-btns .btn { flex: 1; }
            .prod-body { padding: 18px 18px 20px; }
            .prod-name { font-size: 15.5px; }
            .prod-desc { font-size: 12.5px; margin-bottom: 16px; }
            .prod-price { font-size: 18px; }
            .prod-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
            .mk-toolbar { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 32px; }
            .mk-tabbar { width: 100%; }
            .mk-tab { flex: 1; text-align: center; padding: 12px 14px; }
            .pp { padding: 104px 0 24px; }
            .pp-content { padding: 48px 0 24px; }
            .pp-block { padding-top: 40px; margin-top: 40px; }
            .pp-list { grid-template-columns: 1fr; }
            .pp-cards, .pp-gallery { grid-template-columns: 1fr; }
            .pp-buy { padding: 24px 22px; }
            .pp-related { padding: 20px 0 84px; }
            .sec { padding: 76px 0; }
            .sec-head { margin-bottom: 40px; }
            .dstrip { padding: 60px 0; }
            .dstrip-box { padding: 32px 22px; gap: 28px; }
            .dstrip-cols { grid-template-columns: 1fr; gap: 22px; }
            .dstrip-actions { flex-direction: row; }
            .dstrip-actions .btn { flex: 1; }
            .gcard-actions .btn { flex: 1; }
            .phero-btns .btn { flex: 1; min-width: 150px; }
        }
        @media (max-width: 480px) {
            .prod-grid, .prod-grid-ugc { grid-template-columns: 1fr; }
            .filters { gap: 6px; }
            .filter { padding: 9px 15px; font-size: 12px; }
            .nf-code { font-size: 64px; }
            .dstrip-actions { flex-direction: column; }
            .pp-buy-price { font-size: 36px; }
            .phero-btns { flex-direction: column; align-items: stretch; }
        }

        /* -- NARROW-VIEWPORT OVERFLOW FIXES ---------------------------------
           Grid tracks default to minmax(auto, 1fr), so a long unbreakable
           string (the contact email, a stat label) can push a track wider
           than its share and force the page to scroll sideways. minmax(0,1fr)
           lets the track actually shrink. Matters at 320-360px, which is a
           real slice of TikTok/Instagram traffic.                          */
        .footer-top { grid-template-columns: 240px minmax(0, 1fr); }
        .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .fcol-links a { overflow-wrap: anywhere; }
        .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

        @media (max-width: 1024px) {
            .footer-top { grid-template-columns: minmax(0, 1fr); }
        }
        @media (max-width: 768px) {
            .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 480px) {
            .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sitem { padding: 0 8px; }
            .sl { font-size: 12px; }
        }

        /* -- POLISH ---------------------------------------------------------- */

        /* The third hero card now carries a two-word label, which made it tall
           enough to collide with the card below it. Widen so the label stays on
           one line, and lift it clear of the float animation's travel. */
        .hcard-c { width: 180px; top: 135px; }

        /* Stacked headline lines on subpage heroes. */
        .phero h1 .line { display: block; }

        /* The contact column holds the support email, which is the widest
           unbreakable string in the footer - give it a larger share so it sits
           on one line, and only allow mid-word breaking on narrow screens. */
        .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
        .fcol-links a { overflow-wrap: normal; }

        @media (max-width: 768px) {
            .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .fcol-links a { overflow-wrap: anywhere; }
        }