:root{--primary: #667eea;--secondary: #764ba2;--accent: #ffd700;--text-main: #ffffff;--text-muted: rgba(255, 255, 255, .8);--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37)}*{box-sizing:border-box;margin:0;padding:0}html{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f0c29;scroll-behavior:smooth}body{margin:0;width:100%;min-height:100vh;color:var(--text-main);overflow-x:hidden;background:#0a0e27;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at top left,rgba(99,102,241,.15),transparent 50%),radial-gradient(ellipse at bottom right,rgba(236,72,153,.15),transparent 50%),radial-gradient(ellipse at top right,rgba(34,211,238,.1),transparent 50%);pointer-events:none;z-index:0}@keyframes gradient{0%,100% {opacity: 1;} 50% {100% {background-position: 0% 50%;}} .fade-up {opacity: 0; transform: translateY(20px); transition: opacity .8s ease-out,transform .8s ease-out;} .fade-up.visible {opacity: 1; transform: translateY(0);}:root { --accent: #6366f1; --accent-light: #a5b4fc; --text: #f1f5f9; --text-muted: #94a3b8; } * {margin: 0; padding: 0; box-sizing: border-box;} body {background: #0f0f1a; color: var(--text); font-family: "Space Grotesk",system-ui,sans-serif;} .container {max-width: 1240px; margin: 0 auto; padding: 0 24px;} .navbar {position: absolute; top: 0; left: 0; width: 100%; padding: 28px 0; z-index: 100;} .navbar-content {display: flex; justify-content: space-between; align-items: center;} .logo {display: flex; align-items: center; gap: 14px; color: #fff; font-size: 24px; font-weight: 800; text-decoration: none;} .logo-img {width: 48px; height: 48px; border-radius: 12px;} .nav-links {display: flex; align-items: center; gap: 36px;} .nav-links a {color: var(--text-muted); font-weight: 500; text-decoration: none; transition: color .3s;} .nav-links a:hover {color: #fff;} .btn {padding: 16px 32px; font-size: 16px; font-weight: 700; border: none; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: all .35s cubic-bezier(.175,.885,.32,1.275);} .btn-primary {background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%); color: white; box-shadow: 0 10px 30px rgba(99,102,241,.35);} .btn-primary:hover {transform: translateY(-3px); box-shadow: 0 16px 40px rgba(99,102,241,.5);} .btn-secondary {background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: white; backdrop-filter: blur(12px);} .btn-secondary:hover {background: rgba(255,255,255,.18); transform: translateY(-3px);} .btn-large {padding: 20px 48px; font-size: 18px;} .btn-light {background: linear-gradient(135deg,#ffffff,#f8fafc); color: #0f0f1a; box-shadow: 0 12px 36px rgba(0,0,0,.4);} .btn-light:hover {transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.5);} .hero {padding: 200px 20px 140px; position: relative; overflow: hidden;} .hero::before,.hero::after {content: ""; position: absolute; width: 70%; height: 70%; filter: blur(100px); opacity: .18; z-index: -1;} .hero::before {top: -10%; left: -20%; background: radial-gradient(circle at 30% 50%,#6366f1,transparent 70%);} .hero::after {bottom: -10%; right: -20%; background: radial-gradient(circle at 70% 50%,#ec4899,transparent 70%);} .hero-content {text-align: center; margin-bottom: 100px;} .hero-badge {display: inline-flex; align-items: center; gap: 12px; background: rgba(99,102,241,.12); backdrop-filter: blur(16px); padding: 14px 32px; border-radius: 999px; border: 1px solid rgba(99,102,241,.3); font-size: 14px; font-weight: 600; margin-bottom: 40px; color: rgba(255,255,255,.9);} .hero-title {font-size: clamp(60px,9vw,110px); font-weight: 800; line-height: 1.05; margin-bottom: 32px; letter-spacing: -.04em;} .gradient-text {background: linear-gradient(90deg,#6366f1,#ec4899,#22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent;} .hero-description {font-size: 19px; max-width: 620px; margin: 0 auto 48px; color: rgba(255,255,255,.7); line-height: 1.7;} .hero-buttons {display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 80px;} .hero-stats {display: flex; gap: clamp(40px,6vw,100px); justify-content: center; flex-wrap: wrap; padding: 40px 60px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 32px; backdrop-filter: blur(24px);} .stat-number {font-size: clamp(36px,5vw,64px); font-weight: 800; background: linear-gradient(#fff,#e2e8f0); -webkit-background-clip: text; background-clip: text; color: transparent;} .stat-label {font-size: 14px; color: rgba(255,255,255,.6); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;} .tech-stack {padding: 160px 20px; background: linear-gradient(to bottom,rgba(15,15,26,.8),rgba(0,0,0,.4)); position: relative;} .tech-stack .section-subtitle {text-align: center; font-size: 18px; color: rgba(255,255,255,.6); margin-bottom: 80px; max-width: 680px; margin-left: auto; margin-right: auto;} .tech-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 28px; max-width: 1100px; margin: 0 auto;} .tech-item {background: rgba(255,255,255,.04); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.09); border-radius: 24px; padding: 40px 28px; text-align: center; transition: all .4s cubic-bezier(.175,.885,.32,1.275); position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.3);} .tech-item::before {content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,transparent,rgba(255,255,255,.06)); opacity: 0; transition: opacity .4s ease; pointer-events: none;} .tech-item:hover::before {opacity: 1;} .tech-item:hover {transform: translateY(-10px) scale(1.04); border-color: rgba(99,102,241,.4); box-shadow: 0 20px 60px rgba(99,102,241,.25);} .tech-icon {font-size: 64px; margin-bottom: 20px; display: block; transition: all .4s ease; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));} .tech-item:hover .tech-icon {transform: scale(1.15) rotate(8deg);} .tech-item span {font-size: 20px; font-weight: 700; color: #fff; display: block; margin-bottom: 8px;} .tech-item small {font-size: 14px; color: rgba(255,255,255,.55); font-weight: 500;} .tech-item[data-tech="react-native"]:hover .tech-icon {color: #61dafb;} .tech-item[data-tech="astro"]:hover .tech-icon {color: #ff5a03;} .tech-item[data-tech="nestjs"]:hover .tech-icon {color: #e0234e;} .tech-item[data-tech="fastapi"]:hover .tech-icon {color: #009688;} .tech-item[data-tech="postgres"]:hover .tech-icon {color: #336791;} .tech-item[data-tech="websockets"]:hover .tech-icon {color: #ff6b6b;} @media (max-width: 768px) {.tech-grid {gap: 24px;} .tech-item {padding: 32px 20px;} .tech-icon {font-size: 56px;}} .hero-visual {display: flex; justify-content: center; perspective: 1200px;} .phone-mockup {width: 360px; height: 720px; background: linear-gradient(145deg,#1e1e2e,#171723); border-radius: 56px; padding: 18px; box-shadow: 0 80px 160px -40px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.06); position: relative;} .phone-mockup::before {content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 140px; height: 32px; background: #111; border-radius: 0 0 28px 28px; z-index: 10;} .phone-screen {width: 100%; height: 100%; background: linear-gradient(135deg,#667eea,#764ba2); border-radius: 44px; overflow: hidden; padding: 70px 24px 24px;} .chat-message {display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px;} .chat-message.right {flex-direction: row-reverse;} .avatar {width: 48px; height: 48px; background: rgba(255,255,255,.25); border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .message {background: rgba(255,255,255,.92); color: #111; padding: 14px 20px; border-radius: 24px; border-bottom-left-radius: 6px; font-size: 15px; max-width: 70%; line-height: 1.45;} .chat-message.right .message {background: linear-gradient(135deg,#ff6b6b,#ffd166); color: white; border-bottom-left-radius: 24px; border-bottom-right-radius: 6px;} .meme-box {background: rgba(255,255,255,.18); border: 2px dashed rgba(255,255,255,.45); padding: 48px 32px; border-radius: 24px; text-align: center; font-size: 16px; font-weight: 600; backdrop-filter: blur(8px);} .features {padding: 140px 20px;} .section-title {font-size: clamp(42px,7vw,68px); font-weight: 800; text-align: center; margin-bottom: 20px; background: linear-gradient(90deg,#fff,#d1d5db); -webkit-background-clip: text; background-clip: text; color: transparent;} .section-subtitle {text-align: center; font-size: 18px; color: rgba(255,255,255,.55); margin-bottom: 80px; max-width: 620px; margin-left: auto; margin-right: auto;} .features-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 28px;} .feature-card {background: rgba(255,255,255,.03); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 40px 32px; transition: all .4s ease;} .feature-card:hover {transform: translateY(-12px); background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.35); box-shadow: 0 20px 50px rgba(99,102,241,.25);} .feature-icon {font-size: 56px; margin-bottom: 24px;} .how-it-works {padding: 160px 20px; background: rgba(0,0,0,.25);} .timeline {position: relative; max-width: 960px; margin: 100px auto 0;} .timeline-connector {position: absolute; top: 40px; bottom: 40px; left: 50%; width: 5px; background: linear-gradient(to bottom,#6366f1,#ec4899,#22d3ee); transform: translateX(-50%); border-radius: 3px; opacity: .45; z-index: 1;} .timeline-item {display: flex; align-items: center; gap: 40px; position: relative; z-index: 2; margin: 80px 0;} .timeline-number {width: 90px; height: 90px; background: linear-gradient(135deg,#6366f1,#8b5cf6); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 800; box-shadow: 0 12px 40px rgba(99,102,241,.5); flex-shrink: 0;} .timeline-content {background: rgba(255,255,255,.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; padding: 40px 48px; flex: 1; transition: all .4s ease;} .timeline-content h3 {font-size: 26px; margin-bottom: 16px; background: linear-gradient(to right,#fff,#c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent;} .timeline-meme-icon {font-size: 80px; opacity: .75; transition: transform .4s ease;} .timeline-item:hover .timeline-content {transform: translateY(-10px); box-shadow: 0 24px 60px rgba(99,102,241,.3);} .timeline-item:hover .timeline-meme-icon {transform: scale(1.15) rotate(12deg);} @media (max-width: 768px) {.timeline-connector {display: none;} .timeline-item {flex-direction: column; text-align: center; gap: 24px; margin: 100px 0;} .timeline-number {margin: 0 auto;} .hero {padding: 140px 20px 100px;} .hero-stats {gap: 40px; padding: 32px;}} .cta {padding: 200px 20px 160px; position: relative; overflow: hidden; background: linear-gradient(to bottom,rgba(15,15,26,.6),rgba(0,0,0,.8));} .cta::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1000px; height: 1000px; background: radial-gradient(circle at 50% 50%,rgba(99,102,241,.18),rgba(236,72,153,.12),transparent 65%); filter: blur(140px); opacity: .7; z-index: -2; animation: pulse-orbit 18s infinite ease-in-out;} @keyframes pulse-orbit {0%,100% {transform: translate(-50%,-50%) scale(1); opacity: .7;} 50% {transform: translate(-50%,-50%) scale(1.12); opacity: .85;}} .cta-content {position: relative; text-align: center; max-width: 920px; margin: 0 auto; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); padding: 100px 60px 80px; border-radius: 56px; box-shadow: 0 40px 100px rgba(0,0,0,.7),inset 0 0 60px rgba(99,102,241,.08); overflow: hidden;} .cta-glow-orbit {position: absolute; inset: -20%; background: radial-gradient(circle at 30% 40%,rgba(236,72,153,.15),transparent 40%); filter: blur(100px); opacity: .6; pointer-events: none; animation: float-glow 25s infinite linear;} @keyframes float-glow {0% {transform: translate(10%,15%) rotate(0deg);} 50% {transform: translate(-15%,-10%) rotate(180deg);} 100% {transform: translate(10%,15%) rotate(360deg);}} .cta-title {font-size: clamp(52px,8vw,90px); font-weight: 800; line-height: 1.05; margin-bottom: 32px; letter-spacing: -.03em;} .cta-description {font-size: 20px; line-height: 1.6; color: rgba(255,255,255,.78); margin-bottom: 56px; max-width: 680px; margin-left: auto; margin-right: auto;} .cta-buttons {display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin: 56px 0 48px;} .btn-store {padding: 18px 42px 18px 36px; min-width: 260px; background: linear-gradient(145deg,#111,#1a1a2e); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; color: white; font-weight: 700; font-size: 19px; display: flex; align-items: center; gap: 16px; backdrop-filter: blur(12px); transition: all .4s cubic-bezier(.175,.885,.32,1.275); box-shadow: 0 12px 40px rgba(0,0,0,.5); position: relative; overflow: hidden;} .btn-store::before {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); transform: translateX(-100%); transition: transform .6s ease;} .btn-store:hover::before {transform: translateX(100%);} .btn-store:hover {transform: translateY(-6px); box-shadow: 0 24px 70px rgba(99,102,241,.35); border-color: rgba(99,102,241,.5);} .btn-ios .icon {font-size: 42px;} .btn-android .icon {font-size: 38px;} .store-text {text-align: left; line-height: 1.3;} .store-text small {font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); display: block; text-transform: uppercase; letter-spacing: .8px;} .cta-note {font-size: 15px; color: rgba(255,255,255,.65); margin-bottom: 40px;} .cta-note .highlight {color: #a5b4fc; font-weight: 600;} .cta-trust-badges {display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; font-size: 15px; color: rgba(255,255,255,.8);} .cta-trust-badges span {background: rgba(99,102,241,.12); padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(99,102,241,.25);} @media (max-width: 768px) {.cta {padding: 140px 20px 100px;} .cta-content {padding: 80px 32px 60px; border-radius: 40px;} .cta-buttons {flex-direction: column; gap: 24px;} .btn-store {min-width: 100%; justify-content: center;}} .footer {padding: 120px 20px 60px; background: rgba(0,0,0,.4); border-top: 1px solid rgba(255,255,255,.08);} .footer-content {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 60px; margin-bottom: 80px;} .footer-brand h3 {font-size: 32px; display: flex; align-items: center; gap: 12px;} .footer-links {display: flex; gap: 48px; flex-wrap: wrap;} .footer-links a {color: rgba(255,255,255,.7); text-decoration: none; font-weight: 500;} .footer-links a:hover {color: white;} .footer-bottom {text-align: center; color: rgba(255,255,255,.5); font-size: 15px;}}