@charset "UTF-8";
/* ===========================================================================
   efollowr.landing.css  —  nova vstopna stran
   ---------------------------------------------------------------------------
   Vrednosti so vzete iz dokumenta "Filozofija nove spletne strani":
     primarna #026679 · sekundarna #38889a · akcijska #d93025 · poudarek #ffa500
     ozadje #ffffff · sekcije #f7fafc
     kartice 18–20px · gumbi 14–16px · polja 14px
     razmiki med sekcijami 80 / 120 / 160px
     pisava Manrope

   NAMESTITEV: Views/Home/Index.cshtml jo vključi sam prek @section META.
   Nobena druga stran je ne naloži.

   IMENA: vse ima predpono `ef-lp-`. Site.css, OurStyles.css in OurStylesBase.css
   teh imen ne poznajo, zato ne morejo poseči vmes in ta datoteka ne potrebuje
   !important — razen tam, kjer izničujemo odmike okvirja strani (spodaj).
   =========================================================================== */

:root{
  --lp-primary:#026679;
  --lp-primary-dark:#014957;
  --lp-secondary:#38889a;
  --lp-action:#d93025;
  --lp-action-dark:#b3241b;
  --lp-accent:#ffa500;

  --lp-ink:#12304a;          /* naslovi – globoka modra z mockupov */
  --lp-body:#4a5b6b;
  --lp-muted:#7b8794;

  --lp-white:#ffffff;
  --lp-section:#f7fafc;
  --lp-line:#e6edf2;
  --lp-navy:#0d3c50;         /* temni pasovi */

  --lp-r-card:20px;
  --lp-r-btn:15px;
  --lp-r-input:14px;

  --lp-s1:80px;
  --lp-s2:120px;
  --lp-s3:160px;

  --lp-shadow:0 2px 4px rgba(18,48,74,.04), 0 12px 32px rgba(18,48,74,.06);
  --lp-shadow-lift:0 8px 16px rgba(18,48,74,.07), 0 24px 48px rgba(18,48,74,.10);

  --lp-ease:cubic-bezier(.22,.7,.3,1);
}

/* ---------------------------------------------------------------------------
   OKVIR STRANI
   #ContentWrapper ima iz OurStylesBase.css 5em odmika, <article> pa iz
   OurStyles.css display:table in overflow:hidden. Oboje izničimo samo na tej
   strani — enkrat prek :has() in enkrat prek razreda, ki ga doda skripta.
   ------------------------------------------------------------------------ */

body.ef-lp-body #ContentWrapper,
body:has(.ef-lp) #ContentWrapper{
  padding:0 !important;
  height:auto !important;
}
body.ef-lp-body #ContentWrapper > article,
body:has(.ef-lp) #ContentWrapper > article{
  display:block !important;
  overflow:visible !important;
  width:100%;
  margin:0;
}

/* ---------------------------------------------------------------------------
   OSNOVA
   ------------------------------------------------------------------------ */

.ef-lp{
  font-family:'Manrope','Roboto',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--lp-body);
  background:var(--lp-white);
  text-align:left;
  overflow-x:hidden;
}
.ef-lp *,.ef-lp *::before,.ef-lp *::after{ box-sizing:border-box; }
.ef-lp img{ max-width:100%; height:auto; }
.ef-lp p{ margin:0; }

.ef-lp-wrap{
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,40px);
}

.ef-lp-sec{ padding-block:clamp(64px,8vw,var(--lp-s2)); }
.ef-lp-sec--lg{ padding-block:clamp(72px,10vw,var(--lp-s3)); }
.ef-lp-sec--tint{ background:var(--lp-section); }

/* ---------------------------------------------------------------------------
   TIPOGRAFIJA
   ------------------------------------------------------------------------ */

.ef-lp h1,.ef-lp h2,.ef-lp h3{
  font-family:inherit;
  color:var(--lp-ink);
  margin:0;
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:balance;
}
.ef-lp h1{ font-size:clamp(2.4rem,4.6vw,3.65rem); }
.ef-lp h2{ font-size:clamp(2rem,3.8vw,3.1rem); }
.ef-lp h3{ font-size:1.22rem; font-weight:700; letter-spacing:-.01em; }

/* Rdeči poudarek v naslovu — s tem mockupi delajo hierarhijo */
.ef-lp .hl{ color:var(--lp-action); }

/* Oznaka nad naslovom: pilula z zvezdo */
.ef-lp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#eef3f8;
  border-radius:999px;
  padding:9px 20px 9px 14px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--lp-ink);
}
.ef-lp-eyebrow svg{ width:17px; height:17px; color:var(--lp-action); flex:none; }

/* Glava sekcije, sredinsko poravnana kot na mockupih */
.ef-lp-head{ text-align:center; max-width:860px; margin-inline:auto; }
.ef-lp-head h2{ margin:22px 0 0; }
.ef-lp-head p{
  margin-top:20px;
  font-size:1.06rem;
  color:var(--lp-body);
  max-width:760px;
  margin-inline:auto;
}

/* ---------------------------------------------------------------------------
   GUMBI
   ------------------------------------------------------------------------ */

.ef-lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  padding:17px 30px;
  border-radius:var(--lp-r-btn);
  border:2px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s var(--lp-ease),
             border-color .2s var(--lp-ease),
             color .2s var(--lp-ease),
             transform .2s var(--lp-ease),
             box-shadow .2s var(--lp-ease);
}
.ef-lp-btn svg{ width:19px; height:19px; flex:none; }
.ef-lp-btn:hover{ transform:translateY(-2px); text-decoration:none; }
.ef-lp-btn:focus-visible{ outline:3px solid var(--lp-secondary); outline-offset:3px; }

.ef-lp-btn--action{
  background:var(--lp-action);
  border-color:var(--lp-action);
  color:#fff;
  box-shadow:0 8px 20px rgba(217,48,37,.24);
}
.ef-lp-btn--action:hover{
  background:var(--lp-action-dark);
  border-color:var(--lp-action-dark);
  color:#fff;
  box-shadow:0 12px 26px rgba(217,48,37,.3);
}

.ef-lp-btn--ghost{
  background:#fff;
  border-color:var(--lp-line);
  color:var(--lp-ink);
}
.ef-lp-btn--ghost:hover{
  border-color:var(--lp-secondary);
  color:var(--lp-primary);
}

