/* ---------- Theme (matched to logo) ---------- */
:root{
  --primary:#8A2BE2;            /* logo purple */
  --primary-20: rgba(138,43,226,.20);
  --surface:#12101A;
  --bg:#0B0A10;
  --text:#EDEAF7;
  --muted:#BFB9D3;
  --border:rgba(255,255,255,0.10);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}

body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}

/* ---------- Navbar ---------- */
.navbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:1000;min-height:60px
}
.brand{display:flex;align-items:center;gap:10px}
.logo-img{
  height:36px;width:auto;object-fit:contain;
  /* crop away the white frame inside the PNG */
  clip-path: inset(2.5% 2.5% 2.5% 2.5% round 6px);
  border-radius:6px;
}
.brand-text{text-transform:lowercase;letter-spacing:.3px;font-weight:700;color:#fff}
.nav-links a{margin:0 10px;color:#ccc;text-decoration:none}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;background:none;border:1px solid #444;color:#fff;padding:6px 10px;border-radius:6px}

/* Mobile nav (overlay) */
.mobile-nav{
  position:fixed;top:60px;left:0;right:0;
  display:flex;flex-direction:column;gap:6px;
  padding:14px 18px;background:#0F0E14;border-top:1px solid rgba(255,255,255,.08);
  z-index:999
}
.mobile-nav a{color:#ddd;padding:10px 8px;text-decoration:none;border-radius:8px}
.mobile-nav a:hover{background:rgba(255,255,255,.06)}
.hidden{display:none}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  padding:72px 24px;max-width:1200px;margin:auto
}
.hero h1{font-size:42px;margin:.2em 0;line-height:1.15}
.highlight{color:var(--primary)}
.hero-img img{width:100%;border-radius:20px}
.badge{display:inline-block;padding:5px 12px;background:var(--primary-20);border-radius:20px;font-size:12px}
.hero-buttons{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.btn{padding:10px 18px;border-radius:8px;text-decoration:none;font-size:14px}
.btn.primary{background:var(--primary);color:#fff}
.btn.secondary{border:1px solid #555;color:#fff}
.btn.small{padding:6px 14px;font-size:13px}

/* ---------- Sections ---------- */
.section{padding:64px 24px;max-width:1200px;margin:auto;text-align:center}
.section h2{font-size:32px;margin-bottom:16px}
.section-subtitle{color:var(--muted)}

/* ---------- Cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);padding:20px;border-radius:16px;text-align:left}
.card img{width:100%;border-radius:12px;height:180px;object-fit:cover}
.card-body{padding-top:10px}
.property{transition:transform .3s, box-shadow .3s}
.property:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(138,43,226,.15)}

/* ---------- How it Works (timeline) ---------- */
.how-it-works{text-align:center}
.timeline{margin-top:40px;display:flex;flex-direction:column;gap:32px;position:relative;max-width:900px;margin-inline:auto}
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:36px;width:3px;background:var(--primary-20)}
.timeline-step{display:flex;align-items:flex-start;gap:16px;position:relative;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .6s}
.timeline-step.visible{opacity:1;transform:translateY(0)}
.timeline-step .icon{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;z-index:2;margin-left:18px;flex-shrink:0}
.timeline-step .content{background:var(--surface);border:1px solid var(--border);padding:18px;border-radius:12px;text-align:left;flex:1}
.timeline-step h3{margin:0 0 8px;color:#fff;font-size:18px}
.timeline-step p,.timeline-step ul{color:#bbb;font-size:14px;margin:0 0 8px}
.timeline-step ul{padding-left:18px}

/* ---------- App (phones) ---------- */
.app-section{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;text-align:left}
.app-text ul{margin:16px 0;padding-left:18px;color:#bbb}
.app-text ul li{margin-bottom:6px}
.launch-info{margin-top:12px;background:var(--primary-20);padding:8px 12px;border-radius:10px;display:inline-block;font-size:13px}
.app-images{display:flex;gap:16px;justify-content:center}
.phone img{width:180px;border-radius:20px;border:1px solid #444}
.tilt-left{transform:rotate(-8deg)}
.tilt-right{transform:rotate(8deg)}

/* ---------- About ---------- */
.about .cards{margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.feature{text-align:left}
.feature h3{margin-bottom:8px;color:#fff}
.feature p{color:#bbb}

/* ---------- Roadmap ---------- */
.roadmap-timeline{margin-top:28px;max-width:800px;margin-inline:auto}
.milestone{display:flex;align-items:center;gap:16px;margin-bottom:28px;opacity:0;transform:translateY(40px);transition:all .6s}
.milestone.visible{opacity:1;transform:translateY(0)}
.dot{width:16px;height:16px;border-radius:50%;background:var(--primary)}
.milestone-content{background:var(--surface);padding:14px 16px;border-radius:12px;border:1px solid var(--border);flex:1;text-align:left}
.milestone-content h3{margin:0 0 6px;color:#fff;font-size:18px}
.milestone-content p{margin:0;color:#bbb;font-size:14px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat{background:var(--surface);padding:18px;border-radius:12px;border:1px solid var(--border)}
.stat h3{font-size:22px;margin:0}

/* ---------- FAQ ---------- */
.faq-content{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:28px}
.faq-image img{width:100%;border-radius:16px;border:1px solid var(--border)}
.faq-list details{background:var(--surface);padding:14px;border-radius:10px;margin-bottom:12px;border:1px solid var(--border)}
.faq-list summary{cursor:pointer;font-weight:bold;color:#fff}
.faq-list p{margin-top:8px;color:#aaa;font-size:14px}

/* ---------- CTA & Footer ---------- */
.cta a{display:inline-block;margin:10px}
.footer{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:22px;border-top:1px solid var(--border);color:#999}
.footer .brand{gap:8px}
.footer .logo-img{height:24px}
.footer .brand-text{font-size:14px;color:#ddd}

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .hero{grid-template-columns:1fr;gap:28px}
}
@media (max-width: 768px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .brand-text{display:none}         /* keep only the logo on small screens */
  .logo-img{height:28px;clip-path: inset(3% 3% 3% 3% round 6px)}

  .section{padding:48px 18px}
  .hero{padding:56px 18px}
  .hero h1{font-size:34px}
  .btn{width:100%;text-align:center;padding:12px 16px}
  .hero-buttons{flex-direction:column}

  .timeline::before{left:28px}
  .timeline-step{flex-direction:column;align-items:flex-start;gap:12px}
  .timeline-step .icon{margin-left:0;width:52px;height:52px;font-size:24px}

  .app-section{grid-template-columns:1fr;text-align:center}
  .app-images{justify-content:center}
  .phone img{width:150px}
  .tilt-left,.tilt-right{transform:none}

  .faq-content{grid-template-columns:1fr}
  .faq-image{order:2;margin-top:16px}
}
/* --- Social Links --- */
.social-links {
  display: flex;
  gap: 16px;
}
.social-links a {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.social-links a:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.social-links img {
  width: 14px;
  height: 14px;
  filter: invert(1);
}