TRAACK \u2014 Move Different<\/title>\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=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --black: #0A0A0A;\n --charcoal: #141414;\n --card: #1A1A1A;\n --amber: #F5A623;\n --amber-dark: #D4901E;\n --white: #FFFFFF;\n --muted: #888888;\n --border: #2A2A2A;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Inter', sans-serif;\n background: var(--black);\n color: var(--white);\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 5%;\n height: 70px;\n background: rgba(10,10,10,0.85);\n backdrop-filter: blur(14px);\n border-bottom: 1px solid var(--border);\n }\n .nav-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem;\n letter-spacing: 0.15em;\n color: var(--amber);\n text-decoration: none;\n }\n .nav-links { display: flex; gap: 2rem; list-style: none; }\n .nav-links a {\n color: var(--muted); text-decoration: none;\n font-size: 0.85rem; font-weight: 500;\n letter-spacing: 0.08em; text-transform: uppercase;\n transition: color 0.2s;\n }\n .nav-links a:hover { color: var(--white); }\n .nav-cta {\n background: var(--amber); color: var(--black);\n border: none; padding: 0.55rem 1.4rem;\n font-family: 'Inter', sans-serif; font-weight: 700;\n font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;\n cursor: pointer; transition: background 0.2s, transform 0.15s;\n }\n .nav-cta:hover { background: var(--amber-dark); transform: translateY(-1px); }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .hero {\n min-height: 100vh;\n display: grid;\n grid-template-columns: 1fr 1fr;\n padding-top: 70px;\n position: relative;\n overflow: hidden;\n }\n .hero::after {\n content: '';\n position: absolute;\n top: 0; right: 50%;\n width: 3px; height: 100%;\n background: var(--amber);\n transform: skewX(-4deg) translateX(50%);\n }\n\n .hero-left {\n display: flex; flex-direction: column; justify-content: center;\n padding: 6% 8% 6% 10%;\n position: relative; z-index: 1;\n }\n .hero-eyebrow {\n font-size: 0.75rem; font-weight: 600;\n letter-spacing: 0.25em; text-transform: uppercase;\n color: var(--amber); margin-bottom: 1.2rem;\n display: flex; align-items: center; gap: 0.8rem;\n }\n .hero-eyebrow::before {\n content: ''; display: block;\n width: 30px; height: 2px; background: var(--amber);\n }\n .hero-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(4.5rem, 9vw, 8rem);\n line-height: 0.92;\n letter-spacing: 0.03em;\n color: var(--white);\n margin-bottom: 1.5rem;\n }\n .hero-title span { color: var(--amber); }\n .hero-desc {\n font-size: 1rem; line-height: 1.75;\n color: var(--muted); max-width: 38ch;\n margin-bottom: 2.5rem; font-weight: 300;\n }\n .hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }\n .btn-primary {\n background: var(--amber); color: var(--black);\n border: none; padding: 0.9rem 2.2rem;\n font-weight: 700; font-size: 0.9rem;\n letter-spacing: 0.08em; text-transform: uppercase;\n cursor: pointer; transition: all 0.2s;\n font-family: 'Inter', sans-serif;\n }\n .btn-primary:hover { background: var(--amber-dark); transform: translateY(-2px); }\n .btn-ghost {\n background: transparent; color: var(--white);\n border: 1px solid var(--border); padding: 0.9rem 2.2rem;\n font-weight: 500; font-size: 0.9rem;\n letter-spacing: 0.06em; text-transform: uppercase;\n cursor: pointer; transition: all 0.2s;\n font-family: 'Inter', sans-serif;\n }\n .btn-ghost:hover { border-color: var(--white); }\n\n .hero-right {\n background: var(--charcoal);\n display: flex; align-items: center; justify-content: center;\n position: relative; overflow: hidden;\n clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);\n }\n .hero-shoe-area {\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n padding: 80px 60px 60px;\n position: relative;\n }\n \/* Stylised shoe silhouette using CSS *\/\n .shoe-visual {\n width: 100%; max-width: 420px;\n aspect-ratio: 1.4\/1;\n position: relative;\n }\n .shoe-bg-circle {\n position: absolute;\n width: 85%; height: 85%;\n border-radius: 50%;\n background: radial-gradient(circle at 40% 50%, rgba(245,166,35,0.12) 0%, transparent 70%);\n top: 50%; left: 50%; transform: translate(-50%, -50%);\n }\n .shoe-placeholder {\n width: 100%; height: 100%;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: 1rem;\n }\n \/* SVG shoe icon *\/\n .shoe-icon { width: 260px; filter: drop-shadow(0 20px 50px rgba(245,166,35,0.3)); }\n .shoe-badge {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 0.9rem; letter-spacing: 0.2em;\n color: var(--amber); background: rgba(245,166,35,0.1);\n border: 1px solid rgba(245,166,35,0.25);\n padding: 0.4rem 1rem;\n }\n\n .hero-stats {\n position: absolute; bottom: 40px; left: 40px;\n display: flex; gap: 2rem;\n }\n .stat { }\n .stat-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem; color: var(--amber);\n letter-spacing: 0.05em;\n }\n .stat-label {\n font-size: 0.7rem; color: var(--muted);\n letter-spacing: 0.12em; text-transform: uppercase;\n }\n\n \/* \u2500\u2500 MARQUEE \u2500\u2500 *\/\n .marquee-wrap {\n background: var(--amber);\n padding: 0.8rem 0;\n overflow: hidden; white-space: nowrap;\n }\n .marquee-track {\n display: inline-flex; gap: 0;\n animation: marquee 20s linear infinite;\n }\n .marquee-item {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 1.1rem; letter-spacing: 0.2em;\n color: var(--black); padding: 0 2rem;\n }\n .marquee-dot { color: var(--black); opacity: 0.4; }\n @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n\n \/* \u2500\u2500 SECTION BASE \u2500\u2500 *\/\n section { padding: 6rem 10%; }\n .section-label {\n font-size: 0.7rem; font-weight: 600;\n letter-spacing: 0.3em; text-transform: uppercase;\n color: var(--amber); margin-bottom: 1rem;\n }\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(2.5rem, 5vw, 4rem);\n line-height: 1; letter-spacing: 0.03em;\n margin-bottom: 1rem;\n }\n .section-sub {\n color: var(--muted); font-size: 0.95rem;\n line-height: 1.7; max-width: 50ch;\n }\n\n \/* \u2500\u2500 FEATURES \u2500\u2500 *\/\n .features { background: var(--charcoal); }\n .features-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; flex-wrap: wrap; gap: 2rem; }\n .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }\n .feature-card {\n background: var(--black); padding: 3rem 2.5rem;\n border-top: 2px solid transparent;\n transition: border-color 0.3s, transform 0.3s;\n position: relative; overflow: hidden;\n }\n .feature-card::before {\n content: attr(data-num);\n position: absolute; right: 1.5rem; top: 1rem;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 5rem; color: rgba(255,255,255,0.03);\n line-height: 1;\n }\n .feature-card:hover { border-color: var(--amber); transform: translateY(-4px); }\n .feature-icon {\n width: 52px; height: 52px;\n background: rgba(245,166,35,0.1);\n border: 1px solid rgba(245,166,35,0.2);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 1.8rem;\n font-size: 1.4rem;\n }\n .feature-name {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 1.5rem; letter-spacing: 0.05em;\n margin-bottom: 0.8rem;\n }\n .feature-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.7; }\n\n \/* \u2500\u2500 PRODUCTS \u2500\u2500 *\/\n .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.5rem; }\n .product-card {\n background: var(--card); cursor: pointer;\n transition: transform 0.3s;\n position: relative;\n }\n .product-card:hover { transform: translateY(-6px); }\n .product-img {\n width: 100%; aspect-ratio: 1\/1;\n display: flex; align-items: center; justify-content: center;\n background: var(--charcoal);\n position: relative; overflow: hidden;\n }\n .product-img svg { width: 60%; opacity: 0.85; transition: transform 0.4s; }\n .product-card:hover .product-img svg { transform: scale(1.08) rotate(-3deg); }\n .product-badge {\n position: absolute; top: 1rem; left: 1rem;\n background: var(--amber); color: var(--black);\n font-size: 0.65rem; font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n padding: 0.25rem 0.6rem;\n }\n .product-info { padding: 1.5rem; }\n .product-cat { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }\n .product-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.05em; margin-bottom: 0.8rem; }\n .product-bottom { display: flex; justify-content: space-between; align-items: center; }\n .product-price { font-size: 1.1rem; font-weight: 700; color: var(--amber); }\n .product-btn {\n background: var(--border); border: none; color: var(--white);\n padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600;\n letter-spacing: 0.06em; text-transform: uppercase;\n cursor: pointer; transition: background 0.2s; font-family: 'Inter', sans-serif;\n }\n .product-btn:hover { background: var(--amber); color: var(--black); }\n\n \/* \u2500\u2500 MANIFESTO \/ BRAND \u2500\u2500 *\/\n .manifesto {\n background: var(--amber);\n padding: 5rem 10%;\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;\n }\n .manifesto-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(3rem, 6vw, 5.5rem);\n color: var(--black); line-height: 0.95;\n letter-spacing: 0.03em;\n }\n .manifesto-body { color: rgba(0,0,0,0.7); font-size: 1rem; line-height: 1.8; }\n .manifesto-body p + p { margin-top: 1rem; }\n .manifesto-link {\n display: inline-flex; align-items: center; gap: 0.5rem;\n margin-top: 1.5rem; color: var(--black); font-weight: 700;\n font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;\n text-decoration: none; border-bottom: 2px solid var(--black); padding-bottom: 2px;\n }\n\n \/* \u2500\u2500 SOCIAL PROOF \u2500\u2500 *\/\n .social { background: var(--charcoal); }\n .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }\n .review-card {\n background: var(--black); padding: 2rem;\n border-left: 3px solid var(--amber);\n }\n .review-stars { color: var(--amber); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 1rem; }\n .review-text { color: rgba(255,255,255,0.75); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.5rem; }\n .review-author { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; }\n .review-loc { color: var(--muted); font-size: 0.75rem; }\n\n \/* \u2500\u2500 CTA SECTION \u2500\u2500 *\/\n .cta-section {\n text-align: center;\n padding: 7rem 10%;\n background: var(--black);\n position: relative; overflow: hidden;\n }\n .cta-section::before {\n content: 'TRAACK';\n position: absolute;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 25vw; color: rgba(255,255,255,0.015);\n top: 50%; left: 50%; transform: translate(-50%, -50%);\n white-space: nowrap; pointer-events: none;\n letter-spacing: 0.1em;\n }\n .cta-section .section-title { font-size: clamp(2.8rem, 6vw, 5rem); position: relative; }\n .cta-section .section-sub { margin: 1.2rem auto 2.5rem; position: relative; }\n .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n footer {\n background: var(--charcoal);\n border-top: 1px solid var(--border);\n padding: 3rem 10%;\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;\n }\n .footer-brand .nav-logo { display: block; margin-bottom: 1rem; }\n .footer-tagline { color: var(--muted); font-size: 0.85rem; line-height: 1.6; max-width: 25ch; }\n .footer-col-title {\n font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;\n color: var(--amber); margin-bottom: 1.2rem; font-weight: 600;\n }\n .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }\n .footer-links a { color: var(--muted); font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }\n .footer-links a:hover { color: var(--white); }\n .footer-bottom {\n background: var(--black);\n padding: 1.2rem 10%;\n display: flex; justify-content: space-between; align-items: center;\n border-top: 1px solid var(--border);\n color: var(--muted); font-size: 0.78rem;\n }\n\n \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 900px) {\n .hero { grid-template-columns: 1fr; min-height: auto; }\n .hero::after { display: none; }\n .hero-right { clip-path: none; height: 50vw; min-height: 280px; }\n .hero-stats { position: static; margin-top: 2rem; }\n .features-grid, .products-grid, .reviews-grid { grid-template-columns: 1fr; }\n .manifesto { grid-template-columns: 1fr; }\n footer { grid-template-columns: 1fr 1fr; }\n .nav-links { display: none; }\n }\n @media (max-width: 600px) {\n section { padding: 4rem 6%; }\n .hero-left { padding: 4rem 6% 3rem; }\n footer { grid-template-columns: 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<nav>\n <a class=\"nav-logo\" href=\"#\">TRAACK<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#products\">Collection<\/a><\/li>\n <li><a href=\"#about\">About<\/a><\/li>\n <li><a href=\"#reviews\">Reviews<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <button class=\"nav-cta\">Shop Now<\/button>\n<\/nav>\n\n\n<section class=\"hero\">\n <div class=\"hero-left\">\n <div class=\"hero-eyebrow\">New Collection 2025<\/div>\n <h1 class=\"hero-title\">MOVE<br><span>DIFFER<\/span><br>ENT.<\/h1>\n <p class=\"hero-desc\">Built for Bangladesh. Designed for the streets. Every pair of TRAACK shoes is engineered to keep you moving \u2014 all day, every day.<\/p>\n <div class=\"hero-actions\">\n <button class=\"btn-primary\">Explore Collection<\/button>\n <button class=\"btn-ghost\">Watch Story<\/button>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat\">\n <div class=\"stat-num\">50K+<\/div>\n <div class=\"stat-label\">Happy Customers<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-num\">200+<\/div>\n <div class=\"stat-label\">Styles Available<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-num\">5\u2605<\/div>\n <div class=\"stat-label\">Average Rating<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hero-right\">\n <div class=\"hero-shoe-area\">\n <div class=\"shoe-bg-circle\"><\/div>\n <div class=\"shoe-placeholder\">\n <svg class=\"shoe-icon\" viewBox=\"0 0 300 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <path d=\"M20 120 Q30 90 60 80 L100 75 L140 55 Q165 40 190 42 L250 45 Q280 46 285 60 L285 85 Q285 100 260 108 L230 112 Q200 116 160 118 L80 122 Q50 124 35 122 Q20 120 20 120Z\" fill=\"#F5A623\" opacity=\"0.15\" stroke=\"#F5A623\" stroke-width=\"2\"\/>\n \n <path d=\"M20 120 Q22 135 50 138 L240 138 Q275 138 285 125 L285 108 Q260 120 160 122 L80 124 Q40 125 20 120Z\" fill=\"#F5A623\" opacity=\"0.3\"\/>\n \n <path d=\"M100 75 L120 68 L150 60 L180 52\" stroke=\"#F5A623\" stroke-width=\"1.5\" stroke-dasharray=\"4 3\" opacity=\"0.6\"\/>\n <path d=\"M130 78 L130 60\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.4\"\/>\n <path d=\"M160 78 L158 55\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.4\"\/>\n <path d=\"M190 80 L188 52\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.4\"\/>\n \n <text x=\"210\" y=\"100\" font-family=\"'Bebas Neue', sans-serif\" font-size=\"18\" fill=\"#F5A623\" opacity=\"0.9\">TRAACK<\/text>\n \n <path d=\"M20 120 Q15 115 22 100 L45 90 L60 80\" stroke=\"#F5A623\" stroke-width=\"2\" fill=\"none\" opacity=\"0.7\"\/>\n \n <ellipse cx=\"175\" cy=\"68\" rx=\"55\" ry=\"8\" fill=\"#F5A623\" opacity=\"0.05\"\/>\n <\/svg>\n <div class=\"shoe-badge\">NEW ARRIVAL \u2014 SS25<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"marquee-wrap\">\n <div class=\"marquee-track\">\n <span class=\"marquee-item\">STREET READY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">MADE FOR BANGLADESH<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">PREMIUM QUALITY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">NEW COLLECTION 2025<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">FREE DELIVERY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">TRAACK FOOTWEAR<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">STREET READY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">MADE FOR BANGLADESH<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">PREMIUM QUALITY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">NEW COLLECTION 2025<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">FREE DELIVERY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">TRAACK FOOTWEAR<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <\/div>\n<\/div>\n\n\n<section class=\"features\" id=\"about\">\n <div class=\"features-header\">\n <div>\n <p class=\"section-label\">Why Traack<\/p>\n <h2 class=\"section-title reveal\">BUILT DIFFERENT<br>FROM THE GROUND UP<\/h2>\n <\/div>\n <p class=\"section-sub reveal\">Every design decision starts with one question: does this make life better for the person wearing it?<\/p>\n <\/div>\n <div class=\"features-grid\">\n <div class=\"feature-card reveal\" data-num=\"01\">\n <div class=\"feature-icon\">🧱<\/div>\n <div class=\"feature-name\">Durable Materials<\/div>\n <p class=\"feature-desc\">We source only high-grade materials that last \u2014 because you should never have to choose between style and durability.<\/p>\n <\/div>\n <div class=\"feature-card reveal reveal-delay-1\" data-num=\"02\">\n <div class=\"feature-icon\">🌿<\/div>\n <div class=\"feature-name\">Comfort First<\/div>\n <p class=\"feature-desc\">Memory foam insoles, ergonomic arch support, and breathable lining \u2014 comfort isn’t an option, it’s the baseline.<\/p>\n <\/div>\n <div class=\"feature-card reveal reveal-delay-2\" data-num=\"03\">\n <div class=\"feature-icon\">🎨<\/div>\n <div class=\"feature-name\">Bangladeshi Design DNA<\/div>\n <p class=\"feature-desc\">Our designs speak to the Bangladeshi street \u2014 bold, confident, and deeply rooted in local culture and identity.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"products\" style=\"background: var(--black);\">\n <p class=\"section-label\">Our Collection<\/p>\n <div style=\"display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem;\">\n <h2 class=\"section-title reveal\">FEATURED<br>STYLES<\/h2>\n <button class=\"btn-ghost reveal\">View All Styles \u2192<\/button>\n <\/div>\n <div class=\"products-grid\">\n\n <div class=\"product-card reveal\">\n <div class=\"product-img\">\n <div class=\"product-badge\">BEST SELLER<\/div>\n <svg viewBox=\"0 0 280 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M20 110 Q35 80 65 70 L110 65 L155 45 Q180 32 205 35 L258 38 Q278 40 278 55 L278 78 Q278 92 255 100 L225 104 L145 108 L70 112 Q40 114 28 110 Z\" fill=\"#1E1E1E\" stroke=\"#F5A623\" stroke-width=\"1.5\"\/>\n <path d=\"M20 110 Q22 125 48 128 L235 128 Q268 128 278 115 L278 100 Q255 112 145 115 L70 117 Q35 118 20 110Z\" fill=\"#2A2A2A\"\/>\n <text x=\"190\" y=\"92\" font-family=\"sans-serif\" font-size=\"12\" fill=\"#F5A623\" font-weight=\"bold\">TRAACK<\/text>\n <\/svg>\n <\/div>\n <div class=\"product-info\">\n <div class=\"product-cat\">Running \/ Casual<\/div>\n <div class=\"product-name\">TraackRun Pro X1<\/div>\n <div class=\"product-bottom\">\n <span class=\"product-price\">\u09f32,499<\/span>\n <button class=\"product-btn\">Add to Cart<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card reveal reveal-delay-1\">\n <div class=\"product-img\" style=\"background: #111;\">\n <div class=\"product-badge\" style=\"background:#fff; color:#000;\">NEW<\/div>\n <svg viewBox=\"0 0 280 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M18 115 Q30 82 62 72 L108 66 L152 46 Q178 30 202 33 L255 37 Q277 39 277 55 L277 80 Q277 95 252 103 L222 107 L142 111 L68 115 Q38 117 24 113 Z\" fill=\"#222\" stroke=\"#888\" stroke-width=\"1.5\"\/>\n <path d=\"M18 115 Q20 128 46 131 L232 131 Q266 131 277 117 L277 103 Q252 115 142 118 L68 120 Q33 121 18 115Z\" fill=\"#333\"\/>\n <path d=\"M108 66 L128 58 L158 48 L185 40\" stroke=\"#aaa\" stroke-width=\"1\" stroke-dasharray=\"3 3\"\/>\n <text x=\"185\" y=\"95\" font-family=\"sans-serif\" font-size=\"12\" fill=\"#aaa\" font-weight=\"bold\">TRAACK<\/text>\n <\/svg>\n <\/div>\n <div class=\"product-info\">\n <div class=\"product-cat\">Street \/ Urban<\/div>\n <div class=\"product-name\">City Stepper V2<\/div>\n <div class=\"product-bottom\">\n <span class=\"product-price\">\u09f32,199<\/span>\n <button class=\"product-btn\">Add to Cart<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card reveal reveal-delay-2\">\n <div class=\"product-img\" style=\"background: #0f0f0f;\">\n <div class=\"product-badge\" style=\"background:#F5A623;\">LIMITED<\/div>\n <svg viewBox=\"0 0 280 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M22 112 Q36 78 68 68 L112 62 L158 42 Q184 28 208 31 L260 35 Q280 37 280 53 L280 78 Q280 93 256 101 L226 105 L148 109 L72 113 Q42 115 28 111 Z\" fill=\"#1A1A0A\" stroke=\"#F5A623\" stroke-width=\"2\"\/>\n <path d=\"M22 112 Q24 127 50 130 L238 130 Q270 130 280 116 L280 101 Q256 113 148 116 L72 118 Q37 119 22 112Z\" fill=\"#2A2500\"\/>\n <path d=\"M112 62 L132 54 L162 44 L190 36\" stroke=\"#F5A623\" stroke-width=\"2\" opacity=\"0.8\"\/>\n <text x=\"188\" y=\"93\" font-family=\"sans-serif\" font-size=\"12\" fill=\"#F5A623\" font-weight=\"bold\">TRAACK<\/text>\n <circle cx=\"200\" cy=\"75\" r=\"15\" fill=\"none\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.3\"\/>\n <\/svg>\n <\/div>\n <div class=\"product-info\">\n <div class=\"product-cat\">Premium \/ Limited<\/div>\n <div class=\"product-name\">Golden Edition GE01<\/div>\n <div class=\"product-bottom\">\n <span class=\"product-price\">\u09f33,299<\/span>\n <button class=\"product-btn\">Add to Cart<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<div class=\"manifesto\" id=\"contact\">\n <div>\n <h2 class=\"manifesto-title\">YOUR FEET. YOUR STORY. YOUR TRAACK.<\/h2>\n <\/div>\n <div class=\"manifesto-body\">\n <p>We started TRAACK with a simple belief: people in Bangladesh deserve footwear that’s as bold, hardworking, and ambitious as they are.<\/p>\n <p>Every pair we make is a statement \u2014 that quality doesn’t have to mean imported, that style doesn’t have to mean expensive, and that great design belongs to everyone.<\/p>\n <a class=\"manifesto-link\" href=\"#\">Discover Our Story \u2192<\/a>\n <\/div>\n<\/div>\n\n\n<section class=\"social\" id=\"reviews\">\n <p class=\"section-label\">Customer Reviews<\/p>\n <h2 class=\"section-title reveal\">WHAT PEOPLE<br>ARE SAYING<\/h2>\n <div class=\"reviews-grid\">\n <div class=\"review-card reveal\">\n <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"review-text\">“\u098f\u0987 \u09b6\u09c1\u099c\u0997\u09c1\u09b2\u09cb \u0986\u09ae\u09bf \u098f\u0996\u09a8 \u09aa\u09b0\u09cd\u09af\u09a8\u09cd\u09a4 \u09af\u09be \u09aa\u09b0\u09c7\u099b\u09bf \u09a4\u09be\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7 \u09b8\u09ac\u099a\u09c7\u09af\u09bc\u09c7 \u0986\u09b0\u09be\u09ae\u09a6\u09be\u09af\u09bc\u0995\u0964 \u09ae\u09be\u09a8 \u0985\u09a8\u09c7\u0995 \u09ad\u09be\u09b2\u09cb \u098f\u09ac\u0982 \u09a1\u09c7\u09b2\u09bf\u09ad\u09be\u09b0\u09bf\u0993 \u09a6\u09cd\u09b0\u09c1\u09a4\u0964”<\/p>\n <div class=\"review-author\">Rahim Ahmed<\/div>\n <div class=\"review-loc\">Dhaka, Bangladesh<\/div>\n <\/div>\n <div class=\"review-card reveal reveal-delay-1\">\n <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"review-text\">“City Stepper V2 \u09aa\u09b0\u09c7 \u0985\u09ab\u09bf\u09b8\u09c7 \u0997\u09c7\u09b2\u09c7 \u09b8\u09ac\u09be\u0987 \u099c\u09bf\u099c\u09cd\u099e\u09c7\u09b8 \u0995\u09b0\u09c7 \u0995\u09cb\u09a5\u09be \u09a5\u09c7\u0995\u09c7 \u0995\u09bf\u09a8\u09b2\u09be\u09ae\u0964 Look and comfort \u09a6\u09c1\u099f\u09cb\u0987 \u09a6\u09be\u09b0\u09c1\u09a3\u0964”<\/p>\n <div class=\"review-author\">Nasrin Islam<\/div>\n <div class=\"review-loc\">Chittagong, Bangladesh<\/div>\n <\/div>\n <div class=\"review-card reveal reveal-delay-2\">\n <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"review-text\">“Price \u0985\u09a8\u09c7\u0995 reasonable \u098f\u09ac\u0982 quality \u099f\u09be imported brand-\u098f\u09b0 \u09b8\u09be\u09a5\u09c7 \u09a4\u09c1\u09b2\u09a8\u09c0\u09af\u09bc\u0964 TRAACK \u098f\u0996\u09a8 \u0986\u09ae\u09be\u09b0 first choice\u0964”<\/p>\n <div class=\"review-author\">Karim Hossain<\/div>\n <div class=\"review-loc\">Sylhet, Bangladesh<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta-section\">\n <p class=\"section-label\">Ready to Move?<\/p>\n <h2 class=\"section-title reveal\">STEP INTO<br><span style=\"color:var(--amber)\">YOUR TRAACK<\/span><\/h2>\n <p class=\"section-sub reveal\">Join 50,000+ customers across Bangladesh who have already found their perfect pair.<\/p>\n <div class=\"cta-actions reveal\">\n <button class=\"btn-primary\" style=\"font-size:1rem; padding:1rem 2.8rem;\">Shop Full Collection<\/button>\n <button class=\"btn-ghost\" style=\"font-size:1rem; padding:1rem 2.8rem;\">Find Your Size \u2192<\/button>\n <\/div>\n<\/section>\n\n\n<footer>\n <div class=\"footer-brand\">\n <a class=\"nav-logo\" href=\"#\">TRAACK<\/a>\n <p class=\"footer-tagline\">Premium footwear for the streets of Bangladesh. Built to move, built to last.<\/p>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Shop<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">New Arrivals<\/a><\/li>\n <li><a href=\"#\">Running<\/a><\/li>\n <li><a href=\"#\">Street \/ Urban<\/a><\/li>\n <li><a href=\"#\">Limited Edition<\/a><\/li>\n <li><a href=\"#\">Sale<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Company<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">About Us<\/a><\/li>\n <li><a href=\"#\">Our Story<\/a><\/li>\n <li><a href=\"#\">Careers<\/a><\/li>\n <li><a href=\"#\">Press<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Support<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">Size Guide<\/a><\/li>\n <li><a href=\"#\">Returns & Exchange<\/a><\/li>\n <li><a href=\"#\">Track Order<\/a><\/li>\n <li><a href=\"#\">Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n<\/footer>\n<div class=\"footer-bottom\">\n <span>\u00a9 2025 TRAACK Footwear. All rights reserved.<\/span>\n <span>Made with ♥ in Bangladesh<\/span>\n<\/div>\n\n<script>\n \/\/ Scroll reveal\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\n }, { threshold: 0.12 });\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n \/\/ Nav scroll effect\n const nav = document.querySelector('nav');\n window.addEventListener('scroll', () => {\n nav.style.borderBottomColor = window.scrollY > 50 ? 'rgba(245,166,35,0.3)' : 'var(--border)';\n });\n\n \/\/ Product btn feedback\n document.querySelectorAll('.product-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const orig = btn.textContent;\n btn.textContent = '\u2713 Added';\n btn.style.background = '#F5A623';\n btn.style.color = '#000';\n setTimeout(() => {\n btn.textContent = orig;\n btn.style.background = '';\n btn.style.color = '';\n }, 1500);\n });\n });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>TRAACK \u2014 Move Different TRAACK Collection About Reviews Contact Shop Now New Collection 2025 MOVEDIFFERENT. Built for Bangladesh. Designed for the streets. Every pair of TRAACK shoes is engineered to keep you moving \u2014 all day, every day. Explore Collection Watch Story 50K+ Happy Customers 200+ Styles Available 5\u2605 Average Rating TRAACK NEW ARRIVAL \u2014 … <a title=\"TRAACK\" class=\"read-more\" href=\"https:\/\/demo.frego.online\/?page_id=8\" aria-label=\"Read more about TRAACK\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.frego.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":1,"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2026-06-28T09:09:15","date_gmt":"2026-06-28T09:09:15","guid":{"rendered":"http:\/\/demo.frego.online\/?page_id=8"},"modified":"2026-06-28T09:09:33","modified_gmt":"2026-06-28T09:09:33","slug":"traack","status":"publish","type":"page","link":"https:\/\/demo.frego.online\/?page_id=8","title":{"rendered":"TRAACK"},"content":{"rendered":"\n\n\n\n\n\nTRAACK \u2014 Move Different<\/title>\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=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --black: #0A0A0A;\n --charcoal: #141414;\n --card: #1A1A1A;\n --amber: #F5A623;\n --amber-dark: #D4901E;\n --white: #FFFFFF;\n --muted: #888888;\n --border: #2A2A2A;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Inter', sans-serif;\n background: var(--black);\n color: var(--white);\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 5%;\n height: 70px;\n background: rgba(10,10,10,0.85);\n backdrop-filter: blur(14px);\n border-bottom: 1px solid var(--border);\n }\n .nav-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem;\n letter-spacing: 0.15em;\n color: var(--amber);\n text-decoration: none;\n }\n .nav-links { display: flex; gap: 2rem; list-style: none; }\n .nav-links a {\n color: var(--muted); text-decoration: none;\n font-size: 0.85rem; font-weight: 500;\n letter-spacing: 0.08em; text-transform: uppercase;\n transition: color 0.2s;\n }\n .nav-links a:hover { color: var(--white); }\n .nav-cta {\n background: var(--amber); color: var(--black);\n border: none; padding: 0.55rem 1.4rem;\n font-family: 'Inter', sans-serif; font-weight: 700;\n font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;\n cursor: pointer; transition: background 0.2s, transform 0.15s;\n }\n .nav-cta:hover { background: var(--amber-dark); transform: translateY(-1px); }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .hero {\n min-height: 100vh;\n display: grid;\n grid-template-columns: 1fr 1fr;\n padding-top: 70px;\n position: relative;\n overflow: hidden;\n }\n .hero::after {\n content: '';\n position: absolute;\n top: 0; right: 50%;\n width: 3px; height: 100%;\n background: var(--amber);\n transform: skewX(-4deg) translateX(50%);\n }\n\n .hero-left {\n display: flex; flex-direction: column; justify-content: center;\n padding: 6% 8% 6% 10%;\n position: relative; z-index: 1;\n }\n .hero-eyebrow {\n font-size: 0.75rem; font-weight: 600;\n letter-spacing: 0.25em; text-transform: uppercase;\n color: var(--amber); margin-bottom: 1.2rem;\n display: flex; align-items: center; gap: 0.8rem;\n }\n .hero-eyebrow::before {\n content: ''; display: block;\n width: 30px; height: 2px; background: var(--amber);\n }\n .hero-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(4.5rem, 9vw, 8rem);\n line-height: 0.92;\n letter-spacing: 0.03em;\n color: var(--white);\n margin-bottom: 1.5rem;\n }\n .hero-title span { color: var(--amber); }\n .hero-desc {\n font-size: 1rem; line-height: 1.75;\n color: var(--muted); max-width: 38ch;\n margin-bottom: 2.5rem; font-weight: 300;\n }\n .hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }\n .btn-primary {\n background: var(--amber); color: var(--black);\n border: none; padding: 0.9rem 2.2rem;\n font-weight: 700; font-size: 0.9rem;\n letter-spacing: 0.08em; text-transform: uppercase;\n cursor: pointer; transition: all 0.2s;\n font-family: 'Inter', sans-serif;\n }\n .btn-primary:hover { background: var(--amber-dark); transform: translateY(-2px); }\n .btn-ghost {\n background: transparent; color: var(--white);\n border: 1px solid var(--border); padding: 0.9rem 2.2rem;\n font-weight: 500; font-size: 0.9rem;\n letter-spacing: 0.06em; text-transform: uppercase;\n cursor: pointer; transition: all 0.2s;\n font-family: 'Inter', sans-serif;\n }\n .btn-ghost:hover { border-color: var(--white); }\n\n .hero-right {\n background: var(--charcoal);\n display: flex; align-items: center; justify-content: center;\n position: relative; overflow: hidden;\n clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);\n }\n .hero-shoe-area {\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n padding: 80px 60px 60px;\n position: relative;\n }\n \/* Stylised shoe silhouette using CSS *\/\n .shoe-visual {\n width: 100%; max-width: 420px;\n aspect-ratio: 1.4\/1;\n position: relative;\n }\n .shoe-bg-circle {\n position: absolute;\n width: 85%; height: 85%;\n border-radius: 50%;\n background: radial-gradient(circle at 40% 50%, rgba(245,166,35,0.12) 0%, transparent 70%);\n top: 50%; left: 50%; transform: translate(-50%, -50%);\n }\n .shoe-placeholder {\n width: 100%; height: 100%;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: 1rem;\n }\n \/* SVG shoe icon *\/\n .shoe-icon { width: 260px; filter: drop-shadow(0 20px 50px rgba(245,166,35,0.3)); }\n .shoe-badge {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 0.9rem; letter-spacing: 0.2em;\n color: var(--amber); background: rgba(245,166,35,0.1);\n border: 1px solid rgba(245,166,35,0.25);\n padding: 0.4rem 1rem;\n }\n\n .hero-stats {\n position: absolute; bottom: 40px; left: 40px;\n display: flex; gap: 2rem;\n }\n .stat { }\n .stat-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem; color: var(--amber);\n letter-spacing: 0.05em;\n }\n .stat-label {\n font-size: 0.7rem; color: var(--muted);\n letter-spacing: 0.12em; text-transform: uppercase;\n }\n\n \/* \u2500\u2500 MARQUEE \u2500\u2500 *\/\n .marquee-wrap {\n background: var(--amber);\n padding: 0.8rem 0;\n overflow: hidden; white-space: nowrap;\n }\n .marquee-track {\n display: inline-flex; gap: 0;\n animation: marquee 20s linear infinite;\n }\n .marquee-item {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 1.1rem; letter-spacing: 0.2em;\n color: var(--black); padding: 0 2rem;\n }\n .marquee-dot { color: var(--black); opacity: 0.4; }\n @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n\n \/* \u2500\u2500 SECTION BASE \u2500\u2500 *\/\n section { padding: 6rem 10%; }\n .section-label {\n font-size: 0.7rem; font-weight: 600;\n letter-spacing: 0.3em; text-transform: uppercase;\n color: var(--amber); margin-bottom: 1rem;\n }\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(2.5rem, 5vw, 4rem);\n line-height: 1; letter-spacing: 0.03em;\n margin-bottom: 1rem;\n }\n .section-sub {\n color: var(--muted); font-size: 0.95rem;\n line-height: 1.7; max-width: 50ch;\n }\n\n \/* \u2500\u2500 FEATURES \u2500\u2500 *\/\n .features { background: var(--charcoal); }\n .features-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; flex-wrap: wrap; gap: 2rem; }\n .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }\n .feature-card {\n background: var(--black); padding: 3rem 2.5rem;\n border-top: 2px solid transparent;\n transition: border-color 0.3s, transform 0.3s;\n position: relative; overflow: hidden;\n }\n .feature-card::before {\n content: attr(data-num);\n position: absolute; right: 1.5rem; top: 1rem;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 5rem; color: rgba(255,255,255,0.03);\n line-height: 1;\n }\n .feature-card:hover { border-color: var(--amber); transform: translateY(-4px); }\n .feature-icon {\n width: 52px; height: 52px;\n background: rgba(245,166,35,0.1);\n border: 1px solid rgba(245,166,35,0.2);\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 1.8rem;\n font-size: 1.4rem;\n }\n .feature-name {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 1.5rem; letter-spacing: 0.05em;\n margin-bottom: 0.8rem;\n }\n .feature-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.7; }\n\n \/* \u2500\u2500 PRODUCTS \u2500\u2500 *\/\n .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.5rem; }\n .product-card {\n background: var(--card); cursor: pointer;\n transition: transform 0.3s;\n position: relative;\n }\n .product-card:hover { transform: translateY(-6px); }\n .product-img {\n width: 100%; aspect-ratio: 1\/1;\n display: flex; align-items: center; justify-content: center;\n background: var(--charcoal);\n position: relative; overflow: hidden;\n }\n .product-img svg { width: 60%; opacity: 0.85; transition: transform 0.4s; }\n .product-card:hover .product-img svg { transform: scale(1.08) rotate(-3deg); }\n .product-badge {\n position: absolute; top: 1rem; left: 1rem;\n background: var(--amber); color: var(--black);\n font-size: 0.65rem; font-weight: 700;\n letter-spacing: 0.1em; text-transform: uppercase;\n padding: 0.25rem 0.6rem;\n }\n .product-info { padding: 1.5rem; }\n .product-cat { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }\n .product-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.05em; margin-bottom: 0.8rem; }\n .product-bottom { display: flex; justify-content: space-between; align-items: center; }\n .product-price { font-size: 1.1rem; font-weight: 700; color: var(--amber); }\n .product-btn {\n background: var(--border); border: none; color: var(--white);\n padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600;\n letter-spacing: 0.06em; text-transform: uppercase;\n cursor: pointer; transition: background 0.2s; font-family: 'Inter', sans-serif;\n }\n .product-btn:hover { background: var(--amber); color: var(--black); }\n\n \/* \u2500\u2500 MANIFESTO \/ BRAND \u2500\u2500 *\/\n .manifesto {\n background: var(--amber);\n padding: 5rem 10%;\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;\n }\n .manifesto-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(3rem, 6vw, 5.5rem);\n color: var(--black); line-height: 0.95;\n letter-spacing: 0.03em;\n }\n .manifesto-body { color: rgba(0,0,0,0.7); font-size: 1rem; line-height: 1.8; }\n .manifesto-body p + p { margin-top: 1rem; }\n .manifesto-link {\n display: inline-flex; align-items: center; gap: 0.5rem;\n margin-top: 1.5rem; color: var(--black); font-weight: 700;\n font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;\n text-decoration: none; border-bottom: 2px solid var(--black); padding-bottom: 2px;\n }\n\n \/* \u2500\u2500 SOCIAL PROOF \u2500\u2500 *\/\n .social { background: var(--charcoal); }\n .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }\n .review-card {\n background: var(--black); padding: 2rem;\n border-left: 3px solid var(--amber);\n }\n .review-stars { color: var(--amber); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 1rem; }\n .review-text { color: rgba(255,255,255,0.75); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.5rem; }\n .review-author { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; }\n .review-loc { color: var(--muted); font-size: 0.75rem; }\n\n \/* \u2500\u2500 CTA SECTION \u2500\u2500 *\/\n .cta-section {\n text-align: center;\n padding: 7rem 10%;\n background: var(--black);\n position: relative; overflow: hidden;\n }\n .cta-section::before {\n content: 'TRAACK';\n position: absolute;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 25vw; color: rgba(255,255,255,0.015);\n top: 50%; left: 50%; transform: translate(-50%, -50%);\n white-space: nowrap; pointer-events: none;\n letter-spacing: 0.1em;\n }\n .cta-section .section-title { font-size: clamp(2.8rem, 6vw, 5rem); position: relative; }\n .cta-section .section-sub { margin: 1.2rem auto 2.5rem; position: relative; }\n .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n footer {\n background: var(--charcoal);\n border-top: 1px solid var(--border);\n padding: 3rem 10%;\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;\n }\n .footer-brand .nav-logo { display: block; margin-bottom: 1rem; }\n .footer-tagline { color: var(--muted); font-size: 0.85rem; line-height: 1.6; max-width: 25ch; }\n .footer-col-title {\n font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;\n color: var(--amber); margin-bottom: 1.2rem; font-weight: 600;\n }\n .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }\n .footer-links a { color: var(--muted); font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }\n .footer-links a:hover { color: var(--white); }\n .footer-bottom {\n background: var(--black);\n padding: 1.2rem 10%;\n display: flex; justify-content: space-between; align-items: center;\n border-top: 1px solid var(--border);\n color: var(--muted); font-size: 0.78rem;\n }\n\n \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 900px) {\n .hero { grid-template-columns: 1fr; min-height: auto; }\n .hero::after { display: none; }\n .hero-right { clip-path: none; height: 50vw; min-height: 280px; }\n .hero-stats { position: static; margin-top: 2rem; }\n .features-grid, .products-grid, .reviews-grid { grid-template-columns: 1fr; }\n .manifesto { grid-template-columns: 1fr; }\n footer { grid-template-columns: 1fr 1fr; }\n .nav-links { display: none; }\n }\n @media (max-width: 600px) {\n section { padding: 4rem 6%; }\n .hero-left { padding: 4rem 6% 3rem; }\n footer { grid-template-columns: 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<nav>\n <a class=\"nav-logo\" href=\"#\">TRAACK<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#products\">Collection<\/a><\/li>\n <li><a href=\"#about\">About<\/a><\/li>\n <li><a href=\"#reviews\">Reviews<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <button class=\"nav-cta\">Shop Now<\/button>\n<\/nav>\n\n\n<section class=\"hero\">\n <div class=\"hero-left\">\n <div class=\"hero-eyebrow\">New Collection 2025<\/div>\n <h1 class=\"hero-title\">MOVE<br><span>DIFFER<\/span><br>ENT.<\/h1>\n <p class=\"hero-desc\">Built for Bangladesh. Designed for the streets. Every pair of TRAACK shoes is engineered to keep you moving \u2014 all day, every day.<\/p>\n <div class=\"hero-actions\">\n <button class=\"btn-primary\">Explore Collection<\/button>\n <button class=\"btn-ghost\">Watch Story<\/button>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat\">\n <div class=\"stat-num\">50K+<\/div>\n <div class=\"stat-label\">Happy Customers<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-num\">200+<\/div>\n <div class=\"stat-label\">Styles Available<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-num\">5\u2605<\/div>\n <div class=\"stat-label\">Average Rating<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hero-right\">\n <div class=\"hero-shoe-area\">\n <div class=\"shoe-bg-circle\"><\/div>\n <div class=\"shoe-placeholder\">\n <svg class=\"shoe-icon\" viewBox=\"0 0 300 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <path d=\"M20 120 Q30 90 60 80 L100 75 L140 55 Q165 40 190 42 L250 45 Q280 46 285 60 L285 85 Q285 100 260 108 L230 112 Q200 116 160 118 L80 122 Q50 124 35 122 Q20 120 20 120Z\" fill=\"#F5A623\" opacity=\"0.15\" stroke=\"#F5A623\" stroke-width=\"2\"\/>\n \n <path d=\"M20 120 Q22 135 50 138 L240 138 Q275 138 285 125 L285 108 Q260 120 160 122 L80 124 Q40 125 20 120Z\" fill=\"#F5A623\" opacity=\"0.3\"\/>\n \n <path d=\"M100 75 L120 68 L150 60 L180 52\" stroke=\"#F5A623\" stroke-width=\"1.5\" stroke-dasharray=\"4 3\" opacity=\"0.6\"\/>\n <path d=\"M130 78 L130 60\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.4\"\/>\n <path d=\"M160 78 L158 55\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.4\"\/>\n <path d=\"M190 80 L188 52\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.4\"\/>\n \n <text x=\"210\" y=\"100\" font-family=\"'Bebas Neue', sans-serif\" font-size=\"18\" fill=\"#F5A623\" opacity=\"0.9\">TRAACK<\/text>\n \n <path d=\"M20 120 Q15 115 22 100 L45 90 L60 80\" stroke=\"#F5A623\" stroke-width=\"2\" fill=\"none\" opacity=\"0.7\"\/>\n \n <ellipse cx=\"175\" cy=\"68\" rx=\"55\" ry=\"8\" fill=\"#F5A623\" opacity=\"0.05\"\/>\n <\/svg>\n <div class=\"shoe-badge\">NEW ARRIVAL \u2014 SS25<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"marquee-wrap\">\n <div class=\"marquee-track\">\n <span class=\"marquee-item\">STREET READY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">MADE FOR BANGLADESH<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">PREMIUM QUALITY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">NEW COLLECTION 2025<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">FREE DELIVERY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">TRAACK FOOTWEAR<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">STREET READY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">MADE FOR BANGLADESH<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">PREMIUM QUALITY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">NEW COLLECTION 2025<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">FREE DELIVERY<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <span class=\"marquee-item\">TRAACK FOOTWEAR<\/span><span class=\"marquee-dot\">\u25c6<\/span>\n <\/div>\n<\/div>\n\n\n<section class=\"features\" id=\"about\">\n <div class=\"features-header\">\n <div>\n <p class=\"section-label\">Why Traack<\/p>\n <h2 class=\"section-title reveal\">BUILT DIFFERENT<br>FROM THE GROUND UP<\/h2>\n <\/div>\n <p class=\"section-sub reveal\">Every design decision starts with one question: does this make life better for the person wearing it?<\/p>\n <\/div>\n <div class=\"features-grid\">\n <div class=\"feature-card reveal\" data-num=\"01\">\n <div class=\"feature-icon\">🧱<\/div>\n <div class=\"feature-name\">Durable Materials<\/div>\n <p class=\"feature-desc\">We source only high-grade materials that last \u2014 because you should never have to choose between style and durability.<\/p>\n <\/div>\n <div class=\"feature-card reveal reveal-delay-1\" data-num=\"02\">\n <div class=\"feature-icon\">🌿<\/div>\n <div class=\"feature-name\">Comfort First<\/div>\n <p class=\"feature-desc\">Memory foam insoles, ergonomic arch support, and breathable lining \u2014 comfort isn’t an option, it’s the baseline.<\/p>\n <\/div>\n <div class=\"feature-card reveal reveal-delay-2\" data-num=\"03\">\n <div class=\"feature-icon\">🎨<\/div>\n <div class=\"feature-name\">Bangladeshi Design DNA<\/div>\n <p class=\"feature-desc\">Our designs speak to the Bangladeshi street \u2014 bold, confident, and deeply rooted in local culture and identity.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"products\" style=\"background: var(--black);\">\n <p class=\"section-label\">Our Collection<\/p>\n <div style=\"display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem;\">\n <h2 class=\"section-title reveal\">FEATURED<br>STYLES<\/h2>\n <button class=\"btn-ghost reveal\">View All Styles \u2192<\/button>\n <\/div>\n <div class=\"products-grid\">\n\n <div class=\"product-card reveal\">\n <div class=\"product-img\">\n <div class=\"product-badge\">BEST SELLER<\/div>\n <svg viewBox=\"0 0 280 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M20 110 Q35 80 65 70 L110 65 L155 45 Q180 32 205 35 L258 38 Q278 40 278 55 L278 78 Q278 92 255 100 L225 104 L145 108 L70 112 Q40 114 28 110 Z\" fill=\"#1E1E1E\" stroke=\"#F5A623\" stroke-width=\"1.5\"\/>\n <path d=\"M20 110 Q22 125 48 128 L235 128 Q268 128 278 115 L278 100 Q255 112 145 115 L70 117 Q35 118 20 110Z\" fill=\"#2A2A2A\"\/>\n <text x=\"190\" y=\"92\" font-family=\"sans-serif\" font-size=\"12\" fill=\"#F5A623\" font-weight=\"bold\">TRAACK<\/text>\n <\/svg>\n <\/div>\n <div class=\"product-info\">\n <div class=\"product-cat\">Running \/ Casual<\/div>\n <div class=\"product-name\">TraackRun Pro X1<\/div>\n <div class=\"product-bottom\">\n <span class=\"product-price\">\u09f32,499<\/span>\n <button class=\"product-btn\">Add to Cart<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card reveal reveal-delay-1\">\n <div class=\"product-img\" style=\"background: #111;\">\n <div class=\"product-badge\" style=\"background:#fff; color:#000;\">NEW<\/div>\n <svg viewBox=\"0 0 280 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M18 115 Q30 82 62 72 L108 66 L152 46 Q178 30 202 33 L255 37 Q277 39 277 55 L277 80 Q277 95 252 103 L222 107 L142 111 L68 115 Q38 117 24 113 Z\" fill=\"#222\" stroke=\"#888\" stroke-width=\"1.5\"\/>\n <path d=\"M18 115 Q20 128 46 131 L232 131 Q266 131 277 117 L277 103 Q252 115 142 118 L68 120 Q33 121 18 115Z\" fill=\"#333\"\/>\n <path d=\"M108 66 L128 58 L158 48 L185 40\" stroke=\"#aaa\" stroke-width=\"1\" stroke-dasharray=\"3 3\"\/>\n <text x=\"185\" y=\"95\" font-family=\"sans-serif\" font-size=\"12\" fill=\"#aaa\" font-weight=\"bold\">TRAACK<\/text>\n <\/svg>\n <\/div>\n <div class=\"product-info\">\n <div class=\"product-cat\">Street \/ Urban<\/div>\n <div class=\"product-name\">City Stepper V2<\/div>\n <div class=\"product-bottom\">\n <span class=\"product-price\">\u09f32,199<\/span>\n <button class=\"product-btn\">Add to Cart<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"product-card reveal reveal-delay-2\">\n <div class=\"product-img\" style=\"background: #0f0f0f;\">\n <div class=\"product-badge\" style=\"background:#F5A623;\">LIMITED<\/div>\n <svg viewBox=\"0 0 280 160\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M22 112 Q36 78 68 68 L112 62 L158 42 Q184 28 208 31 L260 35 Q280 37 280 53 L280 78 Q280 93 256 101 L226 105 L148 109 L72 113 Q42 115 28 111 Z\" fill=\"#1A1A0A\" stroke=\"#F5A623\" stroke-width=\"2\"\/>\n <path d=\"M22 112 Q24 127 50 130 L238 130 Q270 130 280 116 L280 101 Q256 113 148 116 L72 118 Q37 119 22 112Z\" fill=\"#2A2500\"\/>\n <path d=\"M112 62 L132 54 L162 44 L190 36\" stroke=\"#F5A623\" stroke-width=\"2\" opacity=\"0.8\"\/>\n <text x=\"188\" y=\"93\" font-family=\"sans-serif\" font-size=\"12\" fill=\"#F5A623\" font-weight=\"bold\">TRAACK<\/text>\n <circle cx=\"200\" cy=\"75\" r=\"15\" fill=\"none\" stroke=\"#F5A623\" stroke-width=\"1\" opacity=\"0.3\"\/>\n <\/svg>\n <\/div>\n <div class=\"product-info\">\n <div class=\"product-cat\">Premium \/ Limited<\/div>\n <div class=\"product-name\">Golden Edition GE01<\/div>\n <div class=\"product-bottom\">\n <span class=\"product-price\">\u09f33,299<\/span>\n <button class=\"product-btn\">Add to Cart<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<div class=\"manifesto\" id=\"contact\">\n <div>\n <h2 class=\"manifesto-title\">YOUR FEET. YOUR STORY. YOUR TRAACK.<\/h2>\n <\/div>\n <div class=\"manifesto-body\">\n <p>We started TRAACK with a simple belief: people in Bangladesh deserve footwear that’s as bold, hardworking, and ambitious as they are.<\/p>\n <p>Every pair we make is a statement \u2014 that quality doesn’t have to mean imported, that style doesn’t have to mean expensive, and that great design belongs to everyone.<\/p>\n <a class=\"manifesto-link\" href=\"#\">Discover Our Story \u2192<\/a>\n <\/div>\n<\/div>\n\n\n<section class=\"social\" id=\"reviews\">\n <p class=\"section-label\">Customer Reviews<\/p>\n <h2 class=\"section-title reveal\">WHAT PEOPLE<br>ARE SAYING<\/h2>\n <div class=\"reviews-grid\">\n <div class=\"review-card reveal\">\n <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"review-text\">“\u098f\u0987 \u09b6\u09c1\u099c\u0997\u09c1\u09b2\u09cb \u0986\u09ae\u09bf \u098f\u0996\u09a8 \u09aa\u09b0\u09cd\u09af\u09a8\u09cd\u09a4 \u09af\u09be \u09aa\u09b0\u09c7\u099b\u09bf \u09a4\u09be\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7 \u09b8\u09ac\u099a\u09c7\u09af\u09bc\u09c7 \u0986\u09b0\u09be\u09ae\u09a6\u09be\u09af\u09bc\u0995\u0964 \u09ae\u09be\u09a8 \u0985\u09a8\u09c7\u0995 \u09ad\u09be\u09b2\u09cb \u098f\u09ac\u0982 \u09a1\u09c7\u09b2\u09bf\u09ad\u09be\u09b0\u09bf\u0993 \u09a6\u09cd\u09b0\u09c1\u09a4\u0964”<\/p>\n <div class=\"review-author\">Rahim Ahmed<\/div>\n <div class=\"review-loc\">Dhaka, Bangladesh<\/div>\n <\/div>\n <div class=\"review-card reveal reveal-delay-1\">\n <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"review-text\">“City Stepper V2 \u09aa\u09b0\u09c7 \u0985\u09ab\u09bf\u09b8\u09c7 \u0997\u09c7\u09b2\u09c7 \u09b8\u09ac\u09be\u0987 \u099c\u09bf\u099c\u09cd\u099e\u09c7\u09b8 \u0995\u09b0\u09c7 \u0995\u09cb\u09a5\u09be \u09a5\u09c7\u0995\u09c7 \u0995\u09bf\u09a8\u09b2\u09be\u09ae\u0964 Look and comfort \u09a6\u09c1\u099f\u09cb\u0987 \u09a6\u09be\u09b0\u09c1\u09a3\u0964”<\/p>\n <div class=\"review-author\">Nasrin Islam<\/div>\n <div class=\"review-loc\">Chittagong, Bangladesh<\/div>\n <\/div>\n <div class=\"review-card reveal reveal-delay-2\">\n <div class=\"review-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\n <p class=\"review-text\">“Price \u0985\u09a8\u09c7\u0995 reasonable \u098f\u09ac\u0982 quality \u099f\u09be imported brand-\u098f\u09b0 \u09b8\u09be\u09a5\u09c7 \u09a4\u09c1\u09b2\u09a8\u09c0\u09af\u09bc\u0964 TRAACK \u098f\u0996\u09a8 \u0986\u09ae\u09be\u09b0 first choice\u0964”<\/p>\n <div class=\"review-author\">Karim Hossain<\/div>\n <div class=\"review-loc\">Sylhet, Bangladesh<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta-section\">\n <p class=\"section-label\">Ready to Move?<\/p>\n <h2 class=\"section-title reveal\">STEP INTO<br><span style=\"color:var(--amber)\">YOUR TRAACK<\/span><\/h2>\n <p class=\"section-sub reveal\">Join 50,000+ customers across Bangladesh who have already found their perfect pair.<\/p>\n <div class=\"cta-actions reveal\">\n <button class=\"btn-primary\" style=\"font-size:1rem; padding:1rem 2.8rem;\">Shop Full Collection<\/button>\n <button class=\"btn-ghost\" style=\"font-size:1rem; padding:1rem 2.8rem;\">Find Your Size \u2192<\/button>\n <\/div>\n<\/section>\n\n\n<footer>\n <div class=\"footer-brand\">\n <a class=\"nav-logo\" href=\"#\">TRAACK<\/a>\n <p class=\"footer-tagline\">Premium footwear for the streets of Bangladesh. Built to move, built to last.<\/p>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Shop<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">New Arrivals<\/a><\/li>\n <li><a href=\"#\">Running<\/a><\/li>\n <li><a href=\"#\">Street \/ Urban<\/a><\/li>\n <li><a href=\"#\">Limited Edition<\/a><\/li>\n <li><a href=\"#\">Sale<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Company<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">About Us<\/a><\/li>\n <li><a href=\"#\">Our Story<\/a><\/li>\n <li><a href=\"#\">Careers<\/a><\/li>\n <li><a href=\"#\">Press<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Support<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">Size Guide<\/a><\/li>\n <li><a href=\"#\">Returns & Exchange<\/a><\/li>\n <li><a href=\"#\">Track Order<\/a><\/li>\n <li><a href=\"#\">Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n<\/footer>\n<div class=\"footer-bottom\">\n <span>\u00a9 2025 TRAACK Footwear. All rights reserved.<\/span>\n <span>Made with ♥ in Bangladesh<\/span>\n<\/div>\n\n<script>\n \/\/ Scroll reveal\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\n }, { threshold: 0.12 });\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n\n \/\/ Nav scroll effect\n const nav = document.querySelector('nav');\n window.addEventListener('scroll', () => {\n nav.style.borderBottomColor = window.scrollY > 50 ? 'rgba(245,166,35,0.3)' : 'var(--border)';\n });\n\n \/\/ Product btn feedback\n document.querySelectorAll('.product-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const orig = btn.textContent;\n btn.textContent = '\u2713 Added';\n btn.style.background = '#F5A623';\n btn.style.color = '#000';\n setTimeout(() => {\n btn.textContent = orig;\n btn.style.background = '';\n btn.style.color = '';\n }, 1500);\n });\n });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>TRAACK \u2014 Move Different TRAACK Collection About Reviews Contact Shop Now New Collection 2025 MOVEDIFFERENT. Built for Bangladesh. Designed for the streets. Every pair of TRAACK shoes is engineered to keep you moving \u2014 all day, every day. Explore Collection Watch Story 50K+ Happy Customers 200+ Styles Available 5\u2605 Average Rating TRAACK NEW ARRIVAL \u2014 … <a title=\"TRAACK\" class=\"read-more\" href=\"https:\/\/demo.frego.online\/?page_id=8\" aria-label=\"Read more about TRAACK\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.frego.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":1,"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/demo.frego.online\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/demo.frego.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}