body, html {
    display: flex;
    align-items:center;
    width: 100%;
    flex-direction:column;
    scroll-behavior: smooth;
}

* {
    font-family: 'Rethink Sans';
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

h1,h2,h3,h4 {
    font-family: 'Plus Jakarta Sans';
}

body > *:not(footer):not(#pravila-programa) {
    max-width: 1600px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 47px 20px;
}

.hero {
    margin-top: 50px;
    display: flex;
    align-items:center;
    width: 100%;
    flex-direction:column;
}

.hero h1 {
    font-size: 42px;
    font-weight: 400;
    text-transform: uppercase;
}

.hero h1 span {
    /* 1. Define the gradient as a background */
  background: linear-gradient(to right, #F37D89 0%, #8B70DA 39%);
  
  /* 2. Clip the background strictly to the text mask */
  background-clip: text;
  -webkit-background-clip: text; /* Required for Safari and older browsers */
  
  /* 3. Make the actual text transparent to let the background shine through */
  color: transparent;
  
  /* Optional: Display inline-block stops the background extending past the word */
  display: inline-block; 
}

.hero p {
    font-size: 24px;
    line-height: 31px;
    margin-bottom: 22px;
    letter-spacing: -1px;
    font-weight: 300;
}

.hero div {
    max-width: 620px;
}

.wolt {
    margin-top: 260px;
    margin-bottom: 260px;
}

.wolt h2 {
    font-size: 42px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    color: #8A8A8A;
    max-width: 1180px;
    margin-bottom: 32px;
}

.wolt h2 span {
    /* 1. Define the gradient as a background */
  background: linear-gradient(to right, #F37D89 0%, #8B70DA 39%);
  
  /* 2. Clip the background strictly to the text mask */
  background-clip: text;
  -webkit-background-clip: text; /* Required for Safari and older browsers */
  
  /* 3. Make the actual text transparent to let the background shine through */
  color: transparent;
  
  /* Optional: Display inline-block stops the background extending past the word */
  display: inline-block; 
}

.wolt > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.wolt .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    padding: 0px 46px 18px;
    background: #F3F3F3;
    border-radius: 10px;
}

.wolt .card .ch {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #8D8D8D;
    width: 100%;
}

.wolt h3 {
    font-size: 35px;
    line-height: 53px;
    font-weight: 300;
    color: #6A6A6A;
}

.prijava {
    margin-bottom: 260px;
}

.prijava h2 {
    font-size: 42px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    color: #8A8A8A;
    max-width: 1180px;
    margin-bottom: 32px;
}

.prijava h2 span {
    /* 1. Define the gradient as a background */
  background: linear-gradient(to right, #F37D89 0%, #8B70DA 39%);
  
  /* 2. Clip the background strictly to the text mask */
  background-clip: text;
  -webkit-background-clip: text; /* Required for Safari and older browsers */
  
  /* 3. Make the actual text transparent to let the background shine through */
  color: transparent;
  
  /* Optional: Display inline-block stops the background extending past the word */
  display: inline-block; 
}

.prijava > div {
    display: grid;
    grid-template-columns: 7fr 6fr 1fr;
    align-items: flex-end;
    gap: 24px;
    width: 100%;
}

.prijava .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    height: 100%;
}

.prijava .cards .card {
    background: #F3F3F3;
    padding: 16px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    border-radius: 10px;
    position: relative;
}

.prijava h3 {
    font-size: 27px;
    line-height: 53px;
    font-weight: 400;
    color: #444444;
}

.prijava p {
    color: #6A6A6A;
    font-size: 17px;
    line-height: 22px;
    font-weight: 300;
}

.prijava .cards span {
    font-size: 27px;
    line-height: 43px;
    color: #8B70DA;
    padding: 9px 16px;
    border-top-left-radius: 10px;
    border: 1px solid #8B70DA;
    position: absolute;
    left: 0;
    top: 0;
}

.pricing {
    display: grid;
    grid-template-columns: 7fr 7fr;
    gap: 24px;
    align-items: center;
}

.pricing h2 {
    font-size: 42px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    color: #8A8A8A;
    max-width: 608px;
}

.pricing h2 span {
    /* 1. Define the gradient as a background */
  background: linear-gradient(to right, #F37D89 0%, #8B70DA 39%);
  
  /* 2. Clip the background strictly to the text mask */
  background-clip: text;
  -webkit-background-clip: text; /* Required for Safari and older browsers */
  
  /* 3. Make the actual text transparent to let the background shine through */
  color: transparent;
  
  /* Optional: Display inline-block stops the background extending past the word */
  display: inline-block; 
}

.pricing .cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;


}

.pricing .card {
    padding: 13px 22px;
    border-radius: 10px;
}

.pricing h3 {
    font-size: 27px;
    line-height: 53px;
    font-weight: 400;
}

.pricing h4 {
    margin-top: 28px;
    font-size: 46px;
    line-height: 57px;
    color: #444444;
    font-weight: 400;
}

.pricing p {
    font-size: 17px;
    line-height: 22px;
    color: #6A6A6A;
    font-weight: 300;
}

.payout {
    margin: 265px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payout h2 {
    font-size: 42px;
    line-height: 48px;
    color: #46356A;
    margin-top: 21px;
    margin-bottom: 16px;
    font-weight: 400;
}

.payout > p {
    font-size: 17px;
    line-height: 22px;
    color: #6A6A6A;
    margin-bottom: 32px;
    font-weight: 300;
    max-width: 430px;
    text-align: center;
}

.payout .cards {
    gap: 24px;
    display: grid;
    grid-template-columns: 3fr 5fr;
    align-items: center;
}

.payout .card {
    padding: 26px 29px;
    background-color: #F3F3F3;
    border-radius: 10px;
}

.payout .card svg {
    margin-bottom: 35px;
}

.payout h3 {
    margin-bottom: 7px;
    font-size: 21px;
    line-height: 25px;
    color: #434343;
    font-weight: 600;
    text-transform: uppercase;
}

.payout .card p {
    color: #6A6A6A;
    line-height: 22px;
    font-size: 17px;
    font-weight: 300;
}

.payout .card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payout .card span {
    width: 1px;
    height: 45px;
    background-color: #CFCECE;
}

.vehicle {
    padding: 73px 64px;
    border-radius: 10px;
    background-color: #8B70DA;
    position: relative;
}

.vehicle {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.vehicle h2 {
    margin: 16px 0 32px;
    font-size: 42px;
    line-height: 48px;
    color: #FFF;
    font-weight: 400;
}

.vehicle p {
    font-size: 17px;
    line-height: 22px;
    color: #FFFFFF;
    max-width: 612px;
    z-index: 2;
}

.vehicle svg:first-child {
    position: absolute;
    bottom: 0;
    right: 0;
}

.vehicle img {
    position: absolute;
    bottom: 0;
    right: 20px;
}

.bonus {
    margin: 265px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonus h2 {
    font-size: 42px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    color: #8A8A8A;
    max-width: 608px;
    margin: 23px 0 16px;
}

.bonus h2 span {
    font-size: 50px;
    /* 1. Define the gradient as a background */
  background: linear-gradient(to right, #F37D89 0%, #8B70DA 39%);
  
  /* 2. Clip the background strictly to the text mask */
  background-clip: text;
  -webkit-background-clip: text; /* Required for Safari and older browsers */
  
  /* 3. Make the actual text transparent to let the background shine through */
  color: transparent;
  
  /* Optional: Display inline-block stops the background extending past the word */
  display: inline-block; 
}

.bonus p {
    color: #6A6A6A;
    max-width: 564px;
    margin-bottom: 32px;
    text-align: center;
}

.faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 265px;
}

.faq h2 {
    font-size: 42px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: 0;
    color: #8A8A8A;
}

.faqinner{
  --faq-width:        827px;
  --faq-q-color:      #6A6A6A;
  --faq-q-open:       #444444;
  --faq-a-color:      #6A6A6A;
  --faq-rule:         #ACACAC;
  --faq-accent:       #8B70DA;
  --faq-pad:          28px;   /* top / bottom padding of a row */
  --faq-gap:          20px;   /* question to answer            */
  --faq-icon:         32px;
  --faq-icon-gap:     24px;

  width: 100%;
  max-width: var(--faq-width);
  margin: 0 auto;
  font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.faqinner .faq__item{
  border-bottom: 0.5px solid var(--faq-rule);
}

.faqinner .faq__item:last-child{
  border-bottom: 0;
}

/* Question row */
.faqinner .faq__q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faq-icon-gap);
  margin: 0;
  padding: var(--faq-pad) 0;
  background: none;
  border: 0;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 21px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
  color: var(--faq-q-color);
  transition: color 200ms ease, padding-bottom 320ms cubic-bezier(.4,0,.2,1);
}

.faqinner .faq__q:hover{ color: var(--faq-q-open); }

.faqinner .faq__q:focus-visible{
  outline: 2px solid var(--faq-accent);
  outline-offset: 4px;
}

.faqinner .faq__item.is-open .faq__q{
  font-weight: 500;
  color: var(--faq-q-open);
  padding-bottom: var(--faq-gap);
}

.faqinner .faq__q-text{ flex: 1 1 auto; }

/* Icon */
.faqinner .faq__icon{
  flex: 0 0 auto;
  width: var(--faq-icon);
  height: var(--faq-icon);
  display: block;
}

.faqinner .faq__icon-bar{
  transform-origin: 16px 16px;
  transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
}

.faqinner .faq__item.is-open .faq__icon-bar--v{
  transform: rotate(90deg);
  opacity: 0;
}

/* Answer panel */
.faqinner .faq__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(.4,0,.2,1);
}

.faqinner .faq__item.is-open .faq__panel{
  grid-template-rows: 1fr;
}

.faqinner .faq__panel-inner{
  overflow: hidden;
  min-height: 0;
}

.faqinner .faq__a{
  margin: 0;
  padding-bottom: var(--faq-pad);
  max-width: 720px;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--faq-a-color);
}

@media (max-width: 640px){
  .faqinner{
    --faq-pad: 20px;
    --faq-gap: 14px;
    --faq-icon: 28px;
    --faq-icon-gap: 16px;
  }
  .faqinner .faq__q{ font-size: 18px; line-height: 24px; }
  .faqinner .faq__a{ font-size: 16px; line-height: 22px; }
}

@media (prefers-reduced-motion: reduce){
  .faqinner .faq__q,
  .faqinner .faq__panel,
  .faqinner .faq__icon-bar{ transition: none; }
}

#prijava{
  --pr-max:        940px;
  --pr-title:      #3E2A6E;
  --pr-text:       #333333;
  --pr-muted:      #6A6A6A;
  --pr-placeholder:#A2A2AE;
  --pr-field-bg:   #F1F0F6;
  --pr-field-h:    54px;
  --pr-accent:     #8B70DA;
  --pr-accent-2:   #E0578A;
  --pr-consent:    #7B5FD4;
  --pr-error:      #D9445F;
  --pr-idle:       #E4E4EC;
  --pr-gap-x:      40px;
  --pr-gap-y:      32px;

  display: block !important;
  float: none !important;
  width: 100%;
  max-width: var(--pr-max);
  margin: 0 auto;
  padding: 0;
  font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: var(--pr-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

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

/* Blokira flex/grid koji builder nameće na direktnu decu */
#prijava > div,
#prijava > form{
  display: block;
  width: 100%;
  max-width: none;
  float: none !important;
  flex: none !important;
}

/* --- Head ---------------------------------------------------------------- */

#prijava .pr__head{
  display: block !important;
  width: 100%;
  text-align: center;
}

#prijava .pr__title{
  display: block !important;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  font-family: inherit;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pr-title);
  text-align: center;
}

