:root {
  --bg: #1a1a1a;
  --text: #ffffff;
  --highlight: #ff9f1c;
  --dark: #121212;
  --radius: 1rem;
  --transition: 0.3s ease;
  --max-width: 480px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 2rem 1rem 6rem;
  display: flex;
  justify-content: center;
}

#app {
  width: 100%;
  max-width: var(--max-width);
}

.card{
background:var(--dark);
border-radius:var(--radius);
padding:1.5rem;
margin-bottom:1.5rem;
box-shadow:0 0 10px rgba(0,0,0,0.3);
}

h1,h2{
color:var(--highlight);
margin-bottom:1rem;
text-align:center;
}

h1{
font-size:2rem;
line-height:1.2;
}

h2{
font-size:1.4rem;
margin-top:0.5rem;
}

p.lead{
font-size:1.05rem;
text-align:center;
margin-bottom:1rem;
}

ul{
list-style:none;
padding-left:0;
}

ul li::before{
content:"✔";
color:var(--highlight);
margin-right:0.5rem;
}

.small{
font-size:0.8rem;
}

img{
max-width:100%;
border-radius:var(--radius);
margin-top:1rem;
}

button, .btn{
display:inline-block;
width:100%;
padding:1rem;
font-size:1.1rem;
font-weight:bold;
color:var(--text);
background:var(--highlight);
border:none;
border-radius:var(--radius);
cursor:pointer;
text-align:center;
margin-top:1rem;
transition:background var(--transition);
}

button:hover{
background:#ffa733;
}

.nav.single{
position:fixed;
bottom:0;
width:100%;
max-width:var(--max-width);
padding:1.5rem 1rem;
z-index:999;
}

@media(max-width:480px){
body{
padding:1.5rem 1rem 7rem;
}

h1{
font-size:1.7rem;
}

h2{
font-size:1.2rem;
}

.nav{
max-width:100vw;
width:100vw;
left:50%;
transform:translateX(-50%);
padding:0 0.5rem;
}
.btn{
width:100%;
padding:1.2rem 0;/*толькоповертикали*/
}


}