/* =========================================================
   BuscaXé — Landing Page
   ========================================================= */

:root{
  --magenta:#A6039A;
  --purple:#7A0A93;
  --violet:#4E0B8E;
  --grad:linear-gradient(100deg,#A6039A 0%,#7A0A93 50%,#4E0B8E 100%);
  --ink:#1a1226;
  --body:#6f6678;
  --line:#eeeaf2;
  --bg-soft:#f7f4ef;
  --shadow-sm:0 10px 30px rgba(110,10,120,.08);
  --shadow-md:0 24px 60px rgba(110,10,120,.15);
  --shadow-lg:0 40px 90px rgba(45,5,70,.3);
  --r:16px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--body);
  background:#fff;
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.25;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.4vw,3rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.05rem}

.container{width:min(1140px,92%);margin-inline:auto}
.section{padding:110px 0}

/* ===================== NAVBAR ===================== */
.navbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding:22px 0;transition:.35s ease;
}
.navbar.stuck{
  padding:12px 0;background:#fff;
  box-shadow:0 8px 30px rgba(60,20,140,.09);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{
  display:inline-flex;align-items:center;gap:9px;
  color:#fff;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;
}
.logo svg{width:28px;height:28px;flex:none}
.logo b{font-weight:700}
.navbar.stuck .logo,.logo.dark{color:var(--ink)}
.navbar.stuck .logo b,.logo.dark b{color:var(--purple)}

.nav-menu ul{display:flex;align-items:center;gap:30px}
.nav-menu a{
  position:relative;color:rgba(255,255,255,.88);
  font-size:.86rem;font-weight:400;transition:.25s;
}
.nav-menu a:hover,.nav-menu a.active{color:#fff}
.navbar.stuck .nav-menu a{color:var(--body)}
.navbar.stuck .nav-menu a:hover,.navbar.stuck .nav-menu a.active{color:var(--purple)}

.badge{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  background:#ff4757;color:#fff;font-size:.55rem;font-weight:600;
  padding:1px 7px;border-radius:20px;line-height:1.6;letter-spacing:.03em;
}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:34px;height:26px;flex-direction:column;justify-content:space-between;
}
.nav-toggle span{display:block;height:2.5px;border-radius:3px;background:#fff;transition:.3s}
.navbar.stuck .nav-toggle span{background:var(--ink)}

/* ===================== HERO ===================== */
.hero{
  position:relative;background:var(--grad);
  padding:170px 0 190px;overflow:hidden;
}
.hero::before,.hero::after{
  content:'';position:absolute;border-radius:50%;
  background:rgba(255,255,255,.055);
}
.hero::before{width:520px;height:520px;top:-160px;right:-80px}
.hero::after{width:340px;height:340px;bottom:40px;left:-140px}

.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:40px;
}
.hero-copy h1{color:#fff;margin-bottom:20px}
.hero-copy>p{color:rgba(255,255,255,.86);max-width:430px;margin-bottom:30px}

/* botão Google Play */
.badge-play{
  display:inline-block;border-radius:11px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:.28s ease;
}
.badge-play img{width:196px;height:auto}
.badge-play:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.32)}

.badge-note{
  display:block;margin-top:14px;
  color:rgba(255,255,255,.72);font-size:.78rem;
}

.hero-phone{display:flex;justify-content:center}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1}
.hero-wave svg{width:100%;height:150px}

/* ===================== PHONE MOCKUPS ===================== */
.phone{
  position:relative;background:#15131c;border-radius:42px;
  padding:9px;box-shadow:var(--shadow-lg);flex:none;
}
.phone-screen{
  position:relative;background:#f8f5ee;border-radius:34px;
  overflow:hidden;height:100%;
}
.phone-screen img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
}
.phone-lg{width:290px;height:580px}
.phone-md{width:250px;height:500px}

/* ===================== FEATURES ===================== */
.section-head{text-align:center;max-width:640px;margin:0 auto 55px}
.section-head h2{margin-bottom:14px}
.section-head p{font-size:.92rem}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:#fff;border-radius:var(--r);padding:44px 30px 38px;
  text-align:center;box-shadow:var(--shadow-sm);
  border:1px solid #f4f2f9;transition:.35s ease;
}
.card:hover{transform:translateY(-9px);box-shadow:var(--shadow-md)}

.blob{
  width:74px;height:66px;margin:0 auto 24px;
  background:var(--grad);color:#fff;
  border-radius:50% 50% 50% 14%;
  display:grid;place-items:center;
  box-shadow:0 14px 30px rgba(138,43,232,.32);
}
.blob svg{width:28px;height:28px}
.card h3{margin-bottom:10px}
.card p{font-size:.83rem;line-height:1.8}