#prijava .pr__sub{
  display: block !important;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pr-muted);
  text-align: center;
}

/* --- Stepper ------------------------------------------------------------- */

#prijava .pr__steps{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 40px 0 64px;
}

#prijava .pr__step{
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 0 0 auto;
  width: 150px;
  max-width: 150px;
}

#prijava .pr__step-dot{
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pr-idle);
  color: var(--pr-muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  transition: background 300ms ease, color 300ms ease;
}

#prijava .pr__step.is-active .pr__step-dot{
  background: linear-gradient(135deg, var(--pr-accent) 0%, var(--pr-accent-2) 100%);
  color: #FFFFFF;
}

#prijava .pr__step-label{
  display: block !important;
  width: 100%;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--pr-muted);
  text-align: center;
  transition: color 300ms ease;
}

#prijava .pr__step.is-active .pr__step-label{ color: var(--pr-accent-2); }

#prijava .pr__step-line{
  display: block !important;
  flex: 0 0 auto;
  width: 120px;
  height: 2px;
  margin-top: 21px;
  background: var(--pr-idle);
}

/* --- Fields -------------------------------------------------------------- */

#prijava .pr__grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pr-gap-y) var(--pr-gap-x);
  width: 100%;
}

#prijava .pr__field{
  display: block !important;
  width: 100%;
  min-width: 0;
}

