:root{
  --text:#ebedf3;
  --background:#0f1019;
  --primary:#a4abc9;
  --secondary:#693e56;
  --accent:#a15f61;

  --card:#14162a;
  --card2:#101226;
  --border:rgba(255,255,255,.08);
  --muted:rgba(235,237,243,.75);
  --muted2:rgba(235,237,243,.60);

  --ok:#4ade80;
  --warn:#fbbf24;
  --bad:#fb7185;
  --info:#60a5fa;
}

html,body{height:100%;}

html{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(161,95,97,.18), transparent 55%),
    radial-gradient(1000px 700px at 90% 20%, rgba(105,62,86,.20), transparent 55%),
    radial-gradient(900px 600px at 70% 90%, rgba(96,165,250,.08), transparent 60%),
    var(--background);
  background-attachment: fixed;
}

body{
  background: transparent;
  color:var(--text);
  min-height:100vh;
}

/* subtle grid overlay */
body.hp::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: .06;
  mask-image: radial-gradient(900px 600px at 40% 20%, rgba(0,0,0,1), rgba(0,0,0,0));
}

.muted{ color:var(--muted); }
.muted2{ color:var(--muted2); }
.muted3{ color:var(--muted2); margin-bottom: .5rem;}
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

.hero{ max-width:1100px; }

