/* ===== Hero ===== */
.hero{
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  padding-top:64px;
  overflow:hidden;
}
.heroImg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:50% 18%;
  z-index:0;
}
.heroShade{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.16), rgba(0,0,0,.62));
  pointer-events:none;
  z-index:1;
}
/* Apple-like bottom fade */
.hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:58svh;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.20) 40%, rgba(0,0,0,0) 78%);
  pointer-events:none;
  z-index:1;
}

.center{
  transform: translateY(-9svh);
position:relative;
  z-index:2;
  width:min(720px,92%);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:16px 10px calc(18px + env(safe-area-inset-bottom)); /* room for footer */
}

h1{
  margin:0 0 14px;
  font-size:clamp(30px,5vw,44px);
  font-weight:650;
  letter-spacing:-.6px;
}

.heroSub{
  margin:0 auto 18px;
  max-width:520px;
  font-size:clamp(15px,2.6vw,18px);
  line-height:1.35;
  color:rgba(245,245,245,.86);
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ===== Search ===== */
.search{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px 10px 14px;
  max-width:560px;
  margin:0 auto;
  border-radius:999px;
  border:1px solid rgba(245,245,245,.18);
  background:rgba(12,12,13,.32);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:
    0 18px 50px rgba(0,0,0,.45),
    0 2px 0 rgba(255,255,255,.04) inset;
  transition:box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.search input{
  flex:1;
  background:transparent;border:none;outline:none;
  color:rgba(245,245,245,.94);
  font-size:16px;
}
.search input::placeholder{color:rgba(245,245,245,.55)}
.search button{
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(183,154,90,.28);
  background:rgba(183,154,90,.92);
  color:#111;font-weight:900;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.search:focus-within{
  border-color:rgba(245,245,245,.28);
  background:rgba(12,12,13,.42);
  box-shadow:
    0 26px 70px rgba(0,0,0,.55),
    0 0 0 6px rgba(183,154,90,.10),
    0 2px 0 rgba(255,255,255,.05) inset;
}
@media (prefers-reduced-motion: reduce){
  .search{transition:none}
}

/* Under buttons */
.under{margin-top:14px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.ghost{
  border:1px solid rgba(245,245,245,.18);
  background:rgba(0,0,0,.12);
  color:rgba(245,245,245,.92);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
}
.ghost.small{padding:8px 12px;font-size:12px}
.sep{opacity:.6}

/* ===== Footer ===== */
.footer{
  position:fixed;left:0;right:0;bottom:0;
  padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none;
}
.footLine{
  font-size:13px;
  color:rgba(245,245,245,.80);
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}
.footMini{
  font-size:12px;color:rgba(245,245,245,.55);
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.dot{opacity:.6}
.footLink{color:rgba(245,245,245,.68);text-decoration:none;pointer-events:auto}
.footLink:hover{opacity:.9}