:root{
--royal-blue:#4169e1;
--royal-blue-dark:#264ab6;
--royal-blue-soft:#5f7feb;
--text-light:#eef3ff;
--card-bg:rgba(255,255,255,.08);
--border-color:rgba(255,255,255,.22);
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:"Tahoma","Segoe UI",sans-serif;
color:var(--text-light);
background:
radial-gradient(circle at 20% 10%,rgba(95,127,235,.35),transparent 45%),
linear-gradient(150deg,#051133,#0a2160 55%,var(--royal-blue-dark));
min-height:100vh;
line-height:1.8;
}

.landing{
width:min(1120px,92%);
margin-inline:auto;
padding:56px 0 80px;
}

.hero{
text-align:center;
padding:40px 24px;
background:linear-gradient(160deg,rgba(65,105,225,.35),rgba(38,74,182,.3));
border:1px solid var(--border-color);
border-radius:24px;
box-shadow:0 22px 40px rgba(5,11,35,.45);
}

.hero h1{
margin:0 0 14px;
font-size:clamp(1.7rem,2.8vw,2.7rem);
color:#fff;
}

.hero p{
margin:0;
font-size:clamp(1rem,1.8vw,1.22rem);
opacity:.95;
}

.section{
margin-top:38px;
}

.section-title{
margin:0 0 18px;
font-size:clamp(1.35rem,2.2vw,1.9rem);
}

.brand-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}

.brand-card{
background:var(--card-bg);
border:1px solid var(--border-color);
border-radius:20px;
padding:16px;
backdrop-filter:blur(8px);
box-shadow:0 12px 26px rgba(4,9,28,.35);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.brand-card:hover{
transform:translateY(-4px);
border-color:rgba(255,255,255,.35);
box-shadow:0 16px 28px rgba(2,7,24,.45);
}

.brand-card img{
display:block;
width:100%;
height:clamp(200px, 28vw, 320px);
object-fit:contain;
object-position:center;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.14);
padding:12px;
border-radius:14px;
margin-bottom:12px;
}

.brand-card h3{
margin:0 0 6px;
font-size:1.18rem;
color:#fff;
}

.brand-card p{
margin:0;
font-size:.98rem;
opacity:.95;
}

.all-brands{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:18px;
align-items:center;
background:var(--card-bg);
border:1px solid var(--border-color);
border-radius:22px;
padding:18px;
}

.all-brands h2{
margin:0 0 8px;
font-size:clamp(1.25rem,2vw,1.8rem);
}

.all-brands p{
margin:0;
opacity:.95;
}

.all-brands-image{
width:100%;
border-radius:14px;
display:block;
object-fit:cover;
max-height:360px;
}

.contact{
text-align:center;
padding:28px 20px;
background:linear-gradient(150deg,rgba(65,105,225,.25),rgba(38,74,182,.2));
border:1px solid var(--border-color);
border-radius:22px;
}

.contact h2{
margin:0 0 8px;
font-size:clamp(1.3rem,2vw,1.8rem);
}

.contact p{
margin:0 0 8px;
}

.email-link{
color:#fff;
font-weight:700;
font-size:1.08rem;
text-decoration:none;
border-bottom:1px dashed rgba(255,255,255,.85);
}

.email-link:hover{
opacity:.9;
}

.reveal{
opacity:0;
transform:translateY(20px);
transition:opacity .65s ease,transform .65s ease;
}

.reveal.is-visible{
opacity:1;
transform:translateY(0);
}

@media (max-width:960px){
.brand-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.all-brands{
grid-template-columns:1fr;
}
}

@media (max-width:640px){
.landing{
width:min(94%,1120px);
padding:34px 0 56px;
}

.hero{
padding:28px 18px;
}

.section{
margin-top:26px;
}

.brand-grid{
grid-template-columns:1fr;
gap:14px;
}

.brand-card{
padding:14px;
}
}