/* O nama (/sr/o-nama): proof stranica koja povezuje n8n Lab client delivery i VibeCode Academy. */

/* ---------- HERO ---------- */
.about-hero .hero-copy{display:grid;justify-items:start;gap:26px}
.about-hero .hero-copy h1{max-width:12.5em}
.accent-underline{position:relative;display:inline;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.12em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.hero-video{position:relative;align-self:center;width:100%;aspect-ratio:16/9;border:1px solid var(--border-strong);border-radius:var(--radius-xl);background:var(--inverse-bg);box-shadow:var(--shadow);overflow:hidden}
.hero-video button{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover}
.hero-video svg{position:absolute;top:50%;left:50%;width:min(68px,20%);height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));transition:transform .2s ease}
.hero-video button:hover svg{transform:translate(-50%,-50%) scale(1.08)}
.hero-video iframe{display:block;width:100%;height:100%;border:0}
.agency-proof{position:relative;display:grid;gap:28px;padding:clamp(28px,4vw,48px);border:1px solid var(--border-strong);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.agency-proof:before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-160px;top:-190px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%)}
.agency-proof:after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(135deg,#000,transparent 76%)}
.agency-top{display:flex;align-items:center;gap:16px}
.agency-symbol{width:62px;height:62px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:18px;background:var(--inverse-bg)}
.agency-symbol img{width:42px;height:42px;object-fit:contain}
.agency-top div{display:grid;gap:5px}.agency-top small{font:800 9px/1 var(--mono);letter-spacing:.12em;color:var(--text-muted)}
.agency-top strong{font-size:24px;line-height:1;letter-spacing:-.04em}
.agency-proof>p{max-width:500px;font-size:clamp(24px,2.3vw,34px);line-height:1.12;letter-spacing:-.035em;font-weight:800}
.agency-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--border);overflow:hidden}
.agency-metrics div{display:grid;gap:7px;align-content:end;min-height:116px;padding:18px;background:var(--bg-alt)}
.agency-metrics b{font:900 clamp(24px,2.5vw,34px)/1 var(--mono);letter-spacing:-.06em;color:var(--accent-text)}
.agency-metrics span{font-size:11px;line-height:1.35;color:var(--text-muted)}
.agency-flow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font:800 9px/1.2 var(--mono);letter-spacing:.08em;color:var(--text-muted)}
.agency-flow i{font-style:normal;color:var(--accent-text)}
.about-clients{margin-top:56px}

/* ---------- DELIVERY LOOP ---------- */
.split-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:64px}
.split-head .lede{justify-self:end}
.delivery-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:delivery}
.delivery-loop li{position:relative;min-width:0;display:grid;gap:16px;align-content:start;min-height:310px;padding:28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.delivery-loop li>b{font:900 44px/1 var(--mono);letter-spacing:-.08em;color:var(--accent-ink);opacity:.12}
.delivery-loop li .label{color:var(--text)}
.delivery-loop li h3{font-size:25px}
.delivery-loop li p{color:var(--text-muted);font-size:14px;line-height:1.65}
.delivery-loop li:after{content:"→";position:absolute;right:20px;top:24px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:900 13px/1 var(--mono)}
.delivery-loop li:last-child{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.delivery-loop li:last-child p,.delivery-loop li:last-child .label{color:var(--accent-ink);opacity:.75}
.delivery-loop li:last-child:after{background:var(--accent-ink);color:var(--accent)}

/* ---------- TIM ---------- */
.about-team{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about-person{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);min-height:430px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .35s}
.about-person:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.about-person>img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.88)}
.about-person>div{display:grid;gap:14px;align-content:center;padding:clamp(26px,3vw,40px)}
.about-person .label{color:var(--accent-text)}
.about-person h3{font-size:clamp(28px,2.5vw,38px);letter-spacing:-.045em}
.about-person p{color:var(--text-muted);font-size:15px;line-height:1.65}
.about-person ul{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.about-person li{padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-full);font:700 9px/1 var(--mono);color:var(--text-muted)}

