/* MajelFPV — /usluge/ (conversion page). Builds on style.css tokens. */

/* WhatsApp buttons */
.btn-wa{background:#25D366;color:#04210f}
.btn-wa:hover{background:#fff;color:#000}
.btn-wa-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #25D366}
.btn-wa-line:hover{background:#25D366;color:#04210f}
.btn-wa svg,.btn-wa-line svg{flex:0 0 auto}
.btn-big{padding:19px 28px;font-size:13.5px}
.nav-cta.btn-wa{gap:8px}

/* hero */
.u-hero{position:relative;padding:clamp(110px,15vh,150px) 0 clamp(50px,7vh,80px);overflow:hidden}
.u-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 78% 45%,rgba(26,109,255,.22),transparent 70%),radial-gradient(ellipse 40% 40% at 20% 90%,rgba(232,166,35,.08),transparent 70%)}
.u-hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(26,109,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(26,109,255,.07) 1px,transparent 1px);background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 70% 45%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 45%,#000 30%,transparent 80%)}
.u-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,80px);align-items:center;padding:0 clamp(16px,4vw,56px)}
.u-pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(61,220,132,.35);background:rgba(61,220,132,.08);padding:8px 14px;border-radius:999px;margin-bottom:22px}
.u-pill i{width:8px;height:8px;border-radius:50%;background:#3ddc84;animation:ping 2s infinite}
.u-title{font-family:var(--display);font-weight:400;font-size:clamp(64px,9.2vw,156px);line-height:.86;text-transform:uppercase;letter-spacing:-.005em}
.u-title .bl{color:var(--blue)}
.u-sub{font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:rgba(244,244,246,.8);max-width:560px;margin:22px 0 28px}
.u-ctas{display:flex;flex-wrap:wrap;gap:12px}
.u-price{margin-top:18px;font-size:14.5px;color:var(--muted)}
.u-price b{color:var(--gold);font-weight:600}
.u-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}
.u-trust li{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,244,246,.85);display:flex;align-items:center;gap:8px}
.u-trust li::before{content:"";width:14px;height:14px;border-radius:50%;background:#3ddc84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304210f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat}
.u-phone{justify-self:center;position:relative}
.u-phone-in{position:relative;width:clamp(230px,24vw,330px);aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#000;
  border:8px solid #15161a;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 100px -30px rgba(26,109,255,.6),0 20px 50px rgba(0,0,0,.5);transform:rotate(3deg)}
.u-phone-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.u-phone-in::after{content:"";position:absolute;top:10px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:999px;background:#000;z-index:2}
.u-phone figcaption{margin-top:18px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.u-phone .rec{display:inline-flex;align-items:center;gap:6px;color:#fff;margin-right:6px}
.u-phone .rec i{width:7px;height:7px;border-radius:50%;background:#ff3b3b;animation:blinkR 1s steps(1) infinite}
@media (max-width:900px){
  .u-hero-in{grid-template-columns:1fr}
  .u-phone{order:-1;margin-bottom:6px}
  .u-phone-in{width:min(58vw,250px);transform:none}
  .u-ctas .btn{flex:1 1 100%}
}

/* proof strip on its own rounded panel */
.u-stats{margin-top:0}

/* packages: two CTAs per card */
.pk .btn-wa,.pk .btn-wa-line{width:100%}
.pk-form{display:block;text-align:center;margin-top:12px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.pk-form:hover{color:#fff}

/* early-bird offer */
.u-early{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid rgba(232,166,35,.45);border-radius:var(--r-xl);padding:clamp(22px,3vw,34px) clamp(22px,3vw,40px);
  background:linear-gradient(120deg,rgba(232,166,35,.14),rgba(232,166,35,.02) 60%)}
.u-early-t{font-family:var(--display);font-size:clamp(34px,3.4vw,50px);line-height:1;color:var(--gold2);text-transform:uppercase}
.u-early-d{color:rgba(244,244,246,.8);font-size:15px;line-height:1.7;max-width:620px;margin-top:6px}

/* 3-step process */
.steps.steps3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.steps.steps3{grid-template-columns:1fr}}

/* work (Shorts feed) — same treatment the old #portfolio section had */
#radovi{padding-left:0;padding-right:0;overflow:hidden;background:var(--bg2);margin:14px var(--gut);border-radius:var(--r-xl);border:1px solid var(--line)}
#radovi>.container{padding:0 clamp(16px,4vw,56px)}
#radovi .sec-head{margin-bottom:clamp(24px,3vw,40px)}

/* safety chips */
.u-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:-30px}
.u-chips li{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);border-radius:999px;padding:9px 14px;display:flex;align-items:center;gap:8px;color:rgba(244,244,246,.9)}
.u-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}

/* deliverables */
.u-deliver{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.u-deliver>div{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;background:var(--card)}
.u-deliver b{display:block;font-family:var(--display);font-weight:400;font-size:46px;line-height:1;color:var(--blue)}
.u-deliver h4{font-size:16.5px;font-weight:600;margin:12px 0 8px}
.u-deliver p{color:var(--muted);font-size:14px;line-height:1.7}
@media (max-width:960px){.u-deliver{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.u-deliver{grid-template-columns:1fr}}

/* contact */
.u-ct-wa{margin-top:26px}
.u-form-t{font-family:var(--display);font-size:30px;line-height:1;text-transform:uppercase}

/* sticky mobile action bar */
.u-bar{display:none}
@media (max-width:760px){
  .u-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:160;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(5,5,6,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .35s var(--ease)}
  .u-bar.on{transform:none}
  .u-bar .btn{flex:1;padding:15px 12px}
  .u-bar .btn-wa{flex:1.6}
  .wa-float{display:none}
  body.u footer{padding-bottom:96px}
}