.hero-visual{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-visual img{
  width:100%;
  height:auto;
  max-width:520px;   /* uprav podľa oka */
  opacity:.98;
  pointer-events:none;
  user-select:none;
}

/* Smooth underline for ALL links (excluding buttons) */
a:not(.btn):not(.cleanlink){
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .18s ease, opacity .18s ease;
}
a:not(.btn):not(.cleanlink):hover{
  background-size: 100% 1px;
  opacity: .95;
}

.cleanlink{
  text-decoration:none;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:.5rem;

  /* override global underline effect */
  background-image:none !important;
  background-size:0 !important;
}
.cleanlink:hover,
.cleanlink:focus,
.cleanlink:active{
  text-decoration:none;
  color:var(--text);
  opacity:1 !important;          /* nech ti hover nezesvetlí */
  background-image:none !important;
}
.cleanlink i{ color:inherit; }

/* Buttons */
.btn{
  border-radius:16px;
  padding:.85rem 1rem;
}
.btn-sm{ border-radius:999px; padding:.45rem .8rem; }
.btn-lg{ border-radius:18px; padding:.9rem 1.05rem; }

.btn-primary{
  background:linear-gradient(90deg, var(--accent), var(--secondary));
  border:0;
  box-shadow:0 10px 30px rgba(161,95,97,.22);
}
.btn-primary:hover{ filter:brightness(1.05); }

.btn-outline-soft{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-outline-soft:hover{ background:rgba(255,255,255,.07); }

/* Inputs */
.inp{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:var(--text)!important;
  border-radius:14px!important;
  padding:.9rem 1rem!important;
}

.divider{ border-color:rgba(255,255,255,.10)!important; }

/* Cards */
.cardx{
  background:linear-gradient(180deg, rgba(20,22,42,.92), rgba(16,18,37,.92));
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  overflow:hidden;
}
.cardx .cardhdr{
  padding:18px 18px 14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.cardx .cardbody{ padding:18px; }

/* extra “modern” glow */
.glowcard{ position:relative; }
.glowcard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  background: linear-gradient(135deg, rgba(161,95,97,.35), rgba(105,62,86,.20), rgba(96,165,250,.18));
  filter: blur(16px);
  opacity:.25;
  pointer-events:none;
  z-index:0;
}
.glowcard > *{ position:relative; z-index:1; }

/* Pill head */
.pill-head{
  display:inline-flex; gap:.55rem; align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-size:.92rem;
  white-space:nowrap;
}

/* Generic pill */
.pill{
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:.92rem;
  white-space:nowrap;
}

.cleanlink{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

/* Language picker */
.lang-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted);
}
.lang-pill select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:transparent;
  border:0;
  color:var(--text);
  font-weight:800;
  padding:0 .2rem 0 .1rem;
  outline:none;
  cursor:pointer;
}
.lang-pill option{ color:#111; }

/* Toasts */
.toast-wrap{
  position:fixed; right:18px; bottom:18px; z-index:10050;
  display:flex; flex-direction:column; gap:10px;
  width:min(420px, calc(100vw - 36px));
  pointer-events:none;
}
.toastx{
  pointer-events:auto;
  background:rgba(20,22,42,.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  display:flex; gap:12px; align-items:flex-start;
  animation: toastIn .18s ease-out;
}
@keyframes toastIn{
  from{ transform:translateY(10px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.toastx .icon{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  flex:0 0 auto;
}
.toastx .title{ font-weight:800; margin:0; line-height:1.1; }
.toastx .msg{ margin:2px 0 0 0; color:var(--muted); font-size:.95rem; line-height:1.35; }
.toastx .close{
  margin-left:auto;
  background:transparent;
  border:0;
  color:rgba(235,237,243,.75);
  padding:4px 6px;
  border-radius:10px;
}
.toastx .close:hover{ background:rgba(255,255,255,.06); }
.t-ok  .icon{ outline:2px solid rgba(74,222,128,.22); }
.t-warn .icon{ outline:2px solid rgba(251,191,36,.22); }
.t-bad .icon{ outline:2px solid rgba(251,113,133,.22); }
.t-info .icon{ outline:2px solid rgba(96,165,250,.22); }

/* Invite block */
.invite-box{
  display:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:14px;
}
.invite-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hintlist li{ margin-bottom:.35rem; }

/* Remember checkbox (clean, right aligned, visually centered) */
label.chkline{
  width:100%;
  display:flex;
  align-items:center;          /* ✅ centrovanie boxu k text bloku */
  justify-content:flex-start;  /* default */
  gap:.6rem;
  padding:0;                   /* bez pozadia/okrajov */
  user-select:none;
  cursor:pointer;
}

label.chkline input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* checkbox square */
label.chkline .box{
  width:20px;
  height:20px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  margin-top:0;                /* ✅ zrušiť posun */
}

label.chkline .box i{
  font-size:.85rem;
  opacity:0;
  transform:scale(.85);
  transition: all .12s ease-out;
}

label.chkline input:checked + .box{
  background:linear-gradient(90deg, var(--accent), var(--secondary));
  border-color:rgba(255,255,255,.18);
}
label.chkline input:checked + .box i{
  opacity:1;
  transform:scale(1);
}

/* text */
label.chkline .lbl{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.15;            /* ✅ kompaktnejšie */
  color:var(--muted2);
}

label.chkline .lbl-sub{
  color:var(--muted2);
  font-size:.92rem;
}

/* RIGHT aligned variant */
label.chkline.chk-right{
  justify-content:flex-end;
  text-align:right;
}

label.chkline.chk-right .lbl{
  align-items:flex-end;
  text-align:right;
}


/* HERO */
.hero2{ padding-top: 6px; }
.hero2-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:26px;
  align-items:start;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(235,237,243,.86);
  font-size:.92rem;
}

.hero2-title{
  margin:.85rem 0 0 0;
  font-weight:950;
  letter-spacing:-.03em;
  font-size: clamp(2.1rem, 3.8vw, 3.25rem);
  line-height:1.02;
}

.hero2-sub{
  margin-top:.8rem;
  font-size:1.06rem;
  max-width: 56ch;
}

/* right visual = no card */
.hero-visual{
  border-radius: 18px;
  overflow:hidden;
  opacity:.98;
}

/* section head */
.section-head{ padding: 2px 2px 6px 2px; }

.section-head .section-title{
  font-weight:950;
  letter-spacing:-.02em;
  font-size:1.25rem;
  margin-top:.15rem;
}

/* FEATURES (full width) */
.features-wide{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.feature-card{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px;
  display:flex;
  gap:12px;
  min-height: 110px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.feature-card.fx:hover{
  transform: translateY(-2px);
  background:rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.11);
}
.feature-ic{
  width:38px; height:38px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.feature-title{
  font-weight:900;
  letter-spacing:-.01em;
  margin-top:1px;
}
.feature-body{
  font-size:.95rem;
  margin-top:6px;
}

/* PRICING TIERS */
.tiers-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch; 
}

.tier-card{
  height: 100%;           /* nech karta vyplní celú výšku bunky */
  display: flex;
  flex-direction: column;
}

/* CTA vždy dole */
.tier-card .btn{
  margin-top: auto;
}


.tier-card{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:20px;
  padding:14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  position:relative;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  height: 100%;  
}
.tier-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.tier-card::after{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width:120px;
  height:120px;
  background: radial-gradient(circle at 30% 30%, rgba(161,95,97,.25), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.tier-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tier-name{
  font-weight:950;
  letter-spacing:-.02em;
}
.tier-tag{
  font-size:.78rem;
  padding:.22rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(235,237,243,.82);
  white-space:nowrap;
}
.tier-tag-accent{
  border-color: rgba(161,95,97,.35);
  background: rgba(161,95,97,.14);
}

.tier-price{
  margin-top:10px;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.tier-eur{
  font-size:1.6rem;
  font-weight:950;
  letter-spacing:-.02em;
}
.tier-per{ font-size:.95rem; }

.tier-list{
  list-style:none;
  padding:0;
  margin:10px 0 12px 0;
}
.tier-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:.45rem 0;
}
.tier-list i{
  margin-top:.2rem;
  color: rgba(74,222,128,.9);
}

.tier-popular{
  border-color: rgba(161,95,97,.28);
  box-shadow: 0 18px 70px rgba(161,95,97,.10);
}

.tier-card .btn{
  margin-top: auto;
}

/* Make pricing columns equal height + login fills height */
@media (min-width: 992px){
  #pricing .row.align-items-stretch > [class*="col-"]{
    display:flex;
  }
  #pricing .row.align-items-stretch .cardx{
    width:100%;
    display:flex;
    flex-direction:column;
  }
  #pricing .row.align-items-stretch .cardx .cardbody{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
}

/* JOIN wide */
.join-wide{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:18px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  position:relative;
  overflow:hidden;
}
.join-wide::before{
  content:"";
  position:absolute;
  inset:-60px auto auto -60px;
  width:220px;
  height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(161,95,97,.22), transparent 65%);
  pointer-events:none;
}
.join-wide-title{
  font-weight:950;
  letter-spacing:-.02em;
  font-size:1.25rem;
}
.join-wide-form{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;            /* nech sa to na mobile láme */
}

/* input nech zaberie celú šírku riadku */
.join-wide-form #joinInput{
  flex: 1 1 auto;
  min-width: 220px;          /* aby sa input úplne nezrútil na úzkom */
}

/* button vždy doprava (na desktop aj keď sa zlomí) */
.join-wide-form #btnGo{
  margin-left:auto;
}
.join-wide-right{
  border-left:1px solid rgba(255,255,255,.08);
  padding-left:16px;
}

/* Footer */
.hp-footer{
  padding-top:22px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap:18px;
}
.footer-title{
  font-weight:900;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{ margin: .45rem 0; }
.footer-bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.92rem;
}

/* Language dropdown (custom, matches pills) */
.langdd{ position:relative; }

.langdd-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  user-select:none;
}
.langdd-btn:hover{ background:rgba(255,255,255,.06); }

.langdd-val{
  font-weight:900;
  letter-spacing:.02em;
}

.langdd-btn .chev{
  font-size:.75rem;
  opacity:.8;
  transition: transform .14s ease;
}
.langdd.open .langdd-btn .chev{ transform: rotate(180deg); }

/* menu */
.langdd-menu{
  position:absolute;
  top: calc(100% + 10px);         /* jemne viac odstup od pillu */
  right: 0;
  min-width: 160px;               /* o kúsok širšie */
  padding:12px;                   /* viac vzduchu okolo itemov */
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255, 255, 255, .04);
  box-shadow:0 18px 70px rgba(0,0,0,.60);
  backdrop-filter: blur(12px);

  display:none;
  z-index:1000;
}
.langdd.open .langdd-menu{ display:block; }