.ef-lp-btn--navy{
  background:var(--lp-navy);
  border-color:var(--lp-navy);
  color:#fff;
}
.ef-lp-btn--navy:hover{ background:#0a2f3f; border-color:#0a2f3f; color:#fff; }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */

.ef-lp-hero{
  background:linear-gradient(180deg,#fbfdfe 0%,#f2f7fa 100%);
  padding-block:clamp(48px,6vw,88px);
}
.ef-lp-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,5vw,56px);
  align-items:center;
}
@media (min-width:992px){
  .ef-lp-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); }
}

.ef-lp-hero__tag{
  display:inline-block;
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:999px;
  padding:11px 22px;
  font-size:14.5px;
  font-weight:700;
  color:var(--lp-ink);
  box-shadow:var(--lp-shadow);
}
.ef-lp-hero h1{ margin-top:26px; }
.ef-lp-hero h1 .dot{ color:var(--lp-action); }

.ef-lp-hero__lead{
  margin-top:26px;
  font-size:1.09rem;
  max-width:48ch;
}
.ef-lp-hero__lead b{ color:var(--lp-action); font-weight:800; }

.ef-lp-hero__points{
  list-style:none;
  margin:30px 0 0;
  padding:0;
  display:grid;
  gap:15px;
}
.ef-lp-hero__points li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:16px;
  font-weight:700;
  color:var(--lp-ink);
}
.ef-lp-ico{
  flex:none;
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eaf1f6;
  color:var(--lp-primary);
}
.ef-lp-ico svg{ width:20px; height:20px; }

.ef-lp-hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.ef-lp-hero__note{ margin-top:22px; font-size:14.5px; color:var(--lp-muted); }

.ef-lp-hero__visual{ position:relative; }
.ef-lp-hero__visual img{
  display:block;
  width:100%;
  border-radius:22px;
}

/* Rahlo lebdenje, največ 5px, kot piše v dokumentu */
@media (min-width:992px){
  .ef-lp-hero__visual img{ animation:ef-lp-float 7s ease-in-out infinite; }
}
@keyframes ef-lp-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

/* Vstopna animacija: naslov z leve, vizual z desne, gumbi od spodaj, 0,8 s */
@media (min-width:992px){
  .ef-lp-anim-l{ animation:ef-lp-inL .8s var(--lp-ease) both; }
  .ef-lp-anim-r{ animation:ef-lp-inR .8s var(--lp-ease) both; }
  .ef-lp-anim-u{ animation:ef-lp-inU .8s var(--lp-ease) .15s both; }
}
@keyframes ef-lp-inL{ from{opacity:0; transform:translateX(-34px);} }
@keyframes ef-lp-inR{ from{opacity:0; transform:translateX(34px);} }
@keyframes ef-lp-inU{ from{opacity:0; transform:translateY(24px);} }

/* Pas s štirimi prednostmi pod herojem */
.ef-lp-strip{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-card);
  box-shadow:var(--lp-shadow);
  margin-top:clamp(40px,5vw,64px);
  display:grid;
  grid-template-columns:1fr;
}
@media (min-width:576px){ .ef-lp-strip{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .ef-lp-strip{ grid-template-columns:repeat(4,1fr); } }

.ef-lp-strip__i{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:26px 26px;
  border-top:1px solid var(--lp-line);
}
@media (min-width:992px){
  .ef-lp-strip__i{ border-top:0; border-left:1px solid var(--lp-line); }
  .ef-lp-strip__i:first-child{ border-left:0; }
}
@media (max-width:991px){ .ef-lp-strip__i:first-child{ border-top:0; } }

.ef-lp-strip__i h3{ font-size:16px; margin-bottom:4px; }
.ef-lp-strip__i p{ font-size:14.5px; line-height:1.5; }


/* ---------------------------------------------------------------------------
   KARTICE — "Zakaj eFollowr?"
   ------------------------------------------------------------------------ */

.ef-lp-cards{
  display:grid;
  gap:26px;
  grid-template-columns:1fr;
  margin-top:clamp(44px,5vw,60px);
}
@media (min-width:640px){ .ef-lp-cards{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .ef-lp-cards--3{ grid-template-columns:repeat(3,1fr); } }

.ef-lp-card{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-card);
  padding:38px 34px 40px;
  box-shadow:var(--lp-shadow);
  transition:transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease);
}
.ef-lp-card:hover{ transform:translateY(-6px); box-shadow:var(--lp-shadow-lift); }

.ef-lp-card__ico{
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:26px;
}
.ef-lp-card__ico svg{ width:33px; height:33px; }

