/* RESET & GLOBAL */
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: 'Montserrat', sans-serif;
  color:#1F2937;
  background:#F5F7FA;
  line-height:1.6;
}
a { color:inherit; text-decoration:none }
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* VARIABLES */
:root {
  --dark: #111827;
  --light: #F5F7FA;
  --accent: #1CB5E0;
  --accent-dark: #0093E9;
  --white: #FFFFFF;
  --radius: 1rem;
  --shadow-light: rgba(0,0,0,0.08);
  --shadow-strong: rgba(0,0,0,0.12);
}

/* CONTAINERS & SECTIONS */
.container { width:90%; max-width:1200px; margin:0 auto }
section { position:relative; padding:6rem 0 }

/* FADE & SLIDE-IN BASE */
.fade-in, .slide-in-left, .slide-in-right {
  opacity:0;
  transform: translateY(20px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.slide-in-left  { transform: translateX(-30px) }
.slide-in-right { transform: translateX(30px) }
.visible {
  opacity:1 !important;
  transform: translate(0,0) !important;
}


/* ==================================
   1) ZÁKLADNÝ LAYOUT HERO SEKCIE
================================== */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url('../images/hero.png') center/cover no-repeat fixed;
  height: 100vh;
  padding: 0 5%;
  position: relative;
  overflow: hidden;
}


   .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;   /* natiahne vzor širšie, aby čiary nezačínali presne v rohu */
    height: 200%;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0px,   /* veľmi jemná biela čiara */
      rgba(255, 255, 255, 0.05) 1px,   /* 1px hrúbka pruhu */
      transparent 1px,
      transparent 10px                /* 9px priehľadnej medzery */
    );
    transform: translate(-25%, -25%); /* presunie vzor o 25% doľava a hore */
    z-index: 0;       /* pod všetkými ďalšími vrstvami */
    pointer-events: none; /* nech neblokuje klikateľné prvky */
  }

.hero-overlay {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1; /* aby overlay bol nad čiarami, ale pod obsahom */
}

.hero-content,
.hero-image-wrapper {
  position: relative;
  z-index: 2; /* najvrchnejšia vrstva, text aj obrázok budú nad overlayom aj čiarami */
}

/* 1.1) Pomery flex‐itemov: text vs. obrázok */
.hero-content {
  flex: 1 1 60%;    /* textová časť do 60% šírky */
  min-width: 0;     /* zabráni overflow pri zmenšovaní */
}

.hero-image-wrapper {
  flex: 0 0 auto;   /* obrázok si zachová prirodzenú šírku */
  max-width: 40%;   /* ale nikdy nesmie prekročiť 45% */
  /* Nový kód pre mierne posunutie doľava */
  transform: translateX(-10px); /* Skúste túto hodnotu, alebo menšiu/väčšiu */
  /* Ak chcete jemnejší posun alebo percentuálny posun */
  /* transform: translateX(-2%); */ /* Posunie obrázok o 2% šírky prvku doľava */
}

/* ==================================
   2) TYPOGRAFIA A TYPEWRITER KONTAJNER
================================== */
/* 2.1) Hlavný nadpis */
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: #fff;
  line-height: 1.1;
  margin-bottom: .75rem;
}

/* 2.2) Dva pevné riadky nadpisu na desktope */
.hero-title .line1,
.hero-title .line2 {
  display: block;
  width: 100%;
}

/* 2.3) Druhý riadok: statická + dynamická časť pokope */
.hero-title .line2 {
  white-space: nowrap;      /* nerozdelí static+dynamic časť */
  overflow: hidden;
  text-overflow: ellipsis;  /* pridá … pri nedostatku miesta */
}

/* 2.4) Vnorené span-y na druhej línii */
.hero-title .static-text {
  /* odstránime akúkoľvek predchádzajúcu marginu */
  margin-right: 0;
}
.hero-title .type-container {
  /* doladíme, koľko miesta chceme */
  margin-left: 0.15em; 
  display: inline-block;
  vertical-align: baseline;
}