#prijava .pr__field--half{
  margin-top: var(--pr-gap-y);
  max-width: calc((100% - var(--pr-gap-x)) / 2);
}

#prijava .pr__label{
  display: block !important;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--pr-text);
  text-align: left;
}

#prijava .pr__label em{
  font-style: italic;
  color: var(--pr-muted);
}

#prijava .pr__input{
  display: block !important;
  width: 100%;
  height: var(--pr-field-h);
  min-height: var(--pr-field-h);
  margin: 0;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--pr-field-bg);
  box-shadow: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: normal;
  color: var(--pr-text);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}

#prijava .pr__input::placeholder{ color: var(--pr-placeholder); opacity: 1; }

#prijava .pr__input:focus{
  border-color: var(--pr-accent);
  background: #FFFFFF;
  box-shadow: none;
}

#prijava .pr__input.has-error{ border-color: var(--pr-error); }

#prijava .pr__select-wrap{
  display: block !important;
  position: relative;
  width: 100%;
}

#prijava .pr__select{
  padding-right: 52px;
  cursor: pointer;
  background-image: none;
}

#prijava .pr__select:invalid{ color: var(--pr-placeholder); }

#prijava .pr__caret{
  display: block !important;
  position: absolute;
  right: 22px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- Radios -------------------------------------------------------------- */

