/* =========================
   YOULOTO Front - Premium UI
   (Web minimal: register/login)
   ========================= */

:root{
  --brand: #F24607;
  --brand-2: #ff6a2b;
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f6f7fb;
  --card: #ffffff;
  --line: rgba(15, 23, 42, .08);
  --shadow: 0 16px 40px rgba(2,6,23,.08);
  --shadow-sm: 0 8px 20px rgba(2,6,23,.06);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }

body.avp-body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 20% 8%, rgba(242,70,7,.12), rgba(255,255,255,0)),
    radial-gradient(1000px 450px at 85% 15%, rgba(37,99,235,.10), rgba(255,255,255,0)),
    linear-gradient(180deg, #fbfbfe 0%, var(--bg) 45%, #f2f5fb 100%);
  display:flex;
  flex-direction:column;
}

/* NAVBAR */
.avp-navbar{
  background: linear-gradient(180deg, #0b1220 0%, #070c16 100%);
  box-shadow: 0 14px 35px rgba(2,6,23,.25);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.avp-brand-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(242,70,7,.18);
  display:inline-block;
}

.avp-pill{
  font-weight: 600;
  letter-spacing: .2px;
}

.avp-btn-accent{
  background: linear-gradient(180deg, #ffcc3d, #ffb703);
  border: 0;
  color: #0b1220 !important;
  font-weight: 700;
  border-radius: 999px;
  padding: .62rem 1.05rem;
  box-shadow: 0 10px 20px rgba(255,183,3,.25);
}
.avp-btn-accent:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
}

.avp-btn-outline{
  border-radius: 999px;
  padding: .62rem 1.05rem;
  font-weight: 700;
}

.avp-btn-nav{
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 700;
  border-color: rgba(255,255,255,.18);
}
.avp-btn-nav:hover{
  border-color: rgba(255,255,255,.30);
}

.avp-dropdown{
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

/* MAIN */
.avp-main{
  padding: 2.25rem 0 3rem;
}

/* HERO */
.avp-hero{
  padding: 2.25rem 0 3rem;
}

.avp-shell{
  max-width: 1180px;
  margin: 0 auto;
}

.avp-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.avp-hero-card{
  padding: 2.1rem 2rem;
}

.avp-app-card{
  padding: 1.6rem 1.6rem;
}

.avp-mini{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .06);
  background: rgba(15, 23, 42, .02);
}

.avp-mini-ico{
  width: 40px; height: 40px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(242,70,7,.10);
  color: var(--brand);
  border: 1px solid rgba(242,70,7,.18);
}

/* APP STEPS */
.avp-app-steps{
  display:flex;
  flex-direction:column;
  gap: .85rem;
}

.avp-step{
  display:flex;
  gap: .85rem;
  align-items:flex-start;
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .06);
  background: rgba(15, 23, 42, .02);
}

.avp-step-dot{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight: 800;
  color: #0b1220;
  background: linear-gradient(180deg, #ffcc3d, #ffb703);
  box-shadow: 0 10px 18px rgba(255,183,3,.22);
}

.avp-store-btn{
  border-radius: 999px;
  padding: .62rem 1rem;
  font-weight: 700;
}

.avp-alert{
  border-radius: 14px;
  border: 1px solid rgba(255,183,3,.35);
}

/* FOOTER */
.avp-footer{
  background: linear-gradient(180deg, #0b1220 0%, #070c16 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.35rem 0;
  color: rgba(255,255,255,.92);
  box-shadow: 0 -12px 30px rgba(2,6,23,.18);
}

.avp-footer .text-muted{
  color: rgba(255,255,255,.62) !important;
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .avp-hero-card{ padding: 1.6rem 1.35rem; }
  .avp-app-card{ padding: 1.35rem 1.2rem; }
}