/* 2.5) Blikajúci kurzor */
#typewriter {
  display: inline-block;
}
.cursor {
  display: inline-block;
  width: 4px;
  height: 1em;
  background: #fff;
  margin-left: .2ch;
  vertical-align: bottom;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  0%, 49%   { opacity: 1 }
  50%, 100% { opacity: 0 }
}

/* 2.6) Zmenšenie medzery medzi “ktoré” a dynamickým textom */
.hero-title .static-text {
  margin-right: 0.25ch;
}
.hero-title .type-container {
  margin-left: 0;  /* zrušíme prednastavenú medzeru */
}

/* ==================================
   3) PODNADPIS A TLAČIDLO
================================== */
.hero-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  padding: .75rem 1.75rem;
  border-radius: 50px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(28, 181, 224, 0.3);
  transition: box-shadow .2s, background .3s;
}
.btn-hero:hover {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  box-shadow: 0 6px 24px rgba(28, 181, 224, 0.4);
}

/* ==================================
   4) ILUSTRÁCIA
================================== */
.hero-image-wrapper img {
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}
.hero-image-wrapper img:hover {
  transform: scale(1.05);
}

/* ==================================
   5) FADE-IN ANIMÁCIA
================================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease-out,
              transform .6s ease-out;
}
.visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* ==================================
   6) RESPONZÍVNE ÚPRAVY
================================== */
/* Pridajte toto do vášho CSS */
@media (min-width: 1025px) { /* Platí pre desktopy a väčšie obrazovky */
  .hero-subtitle {
    max-width: 650px; /* Nastavte maximálnu šírku, aby sa text orezal */
    /* Môžete pridať aj margin: 0 auto; ak chcete text centrovať v rámci tejto max-width,
       alebo margin-right: auto; ak ho chcete ponechať zarovnaný vľavo s obmedzenou šírkou */
  }
}

/* 6.1) Tablety / menšie desktopy */
@media (max-width: 1024px) {
  .hero-section {
    flex-direction: column;
    height: auto;
    padding: 4rem 5%;
  }
  .hero-image-wrapper {
    margin-top: 2rem;
    max-width: 80%;
  }
}

/* 6.2) Mobily */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
  }

  /* menší odsuv nadpisu od vrchu */
  .hero-content {
    padding-top: 1.5rem;
  }

  /* druhý riadok: klasické lámanie */
  .hero-title .line2 {
    white-space: normal;
  }

  /* doladenie veľkosti textu */
  .hero-title {
    font-size: clamp(1.8rem, 8vw, 3rem);
    margin-bottom: 0.8rem;
  }
  #typewriter {
    font-size: clamp(1.6rem, 7vw, 2.5rem);
  }
  .hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }
  .btn-hero {
    padding: .6rem 1.5rem;
  }

  /* zmenšenie obrázka */
  .hero-image-wrapper {
    max-width: 30%;
    margin-top: 1rem;
    margin-bottom: -3rem;
  }
}

/* SERVICES SECTION */
.services-section { background:var(--light) }
.section-title {
  text-align:left;
  font-family:'Montserrat',sans-serif;
  font-size:3rem;
  color:var(--dark);
  margin-bottom:3rem;
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:6rem;
  row-gap:3rem;
}
.service-item {
  display:flex;
  align-items:center;
  gap:2rem;
}
.service-item i {
  font-size:3rem;
  color:var(--accent);
  transition: transform .3s;
}
.service-item:hover i {
  transform: translateY(-4px) scale(1.1);
}
.service-text h3 { margin:0 0 .5rem; font-size:1.5rem; color:var(--dark) }
.service-text p  { margin:0; color:#4A5568; font-size:1.05rem }

/* Pre tablety a menšie desktopy (max-width: 1024px) */
@media (max-width: 1024px) {
  .section-title {
    font-size: 2.8rem;
    line-height: 1.25; /* Zväčšená výška riadku */
  }
}

/* Pre mobily (max-width: 768px) */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(2.2rem, 9vw, 2.8rem);
    line-height: 1.2; /* Zväčšená výška riadku pre mobil */
    margin-bottom: 2rem;
  }
}