/* ---------- KLIJENTSKI TESTIMONIALI ---------- */
.about-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proof-video{min-width:0;display:grid;gap:18px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .35s}
.proof-video:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.proof-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;background:var(--inverse-bg)}
.proof-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.proof-video>div:last-child{display:grid;gap:8px;padding:0 8px 10px}
.proof-video .label{color:var(--accent-text)}
.proof-video p{font-size:13px;color:var(--text-muted)}

/* ---------- DOGAĐAJI ---------- */
.events-section{background:var(--bg-alt)}
.event-mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.event-mosaic figure{position:relative;grid-column:span 4;min-height:360px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.event-mosaic figure.event-wide{grid-column:span 8}
.event-mosaic img{width:100%;height:100%;object-fit:cover;filter:saturate(.86);transition:scale .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.event-mosaic figure:hover img{scale:1.035;filter:saturate(1)}
.event-mosaic figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:7px;padding:48px 22px 22px;background:linear-gradient(transparent,rgba(7,8,7,.92));color:var(--inverse-text)}
.event-mosaic figcaption span{font:800 9px/1 var(--mono);letter-spacing:.12em;color:var(--accent)}
.event-mosaic figcaption b{font-size:19px;line-height:1.2}

/* ---------- LIVE BUILDS ---------- */
.build-proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.build-proof-grid article{min-width:0;display:grid;grid-template-columns:1.08fr .92fr;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .35s}
.build-proof-grid article:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.build-proof-grid img{width:100%;height:100%;min-height:250px;object-fit:cover}
.build-proof-grid article>div{display:grid;gap:11px;align-content:center;padding:26px}
.build-proof-grid .label{color:var(--text)}
.build-proof-grid p{color:var(--text-muted);font-size:13px;line-height:1.6}
.section-action{display:flex;justify-content:center;margin-top:34px}

/* ---------- FINAL ---------- */
.about-final{position:relative;padding-block:100px;background:var(--accent);color:var(--accent-ink);overflow:hidden}
.about-final:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(17,21,12,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(17,21,12,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 90%)}
.about-final-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end}
.about-final .label{color:var(--accent-ink);opacity:.65}
.about-final h2{margin-top:16px}.about-final h2 em{color:var(--accent-ink)}
.about-final-grid>div:last-child{display:grid;justify-items:start;gap:24px}
.about-final p{max-width:520px;font-size:17px;line-height:1.65}
.site .about-final-btn{background:var(--accent-ink);color:var(--accent)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .split-head{grid-template-columns:1fr;gap:20px}.split-head .lede{justify-self:start}
  .delivery-loop{grid-template-columns:1fr 1fr}
  .about-team{grid-template-columns:1fr}
  .about-person{min-height:400px}
  .about-videos{grid-template-columns:1fr 1fr}.about-videos article:last-child{grid-column:1/-1;max-width:600px}
  .build-proof-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .agency-proof{padding:24px;gap:22px}.agency-metrics{grid-template-columns:1fr}.agency-metrics div{min-height:88px}
  .agency-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;text-align:center;font-size:7px}
  .about-clients{margin-top:32px}
  .delivery-loop{grid-template-columns:1fr}.delivery-loop li{min-height:0}
  .about-person{grid-template-columns:1fr;min-height:0}.about-person>img{height:340px}.about-person>div{padding:24px}
  .about-videos{grid-template-columns:1fr}.about-videos article:last-child{grid-column:auto;max-width:none}
  .event-mosaic{grid-template-columns:1fr}.event-mosaic figure,.event-mosaic figure.event-wide{grid-column:auto;min-height:330px}
  .build-proof-grid article{grid-template-columns:1fr}.build-proof-grid img{min-height:200px}
  .about-final{padding-block:76px}.about-final-grid{grid-template-columns:1fr;gap:30px}
}
@media (prefers-reduced-motion:reduce){
  .hero-video svg,.about-person,.proof-video,.event-mosaic img,.build-proof-grid article{transition:none}
  .hero-video button:hover svg{transform:translate(-50%,-50%)}
  .about-person:hover,.proof-video:hover,.build-proof-grid article:hover{transform:none}
  .event-mosaic figure:hover img{scale:none}
}