.container{
width:100%;
max-width:var(--container-max);
margin-left:auto;
margin-right:auto;
padding-left:var(--section-padding-x);
padding-right:var(--section-padding-x);
}

.section{
position:relative;
padding:var(--section-padding-y) 0;
}

.section--surface{
background:var(--color-bg);
}

.section--muted{
background:var(--color-bg);
}

.section + .section{
border-top:0;
}

body{
padding-top:var(--app-bar-height);
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.grid--products{
align-items:stretch;
}

.hero{
position:relative;
background:var(--color-surface);
color:var(--color-dark);
padding:var(--space-1) 0 calc(var(--space-6) + 4px);
text-align:center;
overflow:hidden;
}

.hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:4px;
background:var(--section-divider);
opacity:0.9;
z-index:1;
}

.hero-inner{
position:relative;
z-index:1;
max-width:var(--container-max);
margin:0 auto;
padding:var(--space-3) var(--section-padding-x) 0;
background:var(--color-surface);
}

.hero-brand{
position:relative;
z-index:2;
width:100%;
margin:0;
padding:var(--space-5) var(--section-padding-x) var(--space-3);
background:var(--color-surface);
}

.hero-brand::before,
.hero-brand::after{
content:"";
position:absolute;
left:0;
right:0;
height:4px;
background:var(--section-divider);
opacity:0.9;
}

.hero-brand::before{top:0;}
.hero-brand::after{bottom:0;}

.hero-logo{
display:block;
max-width:520px;
width:min(100%,520px);
margin:0 auto;
border-radius:var(--radius-image);
}

.hero-logo--hidden{display:none;}

.hero-brand-fallback{
display:none;
max-width:520px;
margin:0 auto;
font-size:var(--font-hero);
font-weight:var(--font-hero-weight);
line-height:1.15;
color:var(--color-dark);
letter-spacing:-0.02em;
}

.hero-brand-fallback--visible{display:block;}

.hero-links{
width:100%;
margin:0;
padding:var(--space-3) var(--section-padding-x) 0;
background:var(--color-surface);
font-size:var(--font-body);
line-height:var(--line-height);
text-align:center;
}

.hero-links a{
color:var(--color-dark);
text-decoration:none;
font-weight:600;
padding:0.15em 0.35em;
border-radius:var(--radius-button);
transition:color var(--transition-fast),background var(--transition-fast);
}

.hero-links a:hover{
color:var(--color-primary);
background:var(--color-primary-soft);
}

.hero__tagline{
max-width:42rem;
margin:var(--space-2) auto 0;
padding:0 var(--section-padding-x);
font-size:var(--font-subtitle);
font-weight:500;
line-height:var(--line-height);
color:var(--color-muted);
text-align:center;
}

.hero-cta{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--space-2);
}

@media(max-width:800px){
.hero-brand{padding:var(--space-4) var(--section-padding-x) var(--space-3);}
.hero-inner{padding-top:var(--space-3);}
.section{padding:var(--space-5) 0;}
}