/* barvni obroči za ikone, kot na mockupih */
.ico-red   { background:#fdeceb; color:var(--lp-action); }
.ico-blue  { background:#e9f1f8; color:#1f6fb2; }
.ico-green { background:#e9f5ec; color:#1f7a3d; }
.ico-violet{ background:#f0ecfa; color:#6544b8; }
.ico-amber { background:#fef3e0; color:#d98200; }
.ico-teal  { background:#e6f3f5; color:var(--lp-primary); }

.ef-lp-card h3{ margin-bottom:16px; font-size:1.32rem; }
.ef-lp-card__rule{
  width:44px;
  height:3px;
  border-radius:2px;
  background:var(--lp-action);
  margin-bottom:18px;
}
.ef-lp-card p{ font-size:15.5px; line-height:1.62; }

.ef-lp-center{ text-align:center; margin-top:clamp(40px,5vw,56px); }

/* ---------------------------------------------------------------------------
   KORAKI — "Kako deluje eFollowr?"
   ------------------------------------------------------------------------ */

.ef-lp-steps{
  display:grid;
  gap:34px;
  grid-template-columns:1fr;
  margin-top:clamp(44px,5vw,64px);
  position:relative;
}
@media (min-width:640px){ .ef-lp-steps{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .ef-lp-steps{ grid-template-columns:repeat(4,1fr); } }

.ef-lp-step{ text-align:center; position:relative; }

.ef-lp-step__n{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--lp-navy);
  color:#fff;
  font-size:20px;
  font-weight:800;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  position:relative;
  z-index:1;
}
/* pikčasta črta med koraki */
@media (min-width:992px){
  .ef-lp-step::before{
    content:"";
    position:absolute;
    top:26px;
    left:calc(-50% + 26px);
    width:calc(100% - 52px);
    border-top:2px dotted #c8d6e0;
  }
  .ef-lp-step:first-child::before{ display:none; }
}

.ef-lp-step h3{ font-size:1.16rem; margin-bottom:12px; }
.ef-lp-step p{ font-size:15px; line-height:1.6; }
.ef-lp-step figure{
  margin:24px 0 0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--lp-shadow);
  background:#eef3f7;
  aspect-ratio:3/4;
}
.ef-lp-step figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Nadomestek, dokler ni pravih fotografij */
.ef-lp-ph{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--lp-muted);
  font-size:13px;
  font-weight:700;
  text-align:center;
  padding:16px;
  background:
    repeating-linear-gradient(45deg,#f2f6f9 0 10px,#eaf0f5 10px 20px);
}

/* ---------------------------------------------------------------------------
   SPODNJI PAS S POZIVOM — ponavlja se na dnu vsake sekcije mockupov
   ------------------------------------------------------------------------ */

.ef-lp-cta{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-card);
  box-shadow:var(--lp-shadow);
  padding:26px 30px;
  margin-top:clamp(44px,5vw,60px);
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.ef-lp-cta__ico{
  flex:none;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#eaf1f6;
  color:var(--lp-primary);
  display:grid;
  place-items:center;
}
.ef-lp-cta__ico svg{ width:26px; height:26px; }
.ef-lp-cta__txt{ flex:1 1 320px; }
.ef-lp-cta__txt strong{
  display:block;
  font-size:1.1rem;
  font-weight:800;
  color:var(--lp-ink);
  margin-bottom:4px;
}
.ef-lp-cta__txt span{ font-size:15px; }
.ef-lp-cta__btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------------------------------------------------------------------
   NASTAVITVE UPORABNIKA
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  .ef-lp *,.ef-lp *::before,.ef-lp *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .ef-lp-card:hover,.ef-lp-btn:hover{ transform:none; }
}


/* ZAOBLJENJE VHODOV (javni del) */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea, .form-control{ border-radius:12px; }
textarea{ border-radius:14px; }


/* ===========================================================================
   HERO — fotografija čez rob, z zlivanjem na levi
   ---------------------------------------------------------------------------
   NAMESTITEV: prilepi na KONEC datoteke Content/efollowr.landing.css.
   Markup se NE spreminja.

   PRISTOP: čez rob z negativnimi robovi, NE z position:absolute.
   Absolutno pozicioniranje je odpovedalo, ker #ContentWrapper > article iz
   OurStyles.css nosi display:table in overflow:hidden — landing.css ju sicer
   izničuje prek :has(), a če to pravilo ne prime, absoluten element ostane
   ujet. Negativni robovi delujejo ne glede na pozicioniranje prednikov.

   Trik za čez rob: margin-right:calc((100% - 100vw) / 2). Odstotek se
   računa od širine .ef-lp-hero__grid, ta pa je enaka notranji širini
   .ef-lp-wrap (sredinjen vsebnik). Razlika do širine okna, deljena z dve,
   je torej točno toliko, kolikor manjka do desnega roba.
   =========================================================================== */

@media (min-width:992px){

  .ef-lp-hero{
    /* isto vrednost potrebujemo dvakrat: za odmik in za njegovo izničenje */
    --hero-pad-top:clamp(56px,6vw,96px);

    overflow:hidden;
    padding-block:var(--hero-pad-top) clamp(40px,5vw,64px);
  }

  /* Besedilo levo, fotografija desno. Stolpca sta enako visoka (stretch),
     da slika lahko zapolni celo višino sekcije. */
  .ef-lp-hero .ef-lp-hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    align-items:stretch;
    gap:clamp(32px,4vw,56px);
  }

  /* Levi stolpec naj bo navpično sredinjen znotraj svoje višine */
  .ef-lp-hero .ef-lp-hero__grid > *:first-child{
    align-self:center;
    max-width:600px;
  }

  .ef-lp-hero__visual{
    /* navzgor do roba glave, navzdol do pasu s prednostmi */
    margin-top:calc(-1 * var(--hero-pad-top));
    margin-bottom:calc(-1 * clamp(40px,5vw,64px));

    /* na desno do roba okna */
    margin-right:calc((100% - 100vw) / 2);

    min-height:640px;
  }

  .ef-lp-hero__visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left center;
    border-radius:0;

    /* Lebdenje iz osnovne datoteke tu ni na mestu: slika je pripeta na rob
       okna in premik za 5px bi odprl svetlo režo. */
    animation:none;

    /* Zlivanje: levi rob v nič, spodnji rob mehko v podlago. Dve maski se
       množita, zato je vogal spodaj levo najbolj prozoren.

       ZAKAJ maska in ne prekrivni gradient: pas s prednostmi je bela kartica,
       ki na fotografiji leži. Prekrivni sloj bi ležal tudi na njej. */
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, rgba(0,0,0,.5) 12%, #000 32%),
      linear-gradient(to bottom, #000 60%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(to right,  transparent 0, rgba(0,0,0,.5) 12%, #000 32%),
      linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-composite:intersect;
  }

  /* nadomestek, dokler fotografije ni */
  .ef-lp-hero__visual .ef-lp-ph{
    height:100%;
    border-radius:0;
    aspect-ratio:auto !important;
  }

  /* Pas s prednostmi leži NA fotografiji, kot na mockupu */
  .ef-lp-hero .ef-lp-strip{
    position:relative;
    z-index:2;
    background:#fff;
  }
}

/* ---------------------------------------------------------------------------
   Ozki zasloni: fotografija se vrne v tok, pod besedilo, in ostane zaobljena.
   ------------------------------------------------------------------------ */

@media (max-width:991px){
  .ef-lp-hero__visual{
    margin:0;
    min-height:0;
  }
  .ef-lp-hero__visual img{
    border-radius:22px;
    height:auto;
    -webkit-mask-image:none;
            mask-image:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .ef-lp-hero__visual img{ animation:none; }
}
/* ===========================================================================
   FUNKCIONALNOSTI — devet kartic, telefon na sredini, štiri oznake v loku
   ---------------------------------------------------------------------------
   NAMESTITEV: prilepi na KONEC datoteke Content/efollowr.landing.css,
   za blok s hero fotografijo.

   Barvni obroči ikon (.ico-red, .ico-teal, .ico-blue, .ico-green, .ico-violet,
   .ico-amber) so že v osnovni datoteki — tu jih samo uporabimo.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   GLAVA SEKCIJE
   .ef-lp-head p ima v osnovni datoteki 1.06rem, kar je pri zmanjšanem
   html{font-size} okoli 10px. Za to sekcijo ga povemo v pikslih.
   ------------------------------------------------------------------------ */

#ef-lp-funkcije .ef-lp-head p{
  font-size:17px;
  line-height:1.6;
  max-width:720px;
}
#ef-lp-funkcije .ef-lp-eyebrow{ font-size:13px; }


/* ---------------------------------------------------------------------------
   POSTAVITEV
   Trije stolpci: kartice · telefon · oznake. Pod 1200px telefon in oznake
   padeta pod kartice, pod 640px se vse zloži v en stolpec.
   ------------------------------------------------------------------------ */

.ef-lp-feat{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px,4vw,48px);
  align-items:center;
  margin-top:clamp(40px,5vw,56px);
}
@media (min-width:1200px){
  .ef-lp-feat{
    grid-template-columns:minmax(0,1.55fr) minmax(0,.62fr) minmax(0,.42fr);
    gap:clamp(28px,3vw,44px);
  }
}

.ef-lp-feat__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:stretch;               /* kartice v vrstici enako visoke */
}
@media (min-width:640px){ .ef-lp-feat__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:992px){ .ef-lp-feat__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------------------------------------------------------------------------
   KARTICA FUNKCIONALNOSTI
   Manjša od .ef-lp-card iz sekcije "Zakaj eFollowr?": teh je devet, ne šest,
   in stojijo ob telefonu, zato so odmiki tesnejši.
   ------------------------------------------------------------------------ */

/*  POZOR — ENOTE
    V tem odseku so vse velikosti v PIKSLIH, ne v rem. Na tem portalu je
    html{font-size} zmanjšan (najbrž 62.5%, torej 1rem = 10px), zato so bili
    naslovi kartic pri font-size:1rem manjši od odstavkov pri 13.5px.
    Naslovi v `clamp()` z `vw` so bili videti pravilno, ker vw na rem ni vezan.
    Če boš to sekcijo kdaj kopiral drugam, enote pusti v pikslih.            */

.ef-lp-fcard{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:16px;
  padding:22px 20px 24px;
  box-shadow:var(--lp-shadow);
  transition:transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.ef-lp-fcard:hover{ transform:translateY(-4px); box-shadow:var(--lp-shadow-lift); }

.ef-lp-fico{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
}
.ef-lp-fico svg{ width:23px; height:23px; }

/* Naslov je temno moder in večji od besedila — na mockupu je nosilec vrstice.
   Prej je bil teal in manjši od odstavka pod njim, torej obratno. */
.ef-lp-fcard h3{
  font-size:17px !important;      /* premaga .ef-lp h3{font-size:1.22rem} */
  line-height:1.3;
  font-weight:800;
  color:var(--lp-ink);
  margin:0 0 8px;
}
.ef-lp-fcard p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--lp-body);
}

/* ---------------------------------------------------------------------------
   TELEFON
   ------------------------------------------------------------------------ */

.ef-lp-feat__phone{ text-align:center; }
.ef-lp-feat__phone img{
  display:block;
  width:100%;
  max-width:330px;
  margin-inline:auto;
  height:auto;
}
@media (min-width:1200px){
  .ef-lp-feat__phone img{ max-width:none; }
}

/* ---------------------------------------------------------------------------
   ŠTIRI OZNAKE V LOKU
   Lok je narisan s pikčasto obrobo psevdo elementa, oznake pa so vodoravno
   zamaknjene po parih — s tem dobimo krivino brez slike in brez SVG poti.
   ------------------------------------------------------------------------ */

.ef-lp-feat__arc{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(22px,3vw,34px);
  position:relative;
}

.ef-lp-feat__arc li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  font-size:14.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--lp-ink);
  position:relative;
  z-index:1;
}

