/* Fleesha Coming Soon — clean light theme, high readability */
:root{
  --bg:#ffffff;

  --card: rgba(11,15,23,.04);
  --card2: rgba(11,15,23,.06);
  --stroke: rgba(11,15,23,.10);

  --text: rgba(11,15,23,.92);
  --muted: rgba(11,15,23,.72);
  --muted2: rgba(11,15,23,.55);

  --accent:#ff7a00;  /* Fleesha orange */
  --accent2:#ffb800; /* warm highlight */

  --shadow: 0 18px 50px rgba(0,0,0,.10);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit}
.sr{position:absolute;left:-9999px}

.bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg__glow{
  position:absolute;filter:blur(90px);opacity:.55;border-radius:999px;
  mix-blend-mode:multiply;
}
.bg__glow--a{width:560px;height:560px;left:-200px;top:-240px;background:rgba(255,122,0,.28)}
.bg__glow--b{width:620px;height:620px;right:-240px;bottom:-280px;background:rgba(255,184,0,.22)}
.bg__grid{position:absolute;inset:-120px;width:calc(100% + 240px);height:calc(100% + 240px);opacity:.6}

.nav{
  position:sticky;top:0;backdrop-filter: blur(10px);
  background: rgba(255,255,255,.86);
  border-bottom:1px solid rgba(11,15,23,.08);
  z-index:10;
}
.nav__inner{
  max-width:1100px;margin:0 auto;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__wordmark{
  height:34px;
  width:auto;
  display:block;
}

.nav__right{display:flex;gap:10px;align-items:center}
.pill{
  text-decoration:none;border:1px solid rgba(11,15,23,.14);
  padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.65);
}
.pill:hover{border-color:rgba(11,15,23,.22)}

.wrap{max-width:1100px;margin:0 auto;padding:34px 18px 50px}

.hero{
  display:grid;grid-template-columns: 1.1fr .9fr;gap:26px;align-items:center;
  padding-top:18px;
}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(11,15,23,.12);
  background:rgba(255,255,255,.70);
  color:var(--muted);
}

h1{
  margin:16px 0 10px;
  font-size: clamp(40px, 5vw, 58px);
  line-height:1.02;
  letter-spacing:-.6px;
}

.grad{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size: clamp(16px, 2vw, 18px);
  line-height:1.6
}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:14px;
  border:1px solid rgba(11,15,23,.14);
  text-decoration:none;font-weight:800;
  background:rgba(255,255,255,.72);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(11,15,23,.22)}
.btn--primary{
  background: linear-gradient(90deg, rgba(255,122,0,1), rgba(255,184,0,1));
  color:#111; border-color: transparent;
}
.btn--primary:hover{transform:translateY(-1px) scale(1.01)}
.btn--ghost{background:rgba(255,255,255,.60)}

.trust{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;
  color:var(--muted2);font-size:14px
}
.trust__item{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.dot--ok{background:rgba(30,200,120,.95); box-shadow:0 0 0 4px rgba(30,200,120,.14)}

/* Phone mock stays dark for contrast (looks premium) */
.phone{
  width:100%;
  max-width:420px;
  margin:0 auto;
  border-radius:34px;
  border:1px solid rgba(11,15,23,.14);
  background: linear-gradient(180deg, rgba(11,15,23,.92), rgba(11,15,23,.82));
  box-shadow: var(--shadow);
  position:relative;
}
.phone__top,.phone__bottom{height:22px}
.phone__screen{
  padding:18px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  min-height:470px;
  position:relative;
  color: rgba(255,255,255,.92);
}
.card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding:16px;
}
.card__title{font-weight:900;margin-bottom:12px}
.card__row{display:flex;align-items:center;gap:10px;margin:10px 0}
.chip{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.chip--a{color:rgba(255,184,0,.95)}
.chip--b{color:rgba(255,122,0,.95)}
.line{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.10)}
.card__map{
  height:190px;border-radius:14px;margin-top:14px;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,184,0,.22), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 60%, rgba(255,122,0,.18), rgba(0,0,0,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
}
.card__btn{
  margin-top:14px;
  padding:12px 14px;border-radius:14px;
  background:linear-gradient(90deg, rgba(255,122,0,1), rgba(255,184,0,1));
  color:#111;font-weight:900;text-align:center;
}

.mini{
  position:absolute;left:14px;bottom:16px;
  display:flex;gap:10px;align-items:center;
  padding:12px;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.mini--right{left:auto;right:14px;top:16px;bottom:auto}
.mini__icon{
  width:34px;height:34px;border-radius:12px;
  background: radial-gradient(circle at 30% 30%, rgba(255,184,0,.9), rgba(255,122,0,.9));
}
.mini__icon--b{
  background: radial-gradient(circle at 30% 30%, rgba(30,200,120,.95), rgba(35,180,255,.85));
}
.mini__k{font-size:12px;color:rgba(255,255,255,.70)}
.mini__v{font-weight:900}

.section{margin-top:54px}
.section__head h2{margin:0 0 8px;font-size:26px;letter-spacing:-.2px}
.section__head p{margin:0;color:var(--muted);line-height:1.6}

.panel{
  margin-top:16px;
  border-radius: var(--radius);
  border:1px solid rgba(11,15,23,.10);
  background: rgba(255,255,255,.70);
  padding:18px;
}

.form{display:flex;gap:12px;flex-wrap:wrap}
input{
  flex:1;min-width:220px;
  background:#fff;
  border:1px solid rgba(11,15,23,.12);
  border-radius:14px;
  padding:12px 14px;
  color:var(--text);
  outline:none;
}
input:focus{border-color: rgba(255,184,0,.75); box-shadow: 0 0 0 4px rgba(255,184,0,.18)}

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.tile{
  border-radius: var(--radius);
  border:1px solid rgba(11,15,23,.10);
  background: rgba(255,255,255,.70);
  padding:18px;
}
.tile__icon{font-size:24px}
.tile h3{margin:12px 0 8px}
.tile p{margin:0 0 12px;color:var(--muted);line-height:1.6}
.link{text-decoration:none;font-weight:900;color:rgba(255,122,0,1)}
.link:hover{text-decoration:underline}

.features{
  margin-top:16px;
  display:grid;grid-template-columns: repeat(3, 1fr);gap:14px;
}
.feature{
  border-radius: var(--radius);
  border:1px solid rgba(11,15,23,.10);
  background: rgba(255,255,255,.70);
  padding:16px;
}
.feature__title{font-weight:900;margin-bottom:6px}
.feature__text{color:var(--muted);line-height:1.6}

.footer{
  margin-top:56px;
  padding-top:18px;
  border-top:1px solid rgba(11,15,23,.08);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer__left{display:flex;align-items:center;gap:12px}
.footer__mark{width:28px;height:28px;opacity:.95}
.footer__brand{font-weight:900}
.footer__muted{color:var(--muted2);font-size:13px}
.footer__right a{color:var(--muted);text-decoration:none}
.footer__right a:hover{text-decoration:underline}

@media (max-width: 920px){
  .hero{grid-template-columns: 1fr; gap:18px}
  .hero__right{order:-1}
  .grid,.features{grid-template-columns:1fr}
}