:root{
--bg:#060c14;
--bg2:#080f1a;
--bg3:#0c1628;
--surface:#101d33;
--surface2:#13243d;
--border:#18304e;
--text:#d8e8f8;
--muted:#8aa2b8;
--cyan:#46d5f9;
--cyan2:#1ab8d4;
--cyan-light:#a8edfc;
--blue:#3b82f6;
--purple:#8b5cf6;
--gold:#f59e0b;
--shadow:0 18px 50px rgba(0,0,0,.30),0 4px 14px rgba(0,0,0,.18);
--shadow-cyan:0 18px 46px rgba(70,213,249,.14),0 6px 22px rgba(59,130,246,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:radial-gradient(circle at 15% 10%,rgba(70,213,249,.08),transparent 32%),radial-gradient(circle at 82% 18%,rgba(139,92,246,.07),transparent 34%),var(--bg);color:var(--text);overflow-x:hidden}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,12,20,0.78);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.08);transition:all 0.3s}
.navbar.scrolled{background:rgba(6,12,20,0.97);box-shadow:0 4px 30px rgba(0,0,0,0.4)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{width:28px;height:28px;object-fit:contain}
.logo-text{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:var(--cyan);letter-spacing:0.5px}
.logo-sub{font-size:10px;color:var(--muted);margin-left:4px}
.nav-links{display:flex;list-style:none;gap:2px;flex-wrap:nowrap}
.nav-links li{flex-shrink:0}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;padding:8px 11px;border-radius:999px;transition:all 0.2s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.nav-links a:hover{color:#fff;background:rgba(70,213,249,0.12)}
.nav-dashboard-btn{color:#06131b!important;background:linear-gradient(135deg,var(--cyan),var(--cyan2));border:1px solid rgba(70,213,249,.55);border-radius:999px;padding:7px 17px!important;margin-left:8px;font-weight:800!important;box-shadow:0 8px 24px rgba(70,213,249,.22)}
.nav-dashboard-btn:hover{background:var(--cyan)!important;color:#060c14!important}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;line-height:1}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:14px;font-size:14px;font-weight:700;text-decoration:none;transition:all 0.3s;cursor:pointer;border:none}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#000;box-shadow:0 4px 20px rgba(70,213,249,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(70,213,249,0.45)}
.btn-playstore{background:linear-gradient(135deg,#0f172a 0%,#103a4a 48%,#46d5f9 100%);color:#fff;border:1px solid rgba(168,237,252,.28);border-radius:18px;padding:10px 22px 10px 12px;box-shadow:0 18px 42px rgba(70,213,249,.18),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-playstore svg{width:34px!important;height:34px!important;background:linear-gradient(135deg,var(--cyan),var(--blue));border-radius:12px;padding:8px;color:#06131b;fill:currentColor!important;box-shadow:0 8px 20px rgba(70,213,249,.28)}
.btn-playstore span{display:grid;line-height:1.05}
.btn-playstore small{font-size:.64rem;color:rgba(255,255,255,.68);font-weight:500}
.btn-playstore:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(70,213,249,.28),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}
.btn-playstore:active{transform:translateY(0) scale(.98)}
.btn-outline{border:1px solid var(--border);color:var(--text);background:transparent}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-link{color:var(--cyan);text-decoration:none;font-size:13px;font-weight:600;transition:all 0.2s}
.btn-link:hover{letter-spacing:1px}

/* ── Gradient Text ────────────────────────────────────────────── */
.gradient-text{background:linear-gradient(135deg,var(--cyan),#60e8ff,var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;padding:110px 24px 70px;max-width:1200px;margin:0 auto;position:relative}
.hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 15% 50%,rgba(70,213,249,0.06) 0%,transparent 60%),radial-gradient(ellipse at 85% 20%,rgba(59,130,246,0.04) 0%,transparent 50%);pointer-events:none}
.hero-content{flex:1;position:relative;z-index:1}
.hero-badge{display:inline-block;padding:7px 18px;background:rgba(70,213,249,0.12);border:1px solid rgba(70,213,249,0.26);border-radius:999px;font-size:12px;color:var(--cyan-light);margin-bottom:24px;font-weight:700;letter-spacing:.02em}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,6vw,62px);font-weight:800;line-height:1.1;margin-bottom:20px;color:#fff}
.hero-desc{font-size:16px;color:var(--muted);line-height:1.7;max-width:520px;margin-bottom:32px}
.hero-btns{display:flex;gap:14px;margin-bottom:48px;flex-wrap:wrap}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;color:var(--cyan)}
.stat-label{font-size:12px;color:var(--muted);margin-top:2px}
.hero-visual{position:absolute;right:0;top:50%;transform:translateY(-50%);width:420px;height:440px}

/* Floating Cards */
.float-card{position:absolute;background:linear-gradient(145deg,rgba(16,29,51,.92),rgba(12,22,40,.86));border:1px solid rgba(168,237,252,.12);border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite;backdrop-filter:blur(18px)}
.fc-icon{width:38px;height:38px;border-radius:13px;background:rgba(70,213,249,.12);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:19px}
.fc-text{font-size:12px;color:var(--muted);line-height:1.4}
.fc-text strong{font-size:16px}
.cyan{color:var(--cyan)}.blue{color:var(--blue)}.gold{color:var(--gold)}.purple{color:var(--purple)}
.fc1{top:8%;left:5%;animation-delay:0s}
.fc2{top:55%;right:3%;animation-delay:1.5s}
.fc3{bottom:12%;left:18%;animation-delay:3s}
.fc4{top:22%;right:18%;animation-delay:4.5s}
.fc5{top:78%;left:32%;animation-delay:6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ── Sections ─────────────────────────────────────────────────── */
.section{padding:104px 0}
.section-dark{background:var(--bg2)}
.section-header{text-align:center;margin-bottom:60px}
.section-tag{display:inline-block;padding:4px 14px;background:rgba(70,213,249,0.1);border:1px solid rgba(70,213,249,0.2);border-radius:16px;font-size:11px;color:var(--cyan);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px}
.section-header h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4vw,46px);font-weight:700;color:#fff;line-height:1.2;margin-bottom:14px}
.section-header p{color:var(--muted);font-size:16px;max-width:520px;margin:0 auto}

/* ── Feature Overview Cards ───────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.feature-card{background:linear-gradient(145deg,rgba(16,29,51,.98),rgba(12,22,40,.92));border:1px solid rgba(168,237,252,.10);border-radius:22px;padding:34px;position:relative;overflow:hidden;transition:all 0.3s;cursor:default;box-shadow:0 10px 32px rgba(0,0,0,.18)}
.feature-card:hover{transform:translateY(-7px);border-color:rgba(70,213,249,0.34);box-shadow:var(--shadow-cyan)}
.fc-glow{position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;filter:blur(70px);opacity:0.12;pointer-events:none}
.glow-cyan{background:var(--cyan)}
.glow-blue{background:var(--blue)}
.glow-purple{background:var(--purple)}
.feature-card .fc-icon-big{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,rgba(70,213,249,.18),rgba(59,130,246,.10));border:1px solid rgba(168,237,252,.16);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.feature-card h3{font-family:'Space Grotesk',sans-serif;font-size:20px;color:#fff;margin-bottom:8px}
.fc-sub{font-size:11px;color:var(--cyan);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.feature-card p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.fc-pills{display:flex;flex-wrap:wrap;gap:6px}
.fc-pill{font-size:10px;padding:5px 11px;background:rgba(70,213,249,0.10);border:1px solid rgba(70,213,249,0.18);border-radius:999px;color:var(--cyan-light);font-weight:700}
.fc-pill-blue{background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.15);color:var(--blue)}
.fc-pill-purple{background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.15);color:var(--purple)}

/* ── Deep Feature Sections ────────────────────────────────────── */
.feature-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feature-section.reverse{direction:rtl}
.feature-section.reverse>*{direction:ltr}
.feature-img{border-radius:26px;overflow:hidden;background:linear-gradient(145deg,rgba(16,29,51,.98),rgba(6,12,20,.86));border:1px solid rgba(168,237,252,.13);display:flex;align-items:center;justify-content:center;padding:30px;box-shadow:var(--shadow)}
.feature-img img{max-width:240px;border-radius:12px;display:block}
.feature-text{}
.feature-label{display:inline-block;padding:4px 14px;background:rgba(70,213,249,0.1);border:1px solid rgba(70,213,249,0.2);border-radius:16px;font-size:11px;color:var(--cyan);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:18px}
.feature-text h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.5vw,36px);font-weight:700;color:#fff;line-height:1.25;margin-bottom:16px}
.feature-text p{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:20px}
.feature-list{list-style:none;margin-bottom:24px}
.feature-list li{font-size:13px;color:var(--text);padding:8px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.feature-list li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0}

/* ── How It Works ─────────────────────────────────────────────── */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.process-grid::before{content:'';position:absolute;top:40px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(to right,var(--cyan),var(--blue),var(--purple),var(--cyan));opacity:0.3}
.process-step{text-align:center;padding:22px 18px;position:relative}
.ps-num{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--cyan2));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#000;position:relative;z-index:1;box-shadow:0 4px 20px rgba(70,213,249,0.35)}
.process-step h4{font-family:'Space Grotesk',sans-serif;font-size:15px;color:#fff;margin-bottom:8px}
.process-step p{font-size:12px;color:var(--muted);line-height:1.6}

/* ── Screenshots Gallery ──────────────────────────────────────── */
.screenshots-scroll{display:flex;gap:16px;overflow-x:auto;padding:20px 4px 32px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.screenshots-scroll::-webkit-scrollbar{height:4px}
.screenshots-scroll::-webkit-scrollbar-track{background:transparent}
.screenshots-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ss-item{flex-shrink:0;width:160px;scroll-snap-align:start;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--bg3);transition:all 0.3s;cursor:pointer}
.ss-item:hover{border-color:rgba(70,213,249,0.3);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.ss-item img{width:100%;display:block;border-radius:14px}

/* ── Stats Bar ────────────────────────────────────────────────── */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--bg3);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.stat-item{text-align:center;padding:36px 20px;position:relative}
.stat-item+.stat-item::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--border)}
.stat-item .stat-num{font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:700;color:var(--cyan);display:block;margin-bottom:6px}
.stat-item .stat-label{font-size:13px;color:var(--muted)}

