{"id":9,"date":"2026-07-01T12:04:47","date_gmt":"2026-07-01T12:04:47","guid":{"rendered":"https:\/\/adfusionquad.us.cc\/?page_id=9"},"modified":"2026-07-28T06:33:27","modified_gmt":"2026-07-28T06:33:27","slug":"adfusionquad","status":"publish","type":"page","link":"https:\/\/adfusionquad.us.cc\/?page_id=9","title":{"rendered":"AdFusionQuad"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\n\n\n\n\nAdFusionQuad \u2014 Gaming, Beauty, Craft & Ride, United<\/title>\n<meta name=\"description\" content=\"AdFusionQuad brings four passions together under one roof: ProjektGaming, BeautyHub, Who I Am, and JeetXMoto. Premium gear for gamers, beauty lovers, makers, and riders.\">\n<meta name=\"keywords\" content=\"AdFusionQuad, ProjektGaming, BeautyHub, Who I Am, JeetXMoto, gaming accessories, beauty products, handmade crafts, motorcycle gear\">\n<meta name=\"author\" content=\"AdFusionQuad\">\n<meta name=\"theme-color\" content=\"#08080c\">\n<meta property=\"og:title\" content=\"AdFusionQuad \u2014 Where Gaming, Beauty, Creativity & Adventure Unite\">\n<meta property=\"og:description\" content=\"Four brands. One community. Explore ProjektGaming, BeautyHub, Who I Am, and JeetXMoto.\">\n<meta property=\"og:type\" content=\"website\">\n<link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\u25c6<\/text><\/svg>\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ============================================================\n ADFUSIONQUAD \u2014 PREMIUM HOME PAGE\n Design tokens live in :root. Four brand accents layered on\n one dark glass system. Signature element: the \"Quad Core\"\n mark \u2014 four orbiting nodes around a central hub, reused as\n the hero centerpiece and the scroll-progress indicator.\n ============================================================ *\/\n\n:root{\n \/* ---- base surfaces ---- *\/\n --bg: #08080c;\n --bg-soft: #0d0d14;\n --bg-elevate: #121220;\n --glass: rgba(255,255,255,0.045);\n --glass-strong: rgba(255,255,255,0.08);\n --glass-border: rgba(255,255,255,0.09);\n --line: rgba(255,255,255,0.08);\n\n \/* ---- text ---- *\/\n --text-hi: #f5f4fb;\n --text-mid: #b9b8c9;\n --text-low: #78788f;\n\n \/* ---- umbrella brand gradient ---- *\/\n --quad-1: #7B61FF; \/* violet *\/\n --quad-2: #C264F5; \/* orchid *\/\n --quad-3: #FF3EA5; \/* magenta *\/\n --quad-grad: linear-gradient(120deg, var(--quad-1), var(--quad-2) 55%, var(--quad-3));\n\n \/* ---- brand accents ---- *\/\n --gaming: #00F0FF;\n --gaming-2: #6B5CFF;\n --beauty: #FF6FB5;\n --beauty-2: #FFC1DD;\n --craft: #E8823C;\n --craft-2: #F5B54C;\n --moto: #FF5722;\n --moto-2: #FF9142;\n\n \/* ---- type ---- *\/\n --f-display: 'Unbounded', system-ui, sans-serif;\n --f-body: 'Plus Jakarta Sans', system-ui, sans-serif;\n --f-mono: 'Space Mono', monospace;\n\n \/* ---- scale ---- *\/\n --radius-s: 10px;\n --radius-m: 18px;\n --radius-l: 28px;\n --radius-xl: 40px;\n --ease: cubic-bezier(.16,.84,.44,1);\n --ease-soft: cubic-bezier(.4,0,.2,1);\n\n --maxw: 1320px;\n}\n\n*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }\n\nhtml{\n scroll-behavior:smooth;\n background:var(--bg);\n}\n\n@media (prefers-reduced-motion: reduce){\n html{ scroll-behavior:auto; }\n *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }\n}\n\nbody{\n background:var(--bg);\n color:var(--text-mid);\n font-family:var(--f-body);\n font-size:16px;\n line-height:1.6;\n overflow-x:hidden;\n -webkit-font-smoothing:antialiased;\n text-rendering:optimizeLegibility;\n}\n\nimg{ max-width:100%; display:block; }\na{ color:inherit; text-decoration:none; }\nul{ list-style:none; }\nbutton{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }\ninput{ font-family:inherit; }\nsvg{ display:block; }\n\n::selection{ background:var(--quad-1); color:#fff; }\n\n::-webkit-scrollbar{ width:10px; }\n::-webkit-scrollbar-track{ background:var(--bg); }\n::-webkit-scrollbar-thumb{ background:linear-gradient(var(--quad-1),var(--quad-3)); border-radius:10px; }\n\nh1,h2,h3,h4{\n font-family:var(--f-display);\n color:var(--text-hi);\n line-height:1.12;\n letter-spacing:-0.01em;\n}\n\n.container{\n max-width:var(--maxw);\n margin:0 auto;\n padding:0 32px;\n}\n\n.eyebrow{\n font-family:var(--f-mono);\n font-size:12.5px;\n letter-spacing:0.18em;\n text-transform:uppercase;\n color:var(--text-low);\n display:inline-flex;\n align-items:center;\n gap:10px;\n}\n.eyebrow::before{\n content:'';\n width:22px; height:1px;\n background:var(--quad-grad);\n}\n\n.grad-text{\n background:var(--quad-grad);\n -webkit-background-clip:text;\n background-clip:text;\n color:transparent;\n}\n\n\/* generic reveal-on-scroll target *\/\n.reveal{\n opacity:0;\n transform:translateY(36px);\n transition:opacity .9s var(--ease), transform .9s var(--ease);\n will-change:transform,opacity;\n}\n.reveal.in-view{ opacity:1; transform:translateY(0); }\n.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .8s var(--ease), transform .8s var(--ease); }\n.reveal-scale.in-view{ opacity:1; transform:scale(1); }\n.reveal-left{ opacity:0; transform:translateX(-46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }\n.reveal-left.in-view{ opacity:1; transform:translateX(0); }\n.reveal-right{ opacity:0; transform:translateX(46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }\n.reveal-right.in-view{ opacity:1; transform:translateX(0); }\n\n.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }\n\n\/* section spacing rhythm *\/\n.section{ position:relative; padding:150px 0; }\n.section-tight{ padding:110px 0; }\n@media(max-width:900px){\n .section{ padding:100px 0; }\n .section-tight{ padding:80px 0; }\n}\n\n.section-head{\n max-width:640px;\n margin-bottom:64px;\n}\n.section-head h2{\n font-size:clamp(32px,4.4vw,52px);\n margin-top:16px;\n}\n.section-head p{\n margin-top:18px;\n font-size:17px;\n color:var(--text-mid);\n max-width:520px;\n}\n.section-head.center{\n margin-left:auto; margin-right:auto;\n text-align:center;\n}\n.section-head.center p{ margin-left:auto; margin-right:auto; }\n.section-head.center .eyebrow::before{ display:none; }\n\n\/* glass card base *\/\n.glass{\n background:var(--glass);\n border:1px solid var(--glass-border);\n backdrop-filter:blur(18px);\n -webkit-backdrop-filter:blur(18px);\n border-radius:var(--radius-l);\n}\n\n\/* premium buttons *\/\n.btn{\n position:relative;\n display:inline-flex;\n align-items:center;\n gap:10px;\n font-family:var(--f-body);\n font-weight:700;\n font-size:15px;\n padding:16px 30px;\n border-radius:100px;\n overflow:hidden;\n isolation:isolate;\n cursor:pointer;\n transition:transform .45s var(--ease), box-shadow .45s var(--ease);\n}\n.btn:active{ transform:scale(.96); }\n.btn-primary{\n background:var(--quad-grad);\n color:#0a0a12;\n box-shadow:0 0 0 rgba(123,97,255,0);\n}\n.btn-primary:hover{\n transform:translateY(-3px);\n box-shadow:0 14px 40px -8px rgba(123,97,255,.55);\n}\n.btn-ghost{\n color:var(--text-hi);\n background:rgba(255,255,255,.04);\n border:1px solid rgba(255,255,255,.16);\n}\n.btn-ghost:hover{\n border-color:rgba(255,255,255,.4);\n transform:translateY(-3px);\n background:rgba(255,255,255,.08);\n}\n.btn .ripple{\n position:absolute;\n border-radius:50%;\n background:rgba(255,255,255,.5);\n transform:scale(0);\n animation:ripple .7s var(--ease-soft);\n pointer-events:none;\n}\n@keyframes ripple{ to{ transform:scale(3); opacity:0; } }\n\n.btn-arrow{ transition:transform .4s var(--ease); }\n.btn:hover .btn-arrow{ transform:translateX(5px); }\n\n\/* ============================== LOADER ============================== *\/\n#loader{\n position:fixed; inset:0; z-index:9999;\n background:var(--bg);\n display:flex; align-items:center; justify-content:center;\n flex-direction:column; gap:26px;\n transition:opacity .8s var(--ease-soft), visibility .8s var(--ease-soft);\n}\n#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }\n.loader-mark{ position:relative; width:88px; height:88px; }\n.loader-mark .core{\n position:absolute; inset:36%;\n border-radius:50%;\n background:var(--quad-grad);\n box-shadow:0 0 30px rgba(194,100,245,.7);\n animation:pulseCore 1.4s ease-in-out infinite;\n}\n@keyframes pulseCore{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.25);} }\n.loader-mark .node{\n position:absolute; width:12px; height:12px; border-radius:50%;\n top:50%; left:50%;\n margin:-6px 0 0 -6px;\n animation:orbit 1.8s linear infinite;\n}\n.loader-mark .node:nth-child(2){ background:var(--gaming); animation-delay:0s; }\n.loader-mark .node:nth-child(3){ background:var(--beauty); animation-delay:-.45s; }\n.loader-mark .node:nth-child(4){ background:var(--craft); animation-delay:-.9s; }\n.loader-mark .node:nth-child(5){ background:var(--moto); animation-delay:-1.35s; }\n@keyframes orbit{\n from{ transform:rotate(0deg) translateX(40px) rotate(0deg); }\n to{ transform:rotate(360deg) translateX(40px) rotate(-360deg); }\n}\n.loader-mark .node:nth-child(3){ animation-name:orbit2; }\n.loader-mark .node:nth-child(4){ animation-name:orbit3; }\n.loader-mark .node:nth-child(5){ animation-name:orbit4; }\n@keyframes orbit2{ from{transform:rotate(90deg) translateX(40px) rotate(-90deg);} to{transform:rotate(450deg) translateX(40px) rotate(-450deg);} }\n@keyframes orbit3{ from{transform:rotate(180deg) translateX(40px) rotate(-180deg);} to{transform:rotate(540deg) translateX(40px) rotate(-540deg);} }\n@keyframes orbit4{ from{transform:rotate(270deg) translateX(40px) rotate(-270deg);} to{transform:rotate(630deg) translateX(40px) rotate(-630deg);} }\n.loader-text{\n font-family:var(--f-mono); font-size:12px; letter-spacing:.3em;\n text-transform:uppercase; color:var(--text-low);\n}\n.loader-text span{ color:var(--text-hi); }\n\n\/* ============================== CUSTOM CURSOR ============================== *\/\n.cursor-dot,.cursor-ring{\n position:fixed; top:0; left:0; pointer-events:none; z-index:9998;\n border-radius:50%;\n transform:translate(-50%,-50%);\n will-change:transform;\n}\n.cursor-dot{ width:6px; height:6px; background:var(--text-hi); }\n.cursor-ring{\n width:34px; height:34px; border:1px solid rgba(255,255,255,.4);\n transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);\n}\n.cursor-ring.active{ width:64px; height:64px; background:rgba(255,255,255,.06); border-color:var(--quad-2); }\n@media(hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }\n\n\/* ============================== SCROLL PROGRESS (QUAD CORE) ============================== *\/\n#scroll-quad{\n position:fixed; right:26px; top:50%; transform:translateY(-50%);\n z-index:500; width:64px; height:64px;\n display:flex; align-items:center; justify-content:center;\n}\n#scroll-quad svg{ width:100%; height:100%; transform:rotate(-90deg); }\n#scroll-quad circle.track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:2; }\n#scroll-quad circle.bar{ fill:none; stroke-width:2.4; stroke-linecap:round; transition:stroke-dashoffset .1s linear; }\n#scroll-quad .core-dot{\n position:absolute; width:9px; height:9px; border-radius:50%;\n background:var(--quad-grad); box-shadow:0 0 12px rgba(194,100,245,.8);\n}\n@media(max-width:1100px){ #scroll-quad{ display:none; } }\n\n\/* ============================== HEADER \/ NAV ============================== *\/\nheader#site-header{\n position:fixed; top:0; left:0; right:0; z-index:900;\n padding:20px 0;\n transition:background .5s var(--ease-soft), padding .5s var(--ease-soft), border-color .5s var(--ease-soft);\n border-bottom:1px solid transparent;\n}\nheader#site-header.scrolled{\n background:rgba(8,8,12,.72);\n backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);\n padding:14px 0;\n border-bottom-color:var(--line);\n}\n.nav-inner{\n display:flex; align-items:center; justify-content:space-between; gap:24px;\n}\n.logo{\n display:flex; align-items:center; gap:12px;\n font-family:var(--f-display); font-weight:700; font-size:19px; color:var(--text-hi);\n}\n.logo-mark{ position:relative; width:30px; height:30px; flex:none; }\n.logo-mark .lm-core{ position:absolute; inset:32%; border-radius:4px; background:var(--quad-grad); transform:rotate(45deg); }\n.logo-mark .lm-node{ position:absolute; width:6px; height:6px; border-radius:50%; }\n.logo-mark .lm-node:nth-child(1){ top:0; left:50%; margin-left:-3px; background:var(--gaming); }\n.logo-mark .lm-node:nth-child(2){ right:0; top:50%; margin-top:-3px; background:var(--beauty); }\n.logo-mark .lm-node:nth-child(3){ bottom:0; left:50%; margin-left:-3px; background:var(--craft); }\n.logo-mark .lm-node:nth-child(4){ left:0; top:50%; margin-top:-3px; background:var(--moto); }\n.logo small{ display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:var(--text-low); font-weight:400; }\n\nnav.main-nav{ display:flex; align-items:center; gap:36px; }\nnav.main-nav a{\n font-size:14.5px; font-weight:600; color:var(--text-mid);\n position:relative; padding:6px 0;\n transition:color .3s;\n}\nnav.main-nav a::after{\n content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;\n background:var(--quad-grad); transition:width .35s var(--ease);\n}\nnav.main-nav a:hover{ color:var(--text-hi); }\nnav.main-nav a:hover::after{ width:100%; }\n\n.nav-actions{ display:flex; align-items:center; gap:14px; }\n.nav-cta{ padding:12px 24px; font-size:13.5px; }\n\n.nav-toggle{\n display:none; flex-direction:column; gap:5px; width:26px; z-index:1100;\n}\n.nav-toggle span{ height:2px; background:var(--text-hi); border-radius:2px; transition:transform .4s var(--ease), opacity .4s var(--ease); }\n.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }\n.nav-toggle.open span:nth-child(2){ opacity:0; }\n.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }\n\n@media(max-width:900px){\n nav.main-nav{\n position:fixed; inset:0 0 0 30%; top:0;\n background:rgba(10,10,16,.98); backdrop-filter:blur(20px);\n flex-direction:column; justify-content:center; align-items:flex-start;\n padding:40px; gap:26px;\n transform:translateX(100%); transition:transform .55s var(--ease);\n border-left:1px solid var(--line);\n }\n nav.main-nav.open{ transform:translateX(0); }\n nav.main-nav a{ font-size:22px; }\n .nav-toggle{ display:flex; }\n .nav-actions .nav-cta{ display:none; }\n}\n\n\/* ============================== HERO ============================== *\/\n#hero{\n position:relative; min-height:100vh;\n display:flex; align-items:center;\n overflow:hidden;\n background:\n radial-gradient(ellipse 60% 50% at 50% 0%, rgba(123,97,255,.18), transparent 60%),\n radial-gradient(ellipse 50% 40% at 85% 80%, rgba(255,62,165,.12), transparent 60%),\n var(--bg);\n}\n#particle-canvas{ position:absolute; inset:0; z-index:1; }\n.hero-glow{\n position:absolute; border-radius:50%; filter:blur(90px); z-index:1; opacity:.55;\n pointer-events:none;\n}\n.hero-glow.g1{ width:520px; height:520px; background:var(--quad-1); top:-10%; left:-8%; }\n.hero-glow.g2{ width:420px; height:420px; background:var(--quad-3); bottom:-12%; right:-6%; }\n\n.hero-grid{\n position:absolute; inset:0; z-index:1;\n background-image:\n linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);\n background-size:64px 64px;\n mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);\n}\n\n.hero-inner{\n position:relative; z-index:5;\n max-width:var(--maxw); margin:0 auto; padding:150px 32px 90px;\n display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;\n width:100%;\n}\n.hero-copy .eyebrow{ margin-bottom:22px; }\n.hero-copy h1{\n font-size:clamp(42px,6.2vw,84px);\n font-weight:800;\n letter-spacing:-0.02em;\n}\n.hero-copy h1 .line{ display:block; overflow:hidden; }\n.hero-copy h1 .line span{ display:inline-block; transform:translateY(115%); animation:lineUp .9s var(--ease) forwards; }\n.hero-copy h1 .line:nth-child(1) span{ animation-delay:.15s; }\n.hero-copy h1 .line:nth-child(2) span{ animation-delay:.32s; }\n@keyframes lineUp{ to{ transform:translateY(0); } }\n\n.hero-copy .subtitle{\n margin-top:26px; font-size:19px; color:var(--text-mid); max-width:480px;\n opacity:0; animation:fadeUp .9s var(--ease) forwards; animation-delay:.6s;\n}\n.hero-copy .hero-btns{\n margin-top:40px; display:flex; gap:16px; flex-wrap:wrap;\n opacity:0; animation:fadeUp .9s var(--ease) forwards; animation-delay:.78s;\n}\n@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }\n\n.hero-stats{\n margin-top:56px; display:flex; gap:38px;\n opacity:0; animation:fadeUp .9s var(--ease) forwards; animation-delay:.95s;\n}\n.hero-stats div b{\n display:block; font-family:var(--f-display); font-size:26px; color:var(--text-hi);\n}\n.hero-stats div span{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-low); letter-spacing:.05em; }\n\n\/* 3D scene: quad core + floating brand chips + gaming controller *\/\n.hero-scene{\n position:relative; height:560px;\n perspective:1200px;\n}\n.quad-core-wrap{\n position:absolute; inset:0; margin:auto; width:340px; height:340px;\n transform-style:preserve-3d;\n animation:sceneFloat 7s ease-in-out infinite;\n}\n@keyframes sceneFloat{ 0%,100%{ transform:translateY(0) rotateX(4deg); } 50%{ transform:translateY(-18px) rotateX(-2deg); } }\n\n.core-hub{\n position:absolute; inset:38%;\n border-radius:32%;\n background:var(--quad-grad);\n box-shadow:0 0 60px rgba(194,100,245,.55), 0 0 120px rgba(123,97,255,.35);\n animation:hubSpin 12s linear infinite;\n}\n@keyframes hubSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }\n\n.orbit-ring{\n position:absolute; inset:0; border:1px dashed rgba(255,255,255,.12); border-radius:50%;\n}\n.orbit-ring.r2{ inset:14%; border-color:rgba(255,255,255,.07); animation:ringSpin 30s linear infinite; }\n.orbit-ring.r1{ animation:ringSpin 22s linear infinite reverse; }\n@keyframes ringSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }\n\n.brand-chip{\n position:absolute; width:96px; height:96px; border-radius:24px;\n display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;\n backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);\n border:1px solid var(--glass-border);\n font-family:var(--f-mono); font-size:10px; letter-spacing:.05em; color:var(--text-hi);\n animation:chipFloat 6s ease-in-out infinite;\n}\n.brand-chip .ic{ font-size:26px; }\n.brand-chip.c-game{ top:-4%; left:8%; background:rgba(0,240,255,.09); box-shadow:0 0 34px rgba(0,240,255,.25); animation-delay:0s; }\n.brand-chip.c-beauty{ top:2%; right:2%; background:rgba(255,111,181,.1); box-shadow:0 0 34px rgba(255,111,181,.25); animation-delay:1.4s; }\n.brand-chip.c-craft{ bottom:0%; left:0%; background:rgba(232,130,60,.11); box-shadow:0 0 34px rgba(232,130,60,.25); animation-delay:2.8s; }\n.brand-chip.c-moto{ bottom:-2%; right:10%; background:rgba(255,87,34,.11); box-shadow:0 0 34px rgba(255,87,34,.25); animation-delay:4.2s; }\n@keyframes chipFloat{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-14px) rotate(3deg);} }\n\n.hero-scroll-indicator{\n position:absolute; bottom:36px; left:50%; transform:translateX(-50%);\n z-index:5; display:flex; flex-direction:column; align-items:center; gap:10px;\n font-family:var(--f-mono); font-size:10.5px; letter-spacing:.25em; color:var(--text-low);\n text-transform:uppercase;\n}\n.scroll-mouse{\n width:24px; height:38px; border:1.5px solid rgba(255,255,255,.35); border-radius:14px;\n position:relative;\n}\n.scroll-mouse::after{\n content:''; position:absolute; top:7px; left:50%; width:3px; height:8px; margin-left:-1.5px;\n background:var(--text-hi); border-radius:2px;\n animation:scrollDot 1.8s ease-in-out infinite;\n}\n@keyframes scrollDot{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(12px);} 100%{ opacity:0;} }\n\n@media(max-width:980px){\n .hero-inner{ grid-template-columns:1fr; padding-top:130px; }\n .hero-scene{ height:400px; order:-1; }\n .hero-stats{ flex-wrap:wrap; row-gap:20px; }\n}\n\n\/* ============================== ABOUT ============================== *\/\n#about{ position:relative; background:var(--bg-soft); }\n#about-particles{ position:absolute; inset:0; z-index:0; opacity:.6; }\n.about-grid{\n position:relative; z-index:2;\n display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:start;\n}\n.about-copy p{ font-size:16.5px; margin-top:16px; color:var(--text-mid); }\n.about-copy p strong{ color:var(--text-hi); font-weight:700; }\n.about-copy h3{ font-size:20px; margin-top:34px; margin-bottom:6px; color:var(--text-hi); }\n\n.why-grid{\n display:grid; grid-template-columns:1fr 1fr; gap:16px;\n}\n.why-card{\n padding:22px 20px;\n display:flex; align-items:flex-start; gap:14px;\n transition:transform .5s var(--ease), border-color .5s, background .5s;\n}\n.why-card:hover{\n transform:translateY(-6px);\n border-color:rgba(194,100,245,.4);\n background:rgba(255,255,255,.07);\n}\n.why-card .wc-ic{\n flex:none; width:40px; height:40px; border-radius:12px;\n display:flex; align-items:center; justify-content:center;\n background:var(--quad-grad); color:#0a0a12;\n}\n.why-card .wc-ic svg{ width:19px; height:19px; }\n.why-card b{ display:block; color:var(--text-hi); font-size:14.5px; margin-bottom:3px; }\n.why-card span{ font-size:13px; color:var(--text-low); }\n\n.about-visual{\n position:relative;\n}\n.vision-card{\n padding:36px 34px; position:relative; overflow:hidden;\n}\n.vision-card::before{\n content:''; position:absolute; inset:0;\n background:radial-gradient(circle at 30% 20%, rgba(123,97,255,.25), transparent 60%);\n pointer-events:none;\n}\n.vision-card .quote-mark{\n font-family:var(--f-display); font-size:64px; line-height:1; color:transparent;\n -webkit-text-stroke:1.5px rgba(255,255,255,.25);\n margin-bottom:8px;\n}\n.vision-card p{ font-size:18px; color:var(--text-hi); line-height:1.55; position:relative; z-index:1; }\n.vision-card p + p{ margin-top:16px; color:var(--text-mid); font-size:15.5px; }\n\n@media(max-width:980px){\n .about-grid{ grid-template-columns:1fr; gap:44px; }\n .why-grid{ grid-template-columns:1fr; }\n}\n\n\/* ============================== OUR BRANDS ============================== *\/\n#brands{ position:relative; }\n.brand-stack{ display:flex; flex-direction:column; gap:26px; }\n\n.brand-card{\n position:relative;\n min-height:520px;\n border-radius:var(--radius-xl);\n overflow:hidden;\n display:grid; grid-template-columns:1fr 1fr;\n align-items:stretch;\n border:1px solid var(--glass-border);\n isolation:isolate;\n transform-style:preserve-3d;\n transition:transform .5s var(--ease), box-shadow .6s var(--ease);\n}\n.brand-card:hover{ box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }\n\n.brand-bg{\n position:absolute; inset:0; z-index:0;\n background-size:cover; background-position:center;\n transform:scale(1.15);\n transition:transform .9s var(--ease-soft), filter .6s;\n filter:saturate(1.05) brightness(.62);\n}\n.brand-card:hover .brand-bg{ transform:scale(1.22); }\n\n.brand-scrim{\n position:absolute; inset:0; z-index:1;\n}\n.brand-card.game .brand-scrim{ background:linear-gradient(100deg, rgba(6,10,18,.94) 38%, rgba(6,10,18,.35) 75%, rgba(0,240,255,.12)); }\n.brand-card.beauty .brand-scrim{ background:linear-gradient(100deg, rgba(20,8,16,.94) 38%, rgba(20,8,16,.35) 75%, rgba(255,111,181,.14)); }\n.brand-card.craft .brand-scrim{ background:linear-gradient(100deg, rgba(18,11,4,.94) 38%, rgba(18,11,4,.35) 75%, rgba(232,130,60,.14)); }\n.brand-card.moto .brand-scrim{ background:linear-gradient(100deg, rgba(16,7,4,.94) 38%, rgba(16,7,4,.35) 75%, rgba(255,87,34,.15)); }\n\n.brand-content{\n position:relative; z-index:3;\n padding:56px 52px;\n display:flex; flex-direction:column; justify-content:center;\n gap:20px;\n}\n.brand-tag{\n font-family:var(--f-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;\n display:inline-flex; align-items:center; gap:8px; width:fit-content;\n padding:7px 14px; border-radius:100px; border:1px solid;\n}\n.brand-card.game .brand-tag{ color:var(--gaming); border-color:rgba(0,240,255,.4); background:rgba(0,240,255,.06); }\n.brand-card.beauty .brand-tag{ color:var(--beauty); border-color:rgba(255,111,181,.4); background:rgba(255,111,181,.06); }\n.brand-card.craft .brand-tag{ color:var(--craft-2); border-color:rgba(232,130,60,.4); background:rgba(232,130,60,.06); }\n.brand-card.moto .brand-tag{ color:var(--moto-2); border-color:rgba(255,87,34,.4); background:rgba(255,87,34,.06); }\n\n.brand-content h3{ font-size:clamp(30px,3.4vw,44px); display:flex; align-items:center; gap:14px; }\n.brand-content h3 .emoji{ font-size:0.75em; }\n.brand-content p.desc{ font-size:16px; color:var(--text-mid); max-width:420px; }\n\n.brand-pills{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; }\n.brand-pills span{\n font-size:12.5px; padding:8px 14px; border-radius:100px;\n background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);\n color:var(--text-mid); transition:all .35s var(--ease);\n}\n.brand-card.game .brand-pills span:hover{ background:rgba(0,240,255,.14); color:#fff; border-color:var(--gaming); }\n.brand-card.beauty .brand-pills span:hover{ background:rgba(255,111,181,.16); color:#fff; border-color:var(--beauty); }\n.brand-card.craft .brand-pills span:hover{ background:rgba(232,130,60,.16); color:#fff; border-color:var(--craft); }\n.brand-card.moto .brand-pills span:hover{ background:rgba(255,87,34,.16); color:#fff; border-color:var(--moto); }\n\n.brand-cta{\n margin-top:10px; display:inline-flex; align-items:center; gap:9px;\n font-weight:700; font-size:14.5px; width:fit-content;\n padding-bottom:3px; border-bottom:1.5px solid currentColor;\n}\n.brand-card.game .brand-cta{ color:var(--gaming); }\n.brand-card.beauty .brand-cta{ color:var(--beauty); }\n.brand-card.craft .brand-cta{ color:var(--craft-2); }\n.brand-card.moto .brand-cta{ color:var(--moto-2); }\n.brand-cta svg{ width:15px; height:15px; transition:transform .4s var(--ease); }\n.brand-card:hover .brand-cta svg{ transform:translateX(6px); }\n\n\/* right-side decorative stage per brand (parallax layers) *\/\n.brand-stage{\n position:relative; z-index:2; overflow:hidden;\n}\n.parallax-layer{ position:absolute; transition:transform .25s ease-out; }\n\n\/* Gaming: floating controller + rgb rings *\/\n.brand-card.game .rgb-ring{\n position:absolute; border-radius:50%; border:2px solid;\n animation:rgbCycle 6s linear infinite;\n}\n.brand-card.game .rgb-ring.r1{ width:260px; height:260px; top:14%; right:6%; }\n.brand-card.game .rgb-ring.r2{ width:340px; height:340px; top:2%; right:-4%; animation-duration:9s; animation-direction:reverse; }\n@keyframes rgbCycle{\n 0%{ border-color:#00F0FF; box-shadow:0 0 30px #00F0FF55; }\n 33%{ border-color:#7B61FF; box-shadow:0 0 30px #7B61FF55; }\n 66%{ border-color:#FF3EA5; box-shadow:0 0 30px #FF3EA555; }\n 100%{ border-color:#00F0FF; box-shadow:0 0 30px #00F0FF55; }\n}\n.controller-float{\n position:absolute; right:16%; top:38%; font-size:88px;\n filter:drop-shadow(0 0 24px rgba(0,240,255,.5));\n animation:controllerFloat 5s ease-in-out infinite;\n}\n@keyframes controllerFloat{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-20px) rotate(4deg);} }\n\n\/* Beauty: sparkles + brush *\/\n.brand-card.beauty .sparkle{\n position:absolute; color:var(--beauty-2); font-size:18px;\n animation:sparkleTwinkle 2.4s ease-in-out infinite;\n filter:drop-shadow(0 0 8px rgba(255,111,181,.8));\n}\n@keyframes sparkleTwinkle{ 0%,100%{ opacity:.15; transform:scale(.7);} 50%{ opacity:1; transform:scale(1.15);} }\n.brush-float{\n position:absolute; right:18%; top:34%; font-size:80px;\n animation:brushFloat 6s ease-in-out infinite;\n filter:drop-shadow(0 0 20px rgba(255,111,181,.55));\n}\n@keyframes brushFloat{ 0%,100%{ transform:translateY(0) rotate(10deg);} 50%{ transform:translateY(-18px) rotate(-6deg);} }\n\n\/* Craft: paint splashes + canvas *\/\n.brand-card.craft .paint-blob{\n position:absolute; border-radius:50% 45% 55% 48%; opacity:.5; filter:blur(1px);\n animation:blobMorph 8s ease-in-out infinite;\n}\n@keyframes blobMorph{\n 0%,100%{ border-radius:50% 45% 55% 48%; transform:rotate(0deg) scale(1); }\n 50%{ border-radius:42% 58% 40% 60%; transform:rotate(12deg) scale(1.08); }\n}\n.brush-craft-float{\n position:absolute; right:16%; top:32%; font-size:82px;\n animation:brushFloat 5.5s ease-in-out infinite;\n filter:drop-shadow(0 0 20px rgba(232,130,60,.5));\n}\n\n\/* Moto: road + headlight + smoke *\/\n.brand-card.moto .road-line{\n position:absolute; bottom:14%; left:0; right:0; height:3px;\n background:repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 26px, transparent 26px 52px);\n animation:roadMove 1.1s linear infinite;\n}\n@keyframes roadMove{ from{ background-position:0 0;} to{ background-position:-52px 0;} }\n.bike-float{\n position:absolute; right:14%; top:36%; font-size:90px;\n animation:bikeFloat 4.5s ease-in-out infinite;\n filter:drop-shadow(0 0 26px rgba(255,87,34,.6));\n}\n@keyframes bikeFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }\n.headlight-beam{\n position:absolute; width:200px; height:60px; right:8%; top:44%;\n background:radial-gradient(ellipse at left, rgba(255,145,66,.5), transparent 70%);\n animation:beamPulse 2s ease-in-out infinite;\n}\n@keyframes beamPulse{ 0%,100%{ opacity:.4;} 50%{ opacity:.9;} }\n.smoke{\n position:absolute; width:16px; height:16px; border-radius:50%;\n background:rgba(255,255,255,.18); filter:blur(6px);\n animation:smokeRise 3.4s ease-in infinite;\n}\n@keyframes smokeRise{\n 0%{ transform:translate(0,0) scale(.4); opacity:.5; }\n 100%{ transform:translate(-40px,-90px) scale(1.8); opacity:0; }\n}\n\n@media(max-width:900px){\n .brand-card{ grid-template-columns:1fr; min-height:auto; }\n .brand-stage{ min-height:220px; }\n .brand-content{ padding:40px 28px; }\n}\n\n\/* ============================== SERVICES ============================== *\/\n#services{ background:var(--bg-soft); }\n.services-grid{\n display:grid; grid-template-columns:repeat(4,1fr); gap:20px;\n}\n.service-card{\n padding:32px 26px; position:relative; overflow:hidden;\n transition:transform .5s var(--ease), border-color .5s;\n}\n.service-card::before{\n content:''; position:absolute; inset:0; opacity:0;\n background:radial-gradient(circle at 30% 0%, rgba(194,100,245,.28), transparent 65%);\n transition:opacity .5s;\n}\n.service-card:hover{ transform:translateY(-8px); border-color:rgba(194,100,245,.35); }\n.service-card:hover::before{ opacity:1; }\n.service-ic{\n width:52px; height:52px; border-radius:16px; margin-bottom:20px;\n display:flex; align-items:center; justify-content:center;\n background:linear-gradient(135deg, rgba(123,97,255,.22), rgba(255,62,165,.18));\n border:1px solid rgba(255,255,255,.1);\n position:relative; z-index:1;\n}\n.service-ic svg{ width:24px; height:24px; color:var(--text-hi); }\n.service-card h4{ font-size:16.5px; margin-bottom:8px; position:relative; z-index:1; }\n.service-card p{ font-size:13.5px; color:var(--text-low); position:relative; z-index:1; }\n\n@media(max-width:980px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }\n@media(max-width:560px){ .services-grid{ grid-template-columns:1fr; } }\n\n\/* ============================== WHY CHOOSE US ============================== *\/\n#why{ position:relative; }\n.why-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }\n\n.timeline{ position:relative; padding-left:32px; }\n.timeline::before{\n content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px;\n background:linear-gradient(var(--quad-1),var(--quad-3));\n}\n.tl-item{ position:relative; padding-bottom:38px; }\n.tl-item:last-child{ padding-bottom:0; }\n.tl-item::before{\n content:''; position:absolute; left:-32px; top:2px; width:12px; height:12px; border-radius:50%;\n background:var(--bg); border:2px solid var(--quad-2); box-shadow:0 0 12px rgba(194,100,245,.6);\n}\n.tl-item b{ display:block; color:var(--text-hi); font-size:16px; margin-bottom:5px; }\n.tl-item span{ font-size:14px; color:var(--text-low); }\n\n.stats-panel{\n display:grid; grid-template-columns:1fr 1fr; gap:20px;\n}\n.stat-card{\n padding:34px 28px; text-align:left; position:relative; overflow:hidden;\n}\n.stat-card .stat-num{\n font-family:var(--f-display); font-weight:800; font-size:clamp(34px,4vw,48px);\n background:var(--quad-grad); -webkit-background-clip:text; background-clip:text; color:transparent;\n display:flex; align-items:baseline; gap:2px;\n}\n.stat-card .stat-label{ margin-top:8px; font-size:13.5px; color:var(--text-mid); font-family:var(--f-mono); letter-spacing:.03em; }\n.stat-card::after{\n content:''; position:absolute; width:120px; height:120px; border-radius:50%;\n background:var(--quad-1); opacity:.08; filter:blur(30px); right:-30px; bottom:-30px;\n}\n\n@media(max-width:980px){ .why-layout{ grid-template-columns:1fr; } }\n@media(max-width:560px){ .stats-panel{ grid-template-columns:1fr 1fr; gap:14px; } .stat-card{ padding:24px 20px; } }\n\n\/* ============================== FEATURED PRODUCTS ============================== *\/\n#products{ background:var(--bg-soft); overflow:hidden; }\n.product-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }\n.pf-btn{\n padding:10px 20px; border-radius:100px; font-size:13.5px; font-weight:600;\n border:1px solid var(--glass-border); color:var(--text-mid);\n transition:all .35s var(--ease);\n}\n.pf-btn:hover{ color:var(--text-hi); border-color:rgba(255,255,255,.3); }\n.pf-btn.active{ background:var(--quad-grad); color:#0a0a12; border-color:transparent; }\n\n.product-track-wrap{ position:relative; }\n.product-track{\n display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:20px;\n scrollbar-width:none;\n}\n.product-track::-webkit-scrollbar{ display:none; }\n.product-card{\n flex:0 0 280px; scroll-snap-align:start;\n padding:20px; perspective:900px;\n}\n.product-card .pc-inner{\n transition:transform .6s var(--ease);\n transform-style:preserve-3d;\n}\n.product-card:hover .pc-inner{ transform:rotateY(8deg) rotateX(4deg) translateY(-6px); }\n.product-media{\n height:200px; border-radius:16px; overflow:hidden; position:relative; margin-bottom:18px;\n background-size:cover; background-position:center;\n}\n.product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }\n.product-card:hover .product-media img{ transform:scale(1.14); }\n.product-badge{\n position:absolute; top:12px; left:12px; font-family:var(--f-mono); font-size:10px;\n padding:5px 10px; border-radius:100px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px);\n color:var(--text-hi); letter-spacing:.05em; text-transform:uppercase; border:1px solid rgba(255,255,255,.15);\n}\n.product-info b{ display:block; font-size:15px; color:var(--text-hi); margin-bottom:4px; }\n.product-info .p-cat{ font-size:12px; color:var(--text-low); font-family:var(--f-mono); }\n.product-info .p-row{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }\n.p-price{ font-family:var(--f-display); font-size:17px; color:var(--text-hi); }\n.p-add{\n width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;\n background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:all .35s var(--ease);\n}\n.p-add:hover{ background:var(--quad-grad); }\n.p-add svg{ width:16px; height:16px; }\n\n.track-nav{ display:flex; gap:12px; margin-top:14px; }\n.track-nav button{\n width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-border);\n display:flex; align-items:center; justify-content:center; transition:all .35s;\n}\n.track-nav button:hover{ background:var(--glass-strong); }\n\n\/* ============================== TESTIMONIALS ============================== *\/\n#testimonials{ position:relative; }\n.testi-track-wrap{ overflow:hidden; position:relative; }\n.testi-track{ display:flex; gap:26px; width:max-content; animation:testiSlide 32s linear infinite; }\n.testi-track:hover{ animation-play-state:paused; }\n@keyframes testiSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }\n.testi-card{\n width:360px; flex:none; padding:30px 28px;\n transform-style:preserve-3d; transition:transform .5s var(--ease);\n}\n.testi-card:hover{ transform:translateY(-6px) rotateX(3deg); border-color:rgba(194,100,245,.4); }\n.testi-stars{ display:flex; gap:3px; color:#FFC24C; margin-bottom:16px; }\n.testi-stars svg{ width:15px; height:15px; }\n.testi-card p{ font-size:14.5px; color:var(--text-mid); line-height:1.65; }\n.testi-person{ display:flex; align-items:center; gap:12px; margin-top:22px; }\n.testi-avatar{\n width:44px; height:44px; border-radius:50%; background-size:cover; background-position:center;\n border:2px solid rgba(255,255,255,.15);\n}\n.testi-person b{ display:block; font-size:14px; color:var(--text-hi); }\n.testi-person span{ font-size:12px; color:var(--text-low); }\n\n\/* ============================== COMMUNITY ============================== *\/\n#community{ background:var(--bg-soft); }\n.community-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }\n.comm-card{\n padding:34px 26px; text-align:center; position:relative; overflow:hidden;\n transition:transform .5s var(--ease);\n}\n.comm-card:hover{ transform:translateY(-8px); }\n.comm-ic{\n width:56px; height:56px; margin:0 auto 18px; border-radius:16px;\n display:flex; align-items:center; justify-content:center;\n transition:transform .5s var(--ease);\n}\n.comm-card:hover .comm-ic{ transform:scale(1.12) rotate(-6deg); }\n.comm-ic svg{ width:26px; height:26px; color:#fff; }\n.comm-card.fb .comm-ic{ background:linear-gradient(135deg,#1877F2,#0d5bd1); }\n.comm-card.ig .comm-ic{ background:linear-gradient(135deg,#F58529,#DD2A7B 50%,#8134AF); }\n.comm-card.yt .comm-ic{ background:linear-gradient(135deg,#FF0000,#c40000); }\n.comm-card.dc .comm-ic{ background:linear-gradient(135deg,#5865F2,#4048c9); }\n.comm-card b{ display:block; color:var(--text-hi); font-size:16px; margin-bottom:4px; }\n.comm-card span{ font-size:13px; color:var(--text-low); }\n@media(max-width:900px){ .community-grid{ grid-template-columns:1fr 1fr; } }\n\n\/* ============================== CTA ============================== *\/\n#cta{ padding:0 0 150px; }\n.cta-banner{\n position:relative; border-radius:var(--radius-xl); overflow:hidden;\n padding:100px 60px; text-align:center;\n background:linear-gradient(135deg, rgba(123,97,255,.18), rgba(255,62,165,.14)), var(--bg-elevate);\n border:1px solid var(--glass-border);\n}\n.cta-banner::before, .cta-banner::after{\n content:''; position:absolute; width:340px; height:340px; border-radius:50%; filter:blur(90px);\n}\n.cta-banner::before{ background:var(--quad-1); top:-30%; left:-8%; opacity:.5; }\n.cta-banner::after{ background:var(--quad-3); bottom:-30%; right:-8%; opacity:.5; }\n.cta-banner h2{ position:relative; z-index:2; font-size:clamp(32px,4.6vw,54px); max-width:760px; margin:0 auto; }\n.cta-banner p{ position:relative; z-index:2; margin:20px auto 0; max-width:480px; color:var(--text-mid); font-size:16.5px; }\n.cta-banner .hero-btns{ position:relative; z-index:2; margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }\n@media(max-width:700px){ .cta-banner{ padding:70px 26px; } }\n\n\/* ============================== FOOTER ============================== *\/\nfooter{ border-top:1px solid var(--line); padding:90px 0 30px; position:relative; }\n.footer-grid{\n display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:50px;\n padding-bottom:60px;\n}\n.footer-brand p{ margin-top:16px; font-size:14.5px; color:var(--text-low); max-width:280px; }\n.footer-social{ display:flex; gap:10px; margin-top:24px; }\n.footer-social a{\n width:38px; height:38px; border-radius:10px; border:1px solid var(--glass-border);\n display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);\n}\n.footer-social a:hover{ background:var(--quad-grad); border-color:transparent; transform:translateY(-3px); }\n.footer-social svg{ width:16px; height:16px; }\n\n.footer-col h5{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-hi); margin-bottom:20px; }\n.footer-col ul li{ margin-bottom:12px; }\n.footer-col ul li a{ font-size:14.5px; color:var(--text-low); transition:color .3s; }\n.footer-col ul li a:hover{ color:var(--text-hi); }\n\n.newsletter-form{ display:flex; gap:0; margin-top:18px; border-radius:100px; overflow:hidden; border:1px solid var(--glass-border); }\n.newsletter-form input{\n flex:1; background:transparent; border:none; padding:14px 18px; color:var(--text-hi); font-size:14px; outline:none;\n}\n.newsletter-form button{\n padding:14px 22px; background:var(--quad-grad); color:#0a0a12; font-weight:700; font-size:13.5px;\n}\n.newsletter-note{ margin-top:10px; font-size:12px; color:var(--text-low); }\n\n.footer-bottom{\n padding-top:28px; border-top:1px solid var(--line);\n display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;\n font-size:13px; color:var(--text-low);\n}\n.footer-bottom a{ color:var(--text-low); transition:color .3s; }\n.footer-bottom a:hover{ color:var(--text-hi); }\n.footer-legal{ display:flex; gap:20px; }\n\n@media(max-width:900px){\n .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }\n}\n@media(max-width:560px){\n .footer-grid{ grid-template-columns:1fr; }\n .footer-bottom{ flex-direction:column; align-items:flex-start; }\n}\n\n\/* back to top *\/\n#back-to-top{\n position:fixed; bottom:28px; left:28px; z-index:500;\n width:48px; height:48px; border-radius:50%;\n display:flex; align-items:center; justify-content:center;\n border:1px solid var(--glass-border); background:rgba(18,18,32,.7); backdrop-filter:blur(10px);\n opacity:0; visibility:hidden; transform:translateY(12px);\n transition:all .4s var(--ease);\n}\n#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }\n#back-to-top:hover{ background:var(--quad-grad); }\n#back-to-top svg{ width:18px; height:18px; }\n<\/style>\n<\/head>\n<body>\n\n<!-- ============================== LOADER ============================== -->\n<div id=\"loader\" aria-hidden=\"true\">\n <div class=\"loader-mark\">\n <div class=\"core\"><\/div>\n <div class=\"node\"><\/div><div class=\"node\"><\/div><div class=\"node\"><\/div><div class=\"node\"><\/div>\n <\/div>\n <div class=\"loader-text\">Loading <span>AdFusionQuad<\/span><\/div>\n<\/div>\n\n<!-- ============================== CUSTOM CURSOR ============================== -->\n<div class=\"cursor-dot\" id=\"cursorDot\"><\/div>\n<div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\n\n<!-- ============================== SCROLL PROGRESS QUAD ============================== -->\n<div id=\"scroll-quad\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 64 64\">\n <circle class=\"track\" cx=\"32\" cy=\"32\" r=\"28\"><\/circle>\n <circle class=\"bar\" id=\"scrollBar\" cx=\"32\" cy=\"32\" r=\"28\" stroke=\"url(#quadGradSVG)\"><\/circle>\n <defs>\n <linearGradient id=\"quadGradSVG\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#7B61FF\"\/>\n <stop offset=\"55%\" stop-color=\"#C264F5\"\/>\n <stop offset=\"100%\" stop-color=\"#FF3EA5\"\/>\n <\/linearGradient>\n <\/defs>\n <\/svg>\n <div class=\"core-dot\"><\/div>\n<\/div>\n\n<!-- ============================== HEADER ============================== -->\n<header id=\"site-header\">\n <div class=\"container nav-inner\">\n <a href=\"#hero\" class=\"logo\">\n <span class=\"logo-mark\">\n <span class=\"lm-core\"><\/span>\n <span class=\"lm-node\"><\/span><span class=\"lm-node\"><\/span><span class=\"lm-node\"><\/span><span class=\"lm-node\"><\/span>\n <\/span>\n AdFusionQuad<small>FOUR BRANDS \u00b7 ONE HOME<\/small>\n <\/a>\n\n <nav class=\"main-nav\" id=\"mainNav\">\n <a href=\"#beautyhub\">Beautyhub<\/a>\n <a href=\"#jeetzmoto\">jeetxmoto<\/a>\n <a href=\"#services\">Services<\/a>\n <a href=\"#products\">Shop<\/a>\n <a href=\"#testimonials\">Reviews<\/a>\n <a href=\"#community\">Community<\/a>\n <\/nav>\n\n <div class=\"nav-actions\">\n <a href=\"#products\" class=\"btn btn-primary nav-cta\">Shop Now<\/a>\n <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"Toggle menu\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n <\/div>\n<\/header>\n\n<!-- ============================== HERO ============================== -->\n<section id=\"hero\">\n <canvas id=\"particle-canvas\"><\/canvas>\n <div class=\"hero-grid\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-glow g1\" aria-hidden=\"true\"><\/div>\n <div class=\"hero-glow g2\" aria-hidden=\"true\"><\/div>\n\n <div class=\"hero-inner\">\n <div class=\"hero-copy\">\n <span class=\"eyebrow\">Est. Community of Makers & Players<\/span>\n <h1>\n <span class=\"line\"><span>Welcome to<\/span><\/span>\n <span class=\"line\"><span class=\"grad-text\">AdFusionQuad<\/span><\/span>\n <\/h1>\n <p class=\"subtitle\">Where Gaming, Beauty, Creativity & Adventure Unite.<\/p>\n\n <div class=\"hero-btns\">\n <a href=\"#brands\" class=\"btn btn-primary\" data-ripple>\n <span>Explore Brands<\/span>\n <svg class=\"btn-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" width=\"16\" height=\"16\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n <a href=\"#products\" class=\"btn btn-ghost\" data-ripple>\n <span>Shop Now<\/span>\n <svg class=\"btn-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" width=\"16\" height=\"16\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n <\/div>\n\n <div class=\"hero-stats\">\n <div><b data-count=\"5000\" data-suffix=\"+\">0<\/b><span>HAPPY CUSTOMERS<\/span><\/div>\n <div><b data-count=\"1500\" data-suffix=\"+\">0<\/b><span>PRODUCTS<\/span><\/div>\n <div><b data-count=\"4\" data-suffix=\"\">0<\/b><span>BRANDS UNITED<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-scene\" id=\"heroScene\">\n <div class=\"quad-core-wrap\" id=\"quadCoreWrap\">\n <div class=\"orbit-ring r1\"><\/div>\n <div class=\"orbit-ring r2\"><\/div>\n <div class=\"core-hub\"><\/div>\n\n <div class=\"brand-chip c-game\"><span class=\"ic\">\ud83c\udfae<\/span>ProjektGaming<\/div>\n <div class=\"brand-chip c-beauty\"><span class=\"ic\">\ud83d\udc84<\/span>BeautyHub<\/div>\n <div class=\"brand-chip c-craft\"><span class=\"ic\">\ud83c\udfa8<\/span>Who I Am<\/div>\n <div class=\"brand-chip c-moto\"><span class=\"ic\">\ud83c\udfcd<\/span>JeetXMoto<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-scroll-indicator\">\n <span>Scroll<\/span>\n <div class=\"scroll-mouse\"><\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== ABOUT ============================== -->\n<section id=\"BeautyHub\" class=\"section\">\n <canvas id=\"BeautyHub-particles\"><\/canvas>\n <div class=\"container BeautyHub-grid\">\n\n <div class=\"BeautyHub-copy reveal-left\">\n <span class=\"eyebrow\">Who We Are<\/span>\n <h2>About <span class=\"grad-text\">AdFusionQuad<\/span><\/h2>\n <p><strong>AdFusionQuad<\/strong> is a unique multi-brand platform that brings together four creative and passionate businesses under one roof.<\/p>\n <p>Our mission is to provide high-quality products, valuable content, and exceptional experiences across gaming, beauty, crafts, and motorcycle riding.<\/p>\n <p>At AdFusionQuad, every brand shares one goal \u2014 to inspire people through quality products, innovation, creativity, and passion.<\/p>\n\n <h3>Why Choose AdFusionQuad?<\/h3>\n <div class=\"why-grid stagger\">\n <div class=\"why-card glass reveal\" style=\"--i:0\">\n <span class=\"wc-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 2l2.6 6.6L21 11l-6.4 2.4L12 20l-2.6-6.6L3 11l6.4-2.4L12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <div><b>Four Trusted Brands<\/b><span>Gaming, beauty, craft & riding \u2014 curated with care.<\/span><\/div>\n <\/div>\n <div class=\"why-card glass reveal\" style=\"--i:1\">\n <span class=\"wc-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3l8 4v5c0 5-3.4 8.4-8 9-4.6-.6-8-4-8-9V7l8-4z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <div><b>Premium Quality<\/b><span>Every product is checked for durability and finish.<\/span><\/div>\n <\/div>\n <div class=\"why-card glass reveal\" style=\"--i:2\">\n <span class=\"wc-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <div><b>Customer-First<\/b><span>Real people, real support, every step of the way.<\/span><\/div>\n <\/div>\n <div class=\"why-card glass reveal\" style=\"--i:3\">\n <span class=\"wc-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L4.5 14h6L11 22l8.5-12h-6L13 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <div><b>Innovative Products<\/b><span>We track trends across all four worlds we serve.<\/span><\/div>\n <\/div>\n <div class=\"why-card glass reveal\" style=\"--i:4\">\n <span class=\"wc-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"4\" y=\"10\" width=\"16\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M8 10V7a4 4 0 018 0v3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg><\/span>\n <div><b>Secure Shopping<\/b><span>Encrypted checkout and protected payments.<\/span><\/div>\n <\/div>\n <div class=\"why-card glass reveal\" style=\"--i:5\">\n <span class=\"wc-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 21s-7-4.35-9.5-8.5C.7 8.4 3 5 6.5 5c1.9 0 3.3 1 4 2.2C11.2 6 12.6 5 14.5 5 18 5 20.3 8.4 18.5 12.5 16 16.65 12 21 12 21z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <div><b>Passion-Driven<\/b><span>Built by people who genuinely love these worlds.<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"about-visual reveal-right\">\n <div class=\"vision-card glass\">\n <div class=\"quote-mark\">\"<\/div>\n <p>We believe different passions can come together to create one powerful community.<\/p>\n <p>Whether you're a gamer, beauty enthusiast, creative artist, or passionate rider, AdFusionQuad is designed to inspire, connect, and serve your interests with quality and innovation.<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<!-- ============================== OUR BRANDS ============================== -->\n<section id=\"brands\" class=\"section\" style=\"padding-top:110px;\">\n <div class=\"container\">\n <div class=\"section-head center reveal\">\n <span class=\"eyebrow\">One Roof, Four Worlds<\/span>\n <h2>Our <span class=\"grad-text\">Brands<\/span><\/h2>\n <p>Each brand has its own identity, its own energy \u2014 and a home here at AdFusionQuad.<\/p>\n <\/div>\n\n <div class=\"brand-stack\">\n\n <!-- BRAND 1 \u2014 PROJEKTGAMING -->\n <article class=\"brand-card game reveal-scale\" data-tilt data-parallax-group>\n <div class=\"brand-bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1542751371-adc38448a05e?q=80&w=1600&auto=format&fit=crop');\" data-parallax=\"0.04\"><\/div>\n <div class=\"brand-scrim\"><\/div>\n <div class=\"brand-content\">\n <span class=\"brand-tag\">\ud83c\udfae Brand 01<\/span>\n <h3><span class=\"emoji\">\ud83c\udfae<\/span> ProjektGaming<\/h3>\n <p class=\"desc\">Built for passionate gamers who love immersive experiences \u2014 gear, setups, and stories from the front line of play.<\/p>\n <div class=\"brand-pills\">\n <span>Gaming Accessories<\/span><span>Gaming Tips<\/span><span>Gaming News<\/span>\n <span>Gaming Reviews<\/span><span>Gaming Setups<\/span><span>Gaming Guides<\/span><span>Merchandise<\/span>\n <\/div>\n <a href=\"#\" class=\"brand-cta\">Discover ProjektGaming\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"brand-stage\">\n <div class=\"rgb-ring r1\" data-parallax=\"0.08\"><\/div>\n <div class=\"rgb-ring r2\" data-parallax=\"0.05\"><\/div>\n <div class=\"controller-float\" data-parallax=\"0.12\">\ud83c\udfae<\/div>\n <\/div>\n <\/article>\n\n <!-- BRAND 2 \u2014 BEAUTYHUB -->\n <article class=\"brand-card beauty reveal-scale\" data-tilt data-parallax-group>\n <div class=\"brand-bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1522335789203-aabd1fc54bc9?q=80&w=1600&auto=format&fit=crop');\" data-parallax=\"0.04\"><\/div>\n <div class=\"brand-scrim\"><\/div>\n <div class=\"brand-content\">\n <span class=\"brand-tag\">\ud83d\udc84 Brand 02<\/span>\n <h3><span class=\"emoji\">\ud83d\udc84<\/span> BeautyHub<\/h3>\n <p class=\"desc\">Premium beauty and skincare products carefully selected to help you look and feel confident every day.<\/p>\n <div class=\"brand-pills\">\n <span>Luxury Cosmetics<\/span><span>Skincare<\/span><span>Perfumes<\/span><span>Lipsticks<\/span><span>Glow Kits<\/span>\n <\/div>\n <a href=\"#\" class=\"brand-cta\">Discover BeautyHub\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"brand-stage\">\n <span class=\"sparkle\" style=\"top:18%; left:20%; animation-delay:0s;\" data-parallax=\"0.1\">\u2726<\/span>\n <span class=\"sparkle\" style=\"top:60%; left:34%; animation-delay:.5s;\" data-parallax=\"0.07\">\u2727<\/span>\n <span class=\"sparkle\" style=\"top:30%; left:70%; animation-delay:1s;\" data-parallax=\"0.09\">\u2726<\/span>\n <span class=\"sparkle\" style=\"top:70%; left:66%; animation-delay:1.5s;\" data-parallax=\"0.06\">\u2727<\/span>\n <div class=\"brush-float\" data-parallax=\"0.12\">\ud83d\udc8b<\/div>\n <\/div>\n <\/article>\n\n <!-- BRAND 3 \u2014 WHO I AM -->\n <article class=\"brand-card craft reveal-scale\" data-tilt data-parallax-group>\n <div class=\"brand-bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1513364776144-60967b0f800f?q=80&w=1600&auto=format&fit=crop');\" data-parallax=\"0.04\"><\/div>\n <div class=\"brand-scrim\"><\/div>\n <div class=\"brand-content\">\n <span class=\"brand-tag\">\ud83c\udfa8 Brand 03<\/span>\n <h3><span class=\"emoji\">\ud83c\udfa8<\/span> Who I Am<\/h3>\n <p class=\"desc\">Celebrating creativity through handmade crafts, personalized gifts, artistic designs, and DIY creations.<\/p>\n <div class=\"brand-pills\">\n <span>Handmade Crafts<\/span><span>DIY Kits<\/span><span>Pottery<\/span><span>Canvas Art<\/span><span>Custom Gifts<\/span>\n <\/div>\n <a href=\"#\" class=\"brand-cta\">Discover Who I Am\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"brand-stage\">\n <div class=\"paint-blob\" style=\"width:110px; height:110px; background:var(--craft); top:16%; left:18%;\" data-parallax=\"0.08\"><\/div>\n <div class=\"paint-blob\" style=\"width:70px; height:70px; background:var(--craft-2); top:56%; left:36%; animation-delay:1.5s;\" data-parallax=\"0.06\"><\/div>\n <div class=\"paint-blob\" style=\"width:90px; height:90px; background:#B25B2C; top:64%; left:14%; animation-delay:3s;\" data-parallax=\"0.1\"><\/div>\n <div class=\"brush-craft-float\" data-parallax=\"0.12\">\ud83d\udd8c\ufe0f<\/div>\n <\/div>\n <\/article>\n\n <!-- BRAND 4 \u2014 JEETXMOTO -->\n <article class=\"brand-card moto reveal-scale\" data-tilt data-parallax-group>\n <div class=\"brand-bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1558981806-ec527fa84c39?q=80&w=1600&auto=format&fit=crop');\" data-parallax=\"0.04\"><\/div>\n <div class=\"brand-scrim\"><\/div>\n <div class=\"brand-content\">\n <span class=\"brand-tag\">\ud83c\udfcd Brand 04<\/span>\n <h3><span class=\"emoji\">\ud83c\udfcd<\/span> JeetXMoto<\/h3>\n <p class=\"desc\">Premium riding gear, helmets, gloves, jackets, and biking essentials \u2014 built for comfort, safety, and style.<\/p>\n <div class=\"brand-pills\">\n <span>Riding Gear<\/span><span>Helmets<\/span><span>Gloves<\/span><span>Jackets<\/span><span>Accessories<\/span>\n <\/div>\n <a href=\"#\" class=\"brand-cta\">Discover JeetXMoto\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"brand-stage\">\n <div class=\"road-line\"><\/div>\n <div class=\"headlight-beam\" data-parallax=\"0.05\"><\/div>\n <div class=\"bike-float\" data-parallax=\"0.12\">\ud83c\udfcd\ufe0f<\/div>\n <div class=\"smoke\" style=\"right:18%; bottom:18%; animation-delay:0s;\"><\/div>\n <div class=\"smoke\" style=\"right:20%; bottom:18%; animation-delay:1.1s;\"><\/div>\n <div class=\"smoke\" style=\"right:16%; bottom:18%; animation-delay:2.2s;\"><\/div>\n <\/div>\n <\/article>\n\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== SERVICES ============================== -->\n<section id=\"services\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-head center reveal\">\n <span class=\"eyebrow\">What We Offer<\/span>\n <h2>Our <span class=\"grad-text\">Services<\/span><\/h2>\n <p>Every brand, every order, backed by the same standard of care.<\/p>\n <\/div>\n\n <div class=\"services-grid stagger\">\n <div class=\"service-card glass reveal\" style=\"--i:0\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><circle cx=\"8.5\" cy=\"12\" r=\"1.6\" fill=\"currentColor\"\/><path d=\"M14 10h4M14 14h2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg><\/span>\n <h4>Gaming Accessories<\/h4>\n <p>Controllers, keyboards, headsets and setup essentials.<\/p>\n <\/div>\n <div class=\"service-card glass reveal\" style=\"--i:1\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3c3 3 5 6 5 9a5 5 0 01-10 0c0-3 2-6 5-9z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <h4>Beauty Products<\/h4>\n <p>Skincare, cosmetics and fragrance, curated with care.<\/p>\n <\/div>\n <div class=\"service-card glass reveal\" style=\"--i:2\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 20l6-14 6 14M7 15h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"18\" cy=\"6\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg><\/span>\n <h4>Handmade Crafts<\/h4>\n <p>One-of-a-kind pieces made by real hands, not machines.<\/p>\n <\/div>\n <div class=\"service-card glass reveal\" style=\"--i:3\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"6\" cy=\"17\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><circle cx=\"18\" cy=\"17\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M6 17l3-8h5l3 5M9 9h3\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <h4>Motorcycle Accessories<\/h4>\n <p>Gear built for the road \u2014 safety without sacrificing style.<\/p>\n <\/div>\n <div class=\"service-card glass reveal\" style=\"--i:4\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M21 11.5a8.5 8.5 0 01-12.4 7.6L3 20l1-5.2A8.5 8.5 0 1121 11.5z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <h4>Premium Support<\/h4>\n <p>A real team, ready to help before and after checkout.<\/p>\n <\/div>\n <div class=\"service-card glass reveal\" style=\"--i:5\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M3 12h13l-4-4m4 4l-4 4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M16 6h3a2 2 0 012 2v8a2 2 0 01-2 2h-3\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg><\/span>\n <h4>Fast Delivery<\/h4>\n <p>Quick, tracked shipping across every brand's catalog.<\/p>\n <\/div>\n <div class=\"service-card glass reveal\" style=\"--i:6\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"4\" y=\"10\" width=\"16\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M8 10V7a4 4 0 018 0v3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg><\/span>\n <h4>Secure Payments<\/h4>\n <p>Encrypted transactions across every trusted method.<\/p>\n <\/div>\n <div class=\"service-card glass reveal\" style=\"--i:7\">\n <span class=\"service-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 21s-7-4.35-9.5-8.5C.7 8.4 3 5 6.5 5c1.9 0 3.3 1 4 2.2C11.2 6 12.6 5 14.5 5 18 5 20.3 8.4 18.5 12.5 16 16.65 12 21 12 21z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n <h4>Community Driven<\/h4>\n <p>Built by, and for, people who love what they buy.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== WHY CHOOSE US ============================== -->\n<section id=\"why\" class=\"section\">\n <div class=\"container why-layout\">\n <div class=\"reveal-left\">\n <span class=\"eyebrow\">The Journey<\/span>\n <h2 style=\"font-size:clamp(30px,3.8vw,42px); margin-top:16px; margin-bottom:36px;\">Why Choose <span class=\"grad-text\">Us<\/span><\/h2>\n <div class=\"timeline\">\n <div class=\"tl-item\"><b>One Platform, Four Passions<\/b><span>Everything you love, without four different accounts.<\/span><\/div>\n <div class=\"tl-item\"><b>Quality Checked Every Time<\/b><span>Each product is vetted before it reaches the shelf.<\/span><\/div>\n <div class=\"tl-item\"><b>Real Community, Real Support<\/b><span>Discord, socials, and a support team that responds.<\/span><\/div>\n <div class=\"tl-item\"><b>Growing Every Season<\/b><span>New drops, new gear, new stories \u2014 always in motion.<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"stats-panel reveal-right\">\n <div class=\"stat-card glass\"><div class=\"stat-num\"><span data-count=\"5000\">0<\/span>+<\/div><div class=\"stat-label\">HAPPY CUSTOMERS<\/div><\/div>\n <div class=\"stat-card glass\"><div class=\"stat-num\"><span data-count=\"1500\">0<\/span>+<\/div><div class=\"stat-label\">PRODUCTS LISTED<\/div><\/div>\n <div class=\"stat-card glass\"><div class=\"stat-num\"><span data-count=\"4\">0<\/span><\/div><div class=\"stat-label\">BRANDS UNITED<\/div><\/div>\n <div class=\"stat-card glass\"><div class=\"stat-num\">24<span style=\"font-size:.55em;\">\/7<\/span><\/div><div class=\"stat-label\">CUSTOMER SUPPORT<\/div><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== FEATURED PRODUCTS ============================== -->\n<section id=\"products\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-head reveal\">\n <span class=\"eyebrow\">Handpicked For You<\/span>\n <h2>Featured <span class=\"grad-text\">Products<\/span><\/h2>\n <p>A taste of what's live across all four brands right now.<\/p>\n <\/div>\n\n <div class=\"product-filters reveal\">\n <button class=\"pf-btn active\" data-filter=\"all\">All<\/button>\n <button class=\"pf-btn\" data-filter=\"gaming\">Gaming<\/button>\n <button class=\"pf-btn\" data-filter=\"beauty\">Beauty<\/button>\n <button class=\"pf-btn\" data-filter=\"craft\">Crafts<\/button>\n <button class=\"pf-btn\" data-filter=\"moto\">Bike Accessories<\/button>\n <\/div>\n\n <div class=\"product-track-wrap reveal\">\n <div class=\"product-track\" id=\"productTrack\">\n\n <div class=\"product-card glass\" data-cat=\"gaming\">\n <div class=\"pc-inner\">\n <div class=\"product-media\"><span class=\"product-badge\">New<\/span>\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1592840062661-a5a7f78e2056?q=80&w=800&auto=format&fit=crop\" alt=\"RGB mechanical keyboard\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Nova RGB Keyboard<\/b><span class=\"p-cat\">ProjektGaming<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$89.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card glass\" data-cat=\"beauty\">\n <div class=\"pc-inner\">\n <div class=\"product-media\"><span class=\"product-badge\">Bestseller<\/span>\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1596462502278-27bfdc403348?q=80&w=800&auto=format&fit=crop\" alt=\"Luxury lipstick set\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Velvet Matte Lip Set<\/b><span class=\"p-cat\">BeautyHub<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$34.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card glass\" data-cat=\"craft\">\n <div class=\"pc-inner\">\n <div class=\"product-media\"><span class=\"product-badge\">Handmade<\/span>\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1493106641515-6b5631de4bb9?q=80&w=800&auto=format&fit=crop\" alt=\"Handmade ceramic pottery\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Artisan Ceramic Vase<\/b><span class=\"p-cat\">Who I Am<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$52.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card glass\" data-cat=\"moto\">\n <div class=\"pc-inner\">\n <div class=\"product-media\"><span class=\"product-badge\">Top Rated<\/span>\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1591637333184-19aa84b3e01f?q=80&w=800&auto=format&fit=crop\" alt=\"Motorcycle riding helmet\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Apex Riding Helmet<\/b><span class=\"p-cat\">JeetXMoto<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$149.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card glass\" data-cat=\"gaming\">\n <div class=\"pc-inner\">\n <div class=\"product-media\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1591105575633-922c8a1d7f0e?q=80&w=800&auto=format&fit=crop\" alt=\"Gaming headset\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Vortex Wireless Headset<\/b><span class=\"p-cat\">ProjektGaming<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$74.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card glass\" data-cat=\"beauty\">\n <div class=\"pc-inner\">\n <div class=\"product-media\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1571781926291-c477ebfd024b?q=80&w=800&auto=format&fit=crop\" alt=\"Skincare serum bottles\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Radiance Serum Duo<\/b><span class=\"p-cat\">BeautyHub<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$46.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card glass\" data-cat=\"craft\">\n <div class=\"pc-inner\">\n <div class=\"product-media\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460661419201-fd4cecdf8a8b?q=80&w=800&auto=format&fit=crop\" alt=\"Art supplies and canvas\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Studio Paint Set<\/b><span class=\"p-cat\">Who I Am<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$28.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card glass\" data-cat=\"moto\">\n <div class=\"pc-inner\">\n <div class=\"product-media\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558980664-10dc396545dc?q=80&w=800&auto=format&fit=crop\" alt=\"Motorcycle riding gloves\" loading=\"lazy\">\n <\/div>\n <div class=\"product-info\"><b>Trail Riding Gloves<\/b><span class=\"p-cat\">JeetXMoto<\/span>\n <div class=\"p-row\"><span class=\"p-price\">$39.00<\/span><button class=\"p-add\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6h15l-1.5 9h-12L4 3H2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"9\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><circle cx=\"17\" cy=\"20\" r=\"1.4\" fill=\"currentColor\"\/><\/svg><\/button><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <div class=\"track-nav\">\n <button id=\"trackPrev\" aria-label=\"Previous products\"><svg viewBox=\"0 0 24 24\" fill=\"none\" width=\"18\" height=\"18\"><path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/button>\n <button id=\"trackNext\" aria-label=\"Next products\"><svg viewBox=\"0 0 24 24\" fill=\"none\" width=\"18\" height=\"18\"><path d=\"M9 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== TESTIMONIALS ============================== -->\n<section id=\"testimonials\" class=\"section-tight\">\n <div class=\"container\">\n <div class=\"section-head center reveal\">\n <span class=\"eyebrow\">In Their Words<\/span>\n <h2>What Our <span class=\"grad-text\">Community<\/span> Says<\/h2>\n <\/div>\n <\/div>\n\n <div class=\"testi-track-wrap reveal\">\n <div class=\"testi-track\" id=\"testiTrack\">\n <!-- set A -->\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>ProjektGaming's setup guides helped me build my first PC without any stress. The community on Discord is incredibly helpful too.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1633332755192-727a05c4013d?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Arjun Mehta<\/b><span>ProjektGaming customer<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>BeautyHub's skincare bundle changed my routine completely. Shipping was fast and packaging felt genuinely premium.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Sneha Kapoor<\/b><span>BeautyHub customer<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>I ordered a custom piece from Who I Am for my sister's birthday \u2014 the craftsmanship was better than I imagined.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Rohan Verma<\/b><span>Who I Am customer<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>JeetXMoto's helmet is the most comfortable I've owned. Great ventilation and the finish looks premium on the highway.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1519085360753-af0119f7cbe7?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Karan Singh<\/b><span>JeetXMoto customer<\/span><\/div>\n <\/div>\n <\/div>\n <!-- set B (duplicate for seamless loop) -->\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>ProjektGaming's setup guides helped me build my first PC without any stress. The community on Discord is incredibly helpful too.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1633332755192-727a05c4013d?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Arjun Mehta<\/b><span>ProjektGaming customer<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>BeautyHub's skincare bundle changed my routine completely. Shipping was fast and packaging felt genuinely premium.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Sneha Kapoor<\/b><span>BeautyHub customer<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>I ordered a custom piece from Who I Am for my sister's birthday \u2014 the craftsmanship was better than I imagined.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Rohan Verma<\/b><span>Who I Am customer<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"testi-card glass\">\n <div class=\"testi-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p>JeetXMoto's helmet is the most comfortable I've owned. Great ventilation and the finish looks premium on the highway.<\/p>\n <div class=\"testi-person\">\n <div class=\"testi-avatar\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1519085360753-af0119f7cbe7?q=80&w=200&auto=format&fit=crop')\"><\/div>\n <div><b>Karan Singh<\/b><span>JeetXMoto customer<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== COMMUNITY ============================== -->\n<section id=\"community\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-head center reveal\">\n <span class=\"eyebrow\">Stay Connected<\/span>\n <h2>Join Our <span class=\"grad-text\">Community<\/span><\/h2>\n <p>Follow along for drops, behind-the-scenes, and community events.<\/p>\n <\/div>\n\n <div class=\"community-grid stagger\">\n <a href=\"#\" class=\"comm-card glass fb reveal\" style=\"--i:0\">\n <span class=\"comm-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H9v3h2v6h3v-6h2.5l.5-3H14V9z\" fill=\"#fff\"\/><\/svg><\/span>\n <b>Facebook<\/b><span>Community & updates<\/span>\n <\/a>\n <a href=\"#\" class=\"comm-card glass ig reveal\" style=\"--i:1\">\n <span class=\"comm-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\" stroke=\"#fff\" stroke-width=\"1.8\"\/><circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"#fff\" stroke-width=\"1.8\"\/><circle cx=\"17.2\" cy=\"6.8\" r=\"1.1\" fill=\"#fff\"\/><\/svg><\/span>\n <b>Instagram<\/b><span>Visual stories daily<\/span>\n <\/a>\n <a href=\"#\" class=\"comm-card glass yt reveal\" style=\"--i:2\">\n <span class=\"comm-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"4\" stroke=\"#fff\" stroke-width=\"1.8\"\/><path d=\"M10 9l6 3-6 3V9z\" fill=\"#fff\"\/><\/svg><\/span>\n <b>YouTube<\/b><span>Guides & reviews<\/span>\n <\/a>\n <a href=\"#\" class=\"comm-card glass dc reveal\" style=\"--i:3\">\n <span class=\"comm-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 6.5C9.5 5.3 14.5 5.3 17 6.5c1.6 3 1.7 7.4.3 9.8-1.5 1.2-3 1.7-3 1.7l-.7-1.2M7 6.5c-1.6 3-1.7 7.4-.3 9.8 1.5 1.2 3 1.7 3 1.7l.7-1.2\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><circle cx=\"9\" cy=\"13\" r=\"1.2\" fill=\"#fff\"\/><circle cx=\"15\" cy=\"13\" r=\"1.2\" fill=\"#fff\"\/><\/svg><\/span>\n <b>Discord<\/b><span>Live chat & events<\/span>\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== CTA ============================== -->\n<section id=\"cta\">\n <div class=\"container\">\n <div class=\"cta-banner reveal-scale\">\n <h2>Join the <span class=\"grad-text\">AdFusionQuad<\/span> Community Today<\/h2>\n <p>Four brands, one destination \u2014 gear up, glow up, create, and ride.<\/p>\n <div class=\"hero-btns\">\n <a href=\"#brands\" class=\"btn btn-primary\" data-ripple>\n <span>Explore Brands<\/span>\n <svg class=\"btn-arrow\" viewBox=\"0 0 24 24\" fill=\"none\" width=\"16\" height=\"16\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n <a href=\"#footer-contact\" class=\"btn btn-ghost\" data-ripple>\n <span>Contact Us<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- ============================== FOOTER ============================== -->\n<footer id=\"footer-contact\">\n <div class=\"container\">\n <div class=\"footer-grid\">\n <div class=\"footer-brand\">\n <a href=\"#hero\" class=\"logo\">\n <span class=\"logo-mark\">\n <span class=\"lm-core\"><\/span>\n <span class=\"lm-node\"><\/span><span class=\"lm-node\"><\/span><span class=\"lm-node\"><\/span><span class=\"lm-node\"><\/span>\n <\/span>\n AdFusionQuad\n <\/a>\n <p>A multi-brand home for gamers, beauty lovers, makers, and riders \u2014 four passions, one community.<\/p>\n <div class=\"footer-social\">\n <a href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H9v3h2v6h3v-6h2.5l.5-3H14V9z\" fill=\"currentColor\"\/><\/svg><\/a>\n <a href=\"#\" aria-label=\"Instagram\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg><\/a>\n <a href=\"#\" aria-label=\"YouTube\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M10 9l6 3-6 3V9z\" fill=\"currentColor\"\/><\/svg><\/a>\n <a href=\"#\" aria-label=\"Discord\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 6.5C9.5 5.3 14.5 5.3 17 6.5c1.6 3 1.7 7.4.3 9.8-1.5 1.2-3 1.7-3 1.7l-.7-1.2M7 6.5c-1.6 3-1.7 7.4-.3 9.8 1.5 1.2 3 1.7 3 1.7l.7-1.2\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><circle cx=\"9\" cy=\"13\" r=\"1.2\" fill=\"currentColor\"\/><circle cx=\"15\" cy=\"13\" r=\"1.2\" fill=\"currentColor\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n <div class=\"footer-col\">\n <h5>Quick Links<\/h5>\n <ul>\n <li><a href=\"#about\">About Us<\/a><\/li>\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#products\">Shop<\/a><\/li>\n <li><a href=\"#testimonials\">Reviews<\/a><\/li>\n <li><a href=\"#community\">Community<\/a><\/li>\n <\/ul>\n <\/div>\n\n <div class=\"footer-col\">\n <h5>Brands<\/h5>\n <ul>\n <li><a href=\"#brands\">\ud83c\udfae ProjektGaming<\/a><\/li>\n <li><a href=\"#brands\">\ud83d\udc84 BeautyHub<\/a><\/li>\n <li><a href=\"#brands\">\ud83c\udfa8 Who I Am<\/a><\/li>\n <li><a href=\"#brands\">\ud83c\udfcd JeetXMoto<\/a><\/li>\n <\/ul>\n <\/div>\n\n <div class=\"footer-col\">\n <h5>Newsletter<\/h5>\n <p style=\"font-size:14.5px; color:var(--text-low);\">Get drops, discounts, and updates from all four brands.<\/p>\n <form class=\"newsletter-form\" id=\"newsletterForm\">\n <input type=\"email\" required placeholder=\"Your email address\" aria-label=\"Email address\">\n <button type=\"submit\">Join<\/button>\n <\/form>\n <p class=\"newsletter-note\" id=\"newsletterNote\">No spam, unsubscribe anytime.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n <span>© <span id=\"year\"><\/span> AdFusionQuad. All rights reserved.<\/span>\n <div class=\"footer-legal\">\n <a href=\"#\">Privacy Policy<\/a>\n <a href=\"#\">Terms of Service<\/a>\n <a href=\"#\">Shipping<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/footer>\n\n<button id=\"back-to-top\" aria-label=\"Back to top\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 19V5M5 12l7-7 7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n<\/button>\n\n<script>\n\/* ============================================================\n ADFUSIONQUAD \u2014 INTERACTION LAYER\n Vanilla JS. No dependencies. Organized by feature.\n ============================================================ *\/\n(function(){\n 'use strict';\n\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n \/* ---------------------------------------------------------\n 1. PAGE LOADER\n --------------------------------------------------------- *\/\n window.addEventListener('load', () => {\n const loader = document.getElementById('loader');\n setTimeout(() => { loader.classList.add('hide'); }, 500);\n });\n\n \/* ---------------------------------------------------------\n 2. CUSTOM CURSOR (dot + ring, lerped for smoothness)\n --------------------------------------------------------- *\/\n const cursorDot = document.getElementById('cursorDot');\n const cursorRing = document.getElementById('cursorRing');\n let mouseX = window.innerWidth\/2, mouseY = window.innerHeight\/2;\n let ringX = mouseX, ringY = mouseY;\n const hasFinePointer = window.matchMedia('(hover:hover) and (pointer:fine)').matches;\n\n if(hasFinePointer){\n window.addEventListener('mousemove', (e) => {\n mouseX = e.clientX; mouseY = e.clientY;\n cursorDot.style.transform = `translate(${mouseX}px, ${mouseY}px) translate(-50%,-50%)`;\n });\n (function ringLoop(){\n ringX += (mouseX - ringX) * 0.16;\n ringY += (mouseY - ringY) * 0.16;\n cursorRing.style.transform = `translate(${ringX}px, ${ringY}px) translate(-50%,-50%)`;\n requestAnimationFrame(ringLoop);\n })();\n document.querySelectorAll('a, button, .brand-card, .product-card, .service-card, .comm-card').forEach(el => {\n el.addEventListener('mouseenter', () => cursorRing.classList.add('active'));\n el.addEventListener('mouseleave', () => cursorRing.classList.remove('active'));\n });\n }\n\n \/* ---------------------------------------------------------\n 3. HEADER SCROLL STATE + SCROLL-PROGRESS QUAD CORE\n --------------------------------------------------------- *\/\n const header = document.getElementById('site-header');\n const scrollBar = document.getElementById('scrollBar');\n const backToTop = document.getElementById('back-to-top');\n const R = 28, CIRC = 2 * Math.PI * R;\n scrollBar.style.strokeDasharray = CIRC;\n\n function onScroll(){\n const y = window.scrollY;\n header.classList.toggle('scrolled', y > 40);\n backToTop.classList.toggle('show', y > 700);\n\n const docH = document.documentElement.scrollHeight - window.innerHeight;\n const progress = docH > 0 ? Math.min(y \/ docH, 1) : 0;\n scrollBar.style.strokeDashoffset = CIRC * (1 - progress);\n }\n document.addEventListener('scroll', onScroll, { passive:true });\n onScroll();\n\n backToTop.addEventListener('click', () => window.scrollTo({ top:0, behavior: reduceMotion ? 'auto' : 'smooth' }));\n\n \/* ---------------------------------------------------------\n 4. MOBILE NAV TOGGLE\n --------------------------------------------------------- *\/\n const navToggle = document.getElementById('navToggle');\n const mainNav = document.getElementById('mainNav');\n navToggle.addEventListener('click', () => {\n navToggle.classList.toggle('open');\n mainNav.classList.toggle('open');\n });\n mainNav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {\n navToggle.classList.remove('open');\n mainNav.classList.remove('open');\n }));\n\n \/* ---------------------------------------------------------\n 5. BACKGROUND PARTICLES (hero + about) \u2014 canvas\n --------------------------------------------------------- *\/\n function initParticles(canvasId, opts){\n const canvas = document.getElementById(canvasId);\n if(!canvas) return;\n const ctx = canvas.getContext('2d');\n let w, h, particles;\n\n function resize(){\n w = canvas.width = canvas.offsetWidth;\n h = canvas.height = canvas.offsetHeight;\n }\n function makeParticles(){\n const count = opts.count || 70;\n particles = Array.from({length: count}, () => ({\n x: Math.random() * w,\n y: Math.random() * h,\n r: Math.random() * 1.8 + 0.6,\n vx: (Math.random() - 0.5) * opts.speed,\n vy: (Math.random() - 0.5) * opts.speed,\n a: Math.random() * 0.6 + 0.2\n }));\n }\n resize(); makeParticles();\n window.addEventListener('resize', () => { resize(); makeParticles(); });\n\n function tick(){\n ctx.clearRect(0,0,w,h);\n particles.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if(p.x < 0 || p.x > w) p.vx *= -1;\n if(p.y < 0 || p.y > h) p.vy *= -1;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);\n ctx.fillStyle = `rgba(${opts.color}, ${p.a})`;\n ctx.fill();\n });\n \/\/ faint connecting lines for a \"network\" feel\n for(let i=0;i<particles.length;i++){\n for(let j=i+1;j<particles.length;j++){\n const dx = particles[i].x - particles[j].x, dy = particles[i].y - particles[j].y;\n const dist = Math.sqrt(dx*dx + dy*dy);\n if(dist < opts.linkDist){\n ctx.beginPath();\n ctx.moveTo(particles[i].x, particles[i].y);\n ctx.lineTo(particles[j].x, particles[j].y);\n ctx.strokeStyle = `rgba(${opts.color}, ${0.08 * (1 - dist\/opts.linkDist)})`;\n ctx.lineWidth = 1;\n ctx.stroke();\n }\n }\n }\n if(!reduceMotion) requestAnimationFrame(tick);\n }\n tick();\n }\n initParticles('particle-canvas', { count:90, speed:0.25, color:'194,170,255', linkDist:120 });\n initParticles('about-particles', { count:46, speed:0.15, color:'255,150,210', linkDist:100 });\n\n \/* ---------------------------------------------------------\n 6. HERO MOUSE PARALLAX (quad core scene + glows)\n --------------------------------------------------------- *\/\n const heroScene = document.getElementById('heroScene');\n const quadCore = document.getElementById('quadCoreWrap');\n if(heroScene && !reduceMotion){\n document.getElementById('hero').addEventListener('mousemove', (e) => {\n const rect = heroScene.getBoundingClientRect();\n const cx = rect.left + rect.width\/2, cy = rect.top + rect.height\/2;\n const dx = (e.clientX - cx) \/ rect.width;\n const dy = (e.clientY - cy) \/ rect.height;\n quadCore.style.transform = `rotateY(${dx*16}deg) rotateX(${-dy*16}deg)`;\n });\n document.getElementById('hero').addEventListener('mouseleave', () => {\n quadCore.style.transform = 'rotateY(0deg) rotateX(0deg)';\n });\n }\n\n \/* ---------------------------------------------------------\n 7. BRAND CARDS \u2014 3D TILT + CURSOR PARALLAX LAYERS\n --------------------------------------------------------- *\/\n if(!reduceMotion){\n document.querySelectorAll('[data-tilt]').forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const px = (e.clientX - rect.left) \/ rect.width - 0.5;\n const py = (e.clientY - rect.top) \/ rect.height - 0.5;\n card.style.transform = `rotateY(${px*4}deg) rotateX(${-py*4}deg)`;\n\n card.querySelectorAll('[data-parallax]').forEach(layer => {\n const depth = parseFloat(layer.dataset.parallax);\n layer.style.transform = `translate(${px * depth * 100}px, ${py * depth * 100}px)`;\n });\n });\n card.addEventListener('mouseleave', () => {\n card.style.transform = 'rotateY(0deg) rotateX(0deg)';\n card.querySelectorAll('[data-parallax]').forEach(layer => {\n layer.style.transform = 'translate(0,0)';\n });\n });\n });\n }\n\n \/* ---------------------------------------------------------\n 8. SCROLL REVEAL \u2014 IntersectionObserver\n --------------------------------------------------------- *\/\n const revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');\n if('IntersectionObserver' in window){\n const io = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if(entry.isIntersecting){\n entry.target.classList.add('in-view');\n io.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });\n revealEls.forEach(el => io.observe(el));\n } else {\n revealEls.forEach(el => el.classList.add('in-view'));\n }\n\n \/* ---------------------------------------------------------\n 9. STAT COUNTER ANIMATION\n --------------------------------------------------------- *\/\n function animateCounter(el){\n const target = parseInt(el.dataset.count, 10);\n const suffix = el.dataset.suffix !== undefined ? el.dataset.suffix : '';\n const duration = 1800;\n const start = performance.now();\n function step(now){\n const p = Math.min((now - start) \/ duration, 1);\n const eased = 1 - Math.pow(1 - p, 3);\n el.textContent = Math.floor(eased * target).toLocaleString() + suffix;\n if(p < 1) requestAnimationFrame(step);\n else el.textContent = target.toLocaleString() + suffix;\n }\n requestAnimationFrame(step);\n }\n const counters = document.querySelectorAll('[data-count]');\n if('IntersectionObserver' in window){\n const cIo = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if(entry.isIntersecting){\n animateCounter(entry.target);\n cIo.unobserve(entry.target);\n }\n });\n }, { threshold: 0.6 });\n counters.forEach(c => cIo.observe(c));\n } else {\n counters.forEach(animateCounter);\n }\n\n \/* ---------------------------------------------------------\n 10. BUTTON RIPPLE EFFECT\n --------------------------------------------------------- *\/\n document.querySelectorAll('.btn').forEach(btn => {\n btn.addEventListener('click', function(e){\n const rect = btn.getBoundingClientRect();\n const ripple = document.createElement('span');\n const size = Math.max(rect.width, rect.height);\n ripple.className = 'ripple';\n ripple.style.width = ripple.style.height = size + 'px';\n ripple.style.left = (e.clientX - rect.left - size\/2) + 'px';\n ripple.style.top = (e.clientY - rect.top - size\/2) + 'px';\n btn.appendChild(ripple);\n setTimeout(() => ripple.remove(), 700);\n });\n });\n\n \/* ---------------------------------------------------------\n 11. FEATURED PRODUCTS \u2014 FILTER + TRACK SCROLL\n --------------------------------------------------------- *\/\n const filterBtns = document.querySelectorAll('.pf-btn');\n const productCards = document.querySelectorAll('.product-card');\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n filterBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n const filter = btn.dataset.filter;\n productCards.forEach(card => {\n const show = filter === 'all' || card.dataset.cat === filter;\n card.style.display = show ? '' : 'none';\n });\n });\n });\n\n const track = document.getElementById('productTrack');\n document.getElementById('trackPrev').addEventListener('click', () => {\n track.scrollBy({ left: -300, behavior: 'smooth' });\n });\n document.getElementById('trackNext').addEventListener('click', () => {\n track.scrollBy({ left: 300, behavior: 'smooth' });\n });\n\n \/* ---------------------------------------------------------\n 12. NEWSLETTER FORM (front-end only demo)\n --------------------------------------------------------- *\/\n const newsletterForm = document.getElementById('newsletterForm');\n const newsletterNote = document.getElementById('newsletterNote');\n newsletterForm.addEventListener('submit', (e) => {\n e.preventDefault();\n newsletterNote.textContent = \"You're on the list \u2014 welcome to AdFusionQuad!\";\n newsletterNote.style.color = 'var(--text-hi)';\n newsletterForm.reset();\n });\n\n \/* ---------------------------------------------------------\n 13. MISC\n --------------------------------------------------------- *\/\n document.getElementById('year').textContent = new Date().getFullYear();\n\n})();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AdFusionQuad \u2014 Gaming, Beauty, Craft & Ride, United<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":32,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/129"}],"wp:attachment":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}