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

html {
  scroll-behavior: smooth;
}

body {
  background: #090607;
  color: #f4eeee;
  font-family: Arial, Helvetica, sans-serif;
}

/* ZGORNJI MENI */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100%;
  min-height: 82px;
  padding: 14px 38px;

  display: grid;
  grid-template-columns: 110px 1fr 150px;
  align-items: center;

  background: rgba(10, 4, 6, 0.58);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.brand-logo img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.main-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
}

.main-navigation a,
.language-selector button {
  color: #f4eeee;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-decoration: none;
}

.main-navigation a {
  position: relative;
  padding: 8px 0;
}

.main-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background: #a51624;
  transition: width 0.25s ease;
}

.main-navigation a:hover::after {
  width: 100%;
}

.language-selector {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.language-selector a {
    padding: 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.language-selector .active-language {
  color: #c02535;
}

/* HOME */

.hero-section {
  position: relative;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  padding: 130px 30px 72px;

  background-image: url("assets/background-home.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0.06) 45%,
      rgba(0, 0, 0, 0.62) 100%
    );
}

.hero-content {
  position: relative;
  z-index: 2;

  width: min(920px, 100%);
  text-align: center;

  transform: translate(15px, 25px);
}

.hero-content h1 {
  margin-bottom: 14px;

  color: #f4eeee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 8vw, 108px);
  font-weight: 400;
  letter-spacing: 8px;
  line-height: 1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

.profession {
  margin-bottom: 10px;

  color: #b31c2c;
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 5px;
}

.profession span {
  padding: 0 8px;
}

.slogan {
  color: #f4eeee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 3vw, 34px);
  font-style: italic;
  letter-spacing: 1px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9);
}

.scroll-arrow {
  display: inline-block;
  margin-top: 28px;

  color: #f4eeee;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
}

/* ZAČASNE SEKCIJE */

.placeholder-section {
  min-height: 70vh;
  padding: 130px 40px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  background:
    linear-gradient(rgba(15, 5, 8, 0.92), rgba(15, 5, 8, 0.92)),
    url("assets/background-home.png") center / cover fixed;
}

.placeholder-section:nth-of-type(odd) {
  background-color: #0b0809;
}

.placeholder-section h2 {
  color: #f4eeee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: 5px;
}

/* TELEFON IN MANJŠI ZASLONI */

@media (max-width: 980px) {
  .top-bar {
    grid-template-columns: 70px 1fr 125px;
    padding: 12px 20px;
  }

  .main-navigation {
    gap: 16px;
  }

  .main-navigation a {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  .brand-logo img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 760px) {
  .top-bar {
    grid-template-columns: 60px 1fr;
  }

  .main-navigation {
    display: none;
  }

  .language-selector {
    justify-content: flex-end;
  }

  .hero-section {
    padding-bottom: 54px;
    background-position: 58% center;
  }

  .hero-content h1 {
    letter-spacing: 4px;
  }

  .profession {
    letter-spacing: 3px;
  }
}

.hero-title-image {
  display: block;
  width: min(980px, 94%);
  height: 190px;
  margin: 0 auto 8px;
  object-fit: cover;
  object-position: center center;
}

.hero-slogan-image {
  display: block;
  width: min(760px, 84%);
  height: 190px;
  margin: 0 auto;
  object-fit: cover;
  object-position: center center;
}

/* ABOUT */

.about-section {
  position: relative;
  min-height: 100vh;
  padding: 150px 30px 110px;

  background:
    url("assets/background-home.png")
    center center / cover
    fixed no-repeat;
}

.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 1, 3, 0.8);
}

.about-content {
  position: relative;
  z-index: 2;

  width: min(1000px, 100%);
  margin: 0 auto;
  text-align: center;
}

.about-content h2 {
  margin-bottom: 45px;

  color: #efe6df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 400;
  letter-spacing: 7px;
}

.about-main-photo {
  display: block;
  width: min(240px, 55vw);
  aspect-ratio: 1;
  margin: 18px auto 42px;

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid rgba(176, 31, 43, 0.85);
  box-shadow:
    0 0 0 8px rgba(0, 0, 0, 0.28),
    0 18px 60px rgba(0, 0, 0, 0.6);
}

.about-text {
  width: min(740px, 100%);
  margin: 0 auto;

  color: #e6dddd;
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
}

.about-origin{
    width:min(700px,100%);
    margin:90px auto 0;
    padding-top:60px;

    border-top:1px solid rgba(170,30,45,.45);

    text-align:center;
}

.about-old-photo-wrapper {
    width: 105px;
height: 105px;

    margin: 0 auto 24px;

    border-radius: 50%;
    overflow: hidden;

    border: 3px solid rgba(255,255,255,.75);

    box-shadow:
        0 0 18px rgba(180,25,45,.35);

    display: flex;
    justify-content: center;
    align-items: center;
}

.about-old-photo {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 25%;

    display: block;
}

.about-origin h3{

    margin-bottom:18px;

    color:#b01f2b;

    letter-spacing: 4px;

    font-size: 30px;

    font-weight:700;

    text-transform:uppercase;
}

.about-origin p{

    max-width:560px;

    margin:0 auto;

    color:#ddd;

    line-height:1.8;

    font-size:20px;
}

@media (max-width: 700px) {
  .about-section {
    padding: 125px 22px 90px;
    background-attachment: scroll;
  }

  .about-text {
    font-size: 16px;
  }

  .about-origin {
    grid-template-columns: 1fr;
    text-align: center;
  }

  }
  
.about-social{

    margin:50px auto 0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

}

.about-social a{

    width:60px;

    height:60px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.2s ease;

}

.about-social-icon{
    width:52px;
    height:52px;

    object-fit:contain;

    display:block;

    padding:6px;
}

.about-social a:hover{

    transform:translateY(-3px) scale(1.08);

    border:1px solid rgba(255,255,255,.75);

    box-shadow:0 0 18px rgba(180,25,45,.45);

}

/* ===========================
   OFFICIAL LINKS
=========================== */

.official-links-section{
    padding:120px 60px;
    background:
    linear-gradient(rgba(15, 5, 8, 0.92), rgba(15, 5, 8, 0.92)),
    url("assets/background-home.png") center / cover fixed;
}

.official-links-section h2{
    text-align:center;
    color:#c81f35;
    font-size:42px;
    letter-spacing:4px;
    margin-bottom:70px;
}

.official-links-container{
    max-width:1100px;
    margin:0 auto;
}

/* ---------- OFFICIAL LINK CARD ---------- */

.official-link-card{

    display:flex;
    align-items:center;
    gap:40px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:35px;

    margin-bottom:35px;

    transition:.25s ease;

}

.official-link-card:hover{

    border-color:rgba(255,255,255,.35);

    box-shadow:0 0 22px rgba(180,25,45,.35);

    transform:translateY(-3px);

}

.official-link-logo{

    width:120px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.official-link-logo img{

    width:120px;

    height:120px;

    object-fit:contain;

}

.official-link-content{

    flex:1;

}

.official-link-content h3{

    color:#c81f35;

    font-size:30px;

    margin-bottom:15px;

    letter-spacing:1px;

}

.official-link-content p{

    color:#d8d8d8;

    line-height:1.7;

    margin-bottom:25px;

}

.official-link-button{

    display:inline-block;

    padding:14px 30px;

    border:1px solid rgba(255,255,255,.25);

    border-radius:12px;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:.2s ease;

}

.official-link-button:hover{

    background:#b4192d;

    border-color:#ffffff;

    box-shadow:0 0 18px rgba(180,25,45,.45);

}

.official-links-intro{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

    color:#cfcfcf;

    font-size:18px;

    line-height:1.8;

}

.onlyfans-card:hover{
    border-color:rgba(255,255,255,.75);
    box-shadow:0 0 22px rgba(255,255,255,.28);
}

.onlyfans-card .official-link-button:hover{
    background:#ffffff;
    border-color:#ffffff;
    color:#111111;
    box-shadow:0 0 18px rgba(255,255,255,.4);
}

.faphouse-card:hover{

    border-color:#f5a623;

    box-shadow:0 0 22px rgba(245,166,35,.40);

}

.faphouse-card .official-link-button:hover{

    background:#f5a623;

    border-color:#f5a623;

    color:#111111;

    box-shadow:0 0 18px rgba(245,166,35,.45);

}

.faphouse-card .official-link-logo img{

    width:52px;

    height:52px;

}

.youtube-card h3{

    color:#FF0000;

}

.youtube-card:hover{

    border-color:#FF0000;

    box-shadow:0 0 25px rgba(255,0,0,.18);

}

.youtube-card .official-link-button:hover{

    background:#FF0000;

    border-color:#FF0000;

    color:#111111;

    box-shadow:0 0 18px rgba(255,0,0,.45);

}

.media-press-intro{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

    color:#cfcfcf;

    font-size:18px;

    line-height:1.8;

}

.media-category-title{

    margin:70px 0 30px;

    text-align:center;

    color:#b4192d;

    font-size:26px;

    letter-spacing:2px;

}

.media-cards-container{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    margin-bottom:40px;

}

.media-press-footer{

    max-width:800px;

    margin:70px auto 0;

    text-align:center;

    color:#cfcfcf;

    font-size:17px;

    line-height:1.8;

}

.media-press-section{
    min-height:70vh;
    padding:130px 40px;

    display:block;

    background:
        linear-gradient(rgba(15,5,8,.92), rgba(15,5,8,.92)),
        url("assets/background-home.png") center / cover fixed;
}

.media-press-section > h2{
    text-align:center;
    color:#f4eeee;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(32px,5vw,64px);
    font-weight:400;
    letter-spacing:5px;
    margin-bottom:40px;
}

/* ============================
   PODCAST CARDS
============================ */

.media-cards-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    margin-top:50px;
}

.media-card{
    width:250px;
    background:#141111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
}

.media-card:hover{
    transform:translateY(-8px);
    border-color:#c81f35;
    box-shadow:0 0 25px rgba(200,31,53,.25);
}

.media-card-image{
    height:190px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#1b1717;
    color:#666;
    font-size:14px;
    letter-spacing:2px;
}

.media-card-content{
    padding:22px;
    text-align:center;
}

.media-card-content h4{
    color:#f4eeee;
    margin-bottom:22px;
    font-size:22px;
}

.media-card-button{
    display:inline-block;
    padding:12px 34px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    color:white;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.media-card-button:hover{
    background:#c81f35;
    border-color:#c81f35;
}

.media-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ============================
   CONTACT
============================ */

.contact-section{
    min-height:70vh;
    padding:130px 40px 70px;

    text-align:center;

    background:
        linear-gradient(rgba(15,5,8,.94), rgba(8,3,5,.97)),
        url("assets/background-home.png") center / cover fixed;
}

.contact-section > h2{
    margin-bottom:45px;

    color:#f4eeee;

    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(32px,5vw,64px);
    font-weight:400;
    letter-spacing:5px;
}

.contact-intro{
    max-width:850px;
    margin:0 auto 55px;

    color:#cfcfcf;

    font-size:18px;
    line-height:1.8;
}

.contact-email{
    margin-bottom:75px;
}

.contact-email h3{
    margin-bottom:18px;

    color:#b4192d;

    font-size:22px;
    letter-spacing:3px;
}

.contact-email a{
    color:#f4eeee;

    font-size:20px;
    text-decoration:none;

    transition:.25s ease;
}

.contact-email a:hover{
    color:#c81f35;

    text-shadow:0 0 12px rgba(200,31,53,.45);
}

.contact-footer{
    padding-top:35px;

    border-top:1px solid rgba(255,255,255,.12);

    color:#999;

    font-size:14px;
    line-height:1.7;
    letter-spacing:.5px;
}

.contact-footer p{
    margin:3px 0;
}

@media (max-width: 760px) {

    .official-links-section {
        padding: 90px 20px;
    }

    .official-link-card {
        flex-direction: column;
        gap: 24px;
        padding: 28px 20px;
        text-align: center;
    }

    .official-link-content {
        width: 100%;
        min-width: 0;
    }

    .official-link-content p {
    overflow-wrap: anywhere;
}

.hero-slogan-image {
    transform: translateY(-55px);
}

}