:root{
  --white: #ffffff;                 /* "bijela" = navbar bijela */
  --black: #20242b;                 /* "crna" = dropdown tekst boja */
  --black-soft: rgba(32,36,43,.60); /* tagline/hamburger */
  --glass: rgba(255,255,255,.65);
  --glass-2: rgba(255,255,255,.96);
  --hover: #c3aabf;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ font-size:16px; }

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--black);
  background: var(--white);
  text-rendering: optimizeLegibility;
}

a{ color:inherit; }

/* ===== NAVBAR (seamless glass) ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass);
  border: none !important;
  box-shadow: none !important;
}

/* Keep your existing nav layout */
.nav{
  max-width:1120px;
  margin:0 auto;
  padding:0.6rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  position:relative;
}

.nav__menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.4rem;
  margin:0;
  padding:0;
  border:none !important;
  box-shadow:none !important;
}

.nav__menu a{
  text-decoration:none;
  font-size:0.98rem;
  font-weight:700;
  color: var(--black);
  position:relative;
  transition: color 160ms ease, transform 160ms ease;
}

.nav__menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.2rem;
  width:0;
  height:2px;
  background-color: var(--hover);
  transition: width 160ms ease;
}

.nav__menu a:hover,
.nav__menu a:focus-visible{
  color: var(--hover);
  transform: translateY(-1px);
  text-shadow: 0 0 6px rgba(195,170,191,.25);
}

.nav__menu a:hover::after,
.nav__menu a:focus-visible::after{ width:100%; }

.nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  padding:.25rem;
  background:transparent;
  border:none;
  cursor:pointer;
}

.nav__toggle-line{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background-color: var(--black-soft);
}

@media (max-width:960px){
  .nav{ padding:0.5rem 0.75rem; gap:.6rem; }

  .nav__brand{ max-width: calc(100% - 64px); }

  /* hamburger manual top from your working setup */
  .nav__toggle{
    display:flex;
    position:absolute;
    right:1rem;
    top:1.7rem;
  }

  .nav__menu{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    width:100%;
    margin:0;
    padding:0.75rem 0.9rem 1rem;
    background-color: var(--glass-2);
    flex-direction:column;
    gap:0.75rem;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;
    z-index:998;
  }

  .nav__menu.nav__menu--open{ display:flex; }
}

@media (max-width:420px){
  .nav{ padding:0.45rem 0.6rem; }
}

/* ===== HERO ===== */
.hero{
  position:relative;
  padding: clamp(1.75rem, 3.2vw, 3rem) 1rem 2.25rem;
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.hero__bg::before{
  content:"";
  position:absolute;
  left:50%;
  top:-10%;
  width:min(920px, 120vw);
  height: min(560px, 62vh);
  transform: translateX(-50%);
  filter: blur(26px);
  opacity: .55;

  /* "benzinska lokva" feel: light, CSS-only */
  background:
    radial-gradient(45% 60% at 30% 35%, rgba(160, 170, 180, .55), transparent 60%),
    radial-gradient(38% 55% at 70% 35%, rgba(195, 170, 191, .55), transparent 62%),
    radial-gradient(40% 60% at 48% 70%, rgba(150, 160, 175, .45), transparent 62%),
    conic-gradient(from 210deg at 50% 45%,
      rgba(195,170,191,.30),
      rgba(160,170,180,.30),
      rgba(255,255,255,.20),
      rgba(150,160,175,.28),
      rgba(195,170,191,.30)
    );

  border-radius: 999px;
  animation: puddleShift 12s ease-in-out infinite;
}

/* fade-out so it ends before simulator starts */
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 48%,
    rgba(255,255,255,1) 72%,
    rgba(255,255,255,1) 100%
  );
}

@keyframes puddleShift{
  0%   { transform: translateX(-50%) rotate(0deg) scale(1); }
  50%  { transform: translateX(-50%) rotate(10deg) scale(1.03); }
  100% { transform: translateX(-50%) rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .hero__bg::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8%;
  width:min(980px, 128vw);
  height: min(600px, 64vh);
  transform: translateX(-50%);
  filter: blur(18px);
  opacity: .78; /* vidljivije */

  background:
    radial-gradient(50% 65% at 28% 32%, rgba(160, 170, 180, .70), transparent 62%),
    radial-gradient(42% 60% at 72% 34%, rgba(195, 170, 191, .72), transparent 64%),
    radial-gradient(45% 65% at 52% 74%, rgba(150, 160, 175, .62), transparent 66%),
    conic-gradient(from 210deg at 50% 45%,
      rgba(195,170,191,.36),
      rgba(160,170,180,.36),
      rgba(255,255,255,.22),
      rgba(150,160,175,.34),
      rgba(195,170,191,.36)
    );

  border-radius: 999px;
  animation: puddleShift 12s ease-in-out infinite;
}
}