#prijava .pr__fieldset{
  display: block !important;
  width: 100%;
  margin: var(--pr-gap-y) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

#prijava .pr__fieldset > legend.pr__label{
  float: none;
  width: 100%;
}

#prijava .pr__radios{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 4px;
}

#prijava .pr__radio{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--pr-muted);
  cursor: pointer;
  transition: color 180ms ease;
}

#prijava .pr__radio input[type="radio"]{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  appearance: auto;
  -webkit-appearance: radio;
  accent-color: var(--pr-accent);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

#prijava .pr__radio:has(input:checked){ color: var(--pr-text); }

/* --- Hint / consent ------------------------------------------------------ */

#prijava .pr__hint{
  display: block !important;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--pr-muted);
}

#prijava .pr__consent{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 44px 0 0;
  font-size: 19px;
  line-height: 1.4;
  color: var(--pr-consent);
  cursor: pointer;
}

#prijava .pr__consent input[type="checkbox"]{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 4px 0 0;
  padding: 0;
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--pr-accent);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* --- Errors -------------------------------------------------------------- */

#prijava .pr__error{
  display: none;
  width: 100%;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--pr-error);
}

#prijava .pr__error.is-visible{ display: block !important; }

/* --- Submit -------------------------------------------------------------- */

#prijava .pr__actions{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 52px;
}

#prijava .pr__submit{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 260px;
  height: 58px;
  padding: 0 40px;
  border: 0;
  border-radius: 999px;
  background: var(--pr-accent);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 120ms ease, opacity 200ms ease;
}

