:root{
  --bg-1: #071026;
  --bg-2: #0b1220;
  --glass: rgba(255,255,255,0.04);
  --muted: #9aa6b2;
  --accent: #ff5ca8;
  --accent-2: #7b61ff;
  --card: rgba(255,255,255,0.03);
  --radius: 16px;
  --glass-strong: rgba(255,255,255,0.06);
  --max-width: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:radial-gradient(1200px 400px at 10% 10%, rgba(123,97,255,0.08), transparent), linear-gradient(180deg,var(--bg-1),var(--bg-2));color:#e7f3ff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
a{color:inherit;text-decoration:none}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-family:Poppins,Inter,system-ui;color:#fff}
.logo .mark{background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:6px 8px;border-radius:8px;color:#071026;font-weight:800}
.site-header{position:sticky;top:14px;margin:12px 0 0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:10px 18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(6px)}
.main-nav{display:flex;gap:10px;align-items:center}
.main-nav a{padding:8px 12px;border-radius:12px;color:var(--muted);font-weight:600;transition:all .22s}
.main-nav a:hover{color:#fff;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);transform:translateY(-2px)}
.actions{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:#e6f2ff;font-weight:600;transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071026;border:none;box-shadow:0 10px 30px rgba(123,97,255,0.18)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}
.mobile-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:10px}
.mobile-toggle .bar{display:block;width:22px;height:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0.7));margin:4px 0;border-radius:2px;transition:all .25s}
.mobile-toggle.open .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-toggle.open .bar:nth-child(2){opacity:0}
.mobile-toggle.open .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hero{padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.hero-left h1{font-size:2.05rem;margin:0 0 12px;line-height:1.05;font-family:Poppins,Inter;color:#fff}
.lead{color:var(--muted);margin:0 0 18px;font-size:1.05rem}
.trust-list{display:flex;gap:12px;margin:18px 0 0;list-style:none;padding:0;color:var(--muted);font-weight:600}
.trust-list li{background:rgba(255,255,255,0.02);padding:8px 12px;border-radius:999px;font-size:13px}
.disclaimer-line{font-size:12px;color:#9aa6b2;margin-top:10px}
.device-mock{position:relative;width:360px;height:620px;border-radius:30px;background:linear-gradient(180deg,#071026 0%, #0f2233 100%);box-shadow:0 30px 80px rgba(2,6,23,0.6);padding:18px;border:1px solid rgba(255,255,255,0.03);overflow:hidden}
.device-mock .screen{height:180px;border-radius:14px;margin-bottom:14px;background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;transform:translateY(0);transition:transform .65s cubic-bezier(.2,.9,.2,1)}
.device-mock .screen-1{background:linear-gradient(135deg,#0b1220,#102033);height:240px}
.floating-badge{position:absolute;left:20px;bottom:22px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071026;padding:8px 12px;border-radius:999px;font-weight:700;box-shadow:0 6px 30px rgba(123,97,255,0.18)}
.features{padding:52px 0}
.section-title{margin:0 0 18px;font-size:1.5rem}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,23,0.45);transition:transform .28s,box-shadow .28s}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 18px 50px rgba(2,6,23,0.6)}
.feature-card .icon{font-size:26px;margin-bottom:12px}

/* Accordion (FAQ) styles */
.accordion{display:grid;gap:12px;margin-top:12px}
.accordion-item{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:12px;border:1px solid rgba(255,255,255,0.03);overflow:hidden}
.accordion-button{width:100%;background:transparent;border:0;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;color:#fff;cursor:pointer;font-size:1rem}
.accordion-button[aria-expanded="true"]{background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent)}
.accordion-button:focus{outline:2px solid rgba(123,97,255,0.18);outline-offset:3px}
.accordion-chevron{display:inline-block;transition:transform .28s ease;color:var(--muted);font-weight:800}
.accordion-button[aria-expanded="true"] .accordion-chevron{transform:rotate(45deg);color:#fff}
.accordion-panel{padding:0 18px 16px 18px;color:var(--muted);font-size:0.98rem;max-height:0;overflow:hidden;transition:max-height .32s ease}
.accordion-panel p{margin:12px 0}
@media (max-width:640px){.accordion-button{padding:14px 12px;font-size:0.95rem}}

.screens{padding:46px 0}
.screens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.screenshot{background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));height:260px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;border:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:transform .3s,box-shadow .3s}
.screenshot:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(2,6,23,0.6)}
.caption{color:var(--muted);margin-top:8px}
.download{padding:34px 0}
.download-card{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
.store-buttons{display:flex;gap:12px}
.store-btn{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:10px 14px;border-radius:12px;color:var(--muted);font-weight:700;border:1px solid rgba(255,255,255,0.03)}
.disclaimer{padding:28px 0;color:var(--muted);font-size:14px}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:24px 0;margin-top:48px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-nav{display:flex;gap:12px}
.floating-cta{position:fixed;right:18px;bottom:20px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071026;padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:0 20px 50px rgba(11,18,32,0.6);z-index:60;display:none}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(2,6,23,0.6),rgba(2,6,23,0.8));opacity:0;visibility:hidden;transition:opacity .25s}
.modal[aria-hidden="false"]{opacity:1;visibility:visible}
.modal-inner{background:linear-gradient(180deg,#071026,#0b1220);padding:18px;border-radius:14px;max-width:940px;width:94%;border:1px solid rgba(255,255,255,0.03)}
.modal-close{background:transparent;border:0;color:var(--muted);font-size:20px;float:right}
.modal-content{min-height:320px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.content-card{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:26px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,23,0.5)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.9,.2,1),transform .65s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:22px}
  .device-mock{width:100%;height:480px}
  .floating-cta{display:block}
  .mobile-toggle{display:block}
  .main-nav{display:none}
}
@media (max-width:480px){
  .hero-left h1{font-size:1.45rem}
  .lead{font-size:0.98rem}
  .device-mock{height:380px}
  .feature-grid{grid-template-columns:1fr}
}