/* ===================== DEVICE ===================== */
.device{position:relative;background:var(--bg-soft);overflow:hidden}
.device-bg{
  position:absolute;top:-16%;left:-18%;
  width:78%;height:96%;background:#fff;
  border-radius:0 55% 60% 0/0 50% 55% 0;
}
.device-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;
}
.device-copy h2{margin-bottom:32px}

.feature-list{display:flex;flex-direction:column;gap:20px}
.feature-list li{display:flex;gap:16px;align-items:flex-start}
.feature-list p{font-size:.82rem;line-height:1.75}
.feature-list b{color:var(--ink);font-weight:600}
.mini{
  width:42px;height:42px;flex:none;border-radius:12px;
  background:#fff;color:var(--purple);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);
}
.mini svg{width:19px;height:19px}

.device-phones{display:flex;justify-content:center;align-items:center}
.phone-back{width:225px;height:450px;margin-right:-58px;transform:translateY(-14px);z-index:1}
.phone-front{width:252px;height:504px;z-index:3}

/* ===================== SHARE ===================== */
.share-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}
.share-phones{display:flex;justify-content:center;align-items:center}
.phone-back2{width:225px;height:450px;margin-right:-58px;transform:translateY(-14px);z-index:1}
.phone-front2{width:252px;height:504px;z-index:3}

.share-copy h2{margin-bottom:18px}
.share-copy p{font-size:.86rem;margin-bottom:16px}

.icon-row{display:flex;gap:14px;margin-top:28px}
.ibox{
  width:52px;height:52px;border-radius:14px;
  background:#fff;color:var(--purple);
  display:grid;place-items:center;
  box-shadow:var(--shadow-sm);border:1px solid #f2f0f8;
  transition:.3s;
}
.ibox:hover{background:var(--grad);color:#fff;transform:translateY(-4px)}
.ibox svg{width:22px;height:22px}

/* ===================== CTA ===================== */
.cta{
  position:relative;background:var(--grad);
  padding:100px 0 0;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;width:460px;height:460px;border-radius:50%;
  background:rgba(255,255,255,.06);top:-140px;left:-100px;
}
.cta-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;
}
.cta-copy{padding-bottom:115px}
.cta-copy h2{color:#fff;margin-bottom:18px}
.cta-copy p{color:rgba(255,255,255,.85);max-width:440px;margin-bottom:30px;font-size:.88rem}

.stores{display:flex;gap:14px;flex-wrap:wrap}
.stores .badge-play img{width:210px}

.cta-phone{display:flex;justify-content:center;align-items:flex-end}

/* ===================== FOOTER ===================== */
.footer{background:#fff;padding:80px 0 0}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:40px;padding-bottom:50px;
}
.footer-brand p{font-size:.82rem;margin-top:16px;max-width:280px}
.footer-col h4{font-size:.92rem;margin-bottom:18px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:.82rem;transition:.25s}
.footer-col a:hover{color:var(--purple);padding-left:4px}

.footer-bottom{
  border-top:1px solid var(--line);
  padding:24px 0 30px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.78rem;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:992px){
  .section{padding:80px 0}
  .hero{padding:150px 0 160px}
  .hero-grid,.device-grid,.share-grid,.cta-grid{grid-template-columns:1fr;gap:50px}
  .hero-copy{text-align:center}
  .hero-copy>p{margin-inline:auto}
  .cards-3{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .device-bg{display:none}
  .share-grid .share-phones{order:2}
  .cta-copy{padding-bottom:0;text-align:center}
  .cta-copy p{margin-inline:auto}
  .stores{justify-content:center}
  .icon-row{justify-content:center}
  .footer-grid{grid-template-columns:1fr 1fr}

  .nav-toggle{display:flex}
  .nav-menu{
    position:absolute;top:100%;left:4%;right:4%;
    background:#fff;border-radius:14px;padding:10px 0;
    box-shadow:0 20px 50px rgba(40,10,90,.16);
    display:none;
  }
  .nav-menu.open{display:block}
  .nav-menu ul{flex-direction:column;gap:0;align-items:stretch}
  .nav-menu li{border-bottom:1px solid var(--line)}
  .nav-menu li:last-child{border:0}
  .nav-menu a{display:block;padding:11px 22px;color:var(--body)}
  .nav-menu a:hover,.nav-menu a.active{color:var(--purple)}
  .badge{position:static;transform:none;margin-left:6px;display:inline-block}
}

@media (max-width:560px){
  .hero{padding:130px 0 130px}
  .hero-wave svg{height:80px}
  .phone-lg{width:250px;height:520px}
  .phone-back,.phone-back2{display:none}
  .phone-front,.phone-front2{margin-left:0}
  .device-phones,.share-phones{min-height:auto}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}
}