:root{
--bg:#060c14;
--bg2:#080f1a;
--bg3:#0c1628;
--border:#0f2035;
--text:#b8d0e8;
--muted:#4a6278;
--cyan:#46d5f9;
--cyan2:#1ab8d4;
--cyan-light:#a8edfc;
--blue:#3b82f6;
--purple:#8b5cf6;
--gold:#f59e0b;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background: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.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);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:4px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;padding:8px 14px;border-radius:8px;transition:all 0.2s}
.nav-links a:hover{color:var(--cyan);background:rgba(70,213,249,0.08)}
.nav-dashboard-btn{color:var(--cyan)!important;border:1px solid var(--cyan);border-radius:8px;padding:6px 16px!important;margin-left:8px;font-weight:600!important}
.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:10px;font-size:14px;font-weight:600;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-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:100px 24px 60px;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:6px 16px;background:rgba(70,213,249,0.1);border:1px solid rgba(70,213,249,0.25);border-radius:20px;font-size:12px;color:var(--cyan);margin-bottom:24px;font-weight:500}
.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:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 30px rgba(0,0,0,0.35);animation:float 6s ease-in-out infinite}
.fc-icon{font-size:24px}
.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}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ── Sections ─────────────────────────────────────────────────── */
.section{padding:100px 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:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:32px;position:relative;overflow:hidden;transition:all 0.3s;cursor:default}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(70,213,249,0.3);box-shadow:0 12px 40px rgba(70,213,249,0.08)}
.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{font-size:40px;margin-bottom:16px}
.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:4px 10px;background:rgba(70,213,249,0.08);border:1px solid rgba(70,213,249,0.15);border-radius:12px;color:var(--cyan)}
.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:20px;overflow:hidden;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.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:20px 16px;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.08),rgba(59,130,246,0.04));border:1px solid rgba(70,213,249,0.15);border-radius:24px;padding:60px 50px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.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:10px;padding:14px 24px;background:#fff;color:#000;border-radius:12px;text-decoration:none;font-weight:600;font-size:14px;transition:all 0.3s}
.btn-store:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,255,255,0.2)}
.btn-store svg{width:20px;height:20px;fill:currentColor}
.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:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:16px;transition:all 0.3s}
.ci-card:hover{border-color:rgba(70,213,249,0.3)}
.ci-icon{font-size:28px;margin-bottom:10px}
.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:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:36px}
.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}
}