:root{
  --fg:#fff;
  --muted:rgba(255,255,255,.88);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:url("./3cBQnDI.jpg") center/cover no-repeat;
  filter:blur(12px) brightness(.78);
  transform:scale(1.08);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(900px 340px at 58% 45%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}

/* ===== PHONE (decorative) ===== */
#phone-left{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  filter:drop-shadow(0 28px 70px rgba(0,0,0,.55));
  /* Responsive horizontal offset: stays near the edge, but never collides with content */
  left: clamp(-220px, 6vw, 60px);
}
.phone-mask{
  /* Responsive phone size */
  width: clamp(300px, 26vw, 480px);
  border-radius:36px;
  overflow:hidden;
  clip-path:inset(0 round 36px);
}
.phone-mask img{display:block;width:100%;height:auto}

/* ===== CENTER BLOCK ===== */
.center{
  position:relative; z-index:1;
  /* A bit narrower to leave safe space for the phone on mid screens */
  width:min(860px, 90vw);
  text-align:center;
}
.logo{display:block;margin:0 auto 16px;width:64px;height:64px}
.h1{
  margin:0 0 22px;
  font-weight:300;
  line-height:1.22;
  color:rgba(255,255,255,.95);
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  letter-spacing:.1px;
  /* Fluid typography to keep line breaks consistent across OS/browsers */
  font-size: clamp(28px, 3.8vw, 44px);
}

/* ===== BADGES ===== */
.badges{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.badge-img-wrap{
  display:inline-block;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.badge-img{
  display:block;
  /* Fluid height so buttons look одинаково на любом экране */
  height: clamp(44px, 5.2vw, 56px);
}

/* ===== FOOTER BAR ===== */
.footer{position:absolute;left:0;right:0;bottom:0;z-index:1;color:var(--muted);font-size:12px}
.footer .bar{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}
.footer .inner{display:flex;gap:18px;justify-content:center;padding:10px 10px 14px}
.footer a{color:var(--muted);text-decoration:none}

/* ===== BREAKPOINTS ===== */
/* Large tablets / small desktops */
@media (max-width: 1200px){
  #phone-left{ left: clamp(-120px, 3vw, 20px); opacity:.75 }
  .center{ width:min(820px, 92vw) }
}
/* Tablets */
@media (max-width: 980px){
  #phone-left{ left:-140px; opacity:.65 }
  .center{ width:min(760px, 94vw) }
}
/* Mobiles: прячем телефон, чтобы ничего не наезжало */
@media (max-width: 780px){
  #phone-left{ display:none }
  .center{ width:min(620px, 94vw) }
  .h1{ font-size: clamp(24px, 6vw, 34px) }
  .badge-img{ height: clamp(42px, 8vw, 50px) }
}