body
{
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#fafafa;
color:#333;
text-align:center;
}

.container
{
max-width:900px;
margin:auto;
padding:40px 20px;
}



/* HERO */

.hero
{
background:
linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
url("https://images.unsplash.com/photo-1414235077428-338989a2e8c0");

background-size:cover;
background-position:center;

color:white;

padding:160px 20px;
}

.hero h1
{
font-size:48px;
margin-bottom:10px;
}

.hero h2
{
font-weight:400;
margin-bottom:20px;
}

.hero p
{
opacity:0.8;
}



/* BUTTON */

.cta-button
{
display:inline-block;
background:#ff6b00;
color:white;
padding:15px 30px;
font-size:18px;
border:none;
border-radius:6px;
cursor:pointer;

transition:all 0.25s ease;
}

.cta-button:hover
{
transform:scale(1.05);
background:#ff7a1a;
}



/* SIGNUP */

.signup-container
{
position:relative;

display:flex;
justify-content:center;
align-items:center;

margin-top:30px;
}

.email-input
{
position:absolute;

width:0;
opacity:0;

padding:14px;

border-radius:6px;
border:none;

font-size:16px;

background:#ffffff;
color:#333;

transform:translateX(-140px);

transition:all 0.35s ease;

pointer-events:none;
}

.email-input.show
{
position:static;

width:260px;
opacity:1;

transform:translateX(0);

pointer-events:auto;

margin-right:12px;
}
.checkbox-container
{
margin-top:15px;
font-size:14px;
color:white;
opacity:0;

transform:translateY(-10px);

transition:all 0.35s ease;

pointer-events:none;
}

.checkbox-container.show
{
opacity:0.9;

transform:translateY(0);

pointer-events:auto;
}

.checkbox-container input
{
margin-right:8px;
transform:scale(1.1);
cursor:pointer;
}

.checkbox-container label
{
cursor:pointer;
}
/* TRUST */

.trust-line
{
margin-top:15px;
font-size:14px;
opacity:0.85;
}

.social-proof
{
margin-top:10px;
font-size:16px;
opacity:0.9;
}



/* FEATURES */

.features
{
background:
linear-gradient(
rgba(159,180,169,0.82),
rgba(159,180,169,0.82)
),
url("https://images.unsplash.com/photo-1504674900247-0877df9cc836");

background-size:cover;
background-position:center;

padding:120px 20px;

color:#1f2d29;
}

.features h2
{
font-size:44px;
margin-bottom:60px;
}

.feature-grid
{
display:flex;
gap:60px;
justify-content:center;
flex-wrap:wrap;
}

.feature
{
width:260px;
}



/* RESTAURANTS */

.restaurants
{
padding:120px 20px;
background:white;
}

.restaurant-grid
{
display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;
margin-top:40px;
}

.restaurant-card
{
width:260px;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.restaurant-card img
{
width:100%;
height:170px;
object-fit:cover;
}

.restaurant-card h4
{
margin:15px 0 5px;
}

.restaurant-card p
{
padding:0 15px 20px;
font-size:15px;
}



/* BENEFITS */

.benefits
{
padding:100px 20px;
background:#fafafa;
}

.benefits h2
{
font-size:36px;
margin-bottom:50px;
}

.benefits-grid
{
display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;
}

.benefit
{
background:white;
padding:20px 30px;
border-radius:10px;
font-size:18px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}



/* PRICING */

.pricing
{
background:
linear-gradient(
rgba(0,0,0,0.55),
rgba(0,0,0,0.55)
),
url("https://images.unsplash.com/photo-1555396273-367ea4eb4db5");

background-size:cover;
background-position:center;

padding:100px 20px;

color:white;
}

.price
{
font-size:64px;
font-weight:bold;
margin:25px 0;
}



/* FOOTER */

footer
{
padding:20px;
background:#111;
color:white;
}



/* MOBILE */

@media (max-width:600px)
{

.hero h1
{
font-size:34px;
}

.hero h2
{
font-size:20px;
}

.signup-container
{
flex-direction:column;
gap:10px;
}

.email-input.show
{
width:220px;
}

.feature-grid
{
gap:40px;
}

.features h2
{
font-size:28px;
}

.restaurant-grid
{
gap:25px;
}

}