.ef-lp-aico{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--lp-line);
  box-shadow:var(--lp-shadow);
  color:var(--lp-primary);
  display:grid;
  place-items:center;
}
.ef-lp-aico svg{ width:23px; height:23px; }

/* Krivina: prvi in zadnji sta bolj levo, srednja dva bolj desno. */
@media (min-width:1200px){
  .ef-lp-feat__arc li:nth-child(1){ transform:translateX(-6px); }
  .ef-lp-feat__arc li:nth-child(2){ transform:translateX(14px); }
  .ef-lp-feat__arc li:nth-child(3){ transform:translateX(14px); }
  .ef-lp-feat__arc li:nth-child(4){ transform:translateX(-6px); }

  /* pikčasti lok za oznakami */
  .ef-lp-feat__arc::before{
    content:"";
    position:absolute;
    top:26px;
    bottom:26px;
    left:-18px;
    width:150px;
    border:2px dotted #c8d6e0;
    border-right:0;
    border-top:0;
    border-bottom:0;
    border-radius:200px 0 0 200px;
    z-index:0;
  }
}

/* Na ozkih zaslonih so oznake v vrsti, brez loka — krivina v dveh stolpcih
   ne pomeni nič in samo lomi poravnavo. */
@media (max-width:1199px){
  .ef-lp-feat__arc{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:520px;
    margin-inline:auto;
  }
}
@media (min-width:768px) and (max-width:1199px){
  .ef-lp-feat__arc{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; }
}

/* ---------------------------------------------------------------------------
   NASTAVITVE UPORABNIKA
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  .ef-lp-fcard,.ef-lp-fcard:hover{ transform:none; transition:none; }
}

/* ---------------------------------------------------------------------------
   SPODNJI POZIV
   .ef-lp-cta__txt strong je v osnovni datoteki 1.1rem — v pikslih.
   ------------------------------------------------------------------------ */

#ef-lp-funkcije .ef-lp-cta__txt strong{ font-size:17.5px; }
#ef-lp-funkcije .ef-lp-cta__txt span{ font-size:15px; }
/* ===========================================================================
   FUNKCIONALNOSTI — devet kartic, telefon na sredini, štiri oznake v loku
   ---------------------------------------------------------------------------
   NAMESTITEV: prilepi na KONEC datoteke Content/efollowr.landing.css,
   za blok s hero fotografijo.

   Barvni obroči ikon (.ico-red, .ico-teal, .ico-blue, .ico-green, .ico-violet,
   .ico-amber) so že v osnovni datoteki — tu jih samo uporabimo.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   GLAVA SEKCIJE
   .ef-lp-head p ima v osnovni datoteki 1.06rem, kar je pri zmanjšanem
   html{font-size} okoli 10px. Za to sekcijo ga povemo v pikslih.
   ------------------------------------------------------------------------ */

#ef-lp-funkcije .ef-lp-head p{
  font-size:17px;
  line-height:1.6;
  max-width:720px;
}
#ef-lp-funkcije .ef-lp-eyebrow{ font-size:13px; }