.hero__inner{
  position:relative;
  z-index:1;
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
  padding: 1.1rem 0 1.25rem; /* pomakni cijeli LCP niže */
}

.hero__title{
  margin:0;
  font-size: clamp(2.35rem, 5.2vw, 3.85rem); /* veći */
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--black);
}

.hero__brand{
  font-weight: 700;
}

.hero__tm{
  font-size: .55em;
  vertical-align: super;
  letter-spacing: 0;
}

.hero__sub{
  margin: .85rem auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  color: var(--black-soft);
}

.hero__cta{
  margin: 1.15rem auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: .65rem;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .78rem 1.05rem;
  border-radius: 999px;
  text-decoration:none;
  font-size: .98rem;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
  will-change: transform;
}

.btn:focus-visible{
  outline: 2px solid rgba(195,170,191,.55);
  outline-offset: 3px;
}

.btn:hover{ transform: translateY(-1px); }

.btn--glass{
  color: var(--black);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52));
  border-color: rgba(195,170,191,.35);
  box-shadow: 0 10px 26px rgba(32,36,43,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--dark{
  color: var(--white);
  background: var(--black);
  border-color: rgba(32,36,43,.15);
}

.btn--ghost{
  color: var(--black);
  background: transparent;
  border-color: rgba(32,36,43,.20);
}

/* ===== SIMULATOR ===== */
.sim{
  position:relative;
  z-index:2;
  max-width: 980px;
  margin: 1.15rem auto 0;
  padding: 0 1rem;
}

.sim__shell{
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(32,36,43,.08);
  box-shadow: 0 18px 44px rgba(32,36,43,.10);
}

.sim__chrome{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding: .65rem .85rem;
  background: rgba(255,255,255,.78);
}

.sim__dot{
  width:10px; height:10px;
  border-radius: 999px;
  display:inline-block;
  opacity:.85;
}
.sim__dot--red{ background: rgba(255,95,86,.9); }
.sim__dot--yellow{ background: rgba(255,189,46,.9); }
.sim__dot--green{ background: rgba(39,201,63,.9); }

.sim__title{
  margin-left:.35rem;
  font-size:.92rem;
  color: rgba(32,36,43,.72);
}

.sim__body{
  padding: .9rem .9rem 1rem;
  background: rgba(255,255,255,.62);
}

.sim__chat{
  min-height: 240px;
  max-height: 320px;
  overflow:auto;
  padding: .25rem;
  scrollbar-width: thin;
}

.msg{
  display:flex;
  margin: .55rem 0;
}

.msg--user{ justify-content:flex-end; }

.bubble{
  max-width: 78%;
  padding: .55rem .7rem;
  border-radius: 14px;
  font-size: .97rem;
  line-height: 1.35;
  letter-spacing: 0.005em;
  white-space: pre-wrap;
}

.msg--bot .bubble{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(32,36,43,.08);
  color: rgba(32,36,43,.86);
}

.msg--user .bubble{
  background: rgba(32,36,43,.92);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(32,36,43,.12);
}

/* niche tabs */
.sim__tabs{
  max-width: 860px;
  margin: .75rem auto 0;
  display:flex;
  gap:.5rem;
  flex-wrap: wrap;
  justify-content:center;
}

.sim__tab{
  appearance:none;
  border: 1px solid rgba(32,36,43,.18);
  background: transparent;
  color: rgba(32,36,43,.85);
  border-radius: 999px;
  padding: .5rem .65rem;
  font-size: .88rem;
  line-height:1;
  cursor:pointer;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.sim__tab:hover{ transform: translateY(-1px); }

.sim__tab.is-active{
  background: var(--black);
  color: var(--white);
  border-color: rgba(32,36,43,.15);
}

.sim__note{
  margin: .65rem auto 0;
  max-width: 80ch;
  text-align:center;
  font-size: .86rem;
  color: rgba(32,36,43,.55);
}

@media (max-width: 560px){
  .sim__chat{ min-height: 220px; }
  .bubble{ max-width: 86%; font-size: .95rem; }
}

.below{
  max-width: 1120px;
  margin: 0 auto;
  padding: 3rem 1rem 4rem;
}

.below__title{
  margin:0 0 .5rem;
  font-size: 1.4rem;
  color: rgba(32,36,43,.92);
}

.below__p{
  margin:0;
  color: rgba(32,36,43,.65);
}
.bubblewrap{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  max-width: 78%;
}

.msg--user .bubblewrap{ align-items:flex-end; }
.msg--bot .bubblewrap{ align-items:flex-start; }

.bubblelabel{
  font-size:.78rem;
  line-height:1;
  color: rgba(32,36,43,.55);
  padding-left:.25rem;
}
.sim__channels{
  max-width: 860px;
  margin: .6rem auto 0;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap:.45rem;
  padding: 0 .25rem;
}

.ch{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .42rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(32,36,43,.12);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(32,36,43,.70);
  font-size: .86rem;
  line-height: 1;
  user-select:none;
}

.ch__glyph{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  color: rgba(32,36,43,.62);
  font-weight: 600;
}

.ch__txt{
  font-size: .85rem;
}
/* =========================
   HERO: later start + bigger type
   ========================= */

.hero__inner{
  padding-top: clamp(2.4rem, 6vh, 4.25rem) !important; /* LCP niže */
  padding-bottom: 1.65rem !important;
}

.hero__title{
  font-size: clamp(2.75rem, 6.2vw, 4.35rem) !important; /* veći H1 */
  line-height: 1.04 !important;
}

.hero__sub{
  font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important; /* veći opis */
  max-width: 62ch !important;
  color: rgba(32,36,43,.56) !important; /* soft kao tagline */
}

.hero__cta .btn{
  font-size: 1.08rem !important;       /* veći CTA */
  padding: .92rem 1.2rem !important;
}

/* =========================
   Iridescent puddle: stronger + clearer
   ========================= */

.hero__bg::before{
  opacity: .95 !important;     /* jače */
  filter: blur(14px) !important; /* manje dimmed */
  top: -6% !important;
  width: min(1080px, 140vw) !important;
  height: min(640px, 66vh) !important;

  background:
    radial-gradient(52% 70% at 25% 30%, rgba(160,170,180,.85), transparent 62%),
    radial-gradient(48% 68% at 76% 34%, rgba(195,170,191,.88), transparent 64%),
    radial-gradient(46% 70% at 52% 76%, rgba(150,160,175,.78), transparent 66%),
    conic-gradient(from 210deg at 50% 45%,
      rgba(195,170,191,.52),
      rgba(160,170,180,.50),
      rgba(255,255,255,.28),
      rgba(150,160,175,.48),
      rgba(195,170,191,.52)
    ) !important;
}

/* fade da “stane” prije simulatora */
.hero__bg::after{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 44%,
    rgba(255,255,255,1) 70%,
    rgba(255,255,255,1) 100%
  ) !important;
}

/* =========================
   Buttons: real liquid glass for primary
   ========================= */

.btn--glass{
  color: rgba(32,36,43,.92) !important;
  border-color: rgba(195,170,191,.42) !important;

  /* liquid glass base */
  background:
    radial-gradient(120% 160% at 20% 20%, rgba(255,255,255,.88), rgba(255,255,255,.40)),
    conic-gradient(from 210deg at 50% 50%,
      rgba(195,170,191,.22),
      rgba(160,170,180,.20),
      rgba(255,255,255,.18),
      rgba(150,160,175,.18),
      rgba(195,170,191,.22)
    ) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 14px 36px rgba(32,36,43,.10),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.btn--glass:hover{
  box-shadow:
    0 16px 44px rgba(32,36,43,.12),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* =========================
   Simulator: fix “weird bubbles”
   ========================= */

/* Remove width constraints from wrapper; bubble controls width */
.bubblewrap{
  max-width: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .22rem !important;
}

.msg--user{ justify-content: flex-end !important; }
.msg--bot{ justify-content: flex-start !important; }

/* Bubble width/shape - more natural */
.bubble{
  max-width: min(78%, 640px) !important;
  width: fit-content !important;
  padding: .62rem .8rem !important;
  border-radius: 18px !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

/* On small screens allow slightly wider */
@media (max-width: 560px){
  .bubble{ max-width: 86% !important; }
}

/* Bot label: smaller + softer opacity (like tagline) */
.bubblelabel{
  font-size: .74rem !important;
  color: rgba(32,36,43,.56) !important;
  letter-spacing: .01em !important;
}

/* Make user bubble look less “heavy” / distorted */
.msg--user .bubble{
  border-radius: 18px 18px 6px 18px !important; /* iMessage-ish */
}

.msg--bot .bubble{
  border-radius: 18px 18px 18px 6px !important;
}
.bubble--typing{
  letter-spacing: .25em;
  font-weight: 500;
  opacity: .55;
  animation: typingPulse 1.2s infinite ease-in-out;
}

@keyframes typingPulse{
  0%{ opacity:.35 }
  50%{ opacity:.75 }
  100%{ opacity:.35 }
}
/* =========================
   SPACING: LCP -> SIM + SIM -> BELOW
   ========================= */

.hero__inner{
  padding-bottom: clamp(2.2rem, 5vh, 3.6rem) !important; /* više zraka ispod CTA */
}

/* simulator cijeli blok niže */
.sim{
  margin-top: clamp(1.9rem, 4.5vh, 3.2rem) !important;  /* razmak od LCP-a */
  margin-bottom: clamp(2.2rem, 5vh, 3.8rem) !important; /* razmak prema dolje */
}

/* još malo zraka ispod taba (tabs + channels + note) */
.sim__tabs{ margin-top: 1.05rem !important; }
.sim__channels{ margin-top: .85rem !important; }
.sim__note{ margin-top: .95rem !important; }

.below{
  padding-top: clamp(3.4rem, 6vh, 5.2rem) !important; /* tab -> ostatak sitea */
}

/* =========================
   H1 "Stay closer..." glow
   ========================= */

/* glow samo na prvu frazu */
.hero__title{
  position: relative !important;
}

.hero__title::before{
  content: "Stay closer to your audiences with";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  text-align: center;

  color: rgba(32,36,43,.92);
  filter: blur(10px);
  opacity: .18;
  pointer-events: none;
  z-index: -1;
}

/* dodatni soft glow (ne izgleda neon) */
.hero__title{
  text-shadow:
    0 0 18px rgba(195,170,191,.22),
    0 0 42px rgba(160,170,180,.14) !important;
}

/* =========================
   STRONG liquid glass CTA
   ========================= */

.btn--glass{
  position: relative !important;
  overflow: hidden !important;

  border-color: rgba(195,170,191,.55) !important;

  background:
    radial-gradient(140% 160% at 18% 18%, rgba(255,255,255,.96), rgba(255,255,255,.42)),
    radial-gradient(120% 140% at 82% 24%, rgba(195,170,191,.38), transparent 60%),
    radial-gradient(120% 140% at 36% 90%, rgba(160,170,180,.34), transparent 62%),
    conic-gradient(from 210deg at 50% 50%,
      rgba(195,170,191,.42),
      rgba(160,170,180,.38),
      rgba(255,255,255,.26),
      rgba(150,160,175,.34),
      rgba(195,170,191,.42)
    ) !important;

  box-shadow:
    0 18px 46px rgba(32,36,43,.14),
    inset 0 1px 0 rgba(255,255,255,.60) !important;

  backdrop-filter: blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
}

/* iridescent sheen koji "prođe" preko gumba na hover */
.btn--glass::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(110deg,
      transparent 35%,
      rgba(255,255,255,.36) 50%,
      transparent 65%
    );
  transform: translateX(-40%) rotate(8deg);
  opacity: .0;
  transition: opacity 220ms ease, transform 420ms ease;
  pointer-events:none;
}

.btn--glass:hover::after{
  opacity: .9;
  transform: translateX(25%) rotate(8deg);
}

.btn--glass:hover{
  box-shadow:
    0 22px 58px rgba(32,36,43,.16),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}

/* malo veći radius i "premium" feel */
.btn{
  border-radius: 999px !important;
}
/* =========================
   HERO spacing (even rhythm)
   ========================= */

.hero__title{ margin-bottom: 1.15rem !important; }
.hero__sub{ margin-top: 0 !important; margin-bottom: 1.15rem !important; }
.hero__cta{ margin-top: 0 !important; }

/* =========================
   H1 glow (clean, soft)
   ========================= */

.hero__title{
  text-shadow:
    0 0 18px rgba(195,170,191,.28),
    0 0 54px rgba(160,170,180,.18) !important;
}

/* =========================
   Strong hover sheen on all buttons
   ========================= */

.btn{
  position: relative !important;
  overflow: hidden !important;
}

.btn::after{
  content:"";
  position:absolute;
  inset:-50%;
  background: linear-gradient(110deg,
    transparent 34%,
    rgba(255,255,255,.46) 50%,
    transparent 66%
  );
  transform: translateX(-55%) rotate(10deg);
  opacity: 0;
  transition: opacity 220ms ease, transform 520ms ease;
  pointer-events:none;
}

.btn:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}

/* make dark & ghost also feel premium on hover */
.btn--dark:hover{
  box-shadow: 0 18px 46px rgba(32,36,43,.22) !important;
}

.btn--ghost:hover{
  border-color: rgba(195,170,191,.55) !important;
  box-shadow: 0 14px 34px rgba(32,36,43,.10) !important;
}

/* =========================
   Even stronger liquid glass primary
   ========================= */

.btn--glass{
  border-color: rgba(195,170,191,.62) !important;
  background:
    radial-gradient(140% 160% at 18% 18%, rgba(255,255,255,.98), rgba(255,255,255,.40)),
    radial-gradient(120% 140% at 80% 26%, rgba(195,170,191,.44), transparent 60%),
    radial-gradient(120% 140% at 36% 90%, rgba(160,170,180,.38), transparent 62%),
    conic-gradient(from 210deg at 50% 50%,
      rgba(195,170,191,.54),
      rgba(160,170,180,.46),
      rgba(255,255,255,.30),
      rgba(150,160,175,.40),
      rgba(195,170,191,.54)
    ) !important;
  box-shadow:
    0 22px 58px rgba(32,36,43,.16),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.35) !important;
}

/* =========================
   Supports row styling
   ========================= */

.sim__supports{
  max-width: 860px;
  margin: .95rem auto 0;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: .55rem;
  color: rgba(32,36,43,.62);
}

.sim__supports-label{
  font-size: .9rem;
  color: rgba(32,36,43,.58);
}

.sim__icon{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(32,36,43,.12);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sim__icon svg{
  width: 18px;
  height: 18px;
  fill: rgba(32,36,43,.68);
}

.sim__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 .65rem;
  border-radius: 999px;
  border: 1px solid rgba(32,36,43,.12);
  background: rgba(255,255,255,.62);
  color: rgba(32,36,43,.68);
  font-size: .9rem;
}

.sim__more{
  font-size: .9rem;
  color: rgba(32,36,43,.55);
}
/* ===== remove old channels row if still in DOM somewhere ===== */
.sim__channels{ display:none !important; }

/* ===== supports row (icons + text) ===== */
.sim__supports{
  max-width: 920px;
  margin: 1rem auto 0;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  gap: .55rem;
  color: rgba(32,36,43,.62);
}

.sim__supports-label{
  font-size: .92rem;
  color: rgba(32,36,43,.58);
  margin-right: .15rem;
}

.sim__support{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  height: 34px;
  padding: 0 .75rem;
  border-radius: 999px;
  border: 1px solid rgba(32,36,43,.12);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(32,36,43,.70);
}

.sim__support-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sim__support-ico svg{
  width: 18px;
  height: 18px;
  fill: rgba(32,36,43,.70);
}

.sim__support--pill{
  padding: 0 .9rem;
}

.sim__more{
  font-size: .92rem;
  color: rgba(32,36,43,.55);
  margin-left: .1rem;
}

/* disclaimer restored, soft + wraps nicely */
/* =========================
   Simulator disclaimer spacing
   ========================= */

.sim__disclaimer{
  width: 100%;
  text-align: center;

  /* više vertikalnog prostora */
  margin-top: 1.35rem;
  padding-top: .25rem;

  font-size: .88rem;
  line-height: 1.45;
  color: rgba(32,36,43,.52);
}

/* ===== CLS fix for tabs ===== */
/* No font-weight changes, no border size changes, no transforms */
.sim__tab{
  border: 1px solid rgba(32,36,43,.14) !important;
  background: rgba(255,255,255,.55) !important;
  color: rgba(32,36,43,.70) !important;
  font-weight: 600 !important;              /* constant */
  padding: .55rem .85rem !important;
  border-radius: 999px !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  transform: none !important;               /* kill translate hover */
}

.sim__tab:hover{
  border-color: rgba(195,170,191,.45) !important;
  box-shadow: 0 10px 26px rgba(32,36,43,.08) !important;
}

.sim__tab.is-active{
  background: rgba(32,36,43,.90) !important;
  border-color: rgba(32,36,43,.0) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 34px rgba(32,36,43,.14) !important;
}
/* =========================
   GLOW: "Stay closer" (stronger, premium)
   ========================= */

.hero__title{
  position: relative;
}

.hero__title::before{
  content: "Stay closer to your audiences with";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  text-align: center;

  color: rgba(32,36,43,.95);

  /* jači, ali sofisticiran glow */
  filter: blur(12px);
  opacity: .28;

  pointer-events: none;
  z-index: -1;
}

/* dodatni soft glow layer */
.hero__title{
  text-shadow:
    0 0 22px rgba(195,170,191,.32),
    0 0 56px rgba(160,170,180,.22);
}
/* ===== FIX 1: H1 glow that always shows (no z-index tricks) ===== */
.hero__title{
  /* jači, ali clean glow direktno na tekst */
  text-shadow:
    0 0 18px rgba(195,170,191,.34),
    0 0 48px rgba(160,170,180,.22) !important;
}

/* ugasi pseudo-glow sloj koji ti se gubi iza layouta */
.hero__title::before{
  content: none !important;
}

/* ===== FIX 2: disclaimer spacing + centering (works even as <span>) ===== */
.sim__disclaimer{
  display: block !important;
  width: 100% !important;
  text-align: center !important;

  margin: 1.6rem auto 0 !important;   /* veći razmak iznad */
  padding: 0 .5rem !important;

  font-size: .88rem !important;
  line-height: 1.45 !important;
  color: rgba(32,36,43,.52) !important;
}
/* =========================
   CLS FIX: reserve space for tabs + supports/disclaimer
   ========================= */

/* 1) Tabs: uvijek iste visine (sprječava skakanje kad wrapa) */
.sim__tabs{
  min-height: 96px;              /* desktop: 2 reda tabova */
}

/* 2) Supports row: rezerviraj prostor jer se često wrapa */
.sim__supports{
  min-height: 44px;
}

/* 3) Disclaimer: rezerviraj 2 linije prostora */
.sim__disclaimer{
  min-height: 2.9em;             /* ~2 linije */
  display: block;
}

/* Mobile: tabovi često idu u 3 reda, pa povećaj rezervu */
@media (max-width: 560px){
  .sim__tabs{ min-height: 142px; }  /* 3 reda */
  .sim__supports{ min-height: 84px; } /* 2 reda */
}
/* =========================
   CLS FIX: lock simulator height
   ========================= */

.sim__shell{
  height: 420px;          /* desktop */
}

/* chat zauzima sav preostali prostor */
.sim__body{
  height: calc(100% - 44px); /* 44px = chrome */
  display: flex;
  flex-direction: column;
}

.sim__chat{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
//* =========================
   HERO BG: dispersed, irregular (both sides), no rectangle feel
   ========================= */

.hero__bg::before{
  content:"";
  position:absolute;
  inset:-20% -15% -10% -15%;
  pointer-events:none;

  /* BOJA – nema radiala */
  background:
    linear-gradient(100deg,
      rgba(160,170,180,.55) 0%,
      rgba(195,170,191,.50) 28%,
      rgba(150,160,175,.55) 52%,
      rgba(195,170,191,.48) 74%,
      rgba(160,170,180,.55) 100%
    ),
    conic-gradient(from 180deg at 60% 50%,
      rgba(195,170,191,.18),
      rgba(160,170,180,.18),
      rgba(255,255,255,.12),
      rgba(150,160,175,.18),
      rgba(195,170,191,.18)
    );

  filter: blur(28px);
  opacity: .95;

  animation: washDrift 18s ease-in-out infinite;
}
/* =========================
   Glow for "Stay closer..."
   ========================= */

/* =========================
   VISIBLE glass glow – Stay closer
   ========================= */

.hero__glow{
  position: relative;
  z-index: 2;

  /* stvarni glow na tekstu */
  text-shadow:
    0 0 12px rgba(195,170,191,.45),
    0 0 28px rgba(160,170,180,.35),
    0 0 64px rgba(195,170,191,.25);
}

/* ambient bloom iza teksta */
.hero__glow::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 120%;
  height: 140%;
  transform: translate(-50%, -50%);
  z-index:-1;

  background:
    radial-gradient(ellipse at center,
      rgba(195,170,191,.45) 0%,
      rgba(160,170,180,.35) 35%,
      rgba(255,255,255,0) 70%
    );

  filter: blur(26px);
  opacity: .65;
  pointer-events:none;
}