@import url("internet.css");

/* MOBILE THEME */

:root {
  --page-bg: #eef4ff;

  --accent: #0b7cff;
  --accent-dark: #0047ba;
  --accent-light: #eef4ff;

  --shadow-button: 0 8px 18px rgba(11,124,255,0.24);
}

body {
  background: var(--page-bg);
  color: var(--text-main);
}

/* NAV / LANGUAGE */

.nav-link.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
}

.lang-btn.active {
  background: var(--accent);
  color: white;
}

/* HERO */

.hero {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.94) 30%,
      rgba(255,255,255,0.50) 58%,
      rgba(255,255,255,0.12) 100%
    ),
    url("../images/mobile-hero-bg.webp");
  background-size: cover;
  background-position: center;
}

.hero-category {
  background: rgba(11,124,255,0.14);
  color: var(--accent);
}

.check-circle {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

/* FEATURES */

.feature-card img {
  filter:
    hue-rotate(0deg)
    saturate(1.15)
    brightness(1.04);
}

/* INFO STRIP */

.info-strip {
  background:
    linear-gradient(
      135deg,
      rgba(237,245,255,0.96),
      rgba(255,255,255,0.96)
    );
  border: 1px solid rgba(11,124,255,0.08);
  box-shadow: 0 6px 16px rgba(11,124,255,0.05);
}

/* OFFERS */

.offer-card::before {
  background: var(--accent);
}

.offer-title {
  color: var(--accent);
}

.offer-tags span::before {
  background: var(--accent-light);
  color: var(--accent);
}

.offer-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: var(--shadow-button);
}

/* PROVIDERS */

.provider-telekom {
  color: #e20074;
}

.provider-vodafone {
  color: #e60000;
}

.provider-o2 {
  color: #0046ad;
}

.provider-congstar {
  color: #111111;
}

.provider-freenet {
  color: #45b800;
}

.provider-blau {
  color: #2aa8ff;
}

.provider-simon {
  color: #111111;
}

/* COMPARISON */

.verivox-card {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.98),
      rgba(255,255,255,0.76)
    ),
    linear-gradient(
      135deg,
      #fff7ed,
      #ffffff
    );
}

.check24-card {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.98),
      rgba(255,255,255,0.76)
    ),
    linear-gradient(
      135deg,
      #eef6ff,
      #ffffff
    );
}

.comparison-link {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: var(--shadow-button);
}

/* MINI GUIDE */

.guide-card h3 {
  color: var(--accent);
}

/* TELEGRAM */

.telegram-btn-ru {
  background: white;
  color: var(--telegram-blue);
  border: 2px solid var(--telegram-blue);
}

.telegram-btn-de {
  background: linear-gradient(135deg, #16a8ff, #0067e8);
  color: white;
  border: none;
}

/* FOOTER */

.footer img {
  filter: drop-shadow(0 2px 6px rgba(11,124,255,0.18));
}

/* MOBILE */

@media (max-width: 760px) {

  body {
    background: var(--page-bg);
  }

  .header {
    background: var(--page-bg);
  }

  .hero {
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.96) 0%,
        rgba(255,255,255,0.90) 45%,
        rgba(237,245,255,0.52) 100%
      ),
      url("../images/mobile-hero-bg.webp");
    background-size: cover;
    background-position: center top;
  }

}