/* ── Download CTA ─────────────────────────────────────────────── */
.download-section{background:linear-gradient(135deg,rgba(70,213,249,0.12),rgba(59,130,246,0.07)),linear-gradient(145deg,var(--surface),var(--bg2));border:1px solid rgba(70,213,249,0.18);border-radius:28px;padding:64px 52px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;box-shadow:var(--shadow)}
.dl-text h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.5vw,36px);color:#fff;margin-bottom:12px}
.dl-text p{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:24px}
.dl-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-store{display:inline-flex;align-items:center;gap:12px;padding:12px 24px 12px 12px;background:linear-gradient(135deg,#0f172a,#103a4a 48%,#46d5f9);color:#fff;border:1px solid rgba(168,237,252,.28);border-radius:18px;text-decoration:none;font-weight:800;font-size:14px;transition:all 0.3s;box-shadow:0 18px 42px rgba(70,213,249,.20),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-store:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(70,213,249,.30);color:#fff}
.btn-store:active{transform:translateY(0) scale(.98)}
.btn-store svg{width:36px;height:36px;fill:currentColor;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06131b;border-radius:12px;padding:8px;box-shadow:0 8px 20px rgba(70,213,249,.28)}
.dl-phone{text-align:right}
.dl-phone img{max-width:200px;filter:drop-shadow(0 20px 40px rgba(70,213,249,0.2))}

/* ── Contact ──────────────────────────────────────────────────── */
.contact-wrap{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.contact-info{}
.ci-card{background:linear-gradient(145deg,rgba(16,29,51,.98),rgba(12,22,40,.92));border:1px solid rgba(168,237,252,.10);border-radius:18px;padding:24px;margin-bottom:16px;transition:all 0.3s;box-shadow:0 8px 26px rgba(0,0,0,.16)}
.ci-card:hover{border-color:rgba(70,213,249,0.3)}
.ci-icon{width:46px;height:46px;border-radius:15px;background:rgba(70,213,249,.12);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.ci-card h4{font-size:14px;color:#fff;margin-bottom:4px}
.ci-card p{font-size:13px;color:var(--cyan)}
.ci-card a{color:var(--cyan);text-decoration:none}

/* Contact Form */
.contact-form{background:linear-gradient(145deg,rgba(16,29,51,.98),rgba(12,22,40,.92));border:1px solid rgba(168,237,252,.10);border-radius:22px;padding:36px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--cyan);letter-spacing:0.05em;margin-bottom:8px;text-transform:uppercase}
.form-control{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 16px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;transition:all 0.2s;outline:none}
.form-control:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(70,213,249,0.1)}
.form-control option{background:var(--bg2);color:var(--text)}
textarea.form-control{resize:vertical;min-height:110px}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px}
.checkbox-row input{margin-top:3px;accent-color:var(--cyan);flex-shrink:0}
.checkbox-row label{font-size:12px;color:var(--muted);line-height:1.6}
.checkbox-row a{color:var(--cyan)}
.btn-submit{width:100%;padding:15px;background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#000;font-size:15px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all 0.3s;font-family:'Inter',sans-serif}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(70,213,249,0.4)}

/* ── Footer ───────────────────────────────────────────────────── */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:60px 0 30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
.footer-col h4{font-family:'Space Grotesk',sans-serif;font-size:15px;color:#fff;margin-bottom:14px}
.footer-col p{font-size:13px;color:var(--muted);line-height:1.7}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:8px}
.footer-col ul a{color:var(--muted);text-decoration:none;font-size:13px;transition:color 0.2s}
.footer-col ul a:hover{color:var(--cyan)}
.footer-logo{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.footer-logo img{width:24px;height:24px}
.footer-logo span{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--cyan)}
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid var(--border)}
.footer-bottom p{font-size:12px;color:var(--muted)}
.footer-bottom a{color:var(--cyan);text-decoration:none}

/* ── Animations ───────────────────────────────────────────────── */
[data-aos]{opacity:0;transform:translateY(28px);transition:all 0.65s cubic-bezier(0.25,0.46,0.45,0.94)}
[data-aos].visible{opacity:1;transform:translateY(0)}
[data-aos="left"]{transform:translateX(-30px)}
[data-aos="left"].visible{transform:translateX(0)}
[data-aos="right"]{transform:translateX(30px)}
[data-aos="right"].visible{transform:translateX(0)}
[data-aos][style*="--delay"]{transition-delay:var(--delay,0s)}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:1024px){
.process-grid{grid-template-columns:repeat(2,1fr)}
.process-grid::before{display:none}
.feature-section{grid-template-columns:1fr;gap:36px}
.feature-section.reverse{direction:ltr}
.feature-img{padding:20px}
.download-section{grid-template-columns:1fr}
.dl-phone{display:none}
}
@media(max-width:900px){
.hero{flex-direction:column;padding-top:80px;min-height:auto}
.hero-visual{display:none}
.stats-bar{grid-template-columns:repeat(2,1fr)}
.stats-bar .stat-item:nth-child(3)::before{display:none}
.contact-wrap{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.form-row{grid-template-columns:1fr}
}
@media(max-width:640px){
.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(6,12,20,0.98);flex-direction:column;padding:20px;border-bottom:1px solid var(--border)}
.nav-links.open{display:flex}
.hamburger{display:block}
.hero h1{font-size:30px}
.hero-stats{gap:24px}
.stat-num{font-size:28px}
.features-grid{grid-template-columns:1fr}
.process-grid{grid-template-columns:1fr}
.stats-bar{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr}
.download-section{padding:36px 24px}
.contact-form{padding:24px}
}