#prijava .pr__submit:hover{ background: #7B5FD4; }
#prijava .pr__submit:active{ transform: translateY(1px); }

#prijava .pr__submit:focus-visible{
  outline: 2px solid var(--pr-accent-2);
  outline-offset: 3px;
}

#prijava .pr__submit.is-loading{
  opacity: 0.6;
  pointer-events: none;
}

/* --- Korak 2 ------------------------------------------------------------- */

#prijava .pr__done{
  display: block !important;
  width: 100%;
  padding: 24px 0 40px;
  text-align: center;
  animation: prFadeIn 420ms cubic-bezier(.4,0,.2,1) both;
}

#prijava .pr__done[hidden]{ display: none !important; }

#prijava .pr__done-icon{
  display: block !important;
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
}

#prijava .pr__done-icon svg{
  display: block !important;
  width: 100%;
  height: 100%;
}

#prijava .pr__done-title{
  display: block !important;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  font-family: inherit;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--pr-title);
  text-align: center;
  outline: none;
}

#prijava .pr__done-text{
  display: block !important;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--pr-muted);
  text-align: center;
}

@keyframes prFadeIn{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 860px){
  #prijava .pr__radios{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  #prijava{
    --pr-gap-x: 0px;
    --pr-gap-y: 24px;
    --pr-field-h: 50px;
  }
  #prijava .pr__title{ font-size: 30px; }
  #prijava .pr__sub{ font-size: 17px; }
  #prijava .pr__label{ font-size: 18px; }
  #prijava .pr__grid{ grid-template-columns: 1fr; }
  #prijava .pr__field--half{ max-width: 100%; }
  #prijava .pr__radios{ grid-template-columns: 1fr; gap: 12px; }
  #prijava .pr__consent{ font-size: 17px; margin-top: 32px; }
  #prijava .pr__steps{ margin: 32px 0 44px; }
  #prijava .pr__step{ width: 110px; max-width: 110px; }
  #prijava .pr__step-line{ width: 60px; }
  #prijava .pr__step-label{ font-size: 15px; }
  #prijava .pr__submit{ width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce){
  #prijava .pr__done{ animation: none; }
  #prijava .pr__submit,
  #prijava .pr__input,
  #prijava .pr__step-dot,
  #prijava .pr__step-label{ transition: none; }
}

footer {
    margin-top: 265px;
    background-color: #46356A;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

footer > div {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 55px;
    padding: 82px 20px;

    max-width: 1600px;
    width: 100%;
}

footer > div > div {
    display: flex;
    gap: 50px;
}

footer > div > div a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 30px;
    color: #FFFFFF;
    text-decoration: none;
}


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

:root{
  --section-gap: clamp(90px, 14vw, 265px);
  --h2: clamp(26px, 4vw, 42px);
  --h2-lh: 1.15;
}

html{ overflow-x: hidden; }

img{
  max-width: 100%;
  height: auto;
}

/* SVG dugmad i logotipi moraju da se skaliraju, ikonice ne diramo */
header svg,
.hero a svg,
.bonus > a svg,
.prijava > div > a svg,
footer > div > svg{
  max-width: 100%;
  height: auto;
}

/* --- Vertikalni ritam ---------------------------------------------------- */