/* ---------------------------------------------------------------------------
   POSTAVITEV
   Trije stolpci: kartice · telefon · oznake. Pod 1200px telefon in oznake
   padeta pod kartice, pod 640px se vse zloži v en stolpec.
   ------------------------------------------------------------------------ */

.ef-lp-feat{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px,4vw,48px);
  align-items:center;
  margin-top:clamp(40px,5vw,56px);
}
@media (min-width:1200px){
  .ef-lp-feat{
    grid-template-columns:minmax(0,1.55fr) minmax(0,.62fr) minmax(0,.42fr);
    gap:clamp(28px,3vw,44px);
  }
}

.ef-lp-feat__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:stretch;               /* kartice v vrstici enako visoke */
}
@media (min-width:640px){ .ef-lp-feat__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:992px){ .ef-lp-feat__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------------------------------------------------------------------------
   KARTICA FUNKCIONALNOSTI
   Manjša od .ef-lp-card iz sekcije "Zakaj eFollowr?": teh je devet, ne šest,
   in stojijo ob telefonu, zato so odmiki tesnejši.
   ------------------------------------------------------------------------ */

/*  POZOR — ENOTE
    V tem odseku so vse velikosti v PIKSLIH, ne v rem. Na tem portalu je
    html{font-size} zmanjšan (najbrž 62.5%, torej 1rem = 10px), zato so bili
    naslovi kartic pri font-size:1rem manjši od odstavkov pri 13.5px.
    Naslovi v `clamp()` z `vw` so bili videti pravilno, ker vw na rem ni vezan.
    Če boš to sekcijo kdaj kopiral drugam, enote pusti v pikslih.            */

.ef-lp-fcard{
  background:#fff;
  border:1px solid var(--lp-line);
  border-radius:16px;
  padding:22px 20px 24px;
  box-shadow:var(--lp-shadow);
  transition:transform .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
}
.ef-lp-fcard:hover{ transform:translateY(-4px); box-shadow:var(--lp-shadow-lift); }

.ef-lp-fico{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
}
.ef-lp-fico svg{ width:23px; height:23px; }

/* Naslov je temno moder in večji od besedila — na mockupu je nosilec vrstice.
   Prej je bil teal in manjši od odstavka pod njim, torej obratno. */
.ef-lp-fcard h3{
  font-size:17px !important;      /* premaga .ef-lp h3{font-size:1.22rem} */
  line-height:1.3;
  font-weight:800;
  color:var(--lp-ink);
  margin:0 0 8px;
}
.ef-lp-fcard p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--lp-body);
}

/* ---------------------------------------------------------------------------
   TELEFON
   ------------------------------------------------------------------------ */

.ef-lp-feat__phone{ text-align:center; }
.ef-lp-feat__phone img{
  display:block;
  width:100%;
  max-width:330px;
  margin-inline:auto;
  height:auto;
}
@media (min-width:1200px){
  .ef-lp-feat__phone img{ max-width:none; }
}

/* ---------------------------------------------------------------------------
   ŠTIRI OZNAKE V LOKU
   Lok je narisan s pikčasto obrobo psevdo elementa, oznake pa so vodoravno
   zamaknjene po parih — s tem dobimo krivino brez slike in brez SVG poti.
   ------------------------------------------------------------------------ */

.ef-lp-feat__arc{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(22px,3vw,34px);
  position:relative;
}

.ef-lp-feat__arc li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  font-size:14.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--lp-ink);
  position:relative;
  z-index:1;
}

.ef-lp-aico{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--lp-line);
  box-shadow:var(--lp-shadow);
  color:var(--lp-primary);
  display:grid;
  place-items:center;
}
.ef-lp-aico svg{ width:23px; height:23px; }

/*  Značke so poravnane v en stolpec. Prej so bile po parih zamaknjene v lok,
    kar je posnemalo mockup, a je brez pikčaste krivine iz mockupa izgledalo
    kot napaka v poravnavi — zamik brez razloga oko bere kot pomoto.

    Pikčasti lok je s tem tudi odpadel: krivina, ki ne sledi ničemur, ne pove
    nič. Če ga boš hotel nazaj, potrebuje tudi zamike, in oboje skupaj.       */

@media (min-width:1200px){
  .ef-lp-feat__arc{
    align-content:center;
    justify-items:center;
  }
  .ef-lp-feat__arc li{ transform:none; width:100%; max-width:190px; }
}

/* Na ozkih zaslonih so oznake v vrsti, brez loka — krivina v dveh stolpcih
   ne pomeni nič in samo lomi poravnavo. */
@media (max-width:1199px){
  .ef-lp-feat__arc{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:520px;
    margin-inline:auto;
  }
}
@media (min-width:768px) and (max-width:1199px){
  .ef-lp-feat__arc{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; }
}

/* ---------------------------------------------------------------------------
   NASTAVITVE UPORABNIKA
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  .ef-lp-fcard,.ef-lp-fcard:hover{ transform:none; transition:none; }
}

/* ---------------------------------------------------------------------------
   SPODNJI POZIV
   .ef-lp-cta__txt strong je v osnovni datoteki 1.1rem — v pikslih.
   ------------------------------------------------------------------------ */

#ef-lp-funkcije .ef-lp-cta__txt strong{ font-size:17.5px; }
#ef-lp-funkcije .ef-lp-cta__txt span{ font-size:15px; }
/* ===========================================================================
   POPRAVEK — poravnava značk v sekciji Funkcionalnosti
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css.
   Mora biti zadnje, ker izničuje pravila, ki so morda ostala iz prejšnje
   različice tega odseka (zamiki po parih in pikčasti lok).

   Po namestitvi Ctrl+F5. Če se lok še vidi, datoteka ni prišla do brskalnika.
   =========================================================================== */

/* pikčasti lok proč — krivina, ki ne sledi ničemur, ne pove nič */
.ef-lp-feat__arc::before,
.ef-lp-feat__arc::after{
  content:none !important;
  display:none !important;
  border:0 !important;
}

/* značke v en stolpec, brez zamikov */
.ef-lp-feat__arc{
  position:static;
  justify-items:center;
  align-content:center;
}

