:root {
--mexicanRed:   #E24759;
--mexicanGreen: #76BFA1;
--mexicanBlue:  #2E2777;
--background:   #FAFAFA;
}
body {
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
background: var(--background);
color: var(--mexicanBlue);
}
/* Logo + Title alignment */
.logo-title {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-title-text {
font-size: 1.3rem;
font-weight: 600;
color: #fff;
}
/* Logo swap on sticky */
#site-logo {
max-height: 50px;
transition: all .3s;
}
.uk-navbar-sticky #site-logo {
content: url('../assets/logo-small.png');
max-height: 40px;
}
/* Hover or Active */
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a {
color: #dbe3f4; /* lightened white / soft gray */
}
/* Navbar */
.uk-navbar-container {
background: transparent;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: background-color 0.3s ease, opacity 0.3s ease;
}
.uk-sticky-inactive {
opacity: 0;
pointer-events: none;
}
.uk-sticky-active {
opacity: 1;
pointer-events: auto;
background-color: var(--mexicanBlue) !important;
}
.uk-container-expand {
max-width: none !important;
padding: 0 2rem;
}
.uk-navbar-nav {
margin-left: auto;
margin-right: 2rem; /* margin on right of menu */
}
.uk-navbar-nav > li > a {
font-size: 1.1rem; /* one size bigger */
font-weight: 400; /* normal font weight */
color: #fff;
transition: color 0.3s ease;
}
/* Hero */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding: 0 2rem;
}
.hero-content {
max-width: 520px;
}
.hero-logo {
width: 300px;
margin-bottom: 16px;
}
.hero-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 18px;
color: #222;
}
.hero-subtitle {
font-size: 1rem;
color: #444;
margin-bottom: 32px;
}
/* Download buttons */
.download-buttons {
display: flex;
gap: 18px;
margin-bottom: 32px;
}
.download-btn {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 2px solid #222;
border-radius: 16px;
padding: 8px 18px;
font-size: 1rem;
font-weight: 500;
color: #222;
text-decoration: none;
box-shadow: 0 2px 8px rgba(44,39,119,0.04);
transition: border-color 0.2s, box-shadow 0.2s;
}
.download-btn:hover {
border-color: var(--mexicanRed);
box-shadow: 0 4px 16px rgba(44,39,119,0.10);
}
.download-btn img {
height: 36px;
width: 36px;
}
.btn-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.btn-label {
font-size: 0.7rem;
color: #555;
}
.btn-store {
font-size: 1.06rem;
font-weight: 700;
color: #222;
}
/* Social icons */
.social-icons a {
margin-right: 14px;
color: #222;
font-size: 1.4rem;
transition: color 0.2s;
}
.social-icons a:hover {
color: var(--mexicanRed);
}
/* Mockup box */
.hero-mockup {
background: #fff;
border-radius: 36px;
box-shadow: 0 4px 32px rgba(44,39,119,0.10);
width: 320px;
padding-top: 18px;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-mockup img {
width: 90%;
margin-bottom: 18px;
border-radius: 18px;
box-shadow: 0 2px 12px rgba(44,39,119,0.06);
}
/* Match button radius */
.rounded-button {
border-radius: 16px;
padding: 0.75rem 2rem;
font-size: 1rem;
}

.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2E2777;
  border-radius: 50%;
  padding: 10px;
  margin-right: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Force icon color */
.social-icon-link svg {
  width: 28px;
  height: 28px;
  fill: white !important;
  color: white !important;
}

.social-icon-link:hover {
  background-color: #1d1a55;
  transform: scale(1.05);
}