.wolt{
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

.prijava:not(#prijava){ margin-bottom: var(--section-gap); }
.payout{ margin: var(--section-gap) 0; }
.bonus{ margin: var(--section-gap) 0; }
.faq{ margin-bottom: var(--section-gap); }
footer{ margin-top: var(--section-gap); }

/* --- Fluidna tipografija ------------------------------------------------- */

.wolt h2,
.prijava:not(#prijava) h2,
.pricing h2,
.payout h2,
.vehicle h2,
.bonus h2,
.faq h2{
  font-size: var(--h2);
  line-height: var(--h2-lh);
}

.hero h1{ font-size: clamp(28px, 5.2vw, 42px); line-height: 1.12; }
.hero p{ font-size: clamp(17px, 2vw, 24px); line-height: 1.35; letter-spacing: -0.3px; }
.wolt h3{ font-size: clamp(26px, 3vw, 35px); line-height: 1.3; }
.prijava:not(#prijava) h3{ font-size: clamp(21px, 2.2vw, 27px); line-height: 1.35; }
.pricing h3{ font-size: clamp(21px, 2.2vw, 27px); line-height: 1.35; }
.pricing h4{ font-size: clamp(32px, 4.4vw, 46px); line-height: 1.2; }
.prijava:not(#prijava) .cards span{ font-size: clamp(20px, 2.2vw, 27px); line-height: 1.4; }
.bonus h2 span{ font-size: clamp(30px, 5vw, 50px); }

/* --- Header -------------------------------------------------------------- */

header{
  gap: 16px;
  padding: clamp(20px, 3vw, 47px) 20px;
}

header > svg{ width: clamp(120px, 14vw, 169px); flex: 0 0 auto; }
header a{ display: flex; min-width: 0; }
header a svg{ width: clamp(165px, 22vw, 239px); flex: 0 0 auto; }

/* --- 1200px -------------------------------------------------------------- */

@media (max-width: 1200px){
  .vehicle{ padding: 56px 40px; }
  .vehicle svg:first-child{ width: 60%; height: auto; }
}

/* --- 992px: glavno prelamanje u jednu kolonu ------------------------------ */

@media (max-width: 992px){

  .prijava:not(#prijava) > div{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .prijava:not(#prijava) > div > a{
    justify-self: start;
    display: inline-flex;
  }

  .pricing{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pricing h2{ max-width: none; }

  .faq{ grid-template-columns: 1fr; }
  .faq .left{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .faqinner{ margin: 0; max-width: none; }

  /* Vehicle: slika ide ispod teksta, dekorativni oblik se sklanja */
  .vehicle{
    padding: 40px 24px;
    overflow: hidden;
  }
  .vehicle svg:first-child{ display: none; }
  .vehicle img{
    position: static;
    order: 5;
    width: 100%;
    max-width: 420px;
    margin: 32px auto 0;
  }
  .vehicle p{ max-width: none; }
}

/* --- 768px --------------------------------------------------------------- */

@media (max-width: 768px){

  .wolt > div{ grid-template-columns: 1fr; }
  .wolt .card{ padding: 0 24px 18px; gap: 18px; }

  .payout .cards{ grid-template-columns: 1fr; }
  .payout .card{ padding: 22px 20px; }
  .payout .card svg{ margin-bottom: 24px; }

  footer > div{
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 48px 20px;
  }
  footer > div > div{
    flex-direction: column;
    gap: 16px;
  }
}

/* --- 640px --------------------------------------------------------------- */

@media (max-width: 640px){

  body > *:not(footer){
    padding-left: 16px;
    padding-right: 16px;
  }

  header{ padding: 16px; }
  header > svg{ width: 118px; }
  header a svg{ width: 150px; }

  .prijava:not(#prijava) .cards{ grid-template-columns: 1fr; }
  .prijava:not(#prijava) .cards .card{ padding: 44px 20px 16px; }
  .prijava:not(#prijava) .cards span{ padding: 6px 14px; }

  .pricing .cards{ grid-template-columns: 1fr; }
  .pricing .card{ padding: 16px 18px; }

  .bonus p,
  .payout > p{ max-width: none; }
}

/* --- 480px --------------------------------------------------------------- */

@media (max-width: 480px){

  header{ flex-wrap: wrap; justify-content: center; gap: 14px; }
  header > svg{ width: 140px; }
  header a svg{ width: 100%; max-width: 300px; }

  .payout .card > div{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .payout .card span{
    width: 100%;
    height: 1px;
  }

  .vehicle{ padding: 32px 18px; }
  .vehicle h2{ margin: 12px 0 20px; }
}

/* --- Forma: dopuna postojećim breakpointima ------------------------------ */

@media (max-width: 768px){
  #prijava .pr__steps{ margin: 32px 0 48px; flex-direction: column !important; align-items: center !important; }
  #prijava .pr__step{ width: 130px; max-width: 130px; }
  #prijava .pr__step-line{ width: 80px;  }
  .pr__step-line { margin-bottom: 21px; )
}

@media (max-width: 1240px) {
    .prijava .cards {
        grid-template-columns: 1fr;

    }

    .prijava .cards .card {
        padding-top: 90px;
    }
}
@media (max-width: 740px) {
    .prijava .cards {
        grid-template-columns: 1fr;

    }

    .prijava .cards .card {
        padding-top: 50px !important;
        gap: 6px;
    }
    .prijava:not(#prijava) .cards {
        gap: 16px;
    }
    .prijava:not(#prijava) .cards span {
        padding: 6px 8px;
    }
    .prijava:not(#prijava) > div {
        gap:12px;
    }

    #prijava {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero {
        margin-top: 100px;
    }

    .prijava, .pricing, .payout, .faq, #prijava, footer {
        margin-top: 100px;
    }

    footer {
        margin-top: 160px;
    }

    .vehicle {
        border-radius: 0;
        padding-bottom: 0;
    }
    
}

#prijava .pr__hp{
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


#pravila-programa{
  --pv-naslov:  #46356A;
  --pv-tekst:   #6A6A6A;
  --pv-akcent1: #F37D89;
  --pv-akcent2: #8B70DA;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

#pravila-programa[hidden]{ display: none !important; }

#pravila-programa .pravila__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(30, 22, 50, 0.55);
  animation: pvFade 220ms ease both;
}

#pravila-programa .pravila__box{
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(30, 22, 50, 0.28);
  animation: pvUp 260ms cubic-bezier(.4,0,.2,1) both;
  overflow: hidden;
}

#pravila-programa .pravila__scroll{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px) clamp(40px, 5vw, 64px);
}

#pravila-programa .pravila__naslov{
  margin: 0 0 44px;
  padding-right: 56px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--pv-naslov);
  outline: none;
}

#pravila-programa .pravila__stavka{ margin-bottom: 32px; }
#pravila-programa .pravila__stavka:last-child{ margin-bottom: 0; }

#pravila-programa .pravila__stavka h3{
  margin: 0 0 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 400;
  line-height: 1.25;

  background: linear-gradient(to right, var(--pv-akcent1) 0%, var(--pv-akcent2) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}

#pravila-programa .pravila__stavka p{
  margin: 0;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--pv-tekst);
}

/* Dugme za zatvaranje */
#pravila-programa .pravila__close{
  position: absolute;
  top: clamp(16px, 2.5vw, 28px);
  right: clamp(16px, 2.5vw, 28px);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F1F0F6;
  color: #8A8A8A;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

#pravila-programa .pravila__close:hover{
  background: #E4E1EF;
  color: #46356A;
}

#pravila-programa .pravila__close:focus-visible{
  outline: 2px solid var(--pv-akcent2);
  outline-offset: 2px;
}

#pravila-programa .pravila__close svg{
  width: 22px;
  height: 22px;
  display: block;
}

/* Blokira skrol pozadine dok je modal otvoren */
body.pravila-open{ overflow: hidden; }

@keyframes pvFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes pvUp{
  from{ opacity: 0; transform: translateY(20px) scale(.98); }
  to  { opacity: 1; transform: none; }
}

@media (max-width: 640px){
  #pravila-programa{ padding: 12px; }
  #pravila-programa .pravila__box{ max-height: calc(100vh - 24px); border-radius: 12px; }
  #pravila-programa .pravila__naslov{ margin-bottom: 32px; padding-right: 44px; }
  #pravila-programa .pravila__stavka{ margin-bottom: 26px; }
  #pravila-programa .pravila__stavka p{ font-size: 16px; }
  #pravila-programa .pravila__close{ width: 38px; height: 38px; }
  .wolt .card .ch { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce){
  #pravila-programa .pravila__backdrop,
  #pravila-programa .pravila__box{ animation: none; }
  #pravila-programa .pravila__close{ transition: none; }
}