.ef-lp-feat__arc > li,
.ef-lp-feat__arc li:nth-child(1),
.ef-lp-feat__arc li:nth-child(2),
.ef-lp-feat__arc li:nth-child(3),
.ef-lp-feat__arc li:nth-child(4){
  transform:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  width:100%;
  max-width:200px;
  justify-self:center;
  text-align:center;
}
/* ===========================================================================
   POPRAVEK — "Kako deluje eFollowr?": velikost naslovov in poravnava slik
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css.

   DVE NAPAKI Z ISTEGA POSNETKA

   1. Naslovi korakov so drobnejši od besedila pod njimi.
      Osnovna datoteka jim daje 1.16rem. Na tem portalu je html{font-size}
      zmanjšan (najbrž 62.5%), zato je 1.16rem okoli 11px, odstavek pri 15px
      pa je večji. Ista napaka kot pri karticah Funkcionalnosti — velikosti
      v tej datoteki so v rem in jih je vredno postopno prevesti v piksle.

   2. Slike se ne začnejo na isti višini.
      Opisi so dolgi dve ali tri vrstice, figura pa sledi neposredno besedilu,
      zato vsak stolpec začne sliko drugje. Rešitev: korak je navpičen flex,
      figura pa je z margin-top:auto potisnjena na dno — s tem se vse štiri
      slike poravnajo po zgornjem robu ne glede na dolžino besedila.
   =========================================================================== */

/* --- 1. tipografija v pikslih -------------------------------------------- */

.ef-lp-step h3{
  font-size:17px !important;          /* premaga .ef-lp h3{font-size:1.22rem} */
  line-height:1.3;
  font-weight:800;
  color:var(--lp-ink);
  margin:0 0 10px;
}
.ef-lp-step p{
  font-size:15px;
  line-height:1.6;
  color:var(--lp-body);
}

/* --- 2. poravnava slik ---------------------------------------------------- */

/* Vrstica korakov: vsi stolpci enako visoki. */
.ef-lp-steps{ align-items:stretch; }

.ef-lp-step{
  display:flex;
  flex-direction:column;
  height:100%;
}

/*  Figura na dno stolpca. Ker so vsi stolpci enako visoki, se s tem zgornji
    robovi slik poravnajo — ne glede na to, ali ima opis dve ali tri vrstice. */
.ef-lp-step figure{
  margin-top:auto;
  padding-top:24px;
  margin-bottom:0;
  width:100%;
}

/*  Enako razmerje pri vseh štirih, tudi ko je ena prava fotografija in so
    ostale še nadomestki. Brez tega prava slika narekuje svojo višino. */
.ef-lp-step figure{
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--lp-shadow);
  background:#eef3f7;
}
.ef-lp-step figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/*  padding-top na figuri z aspect-ratio ne gre skupaj: razmerje velja za
    celotno škatlo in odmik bi ga skrivil. Odmik damo raje na besedilo. */
.ef-lp-step figure{ padding-top:0; }
.ef-lp-step p{ margin-bottom:24px; }

/* ===========================================================================
   HERO — tri slike telefonov čez fotografijo
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css,
   za blokom, ki fotografijo razteza čez rob.

   Postavitev po mockupu: srednji telefon je največji in dvignjen, stranska
   dva sta manjša, nižja in delno pod njim.
   =========================================================================== */

/* --- ozadje ------------------------------------------------------------- */

.ef-lp-hero__visual{ position:relative; }

.ef-lp-hero__bg{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* --- vrsta telefonov ----------------------------------------------------- */

.ef-lp-phones{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,1vw,18px);
  padding:clamp(16px,3vw,40px);
  pointer-events:none;   /* fotografija spodaj naj ostane klikljiva */
}

.ef-lp-phone{
  flex:0 1 clamp(120px,15vw,210px);
  position:relative;
}

.ef-lp-phone img{
  display:block;
  width:100%;
  height:auto;
  /*  Senca je tu in ne v izvoženi sliki: pri prekrivanju treh PNG-jev z
      vpečeno senco se sence seštevajo in robovi postanejo umazani.        */
  filter:drop-shadow(0 18px 28px rgba(18,48,74,.28));
}

/*  Srednji je večji in dvignjen, stranska dva nižja in delno pod njim.
    z-index dela vrstni red prekrivanja: sredina zgoraj.                    */
.ef-lp-phone--1{ z-index:1; transform:translateY(26px) scale(.9); }
.ef-lp-phone--2{ z-index:3; transform:translateY(-14px) scale(1.06); }
.ef-lp-phone--3{ z-index:2; transform:translateY(26px) scale(.9); }

/* nadomestek, dokler slik ni */
.ef-lp-phones .ef-lp-ph{
  aspect-ratio:1/2;
  border-radius:22px;
  font-size:12px;
}

/* --- rahlo lebdenje, vsak s svojim zamikom ------------------------------- */

@media (min-width:992px){
  .ef-lp-phone--1{ animation:ef-lp-float 7s ease-in-out infinite; }
  .ef-lp-phone--2{ animation:ef-lp-float 7s ease-in-out .5s infinite; }
  .ef-lp-phone--3{ animation:ef-lp-float 7s ease-in-out 1s infinite; }

  /*  Animacija ef-lp-float iz osnovne datoteke prepiše transform, s tem pa
      tudi dvig in pomanjšanje zgoraj. Zato ima vsak telefon svojo različico
      s prištetim začetnim položajem.                                       */
  .ef-lp-phone--1{ animation-name:ef-lp-float-side-a; }
  .ef-lp-phone--2{ animation-name:ef-lp-float-mid; }
  .ef-lp-phone--3{ animation-name:ef-lp-float-side-b; }
}

@keyframes ef-lp-float-side-a{
  0%,100%{ transform:translateY(26px) scale(.9); }
  50%    { transform:translateY(21px) scale(.9); }
}
@keyframes ef-lp-float-mid{
  0%,100%{ transform:translateY(-14px) scale(1.06); }
  50%    { transform:translateY(-20px) scale(1.06); }
}
@keyframes ef-lp-float-side-b{
  0%,100%{ transform:translateY(26px) scale(.9); }
  50%    { transform:translateY(31px) scale(.9); }
}

/* --- ozki zasloni -------------------------------------------------------- */

@media (max-width:991px){
  .ef-lp-phones{
    position:static;
    padding:0;
    margin-top:-18%;      /* telefoni naj še vedno ležijo na fotografiji */
  }
  .ef-lp-phone{ flex:0 1 30%; }
  .ef-lp-phone--1,.ef-lp-phone--2,.ef-lp-phone--3{ animation:none; }
}

