* { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: #0a0f1e !important; color: #c8d4e8 !important; } html { scroll-behavior: smooth; color-scheme: dark; } body { font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.65; overflow-x: hidden; } h1, h2, h3, h4 { color: #eef2ff !important; } p, li { color: #c8d4e8 !important; } strong { color: #eef2ff !important; } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 6%; background: #060a14 !important; border-bottom: 1px solid rgba(0,229,255,0.2); } .logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.6rem; color: #eef2ff !important; text-decoration: none; } .logo span { color: #00e5ff !important; } nav ul { list-style: none; display: flex; gap: 32px; } nav ul li a { color: #c8d4e8 !important; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s; } nav ul li a:hover { color: #00e5ff !important; } .nav-cta { background: #00e5ff !important; color: #0a0f1e !important; font-weight: 700 !important; padding: 10px 22px; border-radius: 4px; } .btn { display: inline-block; text-decoration: none; border-radius: 4px; font-weight: 700; font-size: 1rem; padding: 15px 32px; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; border: none; font-family: 'Barlow', sans-serif; } .btn-primary { background: #00e5ff !important; color: #0a0f1e !important; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,229,255,0.4); } .sec-dark { background: #0a0f1e !important; padding: 90px 6%; } .sec-dark2 { background: #0d1526 !important; padding: 90px 6%; } .sec-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #00e5ff !important; margin-bottom: 14px; } h2 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 900 !important; font-size: clamp(2rem,4vw,3rem) !important; text-transform: uppercase !important; line-height: 1.05 !important; margin-bottom: 16px; color: #eef2ff !important; } .intro-text { color: #c8d4e8 !important; max-width: 600px; margin-bottom: 52px; font-size: 1.05rem; line-height: 1.75; } .hero { min-height: 100vh; display: flex; align-items: center; padding: 130px 6% 80px; position: relative; overflow: hidden; background: #0a0f1e !important; } .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); } .hero-glow { position: absolute; width: 700px; height: 700px; background: radial-gradient(circle, rgba(0,100,255,0.16) 0%, transparent 70%); top: 0; right: -150px; pointer-events: none; } .hero-content { position: relative; max-width: 820px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.25); border-radius: 100px; padding: 7px 18px; font-size: 0.78rem; font-weight: 700; color: #00e5ff !important; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 28px; } .hero-badge::before { content:''; width:7px; height:7px; background:#00e5ff; border-radius:50%; animation: blink 2s infinite; } @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} } h1 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 900 !important; font-size: clamp(2.8rem,7vw,5.4rem) !important; line-height: 1 !important; letter-spacing: -1px !important; text-transform: uppercase !important; margin-bottom: 24px; color: #eef2ff !important; } h1 .accent { color: #00e5ff !important; } h1 .sub { display: block; color: #9ab0cc !important; font-size: 58% !important; margin-top: 8px; font-weight: 700 !important; } .hero-p { font-size: 1.13rem; color: #c8d4e8 !important; max-width: 640px; margin-bottom: 40px; line-height: 1.78; } .hero-p strong { color: #eef2ff !important; } .excl-bar { margin-top: 48px; padding: 18px 26px; background: rgba(0,229,255,0.07) !important; border: 1px solid rgba(0,229,255,0.2); border-left: 3px solid #00e5ff; border-radius: 4px; font-size: 0.96rem; color: #c8d4e8 !important; } .excl-bar strong { color: #eef2ff !important; } .stakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2px; background: rgba(0,229,255,0.12); } .stake { background: #131e30 !important; padding: 36px 32px; text-align: center; } .stake-num { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 900; color: #00e5ff !important; line-height: 1; margin-bottom: 8px; } .stake-label { color: #c8d4e8 !important; font-size: 0.9rem; line-height: 1.5; } .stake-label strong { color: #eef2ff !important; display: block; margin-bottom: 4px; font-size: 1rem; } .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; } .pain-card { background: #131e30 !important; border: 1px solid rgba(0,229,255,0.15); border-radius: 6px; padding: 30px 26px; border-top: 3px solid rgba(0,229,255,0.3); } .pain-card .pain-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; } .pain-card h3 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; text-transform: uppercase !important; color: #eef2ff !important; margin-bottom: 10px; } .pain-card p { color: #c8d4e8 !important; font-size: 0.93rem !important; line-height: 1.65; } .ai-callout { background: linear-gradient(135deg, rgba(0,100,255,0.18), rgba(0,229,255,0.07)) !important; border: 1px solid rgba(0,229,255,0.3); border-radius: 8px; padding: 52px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media(max-width:768px){ .ai-callout { grid-template-columns: 1fr; padding: 36px 28px; } } .ai-callout p { color: #c8d4e8 !important; font-size: 1.02rem; line-height: 1.75; margin-bottom: 16px; } .ai-sim { background: #0a0f1e !important; border: 1px solid rgba(0,229,255,0.2); border-radius: 6px; padding: 28px; } .ai-sim-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #00e5ff !important; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .ai-sim-label::before { content:''; width: 8px; height: 8px; background: #00e5ff; border-radius: 50%; animation: blink 2s infinite; } .ai-query { background: rgba(0,229,255,0.06) !important; border: 1px solid rgba(0,229,255,0.15); border-radius: 4px; padding: 12px 16px; font-size: 0.95rem; color: #c8d4e8 !important; margin-bottom: 16px; font-style: italic; } .ai-query::before { content: '🔍 '; } .ai-answer { font-size: 0.9rem; line-height: 1.7; color: #c8d4e8 !important; } .ai-answer .highlight { color: #00e5ff !important; font-weight: 600; } .ai-answer .locked { color: #4a6a8a !important; text-decoration: line-through; } .ai-note { margin-top: 14px; font-size: 0.8rem; color: #7a90b0 !important; font-style: italic; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; } .svc-card { background: #131e30 !important; border: 1px solid rgba(0,229,255,0.15); border-radius: 6px; padding: 32px 28px; transition: border-color 0.25s, transform 0.2s; } .svc-card:hover { border-color: #00e5ff; transform: translateY(-3px); } .svc-card .svc-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; } .svc-card h3 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; text-transform: uppercase !important; color: #eef2ff !important; margin-bottom: 10px; } .svc-card p { color: #c8d4e8 !important; font-size: 0.93rem !important; line-height: 1.65; } .timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 2px; background: rgba(0,229,255,0.12); } .tl-step { background: #0d1526 !important; padding: 38px 30px; } .tl-num { font-family: 'Barlow Condensed', sans-serif; font-size: 3.8rem; font-weight: 900; color: rgba(0,229,255,0.2) !important; line-height: 1; margin-bottom: 14px; } .tl-phase { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #00e5ff !important; margin-bottom: 8px; } .tl-step h3 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; text-transform: uppercase !important; color: #eef2ff !important; margin-bottom: 10px; } .tl-step p { color: #c8d4e8 !important; font-size: 0.94rem !important; line-height: 1.65; } .tl-unlock { margin-top: 12px; font-size: 0.78rem; color: #70b8ff !important; font-weight: 600; } .addon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-top: 40px; } .addon-chip { background: #131e30 !important; border: 1px solid rgba(0,100,255,0.25); border-radius: 6px; padding: 22px 20px; } .addon-chip .ic { font-size: 1.4rem; margin-bottom: 10px; display: block; } .addon-chip h4 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 1.05rem !important; text-transform: uppercase !important; color: #eef2ff !important; margin-bottom: 6px; } .addon-chip p { color: #c8d4e8 !important; font-size: 0.88rem !important; line-height: 1.6; } .addon-chip .tag { display: inline-block; margin-top: 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; background: rgba(0,100,255,0.12) !important; color: #70b8ff !important; border: 1px solid rgba(0,100,255,0.28); } .price-wrap { max-width: 700px; margin: 0 auto; } .price-card { background: #131e30 !important; border: 1px solid #00e5ff; border-radius: 8px; padding: 48px 44px; position: relative; overflow: hidden; } .price-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg,#0077ff,#00e5ff); } .price-lbl { font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7a90b0 !important; margin-bottom: 10px; } .price-amt { font-family: 'Barlow Condensed', sans-serif; font-size: 4rem; font-weight: 900; color: #eef2ff !important; line-height: 1; } .price-amt sup { font-size: 1.7rem; vertical-align: top; margin-top: 9px; } .price-amt sub { font-size: 1.1rem; color: #7a90b0 !important; } .price-note { color: #c8d4e8 !important; font-size: 0.92rem; margin-top: 10px; margin-bottom: 16px; } .market-note { font-size: 0.88rem; color: #c8d4e8 !important; background: #1a2540 !important; border: 1px solid rgba(0,229,255,0.18); border-radius: 4px; padding: 13px 17px; margin-bottom: 26px; line-height: 1.65; } .market-note strong { color: #eef2ff !important; } .price-list { list-style: none; margin-bottom: 30px; } .price-list li { padding: 10px 0; border-bottom: 1px solid rgba(0,229,255,0.12); color: #c8d4e8 !important; font-size: 0.95rem; display: flex; align-items: center; gap: 12px; } .price-list li::before { content:'✓'; color: #00e5ff !important; font-weight: 700; flex-shrink: 0; } .avail-badge { display: inline-block; margin-bottom: 26px; background: rgba(255,70,70,0.1) !important; border: 1px solid rgba(255,70,70,0.28); color: #ff8888 !important; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; } .cta-wrap { text-align: center; position: relative; } .cta-glow { position: absolute; width: 500px; height: 280px; background: radial-gradient(ellipse, rgba(0,229,255,0.1) 0%, transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; } .cta-p { color: #c8d4e8 !important; max-width: 500px; margin: 16px auto 34px; font-size: 1.02rem; position: relative; line-height: 1.72; } .cta-fine { color: #7a90b0 !important; font-size: 0.84rem; margin-top: 18px; } footer { padding: 36px 6%; border-top: 1px solid rgba(0,229,255,0.15); background: #0a0f1e !important; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } footer p { color: #7a90b0 !important; font-size: 0.87rem; } .foot-links { display: flex; gap: 22px; } .foot-links a { color: #7a90b0 !important; text-decoration: none; font-size: 0.87rem; } .foot-links a:hover { color: #00e5ff !important; } @keyframes fadeUp { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} } .hero-content > * { animation: fadeUp 0.6s ease both; } .hero-badge{animation-delay:0.1s;} h1{animation-delay:0.2s;} .hero-p{animation-delay:0.3s;} .excl-bar{animation-delay:0.4s;}

Portfolio Single Page

WaterFall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

About Project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Our Role

  • Brand Development
  • Creative Direction
  • UI/UX Design
  • Websites and Mobile Apps

150%

Worldwide Markets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

65+

Countries Launched

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

8X

Community Growth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis et velit et vehicula. Integer et imperdiet turpis, id scelerisque felis. Duis arcu enim, mollis nec placerat sed, viverra faucibus velit. Praesent tempor ex a ligula semper convallis. Aliquam lobortis placerat tristique. Integer sodales auctor massa eget elementum. Vivamus accumsan nisi vel nulla ultrices, eu ullamcorper sapien pulvinar. Aenean et nibh vitae odio condimentum luctus. Sed vel nisl tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis et velit et vehicula. Integer et imperdiet turpis, id scelerisque felis. Duis arcu enim, mollis nec placerat sed, viverra faucibus velit. Praesent tempor ex a ligula semper convallis. Aliquam lobortis placerat tristique. Integer sodales auctor massa eget elementum. Vivamus accumsan nisi vel nulla ultrices, eu ullamcorper sapien pulvinar. Aenean et nibh vitae odio condimentum luctus. Sed vel nisl tortor.

Related Project

Ready to Grow Your Business?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
ullamcorper mattis, pulvinar dapibus leo.

Scroll to Top