:root{
  --bg:#fffdfc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(15,23,42,.10);
  --shadow: 0 16px 40px rgba(15,23,42,.12);
  --primary:#FF7A00;
  --primary2:#FFB35C;
  --ring:rgba(255,122,0,.30);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 12% 10%, rgba(255,122,0,.10), transparent 55%),
    radial-gradient(700px 500px at 86% 18%, rgba(255,179,92,.18), transparent 52%),
    var(--bg);
}

a{color:inherit; text-decoration:none}
.container{width:min(1100px, calc(100% - 40px)); margin:0 auto}

.header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.74);
  border-bottom:1px solid var(--border);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{width:32px; height:32px; border-radius:10px; object-fit:cover}
.brand__name{font-weight:800; letter-spacing:-.02em}

.nav{display:flex; gap:18px; align-items:center}
.nav__link{font-weight:600; color:rgba(15,23,42,.78)}
.nav__link:hover{color:rgba(15,23,42,1)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px;
  border-radius:999px;
  font-weight:800;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15,23,42,.10)}
.btn--primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), #ff9b2f);
  color:#fff;
  box-shadow: 0 14px 30px rgba(255,122,0,.28);
}
.btn--ghost{background: rgba(255,255,255,.82)}

.badge{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,122,0,.22);
  background: rgba(255,122,0,.08);
  font-weight:700;
  color: rgba(15,23,42,.78);
}

.hero{padding:58px 0 34px}
.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center}
.hero__title{margin:14px 0 10px; font-size: clamp(34px, 4vw, 56px); line-height:1.02; letter-spacing:-.04em}
.hero__subtitle{margin:0 0 18px; font-size: 16.5px; color:rgba(15,23,42,.72); line-height:1.6}
.accent{color:var(--primary)}
.hero__buttons{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

.trust{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}
.trust__item{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; background: rgba(255,255,255,.78); border:1px solid var(--border)}
.trust__icon{width:24px; height:24px; display:grid; place-items:center; border-radius:10px; background: rgba(255,122,0,.10); color: rgba(15,23,42,.92); font-weight:900}
.trust__text{font-weight:700; color: rgba(15,23,42,.76)}

.hero__visual{position:relative; display:grid; place-items:center}
.glow{position:absolute; inset:auto 20px 0 20px; height:220px; filter: blur(30px); background: radial-gradient(circle at 30% 40%, rgba(255,122,0,.35), transparent 60%), radial-gradient(circle at 70% 20%, rgba(255,179,92,.35), transparent 55%); z-index:0}

.phone{position:relative; width:min(360px, 92%); border-radius:32px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)); border:1px solid rgba(15,23,42,.12); box-shadow: var(--shadow); z-index:1; overflow:hidden}
.phone__top{height:36px; background: linear-gradient(90deg, rgba(255,122,0,.06), rgba(255,179,92,.08)); border-bottom:1px solid var(--border)}
.phone__screen{padding:18px}

.mock{display:grid; gap:12px}
.mock__chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:12px; font-weight:800; padding:7px 10px; border-radius:999px; border:1px solid rgba(15,23,42,.12); color:rgba(15,23,42,.72); background:rgba(255,255,255,.85)}
.chip--on{border-color: rgba(255,122,0,.35); background: rgba(255,122,0,.10); color: rgba(15,23,42,.9)}

.mock__card{border-radius:22px; border:1px solid rgba(15,23,42,.12); background:#fff; overflow:hidden}
.mock__image{height:260px; background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.70)); position:relative}
.mock__image:after{content:"Wake up with calmness\Ain your heart and\Apurpose in your mind"; white-space:pre; position:absolute; inset:20px; color:rgba(255,255,255,.80); font-weight:800; line-height:1.25; font-size:18px}
.mock__row{display:flex; gap:10px; padding:12px}
.pill{flex:1; display:grid; place-items:center; height:38px; border-radius:999px; background: rgba(15,23,42,.06); font-weight:900; color: rgba(15,23,42,.82)}
.pill--wa{background: rgba(16,185,129,.16); color: rgba(15,23,42,.90)}
.mock__hint{font-size:12.5px; color: rgba(15,23,42,.60); font-weight:700}

.section{padding:54px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,122,0,.06), rgba(255,255,255,0) 40%)}
.section--cta{padding:38px 0 56px}
.section__title{margin:0; font-size: clamp(24px, 2.3vw, 34px); letter-spacing:-.03em}
.section__subtitle{margin:10px 0 0; color: rgba(15,23,42,.68); font-weight:600}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:22px}
.card{background: rgba(255,255,255,.86); border:1px solid var(--border); border-radius:22px; padding:18px; box-shadow: 0 8px 22px rgba(15,23,42,.06)}
.card__icon{width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background: rgba(255,122,0,.10); font-size:18px}
.card__title{margin:12px 0 6px; font-size:16px; letter-spacing:-.01em}
.card__text{margin:0; color: rgba(15,23,42,.70); line-height:1.55}

.split{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:start}
.steps{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px}
.step{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:20px; background: rgba(255,255,255,.80); border:1px solid var(--border)}
.step__num{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background: rgba(255,122,0,.12); font-weight:900}
.step__title{font-weight:900}
.step__text{color: rgba(15,23,42,.68); font-weight:600; margin-top:4px; line-height:1.5}

.panel{border-radius:24px; border:1px solid rgba(255,122,0,.24); background: linear-gradient(135deg, rgba(255,122,0,.12), rgba(255,255,255,.88)); padding:18px; box-shadow: 0 18px 42px rgba(255,122,0,.12)}
.panel__title{font-weight:900; font-size:16px}
.panel__text{margin-top:8px; color: rgba(15,23,42,.72); font-weight:650; line-height:1.6}
.panel__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.panel__fineprint{margin-top:12px; font-size:12px; color: rgba(15,23,42,.60); font-weight:600}

.faq{margin-top:18px; display:grid; gap:10px}
.faq__item{border:1px solid var(--border); border-radius:18px; background: rgba(255,255,255,.86); padding:12px 14px}
.faq__q{font-weight:900; cursor:pointer}
.faq__a{margin-top:10px; color: rgba(15,23,42,.70); font-weight:600; line-height:1.6}

.cta{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; border-radius:26px; background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.80)); color:#fff; border:1px solid rgba(255,255,255,.14); box-shadow: var(--shadow)}
.cta__title{margin:0; font-size:24px; letter-spacing:-.02em}
.cta__text{margin:8px 0 0; color: rgba(255,255,255,.78); font-weight:600}
.cta__buttons{display:flex; gap:10px; flex-wrap:wrap}
.cta .btn{border-color: rgba(255,255,255,.22)}
.cta .btn--ghost{background: rgba(255,255,255,.12); color:#fff}

.footer{padding:26px 0 34px; border-top:1px solid var(--border); background: rgba(255,255,255,.68)}
.footer__grid{display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:center}
.footer__brand{font-weight:900}
.footer__links{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.footer__links a{color: rgba(15,23,42,.70); font-weight:700}
.footer__links a:hover{color: rgba(15,23,42,.92)}
.footer__muted{color: rgba(15,23,42,.62); font-weight:600}
.footer__copy{justify-self:end}

@media (max-width: 920px){
  .nav{display:none}
  .hero__grid{grid-template-columns: 1fr; gap:18px}
  .split{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr;}
  .footer__copy{justify-self:start}
  .footer__links{justify-content:flex-start}
  .cta{flex-direction:column; align-items:flex-start}
}