:root{

  --bg:#f4f7fb;
  --bg2:#eef3f9;

  --card:rgba(255,255,255,.82);

  --border:rgba(15,23,42,.06);

  --text:#111827;
  --muted:#667085;

  --pink:#ff7eb6;
  --blue:#6ea8ff;
  --purple:#9a7cff;

  --shadow:
    0 10px 30px rgba(15,23,42,.06);

}

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

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Space Grotesk',sans-serif;

  background:

    radial-gradient(circle at top,
      rgba(255,126,182,.08),
      transparent 28%),

    radial-gradient(circle at bottom right,
      rgba(110,168,255,.10),
      transparent 35%),

    linear-gradient(
      180deg,
      #f8fbff,
      #eef3f9
    );

  color:var(--text);

  overflow-x:hidden;
}

/* GLOBAL */

.container{
  width:100%;
  max-width:520px;
  margin:auto;
  padding:0 18px;
}

.glass{

  background:
    rgba(255,255,255,.75);

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.55);

  box-shadow:var(--shadow);
}

/* NAV */

nav{

  position:sticky;
  top:0;

  z-index:1000;

  padding-top:env(safe-area-inset-top);

  background:rgba(255,255,255,.72);

  backdrop-filter:blur(18px);

  border-bottom:1px solid var(--border);
}

.nav-wrap{

  height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{

  display:flex;
  align-items:center;
  gap:12px;
}

.logo img{

  width:44px;
  height:44px;

  border-radius:16px;

  object-fit:cover;

  box-shadow:
    0 0 30px rgba(255,126,182,.25);
}

.logo-text h2{

  font-size:20px;

  line-height:1;

  letter-spacing:-1px;
}

.logo-text p{

  color:var(--muted);

  font-size:11px;

  margin-top:3px;
}

.install-btn{

  height:42px;

  padding:0 18px;

  border:none;
  border-radius:14px;

  cursor:pointer;

  font-weight:700;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--pink),
      var(--purple)
    );

  box-shadow:
    0 10px 25px rgba(154,124,255,.20);
}

/* HERO */

.hero{

  padding:
    40px
    0
    80px;
}

.hero-top{

  text-align:center;
}

.hero-badge{

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:10px 16px;

  border-radius:999px;

  margin-bottom:26px;

  font-size:12px;
  font-weight:700;

  color:#b54775;

  background:
    rgba(255,126,182,.10);

  border:
    1px solid rgba(255,126,182,.18);
}

.hero h1{

  font-size:48px;

  line-height:.98;

  letter-spacing:-3px;

  margin-bottom:22px;
}

.hero p{

  color:var(--muted);

  font-size:17px;

  line-height:1.8;

  margin-bottom:30px;
}

.hero-actions{

  display:flex;
  flex-direction:column;

  gap:14px;
}

.btn-primary{

  height:58px;

  border:none;
  border-radius:20px;

  font-size:16px;
  font-weight:700;

  cursor:pointer;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--pink),
      var(--purple)
    );

  box-shadow:
    0 15px 40px rgba(255,108,168,.18);
}

.btn-secondary{

  height:56px;

  border-radius:20px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.70);

  color:#111827;

  font-size:15px;
  font-weight:700;
}

/* PHONE */

.phone-wrap{

  margin-top:50px;

  position:relative;
}

.phone-glow{

  position:absolute;

  width:280px;
  height:280px;

  border-radius:50%;

  background:
    rgba(255,126,182,.14);

  filter:blur(80px);

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);
}

.phone{

  width:100%;
  max-width:320px;
  height:640px;

  margin:auto;

  border-radius:40px;

  overflow:hidden;

  position:relative;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #eef3f9
    );

  border:1px solid rgba(15,23,42,.06);

  box-shadow:
    0 25px 60px rgba(15,23,42,.10);
}

.phone-screen{

  position:absolute;
  inset:12px;

  border-radius:30px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #f8fbff,
      #edf3fa
    );
}

/* GRID */

.grid{

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);

  background-size:26px 26px;
}

/* BRAIN */

.brain-wrap{

  position:absolute;

  top:90px;
  left:50%;

  transform:translateX(-50%);
}

.brain{

  width:180px;

  filter:
    drop-shadow(0 0 25px rgba(255,126,182,.18));
}

/* FLOAT CARDS */

.float-card{

  position:absolute;

  left:18px;
  right:18px;

  padding:16px;

  border-radius:22px;

  background:
    rgba(255,255,255,.72);

  backdrop-filter:blur(14px);

  border:1px solid rgba(15,23,42,.05);

  box-shadow:
    0 10px 30px rgba(15,23,42,.08);
}

.float-card h4{

  font-size:12px;

  color:#7b8799;

  margin-bottom:8px;
}

.float-card strong{

  font-size:22px;

  color:#101828;
}

.card1{
  bottom:150px;
}

.card2{
  bottom:72px;
}

/* SECTIONS */

section{
  padding:70px 0;
}

.section-title{

  font-size:36px;

  text-align:center;

  letter-spacing:-2px;

  margin-bottom:16px;
}

.section-sub{

  text-align:center;

  color:var(--muted);

  line-height:1.8;

  margin-bottom:36px;
}

/* CARDS */

.cards{

  display:grid;

  gap:18px;
}

.card{

  padding:24px;

  border-radius:28px;
}

.card-icon{

  width:58px;
  height:58px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:18px;

  font-size:24px;

  background:
    rgba(255,126,182,.12);

  border:
    1px solid rgba(255,126,182,.15);
}

.card h3{

  font-size:24px;

  margin-bottom:10px;
}

.card p{

  color:var(--muted);

  line-height:1.8;
}

/* LIVE */

.live{

  padding:28px;

  border-radius:32px;

  text-align:center;
}

.live h2{

  font-size:56px;

  margin-bottom:10px;

  background:
    linear-gradient(
      135deg,
      var(--pink),
      var(--blue)
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.live p{

  color:var(--muted);

  line-height:1.8;
}

/* CTA */

.cta{

  text-align:center;
}

.cta-box{

  padding:40px 24px;

  border-radius:36px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.82),
      rgba(245,247,251,.95)
    );

  border:1px solid rgba(15,23,42,.05);
}

.cta-box h2{

  font-size:40px;

  line-height:1;

  letter-spacing:-2px;

  margin-bottom:20px;
}

.cta-box p{

  color:var(--muted);

  line-height:1.8;

  margin-bottom:28px;
}

/* FOOTER */

footer{

  padding:
    50px
    20px
    calc(50px + env(safe-area-inset-bottom));

  text-align:center;

  color:#7b8799;

  font-size:13px;
}