:root{
  --bg:#ffffff;
  --bg-soft:#f7f4fb;
  --text:#1c1528;
  --muted:#6b6077;
  --line:#e3d9ee;
  --primary:#5b238c;
  --primary-dark:#2a0f46;
  --primary-deep:#170329;
  --accent:#8f56c6;
  --shadow:0 22px 55px rgba(12,32,54,.12);
  --radius:18px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.section{padding:82px 0}
.section.compact{padding:58px 0}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  font-weight:800;
  color:var(--primary);
}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(2.45rem,5vw,5.2rem);
  line-height:.98;
  letter-spacing:-.055em;
  margin-bottom:24px;
}
h2{
  font-size:clamp(2rem,3vw,3.1rem);
  line-height:1.06;
  letter-spacing:-.035em;
  margin-bottom:16px;
}
h3{font-size:1.16rem;line-height:1.25;margin-bottom:10px}
.lead{font-size:1.12rem;color:var(--muted);max-width:720px}
.center{text-align:center}
.center .lead{margin-inline:auto}
mark{background:linear-gradient(180deg,rgba(208,181,255,.14),rgba(208,181,255,.04));color:rgba(216,185,255,.92);padding:0 .08em;border-radius:.16em;text-shadow:0 0 22px rgba(183,130,255,.22),0 1px 0 rgba(255,255,255,.08)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 19px;
  border-radius:9px;
  font-weight:800;
  font-size:.92rem;
  border:1px solid transparent;
  transition:.22s ease;
}
.btn svg{width:20px;height:20px;stroke-width:1.8}
.btn.primary{background:linear-gradient(135deg,#6f2dbd,#3b0f67);color:white;box-shadow:0 12px 28px rgba(91,35,140,.26)}
.btn.secondary{border-color:rgba(255,255,255,.48);color:white;background:rgba(255,255,255,.06)}
.btn.light{border-color:var(--line);color:var(--primary-dark);background:white}
.btn:hover{transform:translateY(-2px)}
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(219,228,239,.8);
}
.nav{
  height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px
}
.logo{display:flex;align-items:center;gap:13px}
.logo img{height:58px;width:auto;object-fit:contain}
.menu{display:flex;align-items:center;gap:30px;font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.035em}
.menu a{color:#15263a}
.menu a:hover{color:var(--primary)}
.mobile-toggle{display:none;background:none;border:0;color:var(--primary-dark)}
.mobile-toggle svg{width:32px;height:32px}
.hero{
  position:relative;min-height:680px;color:white;
  display:flex;align-items:center;
  overflow:hidden;background:var(--primary-deep)
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(23,3,41,.74) 0%,rgba(50,15,78,.45) 35%,rgba(255,255,255,.05) 65%,rgba(255,255,255,.00) 100%),
    url("../img/hero-freya-purple.png") right 420px center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.22)
}
.hero-inner{position:relative;z-index:1;padding:88px 0 48px}
.hero-content{max-width:650px}
.hero p{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:620px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.trust-row{
  position:relative;z-index:2;margin-top:54px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;overflow:hidden;background:rgba(35,8,58,.68);
  backdrop-filter:blur(12px)
}
.trust-item{display:flex;gap:15px;align-items:center;padding:22px;border-right:1px solid rgba(255,255,255,.16)}
.trust-item:last-child{border-right:0}
.trust-item svg{width:42px;height:42px;stroke:#eadcff;stroke-width:1.5;flex:none}
.trust-item strong{display:block;color:white}
.trust-item span{display:block;font-size:.86rem;color:rgba(255,255,255,.72)}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:40px}
.service-card,.benefit,.step,.ref-card{
  background:white;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(16,40,69,.06);
}
.service-card{padding:30px 22px;text-align:center;transition:.22s ease;min-height:240px}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.icon{
  width:76px;height:76px;margin:0 auto 22px;border:1px solid #c8d6e6;border-radius:16px;
  display:grid;place-items:center;color:var(--primary-dark);background:linear-gradient(180deg,#fff,#f7faff)
}
.icon svg{width:46px;height:46px;stroke-width:1.45}
.service-card p,.benefit p,.step p,.ref-card p,.about p{color:var(--muted);font-size:.94rem;margin-bottom:0}
.benefits{background:linear-gradient(180deg,#fff 0%,#f7faff 100%)}
.benefit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:42px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:white}
.benefit{border:0;border-right:1px solid var(--line);box-shadow:none;border-radius:0;padding:30px 18px;text-align:center}
.benefit:last-child{border-right:0}
.benefit svg{width:48px;height:48px;stroke:var(--primary-dark);stroke-width:1.45;margin-bottom:14px}
.process{background:linear-gradient(135deg,#170329 0%,#33105b 55%,#4a1676 100%);color:white}
.process .lead{color:rgba(255,255,255,.72)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:46px}
.step{position:relative;text-align:center;padding:32px 22px;color:white;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.step::after{content:"";position:absolute;top:62px;right:-26px;width:22px;height:1px;background:rgba(255,255,255,.4)}
.step:last-child::after{display:none}
.step-number{width:34px;height:34px;border-radius:999px;background:var(--accent);display:grid;place-items:center;font-weight:900;margin:0 auto 14px}
.step svg{width:54px;height:54px;stroke:#d8e8ff;stroke-width:1.45;margin-bottom:14px}
.step p{color:rgba(255,255,255,.72)}
.references-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:42px}
.ref-card{overflow:hidden}
.ref-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.ref-card div{padding:20px}
.ref-card a{display:inline-flex;gap:8px;align-items:center;margin-top:14px;color:var(--primary);font-weight:800}
.about-contact{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.about-box{display:grid;grid-template-columns:1fr .9fr;gap:28px;align-items:center}
.about-box img{border-radius:18px;box-shadow:var(--shadow)}
.contact-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;padding:28px}
.contact-line{display:flex;align-items:center;gap:14px;margin:14px 0;color:var(--primary-dark);font-weight:700}
.contact-line svg{width:24px;height:24px;stroke:var(--primary);stroke-width:1.6}
.form{display:grid;gap:12px;margin-top:22px}
.form input,.form textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:14px 15px;font:inherit;color:var(--text);background:white
}
.form textarea{min-height:126px;resize:vertical}
.footer{background:#170329;color:white;padding:28px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer img{height:42px;filter:brightness(0) invert(1)}
.footer small{color:rgba(255,255,255,.7)}
.cookie{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:80;
  max-width:660px;background:white;border:1px solid var(--line);box-shadow:var(--shadow);
  border-radius:16px;padding:18px;display:none
}
.cookie.show{display:block}
.cookie p{color:var(--muted);font-size:.92rem;margin-bottom:14px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .benefit-grid{grid-template-columns:repeat(3,1fr)}
  .benefit{border-bottom:1px solid var(--line)}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid rgba(255,255,255,.16)}
}
@media (max-width:820px){
  .nav{height:72px}
  .menu{
    position:absolute;left:0;right:0;top:72px;display:none;flex-direction:column;align-items:flex-start;
    padding:22px 24px;background:white;border-bottom:1px solid var(--line);gap:18px
  }
  .menu.open{display:flex}
  .mobile-toggle{display:block}
  .nav .btn{display:none}
  .hero{min-height:auto}
  .hero-inner{padding:70px 0 36px}
  .trust-row,.steps,.references-grid,.about-contact,.about-box{grid-template-columns:1fr}
  .trust-item{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.16)}
  .trust-item:last-child{border-bottom:0}
  .cards{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr}
  .benefit{border-right:0;border-bottom:1px solid var(--line)}
  .step::after{display:none}
  .footer-inner{flex-direction:column;text-align:center}
}
@media (max-width:520px){
  .container{width:min(100% - 26px,var(--max))}
  .section{padding:58px 0}
  .hero-actions .btn{width:100%;justify-content:center}
  h1{font-size:2.55rem}
}

/* FREYA branding úpravy */
.header .logo img{filter:drop-shadow(0 8px 18px rgba(48,15,80,.10));}
.ref-card img{background:#1a092d;}
.references-grid .ref-card:nth-child(3) img{object-position:center;}
.hero .eyebrow{color:#f0e2ff;}
.hero-content{padding:28px 30px;border-radius:22px;background:linear-gradient(90deg,rgba(23,3,41,.50),rgba(23,3,41,.16),rgba(23,3,41,0));backdrop-filter:blur(1px);}
@media (max-width:820px){.hero::before{background:linear-gradient(180deg,rgba(23,3,41,.82),rgba(23,3,41,.50)),url("../img/hero-freya-purple.png") center/cover no-repeat}.hero-content{padding:0;background:transparent}.hero{color:white}}

/* Finálne úpravy hero a Referencie 3 */
.hero::before{
  background:
    linear-gradient(90deg,rgba(23,3,41,.72) 0%,rgba(50,15,78,.38) 35%,rgba(255,255,255,.02) 68%,rgba(255,255,255,0) 100%),
    url("../img/hero-freya-purple.png") right 420px center/cover no-repeat;
}
.references-grid .ref-card:nth-child(3) img{
  object-position:center center;
}
@media (max-width:820px){
  .hero::before{
    background:
      linear-gradient(180deg,rgba(23,3,41,.86),rgba(23,3,41,.54)),
      url("../img/hero-freya-purple.png") 62% center/cover no-repeat;
  }
}


/* Kótované umiestnenie HERO loga
   Podľa screenshotu: červená poloha x=1076–1629 px, cieľová žltá poloha x=672–1209 px.
   Posun loga: 420 px doľava oproti pravému zarovnaniu. Preto je pozadie na desktope kotvené ako right 420px center.
*/
@media (min-width:821px){
  .hero::before{
    background:
      linear-gradient(90deg,rgba(23,3,41,.72) 0%,rgba(50,15,78,.38) 35%,rgba(255,255,255,.02) 68%,rgba(255,255,255,0) 100%),
      url("../img/hero-freya-purple.png") right 420px center/cover no-repeat;
  }
}


/* Korekcia HERO loga: logo má byť napravo od textu, s pravou hranou vizuálne zarovnanou k pravému okraju bubliny „Záruka kvality“. */

/* Dodatočné doladenie podľa zadania používateľa: HERO logo posunuté o 150 px doľava. */

/* Dodatočné doladenie podľa zadania používateľa: HERO logo posunuté ešte o ďalších 150 px doľava (spolu 300 px). */

/* Dodatočné doladenie podľa zadania používateľa: HERO logo posunuté ešte o ďalších 120 px doľava (spolu 420 px). */


/* Finálne doladenie HERO podľa zadania:
   - logo jemne viac doprava
   - za logom má byť biely podklad s vodotlačou bytovej/elektro inštalácie až po pravý okraj obrazovky
   - odstránený tmavomodrý pás za logom
*/
@media (min-width:821px){
  .hero::before{
    background:
      linear-gradient(90deg,rgba(23,3,41,.72) 0%,rgba(50,15,78,.38) 35%,rgba(255,255,255,.02) 68%,rgba(255,255,255,0) 100%),
      url("../img/hero-freya-purple.png") right 360px center/cover no-repeat;
  }
}
@media (max-width:820px){
  .hero::before{
    background:
      linear-gradient(180deg,rgba(23,3,41,.86),rgba(23,3,41,.54)),
      url("../img/hero-freya-purple.png") 60% center/cover no-repeat;
  }
}

/* Posledná úprava podľa zadania: HERO logo posunuté o 360 px doľava iba cez background-position. */


/* Aktualizácia sekcie O nás */
.about-box > div{max-width:540px}
.about-box img{width:100%;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,#2c2140,#f3eef8);border:1px solid rgba(137,92,196,.18)}


/* O nás: pôvodný text nahradený čitateľným textom priamo vo vodotlačovom obrázku */
.about-box.about-overlay{
  position:relative;
  display:flex;
  align-items:center;
  min-height:440px;
  padding:46px 48px;
  overflow:hidden;
  border:1px solid rgba(75,44,111,.14);
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.76) 72%,rgba(255,255,255,.62) 100%),
    url("../img/about-o-nas-tech.png") right center / cover no-repeat;
  box-shadow:0 18px 46px rgba(31,18,48,.10);
}
.about-box.about-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(103,67,145,.035),rgba(255,255,255,0) 62%);
}
.about-box.about-overlay p{
  position:relative;
  z-index:1;
  max-width:650px;
  margin:0;
  color:#292237;
  font-size:1.02rem;
  line-height:1.82;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.about-box.about-overlay strong{color:#241631;font-weight:900}
@media (max-width:1040px){
  .about-box.about-overlay{min-height:400px;padding:38px 34px;background-position:72% center}
}
@media (max-width:820px){
  .about-box.about-overlay{
    min-height:auto;
    padding:32px 26px;
    background:
      linear-gradient(rgba(255,255,255,.91),rgba(255,255,255,.91)),
      url("../img/about-o-nas-tech.png") center / cover no-repeat;
  }
  .about-box.about-overlay p{font-size:.97rem;line-height:1.7}
}

/* O nás – samostatná bublina v štýle kontaktnej karty */
.about-contact{align-items:stretch}
.about-panel{
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(135deg,#f1e9f8 0%,#f8f4fb 46%,#ffffff 100%);
}
.about-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(117,70,162,.055),rgba(255,255,255,0) 58%);
}
.about-panel > *{position:relative;z-index:1}
.about-panel h2{max-width:620px;margin-bottom:30px}
.about-panel-content{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(190px,.92fr);
  gap:26px;
  align-items:stretch;
  min-height:430px;
}
.about-copy{
  display:flex;
  align-items:flex-start;
  padding-top:4px;
}
.about-copy p{
  margin:0;
  color:#30263b;
  font-size:.98rem;
  line-height:1.9;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
.about-copy strong{color:#241631;font-weight:900}
.about-watermark{
  min-height:100%;
  border-radius:16px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.58) 35%,rgba(255,255,255,.18) 100%),
    linear-gradient(180deg,rgba(232,223,241,.22),rgba(255,255,255,.38)),
    url("../img/about-o-nas-tech.png") 64% center / cover no-repeat;
  filter:grayscale(1) saturate(.22) contrast(.82) brightness(1.13);
  opacity:.72;
  mix-blend-mode:multiply;
}
@media (max-width:1040px){
  .about-panel-content{grid-template-columns:1fr;min-height:auto}
  .about-watermark{min-height:260px;background-position:center}
}
@media (max-width:820px){
  .about-panel{padding:24px}
  .about-panel h2{margin-bottom:22px}
  .about-panel-content{gap:20px}
  .about-copy p{text-align:left;font-size:.96rem;line-height:1.75}
  .about-watermark{min-height:220px}
}


/* Final HERO update: full-width technical banner */
.hero{
  background:#ffffff;
}
.hero::before{
  background:
    linear-gradient(90deg,rgba(23,3,41,.72) 0%,rgba(50,15,78,.38) 32%,rgba(255,255,255,.08) 58%,rgba(255,255,255,0) 78%),
    url("../img/hero-freya-technical.png") center center / cover no-repeat;
}
@media (min-width:821px){
  .hero::before{
    background:
      linear-gradient(90deg,rgba(23,3,41,.72) 0%,rgba(50,15,78,.38) 32%,rgba(255,255,255,.08) 58%,rgba(255,255,255,0) 78%),
      url("../img/hero-freya-technical.png") center center / cover no-repeat;
  }
}
@media (max-width:820px){
  .hero::before{
    background:
      linear-gradient(180deg,rgba(23,3,41,.86),rgba(23,3,41,.54)),
      url("../img/hero-freya-technical.png") 68% center / cover no-repeat;
  }
}


/* Fix requested by user: keep logo position, only remove the dark right strip */
.hero{
  background:#ffffff;
}
@media (min-width:821px){
  .hero::before{
    background:
      linear-gradient(90deg,rgba(23,3,41,.72) 0%,rgba(50,15,78,.38) 35%,rgba(255,255,255,.02) 68%,rgba(255,255,255,0) 100%),
      url("../img/hero-freya-purple.png") right 360px center/cover no-repeat;
  }
}
@media (max-width:820px){
  .hero::before{
    background:
      linear-gradient(180deg,rgba(23,3,41,.86),rgba(23,3,41,.54)),
      url("../img/hero-freya-purple.png") 60% center/cover no-repeat;
  }
}