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

:root{
--fta:#8B0D2F;
--fta-light:#fff4f7;
--bg:#f5f6f8;
}

body{
font-family:Arial,sans-serif;
background:var(--bg);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

.container{
width:100%;
max-width:550px;
}

.portal-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 12px 35px rgba(0,0,0,.08);
transition:.3s ease;
}

.portal-card:hover{
transform:translateY(-2px);
}

.portal-top{
padding:30px 20px;
text-align:center;
border-bottom:1px solid #eee;
}

.logo{
width:90px;
height:auto;
margin-bottom:10px;
}

.portal-subtitle{
color:#666;
line-height:1.5;
font-size:15px;
}

.portal-actions{
padding:25px;
display:flex;
flex-direction:column;
gap:18px;
}

.action-card{
display:flex;
align-items:center;
gap:18px;
padding:20px;
border:1px solid #ead3dc;
border-radius:14px;
text-decoration:none;
background:#fff;
transition:.3s;
cursor:pointer;
}

.action-card:hover{
background:var(--fta-light);
border-color:var(--fta);
transform:translateY(-2px);
}

.action-card i{
font-size:32px;
color:var(--fta);
min-width:40px;
transition:.3s;
}

.action-card:hover i{
transform:scale(1.1);
}

.action-card-content h3{
font-size:22px;
color:var(--fta);
margin-bottom:6px;
}

.action-card-content p{
font-size:14px;
line-height:1.5;
color:#666;
}

.footer{
padding:25px;
text-align:center;
font-size:13px;
color:#666;
border-top:1px solid #eee;
line-height:1.8;
}

.footer a{
color:var(--fta);
font-weight:bold;
text-decoration:none;
}

#installCard{
display:none;
}

@media(max-width:768px){

body{
padding:0;
align-items:flex-start;
}

.container{
max-width:100%;
}

.portal-card{
min-height:100vh;
border-radius:0;
box-shadow:none;
}

.portal-top{
padding:35px 20px;
}

.logo{
width:100px;
}

.portal-actions{
padding:20px;
}

}

.hero-banner{
background:
linear-gradient(
135deg,
#b3002f 0%,
#8B0D2F 40%,
#520015 100%
);

color:white;
padding:40px 25px;
position:relative;
overflow:hidden;
}

.hero-banner::before{
content:"";
position:absolute;
top:-40px;
left:-50px;
width:180%;
height:180%;
background:
linear-gradient(
160deg,
transparent 25%,
rgba(255,255,255,.04) 25%,
rgba(255,255,255,.04) 35%,
transparent 35%,
transparent 55%,
rgba(255,255,255,.04) 55%,
rgba(255,255,255,.04) 65%,
transparent 65%
);

transform:rotate(-8deg);
}

.hero-banner .logo{
width:110px;
margin-bottom:15px;
position:relative;
z-index:2;
}

.hero-title{
position:relative;
z-index:2;
font-size:28px;
font-weight:800;
line-height:1.15;
letter-spacing:.5px;
margin-bottom:14px;
}

.hero-banner .portal-subtitle{
position:relative;
z-index:2;
color:#fff;
font-size:15px;
line-height:1.4;
max-width:420px;
margin:auto;
}

@media(max-width:768px){

.hero-title{
font-size:22px;
}

.hero-banner .logo{
width:90px;
}

}
.language-switcher{
  position:absolute;
  top:20px;
  right:20px;
}

.lang-select{
  padding:8px 12px;
  border:none;
  border-radius:8px;
  background:#ffffff;
  color:#8B0D2F;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}