.langdd-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:.75rem .9rem;           /* väčšie “hit area” */
  border-radius:14px;             /* viac premium */
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}

/* 👇 reálna medzera medzi EN a SK */
.langdd-item + .langdd-item{
  margin-top:6px;
}

.langdd-item:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.07);
}

.langdd-item i{
  opacity:0;
  transform: scale(.9);
  transition: opacity .12s ease, transform .12s ease;
}

.langdd-item.is-active{
  background:rgba(161,95,97,.30);
  border-color:rgba(161,95,97,.28);
}
.langdd-item.is-active i{
  opacity:1;
  transform: scale(1);
}

/* HP account (inside login card) */

.hp-account{ width:100%; }

.hp-row{
  display:flex;
  align-items:center;
  gap:14px;
}

/* väčší avatar */
.hp-ava{
  width:72px;
  height:72px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.hp-ava img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hp-ini{
  font-weight:950;
  letter-spacing:.02em;
  color:rgba(235,237,243,.92);
  font-size:1.15rem; /* aby iniciály sedeli k väčšiemu avatru */
}

.hp-name{
  font-weight:950;
  letter-spacing:-.01em;
  line-height:1.1;
  font-size:1.05rem;
}

.hp-email{
  font-size:.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 320px;
}

/* tlačidlá centrované pod profilom */
.hp-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* nech sú pekne veľké, rovnaké */
.hp-actions .btn{
  min-width: 170px;
}

/* center profile block */
.hp-profile{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}

/* avatar bigger + centered */
.hp-ava{
  width:76px;
  height:76px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
  margin-top:2px;
}
.hp-avaimg{ width:100%; height:100%; object-fit:cover; display:block; }

.hp-email{
  max-width: 320px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* buttons center */
.hp-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.hp-actions .btn{ min-width:170px; }

/* morph */
#hpCreateView.hidden{ display:none; }
.hp-composer{
  display:none;
  margin-top: 8px;
}
.hp-composer.show{ display:block; }

/* INLINE composer (pill) */
.hp-inline{
  display:none;
  margin-top: 10px;
  width:100%;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  padding: 4px;
  gap:10px;
  align-items:center;
}
.hp-inline.show{
  display:flex;
}

.hp-inline-inp{
  flex: 1 1 auto;
  border-radius: 999px !important;
  padding: .7rem 1rem !important;
  height: 44px;
}

.hp-inline-btn{
  width:44px;
  height:44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color: rgba(235,237,243,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.hp-inline-btn:hover{ background:rgba(255,255,255,.07); }

.hp-inline-btn.ok{
  background: rgba(161,95,97,.28);
  border-color: rgba(161,95,97,.35);
}
.hp-inline-btn.ok:hover{ filter: brightness(1.05); }

/* celý account box ako stĺpec */
.hp-account-col{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* horný obsah */
.hp-main{
  flex:1 1 auto;
}

/* spodná časť vždy dole */
.hp-footer{
  flex:0 0 auto;
}

/* =====================
   ARTICLE
===================== */

.article-wrap{
  max-width: 900px;
  margin: 0 auto;
}

.article-shell{
  overflow: hidden;
}

.article-top{
  padding: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.article-title{
  margin: 10px 0 0 0;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 950;
  letter-spacing: -.03em;
}

.article-lead{
  margin-top: 12px;
}

.article-body{
  padding: 24px;
}

.article-body h2{
  margin-top: 24px;
  font-weight: 900;
}

.article-body p{
  line-height: 1.65;
}

.article-body ul,
.article-body ol{
  padding-left: 1.2rem;
  color: var(--muted);
}

.article-figure{
  margin: 16px 0 24px;
  text-align: center;
}

.article-figure img{
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.article-callout{
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  gap: 10px;
}

.article-code{
  background: rgba(10,12,24,.7);
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  overflow-x: auto;
}

.article-quote{
  margin-top: 20px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

/* FOOTER – vizuálne centrovanie stĺpcov */
.hp-footer .footer-grid{
  display: flex;
  justify-content: center; /* namiesto space-between */
  gap: 64px;               /* rovnaké rozostupy */
}

/* nech stĺpce nemajú nekonečnú šírku */
.hp-footer .footer-grid > div{
  max-width: 280px;
}

.hp-footer .footer-bottom{
  text-align: center;
}




/* Responsive */
@media (max-width: 992px){
  .hero2-grid{ grid-template-columns: 1fr; }
  .features-wide{ grid-template-columns: 1fr; }
  .tiers-grid{ grid-template-columns: 1fr; }
  .join-wide{ grid-template-columns: 1fr; }
  .join-wide-right{
    border-left:0;
    padding-left:0;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:14px;
  }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* --- FIX: tiers vždy vyplnia výšku ľavého kontajnera (LG+) --- */
@media (min-width: 992px){

  /* ľavý stĺpec (pricing) nech je tiež flex a má 100% výšku riadku */
  #pricing .col-lg-7{
    display:flex;
  }

  /* vnútorný .row (g-3) vľavo spravíme ako stĺpcový flex kontajner */
  #pricing .col-lg-7 > .row.g-3{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0; /* dôležité pri flexe, aby sa obsah vedel zmenšiť */
  }

  /* 1. col-12 je header (nech je prirodzený) */
  /* 2. col-12 (ten s tiers-grid) nech zoberie zvyšok výšky */
  #pricing .col-lg-7 > .row.g-3 > .col-12:nth-child(2){
    flex:1 1 auto;
    display:flex;
    min-height:0;
  }

  /* tiers-grid nech vyplní dostupnú výšku */
  #pricing .tiers-grid{
    flex:1 1 auto;
    min-height:0;
    align-items:stretch;
  }

  /* a samotné karty nech vyplnia bunku */
  #pricing .tier-card{
    height:100%;
  }
}

/* Avatar */
@media (max-width: 520px){
  .hp-row{
    align-items:flex-start;
  }
  .hp-actions .btn{
    width:100%;
    min-width:0;
  }
  .hp-email{
    max-width: 220px;
  }
}

@media (max-width: 900px){
  .hp-footer .footer-grid{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
  }

  .hp-footer .footer-grid > div{
    max-width: 100%;
  }
}

/* väčšia medzera medzi Recavio a Podpora (len desktop) */
@media (min-width: 901px){
  .hp-footer .footer-grid > div:first-child{
    margin-right: 160px;
  }
}

/* mobile: zrušiť posun */
@media (max-width: 900px){
  .hp-footer .footer-grid > div:first-child{
    margin-right: 0;
  }
}


/* =========================
   AUTH (register/login split)
   ========================= */

.auth-page{
  min-height: auto;
  --auth-accent: var(--primary, rgba(255,255,255,.86));
}

/* card wrapper */
.auth-card{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,12,22,.72);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  overflow: hidden;
}

/* split */
.auth-split{
  min-height: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* LEFT */
.auth-left{
  padding: 34px 34px 28px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 520px;
}

/* Back link – bez underline, bez hover efektu */
.auth-back,
.auth-back:link,
.auth-back:visited,
.auth-back:hover,
.auth-back:focus,
.auth-back:active{
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.auth-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  width: fit-content;
}
.auth-back *{
  text-decoration: none !important;
}

/* Head */
.auth-head{ margin-bottom: 18px; }

.auth-title{
  font-size: 42px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
}

.auth-sub{
  margin-top: 10px;
  color: rgba(255,255,255,.60);
}

.auth-form{ margin-top: 10px; }
.auth-field{ margin-bottom: 12px; }

/* =========================
   STANDARD INPUTS
   ========================= */

.auth-inp{
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,110,110,.70); /* default red */
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
}

.auth-inp::placeholder{
  color: rgba(255,255,255,.35);
}

.auth-inp:focus{
  box-shadow: 0 0 0 .22rem rgba(118,86,255,.18);
  border-color: rgba(118,86,255,.35);
}

.auth-inp.has-value{
  border-color: rgba(255,255,255,.16);
}

.auth-inp.is-invalid{
  border-color: rgba(255,110,110,.90) !important;
  box-shadow: 0 0 0 .22rem rgba(255,110,110,.10);
}

/* =========================
   SEGMENTED PASSWORD INPUT
   ========================= */

/* default = neutrál (rovnaký vzhľad ako vyplnený input) */
.auth-seg{
  height: 54px;
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.16);
}

/* invalid – červený */
.auth-seg.is-invalid{
  border-color: rgba(255,110,110,.90) !important;
  box-shadow: 0 0 0 .22rem rgba(255,110,110,.10);
}

/* focus ring */
.auth-seg:focus-within{
  box-shadow: 0 0 0 .22rem rgba(118,86,255,.18);
  border-color: rgba(118,86,255,.35);
}

.auth-seg-inp{
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  outline: 0;
  background: rgba(255,255,255,.03);

  color: rgba(255,255,255,.92);
  font-size: 16px;
}


.auth-seg-inp::placeholder{
  color: rgba(255,255,255,.35);
}

/* Show / Hide */
.auth-seg-btn{
  width: 96px;
  border: 0;

  /* ⬇️ rovnaké pozadie ako input */
  background: rgba(255,255,255,.03);

  color: var(--auth-accent) !important;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none !important;
}

.auth-seg-btn:hover,
.auth-seg-btn:focus,
.auth-seg-btn:active{
  background: rgba(255,255,255,.03);
  color: var(--auth-accent) !important;
  outline: none;
}

/* =========================
   ERRORS
   ========================= */

.auth-errors{
  margin: 10px 0 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,110,110,.55);
  background: rgba(255,110,110,.12);
  color: rgba(255,190,190,.95);
}

.auth-errors-list{
  margin: 0;
  padding-left: 18px;
}
.auth-errors-list li{
  margin: 4px 0;
}

/* =========================
   BUTTON
   ========================= */

.auth-submit{
  height: 54px;
  border-radius: 14px;
  font-weight: 800;
  margin-top: 6px;
}

/* =========================
   LEGAL / ALT
   ========================= */

.auth-legal,
.auth-alt{
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

.auth-legal{ margin-top: 18px; }
.auth-alt{ margin-top: 14px; }

.auth-amp{ padding: 0 2px; }

.auth-link,
.auth-link:link,
.auth-link:visited,
.auth-link:hover,
.auth-link:focus,
.auth-link:active{
  text-decoration: none !important;
  font-weight: 800;
  color: var(--auth-accent) !important;
  outline: none;
}

/* =========================
   RIGHT IMAGE
   ========================= */

.auth-right{
  position: relative;
  background: rgb(2 0 2);
}

.auth-right-pad{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(520px, 100%);
  padding: 26px 0 26px 26px;
}

.auth-right-img{
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 992px){
  .auth-split{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .auth-right{ display:none; }
  .auth-left{ max-width: 620px; }
}

@media (max-width: 520px){
  .auth-left{ padding: 22px; }
  .auth-title{ font-size: 34px; }
}

/* =========================
   AUTH – mobile fixes
   ========================= */

/* skry pravý obrazok skôr (mobil/tablet) */
@media (max-width: 768px){
  .auth-split{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-right{
    display: none;
  }

  /* nech je karta pekne široká a centrovaná */
  .auth-left{
    max-width: 100%;
    padding: 26px 22px 22px;
  }
}

/* extra malé displeje */
@media (max-width: 520px){
  .auth-card{
    border-radius: 18px;
  }

  .auth-left{
    padding: 22px 18px 18px;
  }

  .auth-title{
    font-size: 34px;
  }

  /* aby checkbox a text neodchádzali mimo */
  .chkline{
    max-width: 100%;
  }
}

/* =========================
   AUTH – force full width on small screens
   ========================= */

@media (max-width: 520px){

  /* auth box nech sa natiahne na plnú šírku kontajnera */
  .auth-card{
    width: 100%;
    max-width: 100%;
  }

  .auth-split{
    width: 100%;
    max-width: 100%;
  }

  /* toto je kľúč: na mobile nesmie byť zúžené max-widthom */
  .auth-left{
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 520px){
  .auth-card,
  .auth-split{
    display: block;
  }
}