@media (prefers-reduced-motion:reduce){
  .ef-lp-phone--1,.ef-lp-phone--2,.ef-lp-phone--3{ animation:none; }
}
/* ===========================================================================
   POPRAVEK — telefoni v heroju so bili prosojni
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css.
   Mora biti zadnje, ker izničuje masko, ki jo je podedoval napačen element.

   VZROK
   Maska za zlivanje fotografije je bila napisana kot `.ef-lp-hero__visual img`.
   Ko so v ta element prišle še slike telefonov, so tudi one `img` znotraj
   njega — in so podedovale zlivanje. Zato bledijo proti levi in proti dnu,
   enako kot fotografija za njimi.

   REŠITEV
   Maska velja samo za ozadje (.ef-lp-hero__bg), telefonom pa jo izrecno
   odvzamemo. Izrecno zato, ker ne vem, v kakšnem vrstnem redu so bloki v
   tvoji datoteki — z odvzemom je rezultat enak v vsakem primeru.
   =========================================================================== */

/* --- maska SAMO na ozadju ------------------------------------------------ */

@media (min-width:992px){
  .ef-lp-hero__visual > img.ef-lp-hero__bg,
  .ef-lp-hero__bg{
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, rgba(0,0,0,.5) 12%, #000 32%),
      linear-gradient(to bottom, #000 60%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(to right,  transparent 0, rgba(0,0,0,.5) 12%, #000 32%),
      linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-composite:intersect;
  }
}

/* --- telefoni brez maske in brez prosojnosti ----------------------------- */

.ef-lp-phones,
.ef-lp-phones *,
.ef-lp-phone,
.ef-lp-phone img,
.ef-lp-phones .ef-lp-ph{
  -webkit-mask-image:none !important;
          mask-image:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* senco vrnemo, ker jo je pravilo zgoraj lahko povozilo skupaj z masko */
.ef-lp-phone img{
  filter:drop-shadow(0 18px 28px rgba(18,48,74,.28));
}
/* ===========================================================================
   POPRAVEK — slike korakov: manjše in neobrezane
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css,
   za prejšnjim popravkom korakov.

   VZROK
   Slike niso bile raztegnjene, ampak OBREZANE: object-fit:cover napolni
   razmerje 3:4 in odreže, kar štrli čez. Pri drugem koraku je zato odrezan
   desni del prizora, pri tretjem vrh in dno posnetka zaslona.

   REŠITEV
   object-fit:contain pokaže celo sliko, figura pa je ožja in sredinjena,
   da slike ne zavzamejo toliko višine.

   Ob contain nastane prazen prostor ob straneh, zato figura nima več
   sivega ozadja in sence — sicer bi bila vidna škatla okoli slike.
   =========================================================================== */

.ef-lp-step figure{
  /* ožje in sredinjeno: slike telefonov so pokončne in ne potrebujejo
     cele širine stolpca */
  max-width:240px;
  margin-left:auto;
  margin-right:auto;

  aspect-ratio:3/4;

  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}

.ef-lp-step figure img{
  width:100%;
  height:100%;
  object-fit:contain;                 /* prej cover — od tod obrezovanje */
  object-position:center bottom;
  display:block;
}

/* Nadomestek za manjkajočo sliko potrebuje vidno škatlo, ker ni vsebine. */
.ef-lp-step figure .ef-lp-ph{
  border-radius:18px;
  background:
    repeating-linear-gradient(45deg,#f2f6f9 0 10px,#eaf0f5 10px 20px);
}

/* Na ozkih zaslonih so stolpci itak ožji — omejitev sprostimo. */
@media (max-width:639px){
  .ef-lp-step figure{ max-width:280px; }
}
/* ===========================================================================
   POPRAVEK — slike korakov: sredinsko in enako veliki telefoni
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css,
   za prejšnjima popravkoma korakov.

   DVE ZAHTEVI

   1. Sredinska postavitev — object-position:center in enaka višina figure
      pri vseh štirih, da slike stojijo na isti črti.

   2. Enako veliki zasloni v 3. in 4. koraku.
      Tega CSS sam ne more zanesljivo doseči. Pri object-fit:contain velikost
      določa, koliko PROSOJNEGA ROBA je okoli telefona v sami datoteki. Na
      telefon-4 (korak 4) ga je očitno več kot na koraku 3, zato je telefon
      manjši, čeprav je škatla enako velika.

      PRAVA REŠITEV je obrezati izvorne PNG-je tesno ob telefon — takrat so
      vsi enako veliki sami od sebe in spodnjih približkov ne potrebuješ.

      ZASILNA REŠITEV je spodaj: vsak korak ima svoj približek prek
      spremenljivke --zoom. Vrednosti so ocenjene s posnetka; popravi jih po
      občutku, ko vidiš rezultat. 1 pomeni brez spremembe.
   =========================================================================== */

/* --- enaka škatla in sredinska postavitev pri vseh štirih ---------------- */

.ef-lp-step figure{
  --zoom:1;

  max-width:260px;
  margin-left:auto;
  margin-right:auto;

  /* Fiksna višina namesto razmerja: razmerje se ravna po širini stolpca,
     zato so bile škatle na različnih zaslonih različno visoke. */
  aspect-ratio:auto;
  height:300px;

  display:flex;
  align-items:center;          /* navpično na sredino */
  justify-content:center;      /* vodoravno na sredino */

  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:hidden;             /* varovalo, če je približek prevelik */
}

.ef-lp-step figure img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;   /* prej center bottom */
  transform:scale(var(--zoom));
  transform-origin:center center;
  display:block;
}

/* --- približek za vsak korak posebej ------------------------------------- */
/*  Popravi te štiri vrednosti, dokler telefoni niso videti enako veliki.
    Če izvorne slike obrežeš tesno ob motiv, vse štiri nastavi na 1.        */

.ef-lp-steps > .ef-lp-step:nth-child(1) figure{ --zoom:1; }
.ef-lp-steps > .ef-lp-step:nth-child(2) figure{ --zoom:1; }
.ef-lp-steps > .ef-lp-step:nth-child(3) figure{ --zoom:1; }
.ef-lp-steps > .ef-lp-step:nth-child(4) figure{ --zoom:1.45; }

/* --- ozki zasloni -------------------------------------------------------- */

@media (max-width:639px){
  .ef-lp-step figure{ height:260px; max-width:240px; }
}

/* ===========================================================================
   POPRAVEK — enako veliki telefoni
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css.

   DVE MESTI

   1. HERO — trije telefoni čez fotografijo
      Prej so bili različno veliki iz dveh razlogov: srednji je imel
      scale(1.06), stranska dva scale(.9), poleg tega pa so bili vsi široki
      "1 delež stolpca" — pri različno širokih izvornih slikah to pomeni
      različno visoke telefone.

      Zdaj velikost določa VIŠINA, ne širina: vsem trem povemo isto višino,
      širina pa se prilagodi. Tako so enako veliki ne glede na to, koliko
      prosojnega roba ima posamezna datoteka.

   2. KORAKI — sliki 3 in 4
      Ista težava, drug vzrok: telefon na koraku 4 ima v datoteki precej več
      prosojnega roba kot na koraku 3, zato ga object-fit:contain izriše
      manjšega. Približek --zoom to izravna.

      PRAVA REŠITEV je obrezati izvorne PNG-je tesno ob telefon; takrat so vsi
      enako veliki sami od sebe in --zoom nastaviš na 1.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------------------ */

@media (min-width:992px){

  .ef-lp-phones{
    align-items:center;
    gap:clamp(4px,.8vw,14px);
  }

  /*  Širina se ravna po sliki, ne po deležu stolpca. */
  .ef-lp-phone{
    flex:0 0 auto;
    max-width:32%;
  }

  /*  Enaka višina za vse tri — to je tisto, kar oko bere kot "enako veliki". */
  .ef-lp-phone img{
    height:clamp(300px,32vw,460px);
    width:auto;
    max-width:100%;
    object-fit:contain;
  }

  /*  Enaka velikost pri vseh treh: scale je povsod 1. Ostane le rahel
      navpični zamik, da vrsta ni toga — brez njega so trije enaki telefoni
      v ravni črti videti kot izrez iz kataloga.                            */
  .ef-lp-phone--1,
  .ef-lp-phone--2,
  .ef-lp-phone--3{ transform:none; }

  .ef-lp-phone--1{ animation-name:ef-lp-float-p1; }
  .ef-lp-phone--2{ animation-name:ef-lp-float-p2; }
  .ef-lp-phone--3{ animation-name:ef-lp-float-p3; }
}

@keyframes ef-lp-float-p1{
  0%,100%{ transform:translateY(16px); }
  50%    { transform:translateY(11px); }
}
@keyframes ef-lp-float-p2{
  0%,100%{ transform:translateY(-10px); }
  50%    { transform:translateY(-16px); }
}
@keyframes ef-lp-float-p3{
  0%,100%{ transform:translateY(16px); }
  50%    { transform:translateY(21px); }
}

@media (prefers-reduced-motion:reduce){
  .ef-lp-phone--1{ transform:translateY(16px); animation:none; }
  .ef-lp-phone--2{ transform:translateY(-10px); animation:none; }
  .ef-lp-phone--3{ transform:translateY(16px); animation:none; }
}

/* ---------------------------------------------------------------------------
   2. KORAKI — sliki 3 in 4
   ------------------------------------------------------------------------ */

/*  Ocenjeno s posnetka: telefon na koraku 4 je bil približno dvakrat manjši
    od tistega na koraku 3. Vrednost popravi po občutku, ko vidiš rezultat —
    večja številka pomeni večji telefon.                                     */

.ef-lp-steps > .ef-lp-step:nth-child(3) figure{ --zoom:1; }
.ef-lp-steps > .ef-lp-step:nth-child(4) figure{ --zoom:2; }

/*  Pri večjem približku slika lahko preraste škatlo, zato jo škatla odreže.
    Ker je motiv sredinjen, se odreže prosojni rob in ne telefon.            */
.ef-lp-step figure{ overflow:hidden; }
/* ===========================================================================
   POPRAVEK — telefoni: zamik vrste v heroju in mera pri koraku 4
   ---------------------------------------------------------------------------
   NAMESTITEV: na SAM KONEC datoteke Content/efollowr.landing.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. HERO — vrsta telefonov bolj levo
   ---------------------------------------------------------------------------
   Vrsta je sredinjena glede na .ef-lp-hero__visual, ta pa z negativnim
   desnim robom sega čez rob okna. Sredina fotografije torej ni sredina
   vidnega dela — zadnji telefon zato pade ven.

   Zamik je izražen v odstotkih širine vsebnika, da drži pri različnih
   širinah zaslona. Če je še vedno preveč ali premalo, spremeni eno število.
   ------------------------------------------------------------------------ */

@media (min-width:992px){
  .ef-lp-phones{
    justify-content:center;
    transform:translateX(-9%);
  }
}

/*  Na zelo širokih zaslonih fotografija sega še dlje čez rob, zato je treba
    zamakniti nekoliko bolj. */
@media (min-width:1600px){
  .ef-lp-phones{ transform:translateX(-11%); }
}

/*  Rezerva na desni: če bi zadnji telefon vseeno segal predaleč, ga ustavi
    prej, kot ga odreže rob okna. */
@media (min-width:992px){
  .ef-lp-phones{ padding-right:clamp(20px,4vw,72px); }
}


/* ---------------------------------------------------------------------------
   2. KORAKI — telefon na 4. koraku
   ---------------------------------------------------------------------------
   Približek 2 je bil prevelik: slika je prerasla škatlo in overflow:hidden jo
   je odrezal na dnu. 1.7 je vmesna vrednost med 1.45 (premajhno) in
   2 (preveliko).

   Vrednost popravljaj po korakih 0.1, dokler telefona na 3. in 4. koraku
   nista enako visoka.
   ------------------------------------------------------------------------ */

.ef-lp-steps > .ef-lp-step:nth-child(3) figure{ --zoom:1; }
.ef-lp-steps > .ef-lp-step:nth-child(4) figure{ --zoom:1.7; }

/*  Da odrez ni več mogoč: slika se sme razliti čez škatlo, ker je okoli nje
    itak prazen prostor stolpca. S tem prevelik približek ne odreže telefona,
    ampak ga le poveča — napaka je vidna, a ne uniči vsebine. */
.ef-lp-step figure{ overflow:visible; }

/* Povezava "registracija" v temnem promo bloku.
   Selektor je .lp-promo p a in ne .lp-promo a, ker slednji bi zajel
   tudi gumb "Pomoč pri registraciji" — ta je siblings od <p>, ne v njem. */
.lp-promo p a,
.lp-promo p a:link,
.lp-promo p a:visited {
    color: #7fd4e0;
    text-decoration-color: rgba(127, 212, 224, .55);
}

.lp-promo p a:hover,
.lp-promo p a:focus {
    color: #a8e4ec;
    text-decoration-color: currentColor;
}