/* =====================

   GLOBAL

===================== */

body {

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

  color: white;

}



.page-bg {

  background: url("/assets/bg.jpg") center/cover fixed no-repeat;

}



/* =====================

   TOP BAR

===================== */

.top-bar {

  background: linear-gradient(90deg,#00ffae,#00cc88);

  color: black;

  text-align: center;

  padding: 8px;

  font-weight: bold;

}



/* =====================

   NAVBAR

===================== */

.navbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 40px;

  background: rgba(0,0,0,.65);

}



.navbar a {

  color: #00ffae;

  text-decoration: none;

  margin-left: 20px;

  font-weight: bold;

}



.nav-logo { height: 40px }



/* =====================

   HERO (společné)

===================== */

.hero {

  text-align: center;

  padding: 130px 20px 80px;

  background: rgba(0,0,0,.75);

}



.hero.small {

  padding: 100px 20px;

}



.hero h1 {

  color: #00ffae;

  font-size: 48px;

}



/* =====================

   HOME

===================== */

.page-home .home-buttons {

  margin-top: 30px;

}



.btn-main, .btn-outline {

  padding: 14px 26px;

  margin: 10px;

  border-radius: 30px;

  text-decoration: none;

  font-weight: bold;

}



.btn-main {

  background: #00ffae;

  color: black;

}



.btn-outline {

  border: 2px solid #00ffae;

  color: #00ffae;

}



.page-home .home-features {

  display: flex;

  justify-content: center;

  gap: 40px;

  padding: 80px 20px;

}



.feature-box {

  background: rgba(0,0,0,.7);

  padding: 30px;

  border-radius: 15px;

  border: 2px solid #00ffae;

  width: 250px;

  text-align: center;

}



.page-home .home-faq {

  text-align: center;

  padding: 80px 20px;

}



.faq-box {

  max-width: 600px;

  margin: auto;

  background: rgba(0,0,0,.7);

  padding: 30px;

  border-radius: 15px;

  border: 2px solid #00ffae;

}



/* =====================

   ABOUT – FIXED

===================== */



.about-hero {

  background: rgba(0,0,0,0.8);

}



.about-wrapper {

  padding: 80px 20px;

}



.about-card {

  max-width: 900px;

  margin: 0 auto 60px;

  background: rgba(0,0,0,0.75);

  padding: 40px;

  border-radius: 18px;

  border: 2px solid #00ffae;

  box-shadow: 0 0 35px rgba(0,255,174,0.35);

}



.about-card h2 {

  color: #00ffae;

  margin-bottom: 15px;

}



.about-grid {

  max-width: 900px;

  margin: auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

}



.about-mini {

  background: rgba(0,0,0,0.7);

  padding: 30px;

  border-radius: 16px;

  border: 2px solid #00ffae;

  box-shadow: 0 0 25px rgba(0,255,174,0.3);

}



.about-mini h3 {

  color: #00ffae;

  margin-bottom: 10px;

}





/* =====================

   RULES

===================== */

.page-rules .rules-section {

  padding: 80px 20px;

}



.rules-box {

  max-width: 900px;

  margin: auto;

  background: rgba(0,0,0,.75);

  padding: 40px;

  border-radius: 15px;

  border: 2px solid #00ffae;

}



/* =====================

   FOOTER

===================== */

.footer {

  text-align: center;

  padding: 20px;

  background: rgba(0,0,0,.85);

  color: #00ffae;

}



/* =========================

   ABOUT PAGE – ISOLATED

========================= */



.page-about .about-hero {

  background: rgba(0,0,0,0.8);

}



.about-wrapper {

  padding: 90px 20px;

}



/* HLAVNÍ INFO BOX */

.about-card {

  max-width: 950px;

  margin: 0 auto 90px;

  background: rgba(0,0,0,0.75);

  padding: 45px;

  border-radius: 20px;

  border: 2px solid #00ffae;

  box-shadow: 0 0 40px rgba(0,255,174,0.35);

}



.about-card h2 {

  color: #00ffae;

  margin-bottom: 18px;

}



/* SPLIT SEKCE */

.about-split {

  max-width: 1200px;

  margin: 0 auto 120px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}



.about-split.reverse {

  grid-template-columns: 1fr 1fr;

}



.about-text h3 {

  color: #00ffae;

  margin-bottom: 15px;

}



.about-text p {

  opacity: 0.95;

  line-height: 1.7;

}



/* OBRÁZKY */

.about-image img {

  width: 100%;

  border-radius: 20px;

  border: 3px solid #00ffae;

  box-shadow: 0 0 35px rgba(0,255,174,0.45);

}



/* MOBIL */

@media (max-width: 900px) {

  .about-split {

    grid-template-columns: 1fr;

  }

}



/* =========================

   ABOUT PAGE – BOX LAYOUT

========================= */



.page-about .about-hero {

  background: rgba(0,0,0,0.85);

}



/* OBAL STRÁNKY */

.about-wrapper {

  padding: 90px 20px;

}



/* HLAVNÍ OBDELNÍK */

.about-box {

  max-width: 1200px;

  margin: 0 auto;

  background: rgba(0,0,0,0.78);

  border-radius: 22px;

  padding: 50px;

  border: 2px solid #00ffae;

  box-shadow: 0 0 45px rgba(0,255,174,0.35);

}



/* SEKCE */

.about-section {

  margin-bottom: 70px;

}



.about-section h2 {

  color: #00ffae;

  margin-bottom: 15px;

}



/* ŘÁDKY S OBRÁZKEM */

.about-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: center;

  margin-bottom: 90px;

}



.about-row.reverse {

  direction: rtl;

}



.about-row.reverse > * {

  direction: ltr;

}



/* TEXT */

.about-text h3 {

  color: #00ffae;

  margin-bottom: 12px;

}



.about-text p {

  line-height: 1.7;

  opacity: 0.95;

}



/* OBRÁZKY */

.about-image img {

  width: 100%;

  border-radius: 18px;

  border: 3px solid #00ffae;

  box-shadow: 0 0 35px rgba(0,255,174,0.45);

}



/* MOBIL */

@media (max-width: 900px) {

  .about-row {

    grid-template-columns: 1fr;

  }



  .about-row.reverse {

    direction: ltr;

  }

}