{"id":8,"date":"2026-06-07T10:30:29","date_gmt":"2026-06-07T10:30:29","guid":{"rendered":"https:\/\/nicopixel.cfd\/?page_id=8"},"modified":"2026-06-08T00:01:47","modified_gmt":"2026-06-08T00:01:47","slug":"home","status":"publish","type":"page","link":"https:\/\/nicopixel.cfd\/","title":{"rendered":"home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nNICO PIXEL \u2014 Creative Digital Studio<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,400;0,9..40,500;1,9..40,300&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* =============================================\r\n ROOT + RESET\r\n ============================================= *\/\r\n:root {\r\n --ink: #000000;\r\n --page: #050505;\r\n --surface: #0a0a0a;\r\n --lift: #111111;\r\n --edge: #1c1c1c;\r\n --mid: #2e2e2e;\r\n --muted: #555;\r\n --sub: #999;\r\n --light: #ccc;\r\n --white: #ffffff;\r\n --vi: #7c3aed;\r\n --vi2: #6d28d9;\r\n --vi3: #5b21b6;\r\n --vi-pale: rgba(124,58,237,0.08);\r\n --vi-thin: rgba(124,58,237,0.15);\r\n --f-display: 'Bebas Neue', sans-serif;\r\n --f-mono: 'Space Mono', monospace;\r\n --f-body: 'DM Sans', sans-serif;\r\n}\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\nhtml{scroll-behavior:smooth;font-size:16px}\r\nbody{background:var(--page);color:var(--white);font-family:var(--f-body);font-weight:400;overflow-x:hidden;line-height:1.5;cursor:default}\r\na{text-decoration:none;color:inherit}\r\nimg{display:block;max-width:100%}\r\nul{list-style:none}\r\nbutton{cursor:pointer;border:none;background:none;font:inherit;color:inherit}\r\n\r\n\/* =============================================\r\n SCROLLBAR\r\n ============================================= *\/\r\n::-webkit-scrollbar{width:3px}\r\n::-webkit-scrollbar-track{background:#000}\r\n::-webkit-scrollbar-thumb{background:var(--vi)}\r\n\r\n\/* =============================================\r\n GLOBAL BACKGROUND CANVAS (SVG patterns)\r\n ============================================= *\/\r\nbody::before{\r\n content:'';\r\n position:fixed;\r\n inset:0;\r\n z-index:0;\r\n pointer-events:none;\r\n background-image:\r\n url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cline x1='0' y1='120' x2='120' y2='0' stroke='%237c3aed' stroke-width='.3' opacity='.04'\/%3E%3Cline x1='0' y1='0' x2='120' y2='120' stroke='%237c3aed' stroke-width='.3' opacity='.04'\/%3E%3C\/svg%3E\");\r\n background-size:120px 120px;\r\n}\r\n\r\n\/* scattered background SVG overlays *\/\r\n.bg-layer{\r\n position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;\r\n}\r\n.bg-icon{\r\n position:absolute;\r\n fill:none;stroke:currentColor;\r\n color:var(--vi);\r\n}\r\n\r\n\/* =============================================\r\n LOADER\r\n ============================================= *\/\r\n#loader{\r\n position:fixed;inset:0;z-index:9999;\r\n background:var(--ink);\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n transition:opacity .8s ease,visibility .8s ease;\r\n}\r\n#loader.out{opacity:0;visibility:hidden}\r\n.loader-word{\r\n font-family:var(--f-display);\r\n font-size:clamp(3rem,10vw,7rem);\r\n letter-spacing:.15em;\r\n line-height:1;\r\n overflow:hidden;\r\n}\r\n.loader-word span{\r\n display:inline-block;\r\n transform:translateY(110%);\r\n animation:slideUp .7s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n.loader-word span:nth-child(1){animation-delay:.1s}\r\n.loader-word span:nth-child(2){animation-delay:.15s;color:var(--vi)}\r\n.loader-word span:nth-child(3){animation-delay:.2s}\r\n.loader-word span:nth-child(4){animation-delay:.25s}\r\n.loader-word span:nth-child(5){animation-delay:.3s}\r\n.loader-word span:nth-child(6){animation-delay:.35s}\r\n.loader-word span:nth-child(7){animation-delay:.4s;color:var(--vi)}\r\n.loader-word span:nth-child(8){animation-delay:.45s}\r\n.loader-word span:nth-child(9){animation-delay:.5s}\r\n@keyframes slideUp{to{transform:translateY(0)}}\r\n.loader-line{\r\n margin-top:2.5rem;\r\n width:180px;height:1px;\r\n background:var(--edge);\r\n overflow:hidden;\r\n}\r\n.loader-fill{\r\n height:100%;width:0;\r\n background:var(--vi);\r\n animation:fillBar 1.8s ease forwards .5s;\r\n}\r\n@keyframes fillBar{to{width:100%}}\r\n.loader-tag{\r\n margin-top:.8rem;\r\n font-family:var(--f-mono);\r\n font-size:.65rem;\r\n letter-spacing:.3em;\r\n color:var(--muted);\r\n}\r\n\r\n\/* =============================================\r\n NAV\r\n ============================================= *\/\r\n#nav{\r\n position:fixed;top:0;left:0;right:0;z-index:500;\r\n padding:1.4rem 4%;\r\n display:flex;align-items:center;justify-content:space-between;\r\n transition:background .4s,border-color .4s;\r\n border-bottom:1px solid transparent;\r\n}\r\n#nav.stuck{\r\n background:rgba(0,0,0,.92);\r\n backdrop-filter:blur(20px);\r\n border-color:var(--edge);\r\n}\r\n.nav-logo{\r\n font-family:var(--f-display);\r\n font-size:1.5rem;letter-spacing:.18em;\r\n}\r\n.nav-logo em{color:var(--vi);font-style:normal}\r\n.nav-links{\r\n display:flex;gap:2.5rem;align-items:center;\r\n}\r\n.nav-links a{\r\n font-family:var(--f-mono);\r\n font-size:.65rem;\r\n letter-spacing:.2em;\r\n text-transform:uppercase;\r\n color:var(--sub);\r\n transition:color .25s;\r\n position:relative;\r\n}\r\n.nav-links a::after{\r\n content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;\r\n background:var(--vi);transition:width .3s;\r\n}\r\n.nav-links a:hover{color:var(--white)}\r\n.nav-links a:hover::after{width:100%}\r\n.nav-cta{\r\n padding:.55rem 1.4rem;\r\n border:1px solid var(--vi);\r\n font-family:var(--f-mono);\r\n font-size:.65rem;\r\n letter-spacing:.15em;\r\n text-transform:uppercase;\r\n color:var(--vi);\r\n transition:all .25s;\r\n}\r\n.nav-cta:hover{background:var(--vi);color:var(--white)}\r\n.nav-burger{\r\n display:none;flex-direction:column;gap:5px;padding:4px;\r\n}\r\n.nav-burger span{width:22px;height:1.5px;background:var(--white);display:block;transition:all .3s}\r\n.nav-burger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}\r\n.nav-burger.open span:nth-child(2){opacity:0}\r\n.nav-burger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}\r\n.mob-nav{\r\n display:none;\r\n position:fixed;top:0;left:0;right:0;bottom:0;z-index:400;\r\n background:rgba(0,0,0,.97);\r\n flex-direction:column;align-items:center;justify-content:center;gap:2rem;\r\n}\r\n.mob-nav.open{display:flex}\r\n.mob-nav a{\r\n font-family:var(--f-display);font-size:clamp(2rem,8vw,4rem);\r\n letter-spacing:.1em;color:var(--sub);transition:color .2s;\r\n}\r\n.mob-nav a:hover{color:var(--vi)}\r\n\r\n\/* =============================================\r\n UTILITY\r\n ============================================= *\/\r\n.tag{\r\n display:inline-flex;align-items:center;gap:.5rem;\r\n font-family:var(--f-mono);font-size:.6rem;letter-spacing:.3em;\r\n text-transform:uppercase;color:var(--vi);\r\n padding:.3rem .8rem;\r\n border:1px solid var(--vi-thin);\r\n background:var(--vi-pale);\r\n}\r\n.tag::before{content:'\/\/'}\r\n.section-num{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.25em;color:var(--muted);\r\n margin-bottom:.5rem;\r\n}\r\nh2.big{\r\n font-family:var(--f-display);\r\n font-size:clamp(3rem,7vw,6.5rem);\r\n letter-spacing:.04em;line-height:.96;\r\n}\r\nh2.big em{color:var(--vi);font-style:normal}\r\n.sub-copy{\r\n font-family:var(--f-body);font-size:.9rem;\r\n color:var(--sub);line-height:1.7;max-width:480px;\r\n}\r\n\r\n\/* reveal *\/\r\n.rv{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}\r\n.rv.in{opacity:1;transform:none}\r\n.rv-left{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease}\r\n.rv-left.in{opacity:1;transform:none}\r\n.rv-right{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease}\r\n.rv-right.in{opacity:1;transform:none}\r\n\r\n\/* =============================================\r\n HERO\r\n ============================================= *\/\r\n#hero{\r\n min-height:100vh;\r\n position:relative;\r\n overflow:hidden;\r\n display:grid;\r\n grid-template-rows:1fr auto;\r\n padding-top:90px;\r\n}\r\n\r\n\/* vertical racing lines *\/\r\n.hero-lines{\r\n position:absolute;inset:0;pointer-events:none;\r\n}\r\n.hero-lines span{\r\n position:absolute;top:0;bottom:0;width:1px;\r\n background:linear-gradient(180deg,transparent 0%,var(--vi) 50%,transparent 100%);\r\n opacity:.06;\r\n animation:lineDrop 4s linear infinite;\r\n}\r\n.hero-lines span:nth-child(1){left:12%;animation-delay:0s}\r\n.hero-lines span:nth-child(2){left:28%;animation-delay:.6s;opacity:.04}\r\n.hero-lines span:nth-child(3){left:44%;animation-delay:1.1s}\r\n.hero-lines span:nth-child(4){left:60%;animation-delay:1.7s;opacity:.04}\r\n.hero-lines span:nth-child(5){left:76%;animation-delay:2.3s}\r\n.hero-lines span:nth-child(6){left:90%;animation-delay:0.9s;opacity:.04}\r\n@keyframes lineDrop{\r\n 0%{transform:translateY(-100%)}\r\n 100%{transform:translateY(100%)}\r\n}\r\n\r\n\/* hero scan line *\/\r\n.hero-scan{\r\n position:absolute;left:0;right:0;height:1px;\r\n background:linear-gradient(90deg,transparent,var(--vi),transparent);\r\n opacity:.12;\r\n animation:scanMove 6s linear infinite;\r\n}\r\n@keyframes scanMove{0%{top:0}100%{top:100%}}\r\n\r\n.hero-inner{\r\n position:relative;z-index:2;\r\n padding:6rem 4% 4rem;\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:3rem;\r\n align-items:center;\r\n}\r\n.hero-left{}\r\n.hero-eyebrow{\r\n display:flex;align-items:center;gap:.8rem;\r\n margin-bottom:2rem;\r\n}\r\n.hero-eyebrow-dot{\r\n width:6px;height:6px;\r\n background:var(--vi);\r\n animation:pulse 2s infinite;\r\n}\r\n@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}\r\n.hero-eyebrow-text{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.3em;text-transform:uppercase;color:var(--sub);\r\n}\r\n.hero-title{\r\n font-family:var(--f-display);\r\n font-size:clamp(5rem,13vw,12rem);\r\n letter-spacing:.04em;\r\n line-height:.9;\r\n margin-bottom:1.5rem;\r\n}\r\n.hero-title .outline{\r\n -webkit-text-stroke:1.5px var(--vi);\r\n color:transparent;\r\n display:block;\r\n}\r\n.hero-title .solid{display:block}\r\n.hero-meta{\r\n display:flex;align-items:center;gap:2rem;\r\n margin-bottom:3rem;\r\n}\r\n.hero-meta-item{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.2em;text-transform:uppercase;color:var(--muted);\r\n}\r\n.hero-meta-item strong{\r\n display:block;\r\n font-family:var(--f-display);font-size:1.6rem;\r\n letter-spacing:.05em;color:var(--white);margin-bottom:.2rem;\r\n}\r\n.hero-meta-divider{width:1px;height:40px;background:var(--edge)}\r\n.hero-btns{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}\r\n.btn-primary{\r\n padding:.9rem 2.4rem;\r\n background:var(--vi);\r\n font-family:var(--f-mono);\r\n font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;\r\n color:var(--white);\r\n transition:background .25s,transform .25s;\r\n clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));\r\n}\r\n.btn-primary:hover{background:var(--vi2);transform:translateY(-2px)}\r\n.btn-ghost{\r\n padding:.9rem 2.4rem;\r\n border:1px solid var(--edge);\r\n font-family:var(--f-mono);\r\n font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;\r\n color:var(--sub);\r\n transition:border-color .25s,color .25s,transform .25s;\r\n clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);\r\n}\r\n.btn-ghost:hover{border-color:var(--vi);color:var(--vi);transform:translateY(-2px)}\r\n\r\n.hero-right{\r\n position:relative;\r\n}\r\n.hero-showcase{\r\n position:relative;\r\n aspect-ratio:1 \/ 1.05;\r\n overflow:hidden;\r\n}\r\n.hero-showcase-img{\r\n width:100%;height:100%;\r\n object-fit:cover;\r\n filter:grayscale(.2);\r\n transition:transform .6s ease;\r\n}\r\n.hero-showcase:hover .hero-showcase-img{transform:scale(1.03)}\r\n\/* decorative corner brackets *\/\r\n.hero-showcase::before,\r\n.hero-showcase::after{\r\n content:'';position:absolute;z-index:3;\r\n width:28px;height:28px;\r\n border-color:var(--vi);border-style:solid;\r\n}\r\n.hero-showcase::before{top:0;left:0;border-width:2px 0 0 2px}\r\n.hero-showcase::after{bottom:0;right:0;border-width:0 2px 2px 0}\r\n.hero-showcase-label{\r\n position:absolute;bottom:0;left:0;right:0;z-index:4;\r\n padding:2rem 1.5rem 1.5rem;\r\n background:linear-gradient(transparent,rgba(0,0,0,.85));\r\n font-family:var(--f-mono);font-size:.6rem;letter-spacing:.25em;\r\n text-transform:uppercase;color:var(--vi);\r\n}\r\n\/* placeholder for hero image *\/\r\n.hero-showcase-placeholder{\r\n width:100%;height:100%;\r\n background:var(--surface);\r\n display:flex;flex-direction:column;align-items:center;justify-content:center;\r\n position:relative;overflow:hidden;\r\n}\r\n.hero-showcase-placeholder::before{\r\n content:'';\r\n position:absolute;inset:0;\r\n background:\r\n repeating-linear-gradient(0deg,transparent,transparent 29px,var(--edge) 30px),\r\n repeating-linear-gradient(90deg,transparent,transparent 29px,var(--edge) 30px);\r\n opacity:.4;\r\n}\r\n.hero-showcase-np{\r\n font-family:var(--f-display);\r\n font-size:9rem;font-weight:900;\r\n color:var(--vi);opacity:.15;\r\n letter-spacing:.1em;\r\n position:relative;z-index:1;\r\n}\r\n.hero-ticker{\r\n position:relative;z-index:2;\r\n border-top:1px solid var(--edge);\r\n overflow:hidden;\r\n height:42px;display:flex;align-items:center;\r\n}\r\n.ticker-track{\r\n display:flex;align-items:center;gap:0;\r\n animation:ticker 22s linear infinite;\r\n white-space:nowrap;\r\n}\r\n.ticker-track span{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.2em;text-transform:uppercase;color:var(--muted);\r\n padding:0 2rem;\r\n}\r\n.ticker-track em{color:var(--vi);font-style:normal}\r\n@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}\r\n\r\n\/* =============================================\r\n MARQUEE STRIP\r\n ============================================= *\/\r\n.marquee-strip{\r\n border-top:1px solid var(--edge);\r\n border-bottom:1px solid var(--edge);\r\n overflow:hidden;\r\n padding:.8rem 0;\r\n position:relative;z-index:1;\r\n background:var(--surface);\r\n}\r\n.marquee-track{\r\n display:flex;align-items:center;\r\n animation:marq 18s linear infinite;\r\n white-space:nowrap;\r\n}\r\n.marquee-track span{\r\n font-family:var(--f-display);\r\n font-size:1.2rem;letter-spacing:.2em;\r\n color:var(--edge);\r\n padding:0 2.5rem;\r\n text-transform:uppercase;\r\n}\r\n.marquee-track em{color:var(--vi);font-style:normal}\r\n@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}\r\n\r\n\/* =============================================\r\n SERVICES \u2014 HORIZONTAL STRIP\r\n ============================================= *\/\r\n#services{\r\n position:relative;z-index:1;\r\n padding:7rem 4%;\r\n}\r\n.svc-header{\r\n display:flex;justify-content:space-between;align-items:flex-end;\r\n margin-bottom:4rem;\r\n}\r\n.svc-list{\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n border:1px solid var(--edge);\r\n}\r\n.svc-item{\r\n padding:2.5rem 1.8rem;\r\n border-right:1px solid var(--edge);\r\n position:relative;overflow:hidden;\r\n transition:background .3s;\r\n}\r\n.svc-item:last-child{border-right:none}\r\n.svc-item::after{\r\n content:'';\r\n position:absolute;bottom:0;left:0;right:0;height:2px;\r\n background:var(--vi);\r\n transform:scaleX(0);transform-origin:left;\r\n transition:transform .4s ease;\r\n}\r\n.svc-item:hover{background:var(--vi-pale)}\r\n.svc-item:hover::after{transform:scaleX(1)}\r\n.svc-num{\r\n font-family:var(--f-mono);font-size:.55rem;\r\n letter-spacing:.25em;color:var(--vi);\r\n margin-bottom:1.5rem;opacity:.7;\r\n}\r\n.svc-icon{\r\n font-size:1.5rem;margin-bottom:1rem;\r\n display:block;\r\n}\r\n.svc-name{\r\n font-family:var(--f-display);font-size:1.3rem;\r\n letter-spacing:.05em;margin-bottom:.6rem;\r\n text-transform:uppercase;\r\n}\r\n.svc-desc{\r\n font-size:.78rem;color:var(--muted);line-height:1.6;\r\n}\r\n\r\n\/* second row services *\/\r\n.svc-list-2{\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n border:1px solid var(--edge);\r\n border-top:none;\r\n}\r\n\r\n\/* =============================================\r\n PORTFOLIO \u2014 FULL BLEED\r\n ============================================= *\/\r\n#portfolio{\r\n position:relative;z-index:1;\r\n padding:7rem 0;\r\n}\r\n.port-header{\r\n padding:0 4%;\r\n display:flex;justify-content:space-between;align-items:flex-end;\r\n margin-bottom:3rem;\r\n}\r\n.port-tabs{\r\n display:flex;gap:0;\r\n border-bottom:1px solid var(--edge);\r\n padding:0 4%;\r\n margin-bottom:3rem;\r\n}\r\n.pt{\r\n padding:.8rem 1.8rem;\r\n font-family:var(--f-mono);\r\n font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;\r\n color:var(--muted);\r\n border-bottom:2px solid transparent;\r\n margin-bottom:-1px;\r\n transition:color .25s,border-color .25s;\r\n background:transparent !important;\r\n outline:none;\r\n -webkit-appearance:none;\r\n appearance:none;\r\n -webkit-tap-highlight-color:transparent;\r\n}\r\n.pt.on{color:var(--white);border-color:var(--vi);background:transparent !important}\r\n.pt:hover{color:var(--light);background:transparent !important}\r\n.pt:focus{outline:none;background:transparent !important}\r\n.pt:active{background:transparent !important}\r\n.tab-pane{display:none}\r\n.tab-pane.on{display:block}\r\n\r\n\/* LOGO MASONRY *\/\r\n.logo-grid{\r\n display:grid;\r\n grid-template-columns:repeat(6,1fr);\r\n grid-template-rows:auto auto auto;\r\n gap:2px;\r\n padding:0 4%;\r\n}\r\n.logo-cell{\r\n aspect-ratio:1;overflow:hidden;position:relative;\r\n background:var(--surface);\r\n cursor:pointer;\r\n}\r\n.logo-cell.wide{grid-column:span 2}\r\n.logo-cell.tall{grid-row:span 2}\r\n.logo-cell.big{grid-column:span 2;grid-row:span 2}\r\n.logo-cell img{\r\n width:100%;height:100%;object-fit:cover;\r\n transition:transform .6s ease;\r\n}\r\n.logo-cell:hover img{transform:scale(1.06)}\r\n.logo-cell-overlay{\r\n position:absolute;inset:0;\r\n background:rgba(0,0,0,.7);\r\n opacity:0;transition:opacity .3s;\r\n display:flex;align-items:center;justify-content:center;\r\n}\r\n.logo-cell:hover .logo-cell-overlay{opacity:1}\r\n.logo-cell-overlay span{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.25em;text-transform:uppercase;\r\n color:var(--vi);border-bottom:1px solid var(--vi);\r\n padding-bottom:2px;\r\n}\r\n\/* placeholder grid cells *\/\r\n.logo-cell-ph{\r\n width:100%;height:100%;\r\n background:var(--surface);\r\n display:flex;align-items:center;justify-content:center;\r\n position:relative;overflow:hidden;\r\n}\r\n.logo-cell-ph::before{\r\n content:'';position:absolute;inset:0;\r\n background:radial-gradient(circle at 50% 50%,var(--vi-pale),transparent 70%);\r\n}\r\n.logo-cell-ph span{\r\n font-family:var(--f-display);\r\n font-size:1rem;letter-spacing:.15em;\r\n color:var(--vi);opacity:.5;\r\n position:relative;\r\n}\r\n\r\n\/* SOCIAL POSTS GRID *\/\r\n.social-grid{\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n gap:2px;\r\n padding:0 4%;\r\n}\r\n.social-cell{\r\n aspect-ratio:1;overflow:hidden;position:relative;\r\n background:var(--surface);cursor:pointer;\r\n}\r\n.social-cell.tall{aspect-ratio:.7}\r\n.social-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}\r\n.social-cell:hover img{transform:scale(1.06)}\r\n.social-cell-ov{\r\n position:absolute;inset:0;background:rgba(0,0,0,.6);\r\n opacity:0;transition:opacity .3s;\r\n display:flex;align-items:center;justify-content:center;\r\n flex-direction:column;gap:.5rem;\r\n}\r\n.social-cell:hover .social-cell-ov{opacity:1}\r\n.social-cell-ov span{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.25em;text-transform:uppercase;color:var(--vi);\r\n}\r\n\r\n\/* VIDEO PROJECTS *\/\r\n.video-row{\r\n display:grid;\r\n grid-template-columns:1.6fr 1fr 1fr;\r\n gap:2px;\r\n padding:0 4%;\r\n}\r\n.vid-card{\r\n position:relative;overflow:hidden;cursor:pointer;\r\n background:var(--surface);\r\n}\r\n.vid-card.main{grid-row:span 2}\r\n.vid-thumb{\r\n width:100%;aspect-ratio:16\/9;object-fit:cover;\r\n display:block;transition:transform .6s ease;\r\n}\r\n.vid-card.main .vid-thumb{aspect-ratio:9\/13}\r\n.vid-card:hover .vid-thumb{transform:scale(1.04)}\r\n.vid-play{\r\n position:absolute;inset:0;\r\n display:flex;align-items:center;justify-content:center;\r\n background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s;\r\n}\r\n.vid-card:hover .vid-play{opacity:1}\r\n.vid-play-btn{\r\n width:52px;height:52px;\r\n border:1.5px solid var(--vi);\r\n display:flex;align-items:center;justify-content:center;\r\n clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);\r\n background:var(--vi-pale);\r\n}\r\n.vid-play-btn svg{width:18px;height:18px;fill:var(--vi)}\r\n.vid-info{\r\n padding:1.2rem 1.2rem 1.4rem;\r\n background:var(--lift);\r\n border-top:1px solid var(--edge);\r\n position:relative;\r\n}\r\n.vid-info::before{\r\n content:'';position:absolute;top:0;left:0;right:0;height:2px;\r\n background:transparent;transition:background .3s;\r\n}\r\n.vid-card:hover .vid-info::before{background:var(--vi)}\r\n.vid-title{\r\n font-family:var(--f-display);font-size:1rem;\r\n letter-spacing:.05em;margin-bottom:.4rem;\r\n text-transform:uppercase;line-height:1.2;\r\n}\r\n.vid-link{\r\n font-family:var(--f-mono);font-size:.58rem;\r\n letter-spacing:.2em;text-transform:uppercase;color:var(--vi);\r\n}\r\n\/* placeholder thumb *\/\r\n.vid-ph{\r\n width:100%;aspect-ratio:16\/9;\r\n background:var(--surface);\r\n display:flex;align-items:center;justify-content:center;\r\n position:relative;overflow:hidden;\r\n}\r\n.vid-card.main .vid-ph{aspect-ratio:9\/13}\r\n.vid-ph::before{\r\n content:'';position:absolute;inset:0;\r\n background:linear-gradient(135deg,transparent 45%,var(--vi-pale) 100%);\r\n}\r\n.vid-ph span{\r\n font-family:var(--f-display);font-size:1.2rem;\r\n color:var(--vi);opacity:.3;letter-spacing:.1em;\r\n position:relative; \r\n}\r\n\/* =============================================\r\n STATS \u2014 FULL PURPLE BAR\r\n ============================================= *\/\r\n#stats{\r\n position:relative;z-index:1;\r\n background:var(--vi);\r\n margin:0;\r\n padding:4rem 4%;\r\n overflow:hidden;\r\n}\r\n#stats::before{\r\n content:'';position:absolute;inset:0;\r\n background:repeating-linear-gradient(\r\n -45deg,\r\n transparent,transparent 20px,\r\n rgba(0,0,0,.06) 20px,rgba(0,0,0,.06) 22px\r\n );\r\n}\r\n.stats-row{\r\n position:relative;z-index:1;\r\n display:grid;grid-template-columns:repeat(4,1fr);\r\n divide-x:1px solid rgba(255,255,255,.2);\r\n}\r\n.stat-block{\r\n padding:1.5rem 2rem;\r\n border-right:1px solid rgba(255,255,255,.2);\r\n text-align:center;\r\n}\r\n.stat-block:last-child{border-right:none}\r\n.stat-n{\r\n font-family:var(--f-display);\r\n font-size:clamp(3rem,6vw,5rem);\r\n letter-spacing:.04em;\r\n line-height:1;\r\n display:block;\r\n}\r\n.stat-suf{font-size:clamp(1.5rem,3vw,2.5rem)}\r\n.stat-l{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.25em;text-transform:uppercase;\r\n opacity:.75;margin-top:.4rem;\r\n}\r\n\r\n\/* =============================================\r\n CLIENTS WALL\r\n ============================================= *\/\r\n#clients{\r\n position:relative;z-index:1;\r\n padding:7rem 4%;\r\n border-top:1px solid var(--edge);\r\n}\r\n.clients-header{\r\n display:flex;justify-content:space-between;align-items:flex-end;\r\n margin-bottom:4rem;\r\n}\r\n.clients-wall{\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n border:1px solid var(--edge);\r\n}\r\n.client-cell{\r\n padding:2.5rem 2rem;\r\n display:flex;align-items:center;justify-content:center;\r\n border-right:1px solid var(--edge);\r\n border-bottom:1px solid var(--edge);\r\n background:var(--ink);\r\n transition:background .3s;\r\n position:relative;overflow:hidden;\r\n}\r\n.client-cell::before{\r\n content:'';position:absolute;bottom:0;left:0;right:0;height:0;\r\n background:var(--vi-pale);transition:height .4s;\r\n}\r\n.client-cell:hover{background:var(--vi-pale)}\r\n.client-cell:hover::before{height:100%}\r\n.client-cell img{\r\n height:44px;width:auto;object-fit:contain;\r\n filter:grayscale(1) brightness(.55);\r\n transition:filter .3s;\r\n position:relative;z-index:1;\r\n}\r\n.client-cell:hover img{filter:grayscale(0) brightness(1)}\r\n.client-ph{\r\n font-family:var(--f-display);\r\n font-size:1rem;letter-spacing:.12em;\r\n color:var(--mid);\r\n position:relative;z-index:1;\r\n transition:color .3s;\r\n}\r\n.client-cell:hover .client-ph{color:var(--vi)}\r\n\r\n\/* =============================================\r\n ABOUT \/ TEAM \u2014 SPLIT\r\n ============================================= *\/\r\n#about{\r\n position:relative;z-index:1;\r\n padding:7rem 0;\r\n border-top:1px solid var(--edge);\r\n overflow:hidden;\r\n}\r\n.about-split{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n min-height:600px;\r\n}\r\n.about-visual-col{\r\n position:relative;overflow:hidden;\r\n background:var(--surface);\r\n}\r\n.about-visual-col img{\r\n width:100%;height:100%;object-fit:cover;\r\n opacity:.7;\r\n}\r\n.about-visual-col-ph{\r\n width:100%;height:100%;\r\n background:var(--surface);\r\n display:flex;align-items:center;justify-content:center;\r\n position:relative;overflow:hidden;\r\n}\r\n.about-visual-col-ph::after{\r\n content:'NP';\r\n font-family:var(--f-display);\r\n font-size:20rem;font-weight:900;\r\n color:var(--vi);opacity:.04;\r\n position:absolute;\r\n bottom:-2rem;right:-2rem;\r\n line-height:1;\r\n}\r\n.about-visual-col-ph-inner{\r\n position:relative;z-index:1;\r\n text-align:center;\r\n}\r\n.about-visual-col-ph-inner p{\r\n font-family:var(--f-display);font-size:5rem;\r\n color:var(--vi);opacity:.25;letter-spacing:.2em;\r\n}\r\n.about-text-col{\r\n padding:5rem 5%;\r\n display:flex;flex-direction:column;justify-content:center;\r\n background:var(--lift);\r\n position:relative;\r\n}\r\n.about-text-col::before{\r\n content:'';position:absolute;left:0;top:15%;bottom:15%;width:2px;\r\n background:var(--vi);opacity:.4;\r\n}\r\n.about-stats-mini{\r\n display:grid;grid-template-columns:1fr 1fr;\r\n gap:1.5rem;margin-top:3rem;\r\n}\r\n.asm{\r\n border-top:1px solid var(--edge);padding-top:1rem;\r\n}\r\n.asm strong{\r\n font-family:var(--f-display);font-size:2.5rem;\r\n letter-spacing:.04em;color:var(--vi);display:block;line-height:1;\r\n}\r\n.asm span{\r\n font-family:var(--f-mono);font-size:.6rem;\r\n letter-spacing:.2em;text-transform:uppercase;color:var(--muted);\r\n margin-top:.3rem;display:block;\r\n}\r\n\r\n\/* =============================================\r\n TEAM\r\n ============================================= *\/\r\n#team{\r\n position:relative;z-index:1;\r\n padding:7rem 4%;\r\n border-top:1px solid var(--edge);\r\n}\r\n.team-header{margin-bottom:4rem}\r\n.team-row{\r\n display:grid;\r\n grid-template-columns:repeat(2,1fr);\r\n gap:2px;\r\n max-width:900px;\r\n}\r\n.team-card{\r\n position:relative;overflow:hidden;\r\n clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);\r\n}\r\n.team-img{\r\n width:100%;aspect-ratio:3\/4;object-fit:cover;\r\n display:block;transition:transform .6s ease;\r\n}\r\n.team-card:hover .team-img{transform:scale(1.04)}\r\n.team-img-ph{\r\n width:100%;aspect-ratio:3\/4;\r\n background:var(--surface);\r\n display:flex;align-items:center;justify-content:center;\r\n position:relative;overflow:hidden;\r\n}\r\n.team-img-ph::before{\r\n content:'';position:absolute;inset:0;\r\n background:linear-gradient(180deg,transparent 50%,var(--vi-pale) 100%);\r\n}\r\n.team-img-ph span{\r\n font-family:var(--f-display);font-size:5rem;\r\n color:var(--vi);opacity:.2;position:relative;\r\n}\r\n.team-info{\r\n position:absolute;bottom:0;left:0;right:0;\r\n padding:2rem 1.5rem 1.5rem;\r\n background:linear-gradient(transparent,rgba(0,0,0,.92));\r\n}\r\n.team-role{\r\n font-family:var(--f-mono);\r\n font-size:.58rem;\r\n letter-spacing:.3em;\r\n text-transform:uppercase;\r\n color:#fff;\r\n margin-bottom:.3rem;\r\n}\r\n}\r\n.team-name{\r\n font-family:var(--f-display);font-size:1.7rem;\r\n letter-spacing:.06em;text-transform:uppercase;\r\n}\r\n\r\n\/* =============================================\r\n REVIEWS \u2014 HORIZONTAL SCROLL\r\n ============================================= *\/\r\n#reviews{\r\n position:relative;z-index:1;\r\n padding:7rem 0;\r\n border-top:1px solid var(--edge);\r\n overflow:hidden;\r\n}\r\n.reviews-header{padding:0 4%;margin-bottom:3rem}\r\n.reviews-scroll{\r\n display:flex;gap:2px;\r\n padding:0 4%;\r\n overflow-x:auto;\r\n scrollbar-width:none;\r\n scroll-snap-type:x mandatory;\r\n}\r\n.reviews-scroll::-webkit-scrollbar{display:none}\r\n.review-card{\r\n flex-shrink:0;\r\n width:min(420px,85vw);\r\n scroll-snap-align:start;\r\n padding:2.5rem;\r\n background:var(--lift);\r\n border-top:2px solid var(--edge);\r\n transition:border-color .3s;\r\n clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);\r\n position:relative;\r\n}\r\n.review-card:hover{border-color:var(--vi)}\r\n.review-stars{\r\n color:var(--vi);font-size:.85rem;letter-spacing:.05em;\r\n margin-bottom:1.2rem;\r\n}\r\n.review-q{\r\n font-family:var(--f-display);\r\n font-size:4rem;line-height:1;\r\n color:var(--vi);opacity:.15;\r\n position:absolute;top:1.5rem;right:1.5rem;\r\n}\r\n.review-text{\r\n font-size:.88rem;color:var(--light);\r\n line-height:1.75;margin-bottom:1.8rem;\r\n font-style:italic;\r\n}\r\n.reviewer-row{display:flex;align-items:center;gap:.8rem}\r\n.reviewer-av{\r\n width:38px;height:38px;\r\n background:var(--vi-pale);border:1px solid var(--vi-thin);\r\n display:flex;align-items:center;justify-content:center;\r\n font-family:var(--f-display);font-size:.9rem;color:var(--vi);\r\n clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);\r\n flex-shrink:0;\r\n}\r\n.reviewer-name{\r\n font-family:var(--f-display);font-size:.95rem;\r\n letter-spacing:.06em;\r\n}\r\n.reviewer-loc{\r\n font-family:var(--f-mono);font-size:.55rem;\r\n letter-spacing:.15em;color:var(--muted);margin-top:.15rem;\r\n}\r\n\r\n\/* reviews drag hint *\/\r\n.reviews-hint{\r\n padding:.8rem 4% 0;\r\n font-family:var(--f-mono);font-size:.55rem;\r\n letter-spacing:.25em;text-transform:uppercase;color:var(--muted);\r\n}\r\n\r\n\/* =============================================\r\n CONTACT\r\n ============================================= *\/\r\n#contact{\r\n position:relative;z-index:1;\r\n padding:7rem 4%;\r\n border-top:1px solid var(--edge);\r\n}\r\n.contact-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1.4fr;\r\n gap:5rem;\r\n align-items:start;\r\n margin-top:4rem;\r\n}\r\n.contact-left{}\r\n.contact-item{\r\n display:flex;gap:1rem;align-items:flex-start;\r\n padding:1.5rem 0;border-bottom:1px solid var(--edge);\r\n}\r\n.cico{\r\n width:40px;height:40px;flex-shrink:0;\r\n background:var(--vi-pale);border:1px solid var(--vi-thin);\r\n display:flex;align-items:center;justify-content:center;\r\n font-size:1rem;\r\n clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);\r\n}\r\n.c-label{\r\n font-family:var(--f-mono);font-size:.55rem;\r\n letter-spacing:.25em;text-transform:uppercase;color:var(--muted);\r\n margin-bottom:.3rem;\r\n}\r\n.c-val{\r\n font-family:var(--f-display);font-size:1.2rem;\r\n letter-spacing:.05em;\r\n transition:color .2s;\r\n}\r\n.c-val a:hover{color:var(--vi)}\r\n.contact-form-wrap{}\r\n.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}\r\n.cf-field{\r\n display:flex;flex-direction:column;gap:.4rem;\r\n margin-bottom:1rem;\r\n}\r\n.cf-field label{\r\n font-family:var(--f-mono);font-size:.58rem;\r\n letter-spacing:.22em;text-transform:uppercase;color:var(--muted);\r\n}\r\n.cf-field input,\r\n.cf-field textarea,\r\n.cf-field select{\r\n background:var(--lift);\r\n border:1px solid var(--edge);\r\n color:var(--white);\r\n padding:.8rem 1rem;\r\n font-family:var(--f-body);font-size:.85rem;\r\n outline:none;\r\n transition:border-color .25s;\r\n resize:vertical;\r\n}\r\n.cf-field textarea{min-height:110px}\r\n.cf-field input:focus,\r\n.cf-field textarea:focus,\r\n.cf-field select:focus{border-color:var(--vi)}\r\n.cf-field select option{background:var(--lift)}\r\n.cf-submit{\r\n width:100%;\r\n padding:1rem 2rem;\r\n background:var(--vi);\r\n font-family:var(--f-mono);\r\n font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;\r\n color:var(--white);\r\n clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));\r\n transition:background .25s;\r\n}\r\n.cf-submit:hover{background:var(--vi2)}\r\n\r\n\/* =============================================\r\n FOOTER\r\n ============================================= *\/\r\nfooter{\r\n position:relative;z-index:1;\r\n padding:3rem 4%;\r\n border-top:1px solid var(--edge);\r\n display:flex;align-items:center;justify-content:space-between;\r\n flex-wrap:wrap;gap:1.5rem;\r\n background:var(--ink);\r\n}\r\n.foot-logo{\r\n font-family:var(--f-display);\r\n font-size:1.4rem;letter-spacing:.18em;\r\n}\r\n.foot-logo em{color:var(--vi);font-style:normal}\r\n.foot-links{\r\n display:flex;gap:1.8rem;flex-wrap:wrap;\r\n}\r\n.foot-links a{\r\n font-family:var(--f-mono);font-size:.58rem;\r\n letter-spacing:.18em;text-transform:uppercase;\r\n color:var(--muted);transition:color .2s;\r\n}\r\n.foot-links a:hover{color:var(--vi)}\r\n.foot-copy{\r\n font-family:var(--f-mono);font-size:.58rem;\r\n letter-spacing:.12em;color:var(--muted);\r\n}\r\n.foot-copy em{color:var(--vi);font-style:normal}\r\n\r\n\/* =============================================\r\n FLOATING\r\n ============================================= *\/\r\n.floats{\r\n position:fixed;bottom:2rem;right:2rem;z-index:300;\r\n display:flex;flex-direction:column;gap:.8rem;align-items:flex-end;\r\n}\r\n#stb{\r\n width:48px;height:48px;\r\n background:var(--lift);border:1px solid var(--edge);\r\n display:flex;align-items:center;justify-content:center;\r\n clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);\r\n opacity:0;pointer-events:none;\r\n transition:opacity .3s,background .25s;\r\n cursor:pointer;\r\n}\r\n#stb.on{opacity:1;pointer-events:all}\r\n#stb:hover{background:var(--vi);border-color:var(--vi)}\r\n#stb svg{width:16px;height:16px;fill:var(--white)}\r\n.wa-btn{\r\n width:48px;height:48px;\r\n background:#25D366;\r\n display:flex;align-items:center;justify-content:center;\r\n clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);\r\n transition:transform .25s;\r\n}\r\n.wa-btn:hover{transform:scale(1.08)}\r\n.wa-btn svg{width:24px;height:24px;fill:white}\r\n\r\n\/* =============================================\r\n BACKGROUND ICONS (SVG inline)\r\n ============================================= *\/\r\n.bgi{position:absolute;pointer-events:none;opacity:.05}\r\n\r\n\/* =============================================\r\n RESPONSIVE\r\n ============================================= *\/\r\n@media(max-width:1100px){\r\n .svc-list,.svc-list-2{grid-template-columns:repeat(2,1fr)}\r\n .svc-item{border-bottom:1px solid var(--edge)}\r\n .logo-grid{grid-template-columns:repeat(4,1fr)}\r\n .social-grid{grid-template-columns:repeat(3,1fr)}\r\n .video-row{grid-template-columns:1fr 1fr}\r\n .vid-card.main{grid-column:span 2;grid-row:auto}\r\n .vid-card.main .vid-ph,.vid-card.main .vid-thumb{aspect-ratio:16\/9}\r\n .stats-row{grid-template-columns:repeat(2,1fr)}\r\n .stat-block{border-bottom:1px solid rgba(255,255,255,.2)}\r\n .clients-wall{grid-template-columns:repeat(3,1fr)}\r\n .about-split{grid-template-columns:1fr}\r\n .about-visual-col{min-height:400px}\r\n .contact-grid{grid-template-columns:1fr;gap:3rem}\r\n}\r\n@media(max-width:768px){\r\n .nav-links{display:none}\r\n .nav-cta{display:none}\r\n .nav-burger{display:flex}\r\n .hero-inner{grid-template-columns:1fr;padding:3rem 4% 2rem}\r\n .hero-right{display:none}\r\n .logo-grid{grid-template-columns:repeat(2,1fr)}\r\n .logo-cell.big,.logo-cell.wide,.logo-cell.tall{\r\n grid-column:auto;grid-row:auto;\r\n }\r\n .social-grid{grid-template-columns:repeat(2,1fr)}\r\n .video-row{grid-template-columns:1fr}\r\n .clients-wall{grid-template-columns:repeat(2,1fr)}\r\n .svc-list,.svc-list-2{grid-template-columns:1fr}\r\n .team-row{grid-template-columns:1fr;max-width:400px}\r\n footer{flex-direction:column;align-items:flex-start}\r\n .hero-title{font-size:clamp(4rem,18vw,7rem)}\r\n .cf-row{grid-template-columns:1fr}\r\n}\r\n@media(max-width:480px){\r\n .logo-grid{grid-template-columns:repeat(2,1fr)}\r\n .clients-wall{grid-template-columns:repeat(2,1fr)}\r\n .stats-row{grid-template-columns:1fr 1fr}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- BG LAYER: scattered social\/marketing icons -->\r\n<div class=\"bg-layer\" aria-hidden=\"true\">\r\n <!-- FB icon -->\r\n <svg class=\"bgi\" style=\"top:8%;left:3%;width:60px;height:60px;transform:rotate(-12deg)\" viewBox=\"0 0 24 24\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\" fill=\"currentColor\"\/><\/svg>\r\n <!-- TikTok icon -->\r\n <svg class=\"bgi\" style=\"top:22%;right:5%;width:50px;height:50px;transform:rotate(8deg)\" viewBox=\"0 0 24 24\"><path d=\"M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.27 8.27 0 004.84 1.55V6.79a4.85 4.85 0 01-1.07-.1z\" fill=\"currentColor\"\/><\/svg>\r\n <!-- YouTube icon -->\r\n <svg class=\"bgi\" style=\"top:55%;left:6%;width:70px;height:70px;transform:rotate(5deg)\" viewBox=\"0 0 24 24\"><path d=\"M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z\" fill=\"currentColor\"\/><\/svg>\r\n <!-- LinkedIn icon -->\r\n <svg class=\"bgi\" style=\"top:75%;right:3%;width:55px;height:55px;transform:rotate(-6deg)\" viewBox=\"0 0 24 24\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" fill=\"currentColor\"\/><\/svg>\r\n <!-- bar chart -->\r\n <svg class=\"bgi\" style=\"top:35%;left:88%;width:80px;height:80px\" viewBox=\"0 0 24 24\"><path d=\"M5 3v18H3V3h2zm8 4v14h-2V7h2zm4-4v18h-2V3h2zm4 8v10h-2V11h2zm-8-4v14h-2V7h2z\" fill=\"currentColor\"\/><\/svg>\r\n <!-- line chart wavy -->\r\n <svg class=\"bgi\" style=\"top:68%;left:45%;width:100px;height:50px\" viewBox=\"0 0 100 50\"><polyline points=\"0,40 15,25 30,35 45,10 60,20 75,5 90,15 100,8\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\/><\/svg>\r\n <!-- grid wireframe -->\r\n <svg class=\"bgi\" style=\"top:12%;left:55%;width:90px;height:90px\" viewBox=\"0 0 90 90\"><rect x=\"0\" y=\"0\" width=\"90\" height=\"12\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><rect x=\"0\" y=\"18\" width=\"55\" height=\"8\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><rect x=\"0\" y=\"32\" width=\"90\" height=\"42\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><line x1=\"0\" y1=\"50\" x2=\"90\" y2=\"50\" stroke=\"currentColor\" stroke-width=\".5\"\/><line x1=\"45\" y1=\"32\" x2=\"45\" y2=\"74\" stroke=\"currentColor\" stroke-width=\".5\"\/><\/svg>\r\n <!-- code snippet lines -->\r\n <svg class=\"bgi\" style=\"top:88%;left:20%;width:120px;height:60px\" viewBox=\"0 0 120 60\"><text x=\"0\" y=\"12\" font-family=\"monospace\" font-size=\"7\" fill=\"currentColor\"><div class=\"hero\"><\/text><text x=\"8\" y=\"24\" font-family=\"monospace\" font-size=\"7\" fill=\"currentColor\"><h1>BRAND<\/h1><\/text><text x=\"0\" y=\"36\" font-family=\"monospace\" font-size=\"7\" fill=\"currentColor\"><\/div><\/text><\/svg>\r\n <!-- network nodes -->\r\n <svg class=\"bgi\" style=\"top:48%;left:78%;width:100px;height:100px\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><circle cx=\"20\" cy=\"20\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><circle cx=\"80\" cy=\"25\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><circle cx=\"15\" cy=\"75\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><circle cx=\"85\" cy=\"80\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><line x1=\"50\" y1=\"50\" x2=\"20\" y2=\"20\" stroke=\"currentColor\" stroke-width=\".6\"\/><line x1=\"50\" y1=\"50\" x2=\"80\" y2=\"25\" stroke=\"currentColor\" stroke-width=\".6\"\/><line x1=\"50\" y1=\"50\" x2=\"15\" y2=\"75\" stroke=\"currentColor\" stroke-width=\".6\"\/><line x1=\"50\" y1=\"50\" x2=\"85\" y2=\"80\" stroke=\"currentColor\" stroke-width=\".6\"\/><\/svg>\r\n <!-- engagement rings -->\r\n <svg class=\"bgi\" style=\"top:90%;right:20%;width:70px;height:70px\" viewBox=\"0 0 70 70\"><circle cx=\"35\" cy=\"35\" r=\"30\" stroke=\"currentColor\" stroke-width=\".8\" fill=\"none\" stroke-dasharray=\"4 6\"\/><circle cx=\"35\" cy=\"35\" r=\"20\" stroke=\"currentColor\" stroke-width=\".8\" fill=\"none\" stroke-dasharray=\"3 5\"\/><circle cx=\"35\" cy=\"35\" r=\"10\" stroke=\"currentColor\" stroke-width=\".8\" fill=\"none\"\/><\/svg>\r\n <!-- analytics bar small -->\r\n <svg class=\"bgi\" style=\"top:5%;right:32%;width:70px;height:50px\" viewBox=\"0 0 70 50\"><rect x=\"5\" y=\"30\" width=\"8\" height=\"18\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><rect x=\"18\" y=\"20\" width=\"8\" height=\"28\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><rect x=\"31\" y=\"10\" width=\"8\" height=\"38\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><rect x=\"44\" y=\"18\" width=\"8\" height=\"30\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><rect x=\"57\" y=\"5\" width=\"8\" height=\"43\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><\/svg>\r\n <!-- cursor UI element -->\r\n <svg class=\"bgi\" style=\"top:43%;left:2%;width:40px;height:40px\" viewBox=\"0 0 24 24\"><path d=\"M4 0l16 12-7 1-4 8z\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"\/><\/svg>\r\n<\/div>\r\n\r\n<!-- =============================================\r\n LOADER\r\n ============================================= -->\r\n<div id=\"loader\">\r\n <div class=\"loader-word\">\r\n <span>N<\/span><span>I<\/span><span>C<\/span><span>O<\/span><span>P<\/span><span>I<\/span><span>X<\/span><span>E<\/span><span>L<\/span>\r\n <\/div>\r\n <div class=\"loader-line\"><div class=\"loader-fill\"><\/div><\/div>\r\n <div class=\"loader-tag\">Initializing Studio<\/div>\r\n<\/div>\r\n\r\n<!-- =============================================\r\n NAV\r\n ============================================= -->\r\n<header id=\"nav\">\r\n <div class=\"nav-logo\">NICO<em>PIXEL<\/em><\/div>\r\n <nav class=\"nav-links\">\r\n <a href=\"#services\">Services<\/a>\r\n <a href=\"#portfolio\">Work<\/a>\r\n <a href=\"#clients\">Clients<\/a>\r\n <a href=\"#team\">Team<\/a>\r\n <a href=\"#reviews\">Reviews<\/a>\r\n <a href=\"#contact\" class=\"nav-cta\">Contact<\/a>\r\n <\/nav>\r\n <button class=\"nav-burger\" id=\"nb\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n<\/header>\r\n<div class=\"mob-nav\" id=\"mn\">\r\n <a href=\"#services\" class=\"ml\">Services<\/a>\r\n <a href=\"#portfolio\" class=\"ml\">Work<\/a>\r\n <a href=\"#clients\" class=\"ml\">Clients<\/a>\r\n <a href=\"#team\" class=\"ml\">Team<\/a>\r\n <a href=\"#reviews\" class=\"ml\">Reviews<\/a>\r\n <a href=\"#contact\" class=\"ml\">Contact<\/a>\r\n<\/div>\r\n\r\n<!-- =============================================\r\n HERO\r\n ============================================= -->\r\n<section id=\"home\">\r\n <div class=\"hero-lines\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/div>\r\n <div class=\"hero-scan\"><\/div>\r\n\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-left\">\r\n <div class=\"hero-eyebrow\">\r\n <div class=\"hero-eyebrow-dot\"><\/div>\r\n <div class=\"hero-eyebrow-text\">Moratuwa, Sri Lanka \u2014 Est. 2019<\/div>\r\n <\/div>\r\n <h1 class=\"hero-title\">\r\n <span class=\"solid\">NICO<\/span>\r\n <span class=\"outline\">PIXEL<\/span>\r\n <\/h1>\r\n <div class=\"hero-meta\">\r\n <div class=\"hero-meta-item\"><strong>15<span style=\"color:var(--vi)\">+<\/span><\/strong>Clients<\/div>\r\n <div class=\"hero-meta-divider\"><\/div>\r\n <div class=\"hero-meta-item\"><strong>35<span style=\"color:var(--vi)\">+<\/span><\/strong>Projects<\/div>\r\n <div class=\"hero-meta-divider\"><\/div>\r\n <div class=\"hero-meta-item\"><strong>5<span style=\"color:var(--vi)\">+<\/span><\/strong>Years<\/div>\r\n <\/div>\r\n <div class=\"hero-btns\">\r\n <a href=\"#portfolio\" class=\"btn-primary\">View Our Work<\/a>\r\n <a href=\"#contact\" class=\"btn-ghost\">Start a Project<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-right rv-right\">\r\n <div class=\"hero-showcase\">\r\n<div class=\"hero-showcase-placeholder\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/Swrxf5wk\/nico-pixeal-new.jpg\" class=\"hero-showcase-img\" alt=\"NICO PIXEL\">\r\n <\/div>\r\n <!-- Replace with: <img decoding=\"async\" src=\"YOUR_HERO_IMAGE\" class=\"hero-showcase-img\" alt=\"Hero\"> -->\r\n <\/div>\r\n <div class=\"hero-showcase-label\">\/\/ Portfolio Showcase 2025<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-ticker\">\r\n <div class=\"ticker-track\" id=\"tickerTrack\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Marquee strip -->\r\n<div class=\"marquee-strip\">\r\n <div class=\"marquee-track\" id=\"marqTrack\"><\/div>\r\n<\/div>\r\n\r\n<!-- =============================================\r\n SERVICES\r\n ============================================= -->\r\n<section id=\"services\">\r\n <div class=\"svc-header rv\">\r\n <div>\r\n <div class=\"section-num\">\/\/ 01<\/div>\r\n <h2 class=\"big\">What We<br><em>Build<\/em><\/h2>\r\n <\/div>\r\n <p class=\"sub-copy\" style=\"text-align:right;margin-left:auto;max-width:320px\">End-to-end digital solutions for brands that demand more.<\/p>\r\n <\/div>\r\n <div class=\"svc-list rv\">\r\n <div class=\"svc-item\">\r\n <div class=\"svc-num\">01 — Design<\/div>\r\n <span class=\"svc-icon\">▲<\/span>\r\n <div class=\"svc-name\">Website Design<\/div>\r\n <div class=\"svc-desc\">UI\/UX, wireframes, pixel-perfect prototypes.<\/div>\r\n <\/div>\r\n <div class=\"svc-item\">\r\n <div class=\"svc-num\">02 — Dev<\/div>\r\n <span class=\"svc-icon\">▲<\/span>\r\n <div class=\"svc-name\">Web Development<\/div>\r\n <div class=\"svc-desc\">Custom, fast, responsive \u2014 built to perform.<\/div>\r\n <\/div>\r\n <div class=\"svc-item\">\r\n <div class=\"svc-num\">03 — Growth<\/div>\r\n <span class=\"svc-icon\">▲<\/span>\r\n <div class=\"svc-name\">Digital Marketing<\/div>\r\n <div class=\"svc-desc\">SEO, paid ads, email \u2014 data-driven growth.<\/div>\r\n <\/div>\r\n <div class=\"svc-item\" style=\"border-right:none\">\r\n <div class=\"svc-num\">04 — Social<\/div>\r\n <span class=\"svc-icon\">▲<\/span>\r\n <div class=\"svc-name\">Social Media<\/div>\r\n <div class=\"svc-desc\">Full channel management across all platforms.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"svc-list-2 rv\">\r\n <div class=\"svc-item\">\r\n <div class=\"svc-num\">05 — Brand<\/div>\r\n <span class=\"svc-icon\">▲<\/span>\r\n <div class=\"svc-name\">Logo Design<\/div>\r\n <div class=\"svc-desc\">Unique marks & full brand identity systems.<\/div>\r\n <\/div>\r\n <div class=\"svc-item\">\r\n <div class=\"svc-num\">06 — Visual<\/div>\r\n <span class=\"svc-icon\">▲<\/span>\r\n <div class=\"svc-name\">Photo Editing<\/div>\r\n <div class=\"svc-desc\">Pro retouching, product photography, compositing.<\/div>\r\n <\/div>\r\n <div class=\"svc-item\">\r\n <div class=\"svc-num\">07 — Motion<\/div>\r\n <span class=\"svc-icon\">▲<\/span>\r\n <div class=\"svc-name\">Video Editing<\/div>\r\n <div class=\"svc-desc\">Cinematic cuts, motion graphics, branded content.<\/div>\r\n <\/div>\r\n <div class=\"svc-item\" style=\"border-right:none\">\r\n <div class=\"svc-num\">08 — Audio<\/div>\r\n <span class=\"svc-icon\">♬<\/span>\r\n <div class=\"svc-name\">Music Production<\/div>\r\n <div class=\"svc-desc\">Original compositions, sound design, mastering.<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n PORTFOLIO\r\n ============================================= -->\r\n<section id=\"portfolio\">\r\n <div class=\"port-header rv\">\r\n <div>\r\n <div class=\"section-num\">\/\/ 02<\/div>\r\n <h2 class=\"big\">Selected<br><em>Work<\/em><\/h2>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"port-tabs\">\r\n <button class=\"pt on\" data-tab=\"logos\">Logo Designs<\/button>\r\n <button class=\"pt\" data-tab=\"social\">Social Media<\/button>\r\n <button class=\"pt\" data-tab=\"videos\">Video Projects<\/button>\r\n <\/div>\r\n\r\n <!-- LOGOS TAB -->\r\n <div class=\"tab-pane on\" id=\"tab-logos\">\r\n <div class=\"logo-grid\">\r\n <!-- Replace src with your imgbb links. Placeholder cells below. -->\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/bjkLD3Jy\/IMG-5864.png\" alt=\"Logo 1\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/z-p3-scontent.fcmb7-1.fna.fbcdn.net\/v\/t39.30808-6\/314031318_190924643451964_7099843453690528865_n.jpg?stp=dst-jpg_tt6&cstp=mx953x960&ctp=s953x960&_nc_cat=101&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeHU585S7XYI-0vPzFjqzrQm6hIT5lE1sTfqEhPmUTWxNzWyH0wOS-s5VV4XEGtpy2nzMp_3g-7_h3v5os2cUJjq&_nc_ohc=MNqXw7IesDkQ7kNvwEIrCq1&_nc_oc=AdreFZRgnLDvBLLsMf3XYXiqIwdnwTSYH6psdRQyh54QLLQeRVPieYQmEdVabvFRkLU&_nc_zt=23&_nc_ht=z-p3-scontent.fcmb7-1.fna&_nc_gid=_nQyqwwayKJOSMIeFtzEZA&_nc_ss=7b2a8&oh=00_Af8wJV8nOLKDjg24wwzO2nHMMoxRB7VN_CJHeLO8d3sgXA&oe=6A2BD399\" alt=\"Logo 2\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/media.discordapp.net\/attachments\/1448357758066753643\/1513331952181051463\/A684D1A9-3951-4DEA-9288-3E159E3FC25B.png?ex=6a2757b5&is=6a260635&hm=3b1fa3a3deeabfff12c8305aceae4cbf209d25f754d180e52b257abf955b52ed&=&format=webp&quality=lossless&width=1088&height=544\" alt=\"Logo 3\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/media.discordapp.net\/attachments\/1448357758066753643\/1513321497232539822\/IMG_5869.png?ex=6a274df9&is=6a25fc79&hm=9470a373fb08c043be4c74275afd09c7f832e6ff855c6f59d8746dd5c99e2e18&=&format=webp&quality=lossless&width=998&height=544\" alt=\"Logo 4\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/media.discordapp.net\/attachments\/1448357758066753643\/1513323847708053575\/BD516C85-B4F1-4FCA-BE60-CBE3F46F2991.png?ex=6a275029&is=6a25fea9&hm=2a78f14f891b175d0709292e345a44fbee00774f49beddb426f7c0f09169aacd&=&format=webp&quality=lossless&width=822&height=617\" alt=\"Logo 5\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/media.discordapp.net\/attachments\/1448357758066753643\/1513328699511148604\/IMG_5876.png?ex=6a2754ae&is=6a26032e&hm=c24eecf0bf745c135ba8388e56c76db640b328e9e7d88838c66c3c65a26d9587&=&format=webp&quality=lossless&width=545&height=648\" alt=\"Logo 6\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/z-p3-scontent.fcmb7-1.fna.fbcdn.net\/v\/t39.30808-6\/327350816_901212830911300_6558087849801889691_n.jpg?stp=dst-jpg_tt6&cstp=mx442x438&ctp=s442x438&_nc_cat=107&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeHYcfXUE9dMZOuo_m5b08Z8Z5OOIK3rVUlnk44gretVSf9TA2lsATEL7ZDloaCdVq1YCiIm9xMSxAtvCfrFXInf&_nc_ohc=NezOOKFuwOIQ7kNvwE-CRaO&_nc_oc=AdrWpeMkObSPkQ80ao4Z6ujpupToHfTyov6hcJpS9bO2z-DAdKuChdWXW5bEHdVNkBo&_nc_zt=23&_nc_ht=z-p3-scontent.fcmb7-1.fna&_nc_gid=53S6IZWPlz1_nL1TREwE8Q&_nc_ss=7b2a8&oh=00_Af8E4AfpBHNj0QB2GpP5ry4RqB4tS86EUpzl3EJ4s_wB-w&oe=6A2BE115\" alt=\"Logo 7\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/media.discordapp.net\/attachments\/1448357758066753643\/1513325391207596173\/362F402B-FE90-4A61-95FA-BBEC19F1853B.png?ex=6a275199&is=6a260019&hm=289ac82b43b3c2006c8f887069c43aae588bbc924a3e52c4df6b356521ce86f2&=&format=webp&quality=lossless&width=810&height=648\" alt=\"Logo 8\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n<div class=\"logo-cell big\">\r\n <div class=\"logo-cell-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/gq2NcqN\/Gemini-Generated-Image-pxwjakpxwjakpxwj-Photoroom.png\" alt=\"Logo 8\">\r\n <\/div>\r\n <div class=\"logo-cell-overlay\">\r\n <span>View Design<\/span>\r\n <\/div>\r\n<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SOCIAL TAB -->\r\n <div class=\"tab-pane\" id=\"tab-social\">\r\n <div class=\"social-grid\">\r\n <div class=\"social-cell\"><div class=\"logo-cell-ph\"><span>POST 01<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <div class=\"social-cell tall\"><div class=\"logo-cell-ph\" style=\"height:100%\"><span>POST 02<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <div class=\"social-cell\"><div class=\"logo-cell-ph\"><span>POST 03<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <div class=\"social-cell\"><div class=\"logo-cell-ph\"><span>POST 04<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <div class=\"social-cell\"><div class=\"logo-cell-ph\"><span>POST 05<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <div class=\"social-cell\"><div class=\"logo-cell-ph\"><span>POST 06<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <div class=\"social-cell tall\"><div class=\"logo-cell-ph\" style=\"height:100%\"><span>POST 07<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <div class=\"social-cell\"><div class=\"logo-cell-ph\"><span>POST 08<\/span><\/div><div class=\"social-cell-ov\"><span>View Post<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- VIDEOS TAB -->\r\n <div class=\"tab-pane\" id=\"tab-videos\">\r\n <div class=\"video-row\">\r\n <!-- Replace VIDEO_ID with real YouTube IDs -->\r\n <div class=\"vid-card main\" onclick=\"openYT('VIDEO_ID_1')\">\r\n <div class=\"vid-ph\"><span>▶ VIDEO 01<\/span><\/div>\r\n <!-- <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/VIDEO_ID_1\/maxresdefault.jpg\" class=\"vid-thumb\" alt=\"Video 1\"> -->\r\n <div class=\"vid-play\"><div class=\"vid-play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n <div class=\"vid-info\">\r\n <div class=\"vid-title\">Brand Identity Reveal<\/div>\r\n <div class=\"vid-link\">▶ Watch on YouTube<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"vid-card\" onclick=\"openYT('VIDEO_ID_2')\">\r\n <div class=\"vid-ph\"><span>▶ VIDEO 02<\/span><\/div>\r\n <div class=\"vid-play\"><div class=\"vid-play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n <div class=\"vid-info\">\r\n <div class=\"vid-title\">Social Media Campaign<\/div>\r\n <div class=\"vid-link\">▶ Watch on YouTube<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"vid-card\" onclick=\"openYT('VIDEO_ID_3')\">\r\n <div class=\"vid-ph\"><span>▶ VIDEO 03<\/span><\/div>\r\n <div class=\"vid-play\"><div class=\"vid-play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n <div class=\"vid-info\">\r\n <div class=\"vid-title\">Motion Graphics Reel<\/div>\r\n <div class=\"vid-link\">▶ Watch on YouTube<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"vid-card\" onclick=\"openYT('VIDEO_ID_4')\">\r\n <div class=\"vid-ph\"><span>▶ VIDEO 04<\/span><\/div>\r\n <div class=\"vid-play\"><div class=\"vid-play-btn\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/div><\/div>\r\n <div class=\"vid-info\">\r\n <div class=\"vid-title\">Product Launch Video<\/div>\r\n <div class=\"vid-link\">▶ Watch on YouTube<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n STATS\r\n ============================================= -->\r\n<section id=\"stats\">\r\n <div class=\"stats-row\">\r\n <div class=\"stat-block rv\">\r\n <span class=\"stat-n\" data-target=\"15\">0<\/span><span class=\"stat-l\">Satisfied Clients<\/span>\r\n <\/div>\r\n <div class=\"stat-block rv\">\r\n <span class=\"stat-n\" data-target=\"35\">0<\/span><span class=\"stat-l\">Projects Completed<\/span>\r\n <\/div>\r\n <div class=\"stat-block rv\">\r\n <span class=\"stat-n\" data-target=\"5\">0<\/span><span class=\"stat-l\">Years of Excellence<\/span>\r\n <\/div>\r\n <div class=\"stat-block rv\">\r\n <span class=\"stat-n\" data-target=\"20+\">0<\/span><span class=\"stat-l\">% Positive Reviews<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n CLIENTS\r\n ============================================= -->\r\n<section id=\"clients\">\r\n <div class=\"clients-header rv\">\r\n <div>\r\n <div class=\"section-num\">\/\/ 03<\/div>\r\n <h2 class=\"big\">Trusted By<br><em>Brands<\/em><\/h2>\r\n <\/div>\r\n <p class=\"sub-copy\" style=\"max-width:280px\">Partners across Sri Lanka and beyond.<\/p>\r\n <\/div>\r\n <div class=\"clients-wall rv\">\r\n <!-- Replace with actual client logo imgbb links -->\r\n <div class=\"client-cell\"><img decoding=\"async\" src=\"https:\/\/i.ibb.co\/GvJYW6hd\/327350816-901212830911300-6558087849801889691-n.jpg\" alt=\"Client 1\"><\/div>\r\n <div class=\"client-cell\"><img decoding=\"async\" src=\"https:\/\/z-p3-scontent.fcmb7-1.fna.fbcdn.net\/v\/t39.30808-6\/314031318_190924643451964_7099843453690528865_n.jpg?stp=dst-jpg_tt6&cstp=mx953x960&ctp=s953x960&_nc_cat=101&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeHU585S7XYI-0vPzFjqzrQm6hIT5lE1sTfqEhPmUTWxNzWyH0wOS-s5VV4XEGtpy2nzMp_3g-7_h3v5os2cUJjq&_nc_ohc=MNqXw7IesDkQ7kNvwEIrCq1&_nc_oc=AdreFZRgnLDvBLLsMf3XYXiqIwdnwTSYH6psdRQyh54QLLQeRVPieYQmEdVabvFRkLU&_nc_zt=23&_nc_ht=z-p3-scontent.fcmb7-1.fna&_nc_gid=g1t3NzwbcEtHNZfZpDsoqA&_nc_ss=7b2a8&oh=00_Af9893TUbBPNYVDnnOuqdBjXFsel0c7MHfB4MIFpxGAkXg&oe=6A2BD399\" alt=\"Client 2\"><\/div>\r\n <div class=\"client-cell\"><img decoding=\"async\" src=\"https:\/\/z-p3-scontent.fcmb7-1.fna.fbcdn.net\/v\/t39.30808-6\/605740393_1308876571259627_5392726877194480328_n.jpg?stp=dst-jpg_tt6&cstp=mx1000x1000&ctp=s1000x1000&_nc_cat=104&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeEYnw2FAPFN1ITyOhE4v4ZMDmqf4ZOnkpEOap_hk6eSkUKNl4-C08ZSATurykqLPbwriRGxMFVIu2UlIZ1uZTqV&_nc_ohc=Vec1h3M8-jEQ7kNvwHudpfO&_nc_oc=Adp_xnFaJFJ8kLoKdwMyqLIfkV0lGUCMFuoEMFGqkLinWvdSI255tzCm2Xsixy8t9Ak&_nc_zt=23&_nc_ht=z-p3-scontent.fcmb7-1.fna&_nc_gid=jynmlm1IAMFyxRMf7MKiqQ&_nc_ss=7b2a8&oh=00_Af8A85Oh1z5fcpfCVCvlhOR232js9HQvnGlOb_8nFZPxOw&oe=6A2BD04D\" alt=\"Client 3\"><\/div>\r\n <div class=\"client-cell\" style=\"border-right:none\"><img decoding=\"async\" src=\"https:\/\/z-p3-scontent.fcmb7-1.fna.fbcdn.net\/v\/t39.30808-6\/476024461_1122946689842061_4003850318603231248_n.jpg?stp=dst-jpg_tt6&cstp=mx1000x1000&ctp=s1000x1000&_nc_cat=110&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeG56IK2O97qGvOFB4pR0ReKwKEHh5dLa5HAoQeHl0trkWiiYDZaaDFZI1Iqo4lDTudlAKo6eTwV-xSzG-VJydyt&_nc_ohc=Ax2F4GLQFLwQ7kNvwF73Zkz&_nc_oc=AdqbT3lh6c7tDIBQ08i1JCCOM8BFUrBGBNNmPn_TuBvVIg63X0bCCtjQ0GgwBrhzEUg&_nc_zt=23&_nc_ht=z-p3-scontent.fcmb7-1.fna&_nc_gid=E-YP4LzFzynUoFP-i-FxuA&_nc_ss=7b2a8&oh=00_Af9V0p4kxRaPGHUql0nPO527oqgEtaBdMSpY9oeUmK6FlQ&oe=6A2BC5D9\" alt=\"Client 4\"><\/div>\r\n <div class=\"client-cell\"><img decoding=\"async\" src=\"https:\/\/z-p3-scontent.fcmb7-1.fna.fbcdn.net\/v\/t39.30808-6\/309716117_477431827745420_2669362311641337549_n.jpg?stp=dst-jpg_tt6&cstp=mx1233x1233&ctp=s1233x1233&_nc_cat=107&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeF0l4MtXd-Q50yb2ZE2sKjAidpqTNDN1guJ2mpM0M3WC8NOntTyorOhG36UOxLA316__KapIa-4zgHEaQh2DLzI&_nc_ohc=7UHhoLYIBbIQ7kNvwGu_YpY&_nc_oc=Adrf3C1UkSBJNQF4jRf4q4Fx_StVfWfrhesLdhV_pb9cmseNeE_83LCWsBRI_GMz95Q&_nc_zt=23&_nc_ht=z-p3-scontent.fcmb7-1.fna&_nc_gid=7zuBn0qH-12P_5kvX07xTQ&_nc_ss=7b2a8&oh=00_Af_QjJtfvf_nnNOKeW-SZ9nLUPAUxFvznasRNskYXSMxLg&oe=6A2BABB5\" alt=\"Client 6\"><\/div>\r\n <div class=\"client-cell\"><img decoding=\"async\" src=\"https:\/\/i.ibb.co\/gq2NcqN\/Gemini-Generated-Image-pxwjakpxwjakpxwj-Photoroom.png\" alt=\"Client 7\"><\/div>\r\n <div class=\"client-cell\"><img decoding=\"async\" src=\"https:\/\/z-p3-scontent.fcmb7-1.fna.fbcdn.net\/v\/t39.30808-6\/607006609_851572877621698_2768425154987820384_n.jpg?stp=dst-jpg_tt6&cstp=mx1080x1080&ctp=s1080x1080&_nc_cat=100&ccb=1-7&_nc_sid=6ee11a&_nc_eui2=AeHbPin7l4hTl_AECwzFhIyWJAk4Y2FCEHskCThjYUIQe825o1j9W2BYRjEPAEaHX34fceoa-Apjz6q5l2jLheDT&_nc_ohc=YNwaexfbgQ8Q7kNvwGW1M6H&_nc_oc=AdpQvjUbtK8WMuAeEctDOlrRPrqc1OBdjs7ARAfF_3_GPOTvMdZCiJwP-qxfdI1UM30&_nc_zt=23&_nc_ht=z-p3-scontent.fcmb7-1.fna&_nc_gid=YYKLjrpP6aHvIcRojKhIZg&_nc_ss=7b2a8&oh=00_Af8QF9jcCamwagxl77pVr5CgNPV5xDliRJ6dbUKFtfiKiA&oe=6A2BC55D\" alt=\"Client 8\"><\/div>\r\n <div class=\"client-cell\" style=\"border-right:none\"><img decoding=\"async\" src=\"https:\/\/i.ibb.co\/x8cPKLbG\/688111279-996354532758975-1022130337494955553-n.jpg\" alt=\"Client 8\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n ABOUT SPLIT\r\n ============================================= -->\r\n<section id=\"about\">\r\n <div class=\"about-split\">\r\n <div class=\"about-visual-col rv-left\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/bRLPsLFs\/d7a857f1-4b6f-4254-b540-215b508a9e82.png\" alt=\"NICO PIXEL Studio\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <\/div>\r\n <div class=\"about-text-col rv-right\">\r\n <div class=\"section-num\">\/\/ 04<\/div>\r\n <h2 class=\"big\" style=\"margin-bottom:1.5rem\">We Build<br><em>Digital<\/em><br>Experiences<\/h2>\r\n <p class=\"sub-copy\">NICO PIXEL is a full-service creative digital studio based in Moratuwa, Sri Lanka. We blend professional precision with creative innovation to give every client a competitive edge.<\/p>\r\n <div class=\"about-stats-mini\">\r\n <div class=\"asm\"><strong>15<em style=\"color:var(--vi)\">+<\/em><\/strong><span>Happy Clients<\/span><\/div>\r\n <div class=\"asm\"><strong>35<em style=\"color:var(--vi)\">+<\/em><\/strong><span>Projects Done<\/span><\/div>\r\n <div class=\"asm\"><strong>5<em style=\"color:var(--vi)\">+<\/em><\/strong><span>Years Active<\/span><\/div>\r\n <div class=\"asm\"><strong>98<em style=\"color:var(--vi)\">%<\/em><\/strong><span>Satisfaction<\/span><\/div>\r\n <\/div>\r\n <a href=\"#contact\" class=\"btn-primary\" style=\"margin-top:2.5rem;display:inline-flex\">Get Started →<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n TEAM\r\n ============================================= -->\r\n<section id=\"team\">\r\n <div class=\"team-header rv\">\r\n <div class=\"section-num\">\/\/ 05<\/div>\r\n <h2 class=\"big\">The <em>Team<\/em><\/h2>\r\n <\/div>\r\n <div class=\"team-row\">\r\n <!-- TEAM MEMBER 1: Replace src with imgbb link -->\r\n<div class=\"team-card rv-left\">\r\n <div class=\"team-img-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/7d3hqJJy\/719789573-1785276249107590-582681401061107267-n.jpg\"\r\n class=\"team-img\"\r\n alt=\"Shashini Ayodhya\">\r\n <\/div>\r\n <div class=\"team-info\">\r\n <div class=\"team-role\">CEO \/ Owner<\/div>\r\n <div class=\"team-name\">Nikitha Shree<\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- TEAM MEMBER 2: Replace src with imgbb link -->\r\n<div class=\"team-card rv-left\">\r\n <div class=\"team-img-ph\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/zTsBQKNd\/B9-BE8-B56-8-B93-4-B99-A4-A3-44-C41732931-B.png\"\r\n class=\"team-img\"\r\n alt=\"Shashini Ayodhya\">\r\n <\/div>\r\n <div class=\"team-info\">\r\n <div class=\"team-role\">Marketing Manager<\/div>\r\n <div class=\"team-name\">Shashini Ayodhya<\/div>\r\n <\/div>\r\n<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n REVIEWS\r\n ============================================= -->\r\n<section id=\"reviews\">\r\n <div class=\"reviews-header rv\">\r\n <div class=\"section-num\">\/\/ 06<\/div>\r\n <h2 class=\"big\">Client<br><em>Words<\/em><\/h2>\r\n <\/div>\r\n <div class=\"reviews-scroll\" id=\"rScroll\">\r\n <div class=\"review-card rv\">\r\n <div class=\"review-q\">\"<\/div>\r\n <div class=\"review-stars\">★★★★★<\/div>\r\n <p class=\"review-text\">NICO PIXEL ape business eka professional level ekata giyama loku support ekak dunna. Wadak karanda hodama team eka.<\/p>\r\n <div class=\"reviewer-row\">\r\n <div class=\"reviewer-av\">KP<\/div>\r\n <div>\r\n <div class=\"reviewer-name\">Kasun Perera<\/div>\r\n <div class=\"reviewer-loc\">Colombo, Sri Lanka<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"review-card rv\">\r\n <div class=\"review-q\">\"<\/div>\r\n <div class=\"review-stars\">★★★★★<\/div>\r\n <p class=\"review-text\">Logo design eka superb. Api hithapu widihatama wada lassanata karala dunna. Igena ganna hodama team ekak.<\/p>\r\n <div class=\"reviewer-row\">\r\n <div class=\"reviewer-av\">NF<\/div>\r\n <div>\r\n <div class=\"reviewer-name\">Nadeesha Fernando<\/div>\r\n <div class=\"reviewer-loc\">Kandy, Sri Lanka<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"review-card rv\">\r\n <div class=\"review-q\">\"<\/div>\r\n <div class=\"review-stars\">★★★★★<\/div>\r\n <p class=\"review-text\">Website eka fast, modern saha mobile friendly. Godak happy meka balala. Highly recommend NICO PIXEL.<\/p>\r\n <div class=\"reviewer-row\">\r\n <div class=\"reviewer-av\">CS<\/div>\r\n <div>\r\n <div class=\"reviewer-name\">Chamara Silva<\/div>\r\n <div class=\"reviewer-loc\">Galle, Sri Lanka<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"review-card rv\">\r\n <div class=\"review-q\">\"<\/div>\r\n <div class=\"review-stars\">★★★★★<\/div>\r\n <p class=\"review-text\">Marketing service walin ape sales godak wedi una. Best team in Sri Lanka for digital marketing!<\/p>\r\n <div class=\"reviewer-row\">\r\n <div class=\"reviewer-av\">DJ<\/div>\r\n <div>\r\n <div class=\"reviewer-name\">Dilani Jayasinghe<\/div>\r\n <div class=\"reviewer-loc\">Negombo, Sri Lanka<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"review-card rv\">\r\n <div class=\"review-q\">\"<\/div>\r\n <div class=\"review-stars\">★★★★★<\/div>\r\n <p class=\"review-text\">Social media management godak easy una NICO PIXEL ekka. Results thamai hondama kiyanne. 10\/10.<\/p>\r\n <div class=\"reviewer-row\">\r\n <div class=\"reviewer-av\">RP<\/div>\r\n <div>\r\n <div class=\"reviewer-name\">Ruwani Perera<\/div>\r\n <div class=\"reviewer-loc\">Matara, Sri Lanka<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"reviews-hint\">\u2190 Drag to scroll \u2192<\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n CONTACT\r\n ============================================= -->\r\n<section id=\"contact\">\r\n <div class=\"rv\">\r\n <div class=\"section-num\">\/\/ 07<\/div>\r\n <h2 class=\"big\">Start A<br><em>Project<\/em><\/h2>\r\n <\/div>\r\n <div class=\"contact-grid\">\r\n <div>\r\n <div class=\"contact-item rv\">\r\n <div class=\"cico\">📍<\/div>\r\n <div>\r\n <div class=\"c-label\">Location<\/div>\r\n <div class=\"c-val\">Moratuwa, Sri Lanka<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-item rv\">\r\n <div class=\"cico\">📞<\/div>\r\n <div>\r\n <div class=\"c-label\">Hotline<\/div>\r\n <div class=\"c-val\"><a href=\"tel:0721177797\">0721177797<\/a><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-item rv\">\r\n <div class=\"cico\">💬<\/div>\r\n <div>\r\n <div class=\"c-label\">WhatsApp<\/div>\r\n <div class=\"c-val\"><a href=\"https:\/\/wa.me\/94721177797\" target=\"_blank\">0721177797<\/a><\/div>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/wa.me\/94721177797\" target=\"_blank\" class=\"btn-primary\" style=\"margin-top:2rem;display:inline-flex;align-items:center;gap:.6rem\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n Chat on WhatsApp\r\n <\/a>\r\n <\/div>\r\n <div class=\"contact-form-wrap rv\">\r\n <div class=\"cf-row\">\r\n <div class=\"cf-field\">\r\n <label for=\"fn\">Your Name<\/label>\r\n <input type=\"text\" id=\"fn\" placeholder=\"Kasun Perera\">\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label for=\"fp\">Phone<\/label>\r\n <input type=\"tel\" id=\"fp\" placeholder=\"+94 7X XXX XXXX\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label for=\"fe\">Email<\/label>\r\n <input type=\"email\" id=\"fe\" placeholder=\"you@example.com\">\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label for=\"fs\">Service<\/label>\r\n <select id=\"fs\">\r\n <option value=\"\" disabled selected>Select a service\u2026<\/option>\r\n <option>Website Design<\/option>\r\n <option>Web Development<\/option>\r\n <option>Digital Marketing<\/option>\r\n <option>Social Media Management<\/option>\r\n <option>Logo Design<\/option>\r\n <option>Photo Editing<\/option>\r\n <option>Video Editing<\/option>\r\n <option>Music Production<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"cf-field\">\r\n <label for=\"fm\">Message<\/label>\r\n <textarea id=\"fm\" placeholder=\"Tell us about your project\u2026\"><\/textarea>\r\n <\/div>\r\n <button class=\"cf-submit\" onclick=\"sendWA()\">✉   Send via WhatsApp<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- =============================================\r\n FOOTER\r\n ============================================= -->\r\n<footer>\r\n <div class=\"foot-logo\">NICO<em>PIXEL<\/em><\/div>\r\n <div class=\"foot-links\">\r\n <a href=\"#services\">Services<\/a>\r\n <a href=\"#portfolio\">Work<\/a>\r\n <a href=\"#clients\">Clients<\/a>\r\n <a href=\"#team\">Team<\/a>\r\n <a href=\"#reviews\">Reviews<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <div class=\"foot-copy\"><em>NICO PIXEL<\/em> © 2025 \u2014 Moratuwa, Sri Lanka<\/div>\r\n<\/footer>\r\n\r\n<!-- FLOATS -->\r\n<div class=\"floats\">\r\n <button id=\"stb\" onclick=\"window.scrollTo({top:0,behavior:'smooth'})\" aria-label=\"Top\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 4l-8 8h5v8h6v-8h5z\"\/><\/svg>\r\n <\/button>\r\n <a href=\"https:\/\/wa.me\/94721177797\" target=\"_blank\" class=\"wa-btn\" aria-label=\"WhatsApp\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n <\/a>\r\n<\/div>\r\n\r\n<!-- =============================================\r\n SCRIPTS\r\n ============================================= -->\r\n<script>\r\n\/* Loader *\/\r\nwindow.addEventListener('load',()=>{\r\n setTimeout(()=>document.getElementById('loader').classList.add('out'),2200);\r\n});\r\n\r\n\/* Nav stuck *\/\r\nconst nav=document.getElementById('nav');\r\nwindow.addEventListener('scroll',()=>{\r\n nav.classList.toggle('stuck',scrollY>30);\r\n document.getElementById('stb').classList.toggle('on',scrollY>500);\r\n});\r\n\r\n\/* Mobile nav *\/\r\nconst nb=document.getElementById('nb'),mn=document.getElementById('mn');\r\nnb.addEventListener('click',()=>{\r\n nb.classList.toggle('open');mn.classList.toggle('open');\r\n});\r\ndocument.querySelectorAll('.ml').forEach(a=>a.addEventListener('click',()=>{\r\n nb.classList.remove('open');mn.classList.remove('open');\r\n}));\r\n\r\n\/* Ticker *\/\r\n(function(){\r\n const items=['Website Design','Logo Creation','Social Media','Video Editing','Digital Marketing','Photo Editing','Music Production','Web Development'];\r\n const t=document.getElementById('tickerTrack');\r\n const doubled=[...items,...items,...items,...items];\r\n doubled.forEach(i=>{\r\n const s=document.createElement('span');\r\n s.innerHTML=i.includes('Design')||i.includes('Logo')||i.includes('Media')\r\n ?`<em>${i}<\/em>`:i;\r\n t.appendChild(s);\r\n const div=document.createElement('span');\r\n div.textContent='\u2014';div.style.color='var(--vi)';div.style.padding='0 1rem';\r\n t.appendChild(div);\r\n });\r\n})();\r\n\r\n\/* Marquee *\/\r\n(function(){\r\n const items=['Logo Design','Web Dev','Social Media','Video Editing','Digital Marketing','Photo Editing','Music Production','Brand Identity'];\r\n const t=document.getElementById('marqTrack');\r\n const doubled=[...items,...items,...items,...items];\r\n doubled.forEach(i=>{\r\n const s=document.createElement('span');\r\n s.innerHTML=`${i}<em> \u2726 <\/em>`;\r\n t.appendChild(s);\r\n });\r\n})();\r\n\r\n\/* Portfolio tabs *\/\r\ndocument.querySelectorAll('.pt').forEach(btn=>{\r\n btn.addEventListener('click',()=>{\r\n document.querySelectorAll('.pt').forEach(b=>b.classList.remove('on'));\r\n document.querySelectorAll('.tab-pane').forEach(p=>p.classList.remove('on'));\r\n btn.classList.add('on');\r\n document.getElementById('tab-'+btn.dataset.tab).classList.add('on');\r\n });\r\n});\r\n\r\n\/* YouTube *\/\r\nfunction openYT(id){window.open('https:\/\/www.youtube.com\/watch?v='+id,'_blank')}\r\n\r\n\/* Scroll reveal *\/\r\nconst rvObs=new IntersectionObserver(entries=>{\r\n entries.forEach(e=>{\r\n if(e.isIntersecting){\r\n const siblings=e.target.parentElement.querySelectorAll('.rv,.rv-left,.rv-right');\r\n const idx=Array.from(siblings).indexOf(e.target);\r\n e.target.style.transitionDelay=(idx*0.07)+'s';\r\n e.target.classList.add('in');\r\n rvObs.unobserve(e.target);\r\n }\r\n });\r\n},{threshold:0.1});\r\ndocument.querySelectorAll('.rv,.rv-left,.rv-right').forEach(el=>rvObs.observe(el));\r\n\r\n\/* Counters *\/\r\nconst cntObs=new IntersectionObserver(entries=>{\r\n entries.forEach(e=>{\r\n if(e.isIntersecting){\r\n const el=e.target;\r\n const target=parseInt(el.dataset.target);\r\n if(!target)return;\r\n let v=0;\r\n const step=Math.max(1,Math.ceil(target\/60));\r\n const suffix=el.nextElementSibling?.textContent||'';\r\n const t=setInterval(()=>{\r\n v+=step;\r\n if(v>=target){el.textContent=target;clearInterval(t);}\r\n else el.textContent=v;\r\n },20);\r\n cntObs.unobserve(el);\r\n }\r\n });\r\n},{threshold:0.5});\r\ndocument.querySelectorAll('[data-target]').forEach(el=>cntObs.observe(el));\r\n\r\n\/* WhatsApp form *\/\r\nfunction sendWA(){\r\n const name=document.getElementById('fn').value.trim()||'N\/A';\r\n const phone=document.getElementById('fp').value.trim()||'N\/A';\r\n const email=document.getElementById('fe').value.trim()||'N\/A';\r\n const svc=document.getElementById('fs').value||'Not specified';\r\n const msg=document.getElementById('fm').value.trim()||'N\/A';\r\n const txt=encodeURIComponent(\r\n `Hello NICO PIXEL! \ud83d\udc4b\\n\\n*Name:* ${name}\\n*Phone:* ${phone}\\n*Email:* ${email}\\n*Service:* ${svc}\\n*Message:* ${msg}`\r\n );\r\n window.open('https:\/\/wa.me\/94721177797?text='+txt,'_blank');\r\n}\r\n\r\n\/* Reviews drag scroll *\/\r\n(function(){\r\n const el=document.getElementById('rScroll');\r\n let isDown=false,startX,scrollLeft;\r\n el.addEventListener('mousedown',e=>{isDown=true;startX=e.pageX-el.offsetLeft;scrollLeft=el.scrollLeft;el.style.cursor='grabbing'});\r\n el.addEventListener('mouseleave',()=>{isDown=false;el.style.cursor='default'});\r\n el.addEventListener('mouseup',()=>{isDown=false;el.style.cursor='default'});\r\n el.addEventListener('mousemove',e=>{if(!isDown)return;e.preventDefault();const x=e.pageX-el.offsetLeft;el.scrollLeft=scrollLeft-(x-startX)*1.2});\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NICO PIXEL \u2014 Creative Digital Studio <div><h1>BRAND<\/h1><\/div> NICOPIXEL Initializing Studio NICOPIXEL Services Work Clients Team Reviews Contact Services Work Clients Team Reviews Contact Moratuwa, Sri Lanka \u2014 Est. 2019 NICO PIXEL 15+Clients 35+Projects 5+Years View Our Work Start a Project \/\/ Portfolio Showcase 2025 \/\/ 01 What WeBuild End-to-end digital solutions for brands that demand […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":147,"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":173,"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/173"}],"wp:attachment":[{"href":"https:\/\/nicopixel.cfd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}