/* Pre veľmi malé mobily (max-width: 480px) */
@media (max-width: 480px) {
  .section-title {
    font-size: clamp(2rem, 8.5vw, 2.5rem);
    line-height: 1.3; /* Zväčšená výška riadku pre veľmi malé mobily */
    margin-bottom: 1.5rem;
  }
}
/* WHY US SECTION */
.why-section { background:#F9FAFC }
.why-title {
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2rem,5vw,2.75rem);
  color:var(--dark);
  margin-bottom:3rem;
}
.why-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem;
}
.why-card {
  background:#fff;
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  box-shadow:0 6px 20px rgba(0,0,0,0.04);
  text-align:center;
  transition:transform .3s;
}
.why-card:hover { transform: translateY(-5px) scale(1.03) }
.why-card-icon {
  width:4rem;
  height:4rem;
  margin:0 auto 1.25rem;
  background:var(--accent);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.why-card-icon i { color:#fff; font-size:1.5rem }
.why-card h3 { margin:0 0 .75rem; font-size:1.25rem; color:var(--dark) }
.why-card p  { margin:0; color:#4A5568; font-size:.95rem; line-height:1.6 }

/* PORTFOLIO SECTION */
.portfolio-section { background:var(--light) }
.portfolio-container {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:3rem;
}
.portfolio-image img   { width:100%; border-radius:.75rem }
.portfolio-content h2  {
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2rem,5vw,3rem);
  color:var(--dark);
  margin-bottom:1rem;
}
.portfolio-description {
  font-size:1.125rem;
  line-height:1.6;
  color:#374151;
  margin-bottom:2rem;
}

/* FAQ SECTION */
.faq-section { background:#F8FAFC }
.faq-title {
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2rem,5vw,3rem);
  color:var(--dark);
  margin-bottom:2rem;
}
.faq-item { max-width:800px; margin:1rem auto; border-bottom:1px solid #E5E7EB }
.faq-question {
  width:100%; background:none; border:none; text-align:left;
  padding:1rem; font-family:'Montserrat',sans-serif; font-size:1.1rem; color:var(--dark);
  cursor:pointer; position:relative; transition:color .3s;
}
.faq-question::after {
  content:'+'; position:absolute; right:1rem; font-size:1.2rem; transition:transform .3s;
}
.faq-item.open .faq-question::after { transform:rotate(45deg) }
.faq-answer {
  max-height:0; overflow:hidden; padding:0 1rem;
  transition:max-height .4s ease, padding .4s ease;
}
.faq-item.open .faq-answer {
  max-height:200px; padding:1rem;
}
.faq-answer p { margin:0; color:#4B5563; line-height:1.6 }


@media (max-width: 480px) {
  .faq-section {
    padding: 2.5rem 3%;
  }

  .faq-title {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
    margin-bottom: 1.2rem;
  }

  .faq-question {
    font-size: 0.93rem;
    padding-right: 2.2rem;
    padding: 0.7rem 2.2rem 0.7rem 0.8rem;
  }

  .faq-question::after {
    right: 0.8rem;
    font-size: 0.8rem;
  }

  .faq-item.open .faq-answer {
    padding: 0.7rem 0.8rem;
  }

  .faq-answer p {
    font-size: 0.9rem; /* <-- ZMENA: Ešte viac zmenšený text odpovede pre veľmi malé mobily */
    line-height: 1.45; /* <-- ZMENA: Mierne zmenšená line-height */
  }
}
/* RESPONSIVE ADJUSTMENTS */
@media (max-width:1024px) {
  .hero-section { flex-direction:column; height:auto; padding:4rem 5% }
  .hero-image-wrapper { margin-top:2rem; max-width:80% }
  .services-grid { grid-template-columns:1fr }
  .why-grid      { grid-template-columns:1fr 1fr }
  .portfolio-container { grid-template-columns:1fr }
}
@media (max-width:600px) {
  .hero-title {
    /* Trochu väčší priestor: min 1.8rem, ideál 7vw, max 2.8rem */
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.1;
  }
  .hero-image-wrapper img {
    width: 100%;
    max-width: 300px;
    height: auto;

    /* Možnosť A: automaticky zarovnať doprava */
    display: block;       
    margin-left: auto;    
  }
  .hero-type {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }  .why-grid { grid-template-columns:1fr }
}